/* ============================================================
   SKYVIDYA v7 — Sinistro × Produtividade
   Matriz 2×2 · Scatter · Fenologia · Métricas honestas
   Roda ao lado do modelo de sinistro (não o altera).
   ============================================================ */
const { useState, useMemo } = React;

/* ---------- matrix 2×2 ---------- */
function ProdMatrix({ active, setActive }) {
  const cells = SKY.PROD_QUADRANTS;
  const layout = {              // grid (row,col) por quadrante
    elite:      { row:1, col:1, ax:"baixo", ay:"alto" },   // top-left: alta prod · baixo sinistro
    resiliente: { row:1, col:2, ax:"alto",  ay:"alto" },   // top-right: alta prod · alto sinistro
    invisivel:  { row:2, col:1, ax:"baixo", ay:"baixo" },  // bottom-left: baixa prod · baixo sinistro
    prioridade: { row:2, col:2, ax:"alto",  ay:"baixo" },  // bottom-right: baixa prod · alto sinistro
  };
  return (
    <div className="prod-matrix">
      {/* eixos */}
      <div className="pmx-axis-y mono">
        <span>↑ ALTA</span><span className="pmx-axis-lbl">PRODUTIVIDADE</span><span>BAIXA ↓</span>
      </div>
      <div className="pmx-grid">
        {cells.map((q) => {
          const L = layout[q.id];
          return (
            <button
              key={q.id}
              className={"pmx-cell tone-" + q.tone + (active === q.id ? " on" : "")}
              style={{ gridRow: L.row, gridColumn: L.col }}
              onClick={() => setActive(q.id)}
            >
              <div className="pmx-head">
                <span className="mono pmx-axes">SIN {L.ax} · PROD {L.ay === "alto" ? "alta" : "baixa"}</span>
                <span className="pmx-dot" />
              </div>
              <div className="pmx-num">
                <b className="tnum">{SKY.prodFmt(q.count)}</b>
                <em>lavouras</em>
              </div>
              <div className="pmx-title">{q.titulo}</div>
              <div className="pmx-action mono">{q.acao}</div>
            </button>
          );
        })}
      </div>
      <div className="pmx-axis-x mono">
        <span>← BAIXO</span><span className="pmx-axis-lbl">SINISTRO</span><span>ALTO →</span>
      </div>
    </div>
  );
}

/* ---------- scatter sinistro × produtividade ---------- */
function ProdScatter({ active, setActive }) {
  const pts = SKY.prodPoints();
  const W = 560, H = 360, PAD = { l: 46, r: 18, t: 18, b: 38 };
  const plotW = W - PAD.l - PAD.r, plotH = H - PAD.t - PAD.b;
  const xV = (sin) => PAD.l + (sin / 100) * plotW;
  const yV = (prod) => PAD.t + plotH - ((prod - 30) / (170 - 30)) * plotH;
  const colorMap = { elite: "var(--risk-low)", resiliente: "var(--sv-cyan)", invisivel: "var(--sv-warn)", prioridade: "var(--risk-critical)" };
  const xTicks = [0, 25, 50, 75, 100];
  const yTicks = [50, 75, 100, 125, 150];

  return (
    <div className="prod-scatter-wrap">
      <svg viewBox={`0 0 ${W} ${H}`} width="100%" className="prod-scatter">
        {/* quadrantes */}
        <rect x={xV(0)}  y={yV(170)} width={xV(50) - xV(0)}  height={yV(100) - yV(170)}
              fill="color-mix(in srgb, var(--sv-cyan) 5%, transparent)" />
        <rect x={xV(50)} y={yV(170)} width={xV(100) - xV(50)} height={yV(100) - yV(170)}
              fill="color-mix(in srgb, var(--risk-low) 5%, transparent)" />
        <rect x={xV(0)}  y={yV(100)} width={xV(50) - xV(0)}  height={yV(30) - yV(100)}
              fill="color-mix(in srgb, var(--risk-critical) 5%, transparent)" />
        <rect x={xV(50)} y={yV(100)} width={xV(100) - xV(50)} height={yV(30) - yV(100)}
              fill="color-mix(in srgb, var(--sv-warn) 5%, transparent)" />

        {/* divisores */}
        <line x1={xV(50)} x2={xV(50)} y1={PAD.t} y2={PAD.t + plotH} stroke="var(--rule)" strokeDasharray="4 4" />
        <line x1={PAD.l} x2={PAD.l + plotW} y1={yV(100)} y2={yV(100)} stroke="var(--sv-coral)" strokeDasharray="4 4" />

        {/* eixos */}
        {xTicks.map((t) => (
          <g key={"x" + t}>
            <line x1={xV(t)} x2={xV(t)} y1={PAD.t + plotH} y2={PAD.t + plotH + 4} stroke="var(--rule)" />
            <text x={xV(t)} y={PAD.t + plotH + 16} textAnchor="middle" className="ps-axis">{t}</text>
          </g>
        ))}
        {yTicks.map((t) => (
          <g key={"y" + t}>
            <line x1={PAD.l - 4} x2={PAD.l} y1={yV(t)} y2={yV(t)} stroke="var(--rule)" />
            <text x={PAD.l - 8} y={yV(t) + 4} textAnchor="end" className="ps-axis">{t}</text>
          </g>
        ))}
        <text x={PAD.l + plotW / 2} y={H - 6} textAnchor="middle" className="ps-axis-lbl">SINISTRO (%)</text>
        <text x={12} y={PAD.t + plotH / 2} textAnchor="middle" className="ps-axis-lbl"
              transform={`rotate(-90 12 ${PAD.t + plotH / 2})`}>PRODUTIVIDADE vs. ESPERADO IBGE (%)</text>
        <text x={xV(100) - 4} y={yV(100) - 4} textAnchor="end" className="ps-ref">IBGE = 100</text>

        {/* pontos */}
        {pts.map((p) => {
          const sel = active && p.quad === active;
          const dim = active && p.quad !== active;
          return (
            <circle key={p.id} cx={xV(p.sin)} cy={yV(p.prod)} r={sel ? 4 : 3}
                    fill={colorMap[p.quad]} fillOpacity={dim ? 0.18 : 0.78}
                    stroke="var(--bg)" strokeWidth="0.6"
                    onClick={() => setActive(p.quad)}
                    style={{ cursor: "pointer" }}>
              <title>{p.id} · {p.cult} · {p.reg} · sinistro {p.sin}% · produtividade {p.prod}%</title>
            </circle>
          );
        })}
      </svg>
      <div className="ps-legend">
        {SKY.PROD_QUADRANTS.map((q) => (
          <span key={q.id} className={"ps-lg" + (active === q.id ? " on" : "")} onClick={() => setActive(q.id)}>
            <i style={{ background: colorMap[q.id] }} />
            <span>{q.titulo}</span>
            <em className="mono tnum">{SKY.prodFmt(q.count)}</em>
          </span>
        ))}
      </div>
    </div>
  );
}

/* ---------- fenologia (calendário real × clima) ---------- */
function PhenologyStrip() {
  const P = SKY.PHENOLOGY;
  return (
    <div className="phen-wrap">
      <div className="phen-head">
        <div>
          <span className="mono eyebrow">// CALENDÁRIO DA ROÇA · {P.cultura.toUpperCase()}</span>
          <h4 className="phen-title">Plantio <b>{P.plantio}</b> → Colheita <b>{P.colheita}</b></h4>
        </div>
        <span className="phen-tag mono">FONTE: SICOR · DATA REAL DE PLANTIO</span>
      </div>
      <div className="phen-strip">
        {P.fases.map((f) => (
          <div key={f.id} className={"phen-bar tone-" + (f.ok ? "ok" : "fail") + (f.crit >= 0.9 ? " critical" : "")}>
            <div className="phen-bar-meta">
              <span className="mono phen-label">{f.label}</span>
              <span className="mono phen-dias">{f.dias}</span>
            </div>
            <div className="phen-bar-track">
              <i style={{ width: Math.round(f.chuva * 100) + "%" }} />
            </div>
            <div className="phen-bar-foot mono">
              <span>chuva {Math.round(f.chuva * 100)}%</span>
              <span className="phen-crit">criticidade {Math.round(f.crit * 100)}%</span>
            </div>
            {f.crit >= 0.9 && (
              <span className={"phen-flag " + (f.ok ? "ok" : "warn")}>
                <Icon name={f.ok ? "check" : "alert"} size={11} /> FASE DEFINIDORA
              </span>
            )}
          </div>
        ))}
      </div>
      <p className="phen-leitura">{P.leitura}</p>
    </div>
  );
}

/* ---------- métricas do modelo ---------- */
function ProdModelCard() {
  const M = SKY.PROD_MODEL;
  const before = M.aucBefore, after = M.aucAfter;
  return (
    <div className="v2-card prod-model-card brackets">
      <span className="mono eyebrow">// MODELO · HONESTIDADE METODOLÓGICA</span>
      <h4 className="pmc-title">{M.metricLabel}</h4>
      <div className="pmc-bars">
        <div className="pmc-bar">
          <span className="mono pmc-bar-l">ANTES · sem fenologia</span>
          <div className="pmc-bar-track"><i style={{ width: before * 100 + "%", background: "var(--fg-mute)" }} /></div>
          <b className="tnum">{before.toFixed(2)}</b>
        </div>
        <div className="pmc-bar">
          <span className="mono pmc-bar-l">DEPOIS · alinhado à fenologia</span>
          <div className="pmc-bar-track"><i style={{ width: after * 100 + "%", background: "var(--sv-coral)" }} /></div>
          <b className="tnum coral">{after.toFixed(2)}</b>
        </div>
      </div>
      <div className="pmc-delta">
        <span className="mono">GANHO</span>
        <b className="tnum up">+{((after - before) * 100).toFixed(0)}<small>pts</small></b>
        <em>estatisticamente comprovado · não é sorte</em>
      </div>
      <div className="pmc-notes">
        {M.notas.map((n, i) => (
          <div key={i} className="pmc-note">
            <span className="mono">{n.k.toUpperCase()}</span>
            <p>{n.v}</p>
          </div>
        ))}
      </div>
      <div className="pmc-foot mono">
        <span><Icon name="info" size={11} /> {M.safras} safras de histórico · em ano atípico (2025) o modelo tropeça</span>
      </div>
    </div>
  );
}

/* ---------- main view ---------- */
function ProdMatrixView({ chat }) {
  const [active, setActive] = useState(null);
  const T = SKY.PROD_TOTALS;
  const sel = active ? SKY.PROD_Q_BY_ID[active] : null;

  return (
    <div className="v2-pad fade-up prod-view" data-screen-label="Sinistro × Produtividade">
      <ViewHead
        eyebrow="// MODELO B · PRODUTIVIDADE · roda ao lado do modelo de sinistro"
        title={<>Sinistro <span className="serif-it">×</span> Produtividade</>}
        sub="Cruzamos dois eixos independentes. O modelo de sinistro vê o prejuízo declarado. O modelo de produtividade — novo, ao lado, sem alterar o anterior — estima quanto cada lavoura deveria render e compara com a média municipal do IBGE. Juntos, revelam quem o modelo antigo não enxerga."
        right={
          <button className="btn btn-cyan" onClick={() => chat.askFree("Resuma as 9 mil lavouras de prioridade máxima (alto sinistro + baixa produtividade) por região e cultura.")}>
            <Icon name="sparkles" size={13} /> Resumir com IA
          </button>
        }
      />

      {/* KPIs topo */}
      <div className="prod-kpis">
        <div className="pkpi"><span className="mono">CARTEIRA ANALISADA</span><b className="tnum">{SKY.prodFmt(T.total)}</b><em>lavouras · 6 safras</em></div>
        <div className="pkpi"><span className="mono">INVISÍVEIS AO MODELO ANTIGO</span><b className="tnum warnc">{SKY.prodFmt(T.invisivel)}</b><em>baixa prod sem sinistro declarado</em></div>
        <div className="pkpi"><span className="mono">PRIORIDADE MÁXIMA</span><b className="tnum down">{SKY.prodFmt(T.prioridade)}</b><em>alto risco + baixa eficiência</em></div>
        <div className="pkpi"><span className="mono">ELITE OPERACIONAL</span><b className="tnum up">{SKY.prodFmt(T.elite)}</b><em>top leads · originar mais</em></div>
      </div>

      {/* Matriz + Scatter */}
      <div className="prod-grid">
        <div className="v2-card prod-card-matrix brackets">
          <div className="v2-card-h mono">
            <span>MATRIZ 2×2 · SINISTRO × PRODUTIVIDADE</span>
            {active && <button className="prod-clear mono" onClick={() => setActive(null)}>limpar seleção <Icon name="x" size={11} /></button>}
          </div>
          <ProdMatrix active={active} setActive={setActive} />
        </div>

        <div className="v2-card prod-card-scatter">
          <div className="v2-card-h mono">
            <span>DISPERSÃO · {SKY.prodPoints().length} LAVOURAS · AMOSTRA</span>
            <span className="mono soft" style={{ fontSize: 9 }}>IBGE = 100 · LIMIAR SIN = 50%</span>
          </div>
          <ProdScatter active={active} setActive={setActive} />
        </div>
      </div>

      {/* Painel de ação por quadrante */}
      {sel && (
        <div className={"prod-action tone-" + sel.tone} key={sel.id}>
          <span className="mono pa-eyebrow">// QUADRANTE ATIVO</span>
          <h3>{sel.titulo} <em className="mono">— {sel.curto}</em></h3>
          <div className="pa-row">
            <div className="pa-stat"><span className="mono">LAVOURAS</span><b className="tnum">{sel.count.toLocaleString("pt-BR")}</b></div>
            <p className="pa-acao"><Icon name="target" size={13} /> {sel.acao}</p>
            <div className="pa-actions">
              <button className="btn" onClick={() => chat.askFree(`Quais regiões concentram as ${SKY.prodFmt(sel.count)} lavouras "${sel.titulo}"?`)}>
                <Icon name="sparkles" size={12} /> Perguntar à IA
              </button>
              <button className="btn btn-primary"><Icon name="map" size={12} /> Ver no mapa</button>
            </div>
          </div>
        </div>
      )}

      {/* Fenologia */}
      <div className="v2-card prod-card-phen">
        <PhenologyStrip />
      </div>

      {/* Métricas do modelo */}
      <ProdModelCard />

      {/* leitura final / link com o modelo antigo */}
      <div className="prod-bridge">
        <div className="pb-l">
          <span className="mono eyebrow">// LEITURA</span>
          <p>
            Não substitui o modelo de sinistro — <b className="serif-it">complementa</b>.
            O modelo antigo vê {SKY.prodFmt(T.elite + T.resiliente + T.prioridade)} lavouras (com prejuízo ou sem).
            O novo eixo abre {SKY.prodFmt(T.invisivel)} <b>invisíveis</b> — lavouras que não acionam Proagro, mas <em>produzem mal</em>.
            E prioriza as {SKY.prodFmt(T.prioridade)} que juntam <b>alto risco e baixa eficiência</b> — onde a subscrição precisa olhar primeiro.
          </p>
        </div>
        <div className="pb-r">
          <span className="mono eyebrow">// O QUE DIFERENCIA O OBSERVATORY AGRO</span>
          <p>Inteligência <b>contínua</b> por região / cultura / safra — não um laudo pontual. Cada nova safra refina o ranking; cada calendário de plantio melhora o alinhamento fenológico.</p>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ProdMatrixView });