import {
    TableBody,
    TableCell,
    Table as TableComp,
    TableHead,
    TableHeader,
    TableRow,
} from "@repo/shadcn-ui/components";
// SkeletonTable.tsx
import * as React from "react";
import { SkeletonDataTableFooter } from './skeleton-data-table-footer.tsx';

export type SkeletonTableProps = {
    columns?: number;
    rows?: number;
    stickyHeader?: boolean;
    showFooter?: boolean;
    footerProps?: { pageIndex?: number; pageSize?: number; totalItems?: number };
}

// Componente Skeleton de tabla genérico
export const SkeletonDataTable = ({
    columns = 6,
    rows = 10,
    stickyHeader = true,
    showFooter = true,
    footerProps,
}: SkeletonTableProps) => {
    // Genera arrays para mapear
    const cols = React.useMemo(() => Array.from({ length: columns }), [columns]);
    const rws = React.useMemo(() => Array.from({ length: rows }), [rows]);

    return (
        <div className="overflow-hidden rounded-md border bg-background" role="status" aria-busy="true">
            <TableComp className="w-full text-sm">
                <TableHeader className={stickyHeader ? "sticky top-0 z-10 bg-muted" : ""}>
                    <TableRow>
                        {cols.map((_, i) => (
                            <TableHead key={`sk-th-${i}`}>
                                <div className="h-4 w-24 rounded bg-foreground/10 animate-pulse motion-reduce:animate-none" />
                            </TableHead>
                        ))}
                    </TableRow>
                </TableHeader>

                <TableBody>
                    {rws.map((_, r) => (
                        <TableRow key={`sk-tr-${r}`}>
                            {cols.map((_, c) => (
                                <TableCell key={`sk-td-${r}-${c}`} className="align-top">
                                    <div
                                        className={[
                                            "h-4 rounded bg-foreground/10 animate-pulse motion-reduce:animate-none",
                                            c === 0 ? "w-36" : "w-full",
                                            "my-2",
                                        ].join(" ")}
                                        style={{ maxWidth: c % 3 === 0 ? "14rem" : c % 3 === 1 ? "10rem" : "100%" }}
                                    />
                                    {c > 0 && (
                                        <div className="mt-2 h-3 w-1/2 rounded bg-foreground/10 animate-pulse motion-reduce:animate-none" />
                                    )}
                                </TableCell>
                            ))}
                        </TableRow>
                    ))}
                </TableBody>
            </TableComp>

            {showFooter && <SkeletonDataTableFooter {...footerProps} />}

            <span className="sr-only">Loading table…</span>
        </div>
    );
}