/* ============================================================
   KeS Metas — Registros (logs de auditoria: quem fez o quê)
   Relatório filtrável por período e por pessoa. Só o admin acessa.
   ============================================================ */
const { useState, useEffect } = React;

function LogsScreen({ state, viewer, isOwner }) {
  const K = window.KES, DB = window.KESDB;
  const isAdmin = !!isOwner; // registros são exclusivos da conta KeS (owner)
  const [logs, setLogs] = useState([]);
  const [carregando, setCarregando] = useState(true);
  const [periodo, setPeriodo] = useState(() => window.buildPreset("mes"));
  const [quem, setQuem] = useState("todos");

  useEffect(() => {
    let vivo = true;
    if (!isAdmin || !DB || !DB.configured()) { setCarregando(false); return; }
    setCarregando(true);
    // Retenção: apaga registros com mais de 90 dias antes de listar.
    Promise.resolve(DB.pruneLogs(state.teamId, 90))
      .then(() => DB.listLogs(state.teamId, 1000))
      .then((r) => { if (vivo) { setLogs(r); setCarregando(false); } })
      .catch(() => { if (vivo) { setLogs([]); setCarregando(false); } }); // nunca trava em "Carregando…"
    return () => { vivo = false; };
  }, [state.teamId]);

  if (!isAdmin) {
    return <div className="content"><div className="card card-pad"><p className="muted" style={{ margin: 0 }}>Acesso restrito à conta KeS.</p></div></div>;
  }

  const usersById = {}; (state.users || []).forEach((u) => { usersById[u.id] = u; });

  // Filtra por período (pela data do ts) e por pessoa.
  const filtrados = logs.filter((l) => {
    const dia = (l.ts || "").slice(0, 10);
    if (dia < periodo.start || dia > periodo.end) return false;
    if (quem !== "todos" && l.userId !== quem) return false;
    return true;
  });

  function fmtTs(ts) { try { return new Date(ts).toLocaleString("pt-BR"); } catch (e) { return ts; } }

  // Cor por tipo de ação (verde p/ ganho, vermelho p/ excluir/perdido).
  function tom(acao) {
    if (/GANHA|concluída|criad|ativad/i.test(acao)) return "var(--ok)";
    if (/exclu|PERDID|desativ/i.test(acao)) return "var(--kes-red-400)";
    return "var(--fg2)";
  }

  return (
    <div className="content">
      <div className="topbar">
        <div className="ttl"><h1>Registros</h1><p>Auditoria do sistema: quem fez o quê e quando.</p></div>
        <div className="actions" style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
          <select className="field" style={{ width: "auto", padding: "9px 12px", fontSize: 13 }} value={quem} onChange={(e) => setQuem(e.target.value)}>
            <option value="todos">Todas as pessoas</option>
            {(state.users || []).map((u) => <option key={u.id} value={u.id}>{u.nome}</option>)}
          </select>
          <PeriodFilter value={periodo} onChange={setPeriodo} />
        </div>
      </div>

      <div className="card">
        <div style={{ padding: "16px 18px 8px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <h3 style={{ margin: 0, fontSize: "var(--text-md)" }}>Atividades</h3>
          <Badge tone="muted">{filtrados.length}</Badge>
        </div>
        {carregando ? (
          <div style={{ padding: "8px 18px 18px", color: "var(--fg3)", fontSize: 13 }}>Carregando…</div>
        ) : filtrados.length === 0 ? (
          <div style={{ padding: "8px 18px 18px", color: "var(--fg3)", fontSize: 13 }}>Nenhum registro no período. (Os registros começam a ser gravados a partir de agora.)</div>
        ) : (
          <div>
            {filtrados.map((l) => {
              const u = usersById[l.userId];
              return (
                <div key={l.id} style={{ display: "flex", gap: 12, alignItems: "center", padding: "11px 18px", borderTop: "1px solid var(--border-dark)" }}>
                  {u ? <Avatar user={u} size={30} /> : <div style={{ width: 30, height: 30, borderRadius: "50%", background: "var(--kes-navy-700)" }} />}
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 13.5 }}><strong style={{ color: tom(l.acao) }}>{l.acao}</strong>{l.detalhe ? <span style={{ color: "var(--fg2)" }}> — {l.detalhe}</span> : null}</div>
                    <div className="muted" style={{ fontSize: 11.5, marginTop: 2 }}>{l.userNome || "—"} · {fmtTs(l.ts)}</div>
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
}

window.LogsScreen = LogsScreen;