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

export type VisiteMedicaleForm = {
  datedde: string;
  dvp: string;
  obv: string;
  dateprochainevm: string;
  apt: string;
  commentaire: string;
  daterappel: string;
};

type VisitesMedicalesPanelProps = {
  visite: VisiteMedicale | null;
  onClose: () => void;
  onDelete: () => void;
  onSave: (form: VisiteMedicaleForm) => void;
};

const objetsVisite = [
  "Embauche",
  "Annuelle",
  "Retour longue maladie",
  "Retour AT",
  "Aptitude Cariste",
  "Annuelle+Cariste",
  "Embauche+Cariste",
  "À notre demande",
  "À la demande du médecin",
  "À la demande du salarié",
  "Retour congés maternité",
  "Autres",
];

const aptitudes = [
  "En attente",
  "Apte",
  "Annulée",
  "Absent",
  "Inaptitude Provisoire",
  "Inaptitude définitive",
];

function formatDateTimeForInput(value?: string | null) {
  if (!value) return "";

  return value.replace(" ", "T").slice(0, 16);
}

function addYearsToDate(value: string, years: number) {
  const datePart = value.slice(0, 10);
  const [year, month, day] = datePart.split("-").map(Number);

  if (!year || !month || !day) {
    return "";
  }

  const targetYear = year + years;
  const lastDayOfMonth = new Date(targetYear, month, 0).getDate();
  const targetDay = Math.min(day, lastDayOfMonth);

  return [
    targetYear,
    String(month).padStart(2, "0"),
    String(targetDay).padStart(2, "0"),
  ].join("-");
}

export default function VisitesMedicalesPanel({
  visite,
  onClose,
  onDelete,
  onSave,
}: VisitesMedicalesPanelProps) {
  const [form, setForm] = useState<VisiteMedicaleForm>({
    datedde: formatDateForInput(visite?.datedde),
    dvp: formatDateTimeForInput(visite?.dvp),
    obv: visite?.obv ?? "",
    dateprochainevm: formatDateForInput(visite?.dateprochainevm),
    apt: visite?.apt ?? "En attente",
    commentaire: visite?.commentaire ?? "",
    daterappel: formatDateForInput(visite?.daterappel),
  });

  useEffect(() => {
    setForm({
      datedde: formatDateForInput(visite?.datedde),
      dvp: formatDateTimeForInput(visite?.dvp),
      obv: visite?.obv ?? "",
      dateprochainevm: formatDateForInput(visite?.dateprochainevm),
      apt: visite?.apt ?? "En attente",
      commentaire: visite?.commentaire ?? "",
      daterappel: formatDateForInput(visite?.daterappel),
    });
  }, [visite]);

  function calculateNextVisit(years: number) {
    if (!form.dvp) {
      alert("Veuillez d'abord renseigner la date de visite prévue.");
      return;
    }

    setForm((previous) => ({
      ...previous,
      dateprochainevm: addYearsToDate(previous.dvp, years),
    }));
  }

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

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

      <div className="grid grid-cols-[170px_1fr] items-center gap-2 text-xs text-black">
        <label>Date de demande</label>
        <input
          type="date"
          value={form.datedde}
          onChange={(event) =>
            setForm((previous) => ({
              ...previous,
              datedde: event.target.value,
            }))
          }
          className="h-7 border border-slate-400 bg-white px-2"
        />

        <label>Date de visite prévue</label>
        <input
          type="datetime-local"
          value={form.dvp}
          onChange={(event) =>
            setForm((previous) => ({
              ...previous,
              dvp: event.target.value,
            }))
          }
          className="h-7 border border-slate-400 bg-white px-2"
        />

        <label>Objet de la visite</label>
        <div>
          <select
  value={form.obv}
  onChange={(event) =>
    setForm((previous) => ({
      ...previous,
      obv: event.target.value,
    }))
  }
  className="h-7 w-full border border-slate-400 bg-white px-2"
>
  <option value="">Sélectionner un objet</option>

  {objetsVisite.map((objet) => (
    <option key={objet} value={objet}>
      {objet}
    </option>
  ))}
</select>
        </div>

        <label>Date de prochaine visite</label>
        <div className="flex items-center gap-2">
          <input
            type="date"
            min={form.dvp.slice(0, 10) || undefined}
            value={form.dateprochainevm}
            onChange={(event) =>
              setForm((previous) => ({
                ...previous,
                dateprochainevm: event.target.value,
              }))
            }
            className="h-7 flex-1 border border-slate-400 bg-white px-2"
          />

          <button
            type="button"
            onClick={() => calculateNextVisit(2)}
            className="h-7 border border-blue-600 px-2 text-blue-700 hover:bg-blue-600 hover:text-white"
          >
            +2
          </button>

          <button
  type="button"
  onClick={() => calculateNextVisit(3)}
  className="h-7 border border-blue-600 px-2 text-blue-700 hover:bg-blue-600 hover:text-white"
>
  +3
</button>

          <button
            type="button"
            onClick={() => calculateNextVisit(5)}
            className="h-7 border border-blue-600 px-2 text-blue-700 hover:bg-blue-600 hover:text-white"
          >
            +5
          </button>
        </div>

        <label>Aptitude</label>
        <div>
          <select
  value={form.apt}
  onChange={(event) =>
    setForm((previous) => ({
      ...previous,
      apt: event.target.value,
    }))
  }
  className="h-7 w-full border border-slate-400 bg-white px-2"
>
  <option value="">Sélectionner une aptitude</option>

  {aptitudes.map((aptitude) => (
    <option key={aptitude} value={aptitude}>
      {aptitude}
    </option>
  ))}
</select>
        </div>

        <label>Date de rappel</label>
        <input
          type="date"
          value={form.daterappel}
          onChange={(event) =>
            setForm((previous) => ({
              ...previous,
              daterappel: event.target.value,
            }))
          }
          className="h-7 border border-slate-400 bg-white px-2"
        />

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

      <div className="mt-3 flex justify-between">
        <div>
          {visite && (
            <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>

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

          <button
            type="button"
            onClick={() => {
              if (!form.dvp) {
                alert("Veuillez renseigner la date de visite prévue.");
                return;
              }

              if (!form.obv.trim()) {
                alert("Veuillez renseigner l'objet de la visite.");
                return;
              }

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