/* =====================================================================
 * État des besoins : détection automatique des mentions « commande ».
 * ===================================================================== */

function BesoinsPrintSheet({ annee, groupes, commandes, manquants, settings }) {
  return (
    <article className="print-sheet mx-auto max-w-[900px] bg-white p-6 text-slate-900">
      <header className="mb-4 border-b-4 border-red-600 pb-3">
        <p className="text-xs font-semibold uppercase tracking-widest text-red-600">
          {settings.departement} — {settings.centre}
        </p>
        <h1 className="text-2xl font-black uppercase">État des besoins habillement JSP</h1>
        <p className="text-sm text-slate-600">
          Année {annee} · édité le {fmtDateTime(new Date())}
        </p>
      </header>

      <h2 className="mb-2 font-bold">Synthèse de commande</h2>
      <table className="mb-6 w-full border-collapse text-sm">
        <thead>
          <tr className="bg-slate-100">
            <th className="border border-slate-300 px-2 py-1 text-left">Article</th>
            <th className="border border-slate-300 px-2 py-1 text-left">Taille / N°</th>
            <th className="border border-slate-300 px-2 py-1 text-center">Qté</th>
            <th className="border border-slate-300 px-2 py-1 text-left">JSP concernés</th>
          </tr>
        </thead>
        <tbody>
          {groupes.flatMap((g) =>
            [...g.tailles.values()].map((t) => (
              <tr key={g.field.key + t.taille}>
                <td className="border border-slate-300 px-2 py-1 font-semibold">{g.field.label}</td>
                <td className="border border-slate-300 px-2 py-1">{t.taille}</td>
                <td className="border border-slate-300 px-2 py-1 text-center font-bold">{t.jsps.length}</td>
                <td className="border border-slate-300 px-2 py-1">{t.jsps.map(jspFullName).join(', ')}</td>
              </tr>
            )),
          )}
        </tbody>
      </table>

      <h2 className="mb-2 font-bold">Détail par JSP ({commandes.length})</h2>
      <ul className="mb-6 list-disc pl-5 text-sm">
        {commandes.map((c, i) => (
          <li key={i}>
            {jspFullName(c.jsp)} ({c.jsp.niveau}) — {c.field.label} : « {c.brut} »
          </li>
        ))}
      </ul>

      {manquants.length > 0 && (
        <Fragment>
          <h2 className="mb-2 font-bold">Insignes / accessoires non attribués ({manquants.length})</h2>
          <ul className="list-disc pl-5 text-sm">
            {manquants.map((m, i) => (
              <li key={i}>
                {jspFullName(m.jsp)} ({m.jsp.niveau}) — {m.field.label}
              </li>
            ))}
          </ul>
        </Fragment>
      )}
    </article>
  );
}

function JspBesoins({ jsps, annee }) {
  const { updateJspField, settings, print, notify } = useApp();
  const [pending, setPending] = useState(null);
  const commandes = useMemo(() => jspCommandes(sortJsps(jsps)), [jsps]);
  const manquants = useMemo(() => jspManquants(sortJsps(jsps)), [jsps]);
  const groupes = useMemo(() => groupCommandes(commandes), [commandes]);

  const confirmerRecu = () => {
    const c = pending;
    if (!c) return;
    const nouvelle = c.demande === 'À préciser' ? '' : c.demande;
    updateJspField(c.jsp.id, c.field.key, nouvelle);
    notify(`Reçu : ${c.field.label} pour ${jspFullName(c.jsp)}`);
    setPending(null);
  };

  const exportCsv = () => {
    const rows = [
      ['Année', 'Nom', 'Prénom', 'Niveau', 'Article', 'Saisie', 'Taille actuelle', 'Taille demandée'],
      ...commandes.map((c) => [annee, c.jsp.nom, c.jsp.prenom, c.jsp.niveau, c.field.label, c.brut, c.actuel, c.demande]),
    ];
    downloadFile(`besoins-jsp-${annee}.csv`, toCsv(rows), 'text/csv;charset=utf-8');
  };

  const printSheet = () =>
    print(<BesoinsPrintSheet annee={annee} groupes={groupes} commandes={commandes} manquants={manquants} settings={settings} />);

  return (
    <div className="space-y-5">
      <div className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-orange-200 bg-orange-50 p-4">
        <div className="flex items-center gap-3">
          <ShoppingCart className="h-8 w-8 text-orange-500" />
          <div>
            <p className="font-semibold text-orange-900">
              {commandes.length} article{commandes.length > 1 ? 's' : ''} à commander · {manquants.length} insigne{manquants.length > 1 ? 's' : ''} non attribué
              {manquants.length > 1 ? 's' : ''}
            </p>
            <p className="text-sm text-orange-800/80">Détection automatique des mentions « Commande », « Cde », « à commander »…</p>
          </div>
        </div>
        <div className="flex gap-2">
          <Button variant="secondary" icon={Download} onClick={exportCsv} disabled={!commandes.length}>
            CSV
          </Button>
          <Button variant="dark" icon={Printer} onClick={printSheet}>
            Imprimer l'état
          </Button>
        </div>
      </div>

      {groupes.length === 0 ? (
        <EmptyState icon={PackageCheck} title="Aucun besoin détecté">
          Aucune cellule ne mentionne de commande pour l'année {annee}.
        </EmptyState>
      ) : (
        <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
          {groupes.map((g) => (
            <Card key={g.field.key} title={g.field.label} icon={Package} actions={<Badge tone="amber">{g.total}</Badge>}>
              <ul className="space-y-2">
                {[...g.tailles.values()].map((t) => (
                  <li key={t.taille} className="flex items-start justify-between gap-3 text-sm">
                    <div>
                      <p className="font-semibold text-slate-800">Taille {t.taille}</p>
                      <p className="text-xs text-slate-500">{t.jsps.map(jspFullName).join(', ')}</p>
                    </div>
                    <span className="rounded-md bg-slate-800 px-2 py-0.5 text-sm font-bold text-white">×{t.jsps.length}</span>
                  </li>
                ))}
              </ul>
            </Card>
          ))}
        </div>
      )}

      {commandes.length > 0 && (
        <Card title="Détail des commandes" subtitle="« Reçu » remplace la mention par la taille livrée" icon={ListChecks} bodyClassName="p-0">
          <div className="scrollbar-thin overflow-x-auto">
            <table className="w-full min-w-[640px] text-sm">
              <thead className="bg-slate-50 text-left text-xs uppercase tracking-wide text-slate-500">
                <tr>
                  <th className="px-4 py-2">JSP</th>
                  <th className="px-4 py-2">Article</th>
                  <th className="px-4 py-2">Saisie</th>
                  <th className="px-4 py-2">Actuel</th>
                  <th className="px-4 py-2">Demandé</th>
                  <th className="px-4 py-2 text-right" />
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-100">
                {commandes.map((c) => {
                  const niv = niveauOf(c.jsp.niveau);
                  return (
                    <tr key={c.jsp.id + c.field.key}>
                      <td className="px-4 py-2">
                        <span className="flex items-center gap-2 font-medium">
                          <span className={cx('h-2.5 w-2.5 rounded-full', niv.dot)} />
                          {jspFullName(c.jsp)}
                        </span>
                      </td>
                      <td className="px-4 py-2">{c.field.label}</td>
                      <td className="px-4 py-2 font-mono text-xs text-orange-700">{c.brut}</td>
                      <td className="px-4 py-2">{c.actuel || '—'}</td>
                      <td className="px-4 py-2 font-semibold">{c.demande}</td>
                      <td className="px-4 py-2 text-right">
                        <Button size="sm" variant="success" icon={PackageCheck} onClick={() => setPending(c)}>
                          Reçu
                        </Button>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </Card>
      )}

      {manquants.length > 0 && (
        <Card title="Insignes & accessoires non attribués" icon={AlertTriangle}>
          <div className="flex flex-wrap gap-2">
            {manquants.map((m) => (
              <button
                key={m.jsp.id + m.field.key}
                type="button"
                className="chip chip-off"
                title="Marquer comme attribué"
                onClick={() => {
                  updateJspField(m.jsp.id, m.field.key, true);
                  notify(`${m.field.label} attribué(e) à ${jspFullName(m.jsp)}`);
                }}
              >
                <Plus className="h-3.5 w-3.5" />
                {m.field.label} — {jspFullName(m.jsp)}
              </button>
            ))}
          </div>
        </Card>
      )}

      {pending && (
        <Modal
          open
          size="sm"
          icon={PackageCheck}
          title={`Confirmer la réception — ${pending.field.label}`}
          subtitle={jspFullName(pending.jsp)}
          onClose={() => setPending(null)}
          footer={
            <Fragment>
              <Button variant="secondary" onClick={() => setPending(null)}>
                Annuler
              </Button>
              <Button variant="success" icon={PackageCheck} onClick={confirmerRecu}>
                Confirmer « Reçu »
              </Button>
            </Fragment>
          }
        >
          <div className="space-y-3 text-sm text-slate-700">
            <p>
              Commande de <span className="font-semibold">{pending.field.label}</span> pour {jspFullName(pending.jsp)}.
            </p>
            <p className="rounded-lg bg-orange-50 px-3 py-2 font-mono text-orange-800">« {pending.brut} »</p>
            <p>
              La case sera remplacée par <span className="font-semibold">{pending.demande === 'À préciser' ? 'une valeur vide' : pending.demande}</span>.
            </p>
          </div>
        </Modal>
      )}
    </div>
  );
}