/* ============================================================
   SKYVIDYA v3 — Módulos: catálogo por épico + detalhe
   ============================================================ */
const { useState, useEffect, useRef, useMemo } = React;

function ModulesView({ openMod, setOpenMod, chat, onNav, access }) {
  if (openMod) return <ModuleDetail mod={openMod} onBack={() => setOpenMod(null)} chat={chat} onNav={onNav} access={access} />;
  return (
    <div className="v2-pad fade-up">
      <ViewHead eyebrow="// Catálogo · por complexidade, não por nicho"
        title="Módulos & serviços"
        sub="A mesma plataforma serve qualquer perfil — muda o volume de ativos e a profundidade contratada. Dois épicos: Compliance (risco) e Market (oportunidade)." />
      {SKY.VERTICALS.map((v) => {
        const mods = SKY.MODULES.filter((m) => m.vertical.includes(v.id));
        return (
          <section key={v.id} className="mod-section">
            <div className="mod-sec-h">
              <span className={"mod-tag " + v.tone}>{v.label.toUpperCase()}</span>
              <span className="mod-sub">{v.sub}</span>
            </div>
            <div className="mod-grid">
              {mods.map((m) => (
                <button key={m.id + v.id} className="mod-card" onClick={() => setOpenMod(m)}>
                  <div className="mc-top">
                    <span className="mc-ico"><Icon name={m.icon} size={16} color={v.tone === "cyan" ? "var(--sv-cyan)" : v.tone === "coral" ? "var(--sv-coral)" : "var(--fg-soft)"} /></span>
                    {m.score != null
                      ? <span className="mc-gauge"><ResilienceGauge value={m.score} size={54} compact showLabel={false} showDots={false} /></span>
                      : <span className={"mc-status mono " + m.status}>{m.status === "ativo" ? "ATIVO" : "DISPONÍVEL"}</span>}
                  </div>
                  <b className="mc-name">{m.name}</b>
                  <p className="mc-desc">{m.desc}</p>
                  <span className="mc-fontes mono">{m.fontes}</span>
                </button>
              ))}
            </div>
          </section>
        );
      })}
    </div>
  );
}

const ESG_CHECKS = [
  { k: "Sobreposição com Unidades de Conservação", src: "ICMBio · união geoespacial", ok: true },
  { k: "Sobreposição com Terras Indígenas", src: "FUNAI · união geoespacial", ok: true },
  { k: "Sobreposição com áreas quilombolas", src: "INCRA · união geoespacial", ok: true },
  { k: "Alertas de desmatamento (24m)", src: "DETER/PRODES", ok: false, n: 2 },
  { k: "Lista de trabalho escravo (CPF/CNPJ)", src: "MTE · união por atributos", ok: true },
  { k: "Embargos ambientais", src: "IBAMA", ok: true },
];
const GB_METRICS = [
  { k: "Sequestro CO₂ potencial", v: "+12,4", u: "ktCO₂e/ano", tone: "good" },
  { k: "Área agrícola · 5s", v: "+8,2%", u: "ganho", tone: "good" },
  { k: "Pastagens · 5s", v: "−5,1%", u: "conversão", tone: "warn" },
  { k: "Florestas · 5s", v: "−1,8%", u: "perda", tone: "bad" },
];

function ModuleDetail({ mod, onBack, chat, onNav, access }) {
  const toneColor = { good: "var(--risk-low)", warn: "var(--sv-warn)", bad: "var(--risk-critical)" };
  const isService = mod.id === "elnino" || mod.id === "impactos" || mod.id === "match" || mod.id === "simulador" || mod.id === "prodmatrix" || mod.id === "antigreenwashing";
  if (isService) {
    return (
      <div className="v2-pad fade-up">
        <button className="btn" style={{ marginBottom: 16 }} onClick={onBack}><Icon name="chevL" size={13} /> Catálogo</button>
        <ViewHead eyebrow={"// Serviço · " + mod.fontes} title={mod.name} sub={mod.desc} />
        {mod.id === "elnino"    && <EnsoRadar chat={chat} onNav={onNav} />}
        {mod.id === "impactos"  && <EconFeed chat={chat} onNav={onNav} />}
        {mod.id === "antigreenwashing" && window.AntiGreenwashingView && <AntiGreenwashingView chat={chat} onNav={onNav} access={access} />}
        {mod.id === "match"     && window.MatchView && <MatchView portfolioScore={72} />}
        {mod.id === "simulador" && window.SimuladorView && <SimuladorView chat={chat} onAction={(to) => onNav(to === "protocol" ? "protocolos" : to)} />}
        {mod.id === "prodmatrix" && window.ProdMatrixView && <ProdMatrixView chat={chat} />}
      </div>
    );
  }
  return (
    <div className="v2-pad fade-up">
      <button className="btn" style={{ marginBottom: 16 }} onClick={onBack}><Icon name="chevL" size={13} /> Catálogo</button>
      <ViewHead eyebrow={"// Módulo · " + mod.fontes} title={mod.name} sub={mod.desc}
        right={<button className="btn btn-cyan" onClick={() => chat.askPrompt(mod.id === "esg" ? "fraude" : mod.id === "greenbonds" ? "pescarias" : "deteriorando")}><Icon name="sparkles" size={13} /> Analisar com IA</button>} />

      <div className="v2-hero">
        <div className="v2-card v2-gauge brackets">
          {mod.score != null
            ? <ResilienceGauge value={mod.score} label={"// " + mod.name.toUpperCase()} sublabel="Portfólio · média ponderada" size={220} />
            : <div className="mod-svc-box"><Icon name={mod.icon} size={28} color="var(--sv-cyan)" /><p>Serviço de monitoramento contínuo — gera alertas e relatórios, sem score único.</p></div>}
        </div>
        <div className="v2-hero-r">
          {mod.id === "esg" && (
            <div className="v2-card" style={{ overflow: "hidden" }}>
              <div className="v2-card-h"><span className="ctitle">Uniões de conformidade · portfólio</span><span className="mono v2-meta">12 ATIVOS</span></div>
              <div className="esg-checks">
                {ESG_CHECKS.map((c, i) => (
                  <div className="esg-row" key={i}>
                    <span className={"esg-led " + (c.ok ? "ok" : "bad")}>{c.ok ? <Icon name="check" size={12} /> : <Icon name="alert" size={12} />}</span>
                    <span className="esg-k">{c.k}{!c.ok && c.n && <em> · {c.n} ativos sinalizados</em>}</span>
                    <span className="esg-src mono">{c.src}</span>
                  </div>
                ))}
              </div>
            </div>
          )}
          {mod.id === "greenbonds" && (
            <>
              <div className="gb-grid">
                {GB_METRICS.map((g, i) => (
                  <div className="v2-card gb-card" key={i}>
                    <span className="gik-l">{g.k}</span>
                    <span className="gik-v tnum" style={{ color: toneColor[g.tone] }}>{g.v}</span>
                    <span className="mono gb-u">{g.u}</span>
                  </div>
                ))}
              </div>
              <div className="v2-card" style={{ padding: 16 }}>
                <p style={{ margin: 0, fontSize: 12.5, color: "var(--fg-soft)" }}>Elegibilidade estimada para emissão: <b style={{ color: "var(--sv-cyan)" }}>R$ 8,4 Mi</b> em títulos verdes sobre o portfólio atual.</p>
              </div>
            </>
          )}
          {mod.id === "agro" && (
            <div className="v2-card" style={{ padding: 18 }}>
              <div className="ctitle" style={{ marginBottom: 10 }}>Tabela prescritiva · 7.981 células H3-L7</div>
              <table style={{ width:"100%", fontSize:11.5, borderCollapse:"collapse" }}>
                <thead><tr style={{ color:"var(--fg-mute)", textTransform:"uppercase", letterSpacing:".06em" }}>
                  <th style={{ textAlign:"left", paddingBottom:6 }}>Classe</th>
                  <th style={{ textAlign:"right", paddingBottom:6 }}>Células</th>
                  <th style={{ textAlign:"right", paddingBottom:6 }}>Prob. Sinistro</th>
                  <th style={{ textAlign:"left", paddingBottom:6 }}>Franquia</th>
                </tr></thead>
                <tbody>
                  <tr style={{ color:"var(--risk-low)" }}><td>A — Baixo Risco</td><td style={{ textAlign:"right" }}>1.529</td><td style={{ textAlign:"right" }}>&lt; 8,7%</td><td style={{ paddingLeft:10 }}>20%</td></tr>
                  <tr style={{ color:"var(--sv-warn)" }}><td>B — Médio Risco</td><td style={{ textAlign:"right" }}>1.311</td><td style={{ textAlign:"right" }}>8,7–16,2%</td><td style={{ paddingLeft:10 }}>30%</td></tr>
                  <tr style={{ color:"var(--risk-critical)" }}><td>C — Alto Risco</td><td style={{ textAlign:"right" }}>5.141</td><td style={{ textAlign:"right" }}>&gt; 16,2%</td><td style={{ paddingLeft:10 }}>Caso a caso</td></tr>
                </tbody>
              </table>
              <div className="mono" style={{ fontSize:9.5, color:"var(--fg-mute)", marginTop:10 }}>P33=8,7% · P66=16,2% · Drivers: temp_máx (r=+0,40) · precip (r=−0,26)</div>
              <button className="btn btn-primary" style={{ marginTop: 14 }} onClick={() => onNav("map")}><Icon name="map" size={13} /> Abrir no mapa</button>
            </div>
          )}
          {!["esg", "greenbonds", "agro"].includes(mod.id) && (
            <div className="v2-card" style={{ padding: 18 }}>
              <p style={{ margin: 0, fontSize: 13, color: "var(--fg-soft)", lineHeight: 1.6 }}>{mod.desc}</p>
              <div className="mono" style={{ fontSize: 9.5, color: "var(--fg-mute)", marginTop: 12, letterSpacing: ".08em", textTransform: "uppercase" }}>Fontes: {mod.fontes}</div>
              {mod.status !== "ativo" && <button className="btn btn-primary" style={{ marginTop: 14 }}><Icon name="plus" size={13} /> Ativar módulo</button>}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ModulesView, ModuleDetail });