const { Card, DataTable, Button, Icon, IconButton, SearchField, Select, Input, Badge, Tabs, Avatar, EmptyState, StatCard, ImportExportBar } = window.ACRFlowDesignSystem_ba1e9c;

const SEVERIDADE = { info: { tone: "neutral", label: "Informativo" }, aviso: { tone: "warning", label: "Atenção" }, critico: { tone: "danger", label: "Crítico" } };

const ROTULO_ACAO = {
  "login.local": "Entrada (conta local)",
  "login.google": "Entrada (Google)",
  "login.falhou": "Tentativa de entrada recusada",
  logout: "Saída do sistema",
  "sessao.encerrada_pelo_supervisor": "Sessão encerrada pelo supervisor",
  "login.bloqueado": "Conta bloqueada por tentativas",
  "acesso.ip_bloqueado": "Estação bloqueada por tentativas",
  "demanda.exclusao_negada": "Tentativa de exclusão negada",
  "demanda.cancelamento_negada": "Tentativa de cancelamento negada",
  "demanda.reabertura_negada": "Tentativa de reabertura negada",
  "acesso.ip_liberado": "Estação liberada pelo supervisor",
  "demanda.prazo_corrigido": "Prazo corrigido pelo sistema",
  "demanda.gerada_por_recorrencia": "Demanda gerada por recorrência",
  "demanda.criada": "Demanda aberta",
  "demanda.status_alterado": "Status alterado",
  "demanda.prioridade_alterada": "Prioridade alterada",
  "demanda.prazo_alterado": "Prazo alterado",
  "demanda.responsaveis_alterados": "Responsáveis alterados",
  "demanda.encerramento_solicitado": "Encerramento solicitado",
  "demanda.encerrada": "Encerramento aprovado",
  "demanda.devolvida": "Demanda devolvida",
  "demanda.cancelada": "Demanda cancelada",
  "demanda.reaberta": "Demanda reaberta",
  "demanda.excluida": "Demanda excluída",
  "usuario.criado": "Colaborador cadastrado",
  "usuario.perfil_alterado": "Perfil alterado",
  "usuario.senha_redefinida": "Senha redefinida",
  "usuario.desativado": "Colaborador desativado",
  "usuario.reativado": "Colaborador reativado",
  "cadastro.criado": "Cadastro criado",
  "cadastro.editado": "Cadastro alterado",
  "cadastro.removido": "Cadastro removido",
};

const ICONE_ACAO = (a) => {
  if (a.startsWith("login") || a === "logout" || a.startsWith("sessao")) return "key-round";
  if (a.includes("excluida") || a.includes("removido") || a.includes("desativado")) return "trash-2";
  if (a.includes("cancelada") || a.includes("devolvida")) return "undo-2";
  if (a.includes("encerrada")) return "shield-check";
  if (a.startsWith("usuario")) return "user-cog";
  if (a.startsWith("cadastro")) return "database";
  return "activity";
};

const dataHora = (iso) => (iso ? new Date(iso).toLocaleString("pt-BR", { dateStyle: "short", timeStyle: "short" }) : "—");
const desde = (iso) => {
  if (!iso) return "nunca acessou";
  const min = Math.round((Date.now() - new Date(iso)) / 60000);
  if (min < 1) return "agora mesmo";
  if (min < 60) return "há " + min + " min";
  const h = Math.round(min / 60);
  if (h < 24) return "há " + h + (h === 1 ? " hora" : " horas");
  const dias = Math.round(h / 24);
  return "há " + dias + (dias === 1 ? " dia" : " dias");
};

function AuditScreen({ user, onToast }) {
  const supervisor = user && user.profile === "supervisor";
  const [aba, setAba] = React.useState("eventos");
  const [resumo, setResumo] = React.useState(null);
  const [sessoes, setSessoes] = React.useState([]);
  const [acessos, setAcessos] = React.useState([]);
  const [eventos, setEventos] = React.useState([]);
  const [prod, setProd] = React.useState(null);
  const [bloqueios, setBloqueios] = React.useState([]);
  const [janela, setJanela] = React.useState(30);
  const [carregando, setCarregando] = React.useState(true);

  const hoje = new Date().toISOString().slice(0, 10);
  const trintaDias = new Date(Date.now() - 29 * 86400000).toISOString().slice(0, 10);
  const [de, setDe] = React.useState(trintaDias);
  const [ate, setAte] = React.useState(hoje);
  const [acao, setAcao] = React.useState("Todas");
  const [sev, setSev] = React.useState("Todas");
  const [q, setQ] = React.useState("");

  const online = window.ACRStore && window.ACRStore.online();

  const carregar = React.useCallback(async () => {
    if (!online) { setCarregando(false); return; }
    setCarregando(true);
    const API = window.ACRApi.audit;
    const filtros = { from: de, to: ate, limit: 500 };
    if (acao !== "Todas") filtros.action = Object.keys(ROTULO_ACAO).find((k) => ROTULO_ACAO[k] === acao) || acao;
    if (sev !== "Todas") filtros.severity = Object.keys(SEVERIDADE).find((k) => SEVERIDADE[k].label === sev);
    if (q.trim()) filtros.q = q.trim();
    try {
      const [r, s, a, e, b] = await Promise.all([API.summary(), API.sessions(), API.access(), API.events(filtros), API.blocks().catch(() => [])]);
      setResumo(r); setSessoes(s); setAcessos(a); setEventos(e); setBloqueios(b || []);
    } catch (err) {
      onToast && onToast({ tone: "danger", title: "Não foi possível carregar a auditoria", message: err.message });
    } finally { setCarregando(false); }
  }, [de, ate, acao, sev, q, online]);

  React.useEffect(() => { carregar(); }, [carregar]);

  /** Produtividade carrega sozinha: uma falha aqui nao pode esvaziar as outras abas. */
  const [erroProd, setErroProd] = React.useState(null);
  React.useEffect(() => {
    if (!online) return;
    let vivo = true;
    setErroProd(null);
    window.ACRApi.audit.productivity(janela)
      .then((p) => { if (vivo) setProd(p); })
      .catch((err) => { if (vivo) { setProd({ dias: janela, linhas: [] }); setErroProd(err.message || "falha ao consultar"); } });
    return () => { vivo = false; };
  }, [janela, online]);

  if (!supervisor) {
    return <Card><EmptyState icon={<Icon name="shield-alert" size={22} />} title="Acesso restrito"
      description="O módulo de auditoria é exclusivo do perfil Supervisor." /></Card>;
  }

  const ativos = sessoes.filter((s) => s.ativa);
  const acoesDisponiveis = ["Todas"].concat([...new Set((resumo ? resumo.porAcao : []).map((a) => ROTULO_ACAO[a.action] || a.action))]);
  const vazio = (t, d) => <EmptyState icon={<Icon name="scroll-text" size={22} />} title={t} description={d} />;

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--gap-section)" }}>
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 14, flexWrap: "wrap" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
          <h1 style={{ font: "var(--type-h1)", color: "var(--text-strong)" }}>Auditoria</h1>
          <span style={{ font: "var(--type-body)", color: "var(--text-muted)" }}>Sessões, acessos e o registro de tudo que acontece no sistema — visível apenas ao supervisor.</span>
        </div>
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
          <ImportExportBar label="auditoria"
            colunas={[
              { key: "created_at", label: "Data e hora", valor: (r) => dataHora(r.created_at) },
              { key: "user_name", label: "Usuário" },
              { key: "action", label: "Evento", valor: (r) => ROTULO_ACAO[r.action] || r.action },
              { key: "severity", label: "Gravidade", valor: (r) => (SEVERIDADE[r.severity] || {}).label || r.severity },
              { key: "entity", label: "Tipo" },
              { key: "entity_id", label: "Registro" },
              { key: "description", label: "Descrição" },
              { key: "ip", label: "Origem (IP)" },
            ]}
            linhas={eventos} />
          <Button variant="secondary" iconLeft={<Icon name="refresh-cw" size={15} />} disabled={carregando} onClick={carregar}>
            {carregando ? "Carregando…" : "Atualizar"}
          </Button>
        </div>
      </div>

      {!online ? <Card><EmptyState icon={<Icon name="wifi-off" size={22} />} title="Sem conexão com o servidor"
        description="A auditoria só existe no banco de dados — reconecte para consultar." /></Card> : (
        <>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(190px,1fr))", gap: "var(--gap-grid)" }}>
            <StatCard label="Usuários ativos agora" value={resumo ? resumo.ativosAgora : "—"} tone="success" icon={<Icon name="users" size={16} />} hint="Sessão vista nos últimos 30 min" />
            <StatCard label="Eventos hoje" value={resumo ? resumo.eventosHoje : "—"} tone="brand" icon={<Icon name="activity" size={16} />} />
            <StatCard label="Eventos críticos (7 dias)" value={resumo ? resumo.criticos7d : "—"} tone={resumo && resumo.criticos7d ? "danger" : "neutral"} icon={<Icon name="shield-alert" size={16} />} hint="Exclusões e redefinições de senha" />
            <StatCard label="Colaboradores cadastrados" value={acessos.length || "—"} tone="flow" icon={<Icon name="id-card" size={16} />} />
          </div>

          <Tabs value={aba} onChange={setAba} tabs={[
            { id: "eventos", label: "Log de eventos" },
            { id: "sessoes", label: "Sessões ativas" + (ativos.length ? " (" + ativos.length + ")" : "") },
            { id: "acessos", label: "Último acesso" },
            { id: "produtividade", label: "Produtividade" },
            { id: "bloqueios", label: "Bloqueios" + (bloqueios.filter((b) => b.ativo).length ? " (" + bloqueios.filter((b) => b.ativo).length + ")" : "") },
          ]} />

          {aba === "eventos" ? (
            <>
              <Card title="Filtros" padding="var(--pad-card)">
                <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(170px,1fr))", gap: 12 }}>
                  <Input label="De" type="date" size="sm" value={de} max={ate} onChange={(e) => setDe(e.target.value)} />
                  <Input label="Até" type="date" size="sm" value={ate} min={de} max={hoje} onChange={(e) => setAte(e.target.value)} />
                  <Select label="Evento" size="sm" value={acao} onChange={(e) => setAcao(e.target.value)} options={acoesDisponiveis} />
                  <Select label="Gravidade" size="sm" value={sev} onChange={(e) => setSev(e.target.value)} options={["Todas", "Informativo", "Atenção", "Crítico"]} />
                  <div style={{ gridColumn: "1 / -1" }}>
                    <SearchField width="100%" shortcut="" placeholder="Buscar por descrição, número da demanda ou usuário..." value={q} onChange={(e) => setQ(e.target.value)} onClear={() => setQ("")} />
                  </div>
                </div>
              </Card>

              <Card padding="0" title="Registro de eventos"
                subtitle={eventos.length ? eventos.length + (eventos.length === 1 ? " evento no período" : " eventos no período") : "Nenhum evento no período"}>
                {eventos.length === 0 ? vazio("Nenhum evento encontrado", "Amplie o período ou limpe os filtros.") : (
                  <DataTable dense rowKey="id" rows={eventos}
                    columns={[
                      { key: "created_at", label: "Quando", width: 150, render: (r) => (
                        <span style={{ display: "flex", flexDirection: "column" }}>
                          <span style={{ font: "var(--type-caption)", color: "var(--text-strong)" }}>{dataHora(r.created_at)}</span>
                          <span style={{ font: "var(--type-caption)", color: "var(--text-subtle)" }}>{desde(r.created_at)}</span>
                        </span>
                      ) },
                      { key: "action", label: "Evento", width: 230, render: (r) => (
                        <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
                          <Icon name={ICONE_ACAO(r.action)} size={15} style={{ color: r.severity === "critico" ? "var(--danger-solid)" : r.severity === "aviso" ? "var(--warning-solid)" : "var(--text-muted)" }} />
                          <span style={{ font: "var(--type-body-strong)", color: "var(--text-strong)" }}>{ROTULO_ACAO[r.action] || r.action}</span>
                        </span>
                      ) },
                      { key: "user_name", label: "Usuário", width: 170, render: (r) => (r.user_name
                        ? <Avatar name={r.user_name} size="sm" showName {...(window.ACRAvatar ? window.ACRAvatar(r.user_name) : {})} />
                        : <span style={{ font: "var(--type-caption)", color: "var(--text-subtle)" }}>Sistema</span>) },
                      { key: "description", label: "Descrição", render: (r) => (
                        <span style={{ font: "var(--type-caption)", color: "var(--text-body)" }}>{r.description || "—"}</span>
                      ) },
                      { key: "severity", label: "Gravidade", width: 120, render: (r) => (
                        <Badge tone={(SEVERIDADE[r.severity] || {}).tone || "neutral"} size="sm">{(SEVERIDADE[r.severity] || {}).label || r.severity}</Badge>
                      ) },
                      { key: "ip", label: "Origem", width: 130, render: (r) => (
                        <span style={{ font: "var(--type-mono)", fontSize: "var(--text-2xs)", color: "var(--text-subtle)" }}>{r.ip || "—"}</span>
                      ) },
                    ]} />
                )}
              </Card>
            </>
          ) : null}

          {aba === "sessoes" ? (
            <Card padding="0" title="Sessões abertas"
              subtitle="Consideramos ativo quem teve atividade nos últimos 30 minutos">
              {sessoes.length === 0 ? vazio("Nenhuma sessão aberta", "Ninguém está conectado no momento.") : (
                <DataTable rowKey="id" rows={sessoes}
                  columns={[
                    { key: "name", label: "Colaborador", render: (r) => (
                      <span style={{ display: "flex", alignItems: "center", gap: 10 }}>
                        <span style={{ position: "relative", display: "inline-flex" }}>
                          <Avatar name={r.name} size="sm" color={r.avatar_color || undefined} initials={r.avatar_initials || undefined} />
                          <span style={{ position: "absolute", right: -1, bottom: -1, width: 9, height: 9, borderRadius: "50%", border: "2px solid var(--surface-card)", background: r.ativa ? "var(--success-solid)" : "var(--slate-400)" }} />
                        </span>
                        <span style={{ display: "flex", flexDirection: "column" }}>
                          <span style={{ font: "var(--type-body-strong)", color: "var(--text-strong)" }}>{r.name}</span>
                          <span style={{ font: "var(--type-caption)", color: "var(--text-muted)" }}>{r.role_title || (r.profile === "supervisor" ? "Supervisor" : "Operacional")}</span>
                        </span>
                      </span>
                    ) },
                    { key: "ativa", label: "Situação", width: 120, render: (r) => (
                      <Badge tone={r.ativa ? "success" : "neutral"} size="sm">{r.ativa ? "Ativa" : "Inativa"}</Badge>
                    ) },
                    { key: "started_at", label: "Entrou", width: 150, render: (r) => (
                      <span style={{ font: "var(--type-caption)", color: "var(--text-body)" }}>{dataHora(r.started_at)}</span>
                    ) },
                    { key: "last_seen_at", label: "Visto por último", width: 150, render: (r) => (
                      <span style={{ font: "var(--type-caption)", color: "var(--text-body)" }}>{desde(r.last_seen_at)}</span>
                    ) },
                    { key: "auth_type", label: "Acesso", width: 110, render: (r) => (
                      <Badge tone={r.auth_type === "google" ? "info" : "neutral"} size="sm">{r.auth_type === "google" ? "Google" : "Local"}</Badge>
                    ) },
                    { key: "ip", label: "Origem", width: 130, render: (r) => (
                      <span style={{ font: "var(--type-mono)", fontSize: "var(--text-2xs)", color: "var(--text-subtle)" }}>{r.ip || "—"}</span>
                    ) },
                    { key: "acao", label: "", width: 60, align: "right", render: (r) => (
                      <IconButton size="sm" variant="ghost" label="Encerrar sessão" icon={<Icon name="log-out" size={15} />}
                        onClick={async () => {
                          await window.ACRApi.audit.endSessions(r.user_id);
                          onToast && onToast({ tone: "info", title: "Sessão encerrada", message: r.name + " precisará entrar novamente." });
                          carregar();
                        }} />
                    ) },
                  ]} />
              )}
            </Card>
          ) : null}

          {aba === "acessos" ? (
            <Card padding="0" title="Último acesso por colaborador"
              subtitle="Quem entrou, quando e quantas vezes desde o cadastro">
              {acessos.length === 0 ? vazio("Nenhum colaborador cadastrado", "Cadastre a equipe em Controle de Acesso.") : (
                <DataTable rowKey="id" rows={acessos}
                  columns={[
                    { key: "name", label: "Colaborador", render: (r) => (
                      <span style={{ display: "flex", alignItems: "center", gap: 10 }}>
                        <Avatar name={r.name} size="sm" color={r.avatar_color || undefined} initials={r.avatar_initials || undefined} />
                        <span style={{ display: "flex", flexDirection: "column" }}>
                          <span style={{ font: "var(--type-body-strong)", color: "var(--text-strong)" }}>{r.name}</span>
                          <span style={{ font: "var(--type-caption)", color: "var(--text-muted)" }}>{r.username || r.email || "—"}</span>
                        </span>
                      </span>
                    ) },
                    { key: "profile", label: "Perfil", width: 130, render: (r) => (
                      <Badge tone={r.profile === "supervisor" ? "violet" : "neutral"} size="sm">{r.profile === "supervisor" ? "Supervisor" : "Operacional"}</Badge>
                    ) },
                    { key: "online", label: "Agora", width: 100, render: (r) => (
                      <Badge tone={r.online ? "success" : "neutral"} size="sm">{r.online ? "Online" : "Offline"}</Badge>
                    ) },
                    { key: "last_login_at", label: "Último acesso", width: 200, render: (r) => {
                      // Sem login gravado, mas com rastro na auditoria: mostra a última atividade.
                      const ativ = r.ultima_atividade && new Date(r.ultima_atividade).getFullYear() > 1970 ? r.ultima_atividade : null;
                      const inferido = !r.last_login_at && !!ativ;
                      const quando = r.last_login_at || ativ;
                      return (
                        <span style={{ display: "flex", flexDirection: "column" }}>
                          <span style={{ font: "var(--type-caption)", color: quando ? "var(--text-strong)" : "var(--text-subtle)" }}>{dataHora(quando)}</span>
                          <span style={{ font: "var(--type-caption)", color: "var(--text-subtle)" }}
                            title={inferido ? "O login em si não foi registrado (conta usada antes do registro de sessões). Esta é a última ação dela na auditoria." : undefined}>
                            {quando ? desde(quando) + (inferido ? " · por atividade" : "") : "nunca acessou"}
                          </span>
                        </span>
                      );
                    } },
                    { key: "login_count", label: "Entradas", width: 100, align: "right", render: (r) => (
                      r.login_count ? <span style={{ font: "var(--type-mono)", fontSize: "var(--text-xs)", color: "var(--text-body)" }}>{r.login_count}</span>
                        : <span style={{ font: "var(--type-caption)", color: "var(--text-subtle)" }} title={r.n_eventos ? r.n_eventos + " ações registradas, nenhum login gravado" : "sem registro"}>{r.n_eventos ? "—" : "0"}</span>
                    ) },
                    { key: "last_login_ip", label: "Origem", width: 130, render: (r) => (
                      <span style={{ font: "var(--type-mono)", fontSize: "var(--text-2xs)", color: "var(--text-subtle)" }}>{r.last_login_ip || "—"}</span>
                    ) },
                    { key: "active", label: "Conta", width: 100, render: (r) => (
                      <Badge tone={r.active ? "success" : "danger"} size="sm">{r.active ? "Ativa" : "Inativa"}</Badge>
                    ) },
                  ]} />
              )}
            </Card>
          ) : null}

          {aba === "bloqueios" ? (
            <Card padding="0" title="Bloqueios por tentativas de acesso"
              subtitle="5 tentativas recusadas em 15 min bloqueiam a estação; reincidência escala para 1 h e depois 24 h">
              {bloqueios.length === 0 ? vazio("Nenhum bloqueio registrado", "Nenhuma estação atingiu o limite de tentativas.") : (
                <DataTable rowKey="ip" rows={bloqueios}
                  columns={[
                    { key: "ip", label: "Origem (IP)", render: (r) => (
                      <span style={{ font: "var(--type-mono)", fontSize: "var(--text-xs)", color: "var(--text-strong)" }}>{r.ip}</span>
                    ) },
                    { key: "ativo", label: "Situação", width: 150, render: (r) => (
                      <Badge tone={r.ativo ? "danger" : "neutral"} size="sm">
                        {r.ativo ? (r.minutos_restantes > 60 ? "Bloqueado · " + Math.ceil(r.minutos_restantes / 60) + " h" : "Bloqueado · " + r.minutos_restantes + " min") : "Liberado"}
                      </Badge>
                    ) },
                    { key: "strikes", label: "Reincidências", width: 130, align: "right", render: (r) => (
                      <span style={{ font: "var(--type-mono)", fontSize: "var(--text-xs)", color: r.strikes > 1 ? "var(--text-strong)" : "var(--text-body)" }}>{r.strikes}</span>
                    ) },
                    { key: "updated_at", label: "Último bloqueio", width: 190, render: (r) => (
                      <span style={{ font: "var(--type-caption)", color: "var(--text-body)" }}>{dataHora(r.updated_at)}</span>
                    ) },
                    { key: "last_reason", label: "Motivo", render: (r) => (
                      <span style={{ font: "var(--type-caption)", color: "var(--text-muted)" }}>{r.last_reason || "—"}</span>
                    ) },
                    { key: "acao", label: "", width: 70, align: "right", render: (r) => (
                      r.ativo ? (
                        <IconButton size="sm" variant="ghost" label="Liberar este IP" icon={<Icon name="unlock" size={15} />}
                          onClick={async () => {
                            await window.ACRApi.audit.releaseBlock(r.ip);
                            onToast && onToast({ tone: "info", title: "IP liberado", message: r.ip + " pode tentar entrar novamente." });
                            carregar();
                          }} />
                      ) : null
                    ) },
                  ]} />
              )}
            </Card>
          ) : null}

          {aba === "produtividade" ? (() => {
            if (erroProd) return <Card><EmptyState icon={<Icon name="shield-alert" size={22} />} title="Não foi possível calcular a produtividade" description={erroProd} /></Card>;
            const linhas = (prod && prod.linhas) || [];
            const ativas = linhas.filter((r) => r.active);
            const top = ativas.filter((r) => r.concluidas > 0 || r.eventos > 0).slice(0, 5);
            const maior = Math.max(1, ...top.map((r) => r.concluidas || 0));
            const soma = (k) => ativas.reduce((a, r) => a + (Number(r[k]) || 0), 0);
            const pct = (r) => (r.concluidas ? Math.round((r.no_prazo / r.concluidas) * 100) : null);
            return (
              <div style={{ display: "flex", flexDirection: "column", gap: "var(--gap-section)" }}>
                <Card padding="var(--pad-card)">
                  <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 14, flexWrap: "wrap" }}>
                    <span style={{ font: "var(--type-body)", color: "var(--text-muted)" }}>
                      Janela de apuração — conta apenas o que o sistema registra: entradas, demandas, comentários e anexos.
                    </span>
                    <Select size="sm" value={String(janela)} onChange={(e) => setJanela(Number(e.target.value))}
                      options={[{ value: "7", label: "Últimos 7 dias" }, { value: "30", label: "Últimos 30 dias" }, { value: "90", label: "Últimos 90 dias" }]} />
                  </div>
                </Card>

                <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(190px,1fr))", gap: "var(--gap-grid)" }}>
                  <StatCard label="Demandas concluídas" value={soma("concluidas")} tone="success" icon={<Icon name="shield-check" size={16} />} hint={"no período de " + janela + " dias"} />
                  <StatCard label="Demandas abertas" value={soma("criadas")} tone="brand" icon={<Icon name="inbox" size={16} />} />
                  <StatCard label="Interações registradas" value={soma("comentarios") + soma("anexos") + soma("atualizacoes")} tone="flow" icon={<Icon name="activity" size={16} />} hint="Comentários, anexos e atualizações" />
                  <StatCard label="Colaboradores sem acesso" value={ativas.filter((r) => !r.entradas).length} tone={ativas.some((r) => !r.entradas) ? "warning" : "neutral"} icon={<Icon name="user-x" size={16} />} hint="Conta ativa, nenhuma entrada no período" />
                </div>

                <Card title="Top colaboradores" subtitle={"Por demandas concluídas nos últimos " + janela + " dias"}>
                  {top.length === 0 ? vazio("Sem movimento no período", "Nenhuma atividade registrada na janela escolhida.") : (
                    <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                      {top.map((r, i) => (
                        <div key={r.id} style={{ display: "flex", alignItems: "center", gap: 12 }}>
                          <span style={{ font: "var(--type-mono)", fontSize: "var(--text-xs)", color: "var(--text-subtle)", width: 18, textAlign: "right" }}>{i + 1}</span>
                          <Avatar name={r.name} size="sm" color={r.avatar_color || undefined} initials={r.avatar_initials || undefined} />
                          <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 5, minWidth: 0 }}>
                            <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 10 }}>
                              <span style={{ font: "var(--type-body-strong)", color: "var(--text-strong)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.name}</span>
                              <span style={{ font: "var(--type-caption)", color: "var(--text-muted)", flexShrink: 0 }}>
                                {r.concluidas} concluída{r.concluidas === 1 ? "" : "s"}
                                {pct(r) !== null ? " · " + pct(r) + "% no prazo" : ""}
                              </span>
                            </div>
                            <div style={{ height: 6, borderRadius: 999, background: "var(--surface-sunken)", overflow: "hidden" }}>
                              <div style={{ height: "100%", width: Math.round(((r.concluidas || 0) / maior) * 100) + "%", minWidth: r.concluidas ? 6 : 0, borderRadius: 999, background: "var(--accent-primary)" }} />
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
                </Card>

                <Card padding="0" title="Uso e produtividade por colaborador"
                  subtitle="Dias com atividade, entradas e volume de trabalho no período">
                  {linhas.length === 0 ? vazio("Nenhum dado no período", "Escolha uma janela maior ou aguarde o registro de atividades.") : (
                    <DataTable rowKey="id" rows={linhas}
                      columns={[
                        { key: "name", label: "Colaborador", render: (r) => (
                          <span style={{ display: "flex", alignItems: "center", gap: 10 }}>
                            <Avatar name={r.name} size="sm" color={r.avatar_color || undefined} initials={r.avatar_initials || undefined} />
                            <span style={{ display: "flex", flexDirection: "column" }}>
                              <span style={{ font: "var(--type-body-strong)", color: "var(--text-strong)" }}>{r.name}</span>
                              <span style={{ font: "var(--type-caption)", color: "var(--text-muted)" }}>{r.role_title || r.username || "—"}</span>
                            </span>
                          </span>
                        ) },
                        { key: "last_login_at", label: "Último acesso", width: 150, render: (r) => (
                          <span style={{ font: "var(--type-caption)", color: r.last_login_at ? "var(--text-body)" : "var(--text-subtle)" }}>{desde(r.last_login_at)}</span>
                        ) },
                        { key: "dias_ativos", label: "Dias ativos", width: 110, align: "right", render: (r) => (
                          <span style={{ font: "var(--type-mono)", fontSize: "var(--text-xs)", color: r.dias_ativos ? "var(--text-body)" : "var(--text-subtle)" }}>{r.dias_ativos}/{janela}</span>
                        ) },
                        { key: "entradas", label: "Entradas", width: 95, align: "right", render: (r) => (
                          <span style={{ font: "var(--type-mono)", fontSize: "var(--text-xs)", color: "var(--text-body)" }}>{r.entradas}</span>
                        ) },
                        { key: "criadas", label: "Abriu", width: 85, align: "right", render: (r) => (
                          <span style={{ font: "var(--type-mono)", fontSize: "var(--text-xs)", color: "var(--text-body)" }}>{r.criadas}</span>
                        ) },
                        { key: "concluidas", label: "Concluiu", width: 100, align: "right", render: (r) => (
                          <span style={{ font: "var(--type-mono)", fontSize: "var(--text-xs)", color: "var(--text-strong)" }}>{r.concluidas}</span>
                        ) },
                        { key: "no_prazo", label: "No prazo", width: 100, align: "right", render: (r) => (
                          pct(r) === null ? <span style={{ font: "var(--type-caption)", color: "var(--text-subtle)" }}>—</span>
                            : <Badge tone={pct(r) >= 80 ? "success" : pct(r) >= 50 ? "warning" : "danger"} size="sm">{pct(r)}%</Badge>
                        ) },
                        { key: "horas_media", label: "Tempo médio", width: 120, align: "right", render: (r) => (
                          <span style={{ font: "var(--type-caption)", color: r.horas_media ? "var(--text-body)" : "var(--text-subtle)" }}>
                            {r.horas_media ? (Number(r.horas_media) >= 48 ? Math.round(Number(r.horas_media) / 24) + " dias" : Number(r.horas_media) + " h") : "—"}
                          </span>
                        ) },
                        { key: "interacoes", label: "Interações", width: 110, align: "right", render: (r) => (
                          <span style={{ font: "var(--type-mono)", fontSize: "var(--text-xs)", color: "var(--text-body)" }}
                            title={r.comentarios + " comentários · " + r.anexos + " anexos · " + r.atualizacoes + " atualizações"}>
                            {(Number(r.comentarios) || 0) + (Number(r.anexos) || 0) + (Number(r.atualizacoes) || 0)}
                          </span>
                        ) },
                        { key: "em_aberto", label: "Em aberto", width: 100, align: "right", render: (r) => (
                          <span style={{ font: "var(--type-mono)", fontSize: "var(--text-xs)", color: "var(--text-body)" }}>{r.em_aberto}</span>
                        ) },
                        { key: "active", label: "Conta", width: 95, render: (r) => (
                          <Badge tone={r.active ? "success" : "danger"} size="sm">{r.active ? "Ativa" : "Inativa"}</Badge>
                        ) },
                      ]} />
                  )}
                </Card>

                <span style={{ font: "var(--type-caption)", color: "var(--text-subtle)" }}>
                  Estes números medem uso do sistema, não desempenho isolado: uma demanda complexa pesa igual a uma simples, e trabalho feito fora do FlowTix não aparece aqui.
                </span>
              </div>
            );
          })() : null}
        </>
      )}
    </div>
  );
}

Object.assign(window, { AuditScreen });