<script setup>
import { ref, computed } from 'vue';
import { formatCurrency, formatDate } from '@/utils/formatters';

import Modal from '@Holos/Modal.vue';
import GoogleIcon from '@Shared/GoogleIcon.vue';

/** Props */
const props = defineProps({
    request: {
        type: Object,
        required: true
    }
});

/** Emits */
const emit = defineEmits(['close', 'refresh']);

/** Estado */
const processing = ref(false);

/** Computed */
const hasSales = computed(() => props.request.sales && props.request.sales.length > 0);
const latestSale = computed(() => hasSales.value ? props.request.sales[0] : null);

/** Métodos */
const closeModal = () => {
    emit('close');
};
</script>

<template>
    <Modal :show="true" max-width="4xl" @close="closeModal">
        <div class="p-6">
            <!-- Header -->
            <div class="flex items-center justify-between mb-6">
                <div class="flex items-center gap-3">
                    <div class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/30">
                        <GoogleIcon name="receipt_long" class="text-2xl text-blue-600 dark:text-blue-400" />
                    </div>
                    <div>
                        <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100">
                            Datos de Facturación
                        </h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400" v-if="hasSales">
                            Última venta: {{ latestSale.invoice_number || `#${String(latestSale.id).padStart(6, '0')}` }}
                        </p>
                        <p class="text-sm text-gray-500 dark:text-gray-400" v-else>
                            Cliente con datos fiscales registrados
                        </p>
                    </div>
                </div>
                <button
                    @click="closeModal"
                    class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
                >
                    <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="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>

            <!-- Content -->
            <div class="space-y-6">
                <!-- Información del Cliente -->
                <div class="bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 rounded-xl p-5 border border-gray-200 dark:border-gray-700">
                    <div class="flex items-center gap-2 mb-4">
                        <GoogleIcon name="person" class="text-xl text-gray-600 dark:text-gray-400" />
                        <h4 class="text-sm font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wide">
                            Datos del Cliente
                        </h4>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase mb-1">
                                Nombre
                            </label>
                            <p class="text-sm font-medium text-gray-900 dark:text-gray-100">
                                {{ request.name }}
                            </p>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase mb-1">
                                Email
                            </label>
                            <div class="flex items-center gap-2">
                                <p class="text-sm font-medium text-gray-900 dark:text-gray-100">
                                    {{ request.email }}
                                </p>
                            </div>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase mb-1">
                                Teléfono
                            </label>
                            <p class="text-sm font-medium text-gray-900 dark:text-gray-100">
                                {{ request.phone || 'No especificado' }}
                            </p>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase mb-1">
                                Dirección
                            </label>
                            <p class="text-sm font-medium text-gray-900 dark:text-gray-100">
                                {{ request.address || 'No especificada' }}
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Información Fiscal -->
                <div class="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 rounded-xl p-5 border border-blue-200 dark:border-blue-800">
                    <div class="flex items-center gap-2 mb-4">
                        <GoogleIcon name="account_balance" class="text-xl text-blue-600 dark:text-blue-400" />
                        <h4 class="text-sm font-bold text-blue-700 dark:text-blue-300 uppercase tracking-wide">
                            Datos Fiscales
                        </h4>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-semibold text-blue-600 dark:text-blue-400 uppercase mb-1">
                                RFC
                            </label>
                            <div class="flex items-center gap-2">
                                <p class="text-sm font-mono font-bold text-blue-900 dark:text-blue-100">
                                    {{ request.rfc }}
                                </p>
                            </div>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-blue-600 dark:text-blue-400 uppercase mb-1">
                                Razón Social
                            </label>
                            <p class="text-sm font-medium text-blue-900 dark:text-blue-100">
                                {{ request.razon_social || 'No especificada' }}
                            </p>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-blue-600 dark:text-blue-400 uppercase mb-1">
                                Régimen Fiscal
                            </label>
                            <p class="text-sm font-medium text-blue-900 dark:text-blue-100">
                                {{ request.regimen_fiscal || 'No especificado' }}
                            </p>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-blue-600 dark:text-blue-400 uppercase mb-1">
                                Código Postal Fiscal
                            </label>
                            <p class="text-sm font-medium text-blue-900 dark:text-blue-100">
                                {{ request.cp_fiscal || 'No especificado' }}
                            </p>
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-xs font-semibold text-blue-600 dark:text-blue-400 uppercase mb-1">
                                Uso de CFDI
                            </label>
                            <p class="text-sm font-medium text-blue-900 dark:text-blue-100">
                                {{ request.uso_cfdi || 'No especificado' }}
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Información de la Venta -->
                <div v-if="hasSales" class="bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/20 rounded-xl p-5 border border-green-200 dark:border-green-800">
                    <div class="flex items-center gap-2 mb-4">
                        <GoogleIcon name="shopping_cart" class="text-xl text-green-600 dark:text-green-400" />
                        <h4 class="text-sm font-bold text-green-700 dark:text-green-300 uppercase tracking-wide">
                            Última Venta Registrada
                        </h4>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-xs font-semibold text-green-600 dark:text-green-400 uppercase mb-1">
                                Folio
                            </label>
                            <p class="text-sm font-bold text-green-900 dark:text-green-100">
                                {{ latestSale.invoice_number || `#${String(latestSale.id).padStart(6, '0')}` }}
                            </p>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-green-600 dark:text-green-400 uppercase mb-1">
                                Total
                            </label>
                            <p class="text-lg font-bold text-green-600 dark:text-green-400">
                                {{ formatCurrency(latestSale.total || 0) }}
                            </p>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-green-600 dark:text-green-400 uppercase mb-1">
                                Fecha de Venta
                            </label>
                            <p class="text-sm font-medium text-green-900 dark:text-green-100">
                                {{ formatDate(latestSale.created_at) }}
                            </p>
                        </div>
                    </div>
                    <div class="mt-3 pt-3 border-t border-green-200 dark:border-green-700" v-if="request.sales.length > 1">
                        <p class="text-xs text-green-600 dark:text-green-400">
                            Este cliente tiene {{ request.sales.length }} venta(s) registrada(s)
                        </p>
                    </div>
                </div>

                <!-- Fecha de Registro -->
                <div class="flex items-center gap-3 p-4 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg">
                    <GoogleIcon name="schedule" class="text-2xl text-gray-600 dark:text-gray-400" />
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">
                            Fecha de Registro
                        </label>
                        <p class="text-sm font-medium text-gray-900 dark:text-gray-100">
                            {{ formatDate(request.created_at) }}
                        </p>
                    </div>
                </div>
            </div>

            <!-- Footer -->
            <div class="flex items-center justify-end gap-3 mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
                <button
                    type="button"
                    @click="closeModal"
                    :disabled="processing"
                    class="px-5 py-2.5 text-sm font-semibold text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                >
                    Cerrar
                </button>
            </div>
        </div>
    </Modal>
</template>

