// screen-dashboard.jsx — Executive dashboard with KPIs and charts

function Sparkline({ data, color = "var(--brand-orange)", height = 40 }) {
  const w = 200, h = height;
  if (!data || !data.length) return null;
  const max = Math.max(...data);
  const min = Math.min(...data);
  const range = max - min || 1;
  const step = w / (data.length - 1);
  const points = data.map((v, i) => `${i * step},${h - 2 - ((v - min) / range) * (h - 8)}`).join(" ");
  const fillPoints = `0,${h} ${points} ${w},${h}`;
  return (
    <svg className="sparkline" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none">
      <polygon points={fillPoints} fill={color} fillOpacity="0.12" />
      <polyline points={points} fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function BarChart({ data, height = 220, accentor }) {
  // data: [{ date, total }]
  if (!data || !data.length) return null;
  const max = Math.max(...data.map(d => d.total));
  return (
    <div style={{ display: "flex", alignItems: "flex-end", gap: 4, height, padding: "8px 0" }}>
      {data.map((d, i) => {
        const pct = (d.total / max) * 100;
        const wknd = d.date.getDay() === 0 || d.date.getDay() === 6;
        return (
          <div key={i} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 4, height: "100%", justifyContent: "flex-end" }}>
            <div
              title={`${d.date.toLocaleDateString("pt-BR")}: ${brl(d.total)}`}
              style={{
                width: "100%",
                height: `${pct}%`,
                background: wknd ? "var(--brand-green)" : "var(--brand-orange)",
                borderRadius: "4px 4px 0 0",
                minHeight: 4,
                opacity: 0.95,
              }}
            />
            {i % 5 === 0 && (
              <div style={{ fontSize: 9.5, color: "var(--ink-3)", fontVariantNumeric: "tabular-nums" }}>
                {String(d.date.getDate()).padStart(2, "0")}/{String(d.date.getMonth() + 1).padStart(2, "0")}
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}

function Donut({ data, size = 180 }) {
  const total = data.reduce((s, d) => s + d.pct, 0);
  const r = size / 2 - 10;
  const cx = size / 2, cy = size / 2;
  const circ = 2 * Math.PI * r;
  let offset = 0;
  const colors = {
    loja: "var(--brand-green)",
    ml: "#F7C530",
    shopee: "#EE4D2D",
    magalu: "#0086FF",
    amazon: "#232F3E",
  };
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
      <circle cx={cx} cy={cy} r={r} fill="none" stroke="var(--bg-sunk)" strokeWidth="16" />
      {data.map((d, i) => {
        const len = (d.pct / total) * circ;
        const dash = `${len} ${circ - len}`;
        const dashOffset = -offset;
        offset += len;
        return (
          <circle
            key={d.id}
            cx={cx} cy={cy} r={r}
            fill="none"
            stroke={colors[d.id] || "#999"}
            strokeWidth="16"
            strokeDasharray={dash}
            strokeDashoffset={dashOffset}
            transform={`rotate(-90 ${cx} ${cy})`}
            style={{ transition: "stroke-dasharray .3s" }}
          />
        );
      })}
      <text x={cx} y={cy - 4} textAnchor="middle" style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 800, fill: "var(--ink)" }}>
        {brlShort(data.reduce((s, d) => s + d.value, 0))}
      </text>
      <text x={cx} y={cy + 14} textAnchor="middle" style={{ fontSize: 10.5, fill: "var(--ink-3)", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em" }}>
        este mês
      </text>
    </svg>
  );
}

function DashboardScreen({ onToast, user }) {
  const totalToday = SALES.filter(s => {
    const d = new Date(s.data);
    return d.toDateString() === new Date().toDateString() && s.status !== "cancelada";
  }).reduce((s, x) => s + x.total, 0);

  const monthRev = CHANNEL_SPLIT.reduce((s, x) => s + x.value, 0);
  const sparkData = DAILY_CHART.slice(-12).map(d => d.total);
  const lowStock = PRODUCTS.filter(p => p.stock > 0 && p.stock <= p.min);
  const outStock = PRODUCTS.filter(p => p.stock === 0);

  // Greeting based on time of day + extract a clean first name
  const h = new Date().getHours();
  const cumprimento = h < 12 ? "Bom dia" : h < 18 ? "Boa tarde" : "Boa noite";
  const nomeBruto = user?.nome || "";
  // remove parênteses ("Netto (CEO)" → "Netto"); pega só primeiro nome
  const primeiroNome = nomeBruto.replace(/\s*\([^)]*\)\s*/g, "").trim().split(" ")[0] || "Você";

  return (
    <>
      <div className="page-head">
        <div className="grow">
          <h2>{cumprimento}, {primeiroNome} 👋</h2>
          <div className="muted">Aqui está o resumo da Capivara's hoje — terça, 19 de maio de 2026</div>
        </div>
        <button className="btn"><I.Sync size={14} /> Atualizar</button>
        <button className="btn btn-primary"><I.Chart size={14} /> Relatório completo</button>
      </div>

      {/* KPI Row */}
      <div className="grid-kpi" style={{ marginBottom: 16 }}>
        <div className="kpi">
          <div className="kpi-icon"><I.Cash size={18} /></div>
          <div className="kpi-label">Vendas hoje</div>
          <div className="kpi-value">{brl(totalToday)}</div>
          <div className="kpi-delta up"><I.TrendUp size={12} /> +18,4% vs. ontem</div>
          <Sparkline data={sparkData} />
        </div>

        <div className="kpi">
          <div className="kpi-icon green"><I.Receipt size={18} /></div>
          <div className="kpi-label">Pedidos hoje</div>
          <div className="kpi-value">29</div>
          <div className="kpi-delta up"><I.TrendUp size={12} /> +6 vs. ontem</div>
          <div className="row" style={{ marginTop: 4, fontSize: 11, gap: 8 }}>
            <span className="mp mp-loja">Loja 14</span>
            <span className="mp mp-ml">ML 8</span>
            <span className="mp mp-shopee">Shopee 5</span>
          </div>
        </div>

        <div className="kpi">
          <div className="kpi-icon info"><I.Tag size={18} /></div>
          <div className="kpi-label">Ticket médio</div>
          <div className="kpi-value">{brl(187.40)}</div>
          <div className="kpi-delta up"><I.TrendUp size={12} /> +R$ 12,90 vs. mês ant.</div>
          <Sparkline data={[140,165,150,172,180,175,185,178,182,179,184,187]} color="var(--info)" />
        </div>

        <div className="kpi">
          <div className="kpi-icon warn"><I.Box size={18} /></div>
          <div className="kpi-label">Alertas de estoque</div>
          <div className="kpi-value" style={{ color: "var(--warn)" }}>{lowStock.length + outStock.length}</div>
          <div className="kpi-delta down"><I.Down size={12} /> {outStock.length} sem estoque • {lowStock.length} crítico</div>
        </div>
      </div>

      {/* Main row */}
      <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 16, marginBottom: 16 }}>
        <div className="card">
          <div className="card-header">
            <div className="grow">
              <h3>Vendas dos últimos 30 dias</h3>
              <div className="sub">Movimento diário consolidado — todos os canais</div>
            </div>
            <div className="row" style={{ gap: 14, fontSize: 11.5 }}>
              <span><span className="dot" style={{ background: "var(--brand-orange)" }}></span> Dia útil</span>
              <span><span className="dot" style={{ background: "var(--brand-green)" }}></span> Fim de semana</span>
            </div>
          </div>
          <div className="card-pad">
            <BarChart data={DAILY_CHART} />
          </div>
        </div>

        <div className="card">
          <div className="card-header">
            <h3>Receita por canal</h3>
          </div>
          <div className="card-pad" style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 14 }}>
            <Donut data={CHANNEL_SPLIT} />
            <div style={{ width: "100%", display: "flex", flexDirection: "column", gap: 8 }}>
              {CHANNEL_SPLIT.map(c => (
                <div key={c.id} className="row" style={{ fontSize: 12 }}>
                  <span className={`mp mp-${c.id}`}>{c.label}</span>
                  <span className="grow"></span>
                  <span className="tnum muted">{c.pct}%</span>
                  <span className="tnum" style={{ minWidth: 70, textAlign: "right", fontWeight: 700 }}>{brl(c.value)}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Bottom rows */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
        <div className="card">
          <div className="card-header">
            <div className="grow">
              <h3>Top produtos do mês</h3>
              <div className="sub">Por receita</div>
            </div>
          </div>
          <table className="table">
            <thead>
              <tr>
                <th>Produto</th>
                <th style={{ textAlign: "right", paddingRight: 12 }}>Qtd</th>
                <th>Receita</th>
              </tr>
            </thead>
            <tbody>
              {TOP_PRODUCTS.map(t => {
                const p = findProduct(t.id);
                return (
                  <tr key={t.id}>
                    <td>
                      <div style={{ fontWeight: 600, fontSize: 12.5 }}>{p.name}</div>
                      <div className="muted" style={{ fontSize: 11, fontFamily: "var(--font-mono)" }}>{p.sku}</div>
                    </td>
                    <td className="num" style={{ textAlign: "right", paddingRight: 12, fontWeight: 600 }}>{t.qty}</td>
                    <td className="num" style={{ fontWeight: 700 }}>{brl(t.rev)}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>

        <div className="card">
          <div className="card-header">
            <div className="grow">
              <h3>Pedidos de marketplaces aguardando</h3>
              <div className="sub">{MP_ORDERS.filter(o => o.status === "pago_aguardando").length} pagos esperando expedição</div>
            </div>
            <button className="btn btn-sm">Ver todos</button>
          </div>
          <div className="card-pad" style={{ display: "flex", flexDirection: "column", gap: 0, padding: 0 }}>
            {MP_ORDERS.slice(0, 6).map(o => (
              <div key={o.id} className="row" style={{ padding: "12px 20px", borderBottom: "1px solid var(--line)" }}>
                <span className={`mp mp-${o.mp}`}>{marketplaceById(o.mp).name}</span>
                <div className="grow" style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 12.5, fontWeight: 600 }}>{o.buyer}</div>
                  <div className="muted" style={{ fontSize: 11 }}>{o.id} • {o.when}</div>
                </div>
                <div className="tnum" style={{ fontWeight: 700, fontSize: 13 }}>{brl(o.total)}</div>
                {o.status === "pago_aguardando" && <span className="badge badge-warn">Aguardando</span>}
                {o.status === "etiqueta_pronta" && <span className="badge badge-info">Etiqueta pronta</span>}
                {o.status === "enviado" && <span className="badge badge-ok">Enviado</span>}
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
}

Object.assign(window, { DashboardScreen, Sparkline });