// LGPD — Painel admin para solicitações + auditoria de acessos

const AUDIT_KEY = "ikigai_audit_log";
function lerAuditoria() {
  try { return JSON.parse(localStorage.getItem(AUDIT_KEY)) || []; }
  catch { return []; }
}
function logAcesso(admin, acao, alvo) {
  const logs = lerAuditoria();
  logs.unshift({
    id: "log-" + Date.now() + "-" + Math.random().toString(36).slice(2, 6),
    admin: admin?.nome || "desconhecido",
    adminUsuario: admin?.usuario || "—",
    acao, alvo: alvo || "—",
    quando: new Date().toISOString(),
    ip: "127.0.0.1",
  });
  // Mantém últimos 500
  localStorage.setItem(AUDIT_KEY, JSON.stringify(logs.slice(0, 500)));
}

// Semear alguns logs demo se ainda não houver
(function semearLogs() {
  if (lerAuditoria().length > 0) return;
  const agora = Date.now();
  const demo = [
    { admin: "Mestre Robson", adminUsuario: "admin", acao: "Login no painel admin", alvo: "—", quando: new Date(agora - 60000).toISOString(), ip: "189.x.x.x" },
    { admin: "Marina Costa", adminUsuario: "marina", acao: "Visualizou dados do sócio", alvo: "#0058 Pedro Henrique", quando: new Date(agora - 3600000).toISOString(), ip: "189.x.x.x" },
    { admin: "Paulo Mendes", adminUsuario: "paulo", acao: "Marcou mensalidade como paga", alvo: "#0054 abr/2026", quando: new Date(agora - 7200000).toISOString(), ip: "189.x.x.x" },
    { admin: "Cláudia Tanaka", adminUsuario: "claudia", acao: "Registrou presença", alvo: "Aula Kihon 28/04", quando: new Date(agora - 86400000).toISOString(), ip: "189.x.x.x" },
    { admin: "Marina Costa", adminUsuario: "marina", acao: "Aprovou cadastro pendente", alvo: "Beatriz Almeida", quando: new Date(agora - 172800000).toISOString(), ip: "189.x.x.x" },
    { admin: "Mestre Robson", adminUsuario: "admin", acao: "Editou dados do sócio", alvo: "#0054 Rodrigo Souza", quando: new Date(agora - 259200000).toISOString(), ip: "189.x.x.x" },
    { admin: "Juliana Rocha", adminUsuario: "juliana", acao: "Criou evento", alvo: "Torneio Inter-Dojos", quando: new Date(agora - 345600000).toISOString(), ip: "189.x.x.x" },
    { admin: "Paulo Mendes", adminUsuario: "paulo", acao: "Exportou relatório financeiro", alvo: "Inadimplência abr/2026", quando: new Date(agora - 432000000).toISOString(), ip: "189.x.x.x" },
  ];
  localStorage.setItem(AUDIT_KEY, JSON.stringify(demo));
})();

function formatarData(iso) {
  const d = new Date(iso);
  const diff = Date.now() - d.getTime();
  if (diff < 60000) return "agora há pouco";
  if (diff < 3600000) return `há ${Math.floor(diff / 60000)} min`;
  if (diff < 86400000) return `há ${Math.floor(diff / 3600000)} h`;
  return d.toLocaleString("pt-BR", { day: "2-digit", month: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit" });
}

function AdminPageLGPD() {
  const [requests, setRequests] = React.useState(lerRequests());
  const [filtro, setFiltro] = React.useState("todas");

  React.useEffect(() => {
    const h = () => setRequests(lerRequests());
    window.addEventListener("ikigai-lgpd-requests-changed", h);
    return () => window.removeEventListener("ikigai-lgpd-requests-changed", h);
  }, []);

  const lista = requests.filter((r) => filtro === "todas" || r.status === filtro)
                       .sort((a, b) => new Date(b.criadoEm) - new Date(a.criadoEm));

  const tiposLabel = {
    exclusao: "Exclusão de conta",
    correcao: "Correção de dados",
    oposicao: "Oposição a tratamento",
    revogacao: "Revogação de consentimento",
    anonimizacao: "Anonimização",
    outro: "Outro pedido",
  };
  const tiposCor = {
    exclusao: "#c63b3b", correcao: "#0071e3", oposicao: "#e6a800",
    revogacao: "#7a3da1", anonimizacao: "#5e3aa1", outro: "#6e6e73",
  };

  const atualizar = (id, status) => {
    const novos = requests.map((r) => r.id === id ? { ...r, status, atendidoEm: new Date().toISOString() } : r);
    salvarRequests(novos);
    setRequests(novos);
  };

  const pendentes = requests.filter((r) => r.status === "pendente").length;

  return (
    <>
      <div className="adm-page-h">
        <div>
          <h1 className="adm-page-title">Solicitações LGPD</h1>
          <p className="adm-page-sub">{requests.length} solicitações no total · {pendentes} pendentes · prazo legal: 15 dias úteis</p>
        </div>
      </div>

      <div className="adm-toolbar">
        <select className="filter" value={filtro} onChange={(e) => setFiltro(e.target.value)} style={{ minWidth: 200 }}>
          <option value="todas">Todas</option>
          <option value="pendente">Pendentes</option>
          <option value="atendida">Atendidas</option>
          <option value="recusada">Recusadas</option>
        </select>
      </div>

      {lista.length === 0 ? (
        <div className="adm-panel" style={{ textAlign: "center", padding: 60, color: "var(--adm-ink-3)" }}>
          <div style={{ fontSize: 40, marginBottom: 10 }}>📭</div>
          Nenhuma solicitação {filtro === "todas" ? "registrada" : `com status "${filtro}"`}.
        </div>
      ) : (
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {lista.map((r) => (
            <div key={r.id} className="adm-panel">
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 12, marginBottom: 10 }}>
                <div style={{ display: "flex", gap: 12, flex: 1 }}>
                  <span style={{ background: tiposCor[r.tipo] + "22", color: tiposCor[r.tipo], padding: "3px 10px", borderRadius: 999, fontSize: 11.5, fontWeight: 600 }}>
                    {tiposLabel[r.tipo] || r.tipo}
                  </span>
                  <span style={{ fontSize: 12, color: "var(--adm-ink-3)" }}>{formatarData(r.criadoEm)}</span>
                </div>
                {r.status === "pendente"
                  ? <span className="adm-chip is-pend">pendente</span>
                  : r.status === "atendida" ? <span className="adm-chip is-ativo">atendida</span>
                  : <span className="adm-chip is-suspenso">recusada</span>}
              </div>
              <div style={{ marginBottom: 10 }}>
                <p className="nm" style={{ fontSize: 14, fontWeight: 500 }}>#{r.socioId} · {r.socioNome}</p>
                <p style={{ fontSize: 12, color: "var(--adm-ink-3)" }}>{r.socioEmail}</p>
              </div>
              {(r.detalhe || r.motivo) && (
                <div style={{ background: "var(--adm-line-soft)", borderRadius: 8, padding: "10px 12px", fontSize: 13, color: "var(--adm-ink-2)", marginBottom: r.status === "pendente" ? 10 : 0 }}>
                  {r.detalhe || r.motivo}
                </div>
              )}
              {r.status === "pendente" && (
                <div style={{ display: "flex", gap: 8, marginTop: 8 }}>
                  <button className="adm-btn is-success is-sm" onClick={() => atualizar(r.id, "atendida")}>Marcar como atendida</button>
                  <button className="adm-btn is-danger is-sm" onClick={() => atualizar(r.id, "recusada")}>Recusar com justificativa</button>
                  <button className="adm-btn is-sm" onClick={() => window.location.href = `mailto:${r.socioEmail}?subject=Sua solicitação LGPD - Dojô Ikigai`}>Responder por e-mail</button>
                </div>
              )}
            </div>
          ))}
        </div>
      )}
    </>
  );
}

function AdminPageAuditoria() {
  const [logs] = React.useState(lerAuditoria());
  const [busca, setBusca] = React.useState("");
  const [filtroAdmin, setFiltroAdmin] = React.useState("todos");

  const admins = [...new Set(logs.map((l) => l.adminUsuario))];
  const lista = logs.filter((l) => {
    if (filtroAdmin !== "todos" && l.adminUsuario !== filtroAdmin) return false;
    if (busca && !(`${l.admin} ${l.acao} ${l.alvo}`.toLowerCase().includes(busca.toLowerCase()))) return false;
    return true;
  });

  return (
    <>
      <div className="adm-page-h">
        <div>
          <h1 className="adm-page-title">Auditoria de acessos</h1>
          <p className="adm-page-sub">{logs.length} registros · retenção: 6 meses (Marco Civil da Internet)</p>
        </div>
        <button className="adm-btn" onClick={() => {
          const csv = ["Quando,Admin,Usuário,Ação,Alvo,IP", ...logs.map((l) => `${l.quando},"${l.admin}",${l.adminUsuario},"${l.acao}","${l.alvo}",${l.ip}`)].join("\n");
          const blob = new Blob([csv], { type: "text/csv" });
          const a = document.createElement("a");
          a.href = URL.createObjectURL(blob); a.download = `auditoria-${new Date().toISOString().slice(0, 10)}.csv`; a.click();
        }}>Exportar CSV</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 admin, ação ou alvo..." />
        </div>
        <select className="filter" value={filtroAdmin} onChange={(e) => setFiltroAdmin(e.target.value)}>
          <option value="todos">Todos os admins</option>
          {admins.map((a) => <option key={a} value={a}>{a}</option>)}
        </select>
      </div>

      <div className="adm-panel" style={{ padding: 0, overflow: "hidden" }}>
        <table className="adm-table">
          <thead>
            <tr>
              <th>Quando</th><th>Funcionário</th><th>Ação</th><th>Alvo</th><th>IP</th>
            </tr>
          </thead>
          <tbody>
            {lista.map((l) => (
              <tr key={l.id}>
                <td style={{ fontSize: 12, color: "var(--adm-ink-3)", whiteSpace: "nowrap" }}>{formatarData(l.quando)}</td>
                <td className="nm">
                  <div>{l.admin}</div>
                  <div style={{ fontSize: 11, color: "var(--adm-ink-3)" }}>@{l.adminUsuario}</div>
                </td>
                <td>{l.acao}</td>
                <td style={{ color: "var(--adm-ink-3)" }}>{l.alvo}</td>
                <td style={{ fontFamily: "monospace", fontSize: 11, color: "var(--adm-ink-3)" }}>{l.ip}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}

Object.assign(window, { AdminPageLGPD, AdminPageAuditoria, logAcesso, lerAuditoria });