import { cn } from '@admin/lib/utils';
import Skeleton from './Skeleton';
import SkeletonButton from './SkeletonButton';
import SkeletonStats from './SkeletonStats';
import SkeletonTable from './SkeletonTable';

interface SkeletonUserListProps {
    /** Whether to show breadcrumbs */
    showBreadcrumbs?: boolean;
    /** Whether to show action buttons */
    showActionButtons?: boolean;
    /** Whether to show statistics cards */
    showStats?: boolean;
    /** Number of stat cards */
    statCount?: number;
    /** Whether to show table */
    showTable?: boolean;
    /** Number of table rows */
    tableRows?: number;
    /** Custom className */
    className?: string;
    /** Animation type */
    animation?: 'pulse' | 'wave' | 'none';
}

const SkeletonTableWithStateCard = ({
    showBreadcrumbs = true,
    showActionButtons = true,
    showStats = true,
    statCount = 4,
    showTable = true,
    tableRows = 6,
    className,
    animation = 'pulse',
}: SkeletonUserListProps) => {
    return (
        <div className={cn('no-scrollbar rounded-xl p-2', className)}>
            <div className="space-y-6">
                {/* Page Header */}
                <div className="mb-6 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
                    <div className="grid grid-cols-1 gap-1">
                        <Skeleton className="h-8 w-32 sm:w-48" animation={animation} />
                        {showBreadcrumbs && (
                            <div className="flex items-center text-sm">
                                <Skeleton className="h-4 w-24" animation={animation} />
                                <span className="mx-2 text-gray-400">›</span>
                                <Skeleton className="h-4 w-16" animation={animation} />
                            </div>
                        )}
                    </div>

                    {showActionButtons && (
                        <div className="flex flex-wrap gap-2 sm:gap-4">
                            <SkeletonButton size="sm" hasIcon iconPosition="left" animation={animation} />
                            <SkeletonButton size="sm" variant="outline" hasIcon iconPosition="left" animation={animation} />
                            <SkeletonButton size="sm" variant="outline" hasIcon iconPosition="left" animation={animation} />
                        </div>
                    )}
                </div>

                {/* Statistics Cards */}
                {showStats && <SkeletonStats count={statCount} layout="grid" gridCols={4} showIcon={true} animation={animation} className="mb-4" />}

                {/* Data Table */}
                {showTable && (
                    <div className="w-96 sm:w-full">
                        <SkeletonTable
                            rows={tableRows}
                            columns={6}
                            showHeader={true}
                            showPagination={true}
                            showBulkActions={true}
                            showFilters={true}
                            animation={animation}
                            columnWidths={['w-12', 'w-16', 'w-full', 'w-24', 'w-24', 'w-20', 'w-16']}
                        />
                    </div>
                )}
            </div>
        </div>
    );
};

export default SkeletonTableWithStateCard;