/* =====================================================================
 * Historique des bilans : recherche, filtres, consultation, impression.
 * ===================================================================== */

const SEVERITY_DOT = { danger: 'bg-red-500', warning: 'bg-amber-400', ok: 'bg-emerald-500' };

function Historique({ navigate }) {
  const { bilans, deleteBilan, duplicateBilan, settings, print, notify } = useApp();
  const [query, setQuery] = useState('');
  const [status, setStatus] = useState('');
  const [preview, setPreview] = useState(null);

  const filtered = useMemo(() => {
    const q = query.trim().toLowerCase();
    return [...bilans]
      .filter((b) => !status || b.status === status)
      .filter((b) => {
        if (!q) return true;
        const hay = [b.numero, b.circ.adresse, b.circ.commune, b.circ.motif, b.circ.numInter, bilanVictimeLabel(b), b.auteurNom]
          .join(' ')
          .toLowerCase();
        return hay.includes(q);
      })
      .sort((a, b) => (b.circ.dateHeure || b.createdAt).localeCompare(a.circ.dateHeure || a.createdAt));
  }, [bilans, query, status]);

  const remove = (b) => {
    if (window.confirm(`Supprimer définitivement le bilan ${b.numero} ?`)) {
      deleteBilan(b.id);
      setPreview(null);
      notify('Bilan supprimé', 'red');
    }
  };

  const duplicate = (b) => {
    const id = duplicateBilan(b.id);
    notify('Bilan dupliqué');
    if (id) navigate('bilan', { id });
  };

  const exportCsv = () => {
    const rows = [
      ['Numéro', 'Date', 'Statut', 'Motif', 'Victime', 'Adresse', 'Commune', 'FC', 'FR', 'SpO2', 'TA', 'GCS', 'Décision', 'Destination', 'Rédacteur'],
      ...filtered.map((b) => [
        b.numero,
        fmtDateTime(b.circ.dateHeure),
        (BILAN_STATUS[b.status] || {}).label,
        b.circ.motif,
        bilanVictimeLabel(b),
        b.circ.adresse,
        b.circ.commune,
        b.vital.c.fc,
        b.vital.b.fr,
        b.vital.b.spo2,
        b.vital.c.tas ? `${b.vital.c.tas}/${b.vital.c.tad}` : '',
        glasgowScore(b.vital.d) ?? '',
        b.transmission.decision ? decisionLabel(b.transmission.decision) : '',
        [b.transmission.destination, b.transmission.service].filter(Boolean).join(' — '),
        b.auteurNom,
      ]),
    ];
    downloadFile(`bilans-sap-${new Date().toISOString().slice(0, 10)}.csv`, toCsv(rows), 'text/csv;charset=utf-8');
  };

  const rowActions = (b) => (
    <Fragment>
      <IconButton icon={Eye} title="Consulter" onClick={() => setPreview(b.id)} />
      <IconButton icon={Pencil} tone="blue" title="Modifier" onClick={() => navigate('bilan', { id: b.id })} />
      <IconButton icon={Copy} title="Dupliquer" onClick={() => duplicate(b)} />
      <IconButton icon={Printer} title="Imprimer" onClick={() => print(<BilanFiche bilan={b} settings={settings} />)} />
      <PdfButton iconOnly node={<BilanFiche bilan={b} settings={settings} />} filename={`${b.numero}.pdf`} />
      <IconButton icon={Trash2} tone="red" title="Supprimer" onClick={() => remove(b)} />
    </Fragment>
  );

  return (
    <div>
      <PageHeader
        title="Historique des bilans"
        subtitle={`${bilans.length} bilan${bilans.length > 1 ? 's' : ''} enregistré${bilans.length > 1 ? 's' : ''} sur le serveur`}
        icon={HistoryIcon}
        actions={
          <Fragment>
            <Button variant="secondary" icon={Download} onClick={exportCsv} disabled={!filtered.length}>
              Export CSV
            </Button>
            <Button icon={FilePlus2} onClick={() => navigate('nouveau')}>
              Nouveau bilan
            </Button>
          </Fragment>
        }
      />

      <div className="mb-4 flex flex-wrap items-center gap-3">
        <SearchInput className="min-w-[240px] flex-1" value={query} onChange={setQuery} placeholder="N°, adresse, motif, victime…" />
        <Segmented
          tone="slate"
          value={status}
          onChange={setStatus}
          options={[
            { value: '', label: 'Tous' },
            { value: 'brouillon', label: 'Brouillons' },
            { value: 'termine', label: 'Clôturés' },
          ]}
          allowEmpty={false}
        />
      </div>

      {filtered.length === 0 ? (
        <EmptyState icon={FileText} title="Aucun bilan" action={<Button icon={FilePlus2} onClick={() => navigate('nouveau')}>Créer un bilan</Button>}>
          Aucun bilan ne correspond à votre recherche.
        </EmptyState>
      ) : (
        <Fragment>
        <ul className="space-y-3 md:hidden">
          {filtered.map((b) => {
            const st = BILAN_STATUS[b.status] || BILAN_STATUS.brouillon;
            return (
              <li key={b.id} className="rounded-xl border border-slate-200 bg-white shadow-sm">
                <button type="button" onClick={() => setPreview(b.id)} className="block w-full px-4 pt-3 text-left">
                  <div className="flex items-center justify-between gap-2">
                    <div className="flex min-w-0 items-center gap-2">
                      <span className={cx('h-2.5 w-2.5 shrink-0 rounded-full', SEVERITY_DOT[bilanSeverity(b)])} />
                      <span className="truncate font-mono font-semibold text-slate-800">{b.numero}</span>
                    </div>
                    <Badge tone={st.tone}>{st.label}</Badge>
                  </div>
                  <p className="mt-1 font-medium text-slate-800">{b.circ.motif || 'Motif non renseigné'}</p>
                  <p className="text-sm text-slate-600">{bilanVictimeLabel(b)}</p>
                  <p className="text-xs text-slate-500">
                    {fmtDateTime(b.circ.dateHeure)}
                    {(b.circ.adresse || b.circ.commune) && ` · ${[b.circ.adresse, b.circ.commune].filter(Boolean).join(', ')}`}
                  </p>
                </button>
                <div className="mt-2 flex justify-between border-t border-slate-100 px-2 py-1">{rowActions(b)}</div>
              </li>
            );
          })}
        </ul>
        <div className="scrollbar-thin hidden overflow-x-auto rounded-xl border border-slate-200 bg-white shadow-sm md:block">
          <table className="w-full min-w-[860px] text-sm">
            <thead className="bg-slate-50 text-left text-xs uppercase tracking-wide text-slate-500">
              <tr>
                <th className="px-4 py-3">N° / date</th>
                <th className="px-4 py-3">Motif</th>
                <th className="px-4 py-3">Victime</th>
                <th className="px-4 py-3">Adresse</th>
                <th className="px-4 py-3">Décision</th>
                <th className="px-4 py-3">Statut</th>
                <th className="px-4 py-3 text-right">Actions</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-100">
              {filtered.map((b) => {
                const sev = bilanSeverity(b);
                const st = BILAN_STATUS[b.status] || BILAN_STATUS.brouillon;
                return (
                  <tr key={b.id} className="cursor-pointer hover:bg-slate-50" onClick={() => setPreview(b.id)}>
                    <td className="px-4 py-3">
                      <div className="flex items-center gap-2">
                        <span className={cx('h-2.5 w-2.5 rounded-full', SEVERITY_DOT[sev])} title="Gravité estimée" />
                        <span className="whitespace-nowrap font-mono font-semibold text-slate-800">{b.numero}</span>
                      </div>
                      <p className="whitespace-nowrap text-xs text-slate-500">{fmtDateTime(b.circ.dateHeure)}</p>
                    </td>
                    <td className="px-4 py-3">{b.circ.motif || <span className="text-slate-400">—</span>}</td>
                    <td className="px-4 py-3">{bilanVictimeLabel(b)}</td>
                    <td className="max-w-[220px] truncate px-4 py-3 text-slate-600">{[b.circ.adresse, b.circ.commune].filter(Boolean).join(', ') || '—'}</td>
                    <td className="px-4 py-3 text-slate-600">{b.transmission.decision ? decisionLabel(b.transmission.decision) : '—'}</td>
                    <td className="px-4 py-3">
                      <Badge tone={st.tone}>{st.label}</Badge>
                    </td>
                    <td className="px-4 py-3" onClick={(e) => e.stopPropagation()}>
                      <div className="flex justify-end gap-1">{rowActions(b)}</div>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
        </Fragment>
      )}

      {preview && (() => {
        const b = bilans.find((x) => x.id === preview);
        if (!b) return null;
        return (
          <Modal
            open
            size="xl"
            icon={FileText}
            title={`Bilan ${b.numero}`}
            subtitle={`${bilanVictimeLabel(b)} · ${fmtDateTime(b.circ.dateHeure)}`}
            onClose={() => setPreview(null)}
            footer={
              <Fragment>
                <Button variant="danger" icon={Trash2} onClick={() => remove(b)}>
                  Supprimer
                </Button>
                <Button variant="secondary" icon={Pencil} onClick={() => navigate('bilan', { id: b.id })}>
                  Modifier
                </Button>
                <Button variant="secondary" icon={Printer} onClick={() => print(<BilanFiche bilan={b} settings={settings} />)}>
                  Imprimer
                </Button>
                <PdfButton node={<BilanFiche bilan={b} settings={settings} />} filename={`${b.numero}.pdf`} />
              </Fragment>
            }
          >
            <BilanFiche bilan={b} settings={settings} />
          </Modal>
        );
      })()}
    </div>
  );
}