/* ============================================================
   SKYVIDYA v3 — Ativos (portfólio → propriedade → parcelas)
   + onboarding "adicionar ativo" (CAR/CPF/CNPJ → módulos)
   ============================================================ */
const { useState, useEffect, useRef, useMemo } = React;

/* ---------- Ativos ---------- */
function AssetsView({ chat, access, onAdd, onVerify }) {
  const [sel, setSel] = useState(null);
  const [mapAsset, setMapAsset] = useState(null);
  const assets = useMemo(() => SKY.assetPortfolio(access.assetScope), [access.id]);

  // filters (restored from v2)
  const REGIOES = useMemo(() => ["todas", ...Array.from(new Set(assets.map(a => a.regiao)))], [assets]);
  const [fRegiao, setRegiao] = useState("todas");
  const [fTier, setTier] = useState("todos");
  const [fCultura, setCultura] = useState("todas");
  const [minScore, setMinScore] = useState(0);
  const [onlyFlag, setOnlyFlag] = useState(null);          // 'topleads' | 'anomalia'

  const rows = useMemo(() => assets.filter((p) => {
    if (fRegiao !== "todas" && p.regiao !== fRegiao) return false;
    if (fTier !== "todos" && p.tier !== fTier) return false;
    if (fCultura !== "todas" && !(p.cultura === fCultura || p.cultura === "Ambas")) return false;
    if (p.score < minScore) return false;
    if (onlyFlag === "anomalia" && !p.anomalia) return false;
    if (onlyFlag === "topleads" && !(p.tier === "A" && (p.regiao === "Oeste PR" || p.regiao === "NW RS" || p.regiao === "Noroeste RS"))) return false;
    return true;
  }), [assets, fRegiao, fTier, fCultura, minScore, onlyFlag]);

  // carteira KPIs
  const kpi = useMemo(() => {
    const total = rows.length;
    const eleg = rows.filter(p => p.score >= 60).length;
    const crit = rows.filter(p => p.score < 50 || p.regiao === "Passo Fundo").length;
    const inad = total ? Math.round(rows.reduce((a, p) => a + (p.taxa_sinistro != null ? p.taxa_sinistro : (p.sinistros5s || 0) / 5), 0) / total * 100) : 0;
    const clim = rows.filter(p => p.regiao === "Noroeste RS" || p.regiao === "NW RS" || p.regiao === "Passo Fundo").length;
    return { total, eleg, crit, inad, clim, climPct: total ? Math.round(clim / total * 100) : 0, elegPct: total ? Math.round(eleg / total * 100) : 0, critPct: total ? Math.round(crit / total * 100) : 0 };
  }, [rows]);

  return (
    <div className="v2-pad fade-up">
      <ViewHead eyebrow={"// Portfólio · nível de acesso: " + access.short}
        title={"Ativos · " + assets.length + " células H3-L7"}
        sub={access.id === "cliente"
          ? "Os seus ativos. Mesmo um único proprietário pode ter N propriedades — e cada propriedade, N parcelas."
          : "Classificação de risco por gleba — safras 2020–2025 (SICOR/PROAGRO). Cada ativo carrega módulos contratados e estado de conformidade."}
        right={<button className="btn btn-primary" onClick={onAdd}><Icon name="plus" size={13} /> Adicionar ativo</button>} />

      {/* Funil de operações SICOR */}
      <div className="mono" style={{fontSize:11,color:"var(--fg-mute)",marginBottom:12,letterSpacing:".05em",display:"flex",gap:16,flexWrap:"wrap"}}>
        <span>UNIVERSO IRB · 184 MUNICÍPIOS</span>
        <span style={{color:"var(--fg-soft)"}}>→ 2.306.165 operações SICOR brutas</span>
        <span style={{color:"var(--fg-soft)"}}>→ 1.462.901 glebas ≥10 ha</span>
        <span style={{color:"var(--sv-cyan)"}}>→ 127.267 glebas únicas (centroides)</span>
        <span style={{color:"var(--sv-cyan)"}}>→ 102.921 pares gleba×safra (análise temporal)</span>
        <span style={{color:"var(--sv-coral)",fontWeight:600}}>→ 7.981 células H3-L7 (classificação A/B/C)</span>
      </div>

      {/* CARTEIRA macro-KPIs */}
      <div className="asset-kpis">
        <div className="akpi"><span className="akpi-l mono">Células H3-L7 na carteira</span><b className="akpi-v tnum">{kpi.total}</b></div>
        <div className="akpi"><span className="akpi-l mono">Elegíveis · score ≥ 60</span><b className="akpi-v tnum" style={{color:"var(--risk-low)"}}>{kpi.eleg}<small>· {kpi.elegPct}%</small></b></div>
        <div className="akpi"><span className="akpi-l mono">Classe C · alto risco</span><b className="akpi-v tnum" style={{color:"var(--risk-critical)"}}>{kpi.crit}<small>· {kpi.critPct}%</small></b></div>
        <div className="akpi"><span className="akpi-l mono">Taxa sinistro média</span><b className="akpi-v tnum" style={{color: kpi.inad > 20 ? "var(--risk-critical)" : "var(--sv-warn)"}}>{kpi.inad}<small>%</small></b></div>
        <div className="akpi"><span className="akpi-l mono">Zona de risco · NW RS + PF</span><b className="akpi-v tnum" style={{color:"var(--sv-warn)"}}>{kpi.clim}<small>· {kpi.climPct}%</small></b></div>
      </div>

      {/* filters */}
      <div className="asset-filters">
        <div className="af-field"><span className="eyebrow">Região</span>
          <select value={fRegiao} onChange={(e) => setRegiao(e.target.value)}>{REGIOES.map(r => <option key={r} value={r}>{r === "todas" ? "Todas" : r}</option>)}</select></div>
        <div className="af-field"><span className="eyebrow">Tier</span>
          <div className="seg">{["todos", "A", "B", "C"].map(t => <button key={t} className={fTier === t ? "on" : ""} onClick={() => setTier(t)}>{t === "todos" ? "Todos" : t}</button>)}</div></div>
        <div className="af-field"><span className="eyebrow">Cultura</span>
          <div className="seg">{["todas", "Soja", "Milho"].map(c => <button key={c} className={fCultura === c ? "on" : ""} onClick={() => setCultura(c)}>{c === "todas" ? "Todas" : c}</button>)}</div></div>
        <div className="af-field grow"><span className="eyebrow">Score mínimo · {minScore}</span>
          <input type="range" min="0" max="100" value={minScore} className="af-range" style={{ "--pct": minScore + "%" }} onChange={(e) => setMinScore(+e.target.value)} /></div>
        <div className="af-field"><span className="eyebrow">Flags</span>
          <div className="seg">
            <button className={onlyFlag === "topleads" ? "on" : ""} onClick={() => setOnlyFlag(onlyFlag === "topleads" ? null : "topleads")}>Top Leads</button>
            <button className={onlyFlag === "anomalia" ? "on" : ""} onClick={() => setOnlyFlag(onlyFlag === "anomalia" ? null : "anomalia")}>Anomalias</button>
          </div></div>
      </div>

      <div className={"prop-layout" + (sel ? " open" : "")}>
        <div className="v2-card" style={{ overflow: "hidden" }}>
          <div className="tbl-scroll">
            <table className="tbl">
              <thead><tr><th>CAR / Ativo</th><th>Município</th><th>Parcelas</th><th>Score</th><th>Módulos</th><th>ESG</th></tr></thead>
              <tbody>
                {rows.map((p) => (
                  <tr key={p.id} className={(p.anomalia ? "anomaly " : "") + (sel && sel.id === p.id ? "sel" : "")} onClick={() => setSel(p)}>
                    <td className="num" style={{ color: "var(--fg)" }}>{p.id}{p.tier === "A" && (p.regiao === "Oeste PR" || p.regiao === "NW RS" || p.regiao === "Noroeste RS") && <span className="tl-pip" title="Top Lead" />}</td>
                    <td>{p.municipio} · {p.uf}</td>
                    <td className="num">{p.parcelas}</td>
                    <td><ScorePill score={p.score} width={38} /></td>
                    <td>
                      <span className="asset-mods">
                        {p.modulos.map((mid) => {
                          const m = SKY.MODULES.find((x) => x.id === mid);
                          return <span key={mid} className="am-chip mono" title={m ? m.name : mid}>{mid.toUpperCase()}</span>;
                        })}
                      </span>
                    </td>
                    <td>{p.esgOk
                      ? <span className="esg-pill ok mono"><Icon name="check" size={10} /> isento</span>
                      : <span className="esg-pill bad mono"><Icon name="alert" size={10} /> alerta</span>}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        {sel && <AssetDetail p={sel} onClose={() => setSel(null)} chat={chat} access={access} onVerify={onVerify} onOpenMap={() => setMapAsset(sel)} />}
      </div>
      {mapAsset && window.PropertyInspector && <PropertyInspector p={mapAsset} chat={chat} onClose={() => setMapAsset(null)} />}
    </div>
  );
}

function AssetDetail({ p, onClose, chat, access, onVerify, onOpenMap }) {
  // parcelas = glebas reais na célula H3 (ng); ha proporcional à área total da célula
  const parcels = useMemo(() => {
    const n = Math.max(1, Math.min(12, p.ng || p.parcelas || 3));
    const haCell = p.ha || 500;
    return Array.from({ length: n }, (_, i) => ({
      id: p.id + "-G" + (i + 1).toString().padStart(2, "0"),
      ha: Math.round(haCell / n),
      cultura: i % 3 === 2 && p.cultura === "Ambas" ? "Milho" : (p.cultura === "Milho" ? "Milho" : "Soja"),
      ts: +(p.taxa_sinistro || 0).toFixed(2),
    }));
  }, [p.id, p.ng, p.ha, p.cultura, p.taxa_sinistro]);
  return (
    <div className="prop-detail fade-up">
      <div className="pd-head">
        <div>
          <span className="mono pd-id">{p.id}</span>
          <div className="pd-muni">{p.municipio} · {p.uf} <span className="soft">· {p.parcelas} parcelas</span></div>
        </div>
        <button className="hp-close" onClick={onClose}><Icon name="x" size={14} /></button>
      </div>

      <div className="pd-scorebox">
        <div className="pd-tier"><TierBadge tier={p.tier} /></div>
        <div className="pd-vs">
          <span className="mono">módulos ativos</span>
          <div className="asset-mods" style={{ marginTop: 4 }}>
            {p.modulos.map((mid) => <span key={mid} className="am-chip mono">{mid.toUpperCase()}</span>)}
          </div>
        </div>
        <span className="pd-gauge"><ResilienceGauge value={p.score} size={92} compact showLabel={false} showDots={false} /></span>
      </div>

      {/* vs region + vs H3 cell */}
      <div className="pd-block pd-cmp">
        <span className="eyebrow">Comparativo do ativo</span>
        <div className="pd-bars">
          <div className="pdb"><span>Esta gleba</span><i style={{ width: p.score + "%", background: SKY.scoreColor(p.score) }} /><b className="tnum">{p.score}</b></div>
          {(() => { const rr = (SKY.regionalRisk||[]).find(r=>r.regiao===p.regiao); const rs = rr?rr.score:61; return (
            <div className="pdb"><span>vs. {p.regiao}</span><i style={{ width: rs + "%", background: "var(--fg-mute)" }} /><b className="tnum">{rs}</b></div>
          ); })()}
          <div className="pdb"><span>Taxa sinistro · 5 safras</span><i style={{ width: Math.round((p.taxa_sinistro||0)*100) + "%", background: "var(--risk-high)" }} /><b className="tnum">{Math.round((p.taxa_sinistro||0)*100)}%</b></div>
        </div>
        {p.tier === "A" && p.score - 60 > 12 && <div className="pi-flag good" style={{marginTop:8}}><Icon name="gem" size={12} /> Top Lead — {p.score - 60} pts acima da região</div>}
      </div>

      <div style={{ padding: "12px 14px 0" }}>
        <button className="pd-mapcta" onClick={onOpenMap}>
          <Icon name="map" size={14} /> Abrir mapa da gleba
        </button>
      </div>

      <div className="pd-block">
        <span className="eyebrow">Parcelas · glebas</span>
        <div className="parcel-list">
          {parcels.map((pc) => (
            <div className="parcel-row" key={pc.id}>
              <span className="mono pr-id">{pc.id.slice(-3)}</span>
              <span className="pr-cult">{pc.cultura}</span>
              <span className="mono pr-ha">{pc.ha} ha</span>
              <span className="mono pr-ndvi" style={{ color: pc.ts <= 0.087 ? "var(--risk-low)" : pc.ts <= 0.162 ? "var(--sv-warn)" : "var(--risk-critical)" }}>sinistro {Math.round(pc.ts*100)}%</span>
            </div>
          ))}
        </div>
      </div>

      {window.SeloBlock && <SeloBlock asset={p} access={access} onVerify={onVerify || (() => {})} />}

      <div className={"pd-rec" + (p.anomalia ? " fraud" : "")}>
        <div className="pdr-head"><Icon name="sparkles" size={13} color={p.anomalia ? "var(--risk-critical)" : "var(--sv-cyan)"} /> Estado de conformidade</div>
        <p>{p.anomalia
          ? "Anomalia cadastral ativa: sinistros recorrentes sem produtividade reportada. Recomenda-se vistoria antes de qualquer análise de oportunidade."
          : p.esgOk
            ? "Ativo isento de alertas de desmatamento e apto para módulos Market (Green Bonds, Crédito, Sinergia)."
            : "Alerta ESG ativo — resolver pendência antes de habilitar módulos de oportunidade."}</p>
        <button className="btn btn-cyan" style={{ width: "100%", justifyContent: "center", marginTop: 10 }}
          onClick={() => chat.askFree("Analise o ativo " + p.id + " (" + p.municipio + ")")}>
          <Icon name="sparkles" size={12} /> Analisar com IA
        </button>
      </div>
    </div>
  );
}

/* ---------- Onboarding: adicionar ativo ---------- */
function OnboardingModal({ open, onClose }) {
  const [step, setStep] = useState(0);
  const [doc, setDoc] = useState("");
  const [mods, setMods] = useState(["esg"]);
  const [validating, setValidating] = useState(false);
  useEffect(() => { if (open) { setStep(0); setDoc(""); setMods(["esg"]); } }, [open]);
  if (!open) return null;

  function validate() {
    setValidating(true);
    setTimeout(() => { setValidating(false); setStep(1); }, 1100);
  }
  function toggleMod(id) { setMods((m) => m.includes(id) ? m.filter((x) => x !== id) : [...m, id]); }
  const suggested = ["esg", "agro", "cadastral", "prodmatrix"];

  return (
    <div className="cb-overlay" onClick={onClose}>
      <div className="up-panel ob-panel fade-up" onClick={(e) => e.stopPropagation()}>
        <div className="ob-steps mono">
          {["IDENTIFICAÇÃO", "MÓDULOS", "CONFIRMAR"].map((s, i) => (
            <span key={s} className={"ob-step" + (step === i ? " on" : step > i ? " done" : "")}>{i + 1} · {s}</span>
          ))}
        </div>

        {step === 0 && (
          <>
            <h3 className="up-title">Adicionar ativo</h3>
            <p className="up-body">Informe o CAR da propriedade, ou o CPF/CNPJ do titular para importar todos os ativos vinculados.</p>
            <input className="ob-input mono" value={doc} onChange={(e) => setDoc(e.target.value)}
              placeholder="CAR · CPF · CNPJ" />
            <div className="row gap8" style={{ marginTop: 14 }}>
              <button className="btn btn-primary" disabled={!doc.trim() || validating} onClick={validate}>
                {validating ? <><span className="led-spin" style={{ borderTopColor: "#1a0a04" }} /> Validando…</> : <>Validar <Icon name="arrowR" size={13} /></>}
              </button>
              <button className="btn" onClick={onClose}>Cancelar</button>
            </div>
          </>
        )}
        {step === 1 && (
          <>
            <h3 className="up-title">Módulos sugeridos</h3>
            <p className="up-body">Validado: <b className="mono" style={{ color: "var(--risk-low)" }}>{doc || "PR-4104659-NEW"}</b> · 2 parcelas detectadas via CAR. Selecione os módulos para este ativo:</p>
            <div className="ob-mods">
              {suggested.map((id) => {
                const m = SKY.MODULES.find((x) => x.id === id);
                const on = mods.includes(id);
                return (
                  <button key={id} className={"ob-mod" + (on ? " on" : "")} onClick={() => toggleMod(id)}>
                    <span className={"ltg" + (on ? " on" : "")} />
                    <span className="ob-mod-n">{m.name}</span>
                  </button>
                );
              })}
            </div>
            <div className="row gap8" style={{ marginTop: 14 }}>
              <button className="btn btn-primary" disabled={!mods.length} onClick={() => setStep(2)}>Continuar <Icon name="arrowR" size={13} /></button>
              <button className="btn" onClick={() => setStep(0)}>Voltar</button>
            </div>
          </>
        )}
        {step === 2 && (
          <>
            <h3 className="up-title">Ativo adicionado</h3>
            <p className="up-body">O ativo entra no portfólio com {mods.length} módulo(s): <b>{mods.map((id) => (SKY.MODULES.find((x) => x.id === id) || {}).name).join(", ")}</b>. A primeira análise roda em segundos sobre o Earth AI Data Cube.</p>
            <div className="ob-done"><Icon name="check" size={22} color="var(--risk-low)" /></div>
            <button className="btn btn-primary" style={{ width: "100%", justifyContent: "center" }} onClick={onClose}>Concluir</button>
          </>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { AssetsView, AssetDetail, OnboardingModal });