import { useState, useEffect } from "react";
import { Avenant, Contrat, TypeAvenant } from "@/types/type";
import { formatDateForInput } from "@/utils/formatter";

type AvenantPanelProps = {
    avenant: Avenant | null;
    contrat: Contrat | null;
    onClose: () => void;
    onDelete: () => void;
    onSave: (form: {
        avenant_type: string;
        avenant_datedu: string;
        avenant_dateau: string;
        commentaire: string;
    }) => void;
};

function addOneDay(date?: string | null): string {
    if (!date) return "";

    const result = new Date(date);
    if (Number.isNaN(result.getTime())) return "";

    result.setDate(result.getDate() + 1);
    return result.toISOString().slice(0, 10);
}

export default function AvenantPanel({ avenant, contrat, onClose, onDelete, onSave }: AvenantPanelProps) {
    const [form, setForm] = useState({
        avenant_type: avenant?.avenant_type ?? "",
        avenant_datedu: formatDateForInput(avenant?.avenant_datedu),
        avenant_dateau: formatDateForInput(avenant?.avenant_dateau),
        commentaire: avenant?.commentaire ?? "",
    });
    const [typesAvenants, setTypesAvenants] = useState<TypeAvenant[]>([]);

    useEffect(() => {
        setForm({
            avenant_type: avenant?.avenant_type ?? "",
            avenant_datedu: formatDateForInput(avenant?.avenant_datedu),
            avenant_dateau: formatDateForInput(avenant?.avenant_dateau),
            commentaire: avenant?.commentaire ?? "",
        });
    }, [avenant]);

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

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

            const data = await res.json();
            setTypesAvenants(data.items ?? []);
        }

        fetchTypesAvenants();
    }, []);

    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">
                    {avenant ? "Modifier un avenant" : "Ajouter un avenant"}
                </h3>

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

            <div className="grid grid-cols-[130px_260px] gap-2 text-xs">
                <label>Type / Commentaire</label>
                <select
                    value={form.avenant_type}
                    onChange={(e) => {
                        const type = e.target.value;

                        setForm((prev) => ({
                            ...prev,
                            avenant_type: type,
                            avenant_datedu:
                                type === "Renouvellement de contrat"
                                    ? addOneDay(contrat?.DSP)
                                    : prev.avenant_datedu,
                        }));
                    }}
                    className="h-6 w-full border border-slate-400 bg-white px-2 text-xs"
                >
                    <option value="">Sélectionner un type</option>

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

                <label>Du</label>
                <input
                    type="date"
                    min={
                        form.avenant_type === "Renouvellement de contrat"
                            ? addOneDay(contrat?.DSP)
                            : formatDateForInput(contrat?.DAE)
                    }
                    value={form.avenant_datedu}
                    onChange={(e) =>
                        setForm({ ...form, avenant_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.avenant_datedu}
                    value={form.avenant_dateau}
                    onChange={(e) =>
                        setForm({ ...form, avenant_dateau: e.target.value })
                    }
                    className="h-6 w-full border border-slate-400 bg-white px-2 text-xs"
                />
            </div>
            <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 className="mt-2 flex justify-between">
                {avenant && (
                    <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">
                        Annuler
                    </button>

                    <button
                        type="button"
                        onClick={() => {
                            if (!form.avenant_type) {
                                alert("Veuillez sélectionner un type d'avenant.");
                                return;
                            }

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

                    </button>
                </div>
            </div>
        </div>
    );
}