/* ============================================================
   SKYVIDYA v4 — Central de Alertas
   Inbox por papel + configuração de limiares (Gestor+).
   ============================================================ */
const { useState, useMemo } = React;

const ALERT_TYPES = [
  { id: "todos", label: "Todos" },
  { id: "desmatamento", label: "Desmatamento" },
  { id: "enso", label: "ENSO" },
  { id: "embargo", label: "Embargo" },
  { id: "commodity", label: "Commodity" },
];
const TYPE_ICON = { desmatamento: "alert", enso: "drop", embargo: "scan", commodity: "trendDown" };

function AlertsView({ access, chat, onNav, reports, onVerify }) {
  const [filter, setFilter] = useState("todos");
  const [cfgOpen, setCfgOpen] = useState(false);
  const [thr, setThr] = useState(() => Object.fromEntries(SKY.ALERT_THRESHOLDS.map((t) => [t.id, t.v])));
  const assetIds = useMemo(() => SKY.assetPortfolio(access.assetScope).map((p) => p.id), [access.id]);
  const rows = SKY.alertsForRole(access.id, assetIds).filter((a) => filter === "todos" || a.tipo === filter);
  const canCfg = access.id === "gestor" || access.id === "admin";

  return (
    <div className="v2-pad fade-up">
      {/* role-adaptive welcome band (was Home tab) */}
      {window.HomeView && <HomeView access={access} onNav={onNav} chat={chat} reports={reports} onVerify={onVerify} />}

      <div className="alerts-sec">
      <ViewHead eyebrow={"// Inbox de eventos · escopo: " + access.short}
        title="Central de alertas"
        sub={access.id === "cliente"
          ? "Eventos que afetam as suas propriedades — e avisos públicos relevantes."
          : "Desmatamento, ENSO, embargos e sinais de preço sobre toda a carteira."}
        right={canCfg && (
          <button className={"btn" + (cfgOpen ? " btn-cyan" : "")} onClick={() => setCfgOpen((v) => !v)}>
            <Icon name="sliders" size={13} /> Limiar de disparo
          </button>
        )} />

      {cfgOpen && canCfg && (
        <div className="v2-card thr-panel fade-up">
          <div className="v2-card-h"><span className="ctitle">Configuração de limiares</span><span className="mono v2-meta">GESTOR+</span></div>
          <div className="thr-grid">
            {SKY.ALERT_THRESHOLDS.map((t) => (
              <div className="thr-row" key={t.id}>
                <span className="thr-l">{t.label}</span>
                <input type="range" min={t.min} max={t.max} step={t.step} value={thr[t.id]} className="exp-slider sm"
                  style={{ "--pct": ((thr[t.id] - t.min) / (t.max - t.min)) * 100 + "%" }}
                  onChange={(e) => setThr((s) => ({ ...s, [t.id]: +e.target.value }))} />
                <span className="mono thr-v">{thr[t.id]} {t.unit}</span>
              </div>
            ))}
          </div>
        </div>
      )}

      <div className="seg" style={{ margin: "0 0 14px", width: "fit-content" }}>
        {ALERT_TYPES.map((t) => (
          <button key={t.id} className={filter === t.id ? "on" : ""} onClick={() => setFilter(t.id)}>{t.label}</button>
        ))}
      </div>

      <div className="v2-card" style={{ overflow: "hidden" }}>
        {rows.map((a) => (
          <div className="alert-row" key={a.id}>
            <span className={"al-dot sev-" + a.sev} />
            <span className="al-ico"><Icon name={TYPE_ICON[a.tipo]} size={15} /></span>
            <div className="al-main">
              <div className="al-t"><b>{a.title}</b><span className={"al-sev mono sev-" + a.sev}>{a.sev.toUpperCase()}</span></div>
              <p className="al-desc">{a.desc}</p>
              <span className="mono al-meta">{a.tipo.toUpperCase()} · {a.asset ? a.asset + " · " : ""}{a.municipio} · {a.date}</span>
            </div>
            <div className="al-actions">
              {a.asset && <button className="btn" style={{ padding: "6px 10px" }} onClick={() => onNav("ativos")}>Ver ativo</button>}
              <button className="btn btn-cyan" style={{ padding: "6px 10px" }}
                onClick={() => chat.askFree("Explique o alerta: " + a.title)}>
                <Icon name="sparkles" size={12} /> IA
              </button>
            </div>
          </div>
        ))}
        {rows.length === 0 && <div style={{ padding: 28, textAlign: "center", color: "var(--fg-mute)", fontSize: 13 }}>Nenhum alerta neste filtro.</div>}
      </div>
      </div>
    </div>
  );
}

Object.assign(window, { AlertsView });