import {
  Card,
  CardContent,
  Chip,
  Stack,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TablePagination,
  TableRow,
  TextField,
  Typography,
} from "@mui/material";
import { useQuery } from "@tanstack/react-query";
import { useState } from "react";
import { api, buildQuery } from "../../api/client";
import type { AuditEntry } from "../../api/types";

interface GlobalAudit {
  items: AuditEntry[];
  total: number;
  page: number;
  page_size: number;
}

export function AdminAuditPage() {
  const [page, setPage] = useState(1);
  const [ncrNumber, setNcrNumber] = useState("");

  const audit = useQuery({
    queryKey: ["admin-audit", page, ncrNumber],
    queryFn: () =>
      api<GlobalAudit>(
        `/api/admin/audit${buildQuery({ page, page_size: 50, ncr_number: ncrNumber })}`,
      ),
    placeholderData: (prev) => prev,
  });

  return (
    <Card>
      <CardContent>
        <Stack direction="row" spacing={1} alignItems="center" sx={{ mb: 2 }}>
          <TextField
            size="small"
            label="Filter by NCR number"
            value={ncrNumber}
            onChange={(e) => {
              setNcrNumber(e.target.value);
              setPage(1);
            }}
          />
          <Typography variant="body2" color="text.secondary">
            Immutable system-wide audit trail (field-level before/after values).
          </Typography>
        </Stack>
        <Table size="small">
          <TableHead>
            <TableRow>
              <TableCell>When</TableCell>
              <TableCell>Who</TableCell>
              <TableCell>Action</TableCell>
              <TableCell>Field</TableCell>
              <TableCell>Before</TableCell>
              <TableCell>After</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {(audit.data?.items ?? []).map((a) => (
              <TableRow key={a.id}>
                <TableCell sx={{ whiteSpace: "nowrap" }}>
                  {new Date(a.created_at).toLocaleString()}
                </TableCell>
                <TableCell>{a.user.display_name}</TableCell>
                <TableCell>
                  <Chip size="small" label={a.action.replace(/_/g, " ")} />
                  {a.detail && (
                    <Typography variant="caption" display="block" color="text.secondary">
                      {a.detail}
                    </Typography>
                  )}
                </TableCell>
                <TableCell>{a.field_name ?? ""}</TableCell>
                <TableCell sx={{ maxWidth: 200, overflowWrap: "anywhere" }}>
                  {a.old_value ?? ""}
                </TableCell>
                <TableCell sx={{ maxWidth: 200, overflowWrap: "anywhere" }}>
                  {a.new_value ?? ""}
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
        <TablePagination
          component="div"
          count={audit.data?.total ?? 0}
          page={page - 1}
          onPageChange={(_, p) => setPage(p + 1)}
          rowsPerPage={50}
          rowsPerPageOptions={[50]}
        />
      </CardContent>
    </Card>
  );
}