/* ============================================================
   Dashboard — métricas + gráficos
   ============================================================ */
function StatCard({ icon, label, value, sub, accent }) {
  return (
    <div className="stat">
      <div className="stat-ic" style={{ background: (accent || "#2563eb") + "14", color: accent || "#2563eb" }}>
        <Icon name={icon} size={22} />
      </div>
      <div className="stat-body">
        <span className="stat-label">{label}</span>
        <strong className="stat-value">{value}</strong>
        {sub && <span className="stat-sub">{sub}</span>}
      </div>
    </div>
  );
}

function Dashboard({ go }) {
  const s = useStore();

  const totalClientes = s.clientes.length;
  const totalPontos = s.vendas.reduce((a, v) => a + v.pontos, 0);
  const totalResgates = s.resgates.length;
  const pontosResgatados = s.resgates.reduce((a, r) => a + r.pontos, 0);
  const totalVendas = s.vendas.reduce((a, v) => a + v.valor, 0);

  // Clientes por categoria
  const porCat = DB.TIERS.map((t) => ({
    label: t.label, color: t.color,
    value: s.clientes.filter((c) => DB.categoriaCliente(c.id).key === t.key).length
  }));

  // Pontos gerados nos últimos 6 meses
  const meses = [];
  const now = new Date(DB.todayISO() + "T00:00:00");
  const nomes = ["jan", "fev", "mar", "abr", "mai", "jun", "jul", "ago", "set", "out", "nov", "dez"];
  for (let i = 5; i >= 0; i--) {
    const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
    const key = d.getFullYear() + "-" + String(d.getMonth() + 1).padStart(2, "0");
    const val = s.vendas.filter((v) => v.data.slice(0, 7) === key).reduce((a, v) => a + v.pontos, 0);
    meses.push({ label: nomes[d.getMonth()], value: val });
  }

  // Top clientes por pontos acumulados
  const top = s.clientes.map((c) => ({ c, pts: DB.pontosAcumulados(c.id) }))
    .sort((a, b) => b.pts - a.pts).slice(0, 5);

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1>Dashboard</h1>
          <p className="page-sub">Visão geral do Clube de Recompensas</p>
        </div>
        <Button icon="cart" onClick={() => go("vendas", { novo: true })}>Lançar venda</Button>
      </div>

      <div className="stat-grid">
        <StatCard icon="users" label="Total de clientes" value={DB.formatNum(totalClientes)} sub={DB.formatBRL(totalVendas) + " em vendas"} accent="#2563eb" />
        <StatCard icon="coins" label="Pontos gerados" value={DB.formatNum(totalPontos)} sub="acumulados no clube" accent="#059669" />
        <StatCard icon="swap" label="Total de resgates" value={DB.formatNum(totalResgates)} sub={DB.formatNum(pontosResgatados) + " pts trocados"} accent="#7c3aed" />
        <StatCard icon="gift" label="Prêmios ativos" value={DB.formatNum(s.produtos.filter((p) => p.ativo).length)} sub={DB.formatNum(s.produtos.length) + " cadastrados"} accent="#d97706" />
      </div>

      <div className="dash-grid">
        <section className="card">
          <header className="card-head">
            <div>
              <h3>Pontos gerados por mês</h3>
              <p className="card-sub">Últimos 6 meses</p>
            </div>
          </header>
          <div className="card-pad">
            <BarChart data={meses} accent="#2563eb" />
            <BarLabels data={meses} />
          </div>
        </section>

        <section className="card">
          <header className="card-head">
            <div>
              <h3>Clientes por categoria</h3>
              <p className="card-sub">Classificação automática</p>
            </div>
          </header>
          <div className="card-pad">
            <DonutChart data={porCat} />
          </div>
        </section>
      </div>

      <section className="card">
        <header className="card-head">
          <div>
            <h3>Top clientes</h3>
            <p className="card-sub">Maiores pontuações acumuladas</p>
          </div>
          <Button variant="ghost" size="sm" onClick={() => go("clientes")}>Ver todos <Icon name="chevron" size={15} /></Button>
        </header>
        <div className="rank-list">
          {top.map((row, i) => {
            const cat = DB.categoriaFor(row.pts);
            return (
              <button key={row.c.id} className="rank-row" onClick={() => go("cliente", { id: row.c.id })}>
                <span className="rank-pos">{i + 1}</span>
                <Avatar name={row.c.nome} color={cat.color} />
                <div className="rank-info">
                  <strong>{row.c.nome}</strong>
                  <span>{row.c.documento || row.c.telefone}</span>
                </div>
                <TierBadge tier={cat} size="sm" />
                <span className="rank-pts">{DB.formatNum(row.pts)} <em>pts</em></span>
              </button>
            );
          })}
        </div>
      </section>
    </div>
  );
}

window.Dashboard = Dashboard;