/* screens-ops.jsx — Forecast, Cadastro Pedidos, Ruptura/Cobertura, Carteira, Alertas, Campanhas, Vendedores */

// ============================================================
// PREVISÃO DE VENDAS (Forecast)
// ============================================================
function ForecastScreen() {
  const [horizon, setHorizon] = useState(4);
  const [model, setModel] = useState("ensemble");

  // Recompute data with confidence band
  const data = MOCK.forecast;
  const realCount = data.filter(d => d.real != null).length;

  return (
    <div className="space-y-6">
      {/* Header / control panel */}
      <div className="panel p-5 relative overflow-hidden glow-accent">
        <div className="absolute -top-12 -right-12 w-72 h-72 rounded-full bg-[var(--accent-glow)] blur-3xl pointer-events-none" />
        <div className="relative flex flex-wrap gap-5 items-end justify-between">
          <div className="flex-1 min-w-[260px]">
            <div className="flex items-center gap-2 mb-1.5">
              <span className="neon-dot" />
              <span className="text-[10px] uppercase tracking-[0.18em] text-[var(--accent)] font-semibold">Inteligência preditiva</span>
              <span className="badge badge-violet">ML core</span>
            </div>
            <h2 className="text-[22px] font-semibold tracking-tight">Previsão de vendas</h2>
            <p className="text-[12.5px] text-[var(--fg-muted)] mt-1 max-w-xl">
              Modelo ensemble combinando histórico, sazonalidade, calendário comercial e eventos externos. Treino diário sobre o data lake conectado ao Mitryus.
            </p>
          </div>

          <div className="grid grid-cols-3 gap-3 min-w-[420px]">
            <div className="kpi kpi-accent">
              <div className="text-[10px] uppercase tracking-wider text-[var(--fg-muted)]">Próximas 4 sem.</div>
              <div className="num text-[22px] font-semibold text-[var(--accent)]">{fmt.money(2890000, { compact: true })}</div>
              <Delta value={12.8} />
            </div>
            <div className="kpi">
              <div className="text-[10px] uppercase tracking-wider text-[var(--fg-muted)] flex items-center gap-1.5">
                Confiança média
                <InfoDot content={<div><div className="font-semibold text-[12px] mb-1">{GLOSSARY.confianca.title}</div><div className="text-[var(--fg-muted)]">{GLOSSARY.confianca.desc}</div></div>} />
              </div>
              <div className="num text-[22px] font-semibold">94%</div>
              <div className="text-[10px] text-[var(--fg-faint)] flex items-center gap-1">
                MAPE 4.2%
                <InfoDot content={<div><div className="font-semibold text-[12px] mb-1">{GLOSSARY.mape.title}</div><div className="text-[var(--fg-muted)]">{GLOSSARY.mape.desc}</div></div>} width={300} />
              </div>
            </div>
            <div className="kpi">
              <div className="text-[10px] uppercase tracking-wider text-[var(--fg-muted)]">Último treino</div>
              <div className="num text-[22px] font-semibold">2h</div>
              <div className="text-[10px] text-[var(--fg-faint)]">v2.4.1 · auto</div>
            </div>
          </div>
        </div>
      </div>

      {/* Controls */}
      <div className="panel p-4 flex flex-wrap items-center gap-3">
        <div>
          <div className="text-[10px] uppercase tracking-wider text-[var(--fg-muted)] mb-1">Horizonte</div>
          <Tabs items={[{ id: 4, label: "4 sem" }, { id: 8, label: "8 sem" }, { id: 12, label: "12 sem" }]} value={horizon} onChange={setHorizon} />
        </div>
        <div>
          <div className="text-[10px] uppercase tracking-wider text-[var(--fg-muted)] mb-1">Modelo</div>
          <Tabs items={[
            { id: "ensemble", label: "Ensemble" },
            { id: "prophet", label: "Prophet" },
            { id: "xgb", label: "XGBoost" },
          ]} value={model} onChange={setModel} />
        </div>
        <div>
          <div className="text-[10px] uppercase tracking-wider text-[var(--fg-muted)] mb-1">Granularidade</div>
          <Tabs items={[{ id: "rede", label: "Rede" }, { id: "filial", label: "Filial" }, { id: "grupo", label: "Grupo" }]} value="rede" onChange={() => {}} />
        </div>
        <div className="flex-1" />
        <Btn icon="settings-2">Configurar variáveis</Btn>
        <Btn variant="primary" icon="zap">Recalcular</Btn>
      </div>

      {/* Forecast chart */}
      <div className="panel p-5 chart-bg">
        <div className="flex items-center justify-between mb-4">
          <div>
            <h3 className="font-semibold text-[15px]">Histórico + projeção</h3>
            <p className="text-[11px] text-[var(--fg-muted)] mt-0.5">Sólido = realizado · pontilhado = previsão · faixa = intervalo de confiança 90%</p>
          </div>
          <div className="flex items-center gap-4 text-[11px]">
            <span className="flex items-center gap-1.5"><span className="w-3 h-0.5 bg-[var(--accent)]" />Realizado</span>
            <span className="flex items-center gap-1.5"><span className="w-3 h-0.5 bg-[var(--accent-2)] [border-style:dashed]" style={{ borderTop: "2px dashed var(--accent-2)" }} />Previsto</span>
            <span className="flex items-center gap-1.5"><span className="w-3 h-2 rounded bg-[var(--accent-2)]/30" />Banda 90%</span>
          </div>
        </div>
        <ForecastChart data={data} realCount={realCount} />
      </div>

      {/* Drivers + breakdown */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-5">
        <div className="panel p-5 lg:col-span-2">
          <SectionHead title="Drivers da previsão" subtitle="Variáveis com maior impacto no modelo · próximas 4 semanas" icon="sparkles" />
          <div className="space-y-3">
            {[
              { label: "Sazonalidade · mês comercial", impact: 38, dir: "up" },
              { label: "Calendário · feriados regionais", impact: 24, dir: "up" },
              { label: "Tendência · 12 sem", impact: 18, dir: "up" },
              { label: "Estoque disponível", impact: 14, dir: "down" },
              { label: "Promoções planejadas", impact: 11, dir: "up" },
              { label: "Clima / temperatura", impact: 6, dir: "neutral" },
            ].map((d) => (
              <div key={d.label} className="flex items-center gap-3">
                <div className="w-[200px] text-[12.5px] truncate">{d.label}</div>
                <div className="flex-1">
                  <Progress
                    value={d.impact}
                    max={40}
                    color={d.dir === "up" ? "var(--accent)" : d.dir === "down" ? "var(--neg)" : "var(--fg-faint)"}
                    height={6}
                  />
                </div>
                <div className="num font-mono text-[12px] w-12 text-right">{d.impact}%</div>
              </div>
            ))}
          </div>
        </div>

        <div className="panel p-5">
          <SectionHead title="Por filial" subtitle="Previsão 4 sem." icon="store" />
          <div className="space-y-2">
            {MOCK.storesKPI.map((s, i) => {
              const f = s.vlr * 0.85;
              const yoy = [14.2, 10.3, 6.8, 12.1, -2.1, 8.4][i];
              return (
                <div key={s.cod} className="flex items-center justify-between px-2 py-1.5 rounded hover:bg-[var(--panel-2)]">
                  <div className="text-[12px] font-medium">{s.loja}</div>
                  <div className="flex items-center gap-3">
                    <div className="num text-[12px] font-mono">{fmt.money(f, { compact: true })}</div>
                    <Delta value={yoy} />
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      {/* Cenários */}
      <div className="panel p-5">
        <SectionHead title="Simulação de cenários" subtitle="Ajuste variáveis para projetar resultado · efeito recalculado em tempo real" icon="flask-conical" />
        <ScenarioPanel />
      </div>
    </div>
  );
}

function ForecastChart({ data, realCount }) {
  const w = 900, h = 280, pad = { l: 56, r: 16, t: 16, b: 26 };
  const allReal = data.map(d => d.real).filter(v => v != null);
  const allPrev = data.flatMap(d => [d.previsto, d.lo, d.hi]).filter(v => v != null);
  const all = [...allReal, ...allPrev];
  const max = Math.max(...all) * 1.1;
  const min = Math.min(0, Math.min(...all));
  const span = max - min || 1;
  const n = data.length;
  const xStep = (w - pad.l - pad.r) / (n - 1);
  const yTo = (v) => pad.t + (h - pad.t - pad.b) * (1 - (v - min) / span);

  // Real line
  const realPoints = data.map((d, i) => d.real != null ? [pad.l + i * xStep, yTo(d.real)] : null).filter(Boolean);
  const realPath = realPoints.map((p, i) => `${i === 0 ? "M" : "L"} ${p[0]} ${p[1]}`).join(" ");

  // Forecast line
  const fcPoints = data.map((d, i) => d.previsto != null ? [pad.l + i * xStep, yTo(d.previsto)] : null).filter(Boolean);
  const fcPath = fcPoints.map((p, i) => `${i === 0 ? "M" : "L"} ${p[0]} ${p[1]}`).join(" ");

  // Confidence band
  const bandTop = data.map((d, i) => d.hi != null ? [pad.l + i * xStep, yTo(d.hi)] : null).filter(Boolean);
  const bandBot = data.map((d, i) => d.lo != null ? [pad.l + i * xStep, yTo(d.lo)] : null).filter(Boolean);
  const bandPath = [
    ...bandTop.map((p, i) => `${i === 0 ? "M" : "L"} ${p[0]} ${p[1]}`),
    ...bandBot.reverse().map((p, i) => `L ${p[0]} ${p[1]}`),
    "Z"
  ].join(" ");

  const ticks = 4;
  const tickVals = Array.from({ length: ticks + 1 }, (_, i) => min + (span * i) / ticks);

  // Vertical separator between real and forecast
  const sepX = pad.l + (realCount - 1) * xStep + xStep / 2;

  return (
    <svg viewBox={`0 0 ${w} ${h}`} className="w-full" style={{ height: h }}>
      <defs>
        <linearGradient id="realGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.32" />
          <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
        </linearGradient>
      </defs>

      {/* Grid */}
      {tickVals.map((tv, i) => (
        <g key={i}>
          <line x1={pad.l} x2={w - pad.r} y1={yTo(tv)} y2={yTo(tv)} stroke="var(--border-soft)" strokeDasharray="2 3" />
          <text x={pad.l - 8} y={yTo(tv) + 3} fontSize="10" fill="var(--fg-faint)" textAnchor="end" fontFamily="Geist Mono">{fmt.money(tv, { compact: true, currency: false })}</text>
        </g>
      ))}

      {/* X labels */}
      {data.map((d, i) => (
        <text key={i} x={pad.l + i * xStep} y={h - 8} fontSize="9" fill="var(--fg-faint)" textAnchor="middle" fontFamily="Geist Mono">{d.sem}</text>
      ))}

      {/* Forecast / Real divider */}
      <line x1={sepX} x2={sepX} y1={pad.t} y2={h - pad.b} stroke="var(--accent)" strokeDasharray="4 3" strokeOpacity="0.4" />
      <rect x={sepX - 32} y={pad.t} width={64} height={16} rx={8} fill="var(--panel)" stroke="var(--accent)" strokeOpacity="0.5" />
      <text x={sepX} y={pad.t + 11} fontSize="9" fill="var(--accent)" textAnchor="middle" fontWeight="600">Agora</text>

      {/* Confidence band */}
      <path d={bandPath} fill="var(--accent-2)" fillOpacity="0.18" />

      {/* Real area + line */}
      {realPoints.length > 0 && (
        <>
          <path d={`${realPath} L ${realPoints[realPoints.length - 1][0]} ${yTo(min)} L ${realPoints[0][0]} ${yTo(min)} Z`} fill="url(#realGrad)" />
          <path d={realPath} fill="none" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round" />
          {realPoints.map((p, i) => <circle key={i} cx={p[0]} cy={p[1]} r="2.5" fill="var(--accent)" />)}
        </>
      )}

      {/* Forecast line */}
      <path d={fcPath} fill="none" stroke="var(--accent-2)" strokeWidth="2" strokeDasharray="5 4" strokeLinecap="round" />
      {fcPoints.map((p, i) => <circle key={i} cx={p[0]} cy={p[1]} r="2.5" fill="var(--accent-2)" />)}
    </svg>
  );
}

function ScenarioPanel() {
  const [promo, setPromo] = useState(15);
  const [estoque, setEstoque] = useState(80);
  const [marketing, setMarketing] = useState(50);

  const base = 2890000;
  const adj = base * (1 + promo * 0.005) * (estoque / 80) * (1 + marketing * 0.001);
  const delta = ((adj - base) / base) * 100;

  return (
    <div className="grid grid-cols-1 md:grid-cols-[1.2fr_1fr] gap-6 items-center">
      <div className="space-y-5">
        {[
          { label: "Intensidade promocional", val: promo, set: setPromo, min: 0, max: 50, suf: "%", color: "var(--accent)" },
          { label: "Estoque disponível", val: estoque, set: setEstoque, min: 40, max: 120, suf: "%", color: "var(--accent-2)" },
          { label: "Investimento em marketing", val: marketing, set: setMarketing, min: 0, max: 100, suf: " k", color: "var(--pink)" },
        ].map((s) => (
          <div key={s.label}>
            <div className="flex justify-between mb-2">
              <div className="text-[12px] font-medium">{s.label}</div>
              <div className="num font-mono text-[12px] text-[var(--accent)]">{s.val}{s.suf}</div>
            </div>
            <input type="range" min={s.min} max={s.max} value={s.val} onChange={(e) => s.set(+e.target.value)} className="neon w-full" style={{ accentColor: s.color }} />
          </div>
        ))}
      </div>
      <div className="panel-hi p-6 text-center relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-br from-[var(--accent-soft)] to-transparent pointer-events-none" />
        <div className="text-[11px] uppercase tracking-wider text-[var(--fg-muted)] relative">Cenário projetado</div>
        <div className="num text-[36px] font-semibold tracking-tight mt-1 relative">{fmt.money(adj, { compact: true })}</div>
        <div className="mt-2 relative">
          <Delta value={delta} dec={2} />
          <span className="text-[11px] text-[var(--fg-muted)] ml-2">vs. baseline</span>
        </div>
        <div className="mt-4 text-[11px] text-[var(--fg-muted)] relative">
          O cenário ajusta a previsão considerando elasticidade promocional, cobertura mínima e propensão histórica por canal.
        </div>
      </div>
    </div>
  );
}

// ============================================================
// CADASTRO DE PEDIDOS
// ============================================================
function PedidosCadastroScreen() {
  const [items, setItems] = useState([
    { sku: "SKU-1042", desc: "Item Padrão A", qtd: 24, custo: 18.40, fornecedor: "Fornecedor 01" },
    { sku: "SKU-2210", desc: "Item Premium C", qtd: 12, custo: 42.10, fornecedor: "Fornecedor 02" },
  ]);
  const [novo, setNovo] = useState({ sku: "", desc: "", qtd: "", custo: "", fornecedor: PH.suppliers[0] });
  const [filial, setFilial] = useState(PH.stores[0]);
  const [entrega, setEntrega] = useState("2026-06-12");
  const toast = useToast();

  const total = items.reduce((acc, it) => acc + it.qtd * it.custo, 0);
  const totalQtd = items.reduce((acc, it) => acc + it.qtd, 0);

  const addItem = () => {
    if (!novo.sku || !novo.qtd) return;
    setItems([...items, { ...novo, qtd: +novo.qtd, custo: +novo.custo || 0 }]);
    setNovo({ sku: "", desc: "", qtd: "", custo: "", fornecedor: PH.suppliers[0] });
    toast.push({ kind: "success", title: "Item adicionado", desc: `${novo.sku} foi anexado ao pedido` });
  };
  const removeItem = (i) => setItems(items.filter((_, idx) => idx !== i));
  const submit = () => toast.push({ kind: "success", title: "Pedido criado", desc: `PED-2026-${Math.floor(Math.random() * 1000).toString().padStart(4, "0")} enviado para o Mitryus` });

  return (
    <div className="space-y-6">
      <div className="panel p-5 relative overflow-hidden">
        <div className="absolute -top-20 right-0 w-64 h-64 rounded-full bg-[var(--accent-glow)] blur-3xl pointer-events-none" />
        <div className="relative flex items-center justify-between flex-wrap gap-4">
          <div>
            <div className="flex items-center gap-2 mb-1.5">
              <span className="neon-dot" /><span className="text-[10px] uppercase tracking-[0.18em] text-[var(--accent)] font-semibold">Novo pedido de compra</span>
              <span className="badge">PED-2026-{Math.floor(Math.random() * 1000).toString().padStart(4, "0")} · rascunho</span>
            </div>
            <h2 className="text-[22px] font-semibold tracking-tight">Cadastro de pedidos</h2>
            <p className="text-[12.5px] text-[var(--fg-muted)] mt-1">Crie pedidos manuais ou importe sugestões da previsão · sincronização automática com Mitryus.</p>
          </div>
          <div className="flex items-center gap-2">
            <Btn icon="upload">Importar XLS</Btn>
            <Btn icon="wand-sparkles">Gerar via previsão</Btn>
          </div>
        </div>
      </div>

      {/* Header form */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
        <FormField label="Filial destino" icon="store">
          <SelectInput value={filial} onChange={setFilial} options={PH.stores} />
        </FormField>
        <FormField label="Centro de custo" icon="building-2">
          <SelectInput value="CC-001 · Comercial" options={["CC-001 · Comercial", "CC-002 · Operação", "CC-003 · Sazonal"]} onChange={() => {}} />
        </FormField>
        <FormField label="Data entrega" icon="calendar">
          <input type="date" value={entrega} onChange={(e) => setEntrega(e.target.value)} className="input" />
        </FormField>
        <FormField label="Prioridade" icon="flag">
          <SelectInput value="Normal" options={["Baixa", "Normal", "Alta", "Urgente"]} onChange={() => {}} />
        </FormField>
      </div>

      {/* Items table + add row */}
      <div className="panel overflow-hidden">
        <div className="px-5 py-3.5 border-b border-[var(--border)] flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Icon name="package" className="w-4 h-4 text-[var(--fg-muted)]" />
            <h3 className="font-semibold text-[14px]">Itens do pedido</h3>
            <span className="badge">{items.length} {items.length === 1 ? "item" : "itens"}</span>
          </div>
          <div className="text-[11px] text-[var(--fg-muted)]">
            Total: <span className="num font-mono font-semibold text-[var(--fg)]">{fmt.money(total)}</span>
            <span className="mx-2 text-[var(--fg-faint)]">·</span>
            <span className="num font-mono">{totalQtd} pç</span>
          </div>
        </div>

        <table className="dm-table">
          <thead>
            <tr>
              <th className="w-[140px]">SKU</th>
              <th>Descrição</th>
              <th>Fornecedor</th>
              <th className="text-right w-[90px]">Qtde</th>
              <th className="text-right w-[110px]">Custo unit.</th>
              <th className="text-right w-[120px]">Subtotal</th>
              <th className="w-[40px]"></th>
            </tr>
          </thead>
          <tbody>
            {items.map((it, i) => (
              <tr key={i}>
                <td className="font-mono text-[11px]">{it.sku}</td>
                <td>
                  <div className="flex items-center gap-2">
                    <div className="w-7 h-7 rounded placeholder-stripes" />
                    <span className="text-[12.5px]">{it.desc}</span>
                  </div>
                </td>
                <td><span className="badge">{it.fornecedor}</span></td>
                <td className="text-right num font-mono">{it.qtd}</td>
                <td className="text-right num font-mono">{fmt.money(it.custo)}</td>
                <td className="text-right num font-mono font-semibold">{fmt.money(it.qtd * it.custo)}</td>
                <td>
                  <button onClick={() => removeItem(i)} className="text-[var(--fg-faint)] hover:text-[var(--neg)]"><Icon name="trash-2" className="w-4 h-4" /></button>
                </td>
              </tr>
            ))}
            {/* Add row */}
            <tr className="bg-[var(--panel-2)]">
              <td><input value={novo.sku} onChange={(e) => setNovo({ ...novo, sku: e.target.value })} placeholder="SKU-…" className="input py-1.5 text-[12px]" /></td>
              <td><input value={novo.desc} onChange={(e) => setNovo({ ...novo, desc: e.target.value })} placeholder="Descrição" className="input py-1.5 text-[12px]" /></td>
              <td><SelectInput value={novo.fornecedor} options={PH.suppliers} onChange={(v) => setNovo({ ...novo, fornecedor: v })} small /></td>
              <td><input type="number" value={novo.qtd} onChange={(e) => setNovo({ ...novo, qtd: e.target.value })} placeholder="0" className="input py-1.5 text-[12px] text-right num font-mono" /></td>
              <td><input type="number" value={novo.custo} onChange={(e) => setNovo({ ...novo, custo: e.target.value })} placeholder="0,00" className="input py-1.5 text-[12px] text-right num font-mono" /></td>
              <td className="text-right num font-mono text-[var(--fg-faint)]">{fmt.money((+novo.qtd || 0) * (+novo.custo || 0))}</td>
              <td><button onClick={addItem} className="text-[var(--accent)] hover:bg-[var(--accent-soft)] p-1 rounded"><Icon name="plus-circle" className="w-5 h-5" /></button></td>
            </tr>
          </tbody>
        </table>

        <div className="px-5 py-4 border-t border-[var(--border)] flex items-center justify-between flex-wrap gap-3 bg-[var(--panel-2)]">
          <div className="text-[12px] text-[var(--fg-muted)] flex items-center gap-2">
            <Icon name="info" className="w-3.5 h-3.5" />
            Pedido será enviado para aprovação. Estimativa de chegada: <span className="font-medium text-[var(--fg)]">5-7 dias úteis</span>.
          </div>
          <div className="flex items-center gap-2">
            <Btn variant="ghost">Salvar rascunho</Btn>
            <Btn icon="copy">Duplicar</Btn>
            <Btn variant="primary" icon="send" onClick={submit}>Enviar para aprovação</Btn>
          </div>
        </div>
      </div>

      {/* Suggestion box */}
      <div className="panel p-5 chart-bg">
        <SectionHead title="Sugestões da inteligência" subtitle="SKUs próximos de ruptura com base na previsão · adicione ao pedido com 1 clique" icon="wand-sparkles" />
        <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
          {[
            { sku: "SKU-4012", desc: "Item Top F", cob: 8, prev: 120, urg: "alta" },
            { sku: "SKU-3309", desc: "Item Sazonal E", cob: 12, prev: 86, urg: "média" },
            { sku: "SKU-6033", desc: "Item Outlet H", cob: 14, prev: 64, urg: "média" },
          ].map((s) => (
            <div key={s.sku} className="p-3 rounded-xl border border-[var(--border)] bg-[var(--panel-2)] hover:border-[var(--accent)] transition-colors">
              <div className="flex items-center justify-between mb-2">
                <span className="font-mono text-[11px] text-[var(--fg-faint)]">{s.sku}</span>
                <span className={`badge ${s.urg === "alta" ? "badge-neg" : "badge-warn"}`}>{s.urg}</span>
              </div>
              <div className="text-[13px] font-medium">{s.desc}</div>
              <div className="mt-2 grid grid-cols-2 gap-2 text-[11px]">
                <div>
                  <div className="text-[var(--fg-faint)]">Cobertura</div>
                  <div className="num font-mono font-semibold">{s.cob} dias</div>
                </div>
                <div>
                  <div className="text-[var(--fg-faint)]">Sugestão</div>
                  <div className="num font-mono font-semibold text-[var(--accent)]">+{s.prev} pç</div>
                </div>
              </div>
              <button onClick={() => { setItems([...items, { sku: s.sku, desc: s.desc, qtd: s.prev, custo: 24.50, fornecedor: PH.suppliers[0] }]); }}
                      className="w-full mt-3 text-[11px] font-medium py-1.5 rounded-md border border-[var(--accent)] text-[var(--accent)] hover:bg-[var(--accent-soft)] transition-colors">
                + Adicionar ao pedido
              </button>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function FormField({ label, icon, children }) {
  return (
    <div>
      <label className="text-[10px] uppercase tracking-wider font-semibold text-[var(--fg-muted)] flex items-center gap-1.5 mb-1.5">
        {icon && <Icon name={icon} className="w-3 h-3" />} {label}
      </label>
      {children}
    </div>
  );
}

function SelectInput({ value, options, onChange, small = false }) {
  return (
    <select value={value} onChange={(e) => onChange(e.target.value)} className={`input ${small ? "py-1.5 text-[12px]" : ""}`}>
      {options.map((o) => <option key={o} value={o}>{o}</option>)}
    </select>
  );
}

// ============================================================
// RUPTURA & COBERTURA  (refactor v2: cleaner, less density, YoY storytelling)
// ============================================================
function RupturaScreen() {
  const totalSkus = MOCK.coverage.reduce((acc, s) => acc + s.skusCriticos, 0);
  const totalRisco = MOCK.coverage.reduce((acc, s) => acc + s.faturamentoRisco, 0);
  const rupturaMedia = MOCK.coverage.reduce((acc, s) => acc + s.rupturaPct, 0) / MOCK.coverage.length;
  const coberturaMedia = MOCK.coverage.reduce((acc, s) => acc + s.coberturaDias, 0) / MOCK.coverage.length;

  return (
    <div className="space-y-6">
      {/* Storytelling header — YoY narrative */}
      <div className="panel p-5 relative overflow-hidden glow-accent">
        <div className="absolute -top-12 -left-12 w-72 h-72 rounded-full bg-[var(--accent-glow)] blur-3xl pointer-events-none" />
        <div className="relative grid grid-cols-1 lg:grid-cols-[1.6fr_1fr] gap-6 items-center">
          <div>
            <div className="flex items-center gap-2 mb-1.5">
              <span className="neon-dot" />
              <span className="text-[10px] uppercase tracking-[0.18em] text-[var(--accent)] font-semibold">Monitor de risco · ao vivo</span>
            </div>
            <h2 className="text-[22px] font-semibold tracking-tight">Ruptura & Cobertura</h2>
            <p className="text-[13px] text-[var(--fg-muted)] mt-2 leading-relaxed max-w-xl">
              A rede está com <span className="font-semibold text-[var(--fg)] num">{fmt.pct(rupturaMedia)}</span> de ruptura média —{" "}
              <span className="font-semibold text-[var(--pos)] num">-2,4 p.p.</span> vs. o mesmo período de 2025.
              Cobertura subiu para <span className="font-semibold text-[var(--fg)] num">{fmt.int(coberturaMedia)} dias</span> em média,
              mas <span className="font-semibold text-[var(--neg)]">{totalSkus} SKUs</span> seguem críticos e colocam{" "}
              <span className="font-semibold num text-[var(--fg)]">{fmt.money(totalRisco, { compact: true })}</span> em risco nos próximos 7 dias.
            </p>
          </div>
          <div className="grid grid-cols-2 gap-3">
            <CompactKPI icon="alert-triangle" label="SKUs críticos"    value={totalSkus} dec={0} yoyValue={-18} yoyDir="pos" sub="de 1.240 ativos" info={GLOSSARY.ruptura} />
            <CompactKPI icon="percent"        label="Ruptura média"    value={rupturaMedia} format="pct" yoyValue={-2.4} yoyDir="pos" yoyLabel="p.p." info={GLOSSARY.ruptura} />
            <CompactKPI icon="calendar"       label="Cobertura média"  value={coberturaMedia} format="days" yoyValue={4.1} yoyDir="pos" yoyLabel="d" info={GLOSSARY.cobertura} />
            <CompactKPI icon="trending-down"  label="Receita em risco" value={totalRisco} format="money" yoyValue={-12.6} yoyDir="pos" />
          </div>
        </div>
      </div>

      {/* Heatmap by filial — refactored: NO radial halo, clean cards */}
      <div className="panel p-5">
        <div className="flex items-center justify-between mb-4">
          <div>
            <h3 className="font-semibold text-[15px] flex items-center gap-2"><Icon name="grid-3x3" className="w-4 h-4 text-[var(--fg-muted)]" /> Mapa por filial</h3>
            <p className="text-[12px] text-[var(--fg-muted)] mt-0.5">Ruptura · cobertura · receita em risco · variação vs. ano anterior</p>
          </div>
          <Tabs items={[{ id: "rede", label: "Rede" }, { id: "regiao", label: "Região" }, { id: "filial", label: "Filial" }]} value="filial" onChange={() => {}} />
        </div>
        <div className="grid grid-cols-2 lg:grid-cols-3 gap-3">
          {MOCK.coverage.map((c, i) => {
            const sev = c.rupturaPct >= 7 ? "neg" : c.rupturaPct >= 5 ? "warn" : "pos";
            const sevColor = sev === "neg" ? "var(--neg)" : sev === "warn" ? "var(--warn)" : "var(--pos)";
            const yoyRup = [-1.4, -3.1, 2.8, -2.2, 4.1, -1.0][i]; // negative = improved
            const yoyCob = [3, 8, -4, 12, -2, 5][i];

            return (
              <div key={c.loja} className="p-4 rounded-xl border border-[var(--border)] bg-[var(--panel)] hover:border-[var(--fg-faint)] transition-colors">
                <div className="flex items-start justify-between mb-3">
                  <div className="flex items-center gap-2">
                    <Icon name="store" className="w-3.5 h-3.5 text-[var(--fg-muted)]" />
                    <span className="text-[12.5px] font-medium">{c.loja}</span>
                  </div>
                  <Tooltip
                    content={
                      <div>
                        <div className="font-semibold text-[12px] mb-1">Severidade</div>
                        <div className="text-[var(--fg-muted)] space-y-0.5">
                          <div>• <span className="text-[var(--pos)] font-semibold">Saudável</span>: ruptura &lt; 5%</div>
                          <div>• <span className="text-[var(--warn)] font-semibold">Atenção</span>: 5% – 7%</div>
                          <div>• <span className="text-[var(--neg)] font-semibold">Crítico</span>: &gt; 7%</div>
                        </div>
                      </div>
                    }
                  >
                    <span className={`badge ${sev === "neg" ? "badge-neg" : sev === "warn" ? "badge-warn" : "badge-pos"} cursor-help`}>
                      {sev === "neg" ? "crítico" : sev === "warn" ? "atenção" : "saudável"}
                    </span>
                  </Tooltip>
                </div>
                <div className="grid grid-cols-[1fr_auto] gap-3 items-center">
                  <div>
                    <div className="num text-[28px] font-semibold tracking-tight leading-none" style={{ color: sevColor }}>
                      {fmt.pct(c.rupturaPct)}
                    </div>
                    <div className="text-[11px] text-[var(--fg-muted)] mt-1">
                      <Icon name={yoyRup <= 0 ? "trending-down" : "trending-up"} className="w-3 h-3 inline mr-1" style={{ color: yoyRup <= 0 ? "var(--pos)" : "var(--neg)" }} />
                      <span className="num" style={{ color: yoyRup <= 0 ? "var(--pos)" : "var(--neg)" }}>{yoyRup > 0 ? "+" : ""}{yoyRup.toFixed(1)} p.p.</span>
                      <span className="text-[var(--fg-faint)] ml-1">YoY</span>
                    </div>
                    <div className="text-[11px] text-[var(--fg-muted)] mt-0.5">{c.skusCriticos} SKUs críticos</div>
                  </div>
                  <Donut value={c.coberturaDias} max={60} size={64} stroke={5} color={sevColor} label={`${c.coberturaDias}d`} sub="cob." />
                </div>
                <div className="mt-3 pt-3 border-t border-[var(--border-soft)] grid grid-cols-2 gap-2">
                  <div>
                    <div className="text-[10px] text-[var(--fg-faint)] uppercase tracking-wider">Risco · 7d</div>
                    <div className="num font-mono text-[12.5px] font-semibold mt-0.5">{fmt.money(c.faturamentoRisco, { compact: true })}</div>
                  </div>
                  <div className="text-right">
                    <div className="text-[10px] text-[var(--fg-faint)] uppercase tracking-wider">Cobertura YoY</div>
                    <div className="text-[12px] font-mono mt-0.5">
                      <span className="num" style={{ color: yoyCob >= 0 ? "var(--pos)" : "var(--neg)" }}>{yoyCob > 0 ? "+" : ""}{yoyCob}d</span>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* SKU ranking — leaner table */}
      <div className="panel overflow-hidden">
        <div className="px-5 py-4 flex items-center justify-between border-b border-[var(--border)] flex-wrap gap-3">
          <div>
            <h3 className="font-semibold text-[14px] flex items-center gap-2"><Icon name="alert-triangle" className="w-4 h-4 text-[var(--warn)]" /> SKUs em risco · priorização</h3>
            <p className="text-[11px] text-[var(--fg-muted)] mt-0.5">Ordenado por impacto na receita · ano vs. ano</p>
          </div>
          <div className="flex items-center gap-2">
            <Tabs items={[{ id: "todos", label: "Todos", count: 125 }, { id: "alta", label: "Alta", count: 27 }, { id: "media", label: "Média", count: 56 }]} value="todos" onChange={() => {}} />
            <Btn icon="zap" variant="primary">Gerar pedido sugerido</Btn>
          </div>
        </div>
        <table className="dm-table">
          <thead>
            <tr>
              <th>SKU</th>
              <th>Descrição</th>
              <th>Filial</th>
              <th className="text-right">Estoque</th>
              <th className="text-right">Cobertura</th>
              <th className="text-right">Ruptura</th>
              <th className="text-right">YoY ruptura</th>
              <th className="text-right">Risco R$</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {PH.products.map((p, i) => {
              const cob = [4, 7, 9, 12, 15, 18, 22, 28][i % 8];
              const rup = [12.4, 9.8, 8.1, 5.6, 4.2, 3.1, 2.0, 0.8][i % 8];
              const yoyRup = [+2.1, -1.4, +3.6, -0.8, +0.4, -1.2, -2.6, -0.4][i % 8];
              return (
                <tr key={p}>
                  <td className="font-mono text-[11px] text-[var(--fg-faint)]">{p.split(" · ")[0]}</td>
                  <td className="text-[12.5px]">{p.split(" · ")[1]}</td>
                  <td><span className="badge">{PH.stores[i % PH.stores.length]}</span></td>
                  <td className="text-right num font-mono">{[8, 24, 32, 48, 62, 88, 112, 144][i % 8]}</td>
                  <td className="text-right num font-mono"><span style={{ color: cob < 14 ? "var(--warn)" : "var(--fg)" }}>{cob}d</span></td>
                  <td className="text-right num font-mono"><span style={{ color: rup > 8 ? "var(--neg)" : rup > 4 ? "var(--warn)" : "var(--pos)" }}>{fmt.pct(rup)}</span></td>
                  <td className="text-right"><Delta value={-yoyRup} dec={1} /></td>
                  <td className="text-right num font-mono">{fmt.money(rup * 1200, { compact: true })}</td>
                  <td><button className="text-[var(--accent)] text-[11px] font-medium hover:underline">Repor →</button></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// Compact KPI tile — for storytelling header rows
function CompactKPI({ icon, label, value, format = "int", dec, yoyValue, yoyLabel, yoyDir = "auto", sub, info }) {
  const display = format === "money" ? fmt.money(value, { compact: true })
    : format === "pct" ? fmt.pct(value, { dec: 1 })
    : format === "days" ? `${Math.round(value)}d`
    : fmt.int(value);
  const yoyColor = yoyDir === "pos" ? "var(--pos)" : yoyDir === "neg" ? "var(--neg)" : (yoyValue >= 0 ? "var(--pos)" : "var(--neg)");
  const yoyArrow = (yoyDir === "pos") ? "trending-down" : (yoyDir === "neg") ? "trending-up" : (yoyValue >= 0 ? "trending-up" : "trending-down");
  return (
    <div className="p-3 rounded-lg bg-[var(--panel-2)] border border-[var(--border)]">
      <div className="flex items-center justify-between text-[10px] uppercase tracking-wider text-[var(--fg-muted)] font-medium">
        <span className="flex items-center gap-1.5">
          <Icon name={icon} className="w-3 h-3" />
          <span>{label}</span>
          {info && <InfoDot content={<div><div className="font-semibold text-[12px] mb-1">{info.title}</div><div className="text-[var(--fg-muted)]">{info.desc}</div></div>} />}
        </span>
      </div>
      <div className="num text-[22px] font-semibold tracking-tight mt-1">{display}</div>
      {yoyValue != null && (
        <div className="flex items-center gap-1 mt-0.5">
          <Icon name={yoyArrow} className="w-3 h-3" style={{ color: yoyColor }} />
          <span className="num text-[11px] font-mono font-semibold" style={{ color: yoyColor }}>
            {yoyValue > 0 ? "+" : ""}{yoyValue.toFixed(1)}{yoyLabel || "%"}
          </span>
          <span className="text-[10px] text-[var(--fg-faint)]">vs. 2025</span>
        </div>
      )}
      {sub && <div className="text-[10px] text-[var(--fg-faint)] mt-0.5">{sub}</div>}
    </div>
  );
}

// ============================================================
// CARTEIRA DE PEDIDOS
// ============================================================
function CarteiraScreen() {
  const [tab, setTab] = useState("abertos");
  const stages = [
    { id: "aprovacao", label: "Aprovação", count: 4, color: "var(--warn)" },
    { id: "producao", label: "Produção", count: 12, color: "var(--accent-2)" },
    { id: "transporte", label: "Transporte", count: 8, color: "var(--info)" },
    { id: "recebido", label: "Recebido", count: 27, color: "var(--pos)" },
  ];

  const pedidos = Array.from({ length: 12 }, (_, i) => ({
    id: `PED-2026-${(2401 + i).toString().padStart(4, "0")}`,
    fornecedor: PH.suppliers[i % PH.suppliers.length],
    filial: PH.stores[i % PH.stores.length],
    itens: [4, 7, 12, 18, 5, 22, 8, 14][i % 8],
    valor: 18420 + i * 4800,
    status: ["aprovacao", "producao", "transporte", "recebido"][i % 4],
    eta: `${10 + (i % 18)}/06`,
    progress: [25, 45, 70, 100, 30, 80, 55, 90, 20, 60, 75, 100][i],
  }));

  return (
    <div className="space-y-6">
      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
        {stages.map((st) => (
          <div key={st.id} className="kpi">
            <div className="flex items-center justify-between text-[11px] uppercase tracking-wider text-[var(--fg-muted)] font-medium">
              <span className="flex items-center gap-1.5"><span className="w-1.5 h-1.5 rounded-full" style={{ background: st.color, boxShadow: `0 0 8px ${st.color}` }} />{st.label}</span>
              <span className="num font-mono">{st.count}</span>
            </div>
            <div className="num text-[24px] font-semibold mt-1">{fmt.money([148000, 412000, 286000, 192000][stages.indexOf(st)], { compact: true })}</div>
            <Delta value={[12.4, -3.1, 8.2, 4.6][stages.indexOf(st)]} />
          </div>
        ))}
      </div>

      <div className="panel overflow-hidden">
        <div className="px-5 py-3.5 border-b border-[var(--border)] flex items-center gap-3 flex-wrap">
          <Tabs items={[
            { id: "abertos", label: "Abertos", count: 24 },
            { id: "atraso", label: "Em atraso", count: 3 },
            { id: "concluidos", label: "Concluídos", count: 156 },
            { id: "todos", label: "Todos", count: 183 },
          ]} value={tab} onChange={setTab} />
          <div className="flex-1" />
          <Btn icon="filter">Filtros</Btn>
          <Btn icon="download">CSV</Btn>
        </div>

        <table className="dm-table">
          <thead>
            <tr>
              <th>Pedido</th>
              <th>Fornecedor</th>
              <th>Filial</th>
              <th className="text-right">Itens</th>
              <th className="text-right">Valor</th>
              <th>Status</th>
              <th>Progresso</th>
              <th className="text-right">ETA</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {pedidos.map((p) => {
              const st = stages.find(s => s.id === p.status);
              return (
                <tr key={p.id}>
                  <td className="font-mono text-[11px]">{p.id}</td>
                  <td className="text-[12.5px]">{p.fornecedor}</td>
                  <td><span className="badge">{p.filial}</span></td>
                  <td className="text-right num font-mono">{p.itens}</td>
                  <td className="text-right num font-mono font-semibold">{fmt.money(p.valor)}</td>
                  <td><span className="badge" style={{ color: st.color, borderColor: `color-mix(in oklch, ${st.color} 40%, transparent)`, background: `color-mix(in oklch, ${st.color} 12%, transparent)` }}>{st.label}</span></td>
                  <td className="min-w-[140px]"><Progress value={p.progress} height={4} color={st.color} showVal /></td>
                  <td className="text-right num font-mono text-[11px]">{p.eta}</td>
                  <td><Icon name="chevron-right" className="w-4 h-4 text-[var(--fg-faint)]" /></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ============================================================
// ALERTAS DE REPOSIÇÃO
// ============================================================
function AlertasScreen() {
  return (
    <div className="space-y-6">
      <div className="grid grid-cols-3 md:grid-cols-6 gap-3">
        <KPI label="Críticos" icon="alert-octagon" value={27} compact format="int" />
        <KPI label="Altos" icon="alert-triangle" value={56} compact format="int" />
        <KPI label="Médios" icon="bell" value={42} compact format="int" />
        <KPI label="Receita protegida" icon="shield-check" value={184000} delta={12.4} compact />
        <KPI label="Reposições 7d" icon="package-check" value={89} delta={8.1} compact format="int" />
        <KPI label="Lead time médio" icon="clock" value="5,2d" delta={-4.6} compact />
      </div>

      <div className="panel overflow-hidden">
        <div className="px-5 py-4 flex items-center justify-between border-b border-[var(--border)]">
          <div className="flex items-center gap-2">
            <Icon name="bell" className="w-4 h-4 text-[var(--accent)]" />
            <h3 className="font-semibold text-[14px]">Alertas ativos</h3>
            <span className="badge badge-warn">125</span>
          </div>
          <div className="flex items-center gap-2">
            <Btn icon="check-check" variant="ghost">Marcar todos como lidos</Btn>
            <Btn icon="settings-2">Regras</Btn>
          </div>
        </div>
        <div className="divide-y divide-[var(--border-soft)]">
          {PH.products.map((p, i) => {
            const sev = ["alta", "média", "alta", "baixa", "média", "alta", "média", "alta"][i % 8];
            const sevColor = sev === "alta" ? "var(--neg)" : sev === "média" ? "var(--warn)" : "var(--pos)";
            return (
              <div key={p} className="px-5 py-3.5 flex items-center gap-4 hover:bg-[var(--panel-2)] transition-colors">
                <div className="w-1 h-12 rounded-full" style={{ background: sevColor, boxShadow: `0 0 8px ${sevColor}` }} />
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2">
                    <span className="font-mono text-[11px] text-[var(--fg-faint)]">{p.split(" · ")[0]}</span>
                    <span className="text-[13px] font-medium truncate">{p.split(" · ")[1]}</span>
                    <span className={`badge ${sev === "alta" ? "badge-neg" : sev === "média" ? "badge-warn" : "badge-pos"}`}>{sev}</span>
                  </div>
                  <div className="text-[11px] text-[var(--fg-muted)] mt-0.5 flex items-center gap-3">
                    <span className="flex items-center gap-1"><Icon name="store" className="w-3 h-3" /> {PH.stores[i % PH.stores.length]}</span>
                    <span className="flex items-center gap-1"><Icon name="trending-down" className="w-3 h-3" /> Estoque {[6, 11, 4, 18, 9, 22, 14, 28][i % 8]} pç</span>
                    <span className="flex items-center gap-1"><Icon name="clock" className="w-3 h-3" /> Cobertura {[4, 8, 6, 14, 9, 18, 12, 22][i % 8]} dias</span>
                  </div>
                </div>
                <div className="text-right">
                  <div className="num text-[12px] font-mono">{fmt.money(8400 + i * 1200, { compact: true })}</div>
                  <div className="text-[10px] text-[var(--fg-faint)]">receita em risco</div>
                </div>
                <Btn variant="primary">Repor</Btn>
                <button className="text-[var(--fg-faint)] hover:text-[var(--fg)]"><Icon name="more-vertical" className="w-4 h-4" /></button>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

// ============================================================
// CAMPANHAS
// ============================================================
function CampanhasScreen() {
  const [active, setActive] = useState("ativas");
  const camps = [
    { nome: "Liquidação Sazonal", status: "ativas", periodo: "01/06 – 14/06", filiais: 6, peso: 78, prod: 124, vendas: 412000, meta: 500000, cor: "var(--accent)" },
    { nome: "Coleção Inverno · Lançamento", status: "ativas", periodo: "10/06 – 30/06", filiais: 5, peso: 62, prod: 89, vendas: 286000, meta: 400000, cor: "var(--accent-2)" },
    { nome: "Dia dos Namorados", status: "ativas", periodo: "01/06 – 12/06", filiais: 6, peso: 91, prod: 56, vendas: 196000, meta: 200000, cor: "var(--pink)" },
    { nome: "Liquida Outlet", status: "planejadas", periodo: "20/06 – 30/06", filiais: 4, peso: 0, prod: 78, vendas: 0, meta: 180000, cor: "var(--fg-muted)" },
    { nome: "Aniversário · 12 anos", status: "encerradas", periodo: "20/05 – 31/05", filiais: 6, peso: 100, prod: 142, vendas: 521000, meta: 480000, cor: "var(--pos)" },
  ];
  const filtered = camps.filter(c => c.status === active);

  return (
    <div className="space-y-6">
      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
        <KPI label="Campanhas ativas" icon="megaphone" value={3} compact format="int" accent />
        <KPI label="Vendas em campanha" icon="dollar-sign" value={894000} delta={18.2} compact />
        <KPI label="Avanço médio meta" icon="target" value="77%" delta={6.4} compact />
        <KPI label="Pendências execução" icon="alert-triangle" value={4} compact format="int" />
      </div>

      <div className="panel overflow-hidden">
        <div className="px-5 py-3.5 border-b border-[var(--border)] flex items-center gap-3 flex-wrap">
          <Tabs items={[
            { id: "ativas", label: "Ativas", count: 3 },
            { id: "planejadas", label: "Planejadas", count: 1 },
            { id: "encerradas", label: "Encerradas", count: 1 },
          ]} value={active} onChange={setActive} />
          <div className="flex-1" />
          <Btn variant="primary" icon="plus">Nova campanha</Btn>
        </div>

        <div className="divide-y divide-[var(--border-soft)]">
          {filtered.map((c, i) => (
            <div key={c.nome} className="px-5 py-4 hover:bg-[var(--panel-2)] transition-colors group">
              <div className="flex items-start gap-4">
                <div className="w-12 h-12 rounded-xl flex items-center justify-center text-[18px] font-bold shrink-0" style={{ background: `color-mix(in oklch, ${c.cor} 15%, transparent)`, color: c.cor, border: `1px solid color-mix(in oklch, ${c.cor} 40%, transparent)` }}>
                  <Icon name="megaphone" className="w-5 h-5" />
                </div>
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-3 flex-wrap">
                    <span className="text-[14px] font-semibold">{c.nome}</span>
                    <span className="badge">{c.periodo}</span>
                    <span className="badge"><Icon name="store" className="w-3 h-3 inline" /> {c.filiais} filiais</span>
                    <span className="badge"><Icon name="package" className="w-3 h-3 inline" /> {c.prod} SKUs</span>
                  </div>
                  <div className="mt-2 grid grid-cols-3 gap-4 items-center max-w-[760px]">
                    <div>
                      <div className="text-[10px] text-[var(--fg-muted)] uppercase tracking-wider">Execução nas lojas</div>
                      <div className="flex items-center gap-2 mt-1">
                        <Progress value={c.peso} max={100} height={5} color={c.cor} />
                        <span className="num font-mono text-[11px] font-semibold w-10 text-right">{c.peso}%</span>
                      </div>
                    </div>
                    <div>
                      <div className="text-[10px] text-[var(--fg-muted)] uppercase tracking-wider">Vendas</div>
                      <div className="num text-[14px] font-semibold mt-1">{fmt.money(c.vendas, { compact: true })}</div>
                    </div>
                    <div>
                      <div className="text-[10px] text-[var(--fg-muted)] uppercase tracking-wider">Meta · {fmt.pct((c.vendas / c.meta) * 100, { dec: 0 })}</div>
                      <Progress value={c.vendas} max={c.meta} height={5} color="var(--accent)" />
                    </div>
                  </div>
                </div>
                <div className="opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-2">
                  <Btn variant="ghost" icon="bar-chart-3">Detalhes</Btn>
                  <Btn variant="ghost" icon="more-horizontal" />
                </div>
              </div>
            </div>
          ))}
          {filtered.length === 0 && <Empty title="Sem campanhas neste status" desc="Crie ou aguarde o início das próximas campanhas." />}
        </div>
      </div>

      {/* Filial execution panel */}
      <div className="panel p-5">
        <SectionHead title="Acompanhamento de execução · Liquidação Sazonal" subtitle="Status por filial · upload de fotos e check-in operacional" icon="clipboard-check" />
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
          {PH.stores.map((s, i) => {
            const exec = [100, 92, 78, 64, 100, 38][i];
            return (
              <div key={s} className="p-4 rounded-xl border border-[var(--border)] bg-[var(--panel-2)]">
                <div className="text-[11px] uppercase tracking-wider text-[var(--fg-muted)]">{s}</div>
                <div className="mt-3 flex items-center justify-center">
                  <Donut value={exec} max={100} size={72} stroke={6} color={exec === 100 ? "var(--pos)" : exec >= 60 ? "var(--accent)" : "var(--warn)"} />
                </div>
                <div className="mt-3 flex items-center justify-between text-[10px] text-[var(--fg-muted)]">
                  <span><Icon name="image" className="w-3 h-3 inline" /> {Math.round(exec / 20)}/5</span>
                  <span>{exec === 100 ? "Pronto" : "Em execução"}</span>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

// ============================================================
// PERF. VENDEDORES
// ============================================================
function VendedoresScreen() {
  const reps = Array.from({ length: 14 }, (_, i) => ({
    nome: `Operador ${String.fromCharCode(65 + i)}`,
    loja: PH.stores[i % PH.stores.length],
    vlr: 132000 - i * 7800,
    pa: 1.9 - i * 0.06,
    tkm: 480 - i * 12,
    conv: 38 - i * 1.5,
    yoy: [22.4, 18.1, 12.6, 8.2, 5.7, 2.1, -1.4, -3.6, -6.8, -8.4, -10.1, -12.2, -14.6, -17.1][i],
  }));

  return (
    <div className="space-y-6">
      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
        <KPI label="Operadores ativos" value={42} icon="users" compact format="int" />
        <KPI label="Vendas equipe" value={1820000} icon="dollar-sign" delta={12.6} compact />
        <KPI label="PA médio" value={1.62} icon="bar-chart-3" delta={3.4} compact format="num" />
        <KPI label="Conversão média" value="28,4%" icon="percent" delta={1.8} compact />
      </div>

      {/* Top 3 podium */}
      <div className="panel p-5 chart-bg">
        <SectionHead title="Top 3 do mês" subtitle="Ranking acumulado · clique para drilldown" icon="crown" />
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {reps.slice(0, 3).map((r, i) => {
            const colors = ["var(--accent)", "var(--accent-2)", "var(--pink)"];
            return (
              <div key={r.nome} className="p-5 rounded-xl border border-[var(--border)] bg-[var(--panel-2)] relative overflow-hidden">
                <div className="absolute -top-12 -right-12 w-32 h-32 rounded-full blur-3xl" style={{ background: `color-mix(in oklch, ${colors[i]} 40%, transparent)` }} />
                <div className="relative flex items-center gap-3">
                  <div className="w-14 h-14 rounded-2xl flex items-center justify-center text-[18px] font-bold" style={{ background: `color-mix(in oklch, ${colors[i]} 18%, transparent)`, color: colors[i], border: `1px solid color-mix(in oklch, ${colors[i]} 50%, transparent)` }}>
                    {i + 1}
                  </div>
                  <div>
                    <div className="text-[14px] font-semibold">{r.nome}</div>
                    <div className="text-[11px] text-[var(--fg-muted)]">{r.loja}</div>
                  </div>
                  {i === 0 && <Icon name="crown" className="w-5 h-5 text-[var(--accent)] ml-auto" />}
                </div>
                <div className="num text-[28px] font-semibold tracking-tight mt-3 relative">{fmt.money(r.vlr, { compact: true })}</div>
                <Delta value={r.yoy} />
                <div className="mt-3 pt-3 border-t border-[var(--border-soft)] grid grid-cols-3 gap-2 relative">
                  <div><div className="text-[9px] uppercase text-[var(--fg-faint)]">P.A.</div><div className="num text-[12px] font-mono">{r.pa.toFixed(2)}</div></div>
                  <div><div className="text-[9px] uppercase text-[var(--fg-faint)]">T.K.M.</div><div className="num text-[12px] font-mono">{fmt.money(r.tkm, { compact: true, currency: false })}</div></div>
                  <div><div className="text-[9px] uppercase text-[var(--fg-faint)]">Conv.</div><div className="num text-[12px] font-mono">{r.conv.toFixed(1)}%</div></div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <div className="panel overflow-hidden">
        <table className="dm-table">
          <thead>
            <tr>
              <th className="w-[40px]">#</th>
              <th>Operador</th>
              <th>Filial</th>
              <th className="text-right">Vendas</th>
              <th className="text-right">P.A.</th>
              <th className="text-right">T.K.M.</th>
              <th className="text-right">Conv.</th>
              <th className="text-right">YoY</th>
            </tr>
          </thead>
          <tbody>
            {reps.map((r, i) => (
              <tr key={r.nome}>
                <td className="num font-mono text-[var(--fg-faint)]">{(i + 1).toString().padStart(2, "0")}</td>
                <td>
                  <div className="flex items-center gap-2">
                    <div className="w-7 h-7 rounded-full bg-gradient-to-br from-[var(--accent-2)] to-[var(--accent)] flex items-center justify-center text-[10px] font-semibold text-[#ffffff]">{r.nome.split(" ")[1][0]}</div>
                    <span className="text-[12.5px] font-medium">{r.nome}</span>
                  </div>
                </td>
                <td><span className="badge">{r.loja}</span></td>
                <td className="text-right num font-mono font-semibold">{fmt.money(r.vlr, { compact: true })}</td>
                <td className="text-right num font-mono">{r.pa.toFixed(2)}</td>
                <td className="text-right num font-mono">{fmt.money(r.tkm, { compact: true })}</td>
                <td className="text-right num font-mono">{r.conv.toFixed(1)}%</td>
                <td className="text-right"><Delta value={r.yoy} /></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

Object.assign(window, {
  ForecastScreen, PedidosCadastroScreen, RupturaScreen, CarteiraScreen,
  AlertasScreen, CampanhasScreen, VendedoresScreen, OTBScreen,
  FormField, SelectInput,
});

// ============================================================
// OTB — Open to Buy
// ============================================================
function OTBScreen() {
  const [estacao, setEstacao] = useState("Inverno 26");
  const estacoes = ["Verão 26", "Outono 26", "Inverno 26", "Primavera 26"];
  const grupos = ["Grupo Alpha", "Grupo Beta", "Grupo Gama", "Grupo Delta", "Grupo Épsilon"];

  // OTB rows — orçado vs comprado vs disponível
  const rows = grupos.map((g, i) => {
    const orcado = 280000 - i * 38000;
    const comprado = orcado * (0.42 + i * 0.08);
    const recebido = comprado * 0.78;
    const disponivel = orcado - comprado;
    const meta = orcado * 1.04;
    return { grupo: g, orcado, comprado, recebido, disponivel, meta, vendas: orcado * (0.18 + i * 0.04) };
  });

  const totals = rows.reduce((acc, r) => ({
    orcado: acc.orcado + r.orcado,
    comprado: acc.comprado + r.comprado,
    recebido: acc.recebido + r.recebido,
    disponivel: acc.disponivel + r.disponivel,
    vendas: acc.vendas + r.vendas,
  }), { orcado: 0, comprado: 0, recebido: 0, disponivel: 0, vendas: 0 });

  return (
    <div className="space-y-6">
      <div className="panel p-5 relative overflow-hidden glow-accent">
        <div className="absolute -top-12 right-10 w-72 h-72 rounded-full bg-[var(--accent-glow)] blur-3xl pointer-events-none" />
        <div className="relative flex items-end justify-between flex-wrap gap-4">
          <div>
            <div className="flex items-center gap-2 mb-1.5">
              <span className="neon-dot" />
              <span className="text-[10px] uppercase tracking-[0.18em] text-[var(--accent)] font-semibold">Planejamento de compras</span>
              <span className="badge badge-violet">Enterprise + Add-on</span>
            </div>
            <h2 className="text-[22px] font-semibold tracking-tight">Open to Buy</h2>
            <p className="text-[12.5px] text-[var(--fg-muted)] mt-1 max-w-xl">
              Controle de orçamento de compras por estação. Compare orçado, comprado, recebido e disponível por grupo — com referência cruzada na previsão de vendas.
            </p>
          </div>
          <div className="flex items-end gap-3">
            <FormField label="Estação">
              <SelectInput value={estacao} options={estacoes} onChange={setEstacao} />
            </FormField>
            <Btn icon="download">Exportar</Btn>
            <Btn variant="primary" icon="save">Salvar plano</Btn>
          </div>
        </div>
      </div>

      {/* KPI totals */}
      <div className="grid grid-cols-2 lg:grid-cols-5 gap-3">
        <div className="kpi kpi-accent">
          <div className="text-[10px] uppercase tracking-wider text-[var(--fg-muted)]">Orçado estação</div>
          <div className="num text-[22px] font-semibold mt-1">{fmt.money(totals.orcado, { compact: true })}</div>
          <Delta value={8.4} />
        </div>
        <div className="kpi">
          <div className="text-[10px] uppercase tracking-wider text-[var(--fg-muted)]">Comprado</div>
          <div className="num text-[22px] font-semibold mt-1">{fmt.money(totals.comprado, { compact: true })}</div>
          <div className="text-[10px] text-[var(--fg-faint)] num">{fmt.pct((totals.comprado / totals.orcado) * 100)} do orçado</div>
        </div>
        <div className="kpi">
          <div className="text-[10px] uppercase tracking-wider text-[var(--fg-muted)]">Recebido</div>
          <div className="num text-[22px] font-semibold mt-1">{fmt.money(totals.recebido, { compact: true })}</div>
          <div className="text-[10px] text-[var(--fg-faint)] num">{fmt.pct((totals.recebido / totals.comprado) * 100)} do comprado</div>
        </div>
        <div className="kpi">
          <div className="text-[10px] uppercase tracking-wider text-[var(--fg-muted)]">Disponível p/ compra</div>
          <div className="num text-[22px] font-semibold text-[var(--accent)] mt-1">{fmt.money(totals.disponivel, { compact: true })}</div>
          <div className="text-[10px] text-[var(--fg-faint)] num">aberto p/ alocação</div>
        </div>
        <div className="kpi">
          <div className="text-[10px] uppercase tracking-wider text-[var(--fg-muted)]">Vendas projetadas</div>
          <div className="num text-[22px] font-semibold mt-1">{fmt.money(totals.vendas, { compact: true })}</div>
          <Delta value={11.6} />
        </div>
      </div>

      {/* Stacked progress per group */}
      <div className="panel p-5">
        <SectionHead title="Distribuição por grupo" subtitle="Empilhamento orçado · comprado · recebido · disponível" icon="layers-3" />
        <div className="space-y-4">
          {rows.map((r) => {
            const cPct = (r.comprado / r.orcado) * 100;
            const rPct = (r.recebido / r.orcado) * 100;
            return (
              <div key={r.grupo}>
                <div className="flex items-center justify-between mb-1.5">
                  <div className="flex items-center gap-2">
                    <span className="text-[12.5px] font-medium">{r.grupo}</span>
                    <span className="badge"><Icon name="package" className="w-3 h-3 inline" /> {Math.round(r.orcado / 5000)} pç orçadas</span>
                  </div>
                  <div className="flex items-center gap-3 text-[11px]">
                    <span className="text-[var(--fg-muted)]">Orçado <span className="num font-mono text-[var(--fg)] font-medium ml-1">{fmt.money(r.orcado, { compact: true })}</span></span>
                    <span className="text-[var(--fg-muted)]">Disp. <span className="num font-mono text-[var(--accent)] font-medium ml-1">{fmt.money(r.disponivel, { compact: true })}</span></span>
                  </div>
                </div>
                <div className="relative h-7 rounded-md overflow-hidden border border-[var(--border)]" style={{ background: "var(--panel-2)" }}>
                  {/* Recebido (innermost) */}
                  <div className="absolute left-0 top-0 h-full" style={{ width: `${rPct}%`, background: "var(--accent)", boxShadow: "inset 0 -2px 0 color-mix(in oklch, var(--accent) 60%, transparent)" }} />
                  {/* Comprado (over recebido) */}
                  <div className="absolute left-0 top-0 h-full" style={{ left: `${rPct}%`, width: `${cPct - rPct}%`, background: "color-mix(in oklch, var(--accent) 35%, transparent)" }} />
                  {/* Disponível is whatever is left */}
                  <div className="absolute left-0 top-0 h-full flex items-center justify-between px-3 text-[10px] font-mono tabular-nums w-full">
                    <span className="text-[#00282d] font-semibold mix-blend-difference invert">{fmt.pct(rPct, { dec: 0 })}</span>
                    <span className="text-[var(--fg-muted)]">{fmt.pct(cPct, { dec: 0 })} comprado</span>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
        <div className="mt-5 pt-4 border-t border-[var(--border)] flex items-center gap-4 text-[11px]">
          <span className="flex items-center gap-1.5"><span className="w-3 h-3 rounded" style={{ background: "var(--accent)" }} />Recebido</span>
          <span className="flex items-center gap-1.5"><span className="w-3 h-3 rounded" style={{ background: "color-mix(in oklch, var(--accent) 35%, transparent)" }} />Comprado · pendente entrega</span>
          <span className="flex items-center gap-1.5"><span className="w-3 h-3 rounded border border-[var(--border)]" style={{ background: "var(--panel-2)" }} />Disponível para compra</span>
        </div>
      </div>

      {/* Detail table */}
      <div className="panel overflow-hidden">
        <div className="px-5 py-3.5 border-b border-[var(--border)] flex items-center justify-between">
          <h3 className="font-semibold text-[14px]">Detalhamento por grupo · {estacao}</h3>
          <div className="flex items-center gap-2">
            <Btn icon="filter">Filtrar</Btn>
            <Btn icon="plus">Novo grupo</Btn>
          </div>
        </div>
        <table className="dm-table">
          <thead>
            <tr>
              <th>Grupo</th>
              <th className="text-right">Orçado</th>
              <th className="text-right">Comprado</th>
              <th className="text-right">Recebido</th>
              <th className="text-right">Disponível</th>
              <th className="text-right">% Atendido</th>
              <th className="text-right">Vendas proj.</th>
              <th>Saúde</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r) => {
              const at = (r.comprado / r.orcado) * 100;
              const saude = at >= 80 ? "ok" : at >= 50 ? "aviso" : "atencao";
              return (
                <tr key={r.grupo}>
                  <td><span className="text-[12.5px] font-medium">{r.grupo}</span></td>
                  <td className="text-right num font-mono">{fmt.money(r.orcado, { compact: true })}</td>
                  <td className="text-right num font-mono">{fmt.money(r.comprado, { compact: true })}</td>
                  <td className="text-right num font-mono">{fmt.money(r.recebido, { compact: true })}</td>
                  <td className="text-right num font-mono font-semibold text-[var(--accent)]">{fmt.money(r.disponivel, { compact: true })}</td>
                  <td className="text-right num font-mono">{fmt.pct(at, { dec: 0 })}</td>
                  <td className="text-right num font-mono">{fmt.money(r.vendas, { compact: true })}</td>
                  <td>
                    <span className={`badge ${saude === "ok" ? "badge-pos" : saude === "aviso" ? "badge-warn" : "badge-neg"}`}>
                      {saude === "ok" ? "no plano" : saude === "aviso" ? "atrasado" : "crítico"}
                    </span>
                  </td>
                  <td><button className="text-[var(--accent)] text-[11px] font-medium">Detalhar →</button></td>
                </tr>
              );
            })}
            {/* Totals row */}
            <tr style={{ background: "var(--panel-2)", fontWeight: 600 }}>
              <td className="text-[11px] uppercase tracking-wider text-[var(--fg-muted)]">Total</td>
              <td className="text-right num font-mono">{fmt.money(totals.orcado, { compact: true })}</td>
              <td className="text-right num font-mono">{fmt.money(totals.comprado, { compact: true })}</td>
              <td className="text-right num font-mono">{fmt.money(totals.recebido, { compact: true })}</td>
              <td className="text-right num font-mono text-[var(--accent)]">{fmt.money(totals.disponivel, { compact: true })}</td>
              <td className="text-right num font-mono">{fmt.pct((totals.comprado / totals.orcado) * 100, { dec: 0 })}</td>
              <td className="text-right num font-mono">{fmt.money(totals.vendas, { compact: true })}</td>
              <td></td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </div>

      {/* Side cards: cross-ref forecast + alert */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
        <div className="panel p-5 chart-bg">
          <SectionHead title="Cruzamento com previsão" subtitle="Quanto da venda projetada está coberta pelo OTB" icon="git-compare-arrows" />
          <div className="space-y-3">
            {rows.map((r) => {
              const cov = Math.min(100, (r.comprado / r.vendas) * 100);
              return (
                <div key={r.grupo} className="flex items-center gap-3">
                  <div className="w-[120px] text-[12px] truncate">{r.grupo}</div>
                  <div className="flex-1"><Progress value={cov} max={100} color={cov < 60 ? "var(--neg)" : cov < 85 ? "var(--warn)" : "var(--pos)"} height={6} /></div>
                  <div className="num font-mono text-[11px] w-12 text-right">{fmt.pct(cov, { dec: 0 })}</div>
                </div>
              );
            })}
          </div>
        </div>
        <div className="panel p-5">
          <SectionHead title="Sugestões da inteligência" subtitle="Realocações automáticas baseadas em forecast + ruptura" icon="wand-sparkles" />
          <div className="space-y-2.5">
            {[
              { from: "Grupo Delta", to: "Grupo Alpha", v: 24000, motivo: "previsão -12% Delta · +18% Alpha" },
              { from: "Grupo Épsilon", to: "Grupo Beta", v: 18500, motivo: "ruptura crítica em Beta" },
              { from: "Reserva geral", to: "Grupo Gama", v: 32000, motivo: "campanha aprovada · julho" },
            ].map((s, i) => (
              <div key={i} className="p-3 rounded-xl border border-[var(--border)] bg-[var(--panel-2)] hover:border-[var(--accent)] transition-colors group">
                <div className="flex items-center gap-2 text-[12px]">
                  <span className="font-medium">{s.from}</span>
                  <Icon name="arrow-right" className="w-3.5 h-3.5 text-[var(--accent)]" />
                  <span className="font-medium">{s.to}</span>
                  <span className="ml-auto num font-mono text-[12.5px] font-semibold text-[var(--accent)]">{fmt.money(s.v, { compact: true })}</span>
                </div>
                <div className="text-[10.5px] text-[var(--fg-muted)] mt-1">{s.motivo}</div>
                <button className="mt-2 text-[11px] font-medium text-[var(--accent)] flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                  Aplicar realocação <Icon name="check" className="w-3 h-3" />
                </button>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}