// Painel Admin — Login + Shell (sidebar + main)

function AdminLogin({ onLogin, onPre2FA, cargos, funcionarios }) {
  const [usuario, setUsuario] = React.useState("");
  const [senha, setSenha] = React.useState("");
  const [erro, setErro] = React.useState(null);
  const [busy, setBusy] = React.useState(false);

  const submit = async (e) => {
    e.preventDefault();
    setErro(null);
    if (window.IKIGAI_API_ENABLED) {
      setBusy(true);
      try {
        const res = await fetch((window.IKIGAI_API || "") + "/admin/auth/login", {
          method: "POST", headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ usuario, senha }),
        }).then((r) => r.json().then((d) => ({ ok: r.ok, d })));
        if (!res.ok) { setErro(res.d.error === "invalid_credentials" ? "Usuário ou senha inválidos." : "Falha ao conectar."); return; }
        if (res.d.precisaTotp) {
          onPre2FA({ tempToken: res.d.tempToken, identificador: usuario, emailMasked: res.d.emailMasked });
          return;
        }
        localStorage.setItem("ikigai_admin_token", res.d.token);
        onLogin({ ...res.d.admin, iniciais: (res.d.admin.nome || "").split(" ").map(n=>n[0]).slice(0,2).join(""), cor: "#1d1d1f" });
      } catch (err) { setErro("Falha ao conectar."); }
      finally { setBusy(false); }
    } else {
      // demo mock
      const adm = (funcionarios || ADMINS).find((a) => a.usuario === usuario.toLowerCase().trim() && a.senha === senha && a.ativo);
      if (!adm) { setErro("Usuário ou senha inválidos."); return; }
      // Se tiver 2FA ativo no localStorage demo, pedir código
      if (IkigaiTOTP.Storage.isAtivo("admin", adm.usuario)) {
        onPre2FA({ tempToken: "demo", identificador: adm.usuario, emailMasked: adm.email.replace(/(.{2}).+(@.+)/, "$1•••$2"), adminMock: adm });
        return;
      }
      onLogin(adm);
    }
  };

  return (
    <div className="adm-login">
      <div className="adm-login-card">
        <div className="adm-login-brand">
          <img src="assets/logo-ikigai.png" alt="Ikigai" style={{ width: 44, height: 44, objectFit: "contain" }}/>
          <div>
            <div style={{ fontFamily: "var(--k-font-display)", fontWeight: 700, fontSize: 16, letterSpacing: "0.04em" }}>IKIGAI</div>
            <div style={{ fontSize: 11, color: "var(--adm-ink-3)", letterSpacing: "0.02em" }}>Painel Administrativo</div>
          </div>
        </div>
        <div className="adm-login-h">Acesso restrito.</div>
        <div className="adm-login-sub">Entre com suas credenciais administrativas.</div>
        <form onSubmit={submit}>
          <div className="adm-field">
            <label>Usuário</label>
            <input value={usuario} onChange={(e) => setUsuario(e.target.value)} placeholder="sensei.yamamoto" />
          </div>
          <div className="adm-field">
            <label>Senha</label>
            <input type="password" value={senha} onChange={(e) => setSenha(e.target.value)} placeholder="••••••••" />
          </div>
          {erro && <div style={{ background: "rgba(198,59,59,0.1)", color: "#a02e2e", padding: 10, borderRadius: 8, fontSize: 12.5, marginBottom: 10 }}>{erro}</div>}
          <button type="submit" className="adm-btn is-primary" style={{ width: "100%", padding: 12, fontSize: 14 }}>Entrar</button>
        </form>

        <div style={{ marginTop: 18, paddingTop: 14, borderTop: "1px solid var(--adm-line)", fontSize: 12, textAlign: "center" }}>
          <a onClick={(e) => { e.preventDefault(); window.location.hash = ""; }} href="#" style={{ color: "var(--adm-ink-3)", textDecoration: "none" }}>‹ Voltar ao site</a>
        </div>
      </div>
    </div>
  );
}

function AdminSidebar({ admin, cargo, isMaster, route, setRoute, onLogout }) {
  const item = (key, label, ico, perm, badge) => {
    if (perm && !adminPode(admin, perm)) return null;
    return (
      <button
        key={key}
        className={"adm-nav-item " + (route === key ? "is-active" : "")}
        onClick={() => setRoute(key)}
      >
        <span className="ico">{ico}</span>
        <span>{label}</span>
        {badge != null && badge > 0 && <span className="badge">{badge}</span>}
      </button>
    );
  };

  return (
    <aside className="adm-side">
      <div className="adm-side-brand">
        <img src="assets/logo-ikigai.png" alt="Ikigai" style={{ width: 36, height: 36, objectFit: "contain", filter: "brightness(0) invert(1)" }}/>
        <div>
          <h1>IKIGAI</h1>
          <p>Admin</p>
        </div>
      </div>

      {item("dashboard", "Dashboard", "▦", "dashboard:read")}

      <div className="adm-nav-section">Pessoas</div>
      {item("socios", "Sócios", "👥", "socios:list")}
      {item("cadastros", "Cadastros pendentes", "✚", "cadastros:approve", ADMIN_CADASTROS.length)}
      {item("graduacoes", "Graduações", "帯", "graduacoes:create")}

      <div className="adm-nav-section">Operação</div>
      {item("aulas", "Aulas", "🥋", "aulas:manage")}
      {item("presencas", "Presenças", "✓", "presencas:create")}
      {item("eventos", "Eventos", "📅", "eventos:create")}

      <div className="adm-nav-section">Financeiro</div>
      {item("mensalidades", "Mensalidades", "$", "mensalidades:read")}
      {item("inadimplencia", "Inadimplência", "!", "mensalidades:read", ADMIN_METRICAS.mensalidadesAtrasadas)}

      <div className="adm-nav-section">Comunicação</div>
      {item("avisos", "Enviar aviso", "📣", "avisos:create")}
      {item("materiais", "Materiais", "📚", "materiais:create")}

      {isMaster && <>
        <div className="adm-nav-section">Administração</div>
        {item("funcionarios", "Funcionários", "👤")}
        {item("cargos", "Cargos & permissões", "🔑")}
        {item("lgpd", "Solicitações LGPD", "⚖️", null, lerRequests().filter((r) => r.status === "pendente").length)}
        {item("auditoria", "Auditoria de acessos", "🔍")}
      </>}

      <div className="adm-nav-section">Conta</div>
      {item("seguranca", "Segurança (2FA)", "🔒", null, IkigaiTOTP.Storage.isAtivo("admin", admin.usuario) ? null : "!")}

      <div className="adm-side-foot">
        <div className="av" style={{ background: admin.cor }}>{admin.iniciais}</div>
        <div style={{ minWidth: 0, flex: 1 }}>
          <div className="nm" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{admin.nome}</div>
          <div className="rl">{cargo?.nome || "—"}</div>
        </div>
        <button className="exit" onClick={onLogout} title="Sair">⏻</button>
      </div>
    </aside>
  );
}

function AdminDenied({ acao }) {
  return (
    <div className="adm-denied">
      <div className="icon">🔒</div>
      <h3>Acesso restrito</h3>
      <p>Seu perfil não tem permissão para acessar esta seção.</p>
      <p style={{ fontSize: 11, marginTop: 6, opacity: 0.6 }}>{acao}</p>
    </div>
  );
}

function AdminApp() {
  const [admin, setAdmin] = React.useState(null);
  const [route, setRoute] = React.useState("dashboard");
  const [cargos, setCargos] = React.useState(CARGOS_INICIAIS);
  const [funcionarios, setFuncionarios] = React.useState(ADMINS);
  // 2FA login state
  const [pre2FA, setPre2FA] = React.useState(null); // { tempToken, identificador, emailMasked, adminMock }
  // 2FA activation modal
  const [show2FAModal, setShow2FAModal] = React.useState(false);

  React.useEffect(() => { window.CARGOS_STATE = cargos; }, [cargos]);

  if (!admin) {
    if (pre2FA) {
      return (
        <div className="adm-login" style={{ display: "grid", placeItems: "center" }}>
          <TwoFAVerify
            escopo="admin"
            tempToken={pre2FA.tempToken}
            identificador={pre2FA.identificador}
            emailMasked={pre2FA.emailMasked}
            onSucesso={(real) => { setAdmin(real || pre2FA.adminMock); setPre2FA(null); }}
            onCancelar={() => setPre2FA(null)}
          />
        </div>
      );
    }
    return <AdminLogin cargos={cargos} funcionarios={funcionarios} onLogin={setAdmin} onPre2FA={setPre2FA} />;
  }

  const cargo = cargos.find((c) => c.id === admin.cargoId);
  const isMaster = cargo?.sistema;
  const guard = (perm, comp) => adminPode(admin, perm) ? comp : <AdminDenied acao={perm} />;

  // ativa/desativa 2FA (atualiza estado local)
  const sync2FA = (ativo) => {
    setFuncionarios(funcionarios.map((f) => f.id === admin.id ? { ...f, totpAtivo: ativo } : f));
    setAdmin({ ...admin, totpAtivo: ativo });
  };

  let page;
  switch (route) {
    case "dashboard":     page = guard("dashboard:read", <AdminDashboard admin={admin} setRoute={setRoute} />); break;
    case "socios":        page = guard("socios:list", <AdminPageSocios />); break;
    case "cadastros":     page = guard("cadastros:approve", <AdminPageCadastros />); break;
    case "graduacoes":    page = guard("graduacoes:create", <AdminPageGraduacoes />); break;
    case "aulas":         page = guard("aulas:manage", <AdminPageAulas />); break;
    case "presencas":     page = guard("presencas:create", <AdminPagePresencas />); break;
    case "eventos":       page = guard("eventos:create", <AdminPageEventos role={admin.cargoId} />); break;
    case "mensalidades":  page = guard("mensalidades:read", <AdminPageMensalidades />); break;
    case "inadimplencia": page = guard("mensalidades:read", <AdminPageInadimplencia />); break;
    case "avisos":        page = guard("avisos:create", <AdminPageAvisos />); break;
    case "materiais":     page = guard("materiais:create", <AdminPageMateriais />); break;
    case "funcionarios":  page = isMaster ? <AdminPageFuncionarios funcionarios={funcionarios} setFuncionarios={setFuncionarios} cargos={cargos} /> : <AdminDenied acao="funcionarios:manage" />; break;
    case "cargos":        page = isMaster ? <AdminPageCargos cargos={cargos} setCargos={setCargos} /> : <AdminDenied acao="funcionarios:manage" />; break;
    case "lgpd":          page = isMaster ? <AdminPageLGPD /> : <AdminDenied acao="lgpd:manage" />; break;
    case "auditoria":     page = isMaster ? <AdminPageAuditoria /> : <AdminDenied acao="lgpd:manage" />; break;
    case "seguranca":     page = <AdminPageSeguranca admin={admin} onAtivar={() => setShow2FAModal(true)} onDesativar={() => sync2FA(false)} />; break;
    default: page = <AdminDashboard admin={admin} setRoute={setRoute} />;
  }

  return (
    <div className="adm-shell">
      <AdminSidebar admin={admin} cargo={cargo} isMaster={isMaster} route={route} setRoute={setRoute} onLogout={() => { if (window.IKIGAI_API_ENABLED) IkigaiAPI.adminLogout(); setAdmin(null); }} />
      <main className="adm-main">{page}</main>
      {show2FAModal && (
        <TwoFAActivation
          escopo="admin"
          identificador={admin.usuario}
          nome={admin.nome}
          onClose={() => setShow2FAModal(false)}
          onAtivado={() => sync2FA(true)}
        />
      )}
    </div>
  );
}

// Página de Segurança do admin
function AdminPageSeguranca({ admin, onAtivar, onDesativar }) {
  const ativo = admin.totpAtivo || IkigaiTOTP.Storage.isAtivo("admin", admin.usuario);
  return (
    <>
      <div className="adm-page-h">
        <div>
          <h1 className="adm-page-title">Segurança</h1>
          <p className="adm-page-sub">Proteja sua conta com autenticação em 2 fatores</p>
        </div>
      </div>
      <div className="adm-panel" style={{ maxWidth: 680 }}>
        <div style={{ display: "flex", alignItems: "flex-start", gap: 18 }}>
          <div style={{ width: 56, height: 56, borderRadius: 14, background: ativo ? "rgba(45,160,106,0.12)" : "rgba(230,168,0,0.12)", display: "grid", placeItems: "center", fontSize: 26, flexShrink: 0 }}>
            {ativo ? "🛡️" : "🔓"}
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 6 }}>
              <h3 style={{ margin: 0, fontSize: 17, fontWeight: 600 }}>Autenticação em 2 fatores</h3>
              {ativo
                ? <span className="adm-chip is-ativo">ativa</span>
                : <span className="adm-chip is-pend">desativada</span>}
            </div>
            <p style={{ fontSize: 14, color: "var(--adm-ink-2)", lineHeight: 1.55, marginBottom: 14 }}>
              {ativo
                ? "Toda vez que você fizer login, será solicitado um código de 6 dígitos do seu aplicativo autenticador. Sua conta está protegida."
                : "Adicione uma camada extra de segurança ao seu acesso. Recomendado para contas administrativas que mexem com dados pessoais e financeiros."}
            </p>
            {!ativo ? (
              <button className="adm-btn is-primary" onClick={onAtivar}>Ativar 2FA</button>
            ) : (
              <div style={{ display: "flex", gap: 8 }}>
                <button className="adm-btn" onClick={() => alert("Em breve: gerar novos códigos de backup.")}>Gerar novos códigos de backup</button>
                <button className="adm-btn is-danger" onClick={() => {
                  if (!confirm("Tem certeza? Sua conta ficará menos protegida.")) return;
                  IkigaiTOTP.Storage.remove("admin", admin.usuario);
                  onDesativar();
                }}>Desativar 2FA</button>
              </div>
            )}
          </div>
        </div>
        {ativo && <div style={{ borderTop: "1px solid var(--adm-line)", marginTop: 18, paddingTop: 14, fontSize: 12, color: "var(--adm-ink-3)" }}>
          App configurado · Códigos válidos por 30 segundos · Suporte a códigos de backup e fallback por e-mail.
        </div>}
      </div>
    </>
  );
}

Object.assign(window, { AdminLogin, AdminSidebar, AdminApp, AdminPageSeguranca });