<script setup>
import AdminLayout from '@/Layouts/AdminLayout.vue';
import { Head, Link, useForm, router } from '@inertiajs/vue3';
import { ref } from 'vue';

const props = defineProps({
    categories: Array,
    coupons: Array,
    shippingSettings: Object,
    shippingZones: Array,
    taxSettings: Object,
    generalSettings: Object,
});

const activeTab = ref('general');

const tabs = [
    { id: 'general', name: 'General', icon: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z M15 12a3 3 0 11-6 0 3 3 0 016 0z' },
    { id: 'shipping', name: 'Envío', icon: 'M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0' },
    { id: 'tax', name: 'Impuestos', icon: 'M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16l3.5-2 3.5 2 3.5-2 3.5 2z' },
    { id: 'quicklinks', name: 'Accesos Rápidos', icon: 'M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1' },
];

// Forms
const generalForm = useForm({
    store_name: props.generalSettings?.store_name || '',
    store_description: props.generalSettings?.store_description || '',
    store_email: props.generalSettings?.store_email || '',
    store_phone: props.generalSettings?.store_phone || '',
    store_currency: props.generalSettings?.store_currency || 'USD',
    enable_store: props.generalSettings?.enable_store || false,
});

const shippingForm = useForm({
    flat_rate: props.shippingSettings?.flat_rate || 0,
    free_shipping_threshold: props.shippingSettings?.free_shipping_threshold || 0,
    enable_free_shipping: props.shippingSettings?.enable_free_shipping || false,
    shipping_countries: props.shippingSettings?.shipping_countries || '',
});

const taxForm = useForm({
    default_tax_rate: props.taxSettings?.default_tax_rate || 0,
    enable_tax: props.taxSettings?.enable_tax || false,
    tax_included: props.taxSettings?.tax_included || false,
});

// Shipping Zone Form
const showZoneModal = ref(false);
const editingZone = ref(null);
const zoneForm = useForm({
    name: '',
    cost: 0,
    delivery_time: '',
    is_active: true,
});

const openAddZone = () => {
    editingZone.value = null;
    zoneForm.reset();
    zoneForm.name = '';
    zoneForm.cost = 0;
    zoneForm.delivery_time = '';
    zoneForm.is_active = true;
    showZoneModal.value = true;
};

const openEditZone = (zone) => {
    editingZone.value = zone;
    zoneForm.name = zone.name;
    zoneForm.cost = zone.cost;
    zoneForm.delivery_time = zone.delivery_time || '';
    zoneForm.is_active = zone.is_active;
    showZoneModal.value = true;
};

const saveZone = () => {
    if (editingZone.value) {
        zoneForm.put(route('admin.store.settings.shipping-zones.update', editingZone.value.id), {
            onSuccess: () => { showZoneModal.value = false; },
        });
    } else {
        zoneForm.post(route('admin.store.settings.shipping-zones.store'), {
            onSuccess: () => { showZoneModal.value = false; },
        });
    }
};

const deleteZone = (zone) => {
    if (confirm(`¿Eliminar la zona "${zone.name}"?`)) {
        router.delete(route('admin.store.settings.shipping-zones.destroy', zone.id));
    }
};

const submitGeneral = () => {
    generalForm.put(route('admin.store.settings.general'));
};

const submitShipping = () => {
    shippingForm.put(route('admin.store.settings.shipping'));
};

const submitTax = () => {
    taxForm.put(route('admin.store.settings.tax'));
};
</script>

<template>
    <Head title="Configuración de Tienda" />
    
    <AdminLayout>
        <div class="py-6">
            <!-- Header -->
            <div class="mb-8">
                <nav class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-2">
                    <Link :href="route('admin.store.products.index')" class="hover:text-blue-600">Tienda</Link>
                    <span class="mx-2">/</span>
                    <span>Configuración</span>
                </nav>
                <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Configuración de la Tienda</h1>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
                <!-- Sidebar Tabs -->
                <div class="lg:col-span-1">
                    <nav class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
                        <button
                            v-for="tab in tabs"
                            :key="tab.id"
                            @click="activeTab = tab.id"
                            :class="[
                                'w-full flex items-center gap-3 px-4 py-3 text-left transition-colors',
                                activeTab === tab.id 
                                    ? 'bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 border-l-4 border-blue-600' 
                                    : 'text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 border-l-4 border-transparent'
                            ]"
                        >
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="tab.icon" />
                            </svg>
                            {{ tab.name }}
                        </button>
                    </nav>
                </div>

                <!-- Content -->
                <div class="lg:col-span-3">
                    <!-- General Settings -->
                    <div v-if="activeTab === 'general'" class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
                        <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-6">Configuración General</h2>
                        
                        <form @submit.prevent="submitGeneral" class="space-y-6">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Nombre de la Tienda</label>
                                    <input v-model="generalForm.store_name" type="text" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Moneda</label>
                                    <select v-model="generalForm.store_currency" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                                        <option value="USD">USD - Dólar Estadounidense</option>
                                        <option value="EUR">EUR - Euro</option>
                                        <option value="DOP">DOP - Peso Dominicano</option>
                                        <option value="MXN">MXN - Peso Mexicano</option>
                                        <option value="COP">COP - Peso Colombiano</option>
                                        <option value="ARS">ARS - Peso Argentino</option>
                                        <option value="CLP">CLP - Peso Chileno</option>
                                        <option value="PEN">PEN - Sol Peruano</option>
                                    </select>
                                </div>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Descripción</label>
                                <textarea v-model="generalForm.store_description" rows="3" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"></textarea>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email de Contacto</label>
                                    <input v-model="generalForm.store_email" type="email" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Teléfono</label>
                                    <input v-model="generalForm.store_phone" type="text" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                                </div>
                            </div>

                            <div class="flex items-center justify-between pt-4 border-t border-gray-200 dark:border-gray-700">
                                <label class="flex items-center gap-2">
                                    <input v-model="generalForm.enable_store" type="checkbox" class="rounded border-gray-300 text-blue-600">
                                    <span class="text-sm text-gray-700 dark:text-gray-300">Tienda habilitada</span>
                                </label>
                                <button type="submit" :disabled="generalForm.processing" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50">
                                    {{ generalForm.processing ? 'Guardando...' : 'Guardar Cambios' }}
                                </button>
                            </div>
                        </form>
                    </div>

                    <!-- Shipping Settings -->
                    <div v-if="activeTab === 'shipping'" class="space-y-6">
                        <!-- Global Shipping Settings -->
                        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
                            <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-6">Configuración Global de Envío</h2>
                            
                            <form @submit.prevent="submitShipping" class="space-y-6">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Tarifa Plana de Envío ($)</label>
                                        <input v-model="shippingForm.flat_rate" type="number" step="0.01" min="0" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                                        <p class="text-xs text-gray-500 mt-1">Se usa cuando no hay zonas de envío configuradas</p>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Umbral para Envío Gratis ($)</label>
                                        <input v-model="shippingForm.free_shipping_threshold" type="number" step="0.01" min="0" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                                        <p class="text-xs text-gray-500 mt-1">Pedidos sobre este monto tendrán envío gratis</p>
                                    </div>
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Países de Envío (códigos separados por coma)</label>
                                    <input v-model="shippingForm.shipping_countries" type="text" placeholder="DO,US,ES,MX" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                                </div>

                                <div class="flex items-center justify-between pt-4 border-t border-gray-200 dark:border-gray-700">
                                    <label class="flex items-center gap-2">
                                        <input v-model="shippingForm.enable_free_shipping" type="checkbox" class="rounded border-gray-300 text-blue-600">
                                        <span class="text-sm text-gray-700 dark:text-gray-300">Habilitar envío gratis</span>
                                    </label>
                                    <button type="submit" :disabled="shippingForm.processing" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50">
                                        {{ shippingForm.processing ? 'Guardando...' : 'Guardar Cambios' }}
                                    </button>
                                </div>
                            </form>
                        </div>

                        <!-- Shipping Zones -->
                        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
                            <div class="flex items-center justify-between mb-6">
                                <div>
                                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Zonas de Envío (RD)</h2>
                                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Configura costos por zona geográfica</p>
                                </div>
                                <button @click="openAddZone" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium flex items-center gap-2">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                                    </svg>
                                    Agregar Zona
                                </button>
                            </div>

                            <!-- Zones List -->
                            <div v-if="shippingZones && shippingZones.length > 0" class="space-y-3">
                                <div v-for="zone in shippingZones" :key="zone.id"
                                     class="flex items-center justify-between p-4 rounded-xl border dark:border-gray-700"
                                     :class="zone.is_active ? 'bg-gray-50 dark:bg-gray-700/50' : 'bg-gray-100 dark:bg-gray-700/30 opacity-60'">
                                    <div class="flex items-center gap-4">
                                        <div class="w-10 h-10 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center">
                                            <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                                            </svg>
                                        </div>
                                        <div>
                                            <h3 class="font-semibold text-gray-900 dark:text-white">{{ zone.name }}</h3>
                                            <p class="text-sm text-gray-500 dark:text-gray-400">
                                                <span v-if="zone.delivery_time">🕐 {{ zone.delivery_time }}</span>
                                                <span v-if="!zone.is_active" class="ml-2 text-red-500">(Inactiva)</span>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="flex items-center gap-3">
                                        <span class="text-lg font-bold text-green-600 dark:text-green-400">${{ Number(zone.cost).toFixed(2) }}</span>
                                        <button @click="openEditZone(zone)" class="p-2 text-gray-500 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                            </svg>
                                        </button>
                                        <button @click="deleteZone(zone)" class="p-2 text-gray-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                            </svg>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- Empty State -->
                            <div v-else class="text-center py-8 text-gray-500 dark:text-gray-400">
                                <svg class="w-12 h-12 mx-auto mb-3 text-gray-300 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                </svg>
                                <p class="font-medium">No hay zonas configuradas</p>
                                <p class="text-sm mt-1">Agrega zonas de envío para calcular costos automáticamente</p>
                            </div>

                            <!-- Suggested Zones Info -->
                            <div class="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
                                <p class="text-sm font-medium text-blue-700 dark:text-blue-300 mb-2">💡 Zonas sugeridas para RD:</p>
                                <div class="grid grid-cols-2 gap-2 text-xs text-blue-600 dark:text-blue-400">
                                    <span>• Santo Domingo — $150 (24-48h)</span>
                                    <span>• Santiago — $250 (2-3 días)</span>
                                    <span>• Punta Cana — $300 (3-4 días)</span>
                                    <span>• Interior — $350 (4-5 días)</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Tax Settings -->
                    <div v-if="activeTab === 'tax'" class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
                        <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-6">Configuración de Impuestos</h2>
                        
                        <form @submit.prevent="submitTax" class="space-y-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Tasa de Impuesto por Defecto (%)</label>
                                <input v-model="taxForm.default_tax_rate" type="number" step="0.01" min="0" max="100" class="w-48 rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                            </div>

                            <div class="space-y-3">
                                <label class="flex items-center gap-2">
                                    <input v-model="taxForm.enable_tax" type="checkbox" class="rounded border-gray-300 text-blue-600">
                                    <span class="text-sm text-gray-700 dark:text-gray-300">Habilitar impuestos</span>
                                </label>
                                <label class="flex items-center gap-2">
                                    <input v-model="taxForm.tax_included" type="checkbox" class="rounded border-gray-300 text-blue-600">
                                    <span class="text-sm text-gray-700 dark:text-gray-300">Los precios incluyen impuestos</span>
                                </label>
                            </div>

                            <div class="flex justify-end pt-4 border-t border-gray-200 dark:border-gray-700">
                                <button type="submit" :disabled="taxForm.processing" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50">
                                    {{ taxForm.processing ? 'Guardando...' : 'Guardar Cambios' }}
                                </button>
                            </div>
                        </form>
                    </div>

                    <!-- Quick Links -->
                    <div v-if="activeTab === 'quicklinks'" class="space-y-6">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <Link :href="route('admin.store.products.index')" class="flex items-center gap-4 p-6 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 hover:border-blue-400 transition-colors">
                                <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-xl flex items-center justify-center">
                                    <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                                    </svg>
                                </div>
                                <div>
                                    <h3 class="font-semibold text-gray-900 dark:text-white">Productos</h3>
                                    <p class="text-sm text-gray-500">Gestionar catálogo de productos</p>
                                </div>
                            </Link>

                            <Link :href="route('admin.store.categories.index')" class="flex items-center gap-4 p-6 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 hover:border-purple-400 transition-colors">
                                <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-xl flex items-center justify-center">
                                    <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                                    </svg>
                                </div>
                                <div>
                                    <h3 class="font-semibold text-gray-900 dark:text-white">Categorías</h3>
                                    <p class="text-sm text-gray-500">Organizar productos por categoría</p>
                                </div>
                            </Link>

                            <Link :href="route('admin.store.coupons.index')" class="flex items-center gap-4 p-6 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 hover:border-green-400 transition-colors">
                                <div class="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-xl flex items-center justify-center">
                                    <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z" />
                                    </svg>
                                </div>
                                <div>
                                    <h3 class="font-semibold text-gray-900 dark:text-white">Cupones</h3>
                                    <p class="text-sm text-gray-500">Gestionar descuentos y promociones</p>
                                </div>
                            </Link>

                            <Link :href="route('admin.store.orders.index')" class="flex items-center gap-4 p-6 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 hover:border-orange-400 transition-colors">
                                <div class="w-12 h-12 bg-orange-100 dark:bg-orange-900/30 rounded-xl flex items-center justify-center">
                                    <svg class="w-6 h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                                    </svg>
                                </div>
                                <div>
                                    <h3 class="font-semibold text-gray-900 dark:text-white">Pedidos</h3>
                                    <p class="text-sm text-gray-500">Ver y gestionar pedidos</p>
                                </div>
                            </Link>
                        </div>

                        <!-- Stats Summary -->
                        <div class="bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl p-6 text-white">
                            <h3 class="text-lg font-semibold mb-4">Resumen de la Tienda</h3>
                            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                                <div class="text-center">
                                    <p class="text-3xl font-bold">{{ categories.length }}</p>
                                    <p class="text-sm opacity-80">Categorías</p>
                                </div>
                                <div class="text-center">
                                    <p class="text-3xl font-bold">{{ categories.reduce((sum, c) => sum + c.products_count, 0) }}</p>
                                    <p class="text-sm opacity-80">Productos</p>
                                </div>
                                <div class="text-center">
                                    <p class="text-3xl font-bold">{{ coupons.filter(c => c.is_active).length }}</p>
                                    <p class="text-sm opacity-80">Cupones Activos</p>
                                </div>
                                <div class="text-center">
                                    <p class="text-3xl font-bold">{{ coupons.reduce((sum, c) => sum + c.usages_count, 0) }}</p>
                                    <p class="text-sm opacity-80">Cupones Usados</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Shipping Zone Modal -->
        <Teleport to="body">
            <div v-if="showZoneModal" class="fixed inset-0 z-50 flex items-center justify-center">
                <div class="fixed inset-0 bg-black/50" @click="showZoneModal = false"></div>
                <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-md p-6 m-4">
                    <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4">
                        {{ editingZone ? 'Editar Zona' : 'Agregar Zona de Envío' }}
                    </h3>
                    <form @submit.prevent="saveZone" class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Nombre de la Zona *</label>
                            <input v-model="zoneForm.name" type="text" required placeholder="Ej: Santo Domingo, Santiago..."
                                   class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Costo ($) *</label>
                                <input v-model="zoneForm.cost" type="number" step="0.01" min="0" required
                                       class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Tiempo de Entrega</label>
                                <input v-model="zoneForm.delivery_time" type="text" placeholder="Ej: 24-48h"
                                       class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                            </div>
                        </div>
                        <label class="flex items-center gap-2">
                            <input v-model="zoneForm.is_active" type="checkbox" class="rounded border-gray-300 text-blue-600">
                            <span class="text-sm text-gray-700 dark:text-gray-300">Zona activa</span>
                        </label>
                        <div class="flex justify-end gap-3 pt-4 border-t dark:border-gray-700">
                            <button type="button" @click="showZoneModal = false" class="px-4 py-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">
                                Cancelar
                            </button>
                            <button type="submit" :disabled="zoneForm.processing" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50">
                                {{ zoneForm.processing ? 'Guardando...' : (editingZone ? 'Actualizar' : 'Agregar') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </Teleport>
    </AdminLayout>
</template>
