/* Maschera Alert clinici — alert calcolati in SQL sul perimetro filtrato */
const { useState: alus } = React;

const SEV = {
  critico:    { label: "Critico",     pill: "danger",  color: "var(--c-danger)" },
  attenzione: { label: "Attenzione",  pill: "warn",    color: "var(--c-warn)" },
  info:       { label: "Informativo", pill: "neutral", color: "var(--c-text-4)" }
};

function MaskAlerts({ data, filters, onEditFilters, onDrill }) {
  const D = window.DATA;
  const [sevFilter, setSevFilter] = alus("tutti");
  const [openId, setOpenId] = alus(null);

  if (!data) {
    return (
      <div>
        <div className="content__header">
          <div>
            <h1 className="page-title">Alert clinici</h1>
            <div className="page-sub">Segnalazioni calcolate sul perimetro selezionato.</div>
          </div>
        </div>
        <div style={{ display: "flex", justifyContent: "center", padding: "70px 0" }}><div className="spinner" /></div>
      </div>
    );
  }

  const t = data.totals;
  const list = data.alerts.filter(a => sevFilter === "tutti" || a.severity === sevFilter);

  return (
    <div>
      <div className="content__header">
        <div>
          <h1 className="page-title">Alert clinici</h1>
          <div className="page-sub">
            <span className="status-dot" />Monitoraggio su <strong style={{ color: "var(--c-text-2)" }}>{D.fmtNum(data.totRic)}</strong> ricoveri · {data.alerts.length} indicatori valutati
          </div>
        </div>
        <Segmented
          value={sevFilter}
          options={[
            { value: "tutti", label: "Tutti" },
            { value: "critico", label: "Critici" },
            { value: "attenzione", label: "Attenzione" },
            { value: "info", label: "Info" }
          ]}
          onChange={setSevFilter}
        />
      </div>

      <FilterBar filters={filters} onEdit={onEditFilters} />

      <div className="kpis" style={{ marginBottom: 14 }}>
        <KpiCard label="Alert critici" value={D.fmtNum(t.critico)} icon="alerts" tone="accent" deltaLabel="richiedono azione" />
        <KpiCard label="Da attenzionare" value={D.fmtNum(t.attenzione)} icon="clock" deltaLabel="sotto osservazione" />
        <KpiCard label="Informativi" value={D.fmtNum(t.info)} icon="info" deltaLabel="monitoraggio" />
        <KpiCard label="Ricoveri nel perimetro" value={D.fmtNum(data.totRic)} icon="bed" deltaLabel="selezione corrente" />
      </div>

      <Card title="Segnalazioni" sub={list.length + " indicatori" + (sevFilter !== "tutti" ? " · filtro: " + SEV[sevFilter].label : "")} flush>
        <table className="table">
          <thead>
            <tr>
              <th style={{ width: 26 }}></th>
              <th>Indicatore</th>
              <th style={{ width: 130 }}>Stato</th>
              <th className="num" style={{ width: 110 }}>Valore</th>
              <th className="num" style={{ width: 120 }}>Soglia</th>
              <th className="num" style={{ width: 80 }}>Casi</th>
              <th style={{ width: 150 }}></th>
            </tr>
          </thead>
          <tbody>
            {list.map(a => {
              const s = SEV[a.severity] || SEV.info;
              const hasDetail = a.detail && a.detail.length;
              const open = openId === a.id;
              return (
                <React.Fragment key={a.id}>
                  <tr
                    className={hasDetail ? "is-clickable" : ""}
                    onClick={hasDetail ? () => setOpenId(open ? null : a.id) : undefined}
                  >
                    <td><span className="sev-dot" style={{ background: s.color }} /></td>
                    <td>
                      <div className="alert-name">{a.title}</div>
                      <div className="alert-cat">{a.categoryLabel}</div>
                    </td>
                    <td><Pill tone={s.pill}>{s.label}</Pill></td>
                    <td className="num tnum"><span className="alert-val" style={{ color: a.severity === "info" ? "var(--c-text-2)" : s.color }}>{a.value}</span></td>
                    <td className="num tnum"><span className="alert-thr">{a.threshold}</span></td>
                    <td className="num tnum">{a.count > 0 ? D.fmtNum(a.count) : "—"}</td>
                    <td>
                      <div className="row" style={{ gap: 6, justifyContent: "flex-end" }}>
                        {a.drill && (
                          <button className="btn btn--sm" onClick={(e) => { e.stopPropagation(); onDrill(a.drill); }} title="Apri i casi in M3">
                            <Icon name="drill" size={12} /> Casi
                          </button>
                        )}
                        {hasDetail && <Icon name={open ? "chevron-up" : "chevron-down"} size={14} color="#94A3B8" />}
                      </div>
                    </td>
                  </tr>
                  {open && hasDetail && (
                    <tr className="alert-expand">
                      <td colSpan={7}>
                        <div className="alert-expand__inner">
                          <div className="alert-desc" style={{ maxWidth: "none", marginBottom: 6 }}>{a.description}</div>
                          <div className="alert-expand__title">Dettaglio ({a.detail.length})</div>
                          <div className="alert-expand__grid">
                            {a.detail.map((d, i) => (
                              <div className="alert-expand__row" key={i}>
                                <span className="lbl">{d.label}</span>
                                <span className="val">{d.value}</span>
                              </div>
                            ))}
                          </div>
                        </div>
                      </td>
                    </tr>
                  )}
                </React.Fragment>
              );
            })}
            {!list.length && (
              <tr><td colSpan={7} className="muted" style={{ padding: 20, textAlign: "center" }}>Nessun alert in questa categoria.</td></tr>
            )}
          </tbody>
        </table>
      </Card>

      <div className="muted" style={{ fontSize: 11.5, marginTop: 10, display: "flex", alignItems: "center", gap: 6 }}>
        <Icon name="info" size={12} color="#94A3B8" />
        Soglie indicative su base PNE/aziendale. Gli indicatori marcati come proxy o non valutabili dipendono dai dati disponibili nel perimetro.
      </div>
    </div>
  );
}

Object.assign(window, { MaskAlerts });