"use client";
import { useRefData } from "../../../app/hooks/useRefData";
import { Input, Select } from "../FormsFieldsTypes";
import { getDateError, computeDuree, formatDuree } from "../../../app/utils/validationUsagerForm";

interface ExperienceFormation {
  typeExperienceFormation: string;
  typeContrat: string;
  description: string;
  debut: string;
  fin: string;
  duree: number;
  motifDepart: string;
  error: any;
}

interface Props {
  data: ExperienceFormation[];
  onChange: (field: string, value: any) => void;
}

export default function ExperienceFormationTable({ data, onChange }: Props) {
  const type_experience = useRefData("type_experience");
  const type_contrat = useRefData("type_contrat");
  const motif_depart = useRefData("motif_depart");
  const rows = data || [];

  const handleChange = (index: number, field: keyof ExperienceFormation, value: any) => {
    const updated = [...rows];
    updated[index] = {
      ...updated[index],
      [field]: value
    };

    const { debut, fin } = updated[index];

    // Recalculer durée si dates changent
    if (field === "debut" || field === "fin") {
      const error = getDateError(debut, fin);
      updated[index].error = error || undefined;

      if (!error) {
        updated[index].duree = computeDuree(updated[index].debut, updated[index].fin);
      }
      else {
        updated[index].duree = 0;
      }
    }

    onChange(
      "experiencesFormations",
      updated
    );
  };

  const addRow = () => {
    onChange("experiencesFormations", [
      ...rows,
      {
        typeExperienceFormation: "", typeContrat: "", description: "",
        debut: "", fin: "", duree: 0, motifDepart: ""
      },
    ]);
  };

  const removeRow = (index: number) => {
    const updated = [...rows];
    updated.splice(index, 1);
    onChange("experiencesFormations", updated);
  };

  return (
    <div className="bg-white rounded-xl border border-[#dce8e2] overflow-hidden mt-2">
      <div className="flex items-center justify-between px-2 py-2 border-b border-[#eef3f0]">
        <div>
          <h2 className="text-sm font-semibold text-[#1f5f4a]">
            Expériences & formations
          </h2>

          <p className="text-xs text-[#6b7f77]">
            Historique des formations, stages et expériences professionnelles.
          </p>
        </div>

        <button
          onClick={addRow}
          className="inline-flex items-center gap-1
      px-1 py-1
      rounded-xl
      bg-gradient-to-r from-[#2f7d5f] to-[#3f9b74]
      text-white font-semibold
      shadow-md
      transition-all
      hover:-translate-y-0.5
      hover:shadow-lg
      cursor-pointer"
        >
          + Ajouter une expérience
        </button>
      </div>
      <div className="overflow-x-auto">
        <table className="w-full text-xs">
          <thead>
            <tr className="bg-[#f4f8f6] text-[#2f5d4b]">
              <th className="px-4 py-4 text-left font-semibold">Type expérience/formation</th>
              <th className="px-4 py-4 text-left font-semibold">Type contrat</th>
              <th className="px-4 py-4 text-left font-semibold min-w-[320px]">Description (nom école/entreprise, intitulé de métier/poste, missions)</th>
              <th className="px-4 py-4 text-left font-semibold">Début</th>
              <th className="px-4 py-4 text-left font-semibold">Fin</th>
              <th className="px-4 py-4 text-left font-semibold">Durée (mois)</th>
              <th className="px-4 py-4 text-left font-semibold">Motif départ</th>
              <th className="px-4 py-4 text-left font-semibold">Actions</th>
            </tr>
          </thead>

          <tbody>
            {rows.map((row, i) => (
              <tr key={i} className="border-t border-[#eef3f0] hover:bg-[#f9fcfa] transition">
                <td className="px-3 py-4 align-top">
                  <Select
                    options={type_experience.data}
                    name="typeExperienceFormation"
                    value={row.typeExperienceFormation}
                    onChange={(name: keyof ExperienceFormation, value: any) =>
                      handleChange(i, name, value)}
                  />
                </td>
                <td className="px-3 py-4 align-top">
                  <Select
                    options={type_contrat.data}
                    name="typeContrat"
                    value={row.typeContrat}
                    onChange={(name: keyof ExperienceFormation, value: any) =>
                      handleChange(i, name, value)}
                  />
                </td>
                <td className="px-3 py-4 align-top">
                  <Input
                    name="description"
                    value={row.description}
                    placeholder={"ex: École/Entreprise Test, Développeur IT, Optimisation d'une base de données"}
                    onChange={(name: keyof ExperienceFormation, value: any) =>
                      handleChange(i, name, value)}
                  />
                </td>
                <td className="px-3 py-4 align-top">
                  <Input
                    type="date"
                    name="debut"
                    value={row.debut}
                    className={row.error ? "border-red-500" : ""}
                    onChange={(name: keyof ExperienceFormation, value: any) =>
                      handleChange(i, name, value)}
                  />

                </td>
                <td className="px-3 py-4 align-top">
                  <Input
                    type="date"
                    name="fin"
                    value={row.fin}
                    className={row.error ? "border-red-500" : ""}
                    onChange={(name: keyof ExperienceFormation, value: any) =>
                      handleChange(i, name, value)}
                  />

                  {row.error && (
                    <p className="mt-2 text-xs text-red-500">
                      {row.error}
                    </p>
                  )}

                </td>
                <td className="px-3 py-4 text-center align-middle">
                  {row.duree} {formatDuree(row.duree) ? `(${formatDuree(row.duree)})` : formatDuree(row.duree)}</td>
                <td className="px-3 py-4 align-top">
                  <Select
                    options={motif_depart.data}
                    name="motifDepart"
                    value={row.motifDepart}
                    onChange={(name: keyof ExperienceFormation, value: any) =>
                      handleChange(i, name, value)}
                  />
                </td>
                <td className="px-3 py-4 text-center align-middle">
                  <button
                    className=" px-3 py-2
                  rounded-xl
                  text-red-600
                  hover:bg-red-50
                  transition"
                    onClick={() => removeRow(i)}
                  >
                    Supprimer
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        {rows.length === 0 && (
          <div className="p-12 text-center">
            <p className="text-[#6b7f77]">
              Aucune expérience ou formation renseignée.
            </p>
          </div>
        )}
      </div>

      <div className="border-t border-[#eef3f0] bg-[#fafdfb] px-6 py-4">

        <div className="flex gap-8 text-xs font-medium">

          <div>
            <span className="text-[#6b7f77]">
              Nombre d'expériences :
            </span>

            <span className="ml-2 font-semibold text-[#2f5d4b]">
              {rows.length}
            </span>
          </div>

          <div>
            <span className="text-[#6b7f77]">
              Durée cumulée :
            </span>

            <span className="ml-2 font-semibold text-[#2f5d4b]">
              {rows.reduce((acc, r) => acc + r.duree, 0)} mois
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}