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

import Modal from '@Holos/Modal.vue';
import GoogleIcon from '@Shared/GoogleIcon.vue';
import Input from '@Holos/Form/Input.vue';
import UploadFiles from '@Components/POS/UploadFiles.vue';

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

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

/** Estado */
const processing = ref(false);
const showProcessModal = ref(false);
const showRejectModal = ref(false);
const showUploadModal = ref(false);
const sendingWhatsapp = ref(false);

const processForm = useForm({
    notes: ''
});

const rejectForm = useForm({
    notes: ''
});

/** Computed */
const isPending = computed(() => props.request.status === 'pending');

const statusBadge = computed(() => {
    const badges = {
        pending: {
            class: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300 border-yellow-300 dark:border-yellow-700',
            icon: 'schedule',
            label: 'Pendiente'
        },
        processed: {
            class: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300 border-green-300 dark:border-green-700',
            icon: 'check_circle',
            label: 'Procesada'
        },
        rejected: {
            class: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300 border-red-300 dark:border-red-700',
            icon: 'cancel',
            label: 'Rechazada'
        }
    };
    return badges[props.request.status] || badges.pending;
});

const paymentMethods = [
    {
      value: 'cash',
      label: 'Efectivo',
    },
    {
      value: 'credit_card',
      label: 'Tarjeta de Crédito',
    },
    {
      value: 'debit_card',
      label: 'Tarjeta de Débito',
    }
];

const paymentMethodLabel = computed(() => {
    const method = paymentMethods.find(m => props.request.sale?.payment_method?.includes(m.value));
    return method?.label || props.request.sale?.payment_method || 'N/A';
});

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

const openProcessModal = () => {
    processForm.reset();
    showProcessModal.value = true;
};

const openRejectModal = () => {
    rejectForm.reset();
    showRejectModal.value = true;
};

const openUploadModal = () => {
    showUploadModal.value = true;
};

const closeUploadModal = () => {
    showUploadModal.value = false;
};

const submitProcess = () => {
    processing.value = true;
    processForm.put(apiURL(`invoice-requests/${props.request.id}/process`), {
        onSuccess: () => {
            window.Notify.success('Solicitud marcada como procesada correctamente');
            showProcessModal.value = false;
            emit('refresh');
            emit('close');
        },
        onError: () => {
            window.Notify.error('Error al procesar la solicitud');
        },
        onFinish: () => {
            processing.value = false;
        }
    });
};

const submitReject = () => {
    processing.value = true;
    rejectForm.put(apiURL(`invoice-requests/${props.request.id}/reject`), {
        onSuccess: () => {
            window.Notify.success('Solicitud rechazada correctamente');
            showRejectModal.value = false;
            emit('refresh');
            emit('close');
        },
        onError: () => {
            window.Notify.error('Error al rechazar la solicitud');
        },
        onFinish: () => {
            processing.value = false;
        }
    });
};

/**
 * Enviar factura por WhatsApp
 */
const sendInvoiceByWhatsapp = async () => {
    const request = props.request;

    if (!request.client?.phone) {
        window.Notify.warning('El cliente no tiene número de teléfono registrado');
        return;
    }

    if (!request.invoice_pdf_url) {
        window.Notify.warning('La solicitud no tiene PDF de factura adjunto');
        return;
    }

    sendingWhatsapp.value = true;

    try {
        const ticket = request.sale?.invoice_number || `SOL-${request.id}`;
        await whatsappService.sendDocument({
            phone_number: request.client.phone,
            document_url: request.invoice_pdf_url,
            filename: `${ticket}.pdf`,
            ticket,
            customer_name: request.client.name
        });

        window.Notify.success('Factura enviada por WhatsApp correctamente');
    } catch (error) {
        console.error('WhatsApp Error:', error);

        // Mostrar el error específico del backend
        const errorMsg = error?.error?.message
            || error?.message
            || 'Error desconocido al enviar por WhatsApp';

        window.Notify.error(`Error: ${errorMsg}`);
    } finally {
        sendingWhatsapp.value = false;
    }
};
</script>

<template>
    <Modal :show="true" max-width="5xl" @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">
                            Solicitud de Facturación #{{ request.id }}
                        </h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                            Folio: {{ request.sale?.invoice_number || 'N/A' }}
                        </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>

            <!-- Estado Badge -->
            <div class="mb-6">
                <div :class="['inline-flex items-center gap-2 px-4 py-2 rounded-lg border-2', statusBadge.class]">
                    <GoogleIcon :name="statusBadge.icon" class="text-xl" />
                    <span class="font-semibold">{{ statusBadge.label }}</span>
                </div>
            </div>

            <!-- Content -->
            <div class="space-y-6 max-h-[70vh] overflow-y-auto">
                <!-- Información del Estado -->
                <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="info" 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">
                            Estado de la Solicitud
                        </h4>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase mb-1">
                                Fecha Solicitada
                            </label>
                            <p class="text-sm font-medium text-gray-900 dark:text-gray-100">
                                {{ formatDate(request.requested_at) }}
                            </p>
                        </div>
                        <div v-if="request.processed_at">
                            <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase mb-1">
                                Fecha Procesada
                            </label>
                            <p class="text-sm font-medium text-gray-900 dark:text-gray-100">
                                {{ formatDate(request.processed_at) }}
                            </p>
                        </div>
                        <div v-if="request.processed_by_user">
                            <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase mb-1">
                                Procesada Por
                            </label>
                            <p class="text-sm font-medium text-gray-900 dark:text-gray-100">
                                {{ request.processed_by_user.name }}
                            </p>
                        </div>
                    </div>
                    <div v-if="request.notes" class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
                        <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase mb-1">
                            Notas
                        </label>
                        <p class="text-sm text-gray-700 dark:text-gray-300 italic">
                            {{ request.notes }}
                        </p>
                    </div>
                </div>

                <!-- Información del CFDI -->
                <div v-if="request.cfdi_uuid || request.invoice_xml_url || request.invoice_pdf_url" class="bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/20 rounded-xl p-5 border border-purple-200 dark:border-purple-800">
                    <div class="flex items-center gap-2 mb-4">
                        <GoogleIcon name="verified" class="text-xl text-purple-600 dark:text-purple-400" />
                        <h4 class="text-sm font-bold text-purple-700 dark:text-purple-300 uppercase tracking-wide">
                            Información del CFDI
                        </h4>
                    </div>

                    <!-- UUID -->
                    <div v-if="request.cfdi_uuid" class="mb-4">
                        <label class="block text-xs font-semibold text-purple-600 dark:text-purple-400 uppercase mb-2">
                            UUID del CFDI
                        </label>
                        <div class="flex items-center gap-2 p-3 bg-white/50 dark:bg-gray-800/50 rounded-lg">
                            <p class="flex-1 text-sm font-mono text-purple-900 dark:text-purple-100 break-all">
                                {{ request.cfdi_uuid }}
                            </p>
                            <button
                                @click="navigator.clipboard.writeText(request.cfdi_uuid); window.Notify.success('UUID copiado al portapapeles')"
                                class="flex-shrink-0 p-2 rounded-lg bg-purple-100 hover:bg-purple-200 dark:bg-purple-900/30 dark:hover:bg-purple-900/50 transition-colors"
                                title="Copiar UUID"
                            >
                                <GoogleIcon name="content_copy" class="text-lg text-purple-600 dark:text-purple-400" />
                            </button>
                        </div>
                    </div>

                    <!-- Archivos -->
                    <div v-if="request.invoice_xml_url || request.invoice_pdf_url">
                        <label class="block text-xs font-semibold text-purple-600 dark:text-purple-400 uppercase mb-2">
                            Archivos de Facturación
                        </label>
                        <div class="flex gap-3">
                            <!-- XML -->
                            <a
                                v-if="request.invoice_xml_url"
                                :href="request.invoice_xml_url"
                                target="_blank"
                                download
                                class="flex-1 flex items-center gap-3 p-3 bg-white/50 dark:bg-gray-800/50 rounded-lg hover:bg-white dark:hover:bg-gray-800 transition-colors border border-blue-200 dark:border-blue-800"
                            >
                                <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-blue-100 dark:bg-blue-900/30">
                                    <GoogleIcon name="description" class="text-2xl text-blue-600 dark:text-blue-400" />
                                </div>
                                <div class="flex-1">
                                    <p class="text-xs font-semibold text-blue-700 dark:text-blue-300">
                                        Archivo XML
                                    </p>
                                    <p class="text-xs text-blue-600 dark:text-blue-400">
                                        Descargar CFDI
                                    </p>
                                </div>
                                <GoogleIcon name="download" class="text-xl text-blue-600 dark:text-blue-400" />
                            </a>

                            <!-- PDF -->
                            <a
                                v-if="request.invoice_pdf_url"
                                :href="request.invoice_pdf_url"
                                target="_blank"
                                download
                                class="flex-1 flex items-center gap-3 p-3 bg-white/50 dark:bg-gray-800/50 rounded-lg hover:bg-white dark:hover:bg-gray-800 transition-colors border border-red-200 dark:border-red-800"
                            >
                                <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-red-100 dark:bg-red-900/30">
                                    <GoogleIcon name="picture_as_pdf" class="text-2xl text-red-600 dark:text-red-400" />
                                </div>
                                <div class="flex-1">
                                    <p class="text-xs font-semibold text-red-700 dark:text-red-300">
                                        Archivo PDF
                                    </p>
                                    <p class="text-xs text-red-600 dark:text-red-400">
                                        Descargar Factura
                                    </p>
                                </div>
                                <GoogleIcon name="download" class="text-xl text-red-600 dark:text-red-400" />
                            </a>
                        </div>
                        <button
                            v-if="request.invoice_pdf_url && request.client?.phone"
                            @click="sendInvoiceByWhatsapp"
                            :disabled="sendingWhatsapp"
                            class="mt-3 w-full flex items-center justify-center gap-3 p-3 bg-green-50 dark:bg-green-900/20 rounded-lg hover:bg-green-100 dark:hover:bg-green-900/40 transition-colors border border-green-300 dark:border-green-700 disabled:opacity-50 disabled:cursor-not-allowed"
                        >
                            <svg class="w-5 h-5 text-green-600 dark:text-green-400" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
                            </svg>
                            <span class="text-sm font-semibold text-green-700 dark:text-green-300">
                                {{ sendingWhatsapp ? 'Enviando...' : 'Enviar Factura por WhatsApp' }}
                            </span>
                            <span v-if="!sendingWhatsapp" class="text-xs text-green-600 dark:text-green-400">
                                ({{ request.client.phone }})
                            </span>
                            <GoogleIcon v-if="sendingWhatsapp" name="sync" class="animate-spin text-green-600" />
                        </button>

                        <!-- Aviso si no tiene teléfono -->
                        <p v-else-if="request.invoice_pdf_url && !request.client?.phone"
                           class="mt-2 text-xs text-amber-600 dark:text-amber-400 flex items-center gap-1">
                            <GoogleIcon name="warning" class="text-sm" />
                            No se puede enviar por WhatsApp: el cliente no tiene teléfono registrado.
                        </p>
                    </div>
                </div>

                <!-- Información de la Venta -->
                <div 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">
                            Información de la Venta
                        </h4>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-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 font-mono text-green-900 dark:text-green-100">
                                {{ request.sale?.invoice_number }}
                            </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(request.sale?.total) }}
                            </p>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-green-600 dark:text-green-400 uppercase mb-1">
                                Método de Pago
                            </label>
                            <p class="text-sm font-medium text-green-900 dark:text-green-100 capitalize">
                                {{ paymentMethodLabel }}
                            </p>
                        </div>
                    </div>

                    <!-- Detalle de productos -->
                    <div v-if="request.sale?.details && request.sale.details.length > 0" class="mt-4 pt-4 border-t border-green-200 dark:border-green-700">
                        <label class="block text-xs font-semibold text-green-600 dark:text-green-400 uppercase mb-3">
                            Productos Vendidos
                        </label>
                        <div class="space-y-2">
                            <div
                                v-for="item in request.sale.details"
                                :key="item.id"
                                class="p-3 bg-white/50 dark:bg-gray-800/50 rounded-lg"
                            >
                                <div class="flex justify-between items-start">
                                    <div class="flex-1">
                                        <p class="text-sm font-semibold text-green-900 dark:text-green-100">
                                            {{ item.product_name }}
                                        </p>
                                        <p class="text-xs text-green-700 dark:text-green-300">
                                            SKU: {{ item.inventory?.sku || 'N/A' }} • {{ item.inventory?.category?.name || 'Sin clasificación' }}
                                        </p>
                                        <div v-if="item.serials && item.serials.length > 0" class="mt-1">
                                            <p class="text-xs text-green-600 dark:text-green-400">
                                                <span class="font-semibold">Series:</span>
                                                <span v-for="(serial, idx) in item.serials" :key="idx" class="ml-1 font-mono">
                                                    {{ serial.serial_number }}{{ idx < item.serials.length - 1 ? ',' : '' }}
                                                </span>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="text-right ml-4">
                                        <p class="text-sm font-bold text-green-900 dark:text-green-100">
                                            {{ formatCurrency(item.subtotal) }}
                                        </p>
                                        <p class="text-xs text-green-700 dark:text-green-300">
                                            {{ item.quantity }} × {{ formatCurrency(item.unit_price) }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Información del Cliente -->
                <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="person" 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 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-blue-600 dark:text-blue-400 uppercase mb-1">
                                Nombre
                            </label>
                            <p class="text-sm font-medium text-blue-900 dark:text-blue-100">
                                {{ request.client?.name || 'N/A' }}
                            </p>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-blue-600 dark:text-blue-400 uppercase mb-1">
                                Email
                            </label>
                            <p class="text-sm font-medium text-blue-900 dark:text-blue-100">
                                {{ request.client?.email || 'N/A' }}
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Información Fiscal -->
                <div class="bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/20 rounded-xl p-5 border border-purple-200 dark:border-purple-800">
                    <div class="flex items-center gap-2 mb-4">
                        <GoogleIcon name="account_balance" class="text-xl text-purple-600 dark:text-purple-400" />
                        <h4 class="text-sm font-bold text-purple-700 dark:text-purple-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-purple-600 dark:text-purple-400 uppercase mb-1">
                                RFC
                            </label>
                            <p class="text-sm font-mono font-bold text-purple-900 dark:text-purple-100">
                                {{ request.client?.rfc || 'N/A' }}
                            </p>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-purple-600 dark:text-purple-400 uppercase mb-1">
                                Razón Social
                            </label>
                            <p class="text-sm font-medium text-purple-900 dark:text-purple-100">
                                {{ request.client?.razon_social || 'N/A' }}
                            </p>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-purple-600 dark:text-purple-400 uppercase mb-1">
                                Régimen Fiscal
                            </label>
                            <p class="text-sm font-medium text-purple-900 dark:text-purple-100">
                                {{ request.client?.regimen_fiscal || 'N/A' }}
                            </p>
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-purple-600 dark:text-purple-400 uppercase mb-1">
                                C.P. Fiscal
                            </label>
                            <p class="text-sm font-medium text-purple-900 dark:text-purple-100">
                                {{ request.client?.cp_fiscal || 'N/A' }}
                            </p>
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-xs font-semibold text-purple-600 dark:text-purple-400 uppercase mb-1">
                                Uso de CFDI
                            </label>
                            <p class="text-sm font-medium text-purple-900 dark:text-purple-100">
                                {{ request.client?.uso_cfdi || 'N/A' }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Footer con acciones -->
            <div class="flex items-center justify-between 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>

                <!-- Acciones solo para solicitudes pendientes -->
                <div v-if="isPending" class="flex gap-3">
                    <button
                        type="button"
                        @click="openRejectModal"
                        :disabled="processing"
                        class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold text-white bg-red-600 hover:bg-red-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                        <GoogleIcon name="cancel" class="text-lg" />
                        Rechazar
                    </button>
                    <button
                        type="button"
                        @click="openUploadModal"
                        :disabled="processing"
                        class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold text-white bg-blue-600 hover:bg-blue-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                        <GoogleIcon name="upload_file" class="text-lg" />
                        Subir Archivos
                    </button>
                    <button
                        type="button"
                        @click="openProcessModal"
                        :disabled="processing"
                        class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold text-white bg-green-600 hover:bg-green-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                        <GoogleIcon name="check_circle" class="text-lg" />
                        Marcar como Procesada
                    </button>
                </div>
            </div>
        </div>
    </Modal>

    <!-- Modal para procesar -->
    <Modal :show="showProcessModal" max-width="md" @close="showProcessModal = false">
        <div class="p-6">
            <div class="flex items-center gap-3 mb-6">
                <div class="flex items-center justify-center w-12 h-12 rounded-full bg-green-100 dark:bg-green-900/30">
                    <GoogleIcon name="check_circle" class="text-2xl text-green-600 dark:text-green-400" />
                </div>
                <div>
                    <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100">
                        Marcar como Procesada
                    </h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">
                        Solicitud #{{ request.id }}
                    </p>
                </div>
            </div>

            <form @submit.prevent="submitProcess" class="space-y-4">
                <Input
                    v-model="processForm.notes"
                    id="process_notes"
                    title="Notas (opcional)"
                    placeholder="Ej: Factura timbrada. UUID: 123456-ABCD-7890"
                    type="textarea"
                    rows="3"
                />

                <div class="flex items-center justify-end gap-3 pt-4">
                    <button
                        type="button"
                        @click="showProcessModal = false"
                        :disabled="processing"
                        class="px-4 py-2 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 transition-colors disabled:opacity-50"
                    >
                        Cancelar
                    </button>
                    <button
                        type="submit"
                        :disabled="processing"
                        class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold text-white bg-green-600 hover:bg-green-700 rounded-lg transition-colors disabled:opacity-50"
                    >
                        <GoogleIcon name="check" class="text-lg" />
                        {{ processing ? 'Procesando...' : 'Confirmar' }}
                    </button>
                </div>
            </form>
        </div>
    </Modal>

    <!-- Modal para rechazar -->
    <Modal :show="showRejectModal" max-width="md" @close="showRejectModal = false">
        <div class="p-6">
            <div class="flex items-center gap-3 mb-6">
                <div class="flex items-center justify-center w-12 h-12 rounded-full bg-red-100 dark:bg-red-900/30">
                    <GoogleIcon name="cancel" class="text-2xl text-red-600 dark:text-red-400" />
                </div>
                <div>
                    <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100">
                        Rechazar Solicitud
                    </h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">
                        Solicitud #{{ request.id }}
                    </p>
                </div>
            </div>

            <form @submit.prevent="submitReject" class="space-y-4">
                <Input
                    v-model="rejectForm.notes"
                    id="reject_notes"
                    title="Motivo del rechazo *"
                    placeholder="Ej: RFC inválido, no coincide con constancia fiscal del SAT"
                    type="textarea"
                    rows="3"
                    required
                />

                <div class="flex items-center justify-end gap-3 pt-4">
                    <button
                        type="button"
                        @click="showRejectModal = false"
                        :disabled="processing"
                        class="px-4 py-2 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 transition-colors disabled:opacity-50"
                    >
                        Cancelar
                    </button>
                    <button
                        type="submit"
                        :disabled="processing"
                        class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold text-white bg-red-600 hover:bg-red-700 rounded-lg transition-colors disabled:opacity-50"
                    >
                        <GoogleIcon name="cancel" class="text-lg" />
                        {{ processing ? 'Procesando...' : 'Rechazar' }}
                    </button>
                </div>
            </form>
        </div>
    </Modal>

    <UploadFiles
        :show="showUploadModal"
        :request="request"
        @close="closeUploadModal"
        @refresh="emit('refresh')"
    />
</template>
