/* ============================================================
   PROPERTIES + PROTOCOL views (functional, lighter)
   ============================================================ */

const { useState, useEffect, useRef, useMemo } = React;

/* ============== PROPERTIES ============== */
function PropertiesView({ chat }) {
  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); // 'anomalia' | 'pescaria' | null
  const [sel, setSel] = useState(null);
  const [mapProp, setMapProp] = useState(null);

  const regioes = ["todas", "Oeste PR", "Oeste SC", "NW RS", "Passo Fundo"];
  const rows = SKY.properties.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 === "pescaria" && !(p.tier === "A" && (p.regiao === "Oeste PR" || p.regiao === "NW RS"))) return false;
    return true;
  });

  return (
    <div className="view-pad">
      <div className="view-head">
        <span className="eyebrow">// Classificação A/B/C · nível propriedade</span>
        <h2 style={{ marginTop: 6 }}>Propriedades</h2>
        <p>Critério objetivo por gleba (CAR georreferenciado). Ajuste de franquias e gatilhos — não de taxa.</p>
      </div>

      {/* filters */}
      <div className="filters">
        <div className="filt"><span className="eyebrow">Região</span>
          <select value={fRegiao} onChange={(e) => setRegiao(e.target.value)}>{regioes.map((r) => <option key={r}>{r}</option>)}</select></div>
        <div className="filt"><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="filt"><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="filt grow"><span className="eyebrow">Score mínimo · {minScore}</span>
          <input type="range" min="0" max="100" value={minScore} className="exp-slider sm" style={{ "--pct": minScore + "%" }} onChange={(e) => setMinScore(+e.target.value)} /></div>
        <div className="filt"><span className="eyebrow">Flags</span>
          <div className="seg">
            <button className={onlyFlag === "pescaria" ? "on" : ""} onClick={() => setOnlyFlag(onlyFlag === "pescaria" ? null : "pescaria")}>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="card" style={{ overflow: "hidden" }}>
          <div className="tbl-scroll">
          <table className="tbl">
            <thead><tr><th>CAR / Gleba</th><th>Município</th><th>Score</th><th>Tier</th><th>Prod.</th><th>Sinistros 5s</th><th>Recomendação</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.anomalia && <span className="anom-pip" />}</td>
                  <td>{p.municipio}</td>
                  <td><ScorePill score={p.score} width={38} /></td>
                  <td><TierBadge tier={p.tier} /></td>
                  <td className="num">{p.produtividade ? p.produtividade + " sc" : "ND"}</td>
                  <td className="num">{p.sinistros5s}</td>
                  <td><span className={"rec" + (p.anomalia ? " rec-fraud" : "")}>{p.anomalia && <Icon name="alert" size={12} />}{p.recomendacao}</span></td>
                </tr>
              ))}
              {rows.length === 0 && <tr><td colSpan="7" style={{ textAlign: "center", color: "var(--fg-mute)", padding: 30 }}>Nenhuma propriedade no filtro atual.</td></tr>}
            </tbody>
          </table>
          </div>
        </div>

        {sel && <PropDetail p={sel} onClose={() => setSel(null)} chat={chat} onOpenMap={() => setMapProp(sel)} />}
      </div>

      {mapProp && <PropertyInspector p={mapProp} onClose={() => setMapProp(null)} chat={chat} />}
    </div>
  );
}

function PropDetail({ p, onClose, chat, onOpenMap }) {
  const reg = SKY.regionalRisk.find((r) => r.regiao.includes(p.regiao.replace("Oeste ", "Oeste ")) ) ||
              SKY.regionalRisk.find((r) => r.uf === p.uf) || SKY.regionalRisk[0];
  const regScore = { "Oeste PR": 68, "Oeste SC": 74, "NW RS": 61, "Passo Fundo": 43 }[p.regiao] || 60;
  // synth sinistro timeline 5s
  const years = [14,15,16,17,18,19,20,21,22,23];
  const tl = years.map((y, i) => {
    const seed = (p.id.charCodeAt(5) + i * 7) % 5;
    return p.sinistros5s > 0 && (seed === 0 || (p.anomalia && i % 2 === 0)) ? 1 : 0;
  });
  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.cultura}{p.irrigado ? " · irrigado" : " · sequeiro"}</span></div>
        </div>
        <button className="hp-close" onClick={onClose}><Icon name="x" size={14} /></button>
      </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-scorebox">
        <div className="pd-tier"><TierBadge tier={p.tier} /></div>
        <div className="pds-big tnum" style={{ color: SKY.scoreColor(p.score) }}>{p.score}<small>/100</small></div>
        <div className="pd-vs">
          <span className="mono">vs. média regional</span>
          <div className="pd-bars">
            <div className="pdb"><span>Propriedade</span><i style={{ width: p.score + "%", background: SKY.scoreColor(p.score) }} /><b className="tnum">{p.score}</b></div>
            <div className="pdb"><span>{p.regiao}</span><i style={{ width: regScore + "%", background: "var(--fg-mute)" }} /><b className="tnum">{regScore}</b></div>
          </div>
        </div>
      </div>

      {/* NDVI mini-map */}
      <div className="pd-block">
        <span className="eyebrow">Gleba · NDVI última safra</span>
        <div className="ndvi-mini">
          <svg viewBox="0 0 200 90" width="100%" height="90">
            {Array.from({ length: 84 }).map((_, i) => {
              const c = i % 14, r = Math.floor(i / 14);
              const v = p.irrigado ? 0.62 + ((c + r) % 4) * 0.08 : 0.45 + ((c * r) % 5) * 0.05;
              const ramp = ["#2C3A8A","#2A6FA8","#1FA7B0","#5FD6A4","#D9F37C"];
              const col = ramp[Math.min(4, Math.floor(((v - 0.42) / 0.4) * 5))];
              return <rect key={i} x={c * 14 + 2} y={r * 14 + 2} width="13" height="13" fill={col} rx="1.5" opacity={p.produtividade ? 1 : 0.25} />;
            })}
          </svg>
          {!p.produtividade && <div className="ndvi-nd mono">NDVI INCONSISTENTE · ND</div>}
        </div>
      </div>

      {/* sinistro timeline */}
      <div className="pd-block">
        <span className="eyebrow">Timeline de sinistros · 5s</span>
        <div className="sin-timeline">
          {tl.map((s, i) => (
            <div key={i} className="sin-yr">
              <span className={"sin-dot" + (s ? (p.anomalia ? " fraud" : " hit") : "")} />
              <em className="mono">'{years[i]}</em>
            </div>
          ))}
        </div>
      </div>

      {/* recommendation */}
      <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)"} /> Recomendação prescritiva</div>
        <p>{recText(p)}</p>
        <button className="btn btn-cyan" style={{ width: "100%", justifyContent: "center", marginTop: 10 }} onClick={() => chat.askHex({ code: p.id.slice(-7), regionName: p.municipio, level: p.tier === "A" ? "low" : p.tier === "B" ? "medium" : "critical", score: p.score, sicor: 400, sinistros: p.sinistros5s * 2, decretos: Math.round(p.sinistros5s / 3), ndvi: p.irrigado ? 0.68 : 0.5, tierA: p.tier === "A" ? 1 : 0, fraude: !!p.anomalia })}>
          <Icon name="sparkles" size={12} /> Analisar com IA
        </button>
      </div>
    </div>
  );
}
function recText(p) {
  if (p.anomalia) return `Anomalia Proagro: ${p.sinistros5s} sinistros em 5s sem produtividade reportada (ND). Bloquear subscrição e exigir vistoria presencial antes de qualquer operação.`;
  if (p.tier === "A") return `Propriedade Nível A${p.regiao !== "Oeste SC" ? " dentro de zona regional inferior" : ""}. ${p.irrigado ? "Irrigação confirmada via NDVI estável. " : ""}Score ${p.score}. Recomendo franquia de 20% (vs. padrão regional 35%).`;
  if (p.tier === "B") return `Nível B · score ${p.score}. Aceitar com gatilho elevado (${p.sinistros5s >= 5 ? 55 : 40}%) e franquia padrão. Monitorar NDVI na próxima safra.`;
  return `Nível C · score ${p.score}, ${p.sinistros5s} sinistros em 5s. Recusar ou condicionar a termo especial com vistoria.`;
}

/* ============== PROTOCOL ============== */
function ProtocolView({ chat }) {
  const [cfg, setCfg] = useState({
    nome: "Protocolo IRB — Sul 2025-2026",
    regiao: "Triângulo das Bermudas",
    soja: true, milho: true, trigo: false,
    janela: "5 safras (2020–2025)",
    scoreMin: 60, expMax: 20,
    franqA: 20, gatA: 30, franqB: 30, gatB: 40, franqC: 45,
    recusaC: true, blockFraude: true, vistoria: true, excecao: false,
  });
  const [gen, setGen] = useState(false);
  const [generating, setGenerating] = useState(false);
  const set = (k, v) => setCfg((c) => ({ ...c, [k]: v }));

  function generate() {
    setGenerating(true); setGen(false);
    setTimeout(() => { setGenerating(false); setGen(true); }, 1400);
  }
  const reducao = { 30: 9, 25: 13, 20: 18, 15: 24, 10: 31, 5: 39 };
  const closest = Object.keys(reducao).map(Number).reduce((a, b) => Math.abs(b - cfg.expMax) < Math.abs(a - cfg.expMax) ? b : a);

  return (
    <div className="view-pad">
      <div className="view-head">
        <span className="eyebrow">// Gerador de protocolo de subscrição</span>
        <h2 style={{ marginTop: 6 }}>Protocolo</h2>
        <p>Critérios objetivos que o IRB envia às seguradoras parceiras. Aceitar, condicionar ou rejeitar — fundamentado em 10 anos de dados.</p>
      </div>

      <div className="protocol-layout">
        {/* form */}
        <div className="card proto-form">
          <div className="pf-section">
            <label className="pf-row"><span>Nome do protocolo</span><input value={cfg.nome} onChange={(e) => set("nome", e.target.value)} /></label>
            <label className="pf-row"><span>Região de cobertura</span>
              <select value={cfg.regiao} onChange={(e) => set("regiao", e.target.value)}>
                <option>Triângulo das Bermudas</option><option>Oeste Paranaense</option><option>Noroeste RS</option>
              </select></label>
            <div className="pf-row"><span>Culturas</span>
              <div className="chk-group">
                {[["soja", "Soja"], ["milho", "Milho"], ["trigo", "Trigo"]].map(([k, l]) => (
                  <button key={k} className={"chk" + (cfg[k] ? " on" : "")} onClick={() => set(k, !cfg[k])}>
                    <span className="lcheck">{cfg[k] && <Icon name="check" size={11} />}</span>{l}
                  </button>
                ))}
              </div></div>
            <label className="pf-row"><span>Janela histórica</span>
              <select value={cfg.janela} onChange={(e) => set("janela", e.target.value)}>
                <option>5 safras (2020–2025)</option><option>5 anos (2019–2023)</option><option>30 anos (Proagro)</option>
              </select></label>
          </div>

          <div className="pf-section">
            <div className="pf-title eyebrow">Regras de aceitação</div>
            <div className="pf-num"><span>Score mínimo para aceitar</span><Stepper v={cfg.scoreMin} min={0} max={100} step={5} onChange={(v) => set("scoreMin", v)} suffix="/100" /></div>
            <div className="pf-num"><span>Exposição máx. em zona vermelha</span><Stepper v={cfg.expMax} min={5} max={40} step={5} onChange={(v) => set("expMax", v)} suffix="%" /></div>
          </div>

          <div className="pf-section">
            <div className="pf-title eyebrow">Diferenciação por tier</div>
            <div className="tier-cfg">
              <div className="tc-row"><TierBadge tier="A" /><span>score ≥ 85</span><Stepper v={cfg.franqA} min={0} max={60} step={5} onChange={(v) => set("franqA", v)} suffix="% fr" small /><Stepper v={cfg.gatA} min={0} max={80} step={5} onChange={(v) => set("gatA", v)} suffix="% ga" small /></div>
              <div className="tc-row"><TierBadge tier="B" /><span>60–84</span><Stepper v={cfg.franqB} min={0} max={60} step={5} onChange={(v) => set("franqB", v)} suffix="% fr" small /><Stepper v={cfg.gatB} min={0} max={80} step={5} onChange={(v) => set("gatB", v)} suffix="% ga" small /></div>
              <div className="tc-row"><TierBadge tier="C" /><span>&lt; 60</span>
                <button className={"chk inline" + (cfg.recusaC ? " on" : "")} onClick={() => set("recusaC", !cfg.recusaC)}><span className="lcheck">{cfg.recusaC && <Icon name="check" size={11} />}</span>Recusar</button>
              </div>
            </div>
          </div>

          <div className="pf-section">
            <div className="pf-title eyebrow">Tratamento de anomalias</div>
            {[["blockFraude", "Bloquear operações com flag de fraude Proagro"], ["vistoria", "Exigir vistoria presencial para score < 40"], ["excecao", "Permitir exceção com aprovação manual"]].map(([k, l]) => (
              <button key={k} className={"chk full" + (cfg[k] ? " on" : "")} onClick={() => set(k, !cfg[k])}>
                <span className="lcheck">{cfg[k] && <Icon name="check" size={11} />}</span>{l}
              </button>
            ))}
          </div>

          <button className="btn btn-primary" style={{ width: "100%", justifyContent: "center" }} onClick={generate} disabled={generating}>
            {generating ? <><span className="led-spin" style={{ borderTopColor: "#1a0a04" }} /> Gerando…</> : <><Icon name="sparkles" size={13} /> Gerar protocolo com IA</>}
          </button>
        </div>

        {/* preview document */}
        <div className="proto-preview">
          {!gen && !generating && (
            <div className="proto-empty">
              <Icon name="file" size={26} color="var(--fg-mute)" />
              <p>Configure os critérios e gere o protocolo. O documento aparece aqui, pronto para enviar às seguradoras parceiras.</p>
            </div>
          )}
          {generating && <div className="proto-empty"><span className="led-spin" style={{ width: 22, height: 22 }} /><p className="mono" style={{ letterSpacing: ".1em" }}>ORQUESTRANDO COMPLIANCE + PORTFOLIO AGENT…</p></div>}
          {gen && (
            <div className="proto-doc fade-up">
              <div className="doc-head">
                <div className="doc-brand"><span className="mono">SKYVIDYA OBSERVATORY: AGRO</span><h3>{cfg.nome}</h3></div>
                <div className="doc-meta mono">EMITIDO 28/05/2026<br />REF IRB-SUL-2526</div>
              </div>
              <div className="doc-scope">
                <div><span className="eyebrow">Escopo</span><b>{cfg.regiao}</b><em>{[cfg.soja && "Soja", cfg.milho && "Milho", cfg.trigo && "Trigo"].filter(Boolean).join(" + ")}</em></div>
                <div><span className="eyebrow">Base</span><b>{cfg.janela}</b><em>127.267 glebas · SICOR/Proagro</em></div>
              </div>

              <DocSection n="01" title="Zonas de restrição">
                <li>Municípios com score médio &lt; {cfg.scoreMin}: <b className="coral">RECUSAR</b> operações.</li>
                {cfg.blockFraude && <li>Regiões com flag de anomalia ativa (Passo Fundo): <b className="coral">SUSPENDER</b> subscrição.</li>}
              </DocSection>
              <DocSection n="02" title="Condições por classificação">
                <li><b className="up">Nível A</b> (≥85): franquia {cfg.franqA}% · gatilho {cfg.gatA}%</li>
                <li><b className="warnc">Nível B</b> (60–84): franquia {cfg.franqB}% · gatilho {cfg.gatB}%</li>
                <li><b className="down">Nível C</b> (&lt;60): {cfg.recusaC ? "recusar ou termo especial" : `franquia ${cfg.franqC}%`}</li>
              </DocSection>
              <DocSection n="03" title="Limite de portfólio">
                <li>Exposição máxima em zonas vermelhas: <b>{cfg.expMax}%</b></li>
                <li>Redução estimada de sinistralidade: <b className="up">−{reducao[closest]}%</b> <span className="soft">(histórico 5s)</span></li>
              </DocSection>
              {cfg.vistoria && <DocSection n="04" title="Controles adicionais"><li>Vistoria presencial obrigatória para score &lt; 40.</li>{cfg.excecao && <li>Exceções permitidas mediante aprovação manual documentada.</li>}</DocSection>}

              <div className="doc-actions">
                <button className="btn"><Icon name="download" size={13} /> Exportar PDF</button>
                <button className="btn"><Icon name="share" size={13} /> Compartilhar</button>
                <button className="btn"><Icon name="refresh" size={13} /> Versionar</button>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function DocSection({ n, title, children }) {
  return (
    <div className="doc-section">
      <div className="ds-title"><span className="mono ds-n">{n}</span>{title}</div>
      <ul>{children}</ul>
    </div>
  );
}

function Stepper({ v, min, max, step, onChange, suffix, small }) {
  return (
    <div className={"stepper" + (small ? " sm" : "")}>
      <button onClick={() => onChange(Math.max(min, v - step))}>−</button>
      <span className="tnum">{v}<em>{suffix}</em></span>
      <button onClick={() => onChange(Math.min(max, v + step))}>+</button>
    </div>
  );
}

Object.assign(window, { PropertiesView, ProtocolView });