/* 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");
  const [granularidade, setGranularidade] = useState("rede");
  const toast = useToast();

  // Slice forecast pelo horizonte selecionado (4/8/12 sem após o realizado)
  const fullData = MOCK.forecast;
  const realCount = fullData.filter(d => d.real != null).length;
  // Mostrar histórico completo + N semanas de previsão
  const data = fullData.slice(0, realCount + horizon);

  // Multiplicador da projeção pelo modelo (Prophet mais conservador, XGB mais agressivo)
  const modelMult = { ensemble: 1.0, prophet: 0.94, xgb: 1.08 }[model] || 1;
  // KPI "Próximas N sem" — base 2.89M pra 4 sem
  const projecaoBase = 2890000;
  const projecao = projecaoBase * (horizon / 4) * modelMult;
  const projecaoYoY = horizon === 4 ? 12.8 : horizon === 8 ? 14.4 : 16.1;
  const confianca = { ensemble: 94, prophet: 91, xgb: 89 }[model] || 94;
  const mape = { ensemble: 4.2, prophet: 5.1, xgb: 5.8 }[model] || 4.2;

  // Recalcular — dispara toast + simula novo "Último treino"
  const [reCalcKey, setReCalcKey] = useState(0);
  const [ultimoTreino, setUltimoTreino] = useState("2h");
  const handleRecalcular = () => {
    setReCalcKey(k => k + 1);
    setUltimoTreino("agora");
    toast({ tone: "success", title: "Modelo recalculado", desc: `${model} · ${horizon} sem · ${granularidade}` });
  };

  // Configurar variáveis — drawer com sliders por driver
  const [varsOpen, setVarsOpen] = useState(false);
  const [drivers, setDrivers] = useState([
    { id: "sazonalidade", label: "Sazonalidade · mês comercial",     weight: 38, dir: "up" },
    { id: "calendario",   label: "Calendário · feriados regionais",  weight: 24, dir: "up" },
    { id: "tendencia",    label: "Tendência · 12 sem",               weight: 18, dir: "up" },
    { id: "estoque",      label: "Estoque disponível",                weight: 14, dir: "down" },
    { id: "promo",        label: "Promoções planejadas",              weight: 11, dir: "up" },
    { id: "clima",        label: "Clima / temperatura",               weight: 6,  dir: "neutral" },
  ]);
  const handleAplicarVars = () => {
    const total = drivers.reduce((acc, d) => acc + d.weight, 0);
    setVarsOpen(false);
    setReCalcKey(k => k + 1);
    toast({ tone: "success", title: "Variáveis aplicadas", desc: `Modelo recalibrado com novos pesos · total: ${total} pts. Última calibração: agora.` });
  };
  const handleResetVars = () => {
    setDrivers([
      { id: "sazonalidade", label: "Sazonalidade · mês comercial",     weight: 38, dir: "up" },
      { id: "calendario",   label: "Calendário · feriados regionais",  weight: 24, dir: "up" },
      { id: "tendencia",    label: "Tendência · 12 sem",               weight: 18, dir: "up" },
      { id: "estoque",      label: "Estoque disponível",                weight: 14, dir: "down" },
      { id: "promo",        label: "Promoções planejadas",              weight: 11, dir: "up" },
      { id: "clima",        label: "Clima / temperatura",               weight: 6,  dir: "neutral" },
    ]);
    toast({ tone: "info", title: "Pesos resetados", desc: "Voltou aos valores padrão do modelo Ensemble." });
  };

  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 seu ERP.
            </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 {horizon} sem.</div>
              <div key={reCalcKey} className="num text-[22px] font-semibold text-[var(--accent)] fade-in">{fmt.money(projecao, { compact: true })}</div>
              <Delta value={projecaoYoY} />
            </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 key={`c-${reCalcKey}`} className="num text-[22px] font-semibold fade-in">{confianca}%</div>
              <div className="text-[10px] text-[var(--fg-faint)] flex items-center gap-1">
                MAPE {mape.toFixed(1)}%
                <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">{ultimoTreino}</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={granularidade} onChange={setGranularidade} />
        </div>
        <div className="flex-1" />
        <Btn icon="settings-2" onClick={() => setVarsOpen(true)}>Configurar variáveis</Btn>
        <Btn variant="primary" icon="zap" onClick={handleRecalcular}>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>

      {/* Modal Configurar variáveis — sliders por driver */}
      <Modal
        open={varsOpen}
        onClose={() => setVarsOpen(false)}
        title="Configurar variáveis do modelo"
        maxWidth="max-w-2xl"
        footer={
          <>
            <Btn variant="ghost" onClick={handleResetVars}>Resetar padrão</Btn>
            <div className="flex-1" />
            <Btn variant="ghost" onClick={() => setVarsOpen(false)}>Cancelar</Btn>
            <Btn variant="primary" icon="zap" onClick={handleAplicarVars}>Aplicar e recalcular</Btn>
          </>
        }
      >
        <div className="space-y-4">
          <p className="text-[12.5px] text-[var(--fg-muted)]">
            Ajuste o peso de cada variável no modelo de previsão. Aumentar um peso amplifica o impacto desse fator nos próximos {horizon} semanas.
          </p>

          <div className="space-y-3">
            {drivers.map((d) => {
              const color = d.dir === "up" ? "var(--accent)" : d.dir === "down" ? "var(--neg)" : "var(--fg-faint)";
              return (
                <div key={d.id} className="p-3 rounded-lg border border-[var(--border)] bg-[var(--panel-2)]">
                  <div className="flex items-center justify-between mb-2">
                    <span className="text-[12.5px] font-medium">{d.label}</span>
                    <div className="flex items-center gap-2">
                      <Icon
                        name={d.dir === "up" ? "trending-up" : d.dir === "down" ? "trending-down" : "minus"}
                        className="w-3.5 h-3.5"
                        style={{ color }}
                      />
                      <span className="num font-mono text-[12.5px] font-bold w-10 text-right" style={{ color }}>{d.weight}%</span>
                    </div>
                  </div>
                  <input
                    type="range"
                    min="0"
                    max="50"
                    value={d.weight}
                    onChange={(e) => {
                      const v = parseInt(e.target.value, 10);
                      setDrivers(arr => arr.map(x => x.id === d.id ? { ...x, weight: v } : x));
                    }}
                    className="w-full h-1.5 rounded-full appearance-none cursor-pointer bg-[var(--border)]"
                    style={{
                      background: `linear-gradient(to right, ${color} 0%, ${color} ${(d.weight / 50) * 100}%, var(--border) ${(d.weight / 50) * 100}%, var(--border) 100%)`,
                    }}
                  />
                </div>
              );
            })}
          </div>

          <div className="p-3 rounded-lg bg-[var(--accent-soft)] border border-[var(--accent)]/30 flex items-start gap-2">
            <Icon name="info" className="w-3.5 h-3.5 text-[var(--accent)] mt-0.5 shrink-0" />
            <div className="text-[11.5px] text-[var(--fg-muted)]">
              <span className="font-semibold text-[var(--fg)]">Total: {drivers.reduce((a, d) => a + d.weight, 0)} pts</span> · O modelo normaliza automaticamente. Não precisa somar 100%.
            </div>
          </div>
        </div>
      </Modal>
    </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);

  const [hoverIdx, setHoverIdx] = useState(null);
  const wrapperRef = useRef(null);

  const handleMove = (e) => {
    if (!wrapperRef.current) return;
    const rect = wrapperRef.current.getBoundingClientRect();
    const xRel = e.clientX - rect.left;
    const xVB = (xRel / rect.width) * w;
    const idx = Math.round((xVB - pad.l) / xStep);
    if (idx >= 0 && idx < n) setHoverIdx(idx);
    else setHoverIdx(null);
  };

  // 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 (
    <div ref={wrapperRef} className="relative w-full" style={{ height: h }} onMouseMove={handleMove} onMouseLeave={() => setHoverIdx(null)}>
      <svg viewBox={`0 0 ${w} ${h}`} className="w-full block" style={{ height: h }} preserveAspectRatio="none">
        <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>

        {/* Crosshair vertical */}
        {hoverIdx != null && (
          <line x1={pad.l + hoverIdx * xStep} x2={pad.l + hoverIdx * xStep} y1={pad.t} y2={h - pad.b} stroke="var(--accent)" strokeWidth="1" strokeDasharray="3 3" opacity="0.5" />
        )}

        {/* 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={hoverIdx === i ? "5" : "2.5"} fill="var(--accent)" stroke={hoverIdx === i ? "var(--panel)" : "none"} strokeWidth={hoverIdx === i ? "2" : "0"} style={{ transition: "r 120ms ease" }} />)}
          </>
        )}

        {/* Forecast line */}
        <path d={fcPath} fill="none" stroke="var(--accent-2)" strokeWidth="2" strokeDasharray="5 4" strokeLinecap="round" />
        {fcPoints.map((p, i) => {
          // Mapeia idx do fcPoint pro idx geral do data
          const idxData = data.findIndex((d, k) => d.previsto != null && data.slice(0, k).filter(x => x.previsto != null).length === i);
          return (
            <circle key={i} cx={p[0]} cy={p[1]} r={hoverIdx === idxData ? "5" : "2.5"} fill="var(--accent-2)" stroke={hoverIdx === idxData ? "var(--panel)" : "none"} strokeWidth={hoverIdx === idxData ? "2" : "0"} style={{ transition: "r 120ms ease" }} />
          );
        })}
      </svg>

      {/* Tooltip */}
      {hoverIdx != null && (() => {
        const d = data[hoverIdx];
        if (!d) return null;
        const xPct = ((pad.l + hoverIdx * xStep) / w) * 100;
        const tooltipOnRight = xPct > 70;
        const isForecast = d.previsto != null;
        return (
          <div
            className="absolute pointer-events-none z-10 fade-in"
            style={{
              left: `${xPct}%`,
              top: 8,
              transform: tooltipOnRight ? "translateX(calc(-100% - 12px))" : "translateX(12px)",
            }}
          >
            <div className="panel-hi shadow-[var(--shadow-lg)] px-3 py-2 min-w-[160px]">
              <div className="text-[10px] uppercase tracking-wider text-[var(--fg-muted)] font-semibold mb-1.5 flex items-center gap-1.5">
                {d.sem}
                {isForecast && <span className="badge badge-accent text-[8px]">previsão</span>}
              </div>
              {d.real != null && (
                <div className="flex items-center gap-2 text-[11px]">
                  <span className="w-2 h-2 rounded-full bg-[var(--accent)] shrink-0" />
                  <span className="text-[var(--fg-muted)] flex-1">Realizado</span>
                  <span className="num font-mono font-semibold">{fmt.money(d.real, { compact: true })}</span>
                </div>
              )}
              {d.previsto != null && (
                <div className="flex items-center gap-2 text-[11px]">
                  <span className="w-2 h-2 rounded-full bg-[var(--accent-2)] shrink-0" />
                  <span className="text-[var(--fg-muted)] flex-1">Previsto</span>
                  <span className="num font-mono font-semibold">{fmt.money(d.previsto, { compact: true })}</span>
                </div>
              )}
              {d.lo != null && d.hi != null && (
                <div className="text-[9.5px] text-[var(--fg-faint)] mt-1.5 pt-1.5 border-t border-[var(--border)]">
                  Banda 90%: {fmt.money(d.lo, { compact: true })} – {fmt.money(d.hi, { compact: true })}
                </div>
              )}
            </div>
          </div>
        );
      })()}
    </div>
  );
}

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 [prioridade, setPrioridade] = useState("Normal");
  const [prioridadeOpen, setPrioridadeOpen] = useState(false);
  const [importOpen, setImportOpen] = useState(false);
  // Animação IA "Gerar via previsão"
  const [iaRunning, setIaRunning] = useState(false);
  const [iaStep, setIaStep] = useState(0); // 0-3: ocioso, 1=analisando, 2=cruzando, 3=calibrando
  const [iaBanner, setIaBanner] = useState(false); // banner verde "Sugerido pela IA"
  const [itemsAnimKey, setItemsAnimKey] = useState(0); // rerender com fade-in escalonado
  const toast = useToast();

  const handleBaixarModelo = () => {
    toast({ tone: "success", title: "Modelo XLS baixado", desc: "modelo-pedido-dashm.xlsx · 12 KB · enviado pra Downloads." });
  };
  const handleSimularImport = () => {
    toast({ tone: "success", title: "Pedido importado", desc: "15 itens reconhecidos · 0 erros. Revise antes de enviar pra aprovação." });
    setImportOpen(false);
  };

  const handleGerarViaPrevisao = () => {
    if (iaRunning) return;
    setIaRunning(true);
    setIaStep(1);
    setIaBanner(false);
    setTimeout(() => setIaStep(2), 800);
    setTimeout(() => setIaStep(3), 1600);
    setTimeout(() => {
      // Auto-preenche form com sugestão IA
      setFilial(PH.stores[2]); // "Filial 03" (a com mais ruptura)
      setPrioridade("Alta");
      setEntrega("2026-06-08"); // próxima semana, urgência
      setItems([
        { sku: "SKU-4012", desc: "Item Top F (ruptura crítica)",      qtd: 120, custo: 22.40, fornecedor: PH.suppliers[1] },
        { sku: "SKU-3309", desc: "Item Sazonal E (alta sazonalidade)", qtd: 86,  custo: 18.90, fornecedor: PH.suppliers[2] },
        { sku: "SKU-6033", desc: "Item Outlet H (cobertura < 7d)",     qtd: 64,  custo: 12.50, fornecedor: PH.suppliers[0] },
        { sku: "SKU-1042", desc: "Item Padrão A (curva A · giro alto)", qtd: 50,  custo: 18.40, fornecedor: PH.suppliers[1] },
        { sku: "SKU-2210", desc: "Item Premium C (margem alta)",       qtd: 24,  custo: 42.10, fornecedor: PH.suppliers[3] },
      ]);
      setItemsAnimKey(k => k + 1);
      setIaRunning(false);
      setIaStep(0);
      setIaBanner(true);
      toast({ tone: "success", title: "Pedido sugerido pela IA", desc: "5 SKUs adicionados com base em ruptura 7d, sazonalidade e curva ABC. Revise antes de enviar pra aprovação." });
    }, 2400);
  };

  // Bandeirinhas coloridas pra cada nível de prioridade
  const PRIORIDADES = {
    "Baixa":   { color: "#22d3ee", bg: "rgba(34, 211, 238, 0.12)",  desc: "Pode esperar" },
    "Normal":  { color: "var(--fg-muted)", bg: "var(--panel-2)",     desc: "Fluxo padrão" },
    "Alta":    { color: "var(--warn)", bg: "rgba(245, 158, 11, 0.15)", desc: "Tratar com prioridade" },
    "Urgente": { color: "var(--neg)",  bg: "rgba(239, 68, 68, 0.15)",  desc: "Acionar fornecedor agora" },
  };

  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 seu ERP` });

  return (
    <div className="space-y-6 relative">
      {/* Overlay IA — aparece durante geração via previsão */}
      {iaRunning && (
        <div className="fixed inset-0 z-[50] flex items-center justify-center bg-black/40 backdrop-blur-sm fade-in">
          <div className="panel-hi p-6 max-w-sm w-[90vw] shadow-[var(--shadow-lg)]">
            <div className="flex items-center gap-3 mb-4">
              <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--accent)] to-[var(--accent-2)] flex items-center justify-center text-white" style={{ boxShadow: "0 0 24px var(--accent-glow)" }}>
                <Icon name="wand-sparkles" className="w-5 h-5" />
              </div>
              <div>
                <div className="text-[14px] font-semibold">IA DashM analisando…</div>
                <div className="text-[11px] text-[var(--fg-muted)]">Cruzando dados de previsão, ruptura e curva ABC</div>
              </div>
            </div>
            <div className="space-y-2.5">
              {[
                { step: 1, label: "Analisando 1.240 SKUs ativos" },
                { step: 2, label: "Cruzando ruptura 7d × sazonalidade" },
                { step: 3, label: "Calibrando sugestão por fornecedor" },
              ].map((s) => {
                const done = iaStep > s.step;
                const active = iaStep === s.step;
                return (
                  <div key={s.step} className="flex items-center gap-2.5">
                    <div
                      className={`w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold transition-all shrink-0 ${
                        done
                          ? "bg-[var(--pos)] text-white"
                          : active
                            ? "bg-[var(--accent)] text-white animate-pulse"
                            : "bg-[var(--panel-2)] text-[var(--fg-faint)] border border-[var(--border)]"
                      }`}
                    >
                      {done ? <Icon name="check" className="w-3 h-3" strokeWidth={3} /> : s.step}
                    </div>
                    <span className={`text-[12px] ${done ? "text-[var(--fg-muted)] line-through" : active ? "text-[var(--fg)] font-medium" : "text-[var(--fg-faint)]"}`}>
                      {s.label}
                    </span>
                  </div>
                );
              })}
            </div>
            <div className="mt-4 text-[10px] text-[var(--fg-faint)] text-center">
              Estimativa: ~2 segundos · modelo Ensemble v2.4.1
            </div>
          </div>
        </div>
      )}

      {/* Banner IA — aparece após sugestão completa */}
      {iaBanner && (
        <div className="panel p-3 flex items-center gap-3 fade-in" style={{ background: "linear-gradient(135deg, var(--accent-soft), transparent)", borderColor: "var(--accent)" }}>
          <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-[var(--accent)] to-[var(--accent-2)] flex items-center justify-center text-white shrink-0">
            <Icon name="wand-sparkles" className="w-4 h-4" />
          </div>
          <div className="flex-1 min-w-0">
            <div className="text-[12.5px] font-semibold flex items-center gap-1.5">
              Sugerido pela IA
              <span className="badge badge-accent text-[9px]">ML core · 94% conf.</span>
            </div>
            <div className="text-[11px] text-[var(--fg-muted)]">Pedido pré-preenchido com base em ruptura 7d + sazonalidade + curva ABC. Revise antes de enviar.</div>
          </div>
          <button onClick={() => setIaBanner(false)} className="text-[var(--fg-faint)] hover:text-[var(--fg)] p-1">
            <Icon name="x" className="w-4 h-4" />
          </button>
        </div>
      )}

      <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 o seu ERP.</p>
          </div>
          <div className="flex items-center gap-2">
            <Btn icon="upload" onClick={() => setImportOpen(true)}>Importar XLS</Btn>
            <Btn icon="wand-sparkles" variant="primary" onClick={handleGerarViaPrevisao} disabled={iaRunning}>
              {iaRunning ? "Gerando…" : "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">
          <div className="relative">
            <button
              type="button"
              onClick={() => setPrioridadeOpen(o => !o)}
              className="input w-full flex items-center justify-between gap-2 cursor-pointer"
              style={{ background: PRIORIDADES[prioridade].bg, borderColor: `color-mix(in oklch, ${PRIORIDADES[prioridade].color} 40%, var(--border))` }}
            >
              <span className="flex items-center gap-2">
                <Icon name="flag" className="w-3.5 h-3.5" fill="currentColor" style={{ color: PRIORIDADES[prioridade].color }} />
                <span className="font-semibold" style={{ color: PRIORIDADES[prioridade].color }}>{prioridade}</span>
              </span>
              <Icon name="chevron-down" className="w-3.5 h-3.5 text-[var(--fg-muted)]" />
            </button>
            {prioridadeOpen && (
              <>
                <div className="fixed inset-0 z-20" onClick={() => setPrioridadeOpen(false)} />
                <div className="absolute top-full left-0 right-0 mt-1.5 panel-hi shadow-[var(--shadow-lg)] z-30 fade-in overflow-hidden">
                  {Object.entries(PRIORIDADES).map(([key, cfg]) => (
                    <button
                      key={key}
                      onClick={() => { setPrioridade(key); setPrioridadeOpen(false); }}
                      className="w-full flex items-center gap-2.5 px-3 py-2 text-left hover:bg-[var(--panel-2)] transition-colors"
                    >
                      <Icon name="flag" className="w-3.5 h-3.5 shrink-0" fill="currentColor" style={{ color: cfg.color }} />
                      <div className="flex-1 min-w-0">
                        <div className="text-[12.5px] font-semibold" style={{ color: cfg.color }}>{key}</div>
                        <div className="text-[10px] text-[var(--fg-faint)]">{cfg.desc}</div>
                      </div>
                      {prioridade === key && <Icon name="check" className="w-3.5 h-3.5 text-[var(--accent)]" strokeWidth={3} />}
                    </button>
                  ))}
                </div>
              </>
            )}
          </div>
        </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={`${itemsAnimKey}-${i}`} className="ia-suggest-fade-in" style={{ animationDelay: `${i * 120}ms` }}>
                <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>

      {/* Modal Importar XLS */}
      <Modal
        open={importOpen}
        onClose={() => setImportOpen(false)}
        title="Importar pedido via XLS"
        maxWidth="max-w-xl"
      >
        <div className="space-y-4">
          {/* Drop area */}
          <div
            onClick={() => toast({ tone: "info", title: "Selecione um arquivo XLS", desc: "Arraste aqui ou clique pra escolher do seu computador." })}
            className="border-2 border-dashed border-[var(--border)] rounded-xl p-8 text-center hover:border-[var(--accent)] hover:bg-[var(--accent-soft)] transition-colors cursor-pointer"
          >
            <div className="w-12 h-12 mx-auto rounded-full bg-[var(--accent-soft)] text-[var(--accent)] flex items-center justify-center mb-3">
              <Icon name="upload-cloud" className="w-6 h-6" />
            </div>
            <div className="text-[13px] font-semibold mb-1">Arraste seu arquivo XLS aqui</div>
            <div className="text-[11px] text-[var(--fg-muted)]">ou clique pra selecionar · até 10 MB · formato .xlsx</div>
          </div>

          {/* Modelo */}
          <div className="flex items-center justify-between p-3 rounded-lg border border-[var(--border)] bg-[var(--panel-2)]">
            <div className="flex items-center gap-2.5 min-w-0">
              <Icon name="file-spreadsheet" className="w-4 h-4 text-[var(--accent)] shrink-0" />
              <div className="min-w-0">
                <div className="text-[12px] font-semibold">Não tem um modelo?</div>
                <div className="text-[10.5px] text-[var(--fg-muted)] truncate">Baixe nosso template XLS com colunas SKU, Qtde, Custo, Fornecedor.</div>
              </div>
            </div>
            <Btn icon="download" onClick={handleBaixarModelo}>Baixar modelo</Btn>
          </div>

          {/* Simulação de import */}
          <div className="flex items-center justify-between pt-2 border-t border-[var(--border)]">
            <span className="text-[10.5px] text-[var(--fg-faint)]">Sincronização automática com o seu ERP após importar.</span>
            <Btn variant="primary" icon="check" onClick={handleSimularImport}>Simular importação</Btn>
          </div>
        </div>
      </Modal>
    </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;
  const [scope, setScope] = useState("filial"); // "rede" | "regiao" | "filial"
  const [severity, setSeverity] = useState("todos"); // "todos" | "alta" | "media"
  const toast = useToast();

  // Atribuição determinística de região por filial
  const regioes = ["Sudeste", "Sudeste", "Sul", "Sul", "Nordeste", "Centro-Oeste"];

  // Agrupamento dinâmico baseado no scope
  const mapData = (() => {
    if (scope === "filial") {
      return MOCK.coverage.map((c, i) => ({ ...c, key: c.loja, label: c.loja, idx: i }));
    }
    if (scope === "regiao") {
      const groups = {};
      MOCK.coverage.forEach((c, i) => {
        const r = regioes[i] || "Sudeste";
        if (!groups[r]) groups[r] = { loja: r, key: r, label: r, rupturaPct: 0, coberturaDias: 0, skusCriticos: 0, faturamentoRisco: 0, count: 0, idx: Object.keys(groups).length };
        groups[r].rupturaPct += c.rupturaPct;
        groups[r].coberturaDias += c.coberturaDias;
        groups[r].skusCriticos += c.skusCriticos;
        groups[r].faturamentoRisco += c.faturamentoRisco;
        groups[r].count += 1;
      });
      return Object.values(groups).map(g => ({
        ...g,
        rupturaPct: g.rupturaPct / g.count,
        coberturaDias: Math.round(g.coberturaDias / g.count),
      }));
    }
    // scope === "rede" — agregado total como 1 card único
    return [{
      key: "rede",
      loja: "Rede consolidada",
      label: "Rede consolidada",
      rupturaPct: rupturaMedia,
      coberturaDias: Math.round(coberturaMedia),
      skusCriticos: totalSkus,
      faturamentoRisco: totalRisco,
      idx: 0,
    }];
  })();

  const handleGerarPedido = () => {
    toast({ tone: "success", title: "Pedido sugerido gerado", desc: "Vá em Cadastro de Pedidos pra revisar e enviar pra aprovação." });
  };
  const handleRepor = (sku) => {
    toast({ tone: "info", title: "Reposição iniciada", desc: `${sku} adicionado ao pedido sugerido.` });
  };

  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={scope} onChange={setScope} />
        </div>
        <div key={scope} className={`grid gap-3 fade-in ${scope === "rede" ? "grid-cols-1" : scope === "regiao" ? "grid-cols-2 lg:grid-cols-4" : "grid-cols-2 lg:grid-cols-3"}`}>
          {mapData.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 yoyRupArr = [-1.4, -3.1, 2.8, -2.2, 4.1, -1.0];
            const yoyCobArr = [3, 8, -4, 12, -2, 5];
            const yoyRup = scope === "filial" ? yoyRupArr[i] : scope === "regiao" ? (yoyRupArr[i % yoyRupArr.length] + (i * 0.3)) : -2.4;
            const yoyCob = scope === "filial" ? yoyCobArr[i] : scope === "regiao" ? yoyCobArr[i % yoyCobArr.length] : 4;
            const scopeIcon = scope === "rede" ? "globe-2" : scope === "regiao" ? "map" : "store";

            return (
              <div key={c.key} 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={scopeIcon} className="w-3.5 h-3.5 text-[var(--fg-muted)]" />
                    <span className="text-[12.5px] font-medium">{c.label}</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={severity} onChange={setSeverity} />
            <Btn icon="zap" variant="primary" onClick={handleGerarPedido}>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];
              const itemSev = rup > 8 ? "alta" : rup > 4 ? "media" : "baixa";
              if (severity === "alta" && itemSev !== "alta") return null;
              if (severity === "media" && itemSev !== "media") return null;
              const sku = p.split(" · ")[0];
              return (
                <tr key={p}>
                  <td className="font-mono text-[11px] text-[var(--fg-faint)]">{sku}</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 onClick={() => handleRepor(sku)} 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 [filtersOpen, setFiltersOpen] = useState(false);
  const [filters, setFilters] = useState({ fornecedor: "Todos", filial: "Todas", valorMin: "", valorMax: "" });
  const toast = useToast();

  const handleCSV = () => {
    toast({ tone: "success", title: "CSV exportado", desc: `${pedidos.length} pedidos · arquivo enviado pra sua pasta de Downloads.` });
  };

  const handleApplyFilters = () => {
    const ativos = [];
    if (filters.fornecedor !== "Todos") ativos.push(`Fornecedor: ${filters.fornecedor}`);
    if (filters.filial !== "Todas") ativos.push(`Filial: ${filters.filial}`);
    if (filters.valorMin) ativos.push(`≥ R$ ${filters.valorMin}`);
    if (filters.valorMax) ativos.push(`≤ R$ ${filters.valorMax}`);
    setFiltersOpen(false);
    if (ativos.length === 0) {
      toast({ tone: "info", title: "Filtros limpos", desc: "Mostrando todos os pedidos." });
    } else {
      toast({ tone: "success", title: `${ativos.length} filtro(s) aplicado(s)`, desc: ativos.join(" · ") });
    }
  };

  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" />
          <div className="relative">
            <Btn icon="filter" onClick={() => setFiltersOpen(o => !o)}>Filtros</Btn>
            {filtersOpen && (
              <>
                <div className="fixed inset-0 z-20" onClick={() => setFiltersOpen(false)} />
                <div className="absolute right-0 top-full mt-2 w-[320px] panel-hi shadow-[var(--shadow-lg)] z-30 fade-in p-4 space-y-3">
                  <div className="text-[10.5px] uppercase tracking-wider text-[var(--fg-muted)] font-semibold">Filtros avançados</div>

                  <div>
                    <label className="text-[10.5px] uppercase tracking-wider text-[var(--fg-faint)] font-semibold">Fornecedor</label>
                    <select
                      value={filters.fornecedor}
                      onChange={(e) => setFilters(f => ({ ...f, fornecedor: e.target.value }))}
                      className="w-full mt-1 px-3 py-1.5 rounded-lg border border-[var(--border)] bg-[var(--panel-2)] text-[12px] focus:border-[var(--accent)] outline-none"
                    >
                      <option>Todos</option>
                      {PH.suppliers.map(s => <option key={s}>{s}</option>)}
                    </select>
                  </div>

                  <div>
                    <label className="text-[10.5px] uppercase tracking-wider text-[var(--fg-faint)] font-semibold">Filial</label>
                    <select
                      value={filters.filial}
                      onChange={(e) => setFilters(f => ({ ...f, filial: e.target.value }))}
                      className="w-full mt-1 px-3 py-1.5 rounded-lg border border-[var(--border)] bg-[var(--panel-2)] text-[12px] focus:border-[var(--accent)] outline-none"
                    >
                      <option>Todas</option>
                      {PH.stores.map(s => <option key={s}>{s}</option>)}
                    </select>
                  </div>

                  <div className="grid grid-cols-2 gap-2">
                    <div>
                      <label className="text-[10.5px] uppercase tracking-wider text-[var(--fg-faint)] font-semibold">Valor mín</label>
                      <input
                        type="number"
                        placeholder="0"
                        value={filters.valorMin}
                        onChange={(e) => setFilters(f => ({ ...f, valorMin: e.target.value }))}
                        className="w-full mt-1 px-3 py-1.5 rounded-lg border border-[var(--border)] bg-[var(--panel-2)] text-[12px] focus:border-[var(--accent)] outline-none"
                      />
                    </div>
                    <div>
                      <label className="text-[10.5px] uppercase tracking-wider text-[var(--fg-faint)] font-semibold">Valor máx</label>
                      <input
                        type="number"
                        placeholder="∞"
                        value={filters.valorMax}
                        onChange={(e) => setFilters(f => ({ ...f, valorMax: e.target.value }))}
                        className="w-full mt-1 px-3 py-1.5 rounded-lg border border-[var(--border)] bg-[var(--panel-2)] text-[12px] focus:border-[var(--accent)] outline-none"
                      />
                    </div>
                  </div>

                  <div className="flex items-center gap-2 pt-2 border-t border-[var(--border)]">
                    <button
                      onClick={() => setFilters({ fornecedor: "Todos", filial: "Todas", valorMin: "", valorMax: "" })}
                      className="text-[11px] text-[var(--fg-muted)] hover:text-[var(--fg)]"
                    >
                      Limpar
                    </button>
                    <div className="flex-1" />
                    <Btn variant="primary" onClick={handleApplyFilters}>Aplicar</Btn>
                  </div>
                </div>
              </>
            )}
          </div>
          <Btn icon="download" onClick={handleCSV}>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.filter((p) => {
              // tab "todos" mostra tudo
              if (tab === "todos") return true;
              // "abertos" = ainda não concluído (qualquer status que não seja recebido)
              if (tab === "abertos") return p.status !== "recebido";
              // "concluidos" = só recebidos
              if (tab === "concluidos") return p.status === "recebido";
              // "atraso" = aprovação ou produção com progresso baixo (simulação)
              if (tab === "atraso") return (p.status === "aprovacao" || p.status === "producao") && p.progress < 50;
              return true;
            }).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() {
  const toast = useToast();
  // Menu de 3 pontinhos — qual alerta tem o menu aberto (índice)
  const [menuOpen, setMenuOpen] = useState(null);
  // Alertas já tratados (lidos/ignorados/repostos) — visualmente atenuados
  const [tratados, setTratados] = useState({});
  const [regrasOpen, setRegrasOpen] = useState(false);
  // Regras automáticas configuráveis
  const [regras, setRegras] = useState([
    { id: "ruptura-7d",       label: "SKU com cobertura < 7 dias",          desc: "Alertar quando estoque cobrir menos de uma semana de vendas.", on: true },
    { id: "ruptura-criticos", label: "SKU crítico zerado em qualquer loja", desc: "Disparar imediato pra SKUs da Curva A sem estoque.",            on: true },
    { id: "fim-semana",       label: "Ruptura > 8% no fim de semana",       desc: "Período de alta demanda exige atenção redobrada.",               on: true },
    { id: "fornecedor-atraso",label: "Pedido em transporte > 5 dias",       desc: "Detectar atrasos de fornecedor antes do impacto em venda.",      on: true },
    { id: "campanha-baixa",   label: "Campanha < 50% da meta",              desc: "Avisar gerente quando execução nas lojas estiver fraca.",         on: false },
    { id: "preco-fora",       label: "Preço fora do range competitivo",     desc: "Comparar markup com benchmark de mercado regional.",              on: false },
  ]);
  const toggleRegra = (id) => setRegras(r => r.map(reg => reg.id === id ? { ...reg, on: !reg.on } : reg));
  const handleSalvarRegras = () => {
    const ativas = regras.filter(r => r.on).length;
    setRegrasOpen(false);
    toast({ tone: "success", title: "Regras salvas", desc: `${ativas} de ${regras.length} regras ativas. Alertas serão recalculados na próxima sincronização.` });
  };

  const handleRepor = (idx, sku) => {
    setTratados(t => ({ ...t, [idx]: "reposto" }));
    setMenuOpen(null);
    toast({ tone: "success", title: "Reposição iniciada", desc: `${sku} adicionado ao pedido sugerido. Vá em Cadastro de Pedidos pra revisar.` });
  };
  const handleMarcarLido = (idx, sku) => {
    setTratados(t => ({ ...t, [idx]: "lido" }));
    setMenuOpen(null);
    toast({ tone: "info", title: "Alerta marcado como lido", desc: sku });
  };
  const handleIgnorar = (idx, sku) => {
    setTratados(t => ({ ...t, [idx]: "ignorado" }));
    setMenuOpen(null);
    toast({ tone: "info", title: "Alerta ignorado", desc: `${sku} silenciado por 7 dias.` });
  };
  const handleDetalhes = (sku) => {
    setMenuOpen(null);
    toast({ tone: "info", title: "Abrir detalhe", desc: `${sku} — histórico, fornecedor, lead time e curva de venda.` });
  };
  const handleMarcarTodosLidos = () => {
    const novo = {};
    PH.products.forEach((_, i) => { novo[i] = "lido"; });
    setTratados(novo);
    toast({ tone: "success", title: "Todos os alertas marcados como lidos", desc: "125 alertas atualizados." });
  };

  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" onClick={handleMarcarTodosLidos}>Marcar todos como lidos</Btn>
            <Btn icon="settings-2" onClick={() => setRegrasOpen(true)}>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)";
            const sku = p.split(" · ")[0];
            const tratamento = tratados[i];
            const isTratado = !!tratamento;
            return (
              <div key={p} className={`px-5 py-3.5 flex items-center gap-4 hover:bg-[var(--panel-2)] transition-colors relative ${isTratado ? "opacity-50" : ""}`}>
                <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)]">{sku}</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>
                    {tratamento && (
                      <span className="badge text-[9px]" style={{ color: tratamento === "reposto" ? "var(--pos)" : "var(--fg-faint)", borderColor: "currentColor" }}>
                        {tratamento === "reposto" ? "✓ reposto" : tratamento === "lido" ? "lido" : "ignorado"}
                      </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" onClick={() => handleRepor(i, sku)} disabled={isTratado}>Repor</Btn>
                <div className="relative">
                  <button
                    onClick={() => setMenuOpen(menuOpen === i ? null : i)}
                    className="text-[var(--fg-faint)] hover:text-[var(--fg)] p-1 rounded hover:bg-[var(--panel-2)]"
                  >
                    <Icon name="more-vertical" className="w-4 h-4" />
                  </button>
                  {menuOpen === i && (
                    <>
                      <div className="fixed inset-0 z-20" onClick={() => setMenuOpen(null)} />
                      <div className="absolute right-0 top-full mt-1 w-[180px] panel-hi shadow-[var(--shadow-lg)] z-30 fade-in overflow-hidden">
                        <button onClick={() => handleMarcarLido(i, sku)} className="w-full flex items-center gap-2 px-3 py-2 text-[12px] text-[var(--fg-muted)] hover:text-[var(--fg)] hover:bg-[var(--panel-2)] text-left">
                          <Icon name="check" className="w-3.5 h-3.5" /> Marcar como lido
                        </button>
                        <button onClick={() => handleIgnorar(i, sku)} className="w-full flex items-center gap-2 px-3 py-2 text-[12px] text-[var(--fg-muted)] hover:text-[var(--fg)] hover:bg-[var(--panel-2)] text-left">
                          <Icon name="bell-off" className="w-3.5 h-3.5" /> Ignorar por 7 dias
                        </button>
                        <button onClick={() => handleDetalhes(sku)} className="w-full flex items-center gap-2 px-3 py-2 text-[12px] text-[var(--fg-muted)] hover:text-[var(--fg)] hover:bg-[var(--panel-2)] text-left border-t border-[var(--border)]">
                          <Icon name="info" className="w-3.5 h-3.5" /> Ver detalhe
                        </button>
                      </div>
                    </>
                  )}
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Modal Regras de alerta */}
      <Modal
        open={regrasOpen}
        onClose={() => setRegrasOpen(false)}
        title="Regras de alerta"
        maxWidth="max-w-2xl"
        footer={
          <>
            <Btn variant="ghost" onClick={() => setRegrasOpen(false)}>Cancelar</Btn>
            <Btn variant="primary" icon="check" onClick={handleSalvarRegras}>Salvar regras</Btn>
          </>
        }
      >
        <div className="space-y-2">
          <p className="text-[12.5px] text-[var(--fg-muted)] mb-3">
            Ative ou desative as regras automáticas que disparam alertas no painel. Você pode ajustar limites finos a qualquer momento.
          </p>
          {regras.map((r) => (
            <div
              key={r.id}
              className={`p-3 rounded-lg border transition-colors ${r.on ? "border-[var(--accent)] bg-[var(--accent-soft)]" : "border-[var(--border)] hover:border-[var(--fg-faint)]"}`}
            >
              <div className="flex items-start gap-3">
                <button
                  onClick={() => toggleRegra(r.id)}
                  className={`relative w-9 h-5 rounded-full transition-colors shrink-0 mt-0.5 ${r.on ? "bg-[var(--accent)]" : "bg-[var(--border)]"}`}
                  style={r.on ? { boxShadow: "0 0 8px var(--accent-glow)" } : {}}
                >
                  <span className={`absolute top-0.5 w-4 h-4 rounded-full bg-white transition-all ${r.on ? "left-[18px]" : "left-0.5"}`} />
                </button>
                <div className="flex-1 min-w-0">
                  <div className="text-[12.5px] font-semibold">{r.label}</div>
                  <div className="text-[11px] text-[var(--fg-muted)] mt-0.5">{r.desc}</div>
                </div>
                {r.on && <span className="badge badge-pos text-[9px]">ativa</span>}
              </div>
            </div>
          ))}
          <div className="mt-4 pt-3 border-t border-[var(--border)] flex items-center justify-between text-[11px]">
            <span className="text-[var(--fg-muted)]">
              <span className="num font-semibold text-[var(--fg)]">{regras.filter(r => r.on).length}</span> de {regras.length} regras ativas
            </span>
            <span className="text-[var(--fg-faint)]">Próxima sincronização em ~15 min</span>
          </div>
        </div>
      </Modal>
    </div>
  );
}

// ============================================================
// CAMPANHAS
// ============================================================
function CampanhasScreen() {
  const [active, setActive] = useState("ativas");
  const [novaOpen, setNovaOpen] = useState(false);
  const [novaForm, setNovaForm] = useState({ nome: "", periodoIni: "", periodoFim: "", meta: "", filiais: [], skuCount: "" });
  const toast = useToast();
  const FILIAIS_OPTS = PH.stores;

  const toggleFilial = (f) => {
    setNovaForm(s => ({
      ...s,
      filiais: s.filiais.includes(f) ? s.filiais.filter(x => x !== f) : [...s.filiais, f]
    }));
  };

  const handleCriarCampanha = (e) => {
    e?.preventDefault();
    if (!novaForm.nome.trim()) {
      toast({ tone: "error", title: "Nome obrigatório", desc: "Dê um nome pra campanha." });
      return;
    }
    if (novaForm.filiais.length === 0) {
      toast({ tone: "error", title: "Selecione filiais", desc: "Marque pelo menos uma filial pra ativar a campanha." });
      return;
    }
    toast({ tone: "success", title: "Campanha criada", desc: `${novaForm.nome} salva como rascunho · ${novaForm.filiais.length} filiais. Ative quando estiver pronto.` });
    setNovaOpen(false);
    setNovaForm({ nome: "", periodoIni: "", periodoFim: "", meta: "", filiais: [], skuCount: "" });
  };

  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" onClick={() => setNovaOpen(true)}>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>

      {/* Modal Nova Campanha */}
      <Modal
        open={novaOpen}
        onClose={() => setNovaOpen(false)}
        title="Nova campanha"
        maxWidth="max-w-xl"
        footer={
          <>
            <Btn variant="ghost" onClick={() => setNovaOpen(false)}>Cancelar</Btn>
            <Btn variant="primary" icon="check" onClick={handleCriarCampanha}>Criar campanha</Btn>
          </>
        }
      >
        <form onSubmit={handleCriarCampanha} className="space-y-3">
          <div>
            <label className="text-[10.5px] uppercase tracking-wider text-[var(--fg-muted)] font-semibold">Nome *</label>
            <input
              type="text"
              value={novaForm.nome}
              onChange={(e) => setNovaForm(f => ({ ...f, nome: e.target.value }))}
              className="w-full mt-1 px-3 py-2 rounded-lg border border-[var(--border)] bg-[var(--panel-2)] text-[13px] focus:border-[var(--accent)] outline-none"
              placeholder="Ex: Liquidação Inverno, Dia das Mães…"
              autoFocus
            />
          </div>

          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="text-[10.5px] uppercase tracking-wider text-[var(--fg-muted)] font-semibold">Início</label>
              <input
                type="date"
                value={novaForm.periodoIni}
                onChange={(e) => setNovaForm(f => ({ ...f, periodoIni: e.target.value }))}
                className="w-full mt-1 px-3 py-2 rounded-lg border border-[var(--border)] bg-[var(--panel-2)] text-[13px] focus:border-[var(--accent)] outline-none"
              />
            </div>
            <div>
              <label className="text-[10.5px] uppercase tracking-wider text-[var(--fg-muted)] font-semibold">Fim</label>
              <input
                type="date"
                value={novaForm.periodoFim}
                onChange={(e) => setNovaForm(f => ({ ...f, periodoFim: e.target.value }))}
                className="w-full mt-1 px-3 py-2 rounded-lg border border-[var(--border)] bg-[var(--panel-2)] text-[13px] focus:border-[var(--accent)] outline-none"
              />
            </div>
          </div>

          <div className="grid grid-cols-2 gap-3">
            <div>
              <label className="text-[10.5px] uppercase tracking-wider text-[var(--fg-muted)] font-semibold">Meta (R$)</label>
              <input
                type="number"
                value={novaForm.meta}
                onChange={(e) => setNovaForm(f => ({ ...f, meta: e.target.value }))}
                className="w-full mt-1 px-3 py-2 rounded-lg border border-[var(--border)] bg-[var(--panel-2)] text-[13px] focus:border-[var(--accent)] outline-none"
                placeholder="500000"
              />
            </div>
            <div>
              <label className="text-[10.5px] uppercase tracking-wider text-[var(--fg-muted)] font-semibold">SKUs participantes</label>
              <input
                type="number"
                value={novaForm.skuCount}
                onChange={(e) => setNovaForm(f => ({ ...f, skuCount: e.target.value }))}
                className="w-full mt-1 px-3 py-2 rounded-lg border border-[var(--border)] bg-[var(--panel-2)] text-[13px] focus:border-[var(--accent)] outline-none"
                placeholder="120"
              />
            </div>
          </div>

          <div>
            <label className="text-[10.5px] uppercase tracking-wider text-[var(--fg-muted)] font-semibold">Filiais *</label>
            <div className="flex flex-wrap gap-1.5 mt-1.5">
              {FILIAIS_OPTS.map((f) => {
                const checked = novaForm.filiais.includes(f);
                return (
                  <button
                    key={f}
                    type="button"
                    onClick={() => toggleFilial(f)}
                    className={`px-2.5 py-1.5 rounded-md text-[11.5px] font-medium border transition-colors ${
                      checked
                        ? "border-[var(--accent)] bg-[var(--accent-soft)] text-[var(--accent)]"
                        : "border-[var(--border)] hover:border-[var(--fg-faint)] text-[var(--fg-muted)]"
                    }`}
                  >
                    {checked && <Icon name="check" className="w-3 h-3 inline mr-1" strokeWidth={3} />}
                    {f}
                  </button>
                );
              })}
            </div>
            <p className="text-[10.5px] text-[var(--fg-faint)] mt-2">Selecione as filiais participantes. Você pode editar depois.</p>
          </div>
        </form>
      </Modal>
    </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"];
  const toast = useToast();

  // Sugestões iniciais — viram state pra poder remover ao aplicar
  const SUGESTOES_INICIAL = [
    { id: "s1", from: "Grupo Delta",   to: "Grupo Alpha", v: 24000, motivo: "previsão -12% Delta · +18% Alpha" },
    { id: "s2", from: "Grupo Épsilon", to: "Grupo Beta",  v: 18500, motivo: "ruptura crítica em Beta" },
    { id: "s3", from: "Reserva geral", to: "Grupo Gama",  v: 32000, motivo: "campanha aprovada · julho" },
  ];
  const [sugestoes, setSugestoes] = useState(SUGESTOES_INICIAL);
  const [aplicandoId, setAplicandoId] = useState(null); // card em estado "aplicando"
  // Realocações aplicadas — somam/subtraem orçado de cada grupo
  const [realocacoes, setRealocacoes] = useState({}); // { "Grupo Alpha": +24000, "Grupo Delta": -24000 }
  // Linhas em destaque pós-aplicação (verde ou vermelho)
  const [linhasDestaque, setLinhasDestaque] = useState({}); // { "Grupo Alpha": "pos", "Grupo Delta": "neg" }

  const handleAplicarRealocacao = (sug) => {
    if (aplicandoId) return;
    setAplicandoId(sug.id);
    setTimeout(() => {
      // Aplica: somar 'to' e subtrair 'from'
      setRealocacoes(prev => ({
        ...prev,
        [sug.from]: (prev[sug.from] || 0) - sug.v,
        [sug.to]:   (prev[sug.to]   || 0) + sug.v,
      }));
      setLinhasDestaque({ [sug.from]: "neg", [sug.to]: "pos" });
      // Remove card da lista
      setSugestoes(arr => arr.filter(s => s.id !== sug.id));
      setAplicandoId(null);
      toast({ tone: "success", title: "Realocação aplicada", desc: `${fmt.money(sug.v, { compact: true })} movidos de ${sug.from} pra ${sug.to}. Orçamento atualizado.` });
      // Limpa destaque após 2.5s
      setTimeout(() => setLinhasDestaque({}), 2500);
    }, 900);
  };

  // OTB rows — orçado vs comprado vs disponível (orçado reflete realocações aplicadas)
  const rows = grupos.map((g, i) => {
    const orcadoBase = 280000 - i * 38000;
    const orcado = orcadoBase + (realocacoes[g] || 0);
    const comprado = orcadoBase * (0.42 + i * 0.08); // comprado fixo (já realizado)
    const recebido = comprado * 0.78;
    const disponivel = orcado - comprado;
    const meta = orcado * 1.04;
    return { grupo: g, orcado, comprado, recebido, disponivel, meta, vendas: orcadoBase * (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;
            const destaque = linhasDestaque[r.grupo];
            const realocVal = realocacoes[r.grupo];
            return (
              <div
                key={r.grupo}
                className={destaque ? `otb-realloc-highlight-${destaque}` : ""}
                style={destaque ? { padding: "0.5rem", borderRadius: "0.5rem" } : {}}
              >
                <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>
                    {realocVal != null && realocVal !== 0 && (
                      <span className="badge text-[9px]" style={{ color: realocVal > 0 ? "var(--pos)" : "var(--neg)", borderColor: "currentColor" }}>
                        {realocVal > 0 ? "+" : ""}{fmt.money(realocVal, { compact: true })} realocado
                      </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">
            {sugestoes.length === 0 && (
              <Empty title="Tudo aplicado!" desc="Todas as sugestões da IA foram processadas. Novas aparecerão na próxima sincronização (~15 min)." />
            )}
            {sugestoes.map((s) => {
              const aplicando = aplicandoId === s.id;
              return (
                <div
                  key={s.id}
                  className={`p-3 rounded-xl border transition-all group ${
                    aplicando
                      ? "border-[var(--accent)] bg-[var(--accent-soft)] otb-card-applying"
                      : "border-[var(--border)] bg-[var(--panel-2)] hover:border-[var(--accent)]"
                  }`}
                >
                  <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
                    onClick={() => handleAplicarRealocacao(s)}
                    disabled={aplicando || aplicandoId !== null}
                    className={`mt-2 text-[11px] font-medium text-[var(--accent)] flex items-center gap-1 transition-opacity ${
                      aplicando ? "opacity-100" : "opacity-0 group-hover:opacity-100"
                    }`}
                  >
                    {aplicando ? (
                      <>
                        <Icon name="loader-2" className="w-3 h-3 animate-spin" /> Aplicando…
                      </>
                    ) : (
                      <>
                        Aplicar realocação <Icon name="check" className="w-3 h-3" />
                      </>
                    )}
                  </button>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}