import {
  Table as ChakraTable,
  Thead,
  Tbody,
  Tr,
  Th,
  Td,
  TableProps as ChakraTableProps,
  TableContainer,
  Text,
  Skeleton,
  useColorModeValue,
  Box,
} from '@chakra-ui/react';
import { ReactNode } from 'react';

export interface Column<T> {
  header: string;
  accessor: keyof T | ((item: T) => ReactNode);
  isNumeric?: boolean;
  width?: string | number;
  cellProps?: (item: T) => Record<string, any>;
}

interface AdminTableProps<T> extends ChakraTableProps {
  columns: Column<T>[];
  data: T[] | undefined;
  isLoading?: boolean;
  emptyMessage?: string;
  onRowClick?: (item: T) => void;
  rowHoverEffect?: boolean;
}

export function AdminTable<T>({
  columns,
  data,
  isLoading = false,
  emptyMessage = 'No data available',
  onRowClick,
  rowHoverEffect = true,
  ...props
}: AdminTableProps<T>) {
  const borderColor = useColorModeValue('gray.200', 'gray.700');
  const hoverBg = useColorModeValue('gray.50', 'gray.700');
  const headerBg = useColorModeValue('gray.50', 'gray.700');
  const headerColor = useColorModeValue('gray.600', 'gray.300');

  if (isLoading) {
    return (
      <TableContainer>
        <ChakraTable variant="simple" {...props}>
          <Thead>
            <Tr>
              {columns.map((column, index) => (
                <Th key={index} bg={headerBg} color={headerColor}>
                  {column.header}
                </Th>
              ))}
            </Tr>
          </Thead>
          <Tbody>
            {[1, 2, 3].map((row) => (
              <Tr key={row}>
                {columns.map((column, colIndex) => (
                  <Td key={colIndex}>
                    <Skeleton height="20px" />
                  </Td>
                ))}
              </Tr>
            ))}
          </Tbody>
        </ChakraTable>
      </TableContainer>
    );
  }

  if (!data || data.length === 0) {
    return (
      <Box
        p={8}
        textAlign="center"
        borderWidth="1px"
        borderRadius="md"
        borderColor={borderColor}
      >
        <Text color="gray.500">{emptyMessage}</Text>
      </Box>
    );
  }

  return (
    <TableContainer
      borderWidth="1px"
      borderRadius="md"
      borderColor={borderColor}
      overflowX="auto"
    >
      <ChakraTable variant="simple" {...props}>
        <Thead>
          <Tr>
            {columns.map((column, index) => (
              <Th
                key={index}
                isNumeric={column.isNumeric}
                width={column.width}
                bg={headerBg}
                color={headerColor}
                textTransform="uppercase"
                fontSize="xs"
                letterSpacing="wider"
                borderBottomWidth="1px"
                borderColor={borderColor}
              >
                {column.header}
              </Th>
            ))}
          </Tr>
        </Thead>
        <Tbody>
          {data.map((item, rowIndex) => (
            <Tr
              key={rowIndex}
              onClick={() => onRowClick?.(item)}
              cursor={onRowClick ? 'pointer' : 'default'}
              _hover={rowHoverEffect ? { bg: hoverBg } : {}}
              transition="background-color 0.2s"
            >
              {columns.map((column, colIndex) => {
                const cellProps = column.cellProps?.(item) || {};
                return (
                  <Td
                    key={colIndex}
                    isNumeric={column.isNumeric}
                    borderColor={borderColor}
                    {...cellProps}
                  >
                    {typeof column.accessor === 'function'
                      ? column.accessor(item)
                      : (item[column.accessor] as ReactNode)}
                  </Td>
                );
              })}
            </Tr>
          ))}
        </Tbody>
      </ChakraTable>
    </TableContainer>
  );
}
