<script setup>
import { ref, computed } from 'vue';
import GoogleIcon from '@Shared/GoogleIcon.vue';

/** Propiedades */
const props = defineProps({
    modelValue: {
        type: String,
        default: 'A4'
    }
});

/** Eventos */
const emit = defineEmits(['update:modelValue']);

/** Referencias */
const isOpen = ref(false);

/** Tamaños de página disponibles */
const pageSizes = [
    {
        name: 'A4',
        label: 'A4 (210 x 297 mm)',
        width: 794,
        height: 1123,
        description: 'Estándar internacional'
    },
    {
        name: 'A3',
        label: 'A3 (297 x 420 mm)',
        width: 1123,
        height: 1587,
        description: 'Doble de A4'
    },
    {
        name: 'Tabloid',
        label: 'Tabloide (279 x 432 mm)',
        width: 1056,
        height: 1632,
        description: 'Doble carta'
    }
];

/** Propiedades computadas */
const selectedSize = computed(() => {
    return pageSizes.find(size => size.name === props.modelValue) || pageSizes[0];
});

/** Métodos */
const selectSize = (size) => {
    emit('update:modelValue', size.name);
    isOpen.value = false;
};

const closeDropdown = () => {
    isOpen.value = false;
};
</script>

<template>
    <div class="relative">
        <!-- Selector principal -->
        <button
            @click="isOpen = !isOpen"
            class="flex items-center gap-2 px-3 py-2 text-sm bg-white dark:bg-primary-d border border-gray-200 dark:border-primary/20 rounded-lg hover:bg-gray-50 dark:hover:bg-primary/10 transition-colors shadow-sm min-w-0"
        >
            <GoogleIcon name="aspect_ratio" class="text-gray-500 dark:text-primary-dt/70 flex-shrink-0 text-lg" />
            <span class="text-gray-700 dark:text-primary-dt font-medium truncate">{{ selectedSize.name }}</span>
            <GoogleIcon 
                name="expand_more" 
                class="text-gray-400 dark:text-primary-dt/50 transition-transform flex-shrink-0 text-lg"
                :class="{ 'rotate-180': isOpen }"
            />
        </button>

        <!-- Dropdown -->
        <div
            v-if="isOpen"
            v-click-away="closeDropdown"
            class="absolute top-full right-0 mt-2 w-64 bg-white dark:bg-primary-d border border-gray-200 dark:border-primary/20 rounded-lg shadow-xl z-50 py-2"
        >
            <div class="px-3 py-2 text-xs font-semibold text-gray-500 dark:text-primary-dt/70 uppercase tracking-wider border-b border-gray-100 dark:border-primary/20">
                Tamaños de página
            </div>
            
            <div class="max-h-60 overflow-y-auto">
                <button
                    v-for="size in pageSizes"
                    :key="size.name"
                    @click="selectSize(size)"
                    class="w-full flex items-center gap-3 px-3 py-2.5 hover:bg-gray-50 dark:hover:bg-primary/10 transition-colors text-left"
                    :class="{
                        'bg-blue-50 dark:bg-blue-900/20 border-l-2 border-blue-500': selectedSize.name === size.name
                    }"
                >
                    <!-- Miniatura del tamaño de página -->
                    <div class="flex-shrink-0">
                        <div 
                            class="w-6 h-8 border border-gray-300 dark:border-primary/30 rounded bg-white dark:bg-primary-d flex items-center justify-center"
                            :class="{
                                'border-blue-500 dark:border-blue-400 bg-blue-50 dark:bg-blue-900/20': selectedSize.name === size.name
                            }"
                        >
                            <div 
                                class="bg-gray-300 dark:bg-primary/40 rounded-sm"
                                :style="{
                                    width: `${Math.min(16, (size.width / size.height) * 24)}px`,
                                    height: `${Math.min(24, (size.height / size.width) * 16)}px`
                                }"
                                :class="{
                                    'bg-blue-400 dark:bg-blue-600': selectedSize.name === size.name
                                }"
                            ></div>
                        </div>
                    </div>
                    
                    <!-- Información del tamaño -->
                    <div class="flex-1 min-w-0">
                        <div class="font-medium text-gray-900 dark:text-primary-dt text-sm">{{ size.name }}</div>
                        <div class="text-xs text-gray-500 dark:text-primary-dt/70 truncate">
                            {{ size.description }}
                        </div>
                    </div>
                    
                    <!-- Indicador de selección -->
                    <div v-if="selectedSize.name === size.name" class="flex-shrink-0">
                        <div class="w-4 h-4 bg-blue-500 rounded-full flex items-center justify-center">
                            <GoogleIcon name="check" class="text-white text-xs" />
                        </div>
                    </div>
                </button>
            </div>
        </div>
    </div>
</template>