import type { LucideIcon } from 'lucide-react';

import type { ReactNode } from 'react';

import { Card, CardContent } from '@/Components/ui/card';
import { EmptyState } from '@/Components/ui/empty-state';
import { Skeleton } from '@/Components/ui/skeleton';

import { AdminPagination } from './AdminPagination';

interface PaginationData {
  current_page: number;
  last_page: number;
  from: number | null;
  to: number | null;
  total: number;
}

interface AdminDataTableProps {
  /** The table content (Table + TableHeader + TableBody). */
  children: ReactNode;
  /** Whether the data set is empty. */
  isEmpty: boolean;
  /** Whether a navigation request is in-flight (fades the table). */
  isNavigating?: boolean;
  /** Pagination data from Laravel's LengthAwarePaginator. Omit for non-paginated tables. */
  pagination?: PaginationData;
  /** Called when the user clicks a pagination page. Required when pagination is provided. */
  onPage?: (page: number) => void;
  /** Label for the pagination summary (e.g. "users", "entries"). */
  paginationLabel?: string;
  /** Empty state config. */
  emptyIcon?: LucideIcon;
  emptyTitle?: string;
  emptyDescription?: string;
  /** Optional action to show in the empty state (e.g. "Clear filters" button). */
  emptyAction?: ReactNode;
  /** Show skeleton rows instead of children (use during navigation / initial load). */
  isLoading?: boolean;
  /** Number of skeleton rows to render when isLoading is true. Defaults to 8. */
  skeletonRows?: number;
  /** Extra classes on the Card wrapper. */
  className?: string;
}

/**
 * Shared wrapper for admin list pages that need:
 * - Card container with zero-padding content
 * - Empty state when data is absent
 * - Navigation fade while loading
 * - Overflow-x scrolling
 * - AdminPagination below
 */
export function AdminDataTable({
  children,
  isEmpty,
  isNavigating = false,
  pagination,
  onPage,
  paginationLabel = 'items',
  emptyIcon,
  emptyTitle = 'No results found',
  emptyDescription,
  emptyAction,
  isLoading = false,
  skeletonRows = 8,
  className,
}: AdminDataTableProps) {
  return (
    <>
      <Card className={className}>
        <CardContent className="p-0">
          {isLoading ? (
            <div className="divide-y" aria-busy="true" aria-label="Loading">
              {Array.from({ length: skeletonRows }).map((_, i) => (
                <div key={i} className="flex items-center gap-3 px-4 py-3">
                  <Skeleton className="h-4 w-1/4" />
                  <Skeleton className="h-4 w-1/3" />
                  <Skeleton className="h-4 w-1/6" />
                  <Skeleton className="h-4 w-1/5" />
                </div>
              ))}
            </div>
          ) : isEmpty ? (
            <EmptyState
              icon={emptyIcon}
              title={emptyTitle}
              description={emptyDescription}
              action={emptyAction}
            />
          ) : (
            <div
              className={`overflow-x-auto transition-opacity ${isNavigating ? 'opacity-50' : ''}`}
            >
              {children}
            </div>
          )}
        </CardContent>
      </Card>

      {pagination && onPage && (
        <AdminPagination
          currentPage={pagination.current_page}
          lastPage={pagination.last_page}
          from={pagination.from}
          to={pagination.to}
          total={pagination.total}
          onPage={onPage}
          label={paginationLabel}
        />
      )}
    </>
  );
}