/* ============================================================
   SKYVIDYA v4 — Serviços: Radar ENSO · Impactos Econômicos ·
   Selo Anti-Greenwashing (bloco Ativo 360 + /verify preview)
   ============================================================ */
const { useState, useMemo } = React;

/* ================= RADAR ENSO ================= */
const ENSO_SCALES = [
  { id: "h3-4", label: "Estado", res: "H3-4", free: true },
  { id: "h3-5", label: "Mesorregião", res: "H3-5", free: true },
  { id: "h3-6", label: "Município", res: "H3-6", free: true },
  { id: "h3-7", label: "Sub-município", res: "H3-7", free: false },
  { id: "h3-8", label: "Propriedade", res: "H3-8", free: false },
];

function OniSparkline() {
  const { oniSeries, labels } = SKY.ENSO;
  const W = 360, H = 110, PAD = 18;
  const x = (i) => PAD + (i / (oniSeries.length - 1)) * (W - PAD * 2);
  const y = (v) => H / 2 - (v / 2) * (H / 2 - PAD);
  const path = oniSeries.map((v, i) => (i === 0 ? "M" : "L") + x(i).toFixed(1) + " " + y(v).toFixed(1)).join(" ");
  return (
    <svg viewBox={`0 0 ${W} ${H}`} width="100%" style={{ display: "block" }}>
      <line x1={PAD} x2={W - PAD} y1={y(0)} y2={y(0)} stroke="var(--rule)" strokeWidth="1" />
      <line x1={PAD} x2={W - PAD} y1={y(-0.8)} y2={y(-0.8)} stroke="var(--sv-cyan)" strokeWidth="0.8" strokeDasharray="3 3" opacity="0.6" />
      <text x={W - PAD} y={y(-0.8) - 4} textAnchor="end" className="chart-axis" fill="var(--sv-cyan)">gatilho −0,8</text>
      <path d={path} fill="none" stroke="var(--sv-coral)" strokeWidth="2" strokeLinejoin="round" strokeLinecap="round" />
      {oniSeries.map((v, i) => <circle key={i} cx={x(i)} cy={y(v)} r="2.2" fill="var(--sv-coral)" />)}
      {labels.map((l, i) => i % 2 === 0 && <text key={l + i} x={x(i)} y={H - 3} textAnchor="middle" className="chart-axis">{l}</text>)}
    </svg>
  );
}

/* mini H3 anomaly map (SVG hex grid, no WebGL) */
function EnsoHexMap({ locked }) {
  const cells = useMemo(() => {
    const out = []; const R = 13, w = Math.sqrt(3) * R, h = 1.5 * R;
    let row = 0;
    for (let yy = 14; yy < 220; yy += h) {
      const off = (row % 2) * (w / 2);
      for (let xx = 14; xx < 380; xx += w) {
        const cx = xx + off, cy = yy;
        const an = Math.sin(cx * 0.02 + 1) * Math.cos(cy * 0.025) - (cx > 180 && cy > 110 ? 0.55 : 0);
        let pts = "";
        for (let i = 0; i < 6; i++) {
          const a = Math.PI / 180 * (60 * i - 90);
          pts += (cx + R * Math.cos(a)).toFixed(1) + "," + (cy + R * Math.sin(a)).toFixed(1) + " ";
        }
        out.push({ pts: pts.trim(), an });
      }
      row++;
    }
    return out;
  }, []);
  const color = (an) => an < -0.45 ? "var(--risk-critical)" : an < -0.15 ? "var(--risk-high)" : an < 0.15 ? "var(--risk-medium)" : "var(--risk-low)";
  return (
    <div className="enso-map">
      <svg viewBox="0 0 396 232" width="100%" style={{ display: "block" }}>
        {cells.map((c, i) => (
          <polygon key={i} points={c.pts} fill={color(c.an)} fillOpacity={locked ? 0.22 : 0.66} stroke="var(--bg-void)" strokeWidth="1" />
        ))}
      </svg>
      {locked && (
        <div className="enso-lock">
          <Icon name="scan" size={16} color="var(--sv-coral)" />
          <span>Resolução sub-município disponível no plano <b>PRO</b></span>
        </div>
      )}
      <span className="mono enso-map-cap">ANOMALIA DE PRECIPITAÇÃO · SET–MAI · RECORTE SUL</span>
    </div>
  );
}

function EnsoRadar({ chat }) {
  const [scale, setScale] = useState("h3-6");
  const [upg, setUpg] = useState(null);
  const E = SKY.ENSO;
  const locked = !(ENSO_SCALES.find((s) => s.id === scale) || {}).free;
  return (
    <div className="enso-wrap">
      <div className="enso-top">
        <div className="v2-card enso-phase brackets">
          <span className="gik-l">Fase atual</span>
          <span className="enso-fase">{E.fase}</span>
          <div className="enso-oni"><span className="mono">ONI</span><b className="tnum" style={{ color: "var(--sv-coral)" }}>{E.oni}</b>
            <span className="mono">· persistência {E.prob}%</span></div>
          <OniSparkline />
        </div>
        <div className="v2-card" style={{ padding: 14 }}>
          <div className="enso-scales">
            <span className="gik-l" style={{ marginBottom: 8, display: "block" }}>Escala H3</span>
            {ENSO_SCALES.map((s) => (
              <button key={s.id} className={"h3g-row" + (scale === s.id ? " on" : "") + (s.free ? "" : " locked")}
                onClick={() => s.free ? setScale(s.id) : setUpg({ label: s.label, res: s.res })}>
                <span className={"bmc" + (scale === s.id ? " on" : "")} />
                <span className="h3g-l">{s.label}</span>
                <span className="mono h3g-r">{s.res}</span>
                {s.free ? <span className="h3g-free mono">grátis</span> : <span className="h3g-lock mono">🔒 PRO</span>}
              </button>
            ))}
          </div>
          <EnsoHexMap locked={locked} />
        </div>
      </div>

      <div className="enso-blocks">
        {[["01 · diagnóstico", E.diagnostico, "coral"], ["02 · preditivo", E.preditivo, "warn"], ["03 · prescritivo", E.prescritivo, "cyan"]].map(([t, txt, tone]) => (
          <div className={"v2-card enso-block tone-" + tone} key={t}>
            <span className="mono eb-t">{t}</span>
            <p>{txt}</p>
          </div>
        ))}
      </div>
      <button className="btn btn-cyan" style={{ marginTop: 14 }} onClick={() => chat.askFree("Qual a exposição do portfólio à La Niña?")}>
        <Icon name="sparkles" size={13} /> Analisar exposição com IA
      </button>
      <UpgradeModal scale={upg} onClose={() => setUpg(null)} />
    </div>
  );
}

/* ================= IMPACTOS ECONÔMICOS ================= */
function EconFeed({ chat, onNav }) {
  return (
    <div className="econ-feed">
      {SKY.ECON_EVENTS.map((ev) => (
        <div className="v2-card econ-card" key={ev.id}>
          <div className="ec-head">
            <span className="mod-tag coral">{ev.tag}</span>
            <b className="ec-title">{ev.title}</b>
          </div>
          <div className="ec-evid">
            {ev.evidencias.map((e, i) => (
              <div className="ec-ev" key={i}>
                <span className="mono ec-src">{e.fonte} · {e.data}</span>
                <span className="ec-txt">{e.txt}</span>
              </div>
            ))}
          </div>
          <div className="ec-foot">
            <div className="ec-sig">
              <span className="mono">SINAL DE PREÇO</span>
              <b className="tnum" style={{ color: ev.sinal.delta < 0 ? "var(--risk-critical)" : "var(--risk-low)" }}>
                {ev.sinal.commodity} {ev.sinal.delta > 0 ? "+" : ""}{ev.sinal.delta}%
              </b>
            </div>
            <div className="ec-exp" onClick={() => onNav("ativos")}>
              <span className="mono">NO SEU PORTFÓLIO</span>
              <b className="tnum coral">{ev.expostos} ativos expostos</b>
            </div>
          </div>
          <div className="ec-acao">
            <Icon name="target" size={13} color="var(--sv-cyan)" />
            <span>{ev.acao}</span>
            <button className="btn btn-cyan" style={{ padding: "6px 10px", marginLeft: "auto" }}
              onClick={() => chat.askFree(ev.title + " — qual o impacto no portfólio?")}>
              <Icon name="sparkles" size={12} /> IA
            </button>
          </div>
        </div>
      ))}
    </div>
  );
}

/* ================= SELO ANTI-GREENWASHING ================= */
function VerifyModal({ asset, onClose }) {
  if (!asset) return null;
  const selo = SKY.seloFor(asset);
  return (
    <div className="cb-overlay" onClick={onClose}>
      <div className="up-panel verify-panel fade-up" onClick={(e) => e.stopPropagation()}>
        <div className="vf-url mono"><Icon name="globe" size={12} /> skyvidya.ai/verify/{asset.id}</div>
        <div className="vf-page">
          <div className="vf-head">
            <img src="assets/sky-mark.png" alt="" className="vf-mark" />
            <div>
              <b>Verificação pública de conformidade</b>
              <span className="mono">{asset.id} · {asset.municipio} · {asset.uf}</span>
            </div>
            <span className={"selo-pill mono s-" + selo.state}>{selo.label}</span>
          </div>
          <div className="vf-seal">
            <ResilienceGauge value={asset.score} size={118} compact showLabel={false} />
            <div className="vf-seal-meta">
              <span className="mono">ÍNDICE DE RESILIÊNCIA</span>
              <b>Verificado · Skyvidya Earth AI</b>
              <em className="mono">selo lastreado em evidência geoespacial auditável</em>
            </div>
          </div>
          <div className="vf-evid">
            {[["PRODES/DETER", "01 JUN 2026", "Sem alertas de desmatamento em 24 meses"],
              ["MTE · lista trabalho escravo", "28 MAI 2026", "Sem correspondência por CPF/CNPJ"],
              ["IBAMA · embargos", "28 MAI 2026", "Sem sobreposição com áreas embargadas"]].map(([f, d, t], i) => (
              <div className="vf-ev" key={i}>
                <span className="esg-led ok"><Icon name="check" size={11} /></span>
                <span className="vf-ev-t">{t}</span>
                <span className="mono vf-ev-s">{f} · {d}</span>
              </div>
            ))}
          </div>
          <p className="vf-note mono">REVOGAÇÃO AUTOMÁTICA: este selo é suspenso no instante em que um novo alerta for detectado. Validade {selo.validade || "12 meses"}.</p>
        </div>
        <div className="row gap8" style={{ marginTop: 14 }}>
          <button className="btn btn-primary" onClick={onClose}><Icon name="share" size={13} /> Copiar link público</button>
          <button className="btn" onClick={onClose}>Fechar</button>
        </div>
      </div>
    </div>
  );
}

function SeloBlock({ asset, access, onVerify }) {
  const selo = SKY.seloFor(asset);
  const canIssue = access && (access.id === "gestor" || access.id === "admin");
  return (
    <div className="pd-block selo-block">
      <span className="eyebrow">Conformidade comunicável · anti-greenwashing</span>
      <div className="selo-row">
        <span className={"selo-pill mono s-" + selo.state}>{selo.label}</span>
        <span className="selo-why">{selo.state === "ativo" ? "emitido " + selo.issued + " · " + selo.validade : selo.why}</span>
      </div>
      <div className="row gap8" style={{ marginTop: 10, flexWrap: "wrap" }}>
        {selo.state === "ativo" && (
          <button className="btn btn-cyan" style={{ padding: "7px 11px" }} onClick={() => onVerify(asset)}>
            <Icon name="globe" size={12} /> Página pública
          </button>
        )}
        {selo.state === "elegivel" && canIssue && (
          <button className="btn btn-primary" style={{ padding: "7px 11px" }} onClick={() => onVerify(asset)}>
            <Icon name="check" size={12} /> Emitir selo
          </button>
        )}
        {selo.state === "elegivel" && !canIssue && <span className="mono rp-wait">emissão requer nível gestor</span>}
        {(selo.state === "suspenso" || selo.state === "bloqueado") && <span className="mono rp-wait" style={{ color: "var(--risk-critical)" }}>resolver pendência para reabilitar</span>}
      </div>
    </div>
  );
}

Object.assign(window, { EnsoRadar, EconFeed, SeloBlock, VerifyModal });