// Painel Admin — Páginas operacionais

function AdminPageSocios() {
  const [busca, setBusca] = React.useState("");
  const [filtro, setFiltro] = React.useState("todos");
  const { data: socios } = useApiData(IkigaiAPI.adminSocios, ADMIN_SOCIOS);
  const lista = (socios || []).filter((s) => {
    if (filtro !== "todos" && s.status !== filtro) return false;
    if (busca && !(`${s.codigo} ${s.nome} ${s.email}`.toLowerCase().includes(busca.toLowerCase()))) return false;
    return true;
  });

  return (
    <>
      <div className="adm-page-h">
        <div>
          <h1 className="adm-page-title">Sócios</h1>
          <p className="adm-page-sub">{lista.length} de {ADMIN_SOCIOS.length} sócios</p>
        </div>
        <button className="adm-btn is-primary">+ Novo sócio</button>
      </div>
      <div className="adm-toolbar">
        <div className="search">
          <span style={{ color: "var(--adm-ink-4)" }}>🔍</span>
          <input value={busca} onChange={(e) => setBusca(e.target.value)} placeholder="Buscar por nome, código ou e-mail..." />
        </div>
        <select className="filter" value={filtro} onChange={(e) => setFiltro(e.target.value)}>
          <option value="todos">Todos os status</option>
          <option value="ativo">Ativos</option>
          <option value="suspenso">Suspensos</option>
          <option value="inativo">Inativos</option>
        </select>
      </div>
      <div className="adm-panel" style={{ padding: 0, overflow: "hidden" }}>
        <table className="adm-table">
          <thead>
            <tr>
              <th>Código</th><th>Nome</th><th>E-mail</th><th>Faixa</th><th>Status</th><th>Pagamento</th><th></th>
            </tr>
          </thead>
          <tbody>
            {lista.map((s) => (
              <tr key={s.id}>
                <td style={{ fontFamily: "var(--k-font-mono)", fontWeight: 500 }}>#{s.codigo}</td>
                <td className="nm">{s.nome}</td>
                <td>{s.email}</td>
                <td>{s.faixa}</td>
                <td><span className={"adm-chip is-" + s.status}>{s.status}</span></td>
                <td>{s.mensAtraso > 0 ? <span className="adm-chip is-atrasada">{s.mensAtraso} atrasada(s)</span> : <span className="adm-chip is-paga">em dia</span>}</td>
                <td><button className="adm-btn is-sm">Editar</button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}

function AdminPageCadastros() {
  const { data: pendentes, refetch } = useApiData(IkigaiAPI.adminCadastrosPendentes, ADMIN_CADASTROS);
  const lista = pendentes || [];
  const aprovar = async (id) => { if (window.IKIGAI_API_ENABLED) { try { await IkigaiAPI.adminAprovarCadastro(id); refetch(); } catch(_) {} } };
  const recusar = async (id) => { if (window.IKIGAI_API_ENABLED) { try { await IkigaiAPI.adminRecusarCadastro(id); refetch(); } catch(_) {} } };
  return (
    <>
      <div className="adm-page-h">
        <div>
          <h1 className="adm-page-title">Cadastros pendentes</h1>
          <p className="adm-page-sub">{lista.length} solicitações aguardando aprovação</p>
        </div>
      </div>
      <div className="adm-panel">
        {lista.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.telefone} · {c.recebidoEm} · via {c.origem}</div>
            </div>
            <div className="adm-pend-acts">
              <button className="adm-btn is-success is-sm" onClick={() => aprovar(c.id)}>Aprovar</button>
              <button className="adm-btn is-sm">Ver detalhes</button>
              <button className="adm-btn is-danger is-sm" onClick={() => recusar(c.id)}>Recusar</button>
            </div>
          </div>
        ))}
      </div>
    </>
  );
}

function AdminPageGraduacoes() {
  return (
    <>
      <div className="adm-page-h">
        <div>
          <h1 className="adm-page-title">Graduações</h1>
          <p className="adm-page-sub">Promova sócios e gerencie histórico de faixas</p>
        </div>
        <button className="adm-btn is-primary">+ Nova graduação</button>
      </div>
      <div className="adm-panel" style={{ padding: 0, overflow: "hidden" }}>
        <table className="adm-table">
          <thead><tr><th>Código</th><th>Sócio</th><th>Faixa atual</th><th>Aulas na faixa</th><th>Pronto?</th><th></th></tr></thead>
          <tbody>
            {ADMIN_SOCIOS.slice(0, 6).map((s, i) => (
              <tr key={s.id}>
                <td style={{ fontFamily: "var(--k-font-mono)" }}>#{s.codigo}</td>
                <td className="nm">{s.nome}</td>
                <td>{s.faixa}</td>
                <td>{[58, 71, 23, 89, 102, 34][i]}</td>
                <td>{i % 2 === 0 ? <span className="adm-chip is-paga">Apto</span> : <span className="adm-chip is-aberta">Em treino</span>}</td>
                <td><button className="adm-btn is-sm is-primary">Promover</button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}

function AdminPageAulas() {
  return (
    <>
      <div className="adm-page-h">
        <div><h1 className="adm-page-title">Aulas</h1><p className="adm-page-sub">Próximas aulas e capacidade</p></div>
        <button className="adm-btn is-primary">+ Nova aula</button>
      </div>
      <div className="adm-panel" style={{ padding: 0, overflow: "hidden" }}>
        <table className="adm-table">
          <thead><tr><th>Aula</th><th>Quando</th><th>Instrutor</th><th>Local</th><th>Inscritos</th><th></th></tr></thead>
          <tbody>
            {ADMIN_AULAS.map((a) => (
              <tr key={a.id}>
                <td className="nm">{a.titulo}</td>
                <td>{a.data}</td>
                <td>{a.instrutor}</td>
                <td>{a.tatame}</td>
                <td>
                  <span style={{ fontWeight: 600, color: a.inscritos >= a.capacidade ? "var(--adm-red)" : "var(--adm-ink-1)" }}>
                    {a.inscritos}/{a.capacidade}
                  </span>
                </td>
                <td><button className="adm-btn is-sm">Editar</button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}

function AdminPagePresencas() {
  const [aulaId, setAulaId] = React.useState(ADMIN_AULAS[0].id);
  const aula = ADMIN_AULAS.find((a) => a.id === aulaId);
  const [pres, setPres] = React.useState(() => Object.fromEntries(ADMIN_SOCIOS.slice(0, 8).map((s) => [s.id, "presente"])));

  return (
    <>
      <div className="adm-page-h">
        <div><h1 className="adm-page-title">Marcar presenças</h1><p className="adm-page-sub">Selecione a aula e registre os presentes</p></div>
      </div>
      <div className="adm-toolbar">
        <select className="filter" value={aulaId} onChange={(e) => setAulaId(e.target.value)} style={{ minWidth: 280 }}>
          {ADMIN_AULAS.map((a) => <option key={a.id} value={a.id}>{a.titulo} — {a.data}</option>)}
        </select>
        <span style={{ fontSize: 13, color: "var(--adm-ink-3)" }}>{aula.instrutor} · {aula.tatame}</span>
      </div>
      <div className="adm-panel" style={{ padding: 0, overflow: "hidden" }}>
        <table className="adm-table">
          <thead><tr><th>Sócio</th><th>Faixa</th><th>Status</th></tr></thead>
          <tbody>
            {ADMIN_SOCIOS.slice(0, 8).map((s) => (
              <tr key={s.id}>
                <td className="nm">#{s.codigo} {s.nome}</td>
                <td>{s.faixa}</td>
                <td>
                  <div style={{ display: "flex", gap: 6 }}>
                    {["presente", "faltou", "justificada"].map((st) => (
                      <button
                        key={st}
                        className={"adm-btn is-sm " + (pres[s.id] === st ? (st === "presente" ? "is-success" : st === "faltou" ? "is-danger" : "is-primary") : "")}
                        onClick={() => setPres({ ...pres, [s.id]: st })}
                      >{st}</button>
                    ))}
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div style={{ marginTop: 14, display: "flex", justifyContent: "flex-end" }}>
        <button className="adm-btn is-primary">Salvar presenças</button>
      </div>
    </>
  );
}

function AdminPageEventos({ role }) {
  const podeCriar = adminPode(role, "eventos:create");
  const { data: eventos } = useApiData(IkigaiAPI.adminEventos, ADMIN_EVENTOS);
  const lista = eventos || [];
  return (
    <>
      <div className="adm-page-h">
        <div><h1 className="adm-page-title">Eventos</h1><p className="adm-page-sub">Exames, torneios e estágios</p></div>
        {podeCriar && <button className="adm-btn is-primary">+ Novo evento</button>}
      </div>
      <div className="adm-panel" style={{ padding: 0, overflow: "hidden" }}>
        <table className="adm-table">
          <thead><tr><th>Evento</th><th>Tipo</th><th>Data</th><th>Local</th><th>Inscritos</th><th></th></tr></thead>
          <tbody>
            {lista.map((e) => (
              <tr key={e.id}>
                <td className="nm">{e.titulo}</td>
                <td><span className={"adm-chip is-" + e.tipo}>{e.tipo}</span></td>
                <td>{e.data}</td>
                <td>{e.local}</td>
                <td>{e.inscritos}</td>
                <td>{podeCriar && <button className="adm-btn is-sm">Editar</button>}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}

function AdminPageMensalidades() {
  return (
    <>
      <div className="adm-page-h">
        <div><h1 className="adm-page-title">Mensalidades</h1><p className="adm-page-sub">Gerencie cobranças e pagamentos</p></div>
        <button className="adm-btn is-primary">+ Lançar lote do mês</button>
      </div>
      <div className="adm-panel" style={{ padding: 0, overflow: "hidden" }}>
        <table className="adm-table">
          <thead><tr><th>Sócio</th><th>Mês</th><th>Vencimento</th><th>Valor</th><th>Status</th><th></th></tr></thead>
          <tbody>
            {ADMIN_SOCIOS.slice(0, 8).map((s, i) => {
              const status = i === 4 ? "atrasada" : i === 6 ? "aberta" : "paga";
              return (
                <tr key={s.id}>
                  <td className="nm">#{s.codigo} {s.nome}</td>
                  <td>abr 2026</td>
                  <td>10/04/2026</td>
                  <td>R$ 220,00</td>
                  <td><span className={"adm-chip is-" + status}>{status}</span></td>
                  <td>{status !== "paga" && <button className="adm-btn is-sm is-success">Marcar paga</button>}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </>
  );
}

function AdminPageInadimplencia() {
  const { data: inad } = useApiData(IkigaiAPI.adminInadimplentes, ADMIN_INADIMPLENTES);
  const lista = inad || [];
  const total = lista.reduce((a, i) => a + (i.valor || 0), 0);
  return (
    <>
      <div className="adm-page-h">
        <div>
          <h1 className="adm-page-title">Inadimplência</h1>
          <p className="adm-page-sub">{lista.length} pendências · R$ {total.toLocaleString("pt-BR")} a receber</p>
        </div>
        <button className="adm-btn is-primary">Enviar cobrança em lote</button>
      </div>
      <div className="adm-panel" style={{ padding: 0, overflow: "hidden" }}>
        <table className="adm-table">
          <thead><tr><th>Sócio</th><th>Referência</th><th>Valor</th><th>Atraso</th><th></th></tr></thead>
          <tbody>
            {lista.map((i) => (
              <tr key={i.id}>
                <td className="nm">#{i.codigo} {i.nome}</td>
                <td>{i.mes}</td>
                <td>R$ {i.valor.toLocaleString("pt-BR")}</td>
                <td><span className="adm-chip is-atrasada">{i.dias} dias</span></td>
                <td>
                  <div style={{ display: "flex", gap: 6 }}>
                    <button className="adm-btn is-sm">Cobrar</button>
                    <button className="adm-btn is-sm is-success">Marcar paga</button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}

function AdminPageAvisos() {
  const [titulo, setTitulo] = React.useState("");
  const [msg, setMsg] = React.useState("");
  const [alcance, setAlcance] = React.useState("todos");
  const [enviado, setEnviado] = React.useState(false);
  const [busy, setBusy] = React.useState(false);

  const enviar = async () => {
    if (window.IKIGAI_API_ENABLED) {
      setBusy(true);
      try { await IkigaiAPI.adminEnviarAviso({ titulo, mensagem: msg, alcance }); }
      catch (_) {} finally { setBusy(false); }
    }
    setEnviado(true); setTitulo(""); setMsg(""); setTimeout(() => setEnviado(false), 3000);
  };

  return (
    <>
      <div className="adm-page-h">
        <div><h1 className="adm-page-title">Enviar aviso</h1><p className="adm-page-sub">Comunique sócios por e-mail e dentro da área</p></div>
      </div>
      <div className="adm-panel" style={{ maxWidth: 640 }}>
        <div className="adm-field">
          <label>Para quem</label>
          <select value={alcance} onChange={(e) => setAlcance(e.target.value)}>
            <option value="todos">Todos os sócios ativos</option>
            <option value="faixa">Sócios de uma faixa específica</option>
            <option value="socio">Um sócio específico</option>
          </select>
        </div>
        <div className="adm-field">
          <label>Título</label>
          <input value={titulo} onChange={(e) => setTitulo(e.target.value)} placeholder="Ex: Aula de sábado cancelada" />
        </div>
        <div className="adm-field">
          <label>Mensagem</label>
          <textarea rows={6} value={msg} onChange={(e) => setMsg(e.target.value)} placeholder="Escreva a mensagem..." />
        </div>
        {enviado && <div style={{ background: "rgba(45,160,106,0.12)", color: "#1f7a4d", padding: 12, borderRadius: 10, fontSize: 13, marginBottom: 12 }}>Aviso enviado com sucesso!</div>}
        <div style={{ display: "flex", justifyContent: "flex-end", gap: 8 }}>
          <button className="adm-btn">Cancelar</button>
          <button className="adm-btn is-primary" disabled={busy} onClick={enviar}>{busy ? "Enviando..." : "Enviar aviso"}</button>
        </div>
      </div>
    </>
  );
}

function AdminPageMateriais() {
  const mats = [
    { titulo: "Apostila Kihon — fundamentos", tipo: "pdf", tam: "2.4 MB" },
    { titulo: "Kata Heian Shodan — vídeo", tipo: "video", tam: "84 MB" },
    { titulo: "Glossário de termos em japonês", tipo: "pdf", tam: "412 KB" },
    { titulo: "Etiqueta do dojo (Reishiki)", tipo: "pdf", tam: "180 KB" },
  ];
  return (
    <>
      <div className="adm-page-h">
        <div><h1 className="adm-page-title">Materiais didáticos</h1><p className="adm-page-sub">Apostilas, vídeos e glossários</p></div>
        <button className="adm-btn is-primary">+ Subir material</button>
      </div>
      <div className="adm-panel" style={{ padding: 0, overflow: "hidden" }}>
        <table className="adm-table">
          <thead><tr><th>Título</th><th>Tipo</th><th>Tamanho</th><th></th></tr></thead>
          <tbody>
            {mats.map((m, i) => (
              <tr key={i}>
                <td className="nm">{m.titulo}</td>
                <td>{m.tipo}</td>
                <td>{m.tam}</td>
                <td><button className="adm-btn is-sm">Editar</button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}

Object.assign(window, {
  AdminPageSocios, AdminPageCadastros, AdminPageGraduacoes,
  AdminPageAulas, AdminPagePresencas, AdminPageEventos,
  AdminPageMensalidades, AdminPageInadimplencia,
  AdminPageAvisos, AdminPageMateriais,
});