import { cn } from '@/lib/utils';
import * as React from 'react';

/*
 * Primitivo base: un bloque con shimmer. `animate-pulse` (Tailwind, ya
 * respeta `prefers-reduced-motion` vía la regla global en globals.css que
 * fuerza `animation-duration: 0.01ms` en todo el árbol) es suficiente y evita
 * inventar un keyframe nuevo en tailwind.config.ts, que esta tarea no debe
 * tocar.
 */
const Skeleton = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
    ({ className, ...props }, ref) => (
        <div
            ref={ref}
            className={cn('animate-pulse rounded-md bg-muted', className)}
            {...props}
        />
    )
);
Skeleton.displayName = 'Skeleton';

/*
 * Fila de lista: ícono/avatar + dos líneas de texto + acción a la derecha.
 * Calca la forma real de las filas de OTs/clientes/vehículos que ya se listan
 * en el sistema, para que la carga no "salte" cuando llegan los datos.
 */
function SkeletonListRow({ className }: { className?: string }) {
    return (
        <div className={cn('flex items-center gap-3 px-4 py-3 md:px-5', className)}>
            <Skeleton className="h-10 w-10 shrink-0 rounded-full" />
            <div className="min-w-0 flex-1 space-y-2">
                <Skeleton className="h-4 w-2/5" />
                <Skeleton className="h-3 w-3/5" />
            </div>
            <Skeleton className="h-8 w-16 shrink-0 rounded-full" />
        </div>
    );
}

/*
 * Tarjeta de métrica: eyebrow corto + número grande, igual a las tarjetas de
 * `stats` de `DashboardPageIntro`.
 */
function SkeletonStatCard({ className }: { className?: string }) {
    return (
        <div className={cn('rounded-xl border border-border bg-card p-4', className)}>
            <div className="flex items-start justify-between gap-3">
                <Skeleton className="h-3 w-20" />
                <Skeleton className="h-4 w-4 shrink-0 rounded-full" />
            </div>
            <Skeleton className="mt-3 h-7 w-16" />
        </div>
    );
}

type SkeletonTableProps = {
    rows?: number;
    columns?: number;
    className?: string;
};

/*
 * Filas con columnas, para usar dentro de `<Table>`. No arma el `<table>`
 * completo a propósito: quien lo consuma decide si va dentro de `TableBody`
 * real o de un placeholder simple.
 */
function SkeletonTable({ rows = 5, columns = 4, className }: SkeletonTableProps) {
    return (
        <div className={cn('space-y-3 p-4 md:p-5', className)}>
            {Array.from({ length: rows }).map((_, rowIndex) => (
                <div key={rowIndex} className="flex items-center gap-4">
                    {Array.from({ length: columns }).map((_, columnIndex) => (
                        <Skeleton
                            key={columnIndex}
                            className={cn('h-4 flex-1', columnIndex === 0 && 'max-w-[30%]')}
                        />
                    ))}
                </div>
            ))}
        </div>
    );
}

/*
 * Encabezado de detalle: título + 2-3 metadatos en fila, como el encabezado
 * de una OT/vehículo/cliente individual.
 */
function SkeletonDetailHeader({ className }: { className?: string }) {
    return (
        <div className={cn('space-y-3', className)}>
            <Skeleton className="h-7 w-1/3" />
            <div className="flex flex-wrap items-center gap-3">
                <Skeleton className="h-4 w-24" />
                <Skeleton className="h-4 w-32" />
                <Skeleton className="h-4 w-20" />
            </div>
        </div>
    );
}

export { Skeleton, SkeletonListRow, SkeletonStatCard, SkeletonTable, SkeletonDetailHeader };