import { useEffect, useState } from "react";
import { Salarie, VisiteMedicale } from "@/types/type";
import { formatDate } from "@/utils/formatter";
import VisitesMedicalesPanel, {
  VisiteMedicaleForm,
} from "./VisitesMedicalesPanel";

type VisitesMedicalesTabProps = {
  salarie: Salarie | null;
};

export default function VisitesMedicalesTab({
  salarie,
}: VisitesMedicalesTabProps) {
  const [visites, setVisites] = useState<VisiteMedicale[]>([]);
  const [selectedVisite, setSelectedVisite] =
    useState<VisiteMedicale | null>(null);
  const [isPanelOpen, setIsPanelOpen] = useState(false);
  const [loading, setLoading] = useState(false);

  async function refreshVisitesMedicales() {
    if (!salarie?.COS) {
      setVisites([]);
      return;
    }

    setLoading(true);

    try {
      const token = localStorage.getItem("token");

      const response = await fetch(
        `${process.env.NEXT_PUBLIC_API_URL}/api/employes/${salarie.COS}/visites-medicales`,
        {
          headers: {
            Authorization: `Bearer ${token}`,
          },
          cache: "no-store",
        }
      );

      if (!response.ok) {
        setVisites([]);
        return;
      }

      const data = await response.json();
      setVisites(data.items ?? []);
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    setSelectedVisite(null);
    setIsPanelOpen(false);
    refreshVisitesMedicales();
  }, [salarie?.COS]);

  async function handleSave(form: VisiteMedicaleForm) {
    if (!salarie?.COS) return;

    const token = localStorage.getItem("token");

    const body = {
      id_salarie: salarie.COS,
      datedde: form.datedde || null,
      dvp: form.dvp || null,
      obv: form.obv.trim() || null,
      apt: form.apt.trim() || null,
      commentaire: form.commentaire.trim() || null,
      dateprochainevm: form.dateprochainevm || null,
      daterappel: form.daterappel || null,
    };

    const url = selectedVisite
      ? `${process.env.NEXT_PUBLIC_API_URL}/api/visites-medicales/${selectedVisite.id}`
      : `${process.env.NEXT_PUBLIC_API_URL}/api/visites-medicales`;

    const method = selectedVisite ? "PUT" : "POST";

    const response = await fetch(url, {
      method,
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${token}`,
      },
      body: JSON.stringify(body),
    });

    const result = await response.json().catch(() => null);

    console.log("SAVE VISITE STATUS =", response.status);
    console.log("SAVE VISITE BODY =", body);
    console.log("SAVE VISITE RESULT =", result);

    if (!response.ok) {
      alert(
        result?.message ??
          "Erreur lors de l'enregistrement de la visite médicale."
      );
      return;
    }

    setSelectedVisite(null);
    setIsPanelOpen(false);
    await refreshVisitesMedicales();
  }

  async function handleDelete() {
    if (!selectedVisite) return;

    const confirmed = confirm("Supprimer cette visite médicale ?");

    if (!confirmed) return;

    const token = localStorage.getItem("token");

    const response = await fetch(
      `${process.env.NEXT_PUBLIC_API_URL}/api/visites-medicales/${selectedVisite.id}`,
      {
        method: "DELETE",
        headers: {
          Authorization: `Bearer ${token}`,
        },
      }
    );

    if (!response.ok) {
      alert("Erreur lors de la suppression de la visite médicale.");
      return;
    }

    setSelectedVisite(null);
    setIsPanelOpen(false);
    await refreshVisitesMedicales();
  }

  function handleConvocation(visite: VisiteMedicale) {
    console.log("VISITE À CONVOQUER =", visite);

    alert(
      "La génération et l’envoi de la convocation seront ajoutés prochainement."
    );
  }

  return (
    <section className="flex max-h-[700px] w-full flex-col border border-slate-400 bg-white">
      <div className="flex items-center justify-between border-b border-slate-400 bg-slate-100 px-2 py-1">
        <h3 className="text-xs font-bold text-blue-700">
          Visites médicales ({visites.length})
        </h3>

        <button
          type="button"
          onClick={() => {
            setSelectedVisite(null);
            setIsPanelOpen(true);
          }}
          className="border border-blue-700 px-2 py-0.5 text-xs text-blue-700 hover:bg-blue-700 hover:text-white"
        >
          + Ajouter
        </button>
      </div>

      <div className="overflow-auto">
        <div className="min-w-[1100px]">
          <div className="sticky top-0 z-10 grid grid-cols-[110px_120px_180px_130px_110px_1fr_90px_110px] border-b border-slate-400 bg-slate-50 px-2 py-1 text-xs font-semibold text-slate-700">
            <span>Date demande</span>
            <span>Visite prévue</span>
            <span>Objet de la visite</span>
            <span>Prochaine visite</span>
            <span>Aptitude</span>
            <span>Commentaire</span>
            <span>Convocation</span>
            <span>Rappel le</span>
          </div>

          <div className="max-h-[650px] overflow-y-auto">
            {loading ? (
              <p className="px-2 py-3 text-xs text-slate-500">
                Chargement des visites médicales...
              </p>
            ) : visites.length === 0 ? (
              <p className="px-2 py-3 text-xs text-slate-500">
                Aucune visite médicale pour ce salarié.
              </p>
            ) : (
              visites.map((visite) => (
                <div
                  key={visite.id}
                  role="button"
                  tabIndex={0}
                  onClick={() => {
                    setSelectedVisite(visite);
                    setIsPanelOpen(true);
                  }}
                  onKeyDown={(event) => {
                    if (event.target !== event.currentTarget) return;

                    if (event.key === "Enter" || event.key === " ") {
                      setSelectedVisite(visite);
                      setIsPanelOpen(true);
                    }
                  }}
                  className="grid w-full cursor-pointer grid-cols-[110px_120px_180px_130px_110px_1fr_90px_110px] items-center border-b border-slate-200 px-2 py-1 text-left text-xs text-black hover:bg-slate-100"
                >
                  <span>{formatDate(visite.datedde)}</span>
                  <span>{formatDate(visite.dvp)}</span>

                  <span className="truncate">
                    {visite.obv ?? "-"}
                  </span>

                  <span>{formatDate(visite.dateprochainevm)}</span>
                  <span>{visite.apt ?? "-"}</span>

                  <span
                    className="truncate"
                    title={visite.commentaire ?? ""}
                  >
                    {visite.commentaire ?? ""}
                  </span>

                  <span>
                    <button
                      type="button"
                      onClick={(event) => {
                        event.stopPropagation();
                        handleConvocation(visite);
                      }}
                      className="border border-blue-600 bg-blue-50 px-2 py-0.5 text-[11px] font-semibold text-blue-700 hover:bg-blue-600 hover:text-white"
                      title="Préparer la convocation"
                    >
                      Convoc
                    </button>
                  </span>

                  <span>{formatDate(visite.daterappel)}</span>
                </div>
              ))
            )}
          </div>
        </div>
      </div>

      {isPanelOpen && (
        <VisitesMedicalesPanel
          visite={selectedVisite}
          onClose={() => {
            setSelectedVisite(null);
            setIsPanelOpen(false);
          }}
          onDelete={handleDelete}
          onSave={handleSave}
        />
      )}
    </section>
  );
}