/* ============================================================
   SKYVIDYA v5 — PROTOCOLOS: motor de regras (UI)
   Lista/biblioteca · template starter · editor (esq) +
   painel de impacto sticky (dir) · rodapé de governança.
   ============================================================ */
const { useState, useMemo, useEffect } = React;

/* ---------- small controls ---------- */
function PToggle({ on, onChange, label, sub, danger }) {
  return (
    <button className={"ptoggle" + (on ? " on" : "") + (danger ? " danger" : "")} onClick={() => onChange(!on)}>
      <span className="ptg-sw" />
      <span className="ptg-text"><b>{label}</b>{sub && <em>{sub}</em>}</span>
    </button>
  );
}
function PSlider({ value, min, max, step, onChange, unit, tone }) {
  const pct = ((value - min) / (max - min)) * 100;
  return (
    <div className={"pslider tone-" + (tone || "coral")}>
      <input type="range" min={min} max={max} step={step || 1} value={value}
        style={{ "--pct": pct + "%" }} onChange={(e) => onChange(+e.target.value)} />
      <span className="psl-val mono">{value}{unit}</span>
    </div>
  );
}
function PNum({ value, onChange, min, max, step, suffix }) {
  return (
    <div className="pnum">
      <button onClick={() => onChange(Math.max(min, value - (step || 5)))}>−</button>
      <span className="mono">{value}<em>{suffix}</em></span>
      <button onClick={() => onChange(Math.min(max, value + (step || 5)))}>+</button>
    </div>
  );
}
function StateBadge({ state, sm }) {
  const cls = { Rascunho: "rascunho", Simulado: "simulado", Aprovado: "aprovado", Publicado: "publicado" }[state] || "rascunho";
  return <span className={"pstate " + cls + (sm ? " sm" : "")}>{state}</span>;
}
function EditorBlock({ tag, title, sub, right, children, scope }) {
  return (
    <section className="ed-block" data-screen-label={scope}>
      <div className="eb-head">
        <div className="eb-h-left">
          <span className="mono eb-tag">{tag}</span>
          <div><b className="eb-title">{title}</b>{sub && <span className="eb-sub">{sub}</span>}</div>
        </div>
        {right}
      </div>
      <div className="eb-body">{children}</div>
    </section>
  );
}

/* ---------- escopo mini-map (stylized PR/SC/RS) ---------- */
const SUL_UF = {
  PR: "M40 26 L120 14 L188 24 L196 60 L150 70 L96 74 L48 66 Z",
  SC: "M48 70 L96 78 L150 74 L196 64 L208 96 L150 108 L90 110 L52 100 Z",
  RS: "M52 104 L90 114 L150 112 L208 100 L212 150 L168 186 L110 196 L66 168 L46 132 Z",
};
function EscopoMap({ ufs, onToggle }) {
  return (
    <div className="escopo-map">
      <svg viewBox="0 0 232 210" width="100%" style={{ display: "block" }}>
        <defs>
          <pattern id="phex" width="13" height="11.3" patternUnits="userSpaceOnUse" patternTransform="translate(0,0)">
            <polygon points="6.5,0 13,3.8 13,7.5 6.5,11.3 0,7.5 0,3.8" fill="none" stroke="var(--rule)" strokeWidth="0.4" />
          </pattern>
        </defs>
        <rect x="0" y="0" width="232" height="210" fill="url(#phex)" opacity="0.5" />
        {Object.entries(SUL_UF).map(([uf, d]) => {
          const on = ufs.includes(uf);
          return (
            <path key={uf} d={d} onClick={() => onToggle(uf)}
              fill={on ? "color-mix(in srgb, var(--sv-coral) 22%, transparent)" : "var(--bg-elev-2)"}
              stroke={on ? "var(--sv-coral)" : "var(--rule)"} strokeWidth={on ? 1.6 : 1}
              style={{ cursor: "pointer", transition: "all 160ms" }} />
          );
        })}
        {[["PR", 110, 46], ["SC", 120, 92], ["RS", 124, 150]].map(([uf, x, y]) => (
          <text key={uf} x={x} y={y} textAnchor="middle" className="escopo-lbl"
            fill={ufs.includes(uf) ? "var(--sv-coral)" : "var(--fg-mute)"}>{uf}</text>
        ))}
      </svg>
      <span className="mono escopo-cap">EPSG:4674 · CLIQUE PARA INCLUIR UF</span>
    </div>
  );
}

/* ---------- impact panel pieces ---------- */
function StackedBar({ ev }) {
  return (
    <div className="stacked">
      <div className="stk-bar">
        <span className="stk aceita" style={{ width: ev.pAceita + "%" }} title="aceita" />
        <span className="stk cond" style={{ width: ev.pCond + "%" }} title="condicionada" />
        <span className="stk rec" style={{ width: ev.pRec + "%" }} title="recusada" />
      </div>
      <div className="stk-legend">
        <span><i className="aceita" /> Aceita <b className="mono">{ev.pAceita}%</b></span>
        <span><i className="cond" /> Condicionada <b className="mono">{ev.pCond}%</b></span>
        <span><i className="rec" /> Recusada <b className="mono">{ev.pRec}%</b></span>
      </div>
    </div>
  );
}

function ProtoEditor({ cfg, setCfg, access, onBack, chat }) {
  const [yamlOpen, setYamlOpen] = useState(false);
  const [toast, setToast] = useState(null);
  const ev = useMemo(() => SKY.protoEvaluate(cfg), [cfg]);
  const issues = useMemo(() => SKY.protoValidate(cfg), [cfg]);
  const suggestion = useMemo(() => SKY.protoSuggest(cfg, ev), [cfg, ev]);
  const errors = issues.filter((i) => i.level === "error");
  const canPublish = access.id === "gestor" || access.id === "admin";

  function set(path, value) {
    setCfg((c) => {
      const n = JSON.parse(JSON.stringify(c));
      const ks = path.split(".");
      let o = n; for (let i = 0; i < ks.length - 1; i++) o = o[ks[i]];
      o[ks[ks.length - 1]] = value;
      return n;
    });
  }
  function setTier(tier, key, value) {
    setCfg((c) => { const n = JSON.parse(JSON.stringify(c)); n.b3.find((t) => t.tier === tier)[key] = value; return n; });
  }
  function setState(s) { set("meta.estado", s); flash(`Estado: ${s}`); }
  function flash(msg) { setToast(msg); setTimeout(() => setToast(null), 2200); }
  function applySuggestion() { if (suggestion) { setCfg(suggestion.newCfg); flash("Sugestão aplicada · impacto recalculado"); } }

  const lensTone = { esg: "coral", agro: "cyan", cadastral: "soft", prod: "good" };

  return (
    <div className="v2-pad proto-editor-wrap fade-up">
      <div className="pe-top">
        <button className="btn" onClick={onBack}><Icon name="chevL" size={13} /> Biblioteca</button>
        <div className="pe-title">
          <StateBadge state={cfg.meta.estado} />
          <h2>{cfg.meta.nome}</h2>
          <span className="mono pe-ver">v{cfg.meta.versao} · {cfg.meta.dono}</span>
        </div>
        <button className="btn btn-cyan" onClick={() => setYamlOpen((v) => !v)}>
          <Icon name="file" size={13} /> {yamlOpen ? "Ocultar spec" : "Ver spec (YAML)"}
        </button>
      </div>

      <div className="proto-grid">
        {/* ============ EDITOR (left) ============ */}
        <div className="proto-col-editor">
          {/* METADADOS */}
          <EditorBlock tag="META" title="Metadados" sub="identidade, ciclo de vida e aplicabilidade" scope="Protocolo · Metadados">
            <div className="ed-grid2">
              <label className="ed-field"><span>Nome do protocolo</span>
                <input value={cfg.meta.nome} onChange={(e) => set("meta.nome", e.target.value)} /></label>
              <label className="ed-field"><span>Dono</span>
                <input value={cfg.meta.dono} onChange={(e) => set("meta.dono", e.target.value)} /></label>
            </div>
            <div className="ed-grid2">
              <div className="ed-field"><span>Estado</span>
                <div className="seg-states">
                  {SKY.PROTO_STATES.map((s) => (
                    <button key={s} className={cfg.meta.estado === s ? "on" : ""}
                      disabled={(s === "Aprovado" || s === "Publicado") && !canPublish}
                      onClick={() => setState(s)}>{s}</button>
                  ))}
                </div>
              </div>
              <div className="ed-field"><span>Vigência</span>
                <div className="row gap8">
                  <input type="date" className="ed-date" value={cfg.meta.vigIni} onChange={(e) => set("meta.vigIni", e.target.value)} />
                  <span className="mono soft" style={{ alignSelf: "center" }}>→</span>
                  <input type="date" className="ed-date" value={cfg.meta.vigFim} onChange={(e) => set("meta.vigFim", e.target.value)} />
                </div>
              </div>
            </div>
            <div className="ed-field"><span>Aplicabilidade</span>
              <div className="row gap8">
                <button className={"chip-toggle" + (cfg.meta.aplicaNovas ? " on" : "")} onClick={() => set("meta.aplicaNovas", !cfg.meta.aplicaNovas)}>
                  <span className="lcheck">{cfg.meta.aplicaNovas && <Icon name="check" size={11} />}</span>Novas operações</button>
                <button className={"chip-toggle" + (cfg.meta.aplicaRenov ? " on" : "")} onClick={() => set("meta.aplicaRenov", !cfg.meta.aplicaRenov)}>
                  <span className="lcheck">{cfg.meta.aplicaRenov && <Icon name="check" size={11} />}</span>Renovações</button>
              </div>
            </div>
          </EditorBlock>

          {/* ESCOPO */}
          <EditorBlock tag="ESCOPO" title="Escopo" sub="recorte espacial, culturas e janela histórica" scope="Protocolo · Escopo">
            <div className="escopo-layout">
              <div>
                <div className="ed-field"><span>Modo de seleção espacial</span>
                  <div className="seg-states small">
                    {[["uf", "UF"], ["municipio", "Município"], ["h3", "Células H3"], ["desenho", "Desenho"]].map(([v, l]) => (
                      <button key={v} className={cfg.escopo.modo === v ? "on" : ""} onClick={() => set("escopo.modo", v)}>{l}</button>
                    ))}
                  </div>
                </div>
                {cfg.escopo.modo === "uf" && (
                  <div className="ed-field"><span>UFs incluídas</span>
                    <div className="row gap8 wrap">
                      {["PR", "SC", "RS", "MS", "MT", "GO"].map((uf) => (
                        <button key={uf} className={"chip-toggle sm" + (cfg.escopo.ufs.includes(uf) ? " on" : "")}
                          onClick={() => set("escopo.ufs", cfg.escopo.ufs.includes(uf) ? cfg.escopo.ufs.filter((x) => x !== uf) : [...cfg.escopo.ufs, uf])}>{uf}</button>
                      ))}
                    </div>
                  </div>
                )}
                {cfg.escopo.modo === "municipio" && (
                  <div className="ed-field"><span>Municípios</span>
                    <div className="row gap8 wrap">
                      {cfg.escopo.municipios.map((m) => <span key={m} className="mun-chip mono">{m} <Icon name="x" size={10} /></span>)}
                      <button className="mun-add mono">+ adicionar</button>
                    </div>
                  </div>
                )}
                {(cfg.escopo.modo === "h3" || cfg.escopo.modo === "desenho") && (
                  <div className="ed-hint mono">{cfg.escopo.modo === "h3" ? "SELEÇÃO POR CÉLULAS H3 — DESENHE NO MAPA DE RISCO." : "POLÍGONO LIVRE — DESENHE A ÁREA NO MAPA DE RISCO."}</div>
                )}
                <div className="ed-field"><span>Culturas</span>
                  <div className="row gap8">
                    {[["soja", "Soja"], ["milho", "Milho"], ["trigo", "Trigo"]].map(([k, l]) => (
                      <button key={k} className={"chip-toggle" + (cfg.escopo.culturas[k] ? " on" : "")} onClick={() => set("escopo.culturas." + k, !cfg.escopo.culturas[k])}>
                        <span className="lcheck">{cfg.escopo.culturas[k] && <Icon name="check" size={11} />}</span>{l}</button>
                    ))}
                  </div>
                </div>
                <div className="ed-field"><span>Janela histórica</span>
                  <div className="row gap8 aic wrap">
                    <div className="seg-states small">
                      <button className={cfg.escopo.janelaMovel ? "on" : ""} onClick={() => set("escopo.janelaMovel", true)}>Móvel</button>
                      <button className={!cfg.escopo.janelaMovel ? "on" : ""} onClick={() => set("escopo.janelaMovel", false)}>Fixa</button>
                    </div>
                    <span className="mono soft" style={{ fontSize: 11 }}>
                      {cfg.escopo.janelaMovel ? `últimos ${cfg.escopo.janelaAnos} anos` : "2020–2025"}
                    </span>
                  </div>
                </div>
              </div>
              <EscopoMap ufs={cfg.escopo.ufs} onToggle={(uf) => set("escopo.ufs", cfg.escopo.ufs.includes(uf) ? cfg.escopo.ufs.filter((x) => x !== uf) : [...cfg.escopo.ufs, uf])} />
            </div>
          </EditorBlock>

          {/* B1 ELEGIBILIDADE */}
          <EditorBlock tag="B1" title="Elegibilidade" sub="filtros duros · pass/fail por ativo" scope="Protocolo · B1 Elegibilidade"
            right={<span className="rule-kind ativo">REGRA DE ATIVO</span>}>
            <div className="ed-toggles">
              <PToggle on={cfg.b1.carAtivo} onChange={(v) => set("b1.carAtivo", v)} label="CAR ativo" sub="cadastro ambiental rural regular" />
              <PToggle on={cfg.b1.semEmbargo} onChange={(v) => set("b1.semEmbargo", v)} label="Sem embargo IBAMA" sub="área não embargada" />
              <PToggle on={cfg.b1.semListaSuja} onChange={(v) => set("b1.semListaSuja", v)} label="Fora da lista suja MTE" sub="união por atributos · CPF/CNPJ" />
              <PToggle on={cfg.b1.semDesmate24m} onChange={(v) => set("b1.semDesmate24m", v)} label="Sem alerta de desmate ≤ 24m" sub="PRODES/DETER · pronto p/ CMN 5.267 · EUDR" />
            </div>
          </EditorBlock>

          {/* B2 LIMIARES POR LENTE */}
          <EditorBlock tag="B2" title="Limiares por lente" sub="cada nicho pesa lentes diferentes" scope="Protocolo · B2 Limiares"
            right={<span className="rule-kind ativo">REGRA DE ATIVO</span>}>
            <div className="lens-list">
              {SKY.LENSES.map((L) => (
                <div className={"lens-row" + (cfg.b2[L.id].on ? " on" : "")} key={L.id}>
                  <button className={"lens-tog" + (cfg.b2[L.id].on ? " on" : "")} onClick={() => set("b2." + L.id + ".on", !cfg.b2[L.id].on)}>
                    <span className="ptg-sw" />
                  </button>
                  <span className="lens-name">{L.label}<em className="mono">{SKY.METRIC_DICT[L.metric].label}</em></span>
                  {cfg.b2[L.id].on
                    ? <PSlider value={cfg.b2[L.id].min} min={0} max={100} step={5} unit="" tone={lensTone[L.id]} onChange={(v) => set("b2." + L.id + ".min", v)} />
                    : <span className="lens-off mono">desativada</span>}
                </div>
              ))}
            </div>
          </EditorBlock>

          {/* B3 FAIXAS → AÇÕES */}
          <EditorBlock tag="B3" title="Faixas → Ações" sub="tiers paramétricos · fonte única do score mínimo" scope="Protocolo · B3 Faixas"
            right={<span className="rule-kind ativo">REGRA DE ATIVO</span>}>
            <div className="tiers">
              <div className="tier-head mono"><span>FAIXA</span><span>SCORE ≥</span><span>AÇÃO</span><span>FRANQUIA %</span><span>GATILHO %</span></div>
              {cfg.b3.map((t) => (
                <div className={"tier-row tier-" + t.tier} key={t.tier}>
                  <span className="t-badge"><TierBadge tier={t.tier} /></span>
                  <span className="t-min">{t.tier === "C" ? <span className="mono soft">0 (piso)</span> : <PNum value={t.min} min={1} max={99} step={1} onChange={(v) => setTier(t.tier, "min", v)} />}</span>
                  <span className="t-act">
                    <select value={t.action} onChange={(e) => setTier(t.tier, "action", e.target.value)} className="t-act-sel">
                      {Object.entries(SKY.ACTIONS).map(([k, a]) => <option key={k} value={k}>{a.label}</option>)}
                    </select>
                  </span>
                  {["aceitar", "condicionar"].includes(t.action) ? (
                    <>
                      <span><PNum value={t.franquia} min={0} max={60} step={5} suffix="%" onChange={(v) => setTier(t.tier, "franquia", v)} /></span>
                      <span><PNum value={t.gatilho} min={0} max={80} step={5} suffix="%" onChange={(v) => setTier(t.tier, "gatilho", v)} /></span>
                    </>
                  ) : <span className="t-na mono" style={{ gridColumn: "span 2" }}>{t.action === "recusar" ? "operação rejeitada" : "encaminhar ao comitê"}</span>}
                </div>
              ))}
            </div>
            <ValidatorInline issues={issues} />
          </EditorBlock>

          {/* B4 CARTEIRA */}
          <EditorBlock tag="B4" title="Regras de carteira" sub="limites agregados · violação congela novas operações" scope="Protocolo · B4 Carteira"
            right={<span className="rule-kind carteira">REGRA DE CARTEIRA</span>}>
            <div className="b4-list">
              <div className="b4-row"><span>Exposição máx. em zona vermelha</span><PSlider value={cfg.b4.expMaxRed} min={0} max={50} step={5} unit="%" onChange={(v) => set("b4.expMaxRed", v)} /></div>
              <div className="b4-row"><span>Concentração máx. por município</span><PSlider value={cfg.b4.concMaxMunicipio} min={5} max={60} step={5} unit="%" tone="cyan" onChange={(v) => set("b4.concMaxMunicipio", v)} /></div>
              <div className="b4-row"><span>Concentração máx. por cultura</span><PSlider value={cfg.b4.concMaxCultura} min={10} max={100} step={5} unit="%" tone="cyan" onChange={(v) => set("b4.concMaxCultura", v)} /></div>
            </div>
          </EditorBlock>

          {/* EXCEÇÕES */}
          <EditorBlock tag="EXC" title="Exceções & anomalias" sub="workflows de tratamento" scope="Protocolo · Exceções">
            <div className="ed-toggles">
              <PToggle on={cfg.exc.fraudeBloquear} onChange={(v) => set("exc.fraudeBloquear", v)} danger label="Flag de fraude Proagro ⇒ bloquear" sub="recusa automática + trilha" />
              <PToggle on={cfg.exc.score40Vistoria} onChange={(v) => set("exc.score40Vistoria", v)} label="Score < 40 ⇒ vistoria presencial" sub="condiciona à inspeção em campo" />
              <PToggle on={cfg.exc.excecaoManual} onChange={(v) => set("exc.excecaoManual", v)} label="Exceção manual permitida" sub="exige justificativa + aprovação Gestor (logada)" />
            </div>
          </EditorBlock>
        </div>

        {/* ============ IMPACT PANEL (right, sticky) ============ */}
        <aside className="proto-col-impact">
          <div className="impact-inner">
            <div className="imp-head"><span className="mono">// IMPACTO AO VIVO</span><span className="imp-live"><span className="live-dot" /> recalcula a cada ajuste</span></div>

            <div className="v2-card imp-card">
              <div className="imp-card-t mono">DECISÃO SOBRE A CARTEIRA</div>
              <StackedBar ev={ev} />
              <div className="imp-mini">
                <div><span className="mono">EXPOSIÇÃO RESIDUAL</span><b className={ev.violations.some((v) => v.level === "error") ? "down" : ""}>{ev.expResidual}%</b></div>
                <div><span className="mono">VOLUME RETIDO</span><b>{ev.volPct}%</b></div>
                <div><span className="mono">CONCENTR. {ev.concMun.toUpperCase()}</span><b>{ev.concPct}%</b></div>
              </div>
              {ev.violations.map((v, i) => (
                <div key={i} className={"imp-viol " + v.level}><Icon name="alert" size={12} /> {v.msg}</div>
              ))}
            </div>

            <div className="v2-card imp-card backtest">
              <div className="imp-card-t mono">BACKTEST · {cfg.escopo.janelaMovel ? "ÚLTIMOS 10 ANOS" : "2020–2025"}</div>
              <p className="bt-lead">Se este protocolo estivesse ativo, teria:</p>
              <div className="bt-rows">
                <div className="bt-row"><b className="up tnum">{ev.backtest.recRuins}%</b><span>das operações <em>sinistradas</em> recusadas</span></div>
                <div className="bt-row"><b className="tnum" style={{ color: "var(--fg-soft)" }}>{ev.backtest.recBons}%</b><span>das operações <em>adimplentes</em> recusadas</span></div>
              </div>
              <div className="bt-roc">
                <BtBar label="Recusou os ruins" pct={ev.backtest.recRuins} tone="good" />
                <BtBar label="Recusou os bons" pct={ev.backtest.recBons} tone="bad" />
              </div>
              <div className="bt-foot">
                <div><span className="mono">SINISTRALIDADE</span><b className={ev.backtest.sinistRed <= 0 ? "up" : "down"}>{ev.backtest.sinistRed > 0 ? "+" : ""}{ev.backtest.sinistRed}%</b></div>
                <div><span className="mono">VOLUME</span><b className={ev.backtest.volRed >= 0 ? "up" : "warnc"}>{ev.backtest.volRed > 0 ? "+" : ""}{ev.backtest.volRed}%</b></div>
              </div>
              <div className="bt-src mono">40 ANOS DE SICOR ESTRUTURADO · {ev.total} OPERAÇÕES NA AMOSTRA</div>
            </div>

            <div className={"v2-card imp-card ai-consult" + (suggestion ? "" : " empty")}>
              <div className="imp-card-t mono"><Icon name="sparkles" size={12} color="var(--sv-cyan)" /> IA CONSULTORA</div>
              {suggestion ? (
                <>
                  <p className="aic-text">{suggestion.text}</p>
                  <div className="aic-deltas">
                    <span className="up">sinistralidade {suggestion.dSin}%</span>
                    <span className="warnc">volume {suggestion.dVol > 0 ? "+" : ""}{suggestion.dVol}%</span>
                  </div>
                  <button className="btn btn-primary aic-apply" onClick={applySuggestion}><Icon name="check" size={12} /> Aplicar ajuste</button>
                </>
              ) : (
                <p className="aic-text soft">Protocolo equilibrado: nenhum ajuste melhora a sinistralidade sem custo desproporcional de volume.</p>
              )}
              <button className="aic-ask mono" onClick={() => chat.askFree("Critique o protocolo " + cfg.meta.nome + " e sugira ajustes de limiar.")}>
                PERGUNTAR À IA SOBRE ESTE PROTOCOLO →
              </button>
            </div>
          </div>
        </aside>
      </div>

      {/* ============ FOOTER ============ */}
      <div className="proto-footer">
        <div className="pf-status">
          {errors.length > 0
            ? <span className="pf-err"><Icon name="alert" size={13} /> {errors.length} {errors.length === 1 ? "erro bloqueia publicação" : "erros bloqueiam publicação"}</span>
            : <span className="pf-ok"><Icon name="check" size={13} /> Validação OK · cobertura completa, sem contradições</span>}
        </div>
        <div className="pf-actions">
          <button className="btn" onClick={() => flash("Rascunho salvo · v" + cfg.meta.versao)}><Icon name="file" size={13} /> Salvar rascunho</button>
          <button className="btn btn-cyan" onClick={() => setState("Simulado")}><Icon name="refresh" size={13} /> Simular</button>
          {canPublish && (
            <button className="btn btn-primary" disabled={errors.length > 0} onClick={() => setState("Publicado")}>
              <Icon name="check" size={13} /> Aprovar &amp; Publicar
            </button>
          )}
          {!canPublish && <span className="pf-role mono">APROVAÇÃO REQUER NÍVEL GESTOR</span>}
        </div>
      </div>

      {yamlOpen && (
        <div className="yaml-drawer fade-up">
          <div className="yd-head mono"><span>AGENTSPEC · {cfg.meta.nome}</span><button onClick={() => setYamlOpen(false)}><Icon name="x" size={14} /></button></div>
          <pre className="yaml-pre">{SKY.protoToYAML(cfg)}</pre>
        </div>
      )}

      {toast && <div className="proto-toast mono fade-up">{toast}</div>}
    </div>
  );
}

function BtBar({ label, pct, tone }) {
  return (
    <div className="btbar">
      <span className="btb-l">{label}</span>
      <span className="btb-track"><i className={"tone-" + tone} style={{ width: pct + "%" }} /></span>
      <span className="btb-v mono">{pct}%</span>
    </div>
  );
}

function ValidatorInline({ issues }) {
  if (issues.length === 0) return <div className="vld ok mono"><Icon name="check" size={12} /> COBERTURA COMPLETA · SEM CONTRADIÇÕES</div>;
  return (
    <div className="vld-list">
      {issues.map((i, k) => (
        <div key={k} className={"vld " + i.level}><Icon name="alert" size={12} /> <b className="mono">{i.block}</b> {i.msg}</div>
      ))}
    </div>
  );
}

/* ---------- library + template starter ---------- */
function ProtocolsView({ access, chat }) {
  const [cfg, setCfg] = useState(null);
  const [picking, setPicking] = useState(false);
  // library state + KPIs (all hooks BEFORE any conditional return)
  const [stateFilter, setStateFilter] = useState("todos");
  const [qFilter, setQFilter] = useState("");
  const libRows = SKY.PROTO_LIBRARY.filter(pl => (stateFilter === "todos" || pl.estado === stateFilter) && (!qFilter || pl.nome.toLowerCase().includes(qFilter.toLowerCase())));
  const libKpi = {
    total: SKY.PROTO_LIBRARY.length,
    pub: SKY.PROTO_LIBRARY.filter(p => p.estado === "Publicado").length,
    apr: SKY.PROTO_LIBRARY.filter(p => p.estado === "Aprovado").length,
    sim: SKY.PROTO_LIBRARY.filter(p => p.estado === "Simulado").length,
    ras: SKY.PROTO_LIBRARY.filter(p => p.estado === "Rascunho").length,
    cob: SKY.PROTO_LIBRARY.reduce((a, p) => a + (p.carteira || 0), 0),
  };

  if (cfg) return <ProtoEditor cfg={cfg} setCfg={setCfg} access={access} chat={chat} onBack={() => setCfg(null)} />;

  function openExisting(pl) {
    const tpl = SKY.PROTO_TEMPLATES.find((t) => t.id === pl.template) || SKY.PROTO_TEMPLATES[0];
    const c = tpl.apply();
    c.meta.nome = pl.nome; c.meta.estado = pl.estado; c.meta.versao = pl.versao; c.meta.dono = pl.dono;
    setCfg(c);
  }
  function startTemplate(tpl) { setPicking(false); setCfg(tpl.apply()); }

  return (
    <div className="v2-pad fade-up" data-screen-label="Protocolos · Biblioteca">
      <ViewHead eyebrow="// Motor de regras · policy-as-code" title="Protocolos"
        sub="Regras de negócio declarativas, versionadas e executáveis — avaliadas contra ativos e carteiras. O nicho define o template; o objeto é um só."
        right={<button className="btn btn-primary" onClick={() => setPicking(true)}><Icon name="plus" size={14} /> Novo protocolo</button>} />

      {/* KPI strip */}
      <div className="proto-kpis">
        <div className="pk-c"><span className="mono pk-l">Protocolos ativos</span><b className="pk-v tnum">{libKpi.total}</b></div>
        <div className="pk-c"><span className="mono pk-l">Publicados</span><b className="pk-v tnum" style={{color:"var(--risk-low)"}}>{libKpi.pub}</b></div>
        <div className="pk-c"><span className="mono pk-l">Aguardando aprovação</span><b className="pk-v tnum" style={{color:"var(--sv-warn)"}}>{libKpi.apr}</b></div>
        <div className="pk-c"><span className="mono pk-l">Simulação ativa</span><b className="pk-v tnum" style={{color:"var(--sv-cyan)"}}>{libKpi.sim}</b></div>
        <div className="pk-c"><span className="mono pk-l">Rascunhos</span><b className="pk-v tnum" style={{color:"var(--fg-mute)"}}>{libKpi.ras}</b></div>
        <div className="pk-c"><span className="mono pk-l">Carteira coberta</span><b className="pk-v tnum">{libKpi.cob.toLocaleString("pt-BR")}<small> ops</small></b></div>
      </div>

      {picking && (
        <div className="tpl-starter fade-up">
          <div className="tpl-starter-h"><span className="mono">COMEÇAR DE UM TEMPLATE</span><button className="tpl-x" onClick={() => setPicking(false)}><Icon name="x" size={14} /></button></div>
          <div className="tpl-grid">
            {SKY.PROTO_TEMPLATES.map((t) => (
              <button key={t.id} className="tpl-card" onClick={() => startTemplate(t)}>
                <span className="tpl-ico"><Icon name={t.icon} size={18} color="var(--sv-coral)" /></span>
                <b>{t.name}</b><span className="tpl-sub">{t.sub}</span>
                <div className="tpl-meta"><span className="mono">B1 {t.b1}</span><span className="mono">{t.lentes}</span></div>
              </button>
            ))}
          </div>
        </div>
      )}

      {/* lib toolbar */}
      <div className="proto-lib-bar">
        <div className="seg">
          {["todos","Rascunho","Simulado","Aprovado","Publicado"].map(s => (
            <button key={s} className={stateFilter === s ? "on" : ""} onClick={() => setStateFilter(s)}>{s === "todos" ? "Todos" : s}</button>
          ))}
        </div>
        <div className="proto-search">
          <Icon name="search" size={13} color="var(--fg-mute)" />
          <input value={qFilter} onChange={(e) => setQFilter(e.target.value)} placeholder="Buscar protocolo…" />
        </div>
      </div>

      <div className="v2-card" style={{ overflow: "hidden", marginTop: 12 }}>
        <table className="v2-tbl proto-tbl">
          <thead><tr><th>Protocolo</th><th>Template</th><th>Estado</th><th>Versão</th><th>Dono</th><th>Carteira</th><th></th></tr></thead>
          <tbody>
            {libRows.map((pl) => {
              const tpl = SKY.PROTO_TEMPLATES.find((t) => t.id === pl.template);
              return (
                <tr key={pl.id} onClick={() => openExisting(pl)}>
                  <td><b style={{ color: "var(--fg)", fontWeight: 500 }}>{pl.nome}</b><div className="mono soft" style={{ fontSize: 9 }}>{pl.date}</div></td>
                  <td><span className="mono soft">{tpl ? tpl.name : pl.template}</span></td>
                  <td><StateBadge state={pl.estado} sm /></td>
                  <td className="mono">v{pl.versao}</td>
                  <td>{pl.dono}</td>
                  <td className="mono tnum">{pl.carteira ? pl.carteira.toLocaleString("pt-BR") : "—"}</td>
                  <td><Icon name="chevR" size={15} color="var(--fg-mute)" /></td>
                </tr>
              );
            })}
            {libRows.length === 0 && <tr><td colSpan="7" style={{padding:24, textAlign:"center", color:"var(--fg-mute)", fontSize:13}}>Nenhum protocolo com este filtro.</td></tr>}
          </tbody>
        </table>
      </div>
      <p className="mono proto-note">PROTOCOLO LIDO DE CIMA = POLÍTICA (QUEM EU ACEITO) · LIDO DE BAIXO = ELEGIBILIDADE (QUAIS OFERTAS ACEITAM ESTE ATIVO) · A PONTE PARA O SCORE SINERGIA.</p>
    </div>
  );
}

Object.assign(window, { ProtocolsView });