import { useState, useEffect } from "react";
import { Absence } from "@/types/type";
import { formatDateForInput } from "@/utils/formatter";
import { TypeAbsence } from "@/types/type";

type AbsencePanelProps = {
    absence: Absence | null;
    onClose: () => void;
    onDelete: () => void;
    onSave: (form: {
        typeabsence: string;
        datedu: string;
        dateau: string;
        nbheures: string;
        revenu: boolean;
        commentaire: string;
    }) => void;
};

export default function AbsencePanel({
    absence,
    onClose,
    onDelete,
    onSave,
}: AbsencePanelProps) {
    const [form, setForm] = useState({
        typeabsence: absence?.typeabsence ?? "",
        datedu: formatDateForInput(absence?.datedu),
        dateau: formatDateForInput(absence?.dateau),
        nbheures: absence?.nbheures?.toString() ?? "",
        revenu: absence?.revenu ?? false,
        commentaire: absence?.commentaire ?? "",
    });
    const [typesAbsences, setTypesAbsences] = useState<TypeAbsence[]>([]);

    useEffect(() => {
        setForm({
            typeabsence: absence?.typeabsence ?? "",
            datedu: formatDateForInput(absence?.datedu),
            dateau: formatDateForInput(absence?.dateau),
            nbheures: absence?.nbheures?.toString() ?? "",
            revenu: absence?.revenu ?? false,
            commentaire: absence?.commentaire ?? "",
        });
    }, [absence]);

    useEffect(() => {
        async function fetchTypesAbsences() {
            const token = localStorage.getItem("token");

            const res = await fetch(
                `${process.env.NEXT_PUBLIC_API_URL}/api/types-absence`,
                {
                    headers: {
                        Authorization: `Bearer ${token}`,
                    },
                }
            );

            const data = await res.json();
            console.log(data);
            setTypesAbsences(data.items ?? []);

        }

        fetchTypesAbsences();
    }, []);

    return (
        <div className="w-[430px] border border-blue-300 bg-blue-50 p-3 shadow">
            <div className="mb-2 flex items-center justify-between">
                <h3 className="text-sm font-bold text-blue-700">
                    {absence ? "Modifier une absence" : "Ajouter une absence"}
                </h3>

                <button type="button" onClick={onClose} className="text-xs text-black">
                    ✕
                </button>
            </div>

            <div className="grid grid-cols-[130px_260px] gap-2 text-xs text-black">
                <label>Type d'absence</label>
                <select
                    value={form.typeabsence}
                    onChange={(e) =>
                        setForm((prev) => ({
                            ...prev,
                            typeabsence: e.target.value,
                        }))
                    }
                    className="h-6 w-full border border-slate-400 bg-white px-2 text-xs"
                >
                    <option value="">Sélectionner un type</option>

                    {typesAbsences.map((type) => (
                        <option
                            key={type.id}
                            value={type.typeabsence ?? ""}
                        >
                            {type.typeabsence}
                        </option>
                    ))}
                </select>

                <label>Du</label>
                <input
                    type="date"
                    value={form.datedu}
                    onChange={(e) =>
                        setForm((prev) => ({
                            ...prev,    
                            datedu: e.target.value,
                        }))
                    }
                    className="h-6 w-full border border-slate-400 bg-white px-2 text-xs"
                />

                <label>Au</label>
                <input
                    type="date"
                    min={form.datedu}
                    value={form.dateau}
                    onChange={(e) =>
                        setForm((prev) => ({
                            ...prev,
                            dateau: e.target.value,
                        }))
                    }
                    className="h-6 w-full border border-slate-400 bg-white px-2 text-xs"
                />
                {/*
                <label>Nb heures</label>
                <input
                    type="number"
                    min="0"
                    step="0.5"
                    value={form.nbheures}
                    onChange={(e) =>
                        setForm((prev) => ({
                            ...prev,
                            nb_jours: e.target.value,
                        }))
                    }
                    className="h-6 w-full border border-slate-400 bg-white px-2 text-xs"
                /> */}

                <label>Revenu</label>
                <label className="flex h-6 items-center gap-2">
                    <input
                        type="checkbox"
                        checked={form.revenu}
                        onChange={(e) =>
                            setForm((prev) => ({
                                ...prev,
                                revenu: e.target.checked,
                            }))
                        }
                    />
                    <span>Oui</span>
                </label>

                <label className="self-start pt-1">Commentaire</label>
                <textarea
                    value={form.commentaire}
                    onChange={(e) =>
                        setForm((prev) => ({
                            ...prev,
                            commentaire: e.target.value,
                        }))
                    }
                    rows={2}
                    className="w-full resize-y border border-slate-400 bg-white px-2 py-1 text-xs "
                    placeholder="Ajouter un commentaire..."
                />
            </div>

            <div className="mt-2 flex justify-between">
                {absence && (
                    <button
                        type="button"
                        onClick={onDelete}
                        className="border border-red-600 px-3 py-1 text-xs text-red-600 hover:bg-red-600 hover:text-white"
                    >
                        Supprimer
                    </button>
                )}

                <div className="flex justify-end gap-2">
                    <button
                        type="button"
                        onClick={onClose}
                        className="border px-3 py-1 text-xs text-black"
                    >
                        Annuler
                    </button>

                    <button
                        type="button"
                        onClick={() => {
                            if (!form.typeabsence) {
                                alert("Veuillez saisir un type d'absence.");
                                return;
                            }

                            onSave(form);
                        }}
                        className="bg-blue-600 px-3 py-1 text-xs text-white"
                    >
                        {absence ? "Modifier" : "Enregistrer"}
                    </button>
                </div>
            </div>
        </div>
    );
}