import { useState } from "react";
import { useSelector } from "react-redux";
import { RootState } from "../../store";
import PtoLeaveTab from './tabs/PtoLeaveTab';
import SickLeaveTab from './tabs/SickLeaveTab';
import AdjustmentTab from './tabs/AdjustmentTab';
import { useNavigate } from "react-router-dom";

type TabType = 'pto' | 'sick' | 'adjustment';

const ApplyLeaveAndAdjustmentsTime = () => {
    const [activeTab, setActiveTab] = useState<TabType>('pto');
    const [isSubmitting, setIsSubmitting] = useState(false); //  NEW
    const projects = useSelector((state: RootState) => state.projects.projectsData);

    const navigate = useNavigate()

    // ------- COMMON API CALL FOR BOTH TABS -------
    const submitLeave = async (payload: {
        dateFrom: string;
        dateTo: string;
        leaveType: "PTO" | "SICK";
        comment: string;
    }) => {
        try {
            setIsSubmitting(true);

            console.log("Leave  /sick Payload:", payload);

            const response = await window.electron.createPTOAndSickLeaveRequest(payload)
            console.log("Leave Payload:", response)
            if (response.success) {
                return { success: true };
            }

            return {
                success: false,
                message: response.message
            };
        } catch (err) {
            console.error(err);
            return { success: false, message: "Request failed" };
        } finally {
            setIsSubmitting(false);
        }
    };


    const handleBack = () => {
        navigate('/dashboard/leave-adjustments')
    }
    return (
        <>
            <div className="max-h-screen">
                <div className="w-full mx-auto">
                    <div className='mb-3 flex justify-between items-center'>
                        <h1 className="text-mb font-bold ">Apply Leave & Adjust Timesheet</h1>
                        <button className="btn btn-xs btn-error text-base-content " onClick={handleBack}>Back</button>
                    </div>
                    {/* Tabs — Disabled while submitting */}
                    <div role="tablist" className="tabs tabs-border  w-full mb-1 opacity-100">
                        <a
                            role="tab"
                            className={`tab text-xs font-semibold ${activeTab === "pto" ? "tab-active text-primary" : ""
                                } ${isSubmitting ? "pointer-events-none opacity-50" : ""}`}
                            onClick={() => setActiveTab("pto")}
                        >
                            PTO Leave
                        </a>

                        <a
                            role="tab"
                            className={`tab text-xs font-semibold ${activeTab === "sick" ? "tab-active text-primary" : ""
                                } ${isSubmitting ? "pointer-events-none opacity-50" : ""}`}
                            onClick={() => setActiveTab("sick")}
                        >
                            Sick Leave
                        </a>

                        <a
                            role="tab"
                            className={`tab text-xs font-semibold ${activeTab === "adjustment" ? "tab-active text-primary" : ""
                                } ${isSubmitting ? "pointer-events-none opacity-50" : ""}`}
                            onClick={() => setActiveTab("adjustment")}
                        >
                            Adjustment Submission
                        </a>
                    </div>

                    {/* Main Container */}
                    <div className="rounded-lg bg-base-100 overflow-hidden">
                        <div className="px-8 py-4 overflow-y-auto no-scrollbar max-h-[81vh]">

                            {activeTab === "pto" && (
                                <PtoLeaveTab submitLeave={submitLeave} isSubmitting={isSubmitting} />
                            )}

                            {activeTab === "sick" && (
                                <SickLeaveTab submitLeave={submitLeave} isSubmitting={isSubmitting} />
                            )}

                            {activeTab === "adjustment" && (
                                <AdjustmentTab projects={projects} />
                            )}

                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}

export default ApplyLeaveAndAdjustmentsTime