"use client";

import { ReactNode } from "react";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Pagination } from "@/components/shared/pagination";
import { SkeletonTable } from "@/components/shared/skeleton";
import { EmptyState } from "@/components/shared/empty-state";
import { LucideIcon } from "lucide-react";

export interface DataTableColumn<T> {
  header: string;
  accessor?: keyof T;
  cell?: (row: T) => ReactNode;
  className?: string;
}

export interface DataTablePagination {
  currentPage: number;
  totalPages: number;
  perPage: number;
  total: number;
  from: number;
  to: number;
  onPageChange: (page: number) => void;
  onPerPageChange?: (perPage: number) => void;
}

export interface DataTableEmptyState {
  icon?: LucideIcon;
  title: string;
  description?: string;
  action?: {
    label: string;
    href?: string;
    onClick?: () => void;
  };
}

interface DataTableWrapperProps<T> {
  columns: DataTableColumn<T>[];
  data: T[];
  isLoading?: boolean;
  pagination?: DataTablePagination;
  emptyState?: DataTableEmptyState;
  getRowKey: (row: T) => string | number;
  onRowClick?: (row: T) => void;
  className?: string;
}

export function DataTableWrapper<T>({
  columns,
  data,
  isLoading = false,
  pagination,
  emptyState,
  getRowKey,
  onRowClick,
  className = "",
}: DataTableWrapperProps<T>) {
  // Show loading state
  if (isLoading) {
    return (
      <SkeletonTable
        rows={pagination?.perPage || 5}
        columns={columns.length}
      />
    );
  }

  // Show empty state
  if (data.length === 0 && emptyState) {
    return <EmptyState {...emptyState} />;
  }

  return (
    <>
      <div className={`bg-card rounded-lg border border-border overflow-hidden ${className}`}>
        <Table>
          <TableHeader>
            <TableRow className="bg-muted/50 hover:bg-muted/50">
              {columns.map((column, index) => (
                <TableHead
                  key={index}
                  className={`text-start font-bold ${
                    column.className || ""
                  }`}
                >
                  {column.header}
                </TableHead>
              ))}
            </TableRow>
          </TableHeader>
          <TableBody>
            {data.map((row, index) => (
              <TableRow
                key={getRowKey(row)}
                onClick={() => onRowClick?.(row)}
                className={`${index % 2 === 1 ? "bg-muted/30" : ""} ${
                  onRowClick ? "cursor-pointer hover:bg-muted/50" : ""
                }`}
              >
                {columns.map((column, colIndex) => {
                  const content = column.cell
                    ? column.cell(row)
                    : column.accessor
                    ? String(row[column.accessor])
                    : null;

                  return (
                    <TableCell
                      key={colIndex}
                      className={`text-start ${
                        column.className || ""
                      }`}
                    >
                      {content}
                    </TableCell>
                  );
                })}
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>

      {/* Pagination */}
      {pagination && (
        <Pagination
          currentPage={pagination.currentPage}
          totalPages={pagination.totalPages}
          perPage={pagination.perPage}
          total={pagination.total}
          from={pagination.from}
          to={pagination.to}
          onPageChange={pagination.onPageChange}
          onPerPageChange={pagination.onPerPageChange}
        />
      )}
    </>
  );
}