'use client';

import { ReactNode } from 'react';
import { cn } from '@/lib/utils';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { Skeleton } from '@/components/ui/skeleton';
import { Button } from '@/components/ui/button';

interface PageTableProps {
  children: ReactNode;
  className?: string;
}

export function PageTable({ children, className }: PageTableProps) {
  return (
    <div className={cn('border rounded-lg overflow-hidden', className)}>
      {children}
    </div>
  );
}

interface PageTableContentProps {
  children: ReactNode;
}

export function PageTableContent({ children }: PageTableContentProps) {
  return (
    <Table>
      {children}
    </Table>
  );
}

interface PageTableLoadingProps {
  columns: number;
  rows?: number;
}

export function PageTableLoading({ columns, rows = 5 }: PageTableLoadingProps) {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          {Array.from({ length: columns }).map((_, i) => (
            <TableHead key={i}>
              <Skeleton className="h-4 w-20" />
            </TableHead>
          ))}
        </TableRow>
      </TableHeader>
      <TableBody>
        {Array.from({ length: rows }).map((_, rowIdx) => (
          <TableRow key={rowIdx}>
            {Array.from({ length: columns }).map((_, colIdx) => (
              <TableCell key={colIdx}>
                <Skeleton className="h-4 w-full" />
              </TableCell>
            ))}
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

interface PageTableEmptyProps {
  colSpan: number;
  message?: string;
}

export function PageTableEmpty({ colSpan, message = '暂无数据' }: PageTableEmptyProps) {
  return (
    <TableRow>
      <TableCell colSpan={colSpan} className="text-center py-8 text-muted-foreground">
        {message}
      </TableCell>
    </TableRow>
  );
}

interface PageTablePaginationProps {
  page: number;
  totalPages: number;
  total: number;
  onPageChange: (page: number) => void;
  pageSize?: number;
  className?: string;
}

export function PageTablePagination({
  page,
  totalPages,
  total,
  onPageChange,
  pageSize = 20,
  className,
}: PageTablePaginationProps) {
  return (
    <div className={cn('flex items-center justify-between', className)}>
      <div className="text-sm text-muted-foreground">
        第 {page} 页，共 {totalPages || 1} 页，总计 {total} 条
      </div>
      <div className="flex gap-2">
        <Button
          variant="outline"
          size="sm"
          disabled={page <= 1}
          onClick={() => onPageChange(page - 1)}
        >
          上一页
        </Button>
        <Button
          variant="outline"
          size="sm"
          disabled={page >= (totalPages || 1)}
          onClick={() => onPageChange(page + 1)}
        >
          下一页
        </Button>
      </div>
    </div>
  );
}

export default PageTable;
