import { Panel, PanelHeader } from "@/components/ui/panel";
import { EmptyState, TBody, TD, TH, THead, TR, Table } from "@/components/ui/table";
import { formatDuration, formatInt } from "@/lib/format";
import type { TenantAiUsage } from "@/lib/platform-types";

export function UsoView({ usage }: { usage: TenantAiUsage[] }) {
  const withUsage = usage.filter(
    (u) => u.usage.transcriptionSeconds > 0 || u.usage.analysisRequests > 0 || u.usage.inputTokens > 0 || u.usage.outputTokens > 0,
  );

  return (
    <div className="space-y-5">
      <div>
        <h1 className="text-lg font-semibold text-foreground">IA — Uso</h1>
        <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
          Uso bruto de IA de todos os tenants no mês corrente (agente.md secao 124, ledger{" "}
          <code className="font-mono text-xs">AIUsageRecord</code>) — quantidade, não custo (isso é IA &gt; Custos).
        </p>
      </div>

      <Panel>
        <PanelHeader title="Uso por tenant" description={`${withUsage.length} de ${usage.length} tenant(s) com uso este mês`} />
        {usage.length === 0 ? (
          <EmptyState title="Nenhum tenant" description="Nenhum tenant cadastrado ainda." />
        ) : (
          <Table>
            <THead>
              <TR>
                <TH>Tenant</TH>
                <TH>Transcrição</TH>
                <TH>Análises</TH>
                <TH>Tokens de entrada</TH>
                <TH>Tokens de saída</TH>
              </TR>
            </THead>
            <TBody>
              {usage.map((u) => (
                <TR key={u.tenantId}>
                  <TD className="text-foreground">{u.legalName}</TD>
                  <TD className="font-mono tabular-nums text-muted-foreground">{formatDuration(u.usage.transcriptionSeconds)}</TD>
                  <TD className="font-mono tabular-nums text-muted-foreground">{formatInt(u.usage.analysisRequests)}</TD>
                  <TD className="font-mono tabular-nums text-muted-foreground">{formatInt(u.usage.inputTokens)}</TD>
                  <TD className="font-mono tabular-nums text-muted-foreground">{formatInt(u.usage.outputTokens)}</TD>
                </TR>
              ))}
            </TBody>
          </Table>
        )}
      </Panel>
    </div>
  );
}