// New screens: Daily Closing, Sales Forecast, E-commerce

const { useState: useStateN, useMemo: useMemoN, useEffect: useEffectN } = React;

// ─────────────────────────────────────────────────────────────────────────────
// DAILY CLOSING (Fechamento Diário)
// ─────────────────────────────────────────────────────────────────────────────
function genDailyClosing(year, month, day) {
  const seed = year * 10000 + (month + 1) * 100 + day;
  const r = (n) => {
    let t = (seed + n * 17) + 0x6D2B79F5;
    t = Math.imul(t ^ (t >>> 15), t | 1);
    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
  const date = new Date(year, month, day);
  const isWeekend = date.getDay() === 0 || date.getDay() === 6;
  const factor = isWeekend ? 0.4 : 1.0;

  const physical = Math.round((38_000 + r(1) * 22_000) * factor);
  const online = Math.round((18_000 + r(2) * 14_000) * factor);
  const revenue = physical + online;
  const orders = Math.round((45 + r(3) * 35) * factor) + Math.round((85 + r(4) * 40) * factor);
  const ticket = Math.round(revenue / orders);
  const grossMargin = 0.30 + r(5) * 0.08;

  const byStore = [
    { name: "Matriz · Ponta Grossa", rev: Math.round(physical * 0.52), orders: Math.round(orders * 0.36), color: "var(--cefeq-blue)" },
    { name: "Filial · Castro",       rev: Math.round(physical * 0.28), orders: Math.round(orders * 0.20), color: "#0EA5E9" },
    { name: "Assistência técnica", rev: Math.round(physical * 0.08), orders: Math.round(orders * 0.10), color: "#06B6D4" },
    { name: "E-commerce",            rev: online,                       orders: Math.round(orders * 0.29), color: "var(--cefeq-yellow-deep)" },
  ];

  const byPayment = [
    { name: "Cartão crédito",    value: Math.round(revenue * 0.42), color: "var(--cefeq-blue)" },
    { name: "PIX",               value: Math.round(revenue * 0.26), color: "#10B981" },
    { name: "Boleto / Faturado", value: Math.round(revenue * 0.18), color: "#F59E0B" },
    { name: "Dinheiro",          value: Math.round(revenue * 0.08), color: "#8B5CF6" },
    { name: "Cartão débito",     value: Math.round(revenue * 0.06), color: "#EF4444" },
  ];

  const bySeller = window.MOCK.SELLERS.slice(0, 6).map((s, i) => ({
    name: s.name,
    rev: Math.round(revenue * (0.18 - i * 0.022)),
    orders: Math.round(orders * (0.16 - i * 0.018)),
  }));

  // Sample transactions of the day
  const txTypes = [
    "Cliente · Construtora",
    "Cliente · Marcenaria",
    "Cliente · Oficina Mecânica",
    "Venda balcão · CPF",
    "E-commerce · Pedido",
    "Cliente · Reformas",
    "Cliente · Industrial",
    "Cliente · Empreiteira",
  ];
  const txCount = 12 + Math.floor(r(20) * 8);
  const transactions = Array.from({ length: txCount }, (_, i) => ({
    id: `${day}${pad(i, 3)}`,
    time: `${pad(8 + Math.floor(r(30+i) * 11))}:${pad(Math.floor(r(40+i) * 60))}`,
    desc: txTypes[Math.floor(r(50+i) * txTypes.length)] + " " + ["Aurora","Boa Vista","Centro","Vila","São José","Industrial","Comercial"][Math.floor(r(60+i)*7)],
    seller: window.MOCK.SELLERS[Math.floor(r(70+i) * window.MOCK.SELLERS.length)].name,
    payment: byPayment[Math.floor(r(80+i) * byPayment.length)].name,
    value: Math.round(150 + r(90+i) * 4000),
    items: 1 + Math.floor(r(100+i) * 8),
  })).sort((a, b) => b.time.localeCompare(a.time));

  return { revenue, physical, online, orders, ticket, grossMargin, byStore, byPayment, bySeller, transactions };
}
function pad(n, w = 2) { return String(n).padStart(w, "0"); }

function DailyClosingScreen({ embedded = false }) {
  const today = new Date(); // Hoje real
  const [date, setDate] = useStateN(today);
  const [closed, setClosed] = useStateN(false);
  const [txDetail, setTxDetail] = useStateN(null);
  const [toastNode, showToast] = useToast();

  const data = useMemoN(() => genDailyClosing(date.getFullYear(), date.getMonth(), date.getDate()), [date]);
  const yesterday = new Date(date.getTime() - 86400000);
  const yesterdayData = useMemoN(() => genDailyClosing(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate()), [date]);
  const lastWeek = new Date(date.getTime() - 7 * 86400000);
  const lastWeekData = useMemoN(() => genDailyClosing(lastWeek.getFullYear(), lastWeek.getMonth(), lastWeek.getDate()), [date]);

  const deltaYesterday = (data.revenue - yesterdayData.revenue) / yesterdayData.revenue;
  const deltaLastWeek = (data.revenue - lastWeekData.revenue) / lastWeekData.revenue;

  function prevDay() { setDate(new Date(date.getTime() - 86400000)); setClosed(false); }
  function nextDay() { setDate(new Date(date.getTime() + 86400000)); setClosed(false); }

  const dateLabel = date.toLocaleDateString("pt-BR", { weekday: "long", day: "numeric", month: "long", year: "numeric" });
  const isToday = date.toDateString() === today.toDateString();

  return (
    <div className={embedded ? "" : "page"}>
      {!embedded && (
        <div className="page-head">
          <div>
            <div className="muted">Tesouraria · Fechamento operacional</div>
            <h2 style={{ margin: 0, fontWeight: 600 }}>Fechamento diário</h2>
          </div>
          <div className="page-head-actions">
            <div className="seg-control">
              <button className="seg-btn" onClick={prevDay}><Icon name="chevron" size={12} style={{transform:"rotate(180deg)"}}/></button>
              <button className="seg-btn active" style={{ textTransform: "capitalize", minWidth: 240 }}>{dateLabel}</button>
              <button className="seg-btn" onClick={nextDay}><Icon name="chevron" size={12}/></button>
            </div>
            <button className="btn btn-outline" onClick={() => window.openPrintPreview()}><Icon name="printer" size={14}/> Imprimir PDF</button>
            <button className={`btn ${closed ? "btn-ghost" : "btn-primary"}`}
              onClick={() => { setClosed(!closed); showToast(closed ? "Caixa reaberto" : "Caixa fechado com sucesso"); }}>
              <Icon name={closed ? "check" : "flag"} size={14}/>
              {closed ? "Caixa fechado · reabrir" : "Fechar caixa"}
            </button>
          </div>
        </div>
      )}
      {embedded && (
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14, gap: 12, flexWrap: "wrap" }}>
          <div className="muted" style={{ fontSize: 12 }}>
            <Icon name="recurring" size={12} style={{ verticalAlign: "middle", marginRight: 4 }}/>
            Tesouraria · {dateLabel}
          </div>
          <div className="seg-control">
            <button className="seg-btn" onClick={prevDay}><Icon name="chevron" size={12} style={{transform:"rotate(180deg)"}}/></button>
            <button className="seg-btn active" style={{ textTransform: "capitalize", minWidth: 200 }}>{dateLabel}</button>
            <button className="seg-btn" onClick={nextDay}><Icon name="chevron" size={12}/></button>
          </div>
        </div>
      )}

      {closed && (
        <div className="closed-banner">
          <Icon name="check" size={16}/>
          Caixa do dia {date.toLocaleDateString("pt-BR")} fechado às {new Date().toLocaleTimeString("pt-BR", {hour:"2-digit",minute:"2-digit"})} por Felipe Sergio
        </div>
      )}

      <div className="kpi-grid kpi-4">
        <KPI label="Faturamento do dia"
             value={fmtBRL(data.revenue)}
             delta={deltaYesterday}
             sub={`vs. ${yesterday.toLocaleDateString("pt-BR", {weekday:"short"})}`}
             accent="var(--cefeq-blue)" />
        <KPI label="Pedidos"
             value={data.orders}
             delta={(data.orders - yesterdayData.orders) / yesterdayData.orders}
             sub={`${Math.round(data.byStore.find(s=>s.name.includes("E-commerce"))?.orders / data.orders * 100)}% online`} />
        <KPI label="Ticket médio"
             value={fmtBRL(data.ticket)}
             delta={(data.ticket - yesterdayData.ticket) / yesterdayData.ticket} />
        <KPI label="Margem bruta"
             value={(data.grossMargin * 100).toFixed(1).replace(".",",") + "%"}
             delta={data.grossMargin - 0.32}
             sub="estimada" accent="var(--success)" />
      </div>

      <div className="grid-2-1">
        <div className="card">
          <div className="card-head">
            <h3>Por loja / canal</h3>
            <div className="legend">
              <span className="lg-dot" style={{ background: "var(--cefeq-blue)" }}/> Físico
              <span className="lg-dot" style={{ background: "var(--cefeq-yellow-deep)" }}/> E-commerce
            </div>
          </div>
          <div className="closing-bars">
            {data.byStore.map((s, i) => {
              const max = Math.max(...data.byStore.map(x => x.rev));
              return (
                <div key={i} className="cb-row">
                  <div className="cb-label">
                    <div style={{ fontWeight: 600, fontSize: 13 }}>{s.name}</div>
                    <div className="muted" style={{ fontSize: 11 }}>{s.orders} pedidos</div>
                  </div>
                  <div className="cb-bar-wrap">
                    <div className="cb-bar" style={{ width: `${(s.rev / max) * 100}%`, background: s.color }}/>
                    <span className="cb-val mono">{fmtBRL(s.rev)}</span>
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <h3>Forma de pagamento</h3>
          </div>
          <Donut
            data={data.byPayment.map(p => ({ label: p.name, value: p.value, color: p.color }))}
            label="do dia"
            size={180}
          />
          <div className="legend-grid" style={{ gridTemplateColumns: "1fr" }}>
            {data.byPayment.map(p => (
              <div key={p.name} className="lg-row">
                <span className="dot" style={{ background: p.color }}/>
                <span className="lg-lbl">{p.name}</span>
                <span className="lg-val mono">{fmtBRLshort(p.value)}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="grid-2-1">
        <div className="card">
          <div className="card-head">
            <h3>Transações do dia</h3>
            <div className="muted">{data.transactions.length} vendas registradas</div>
          </div>
          <div className="table">
            <div className="table-head">
              <div style={{ width: 60 }}>Hora</div>
              <div style={{ flex: 2 }}>Cliente</div>
              <div style={{ flex: 1.5 }}>Vendedor</div>
              <div style={{ flex: 1 }}>Pagamento</div>
              <div style={{ flex: 0.6 }}>Itens</div>
              <div style={{ flex: 1, textAlign: "right" }}>Valor</div>
            </div>
            {data.transactions.slice(0, 15).map((t) => (
              <button key={t.id} className="table-row" onClick={() => setTxDetail(t)}>
                <div style={{ width: 60 }} className="mono">{t.time}</div>
                <div style={{ flex: 2, fontWeight: 600 }}>{t.desc}</div>
                <div style={{ flex: 1.5 }} className="muted">{t.seller}</div>
                <div style={{ flex: 1 }}>
                  <Pill variant={t.payment.includes("PIX") ? "success" : t.payment.includes("crédito") ? "blue" : "neutral"}>{t.payment}</Pill>
                </div>
                <div style={{ flex: 0.6 }} className="mono" title={`${t.items} ${t.items === 1 ? "item" : "itens"} no pedido`}>
                  <span className="tx-items-pill">{t.items} {t.items === 1 ? "item" : "itens"}</span>
                </div>
                <div style={{ flex: 1, textAlign: "right" }} className="mono" style={{ flex: 1, textAlign: "right", fontFamily: "var(--font-mono)", fontWeight: 600 }}>{fmtBRL(t.value)}</div>
              </button>
            ))}
            {data.transactions.length > 15 && (
              <div className="table-foot muted">Mostrando 15 de {data.transactions.length} · Use exportar para ver todas</div>
            )}
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <h3>Comparativos</h3>
          </div>
          <div className="cmp-block">
            <div className="cmp-row">
              <div className="cmp-label">
                <div style={{ fontWeight: 600 }}>Ontem</div>
                <div className="muted" style={{ fontSize: 11, textTransform: "capitalize" }}>{yesterday.toLocaleDateString("pt-BR", {weekday:"long", day:"numeric", month:"short"})}</div>
              </div>
              <div className="cmp-val">
                <div className="mono" style={{ fontWeight: 700 }}>{fmtBRL(yesterdayData.revenue)}</div>
                <span className={`mini-delta ${deltaYesterday>=0?"up":"down"}`}>{fmtPct(deltaYesterday)}</span>
              </div>
            </div>
            <div className="cmp-row">
              <div className="cmp-label">
                <div style={{ fontWeight: 600 }}>Mesmo dia · semana anterior</div>
                <div className="muted" style={{ fontSize: 11, textTransform: "capitalize" }}>{lastWeek.toLocaleDateString("pt-BR", {weekday:"long", day:"numeric", month:"short"})}</div>
              </div>
              <div className="cmp-val">
                <div className="mono" style={{ fontWeight: 700 }}>{fmtBRL(lastWeekData.revenue)}</div>
                <span className={`mini-delta ${deltaLastWeek>=0?"up":"down"}`}>{fmtPct(deltaLastWeek)}</span>
              </div>
            </div>
            <div className="cmp-row">
              <div className="cmp-label">
                <div style={{ fontWeight: 600 }}>Meta diária do mês</div>
                <div className="muted" style={{ fontSize: 11 }}>R$ 73.000 (Set/26)</div>
              </div>
              <div className="cmp-val">
                <div className="mono" style={{ fontWeight: 700 }}>{Math.round(data.revenue / 73_000 * 100)}%</div>
                <span className={`mini-delta ${data.revenue >= 73_000 ? "up" : "down"}`}>
                  {data.revenue >= 73_000 ? "Acima da meta" : "Abaixo da meta"}
                </span>
              </div>
            </div>
          </div>

          <div className="card-head" style={{ marginTop: 16 }}>
            <h3 style={{ fontSize: 13 }}>Top vendedores do dia</h3>
          </div>
          <RankBars items={data.bySeller} secondaryKey="orders" secondaryFormat={(v) => `${v} pedidos`} />
        </div>
      </div>

      <Modal open={!!txDetail} onClose={() => setTxDetail(null)} wide
        title={txDetail?.desc}
        subtitle={txDetail ? `Transação #${txDetail.id} · ${txDetail.time}` : ""}
        footer={<button className="btn btn-primary">Ver NF-e completa</button>}>
        {txDetail && (
          <>
            <div className="modal-kpi-row">
              <div className="mk"><div className="muted">Valor</div><div className="mk-v">{fmtBRL(txDetail.value)}</div></div>
              <div className="mk"><div className="muted">Itens</div><div className="mk-v">{txDetail.items}</div></div>
              <div className="mk"><div className="muted">Vendedor</div><div className="mk-v" style={{fontSize:14}}>{txDetail.seller}</div></div>
              <div className="mk"><div className="muted">Pagamento</div><div className="mk-v" style={{fontSize:14}}>{txDetail.payment}</div></div>
            </div>
            <div className="modal-section">
              <h4>Itens (simulado)</h4>
              <div className="mini-list">
                {["Furadeira Bosch GSB 550","Broca SDS 8mm · pack 5","Chave de fenda Tramontina","Disco de corte 115mm","Luva de proteção"].slice(0, txDetail.items).map((p, i) => (
                  <div key={i} className="mini-row">
                    <span>{p}</span>
                    <span className="mono">{fmtBRL(Math.round(txDetail.value / txDetail.items * (0.6 + (i%3) * 0.3)))}</span>
                  </div>
                ))}
              </div>
            </div>
          </>
        )}
      </Modal>

      {toastNode}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// SALES FORECAST (Previsão de Vendas)
// ─────────────────────────────────────────────────────────────────────────────
function ForecastScreen() {
  const [scenario, setScenario] = useStateN("realista");
  const [view, setView] = useStateN("monthly"); // monthly | quarterly

  // Historical (Jan-Sep 2026) + forecast (Oct-Dec 2026)
  const months = ["Jan","Fev","Mar","Abr","Mai","Jun","Jul","Ago","Set","Out","Nov","Dez"];
  const actual = [1680, 1590, 1840, 1910, 1960, 2080, 2140, 2190, 2240, null, null, null];
  // forecast in thousands
  const forecast = {
    pessimista:  [null, null, null, null, null, null, null, null, 2240, 2310, 2480, 2750],
    realista:    [null, null, null, null, null, null, null, null, 2240, 2480, 2780, 3210],
    otimista:    [null, null, null, null, null, null, null, null, 2240, 2620, 3010, 3520],
  };
  // confidence band (realistic)
  const upperBand = forecast.realista.map((v, i) => v ? v * 1.12 : null);
  const lowerBand = forecast.realista.map((v, i) => v ? v * 0.88 : null);

  const ytd = actual.filter(v => v).reduce((s, v) => s + v, 0);
  const projectedYearTotal = ytd + (forecast[scenario].slice(9).reduce((s, v) => s + v, 0));
  const meta = 26_000; // in thousands
  const metaDelta = (projectedYearTotal - meta) / meta;

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="muted">Análise preditiva · até Dez/2026</div>
          <h2 style={{ margin: 0, fontWeight: 600 }}>Previsão de vendas</h2>
        </div>
        <div className="page-head-actions">
          <div className="seg-control">
            <button className={`seg-btn ${scenario==="pessimista"?"active":""}`} onClick={()=>setScenario("pessimista")}>Pessimista</button>
            <button className={`seg-btn ${scenario==="realista"?"active":""}`} onClick={()=>setScenario("realista")}>Realista</button>
            <button className={`seg-btn ${scenario==="otimista"?"active":""}`} onClick={()=>setScenario("otimista")}>Otimista</button>
          </div>
          <button className="btn btn-outline" onClick={() => window.openPrintPreview()}><Icon name="printer" size={14}/> Imprimir PDF</button>
        </div>
      </div>

      <div className="forecast-premium-banner">
        <div className="fpb-icon">⚡</div>
        <div className="fpb-content">
          <div className="fpb-title">Módulo Premium · Previsão com Machine Learning</div>
          <div className="fpb-desc">
            Este módulo usa <strong>séries temporais + ML</strong> treinado nos seus dados históricos
            (36+ meses) pra projetar faturamento mês a mês, com banda de confiança e cenários.
            É um <strong>add-on opcional</strong> sobre o painel base — recomendamos ativar quando
            houver maturidade de dados e demanda real por planejamento preditivo.
          </div>
        </div>
      </div>

      <div className="kpi-grid kpi-4">
        <KPI label="Faturamento YTD · realizado" value={fmtBRLshort(ytd * 1000)} delta={0.241} sub="Jan a Set" accent="var(--cefeq-blue)" />
        <KPI label="Projeção fim do ano" value={fmtBRLshort(projectedYearTotal * 1000)} delta={metaDelta} sub={`vs. meta de R$ ${meta/1000}M`} accent="var(--cefeq-yellow-deep)" />
        <KPI label="Crescimento projetado vs. 2025" value="+28,4%" sub="R$ 20,3M em 2025" />
        <KPI label="Confiança do modelo" value="92%" sub="baseado em 36 meses históricos" accent="var(--success)" />
      </div>

      <div className="card">
        <div className="card-head">
          <div>
            <h3>Projeção mensal · cenário {scenario}</h3>
            <div className="muted">Histórico + banda de confiança 88%-112%</div>
          </div>
          <div className="legend">
            <span className="lg-dot" style={{ background: "var(--cefeq-blue)" }}/> Realizado
            <span className="lg-dot" style={{ background: "var(--cefeq-yellow-deep)" }}/> Previsto
            <span className="lg-dot" style={{ background: "var(--border-strong)" }}/> Banda 88–112%
          </div>
        </div>
        <ForecastChart months={months} actual={actual} forecast={forecast[scenario]} upper={upperBand} lower={lowerBand}/>
      </div>

      <div className="grid-2-1">
        <div className="card">
          <div className="card-head">
            <h3>Detalhamento da projeção</h3>
            <div className="muted">Out — Dez 2026 · cenário {scenario}</div>
          </div>
          <div className="table">
            <div className="table-head">
              <div style={{ flex: 1 }}>Mês</div>
              <div style={{ flex: 1.5 }}>Faturamento previsto</div>
              <div style={{ flex: 1 }}>Banda inferior</div>
              <div style={{ flex: 1 }}>Banda superior</div>
              <div style={{ flex: 1 }}>vs. mês anterior</div>
            </div>
            {forecast[scenario].slice(9).map((v, i) => {
              const m = months[9 + i];
              const prev = i === 0 ? actual[8] : forecast[scenario][8 + i];
              const growth = (v - prev) / prev;
              return (
                <div key={i} className="table-row">
                  <div style={{ flex: 1, fontWeight: 600 }}>{m}/26</div>
                  <div style={{ flex: 1.5 }} className="mono">{fmtBRL(v * 1000)}</div>
                  <div style={{ flex: 1 }} className="mono muted">{fmtBRLshort(v * 1000 * 0.88)}</div>
                  <div style={{ flex: 1 }} className="mono muted">{fmtBRLshort(v * 1000 * 1.12)}</div>
                  <div style={{ flex: 1 }}><span className={`mini-delta ${growth>=0?"up":"down"}`}>{fmtPct(growth)}</span></div>
                </div>
              );
            })}
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <h3>Drivers da previsão</h3>
            <div className="muted">Fatores considerados</div>
          </div>
          <div className="drivers-list">
            <div className="driver-row">
              <div className="driver-icon up"><Icon name="arrowUp" size={14}/></div>
              <div>
                <div style={{ fontWeight: 600, fontSize: 13 }}>Sazonalidade de fim de ano</div>
                <div className="muted" style={{ fontSize: 11 }}>+18% em Out, +24% em Nov, +42% em Dez · histórico 3 anos</div>
              </div>
            </div>
            <div className="driver-row">
              <div className="driver-icon up"><Icon name="arrowUp" size={14}/></div>
              <div>
                <div style={{ fontWeight: 600, fontSize: 13 }}>Crescimento e-commerce</div>
                <div className="muted" style={{ fontSize: 11 }}>Canal online cresce 38% YoY · puxa Black Friday</div>
              </div>
            </div>
            <div className="driver-row">
              <div className="driver-icon up"><Icon name="arrowUp" size={14}/></div>
              <div>
                <div style={{ fontWeight: 600, fontSize: 13 }}>Black Friday + Natal</div>
                <div className="muted" style={{ fontSize: 11 }}>Nov-Dez normalmente +35% do trimestre</div>
              </div>
            </div>
            <div className="driver-row">
              <div className="driver-icon down"><Icon name="arrowDown" size={14}/></div>
              <div>
                <div style={{ fontWeight: 600, fontSize: 13 }}>Hidráulica em queda</div>
                <div className="muted" style={{ fontSize: 11 }}>-6% no trimestre · pode segurar crescimento</div>
              </div>
            </div>
            <div className="driver-row">
              <div className="driver-icon neutral"><Icon name="settings" size={14}/></div>
              <div>
                <div style={{ fontWeight: 600, fontSize: 13 }}>Inflação setor ferramentas</div>
                <div className="muted" style={{ fontSize: 11 }}>~4,2% YoY · reflete no ticket médio</div>
              </div>
            </div>
            <div className="driver-row">
              <div className="driver-icon neutral"><Icon name="settings" size={14}/></div>
              <div>
                <div style={{ fontWeight: 600, fontSize: 13 }}>Carteira de clientes recorrentes</div>
                <div className="muted" style={{ fontSize: 11 }}>Top 5% concentra 38% do LTV · base previsível</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <h3>Recomendações geradas pelo modelo</h3>
        </div>
        <div className="reco-grid">
          <div className="reco-card">
            <div className="reco-tag" style={{ background: "rgba(15,127,80,0.12)", color: "var(--success)" }}>Oportunidade</div>
            <h4>Antecipar campanhas de Black Friday</h4>
            <p>Histórico mostra que clientes recorrentes compram 2,3× mais quando recebem comunicação 21 dias antes. Sugerimos início em 28/Out.</p>
            <div className="reco-impact">Impacto previsto: <b>+R$ 320k</b> em Novembro</div>
          </div>
          <div className="reco-card">
            <div className="reco-tag" style={{ background: "rgba(255,230,0,0.18)", color: "var(--cefeq-yellow-deep)" }}>Atenção</div>
            <h4>Reforçar estoque de ferramentas elétricas</h4>
            <p>Setor cresce 21% e representa 30% do faturamento. Modelo prevê ruptura de estoque em 12% dos SKUs principais até Nov.</p>
            <div className="reco-impact">Risco: <b>R$ 180k</b> em vendas perdidas</div>
          </div>
          <div className="reco-card">
            <div className="reco-tag" style={{ background: "rgba(30,61,143,0.10)", color: "var(--cefeq-blue)" }}>Estratégico</div>
            <h4>Reposicionar mix de Hidráulica</h4>
            <p>Setor em queda há 2 trimestres. Análise sugere migrar 30% do mix pra marcas premium e revisar fornecedor principal.</p>
            <div className="reco-impact">Recuperação estimada: <b>+R$ 90k/trimestre</b></div>
          </div>
        </div>
      </div>
    </div>
  );
}

function ForecastChart({ months, actual, forecast, upper, lower }) {
  const w = 900, h = 300, padX = 50, padY = 30;
  const allVals = [...actual, ...forecast, ...upper].filter(v => v != null);
  const max = Math.max(...allVals) * 1.05;
  const min = 0;
  const colW = (w - 2 * padX) / (months.length - 1);
  const sx = (i) => padX + i * colW;
  const sy = (v) => h - padY - ((v - min) / (max - min)) * (h - 2 * padY);

  const actualPath = actual.map((v, i) => v != null ? `${i === 0 || actual[i-1] == null ? "M" : "L"}${sx(i)},${sy(v)}` : "").join(" ");
  const forecastPath = forecast.map((v, i) => v != null ? `${i === 0 || forecast[i-1] == null ? "M" : "L"}${sx(i)},${sy(v)}` : "").join(" ");
  const bandPath = upper.map((v, i) => v != null ? `${i === 0 || upper[i-1] == null ? "M" : "L"}${sx(i)},${sy(v)}` : "").join(" ")
    + " " + lower.map((v, i) => v != null ? `L${sx(i)},${sy(v)}` : "").reverse().join(" ") + " Z";

  return (
    <svg viewBox={`0 0 ${w} ${h}`} className="forecast-chart">
      {/* gridlines */}
      {[0.2, 0.4, 0.6, 0.8, 1].map((p, i) => (
        <line key={i} x1={padX} y1={padY + p * (h - 2*padY)} x2={w-padX} y2={padY + p * (h - 2*padY)} stroke="var(--grid-line)"/>
      ))}
      {/* divider between actual and forecast */}
      <line x1={sx(8)} y1={padY} x2={sx(8)} y2={h-padY} stroke="var(--border-strong)" strokeDasharray="4 4"/>
      <text x={sx(8) + 6} y={padY + 10} fill="var(--text-muted)" fontSize="10">Previsto →</text>
      <text x={sx(8) - 6} y={padY + 10} fill="var(--text-muted)" fontSize="10" textAnchor="end">← Realizado</text>

      {/* confidence band */}
      <path d={bandPath} fill="var(--border-strong)" opacity="0.20"/>

      {/* actual line */}
      <path d={actualPath} fill="none" stroke="var(--cefeq-blue)" strokeWidth="2.5"/>
      {actual.map((v, i) => v != null && <circle key={i} cx={sx(i)} cy={sy(v)} r="4" fill="var(--cefeq-blue)"/>)}

      {/* forecast line */}
      <path d={forecastPath} fill="none" stroke="var(--cefeq-yellow-deep)" strokeWidth="2.5" strokeDasharray="6 4"/>
      {forecast.map((v, i) => v != null && i > 8 && <circle key={i} cx={sx(i)} cy={sy(v)} r="4" fill="var(--cefeq-yellow-deep)" stroke="var(--bg-elev)" strokeWidth="2"/>)}

      {/* month labels */}
      {months.map((m, i) => (
        <text key={i} x={sx(i)} y={h - padY + 18} textAnchor="middle" fontSize="10" fill="var(--text-muted)">{m}</text>
      ))}
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// E-COMMERCE
// ─────────────────────────────────────────────────────────────────────────────
const ECOM_RANGE_CONFIG = {
  "7d":  { label: "7 dias",  mult: 0.23, sessions: 13_435, revenue: 205_620, orders: 2_576 },
  "30d": { label: "30 dias", mult: 1.00, sessions: 58_412, revenue: 894_000, orders: 11_204 },
  "90d": { label: "90 dias", mult: 2.85, sessions: 166_474, revenue: 2_547_900, orders: 31_932 },
  "ytd": { label: "YTD",     mult: 8.10, sessions: 473_137, revenue: 7_241_400, orders: 90_752 },
};

function EcommerceScreen() {
  const [tab, setTab] = useStateN("overview");
  const [range, setRange] = useStateN("30d");
  const cfg = ECOM_RANGE_CONFIG[range];

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="muted">Canal · cefeq.com.br · {cfg.label}</div>
          <h2 style={{ margin: 0, fontWeight: 600 }}>E-commerce</h2>
        </div>
        <div className="page-head-actions">
          <div className="seg-control">
            {Object.entries(ECOM_RANGE_CONFIG).map(([k, v]) => (
              <button
                key={k}
                className={`seg-btn ${range === k ? "active" : ""}`}
                onClick={() => setRange(k)}
                type="button"
              >
                {k === "ytd" ? "YTD" : k}
              </button>
            ))}
          </div>
          <button className="btn btn-outline" onClick={() => window.openPrintPreview()}><Icon name="printer" size={14}/> Imprimir PDF</button>
        </div>
      </div>

      <div className="tabs">
        <button className={`tab ${tab==="overview"?"active":""}`} onClick={()=>setTab("overview")}>Visão geral</button>
        <button className={`tab ${tab==="funnel"?"active":""}`} onClick={()=>setTab("funnel")}>Funil de conversão</button>
        <button className={`tab ${tab==="traffic"?"active":""}`} onClick={()=>setTab("traffic")}>Acessos e tráfego</button>
        <button className={`tab ${tab==="products"?"active":""}`} onClick={()=>setTab("products")}>Produtos</button>
      </div>

      {tab === "overview" && <EcomOverview cfg={cfg}/>}
      {tab === "funnel" && <EcomFunnel cfg={cfg}/>}
      {tab === "traffic" && <EcomTraffic cfg={cfg}/>}
      {tab === "products" && <EcomProducts cfg={cfg}/>}
    </div>
  );
}

function EcomOverview({ cfg }) {
  const sessionData = Array.from({ length: 30 }, (_, i) => 1800 + Math.round(Math.sin(i * 0.3) * 200 + Math.random() * 400 + i * 8));
  const fmtK = (n) => n >= 1_000_000 ? `R$ ${(n/1_000_000).toFixed(1).replace(".", ",")}M` : `R$ ${Math.round(n/1000)}K`;
  return (
    <>
      <div className="kpi-grid kpi-4">
        <KPI label={`Sessões (${cfg.label})`} value={cfg.sessions.toLocaleString("pt-BR")} delta={0.22} sparkline={sessionData} sub="usuários únicos" accent="var(--cefeq-blue)" />
        <KPI label="Conversão" value="2,84%" delta={0.18} sub="média do setor: 1,9%" accent="var(--success)" />
        <KPI label="Ticket médio · online" value="R$ 539" delta={0.09} sub="vs. R$ 1.819 físico" />
        <KPI label={`Receita (${cfg.label})`} value={fmtK(cfg.revenue)} delta={0.31} sub={`${cfg.orders.toLocaleString("pt-BR")} pedidos no período`} accent="var(--cefeq-yellow-deep)" />
      </div>

      <div className="grid-2-1">
        <div className="card">
          <div className="card-head">
            <h3>Tráfego diário · 30 dias</h3>
            <div className="legend">
              <span className="lg-dot" style={{ background: "var(--cefeq-blue)" }}/> Sessões
              <span className="lg-dot" style={{ background: "var(--cefeq-yellow-deep)" }}/> Conversões
            </div>
          </div>
          <EcomTrafficChart/>
        </div>
        <div className="card">
          <div className="card-head">
            <h3>Origem do tráfego</h3>
          </div>
          <div className="origin-list">
            {[
              { src: "Busca orgânica (Google)", pct: 38, sess: "22.196", color: "var(--cefeq-blue)" },
              { src: "Direto / URL",            pct: 24, sess: "14.019", color: "var(--cefeq-yellow-deep)" },
              { src: "Mídia paga (Ads)",        pct: 18, sess: "10.514", color: "#10B981" },
              { src: "Redes sociais",           pct: 11, sess:  "6.425", color: "#8B5CF6" },
              { src: "Referência",              pct:  6, sess:  "3.505", color: "#F59E0B" },
              { src: "E-mail / WhatsApp",       pct:  3, sess:  "1.752", color: "#EF4444" },
            ].map(o => (
              <div key={o.src} className="origin-row">
                <div style={{ fontSize: 12, fontWeight: 600 }}>{o.src}</div>
                <div className="origin-bar"><span style={{ width: `${o.pct * 2.5}%`, background: o.color }}/></div>
                <div className="origin-stats">
                  <span className="mono" style={{ fontWeight: 700 }}>{o.pct}%</span>
                  <span className="muted mono" style={{ fontSize: 11 }}>{o.sess}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="grid-1-1">
        <div className="card">
          <div className="card-head">
            <h3>Dispositivo</h3>
          </div>
          <div className="device-grid">
            {[
              { name: "Mobile",  pct: 68, icon: "phone" },
              { name: "Desktop", pct: 27, icon: "overview" },
              { name: "Tablet",  pct:  5, icon: "brands" },
            ].map(d => (
              <div key={d.name} className="device-card">
                <Icon name={d.icon} size={28}/>
                <div className="device-name">{d.name}</div>
                <div className="device-pct mono">{d.pct}%</div>
                <div className="origin-bar"><span style={{ width: `${d.pct}%`, background: "var(--cefeq-blue)" }}/></div>
              </div>
            ))}
          </div>
        </div>
        <div className="card">
          <div className="card-head">
            <h3>Métricas de engajamento</h3>
          </div>
          <div className="metric-grid">
            <div className="metric-cell">
              <div className="muted">Páginas/sessão</div>
              <div className="metric-val">4,8</div>
              <span className="mini-delta up">+0,3 vs. mês ant.</span>
            </div>
            <div className="metric-cell">
              <div className="muted">Tempo médio</div>
              <div className="metric-val">3:42</div>
              <span className="mini-delta up">+8%</span>
            </div>
            <div className="metric-cell">
              <div className="muted">Taxa de rejeição</div>
              <div className="metric-val">38%</div>
              <span className="mini-delta down">−4 p.p.</span>
            </div>
            <div className="metric-cell">
              <div className="muted">Carrinho abandonado</div>
              <div className="metric-val">62%</div>
              <span className="mini-delta down">−2 p.p.</span>
            </div>
            <div className="metric-cell">
              <div className="muted">Sessões / usuário</div>
              <div className="metric-val">1,8</div>
              <span className="mini-delta up">+12%</span>
            </div>
            <div className="metric-cell">
              <div className="muted">Novos vs. recorrentes</div>
              <div className="metric-val">42 / 58%</div>
              <span className="muted" style={{ fontSize: 10 }}>boa retenção</span>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

function EcomFunnel({ cfg }) {
  const m = cfg ? cfg.mult : 1;
  const steps = [
    { name: "Visitas",                count: Math.round(58412 * m), color: "var(--cefeq-blue)" },
    { name: "Visualizaram produto",   count: Math.round(28840 * m), color: "#2B40C2" },
    { name: "Adicionaram ao carrinho",count: Math.round(7842 * m),  color: "#4570C7" },
    { name: "Iniciaram checkout",     count: Math.round(4612 * m),  color: "#6A8FE0" },
    { name: "Finalizaram a compra",   count: Math.round(1659 * m),  color: "var(--cefeq-yellow-deep)" },
  ];
  const total = steps[0].count;
  return (
    <>
      <div className="kpi-grid kpi-4">
        <KPI label="Conversão geral" value="2,84%" delta={0.18} sub={`${fmtInt(steps[4].count)} de ${fmtInt(total)} visitas`} accent="var(--success)" />
        <KPI label="Add to cart rate" value="13,4%" delta={0.06} sub="benchmark setor: 9-11%" />
        <KPI label="Checkout abandono" value="64,0%" delta={-0.04} sub="oportunidade clara" accent="var(--warn)" />
        <KPI label="Tempo médio até compra" value="3 dias" sub="primeira visita → compra" />
      </div>

      <div className="card">
        <div className="card-head">
          <h3>Funil de conversão · {cfg ? cfg.label : "30 dias"}</h3>
          <div className="muted">Etapa a etapa · com taxa de conversão entre cada uma</div>
        </div>
        <div className="funnel">
          {steps.map((s, i) => {
            const pct = (s.count / total) * 100;
            const stepConv = i > 0 ? (s.count / steps[i-1].count) * 100 : 100;
            return (
              <div key={s.name} className="funnel-row">
                <div className="funnel-bar-wrap">
                  <div className="funnel-bar" style={{ width: `${pct}%`, background: s.color }}>
                    <span className="funnel-bar-label">{s.name}</span>
                    <span className="funnel-bar-count mono">{fmtInt(s.count)}</span>
                  </div>
                </div>
                {i > 0 && (
                  <div className="funnel-conv">
                    <span className={`mini-delta ${stepConv > 50 ? "up" : stepConv > 25 ? "" : "down"}`}>
                      {stepConv.toFixed(1).replace(".",",")}%
                    </span>
                    <span className="muted" style={{ fontSize: 10 }}>conv. da etapa anterior</span>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>

      <div className="grid-2-1">
        <div className="card">
          <div className="card-head">
            <h3>Onde estão perdendo conversão</h3>
          </div>
          <div className="loss-list">
            <div className="loss-row">
              <div className="loss-step">Carrinho → Checkout</div>
              <div className="loss-val">41% de abandono</div>
              <div className="loss-hint">Investigar custos de frete e tempo de entrega</div>
            </div>
            <div className="loss-row">
              <div className="loss-step">Checkout → Pagamento</div>
              <div className="loss-val">64% de abandono</div>
              <div className="loss-hint">Adicionar PIX e parcelamento sem juros pode reduzir</div>
            </div>
            <div className="loss-row">
              <div className="loss-step">Visita → Produto</div>
              <div className="loss-val">51% saem na home</div>
              <div className="loss-hint">Melhorar busca interna e navegação por categoria</div>
            </div>
          </div>
        </div>
        <div className="card">
          <div className="card-head">
            <h3>Top produtos no funil</h3>
            <div className="muted">Mais visualizados</div>
          </div>
          <RankBars
            items={[
              { name: "Furadeira Bosch GSB 550 RE", rev: 8420, color: "var(--cefeq-blue)" },
              { name: "Esmerilhadeira Makita 4-1/2", rev: 6210, color: "var(--cefeq-blue)" },
              { name: "Parafusadeira Vonder PIV 320", rev: 5180, color: "var(--cefeq-blue)" },
              { name: "Serra circular DeWalt 7-1/4", rev: 4320, color: "var(--cefeq-blue)" },
              { name: "Trena Tramontina 5m", rev: 3940, color: "var(--cefeq-blue)" },
            ]}
            format={(v) => `${fmtInt(v)} views`}
          />
        </div>
      </div>
    </>
  );
}

function EcomTraffic({ cfg }) {
  const m = cfg ? cfg.mult : 1;
  return (
    <>
      <div className="kpi-grid kpi-4">
        <KPI label={`Sessões (${cfg ? cfg.label : "30d"})`} value={Math.round(58412 * m).toLocaleString("pt-BR")} delta={0.22} />
        <KPI label="Usuários únicos" value={Math.round(32184 * m).toLocaleString("pt-BR")} delta={0.18} />
        <KPI label="Page views" value={Math.round(280348 * m).toLocaleString("pt-BR")} delta={0.27} />
        <KPI label="Páginas/sessão" value="4,8" delta={0.07} sub="média (não varia com período)" />
      </div>

      <div className="card">
        <div className="card-head">
          <h3>Sessões por dia · {cfg ? cfg.label : "30 dias"}</h3>
        </div>
        <EcomTrafficChart big/>
      </div>

      <div className="grid-2-1">
        <div className="card">
          <div className="card-head">
            <h3>Horário de pico</h3>
            <div className="muted">Sessões por hora do dia (média)</div>
          </div>
          <HourlyTraffic/>
        </div>
        <div className="card">
          <div className="card-head">
            <h3>Páginas mais acessadas</h3>
          </div>
          <div className="page-list">
            {[
              { url: "/", title: "Home", views: 48_212, time: "1:24" },
              { url: "/ferramentas-eletricas", title: "Ferramentas elétricas", views: 32_408, time: "2:38" },
              { url: "/p/furadeira-bosch-gsb-550", title: "Furadeira Bosch GSB 550", views: 18_242, time: "3:12" },
              { url: "/categorias", title: "Categorias", views: 14_682, time: "1:48" },
              { url: "/promocoes", title: "Promoções", views: 11_412, time: "2:21" },
              { url: "/p/esmerilhadeira-makita", title: "Esmerilhadeira Makita", views:  9_840, time: "2:54" },
            ].map((p, i) => (
              <div key={i} className="page-row">
                <div>
                  <div style={{ fontSize: 12, fontWeight: 600 }}>{p.title}</div>
                  <div className="muted mono" style={{ fontSize: 10 }}>{p.url}</div>
                </div>
                <div className="page-stats">
                  <span className="mono" style={{ fontWeight: 700 }}>{fmtInt(p.views)}</span>
                  <span className="muted mono" style={{ fontSize: 10 }}>{p.time}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
}

function EcomTrafficChart({ big = false }) {
  const days = 30;
  const data = Array.from({ length: days }, (_, i) => ({
    sessions: 1500 + Math.round(Math.sin(i * 0.4) * 300 + Math.random() * 600 + i * 15),
    conv: Math.round(30 + Math.sin(i * 0.4 + 1) * 8 + Math.random() * 15),
  }));
  const w = 800, h = big ? 280 : 200, padX = 30, padY = 20;
  const maxS = Math.max(...data.map(d => d.sessions));
  const maxC = Math.max(...data.map(d => d.conv));
  const colW = (w - 2 * padX) / (days - 1);
  const sx = (i) => padX + i * colW;
  const sy = (v) => h - padY - (v / maxS) * (h - 2 * padY);
  const sy2 = (v) => h - padY - (v / maxC) * (h - 2 * padY);

  return (
    <svg viewBox={`0 0 ${w} ${h}`} className="ecom-traffic">
      <defs>
        <linearGradient id="trafficFill" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="var(--cefeq-blue)" stopOpacity="0.3"/>
          <stop offset="100%" stopColor="var(--cefeq-blue)" stopOpacity="0"/>
        </linearGradient>
      </defs>
      <path d={data.map((d,i) => `${i===0?"M":"L"}${sx(i)},${sy(d.sessions)}`).join(" ") + ` L${sx(days-1)},${h-padY} L${padX},${h-padY} Z`} fill="url(#trafficFill)"/>
      <path d={data.map((d,i) => `${i===0?"M":"L"}${sx(i)},${sy(d.sessions)}`).join(" ")} fill="none" stroke="var(--cefeq-blue)" strokeWidth="2"/>
      <path d={data.map((d,i) => `${i===0?"M":"L"}${sx(i)},${sy2(d.conv)}`).join(" ")} fill="none" stroke="var(--cefeq-yellow-deep)" strokeWidth="2" strokeDasharray="0"/>
      {[0, 7, 14, 21, 28].map(i => (
        <text key={i} x={sx(i)} y={h - 4} textAnchor="middle" fontSize="9" fill="var(--text-muted)">D{i+1}</text>
      ))}
    </svg>
  );
}

function HourlyTraffic() {
  const hours = Array.from({ length: 24 }, (_, h) => {
    let factor = 0.15;
    if (h >= 9 && h <= 12) factor = 0.6 + (h-9)*0.1;
    if (h >= 13 && h <= 17) factor = 0.8 + (h===14?0.15:0);
    if (h >= 18 && h <= 22) factor = 0.95 - (h-18)*0.1;
    return Math.round(factor * 100);
  });
  const max = Math.max(...hours);
  return (
    <div className="hourly-grid">
      {hours.map((v, h) => (
        <div key={h} className="hourly-col" title={`${h}h: ${v}% do pico`}>
          <div className="hourly-bar" style={{ height: `${(v / max) * 100}%`, background: v > 70 ? "var(--cefeq-yellow-deep)" : "var(--cefeq-blue)" }}/>
          {(h % 3 === 0) && <div className="hourly-lbl">{h}h</div>}
        </div>
      ))}
    </div>
  );
}

function EcomProducts({ cfg }) {
  const products = [
    { name: "Furadeira Bosch GSB 550 RE",      cat: "Elétricas",  views: 8420, sales: 312, conv: 3.7,  rev: 124_800 },
    { name: "Esmerilhadeira Makita 4-1/2",     cat: "Elétricas",  views: 6210, sales: 218, conv: 3.5,  rev:  84_120 },
    { name: "Parafusadeira Vonder PIV 320",    cat: "Elétricas",  views: 5180, sales: 184, conv: 3.6,  rev:  56_120 },
    { name: "Serra circular DeWalt 7-1/4",     cat: "Elétricas",  views: 4320, sales:  92, conv: 2.1,  rev:  68_400 },
    { name: "Trena Tramontina 5m",             cat: "Manuais",    views: 3940, sales: 612, conv: 15.5, rev:  18_360 },
    { name: "Chave combinada Stanley 12 peças", cat: "Manuais",   views: 3210, sales: 184, conv: 5.7,  rev:  32_120 },
    { name: "Capacete EPI Vonder amarelo",     cat: "EPI",        views: 2810, sales: 412, conv: 14.7, rev:  16_480 },
    { name: "Disco corte 115mm · 10 unid.",    cat: "Elétricas",  views: 2640, sales: 894, conv: 33.9, rev:  22_350 },
  ];
  return (
    <div className="card">
      <div className="card-head">
        <h3>Performance dos produtos · 30 dias</h3>
        <div className="muted">Ordenado por receita</div>
      </div>
      <div className="table">
        <div className="table-head">
          <div style={{ flex: 2 }}>Produto</div>
          <div style={{ flex: 1 }}>Categoria</div>
          <div style={{ flex: 1 }}>Views</div>
          <div style={{ flex: 1 }}>Vendas</div>
          <div style={{ flex: 1 }}>Conv.</div>
          <div style={{ flex: 1.2 }}>Receita</div>
        </div>
        {products.map((p, i) => (
          <div key={i} className="table-row">
            <div style={{ flex: 2, fontWeight: 600 }}>{p.name}</div>
            <div style={{ flex: 1 }}><Pill variant="neutral">{p.cat}</Pill></div>
            <div style={{ flex: 1 }} className="mono">{fmtInt(p.views)}</div>
            <div style={{ flex: 1 }} className="mono">{fmtInt(p.sales)}</div>
            <div style={{ flex: 1 }}><span className={`mini-delta ${p.conv > 10 ? "up" : ""}`}>{p.conv.toFixed(1).replace(".",",")}%</span></div>
            <div style={{ flex: 1.2 }} className="mono" style={{ flex: 1.2, fontFamily: "var(--font-mono)", fontWeight: 700 }}>{fmtBRL(p.rev)}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, {
  DailyClosingScreen, ForecastScreen, EcommerceScreen,
});