"use client"

import { useLocale, useTranslations } from "next-intl"

import { Badge } from "@/shared/components/ui/badge"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/shared/components/ui/table"
import { EmptyTableRow } from "@/shared/components/ui/empty-table-row"
import { Pagination } from "@/shared/components/ui/pagination"
import { StatusBadge } from "@/shared/components/ui/status-badge"
import { formatDate } from "@/shared/lib/utils"
import type { AuditLog } from "../types"
import { AUDIT_STATUS_VARIANT, AUDIT_STATUS_CLASS_NAME } from "../types"
import { AuditLogDetailDialog } from "./audit-log-detail-dialog"

interface AuditLogTableProps {
  items: AuditLog[]
  page: number
  pageSize: number
  total: number
  totalPages: number
  onPageChange: (page: number) => void
}

export function AuditLogTable({
  items,
  page,
  pageSize,
  total,
  totalPages,
  onPageChange,
}: AuditLogTableProps) {
  const t = useTranslations("audit")
  const locale = useLocale()

  return (
    <div className="space-y-4">
      <div className="rounded-md border">
        <Table aria-label={t("title")}>
          <TableHeader className="bg-muted/40">
            <TableRow>
              <TableHead>{t("table.user")}</TableHead>
              <TableHead>{t("table.module")}</TableHead>
              <TableHead>{t("table.action")}</TableHead>
              <TableHead>{t("table.target")}</TableHead>
              <TableHead>{t("table.status")}</TableHead>
              <TableHead>{t("table.ipAddress")}</TableHead>
              <TableHead>{t("table.time")}</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {items.length === 0 ? (
              <EmptyTableRow colSpan={7} message={t("empty.audit")} />
            ) : (
              items.map((log) => (
                <TableRow key={log.id}>
                  <TableCell>
                    <div className="flex flex-col">
                      <span className="font-medium">{log.userName}</span>
                      <span className="text-xs text-muted-foreground">{log.userId}</span>
                    </div>
                  </TableCell>
                  <TableCell>
                    <Badge variant="outline" className="font-mono text-xs">
                      {log.module}
                    </Badge>
                  </TableCell>
                  <TableCell className="font-mono text-xs">{log.action}</TableCell>
                  <TableCell>
                    {log.targetId ? (
                      <div className="flex flex-col">
                        <span className="text-xs font-mono">{log.targetId}</span>
                        {log.targetType && (
                          <span className="text-xs text-muted-foreground">{log.targetType}</span>
                        )}
                      </div>
                    ) : (
                      <span className="text-muted-foreground">-</span>
                    )}
                  </TableCell>
                  <TableCell>
                    <StatusBadge
                      status={log.status}
                      variantMap={AUDIT_STATUS_VARIANT}
                      classNameMap={AUDIT_STATUS_CLASS_NAME}
                    />
                  </TableCell>
                  <TableCell className="text-xs text-muted-foreground font-mono">
                    {log.ipAddress ?? "-"}
                  </TableCell>
                  <TableCell className="text-xs text-muted-foreground">
                    {formatDate(log.createdAt, locale)}
                  </TableCell>
                  <TableCell>
                    <AuditLogDetailDialog type="audit" item={log} />
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>

      <Pagination
        page={page}
        pageSize={pageSize}
        total={total}
        totalPages={totalPages}
        onPageChange={onPageChange}
      />
    </div>
  )
}
