"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import {
  Salarie,
  Alerte,
  User,
  DisciplinaireDashboard,
  AnniversaireDashboard,
} from "@/types/type";
import Link from "next/link";

type DashboardUser = User & {
  access?: {
    permissions?: {
      dashboard?: { canRead: boolean; canWrite: boolean };
      parametres?: { canRead: boolean; canWrite: boolean };
      impressions?: { canRead: boolean; canWrite: boolean };
    };
  };
};

export default function DashboardPage() {
  const router = useRouter();
  const [user, setUser] = useState<DashboardUser | null>(null);
  const [salaries, setSalaries] = useState<Salarie[]>([]);
  const [search, setSearch] = useState("");
  const [alertes, setAlertes] = useState<Alerte[]>([]);
  const [alerteSearch, setAlerteSearch] = useState("");
  const [disciplinaires, setDisciplinaires] = useState<
    DisciplinaireDashboard[]
  >([]);
  const [disciplinairesLoading, setDisciplinairesLoading] = useState(false);
  const [anniversaires, setAnniversaires] = useState<AnniversaireDashboard[]>(
    [],
  );
  const [anniversairesLoading, setAnniversairesLoading] = useState(false);

  const nbSalariesEnCours = salaries.filter((s) => s.Actif === true).length;

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

      const response = await fetch(
        `${process.env.NEXT_PUBLIC_API_URL}/api/employes`,
        {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        },
      );

      const data = await response.json();
      console.log(data);
      setSalaries(data.items ?? []);
    }

    fetchSalaries();
  }, []);

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

      const response = await fetch(
        `${process.env.NEXT_PUBLIC_API_URL}/api/alertes`,
        {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        },
      );

      if (!response.ok) {
        console.error("Erreur lors du chargement des alertes");
        return;
      }

      const data = await response.json();
      console.log("ALERTES DASHBOARD =", data);

      setAlertes(data.items ?? []);
    }

    fetchAlertes();
  }, []);

  useEffect(() => {
    async function fetchDisciplinaires() {
      const token = localStorage.getItem("token");
      setDisciplinairesLoading(true);

      try {
        const response = await fetch(
          `${process.env.NEXT_PUBLIC_API_URL}/api/dashboard/disciplinaires`,
          {
            headers: {
              Authorization: `Bearer ${token}`,
            },
            cache: "no-store",
          },
        );

        if (!response.ok) {
          console.error("Erreur lors du chargement des disciplinaires");
          setDisciplinaires([]);
          return;
        }

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

    fetchDisciplinaires();
  }, []);

  useEffect(() => {
    async function fetchAnniversaires() {
      const token = localStorage.getItem("token");
      setAnniversairesLoading(true);

      try {
        const response = await fetch(
          `${process.env.NEXT_PUBLIC_API_URL}/api/dashboard/anniversaires`,
          {
            headers: {
              Authorization: `Bearer ${token}`,
            },
            cache: "no-store",
          },
        );

        if (!response.ok) {
          console.error("Erreur lors du chargement des anniversaires");
          setAnniversaires([]);
          return;
        }

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

    fetchAnniversaires();
  }, []);

  const filteredSalaries = salaries.filter((salarie) => {
    const fullName = `${salarie.NSA ?? ""} ${salarie.PRE ?? ""}`.toLowerCase();
    return fullName.includes(search.toLowerCase());
  });

  const canAccessSettings =
    user?.role === "super_admin" ||
    user?.access?.permissions?.parametres?.canRead === true;
  const canReadImpressions =
    user?.role === "super_admin" ||
    user?.access?.permissions?.impressions?.canRead === true;

  useEffect(() => {
    let cancelled = false;

    async function synchroniserUtilisateur() {
      const token = localStorage.getItem("token");

      if (!token) {
        router.push("/login");
        return;
      }

      try {
        const response = await fetch(
          `${process.env.NEXT_PUBLIC_API_URL}/api/auth/me`,
          {
            headers: {
              Authorization: `Bearer ${token}`,
            },
            cache: "no-store",
          },
        );

        if (!response.ok) {
          throw new Error("Session invalide");
        }

        const data = await response.json();

        if (cancelled) return;

        setUser(data.user);
        localStorage.setItem("user", JSON.stringify(data.user));
      } catch {
        localStorage.removeItem("token");
        localStorage.removeItem("user");
        router.push("/login");
      }
    }

    void synchroniserUtilisateur();

    return () => {
      cancelled = true;
    };
  }, [router]);

  function formatDate(date: string | null | undefined) {
    if (!date) return "-";

    return new Date(date).toLocaleDateString("fr-FR");
  }

  const handleLogout = () => {
    localStorage.removeItem("token");
    localStorage.removeItem("user");

    window.location.href = "/login";
  };

  const filteredAlertes = alertes
    .filter((alerte) => !alerte.fait)
    .filter((alerte) => {
      const recherche = alerteSearch.toLowerCase().trim();

      const contenu = [
        alerte.etablissement,
        alerte.employe?.NSA ?? alerte.nom,
        alerte.employe?.PRE ?? alerte.prenom,
        alerte.contrat,
        alerte.libalerte,
      ]
        .filter(Boolean)
        .join(" ")
        .toLowerCase();

      return contenu.includes(recherche);
    });
  return (
    <main className="flex h-screen flex-col overflow-hidden bg-slate-100 p-4">
      {/* Barre supérieure */}
      <header className="mb-4 flex shrink-0 items-center justify-end gap-4">
        {canAccessSettings && (
          <button
            type="button"
            onClick={() => router.push("/parametres")}
            className="rounded-md border border-blue-500 bg-white px-5 py-2 font-semibold text-blue-600 shadow transition hover:bg-blue-50"
          >
            Paramètres
          </button>
        )}

        {canReadImpressions && (
          <>
            <button
              type="button"
              onClick={() => router.push("/impressions/documents-automatiques")}
              title="Générer un document automatique"
              className="rounded-md border border-blue-500 bg-white px-5 py-2 font-semibold text-blue-600 shadow transition hover:bg-blue-50"
            >
              Documents
            </button>
            <button
              type="button"
              onClick={() => router.push("/impressions/salaries-en-cours")}
              title="Afficher la liste imprimable des salariés en cours"
              className="rounded-md bg-white px-4 py-2 shadow transition hover:bg-sky-50 hover:ring-2 hover:ring-sky-300"
            >
              <p className="text-xs text-slate-500">Nb salariés en cours</p>
              <p className="text-center font-bold text-black">
                {nbSalariesEnCours}
              </p>
            </button>
          </>
        )}

        <button
          type="button"
          onClick={handleLogout} className="rounded-md bg-blue-500 px-6 py-2 font-semibold text-white shadow hover:bg-blue-600">
          Quitter
        </button>
      </header>
      <div className="grid min-h-0 flex-1 grid-cols-[260px_1fr_320px_320px] gap-4">
        {/* Salariés */}
        <section className="flex min-h-0 flex-col overflow-hidden rounded-lg bg-white p-4 shadow">
          <h2 className="mb-4 text-lg font-bold text-slate-800">Salariés</h2>
          <input
            type="text"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            placeholder="Rechercher un salarié..."
            className="mb-3 w-full rounded border border-slate-300 px-3 py-2 text-sm text-black"
          />

          <ul className="min-h-0 flex-1 space-y-1 overflow-y-auto">
            {filteredSalaries.length === 0 ? (
              <p className="text-sm text-slate-500">Aucun salarié trouvé.</p>
            ) : (
              filteredSalaries.map((salarie) => (
                <li key={salarie.COS}>
                  <Link
                    href={`/employes/${salarie.COS}`}
                    className="block rounded px-2 py-1 text-sm text-black hover:bg-sky-100 whitespace-nowrap"
                  >
                    {[salarie.NSA, salarie.PRE].filter(Boolean).join(" ")}
                  </Link>
                </li>
              ))
            )}
          </ul>
        </section>

        {/* Alertes */}
        <section className="flex min-h-0 flex-col overflow-hidden rounded-lg bg-white p-4 shadow">
          <h2 className="mb-4 text-center text-2xl font-bold text-blue-600">
            Alertes
          </h2>
          <input
            type="text"
            value={alerteSearch}
            onChange={(e) => setAlerteSearch(e.target.value)}
            placeholder="Rechercher une alerte..."
            className="mb-3 w-full rounded border border-slate-300 px-3 py-2 text-sm text-black"
          />

          <div className="min-h-0 flex-1 overflow-auto">
            <table className="w-full border-separate border-spacing-0 text-sm">
              <thead>
                <tr>
                  <th className="sticky top-0 z-10 border-b border-l border-t border-black bg-sky-100 px-2 py-1 text-left text-black last:border-r">
                    Etablissement
                  </th>
                  <th className="sticky top-0 z-10 border-b border-l border-t border-black bg-sky-100 px-2 py-1 text-left text-black last:border-r">
                    Nom
                  </th>
                  <th className="sticky top-0 z-10 border-b border-l border-t border-black bg-sky-100 px-2 py-1 text-left text-black last:border-r">
                    Prénom
                  </th>
                  <th className="sticky top-0 z-10 border-b border-l border-t border-black bg-sky-100 px-2 py-1 text-left text-black last:border-r">
                    Contrat
                  </th>
                  <th className="sticky top-0 z-10 border-b border-l border-t border-black bg-sky-100 px-2 py-1 text-left text-black last:border-r">
                    Date Embauche
                  </th>
                  <th className="sticky top-0 z-10 border-b border-l border-t border-black bg-sky-100 px-2 py-1 text-left text-black last:border-r">
                    Alerte
                  </th>
                  <th className="sticky top-0 z-10 border-b border-l border-t border-black bg-sky-100 px-2 py-1 text-left text-black last:border-r">
                    Priorité
                  </th>
                </tr>
              </thead>

              <tbody>
                {filteredAlertes.map((alerte) => (
                  <tr
                    key={alerte.id}
                    onClick={() => {
                      if (alerte.id_salarie) {
                        router.push(
                          `/employes/${alerte.id_salarie}?tab=alertes`,
                        );
                      }
                    }}
                    className={`bg-sky-50 hover:bg-sky-100 ${alerte.id_salarie ? "cursor-pointer" : ""
                      }`}
                  >
                    <td className="border-b border-l border-black px-2 py-1 text-black last:border-r">
                      {" "}
                      {alerte.etablissement}
                    </td>

                    <td className="border-b border-l border-black px-2 py-1 text-black last:border-r">
                      {" "}
                      {alerte.employe?.NSA ?? alerte.nom ?? "-"}
                    </td>

                    <td className="border-b border-l border-black px-2 py-1 text-black last:border-r">
                      {" "}
                      {alerte.employe?.PRE ?? alerte.prenom ?? "-"}
                    </td>

                    <td className="border-b border-l border-black px-2 py-1 text-black last:border-r">
                      {" "}
                      {alerte.contrat}
                    </td>

                    <td className="border-b border-l border-black px-2 py-1 text-black last:border-r">
                      {" "}
                      {formatDate(alerte.dateembauche)}
                    </td>

                    <td className="border-b border-l border-black px-2 py-1 text-black last:border-r">
                      {" "}
                      {alerte.libalerte}
                    </td>

                    <td className="border-b border-l border-black px-2 py-1 text-black last:border-r">
                      {" "}
                      -
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </section>
        {/* Anniversaires */}
        <section className="flex min-h-0 flex-col overflow-hidden rounded-lg bg-white p-4 shadow">
          <h2 className="mb-4 text-center text-2xl font-bold text-green-600">
            Anniversaires ({anniversaires.length})
          </h2>

          <div className="min-h-0 flex-1 overflow-auto">
            <table className="w-full border-collapse text-sm">
              <thead>
                <tr className="bg-yellow-100">
                  <th
                    scope="col"
                    className="border px-2 py-1 text-left text-black"
                  >
                    Nom
                  </th>
                  <th
                    scope="col"
                    className="border px-2 py-1 text-left text-black"
                  >
                    Age
                  </th>
                  <th
                    scope="col"
                    className="border px-2 py-1 text-left text-black"
                  >
                    Date
                  </th>
                </tr>
              </thead>
              <tbody>
                {anniversairesLoading ? (
                  <tr>
                    <td colSpan={3} className="border px-2 py-3 text-slate-500">
                      Chargement des anniversaires...
                    </td>
                  </tr>
                ) : anniversaires.length === 0 ? (
                  <tr>
                    <td colSpan={3} className="border px-2 py-3 text-slate-500">
                      Aucun anniversaire dans les 30 prochains jours.
                    </td>
                  </tr>
                ) : (
                  anniversaires.map((anniversaire) => (
                    <tr
                      key={anniversaire.cos}
                      onClick={() =>
                        router.push(`/employes/${anniversaire.cos}`)
                      }
                      className="cursor-pointer bg-yellow-50 hover:bg-yellow-100"
                      title={
                        anniversaire.jours_restants === 0
                          ? "Anniversaire aujourd'hui"
                          : `Dans ${anniversaire.jours_restants} jour(s)`
                      }
                    >
                      <td className="border px-2 py-1 text-black">
                        {[anniversaire.nom, anniversaire.prenom]
                          .filter(Boolean)
                          .join(" ")}
                      </td>
                      <td className="border px-2 py-1 text-black">
                        {anniversaire.age} ans
                      </td>
                      <td className="border px-2 py-1 text-black">
                        {formatDate(anniversaire.date_anniversaire)}
                      </td>
                    </tr>
                  ))
                )}
              </tbody>
            </table>
          </div>
        </section>

        {/* Disciplinaire */}
        <section className="flex min-h-0 flex-col overflow-hidden rounded-lg bg-white p-4 shadow">
          <h2 className="mb-4 text-center text-2xl font-bold text-red-600">
            Disciplinaire
          </h2>

          <div className="min-h-0 flex-1 space-y-2 overflow-y-auto">
            {disciplinairesLoading ? (
              <p className="text-sm text-slate-500">
                Chargement des alertes disciplinaires...
              </p>
            ) : disciplinaires.length === 0 ? (
              <p className="text-sm text-slate-500">
                Aucune alerte disciplinaire en cours.
              </p>
            ) : (
              disciplinaires.map((disciplinaire) => (
                <Link
                  key={disciplinaire.id}
                  href={`/employes/${disciplinaire.num_salarie}?tab=sanctions`}
                  className="block border border-red-300 bg-red-50 p-2 text-xs text-black hover:bg-red-100"
                >
                  <p className="font-bold text-red-700">
                    {[disciplinaire.employe.PRE, disciplinaire.employe.NSA]
                      .filter(Boolean)
                      .join(" ")}
                  </p>

                  <p className="mt-1 font-semibold">
                    {disciplinaire.sanction ?? "Sanction non renseignée"}
                  </p>

                  {disciplinaire.date_buttoir && (
                    <p>
                      {disciplinaire.libelle_date_buttoir ?? "Date butoir"} :{" "}
                      {formatDate(disciplinaire.date_buttoir)}
                    </p>
                  )}

                  {disciplinaire.motif && (
                    <p className="mt-1" title={disciplinaire.motif}>
                      Motif : {disciplinaire.motif}
                    </p>
                  )}

                  {disciplinaire.commentaire && (
                    <p
                      className="mt-1 text-slate-600"
                      title={disciplinaire.commentaire}
                    >
                      {disciplinaire.commentaire}
                    </p>
                  )}
                </Link>
              ))
            )}
          </div>
        </section>
      </div>
    </main>
  );
}