import { createFileRoute } from "@tanstack/react-router";

import { ListPage } from "@/components/app/ListPage";
import { Avatar, formatDate } from "@/components/app/Primitives";
import type { TableColumn } from "@/components/table/DataTable";
import type { GridColumn } from "@/components/grid/types";
import { validators } from "@/components/grid/types";
import { auditLog } from "@/data/mock";
import type { AuditRow } from "@/data/types";

export const Route = createFileRoute("/audit")({
  head: () => ({
    meta: [
      { title: "Audit log | KareVoyage Operations" },
      { name: "description", content: "A complete record of who changed what, when, and what the value was before." },
      { property: "og:title", content: "Audit log | KareVoyage Operations" },
      { property: "og:description", content: "Full change history across the portal." },
    ],
  }),
  component: AuditPage,
});

const gridColumns: GridColumn<AuditRow>[] = [
  { key: "id", header: "ID", width: 100, editable: false, frozen: true },
  { key: "user", header: "User", width: 160, validate: validators.required("User") },
  { key: "action", header: "Action", width: 170 },
  { key: "module", header: "Module", width: 140 },
  { key: "record", header: "Record", width: 150 },
  { key: "date", header: "Date", width: 130, type: "date", validate: validators.date },
  { key: "oldValue", header: "Old value", width: 180 },
  { key: "newValue", header: "New value", width: 180 },
];

function AuditPage() {
  const columns: TableColumn<AuditRow>[] = [
    {
      key: "event",
      header: "Event",
      sortValue: (a) => a.date,
      cell: (a) => (
        <div className="flex items-center gap-3">
          <Avatar name={a.user} className="h-7 w-7 text-[10px]" />
          <div className="min-w-0">
            <p className="truncate font-medium">{a.action}</p>
            <p className="truncate text-xs text-muted-foreground">{a.user} · {a.module} · {a.record}</p>
          </div>
        </div>
      ),
    },
    { key: "change", header: "Change", responsive: "hidden lg:table-cell", cell: (a) => (
      <span className="text-xs text-muted-foreground">{a.oldValue || "—"} → <span className="text-foreground">{a.newValue || "—"}</span></span>
    ) },
    { key: "date", header: "When", sortValue: (a) => a.date, cell: (a) => formatDate(a.date) },
  ];

  return (
    <ListPage
      title="Audit log"
      description="Every change made in the portal, attributable and reversible."
      countLabel={(n) => `${n} events`}
      searchPlaceholder="Search user, module, record…"
      rows={auditLog}
      columns={columns}
      getId={(a) => a.id}
      searchText={(a) => `${a.user} ${a.action} ${a.module} ${a.record}`}
      filters={[
        { key: "module", label: "Module", get: (a) => a.module },
        { key: "user", label: "User", get: (a) => a.user },
      ]}
      gridColumns={gridColumns}
      gridModule="Audit Log"
      emptyTitle="No activity"
      emptyMessage="Changes made in the portal will be recorded here."
    />
  );
}