// Painel Admin — Dashboard

function AdminDashboard({ admin, setRoute }) {
  const m = ADMIN_METRICAS;
  const fmt = (n) => "R$ " + n.toLocaleString("pt-BR");
  const maxBar = Math.max(...ADMIN_RECEITA_SEMANAL.map((d) => d.v));
  const maxFaixa = Math.max(...m.porFaixa.map((f) => f.n));

  return (
    <>
      <div className="adm-page-h">
        <div>
          <h1 className="adm-page-title">Olá, {admin.nome.split(" ").slice(0, 2).join(" ")}.</h1>
          <p className="adm-page-sub">Visão geral do dojo · {new Date().toLocaleDateString("pt-BR", { weekday: "long", day: "numeric", month: "long" })}</p>
        </div>
        <span className="adm-role-badge" style={{ color: cargoDe(admin).cor }}>
          {cargoDe(admin).nome}
        </span>
      </div>

      {/* Métricas principais */}
      <div className="adm-metrics">
        <div className="adm-metric is-blue">
          <div className="label">Sócios ativos</div>
          <div>
            <div className="value">{m.sociosAtivos}</div>
            <div className="delta">+12 nos últimos 30 dias</div>
          </div>
        </div>
        <div className="adm-metric is-green">
          <div className="label">Receita do mês</div>
          <div>
            <div className="value">{fmt(m.receitaMes)}</div>
            <div className="delta">de {fmt(m.receitaPrevista)} previstos</div>
          </div>
        </div>
        <div className="adm-metric is-red">
          <div className="label">Inadimplência</div>
          <div>
            <div className="value">{m.mensalidadesAtrasadas}</div>
            <div className="delta">mensalidades atrasadas</div>
          </div>
        </div>
        <div className="adm-metric is-yellow">
          <div className="label">Cadastros pendentes</div>
          <div>
            <div className="value">{m.sociosPendentes}</div>
            <div className="delta">aguardando aprovação</div>
          </div>
        </div>
        <div className="adm-metric is-purple">
          <div className="label">Frequência média</div>
          <div>
            <div className="value">{m.frequenciaMedia}%</div>
            <div className="delta">nas últimas 4 semanas</div>
          </div>
        </div>
        <div className="adm-metric is-dark">
          <div className="label">Eventos próximos</div>
          <div>
            <div className="value">{m.eventosFuturos}</div>
            <div className="delta">{m.totalAulas} aulas agendadas</div>
          </div>
        </div>
      </div>

      <div className="adm-grid-2">
        <div className="adm-panel">
          <div className="adm-panel-h">
            <h3>Receita esta semana</h3>
            <span style={{ fontSize: 12, color: "var(--adm-ink-3)" }}>Total: {fmt(ADMIN_RECEITA_SEMANAL.reduce((a, d) => a + d.v, 0))}</span>
          </div>
          <div className="adm-chart-bars">
            {ADMIN_RECEITA_SEMANAL.map((d) => (
              <div key={d.dia} className="bar" style={{ height: `${(d.v / maxBar) * 100}%` }}>
                <span className="val">{(d.v / 1000).toFixed(1)}k</span>
                <span className="lbl">{d.dia}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="adm-panel">
          <div className="adm-panel-h"><h3>Distribuição por faixa</h3></div>
          <div className="adm-faixas">
            {m.porFaixa.map((f) => (
              <div key={f.faixa} className="adm-faixa-row">
                <span className="nm">{f.faixa}</span>
                <div className="bar-wrap">
                  <div className="bar" style={{ width: `${(f.n / maxFaixa) * 100}%`, background: f.cor, border: `1px solid ${f.borda}` }} />
                </div>
                <span className="nb">{f.n}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="adm-grid-2">
        <div className="adm-panel">
          <div className="adm-panel-h">
            <h3>Cadastros pendentes</h3>
            <a className="link" onClick={(e) => { e.preventDefault(); setRoute("cadastros"); }} href="#">Ver todos ›</a>
          </div>
          {ADMIN_CADASTROS.slice(0, 3).map((c) => (
            <div key={c.id} className="adm-pend">
              <div className="adm-pend-av">{c.nome.split(" ").map((n) => n[0]).slice(0, 2).join("")}</div>
              <div className="adm-pend-info">
                <div className="nm">{c.nome}</div>
                <div className="meta">{c.email} · {c.recebidoEm}</div>
              </div>
              <div className="adm-pend-acts">
                <button className="adm-btn is-success is-sm">Aprovar</button>
                <button className="adm-btn is-sm">Recusar</button>
              </div>
            </div>
          ))}
        </div>

        <div className="adm-panel">
          <div className="adm-panel-h">
            <h3>Próximos eventos</h3>
            <a className="link" onClick={(e) => { e.preventDefault(); setRoute("eventos"); }} href="#">Gerenciar ›</a>
          </div>
          {ADMIN_EVENTOS.map((e) => (
            <div key={e.id} style={{ display: "flex", justifyContent: "space-between", padding: "10px 0", borderBottom: "1px solid var(--adm-line-soft)" }}>
              <div>
                <div style={{ fontSize: 13.5, fontWeight: 500, color: "var(--adm-ink-1)" }}>{e.titulo}</div>
                <div style={{ fontSize: 11.5, color: "var(--adm-ink-3)", marginTop: 2 }}>{e.data} · {e.local}</div>
              </div>
              <div style={{ textAlign: "right" }}>
                <span className={"adm-chip is-" + e.tipo}>{e.tipo}</span>
                <div style={{ fontSize: 11, color: "var(--adm-ink-3)", marginTop: 4 }}>{e.inscritos} inscritos</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

Object.assign(window, { AdminDashboard });