/* Appel de la section JSP : présent, absent ou excusé, par date. */

const APPEL_STATUTS = [
  { id: 'present', label: 'Présent', on: 'border-emerald-600 bg-emerald-600 text-white', off: 'border-emerald-200 bg-emerald-50 text-emerald-800' },
  { id: 'absent', label: 'Absent', on: 'border-red-600 bg-red-600 text-white', off: 'border-red-200 bg-red-50 text-red-800' },
  { id: 'excuse', label: 'Excusé', on: 'border-amber-500 bg-amber-500 text-white', off: 'border-amber-200 bg-amber-50 text-amber-800' },
];

function todayISO() {
  const d = new Date();
  return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
}

function JspAppel({ jsps, annee }) {
  const { appels, setAppels, currentUser } = useApp();
  const [date, setDate] = useState(todayISO());
  const sorted = useMemo(() => sortJsps(jsps), [jsps]);
  const yearCalls = useMemo(
    () => appels.filter((a) => a.annee === annee).sort((a, b) => String(b.date).localeCompare(String(a.date))),
    [appels, annee],
  );
  const current = yearCalls.find((a) => a.date === date);
  const presences = (current && current.presences) || {};

  const counts = useMemo(() => {
    const stats = { present: 0, absent: 0, excuse: 0, attente: 0 };
    sorted.forEach((jsp) => {
      const statut = presences[jsp.id];
      if (statut === 'present' || statut === 'absent' || statut === 'excuse') stats[statut] += 1;
      else stats.attente += 1;
    });
    return stats;
  }, [sorted, presences]);

  const write = (nextPresences) => {
    const cleaned = {};
    Object.entries(nextPresences).forEach(([id, statut]) => {
      if (statut === 'present' || statut === 'absent' || statut === 'excuse') cleaned[id] = statut;
    });
    setAppels((list) => {
      const existing = list.find((a) => a.annee === annee && a.date === date);
      const base = existing || {
        id: `appel-${uid()}`,
        annee,
        date,
        auteurId: currentUser ? currentUser.id : '',
        auteurNom: currentUser ? `${currentUser.prenom || ''} ${currentUser.nom || ''}`.trim() : '',
        createdAt: new Date().toISOString(),
        presences: {},
      };
      const next = { ...base, presences: cleaned, updatedAt: new Date().toISOString() };
      return existing ? list.map((a) => (a.id === existing.id ? next : a)) : [next, ...list];
    });
  };

  const setStatut = (jspId, statut) => {
    const next = { ...presences };
    if (next[jspId] === statut) delete next[jspId];
    else next[jspId] = statut;
    write(next);
  };

  const markAll = (statut) => {
    const next = {};
    sorted.forEach((jsp) => {
      next[jsp.id] = statut;
    });
    write(next);
  };

  return (
    <div className="space-y-4">
      <div className="flex flex-wrap items-end justify-between gap-3 rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
        <Field label="Date de l'appel" className="min-w-[12rem]">
          <input type="date" className="input" value={date} onChange={(e) => setDate(e.target.value)} />
        </Field>
        <div className="flex flex-wrap gap-2 text-sm">
          <Badge tone="emerald">{counts.present} présent{counts.present > 1 ? 's' : ''}</Badge>
          <Badge tone="red">{counts.absent} absent{counts.absent > 1 ? 's' : ''}</Badge>
          <Badge tone="amber">{counts.excuse} excusé{counts.excuse > 1 ? 's' : ''}</Badge>
          <Badge tone="slate">{counts.attente} en attente</Badge>
        </div>
        <Button variant="secondary" disabled={!sorted.length} onClick={() => markAll('present')}>
          Tout le monde présent
        </Button>
      </div>

      {yearCalls.length > 0 && (
        <div className="flex flex-wrap items-center gap-2">
          <span className="text-xs font-semibold uppercase tracking-wide text-slate-500">Appels de l'année</span>
          {yearCalls.map((appel) => (
            <button
              key={appel.id}
              type="button"
              onClick={() => setDate(appel.date)}
              className={cx(
                'rounded-full border px-3 py-1 text-sm font-medium',
                appel.date === date ? 'border-slate-800 bg-slate-800 text-white' : 'border-slate-200 bg-white text-slate-600',
              )}
            >
              {appel.date}
            </button>
          ))}
        </div>
      )}

      {!sorted.length ? (
        <EmptyState icon={Users} title="Aucun JSP sur cette année">
          Ajoutez l'effectif avant de faire l'appel.
        </EmptyState>
      ) : (
        <div className="space-y-3">
          {JSP_NIVEAUX.map((niveau) => {
            const group = sorted.filter((jsp) => jsp.niveau === niveau.value);
            if (!group.length) return null;
            return (
              <section key={niveau.value} className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
                <header className={cx('flex items-center justify-between px-4 py-2', niveau.row)}>
                  <span className="font-semibold text-slate-800">{niveau.label}</span>
                  <span className="text-sm text-slate-500">{group.length}</span>
                </header>
                <ul className="divide-y divide-slate-100">
                  {group.map((jsp) => (
                    <li key={jsp.id} className="flex flex-col gap-2 px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
                      <p className="font-medium text-slate-800">{jspFullName(jsp)}</p>
                      <div className="grid grid-cols-3 gap-2 sm:w-auto">
                        {APPEL_STATUTS.map((statut) => {
                          const active = presences[jsp.id] === statut.id;
                          return (
                            <button
                              key={statut.id}
                              type="button"
                              onClick={() => setStatut(jsp.id, statut.id)}
                              className={cx('rounded-lg border px-3 py-2 text-sm font-semibold transition', active ? statut.on : statut.off)}
                            >
                              {statut.label}
                            </button>
                          );
                        })}
                      </div>
                    </li>
                  ))}
                </ul>
              </section>
            );
          })}
        </div>
      )}
    </div>
  );
}