MCP Context Hub

"use client";

import { useState } from "react";
import useSWR from "swr";
import { apiFetch } from "@/lib/api";
import { DataTable } from "@/components/dashboard/data-table";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { Skeleton } from "@/components/ui/skeleton";
import { formatDate, formatMs } from "@/lib/utils";
import type { AuditEntry } from "@/lib/types";

interface AuditResponse {
  entries: AuditEntry[];
  pagination: { page: number; limit: number; total: number; pages: number };
}

export default function AuditPage() {
  const [page, setPage] = useState(1);
  const [tool, setTool] = useState("");

  const query = new URLSearchParams({ page: String(page), limit: "50" });
  if (tool) query.set("tool", tool);

  const { data, isLoading } = useSWR(
    `/audit?${query}`,
    (path) => apiFetch<AuditResponse>(path),
    { refreshInterval: 15000 }
  );

  if (isLoading) return <Skeleton className="h-96" />;

  return (
    <div className="space-y-4">
      <Input
        placeholder="Filter by tool name..."
        value={tool}
        onChange={(e) => { setTool(e.target.value); setPage(1); }}
        className="max-w-xs"
      />

      <DataTable
        columns={[
          { key: "tool_name", header: "Tool", render: (e: AuditEntry) => <Badge variant="secondary">{e.tool_name}</Badge> },
          { key: "session_id", header: "Session", render: (e: AuditEntry) => <span className="font-mono text-xs">{e.session_id?.slice(0, 8) || "-"}</span> },
          { key: "input_summary", header: "Input", render: (e: AuditEntry) => <span className="max-w-xs truncate block text-xs">{e.input_summary || "-"}</span> },
          { key: "duration_ms", header: "Duration", render: (e: AuditEntry) => e.duration_ms != null ? formatMs(e.duration_ms) : "-" },
          { key: "created_at", header: "Date", render: (e: AuditEntry) => formatDate(e.created_at) },
        ]}
        data={data?.entries ?? []}
        pagination={data?.pagination ? { ...data.pagination, onPageChange: setPage } : undefined}
      />
    </div>
  );
}