import {
  type ColumnDef,
  flexRender,
  getCoreRowModel,
  useReactTable,
} from "@tanstack/react-table"
import { Loader } from "lucide-react"
import { Pagination, type PaginationProps } from "@/components/ui/pagination"
import {
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  Table as TableRoot,
  TableRow,
} from "@/components/ui/table"
import { cn } from "@/lib/utils"

export type DataTableProps<T> = {
  data: T[]
  status: "load" | "done" | "fail"
  columns: ColumnDef<T>[]
  pagination?: PaginationProps
  classNames?: {
    headRow?: string
    dataRow?: string
  }
}

export default function DataTable<T extends Record<string, unknown>>(
  props: DataTableProps<T>,
) {
  const table = useReactTable({
    data: props.data,
    columns: props.columns,
    getCoreRowModel: getCoreRowModel(),
    manualPagination: true,
    rowCount: props.pagination?.total ?? props.data.length,
    state: {
      pagination: {
        pageIndex: props.pagination?.page ?? 0,
        pageSize: props.pagination?.size ?? props.data.length,
      },
      columnFilters: [],
    },
    autoResetPageIndex: false,
  })
  console.log("data length:", props.data.length)
  console.log("pageSize:", props.pagination?.size ?? props.data.length)
  console.log("rows:", table.getRowModel().rows.length)
  return (
    <>
      {/* 数据表 */}
      <div className="rounded-md relative bg-card">
        <TableRoot>
          <TableHeader>
            {table.getHeaderGroups().map(group => (
              <TableRow key={group.id}>
                {group.headers.map(header => (
                  <TableHead key={header.id} colSpan={header.colSpan}>
                    {header.isPlaceholder
                      ? null
                      : flexRender(
                          header.column.columnDef.header,
                          header.getContext(),
                        )}
                  </TableHead>
                ))}
              </TableRow>
            ))}
          </TableHeader>
          <TableBody>
            {props.status === "fail" ? (
              <TableRow>
                <TableCell
                  colSpan={props.columns.length}
                  className="text-center text-fail"
                >
                  加载失败
                </TableCell>
              </TableRow>
            ) : !props.data?.length ? (
              <TableRow>
                <TableCell
                  colSpan={props.columns.length}
                  className="text-center"
                >
                  暂无数据
                </TableCell>
              </TableRow>
            ) : (
              table.getRowModel().rows.map(row => (
                <TableRow
                  key={row.id}
                  data-state={row.getIsSelected() && "selected"}
                  className={cn("h-14", props.classNames?.dataRow)}
                >
                  {row.getVisibleCells().map(cell => (
                    <TableCell key={cell.id}>
                      {flexRender(
                        cell.column.columnDef.cell,
                        cell.getContext(),
                      )}
                    </TableCell>
                  ))}
                </TableRow>
              ))
            )}
          </TableBody>
        </TableRoot>
        {props.status === "load" && (
          <div className="absolute inset-0 bg-white/10 backdrop-blur-xs flex items-center justify-center gap-2 transition">
            <Loader className="animate-spin" />
            <span>加载中</span>
          </div>
        )}
      </div>

      {/* 分页器 */}
      {props.pagination && <Pagination {...props.pagination} />}
    </>
  )
}