<script setup>
/**
 * SkeletonLoader - Componente de carga esqueleto para UX mobile-first
 * Reemplaza spinners con placeholders que muestran la estructura del contenido
 */
defineProps({
    type: {
        type: String,
        default: 'text',
        validator: (v) => ['text', 'avatar', 'card', 'table', 'list', 'stats', 'image', 'custom'].includes(v),
    },
    lines: {
        type: Number,
        default: 3,
    },
    animated: {
        type: Boolean,
        default: true,
    },
    // For custom width
    width: {
        type: String,
        default: 'full',
    },
    // For avatar/image
    size: {
        type: String,
        default: 'md',
        validator: (v) => ['xs', 'sm', 'md', 'lg', 'xl'].includes(v),
    },
    // Number of items for lists/tables
    count: {
        type: Number,
        default: 5,
    },
});

const avatarSizes = {
    xs: 'w-6 h-6',
    sm: 'w-8 h-8',
    md: 'w-10 h-10',
    lg: 'w-12 h-12',
    xl: 'w-16 h-16',
};

const widthClasses = {
    full: 'w-full',
    '3/4': 'w-3/4',
    '2/3': 'w-2/3',
    '1/2': 'w-1/2',
    '1/3': 'w-1/3',
    '1/4': 'w-1/4',
};

// Generate random widths for text lines
const getRandomWidth = (index) => {
    const widths = ['w-full', 'w-11/12', 'w-10/12', 'w-9/12', 'w-8/12', 'w-7/12'];
    return widths[index % widths.length];
};
</script>

<template>
    <!-- Text Skeleton -->
    <div v-if="type === 'text'" :class="['space-y-2', animated && 'animate-pulse']">
        <div 
            v-for="i in lines" 
            :key="i"
            :class="[
                'h-4 bg-gray-200 dark:bg-gray-700 rounded',
                i === lines ? 'w-2/3' : getRandomWidth(i)
            ]"
        ></div>
    </div>

    <!-- Avatar Skeleton -->
    <div 
        v-else-if="type === 'avatar'" 
        :class="[
            'bg-gray-200 dark:bg-gray-700 rounded-full',
            avatarSizes[size],
            animated && 'animate-pulse'
        ]"
    ></div>

    <!-- Image Skeleton -->
    <div 
        v-else-if="type === 'image'" 
        :class="[
            'bg-gray-200 dark:bg-gray-700 rounded-xl aspect-video',
            widthClasses[width],
            animated && 'animate-pulse'
        ]"
    >
        <div class="flex items-center justify-center h-full">
            <svg class="w-10 h-10 text-gray-300 dark:text-gray-600" fill="currentColor" viewBox="0 0 24 24">
                <path d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
            </svg>
        </div>
    </div>

    <!-- Stats Card Skeleton -->
    <div 
        v-else-if="type === 'stats'" 
        :class="[
            'bg-white dark:bg-gray-800 rounded-xl shadow-sm p-4 border-l-4 border-gray-200 dark:border-gray-700',
            animated && 'animate-pulse'
        ]"
    >
        <div class="h-8 bg-gray-200 dark:bg-gray-700 rounded w-20 mb-2"></div>
        <div class="h-3 bg-gray-200 dark:bg-gray-700 rounded w-24"></div>
    </div>

    <!-- Card Skeleton -->
    <div 
        v-else-if="type === 'card'" 
        :class="[
            'bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6',
            animated && 'animate-pulse'
        ]"
    >
        <div class="flex items-start gap-4">
            <div class="w-12 h-12 bg-gray-200 dark:bg-gray-700 rounded-full flex-shrink-0"></div>
            <div class="flex-1 space-y-3">
                <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4"></div>
                <div class="h-3 bg-gray-200 dark:bg-gray-700 rounded w-1/2"></div>
                <div class="h-3 bg-gray-200 dark:bg-gray-700 rounded w-5/6"></div>
            </div>
        </div>
    </div>

    <!-- Table Skeleton -->
    <div 
        v-else-if="type === 'table'" 
        :class="[
            'bg-white dark:bg-gray-800 rounded-xl shadow-sm overflow-hidden',
            animated && 'animate-pulse'
        ]"
    >
        <!-- Header -->
        <div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 flex gap-4">
            <div class="h-4 bg-gray-200 dark:bg-gray-600 rounded w-1/4"></div>
            <div class="h-4 bg-gray-200 dark:bg-gray-600 rounded w-1/4"></div>
            <div class="h-4 bg-gray-200 dark:bg-gray-600 rounded w-1/4"></div>
            <div class="h-4 bg-gray-200 dark:bg-gray-600 rounded w-1/4"></div>
        </div>
        <!-- Rows -->
        <div v-for="i in count" :key="i" class="px-4 py-4 border-b border-gray-100 dark:border-gray-700 last:border-0">
            <div class="flex gap-4 items-center">
                <div class="w-8 h-8 bg-gray-200 dark:bg-gray-700 rounded-full flex-shrink-0"></div>
                <div class="flex-1 space-y-2">
                    <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/3"></div>
                    <div class="h-3 bg-gray-200 dark:bg-gray-700 rounded w-1/4"></div>
                </div>
                <div class="h-6 bg-gray-200 dark:bg-gray-700 rounded-full w-20"></div>
                <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-24"></div>
            </div>
        </div>
    </div>

    <!-- List Skeleton -->
    <div 
        v-else-if="type === 'list'" 
        :class="['space-y-4', animated && 'animate-pulse']"
    >
        <div 
            v-for="i in count" 
            :key="i"
            class="flex items-center gap-4 p-4 bg-white dark:bg-gray-800 rounded-xl"
        >
            <div class="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-full flex-shrink-0"></div>
            <div class="flex-1 space-y-2">
                <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-2/3"></div>
                <div class="h-3 bg-gray-200 dark:bg-gray-700 rounded w-1/3"></div>
            </div>
        </div>
    </div>

    <!-- Custom Slot -->
    <div v-else :class="animated && 'animate-pulse'">
        <slot></slot>
    </div>
</template>
