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

interface SkeletonFormProps {
    /** Number of form fields */
    fields?: number;
    /** Form layout */
    layout?: 'vertical' | 'horizontal' | 'grid';
    /** Grid columns (when layout is 'grid') */
    gridCols?: 1 | 2 | 3;
    /** Whether to show form title */
    showTitle?: boolean;
    /** Whether to show submit button */
    showSubmitButton?: boolean;
    /** Field types configuration */
    fieldTypes?: ('input' | 'textarea' | 'select' | 'checkbox' | 'radio' | 'file')[];
    /** Custom className */
    className?: string;
    /** Animation type */
    animation?: 'pulse' | 'wave' | 'none';
}

const SkeletonForm = ({
    fields = 4,
    layout = 'vertical',
    gridCols = 1,
    showTitle = true,
    showSubmitButton = true,
    fieldTypes = [],
    className,
    animation = 'pulse',
}: SkeletonFormProps) => {
    const getLayoutClasses = () => {
        if (layout === 'horizontal') return 'space-y-4';
        if (layout === 'grid') return `grid grid-cols-1 md:grid-cols-${gridCols} gap-4`;
        return 'space-y-4';
    };

    const getFieldType = (index: number) => {
        return fieldTypes[index] || 'input';
    };

    const renderField = (index: number, type: string) => {
        const commonClasses = 'space-y-2';

        switch (type) {
            case 'textarea':
                return (
                    <div key={index} className={commonClasses}>
                        <Skeleton className="h-4 w-24" animation={animation} />
                        <Skeleton className="h-24 w-full rounded-md border" animation={animation} />
                    </div>
                );
            case 'select':
                return (
                    <div key={index} className={commonClasses}>
                        <Skeleton className="h-4 w-24" animation={animation} />
                        <Skeleton className="h-10 w-full rounded-md border" animation={animation} />
                    </div>
                );
            case 'checkbox':
                return (
                    <div key={index} className="flex items-center gap-2">
                        <Skeleton className="h-4 w-4 rounded" animation={animation} />
                        <Skeleton className="h-4 w-32" animation={animation} />
                    </div>
                );
            case 'radio':
                return (
                    <div key={index} className={commonClasses}>
                        <Skeleton className="h-4 w-24" animation={animation} />
                        <div className="space-y-2">
                            {Array.from({ length: 3 }, (_, i) => (
                                <div key={i} className="flex items-center gap-2">
                                    <Skeleton className="h-4 w-4 rounded-full" animation={animation} />
                                    <Skeleton className="h-4 w-20" animation={animation} />
                                </div>
                            ))}
                        </div>
                    </div>
                );
            case 'file':
                return (
                    <div key={index} className={commonClasses}>
                        <Skeleton className="h-4 w-24" animation={animation} />
                        <div className="rounded-lg border-2 border-dashed border-gray-300 p-6 dark:border-gray-600">
                            <div className="space-y-2 text-center">
                                <Skeleton className="mx-auto h-8 w-8 rounded" animation={animation} />
                                <Skeleton className="mx-auto h-4 w-32" animation={animation} />
                                <Skeleton className="mx-auto h-3 w-24" animation={animation} />
                            </div>
                        </div>
                    </div>
                );
            default: // input
                return (
                    <div key={index} className={commonClasses}>
                        <Skeleton className="h-4 w-24" animation={animation} />
                        <Skeleton className="h-10 w-full rounded-md border" animation={animation} />
                    </div>
                );
        }
    };

    return (
        <div className={cn('space-y-6', className)}>
            {showTitle && (
                <div className="space-y-2">
                    <Skeleton className="h-6 w-48" animation={animation} />
                    <Skeleton className="h-4 w-64" animation={animation} />
                </div>
            )}

            <div className={getLayoutClasses()}>{Array.from({ length: fields }, (_, index) => renderField(index, getFieldType(index)))}</div>

            {showSubmitButton && (
                <div className="flex justify-start">
                    <Skeleton className="h-10 w-32 rounded-md" animation={animation} />
                </div>
            )}
        </div>
    );
};

export default SkeletonForm;