<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import cashRegisterService from '@Services/cashRegisterService';
import salesService from '@Services/salesService';
import ticketService from '@Services/ticketService';
import GoogleIcon from '@Shared/GoogleIcon.vue';
import SaleDetailModal from '@Pages/POS/Sales/DetailModal.vue';

/** Router */
const route = useRoute();
const router = useRouter();

/** Estado */
const cashRegister = ref(null);
const sales = ref([]);
const loading = ref(true);
const showSaleModal = ref(false);
const selectedSale = ref(null);

/** Computed */
const getSalesByMethod = (method) => {
    return sales.value
        .filter(sale => sale.payment_method === method)
        .reduce((sum, sale) => sum + parseFloat(sale.total || 0), 0);
};

const totalCashSales = computed(() => getSalesByMethod('cash'));
const totalCreditCard = computed(() => getSalesByMethod('credit_card'));
const totalDebitCard = computed(() => getSalesByMethod('debit_card'));
const totalCardSales = computed(() => totalCreditCard.value + totalDebitCard.value);

const difference = computed(() => {
    if (!cashRegister.value) return 0;
    const finalCash = parseFloat(cashRegister.value.final_cash || 0);
    const initialCash = parseFloat(cashRegister.value.initial_cash || 0);
    const expectedCash = initialCash + totalCashSales.value;
    return finalCash - expectedCash;
});

/** Métodos */
const loadData = async () => {
    loading.value = true;
    try {
        // Cargar datos del corte de caja
        const registerData = await cashRegisterService.getCashRegisterDetail(route.params.id);
        cashRegister.value = registerData;

        // Cargar ventas del período
        const salesData = await salesService.getSales({
            cash_register_id: route.params.id
        });
        sales.value = salesData.data || [];
    } catch (error) {
        window.Notify.error('Error al cargar el detalle del corte');
    } finally {
        loading.value = false;
    }
};

const goBack = () => {
    router.push({ name: 'pos.cashRegister.history' });
};

const openSaleDetail = async (sale) => {
    try {
        const saleData = await salesService.getSaleDetails(sale.id);
        selectedSale.value = saleData;
        showSaleModal.value = true;
    } catch (error) {
        window.Notify.error('Error al cargar el detalle de la venta');
    }
};

const closeSaleModal = () => {
    showSaleModal.value = false;
    selectedSale.value = null;
};

const downloadTicket = () => {
    try {
        ticketService.generateCashRegisterTicket(cashRegister.value, {
            businessName: 'HIKVISION DISTRIBUIDOR',
            autoDownload: true
        });
        window.Notify.success('Ticket de corte descargado');
    } catch (error) {
        window.Notify.error('Error al generar el ticket');
    }
};

const formatCurrency = (amount) => {
    return new Intl.NumberFormat('es-MX', {
        style: 'currency',
        currency: 'MXN'
    }).format(amount || 0);
};

const formatDate = (dateString) => {
    if (!dateString) return '-';
    return new Date(dateString).toLocaleString('es-MX', {
        year: 'numeric',
        month: 'short',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
    });
};

const getDifferenceColor = () => {
    const diff = difference.value;
    if (Math.abs(diff) < 0.01) return 'text-gray-600 dark:text-gray-400';
    return diff > 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400';
};

const getDifferenceIcon = () => {
    const diff = difference.value;
    if (Math.abs(diff) < 0.01) return 'check_circle';
    return diff > 0 ? 'trending_up' : 'trending_down';
};

const getPaymentMethodLabel = (method) => {
    const methods = {
        cash: 'Efectivo',
        credit_card: 'Tarjeta de Crédito',
        debit_card: 'Tarjeta de Débito'
    };
    return methods[method] || method;
};

const getPaymentMethodIcon = (method) => {
    const icons = {
        cash: 'payments',
        credit_card: 'credit_card',
        debit_card: 'credit_card'
    };
    return icons[method] || 'payment';
};

/** Ciclo */
onMounted(() => {
    loadData();
});
</script>

<template>
    <div class="min-h-screen bg-gray-50 dark:bg-gray-900 p-6">
        <!-- Header -->
        <div class="max-w-7xl mx-auto mb-6">
            <div class="flex items-center justify-between flex-wrap gap-4">
                <div>
                    <button
                        @click="goBack"
                        class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 mb-2 transition-colors"
                    >
                        <GoogleIcon name="arrow_back" class="text-lg" />
                        Volver al historial
                    </button>
                    <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100 flex items-center gap-3">
                        <GoogleIcon name="receipt_long" class="text-4xl text-indigo-600" />
                        Detalle de Corte de Caja
                    </h1>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                        Caja #{{ route.params.id }}
                    </p>
                </div>
                <button
                    v-if="!loading && cashRegister"
                    @click="downloadTicket"
                    class="flex items-center gap-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-lg shadow-md transition-colors"
                >
                    <GoogleIcon name="download" class="text-xl" />
                    Descargar Ticket
                </button>
            </div>
        </div>

        <!-- Loading -->
        <div v-if="loading" class="max-w-7xl mx-auto">
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-12">
                <div class="flex flex-col items-center justify-center">
                    <GoogleIcon name="sync" class="text-6xl text-gray-400 animate-spin mb-4" />
                    <p class="text-gray-600 dark:text-gray-400">Cargando información...</p>
                </div>
            </div>
        </div>

        <!-- Content -->
        <div v-else-if="cashRegister" class="max-w-7xl mx-auto space-y-6">
            <!-- Información del Corte -->
            <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-xl font-bold text-gray-900 dark:text-gray-100 mb-6 flex items-center gap-2">
                    <GoogleIcon name="info" class="text-2xl text-indigo-600" />
                    Información del Corte
                </h2>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <!-- Cajero -->
                    <div>
                        <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Cajero</p>
                        <p class="text-lg font-semibold text-gray-900 dark:text-gray-100">
                            {{ cashRegister.user?.name || 'N/A' }}
                        </p>
                        <p class="text-xs text-gray-500 dark:text-gray-400">
                            {{ cashRegister.user?.email || '' }}
                        </p>
                    </div>

                    <!-- Apertura -->
                    <div>
                        <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Apertura</p>
                        <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">
                            {{ formatDate(cashRegister.opened_at) }}
                        </p>
                    </div>

                    <!-- Cierre -->
                    <div>
                        <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Cierre</p>
                        <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">
                            {{ formatDate(cashRegister.closed_at) }}
                        </p>
                    </div>
                </div>

                <!-- Notas -->
                <div v-if="cashRegister.notes" class="mt-6 p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
                    <p class="text-xs font-semibold text-yellow-800 dark:text-yellow-300 mb-1">Notas del Cierre</p>
                    <p class="text-sm text-yellow-700 dark:text-yellow-400">{{ cashRegister.notes }}</p>
                </div>
            </div>

            <!-- Resumen Financiero -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <!-- Efectivo Inicial -->
                <div class="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 border border-blue-200 dark:border-blue-800 rounded-xl p-6">
                    <div class="flex items-center gap-3 mb-3">
                        <div class="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center text-white">
                            <GoogleIcon name="account_balance_wallet" class="text-2xl" />
                        </div>
                        <div>
                            <p class="text-xs font-semibold text-blue-700 dark:text-blue-300 uppercase">Inicial</p>
                            <p class="text-2xl font-bold text-blue-900 dark:text-blue-100">
                                {{ formatCurrency(cashRegister.initial_cash) }}
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Efectivo (Ventas) -->
                <div class="bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/20 border border-green-200 dark:border-green-800 rounded-xl p-6">
                    <div class="flex items-center gap-3 mb-3">
                        <div class="w-12 h-12 bg-green-500 rounded-lg flex items-center justify-center text-white">
                            <GoogleIcon name="payments" class="text-2xl" />
                        </div>
                        <div>
                            <p class="text-xs font-semibold text-green-700 dark:text-green-300 uppercase">Efectivo</p>
                            <p class="text-2xl font-bold text-green-900 dark:text-green-100">
                                {{ formatCurrency(totalCashSales) }}
                            </p>
                        </div>
                    </div>
                    <p class="text-xs text-green-600 dark:text-green-400">Ventas en efectivo</p>
                </div>

                <!-- Tarjetas -->
                <div class="bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/20 border border-purple-200 dark:border-purple-800 rounded-xl p-6">
                    <div class="flex items-center gap-3 mb-3">
                        <div class="w-12 h-12 bg-purple-500 rounded-lg flex items-center justify-center text-white">
                            <GoogleIcon name="credit_card" class="text-2xl" />
                        </div>
                        <div>
                            <p class="text-xs font-semibold text-purple-700 dark:text-purple-300 uppercase">Tarjetas</p>
                            <p class="text-2xl font-bold text-purple-900 dark:text-purple-100">
                                {{ formatCurrency(totalCardSales) }}
                            </p>
                        </div>
                    </div>
                    <p class="text-xs text-purple-600 dark:text-purple-400">
                        Crédito: {{ formatCurrency(totalCreditCard) }} | Débito: {{ formatCurrency(totalDebitCard) }}
                    </p>
                </div>

                <!-- Diferencia -->
                <div class="bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900/20 dark:to-gray-800/20 border border-gray-200 dark:border-gray-700 rounded-xl p-6">
                    <div class="flex items-center gap-3 mb-3">
                        <div class="w-12 h-12 bg-gray-500 rounded-lg flex items-center justify-center text-white">
                            <GoogleIcon :name="getDifferenceIcon()" class="text-2xl" />
                        </div>
                        <div>
                            <p class="text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase">Diferencia</p>
                            <p class="text-2xl font-bold" :class="getDifferenceColor()">
                                {{ difference >= 0 ? '+' : '' }}{{ formatCurrency(difference) }}
                            </p>
                        </div>
                    </div>
                    <p class="text-xs text-gray-600 dark:text-gray-400">
                        {{ Math.abs(difference) < 0.01 ? 'Cuadra exacto' : (difference > 0 ? 'Sobrante' : 'Faltante') }}
                    </p>
                </div>
            </div>

            <!-- Tabla de Ventas -->
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
                <div class="p-6 border-b border-gray-200 dark:border-gray-700">
                    <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 flex items-center gap-2">
                        <GoogleIcon name="receipt" class="text-2xl text-indigo-600" />
                        Ventas Realizadas
                        <span class="text-sm font-normal text-gray-500 dark:text-gray-400">
                            ({{ sales.length }} transacciones)
                        </span>
                    </h2>
                </div>

                <div v-if="sales.length === 0" class="p-12 text-center">
                    <GoogleIcon name="receipt_long" class="text-6xl text-gray-300 dark:text-gray-600 mx-auto mb-4" />
                    <p class="text-gray-500 dark:text-gray-400">No hay ventas registradas en este período</p>
                </div>

                <div v-else class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                        <thead class="bg-gray-50 dark:bg-gray-900">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">Folio</th>
                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">Hora</th>
                                <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">Método</th>
                                <th class="px-6 py-3 text-right text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">Total</th>
                                <th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">Acciones</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                            <tr
                                v-for="sale in sales"
                                :key="sale.id"
                                class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
                            >
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="text-sm font-mono font-semibold text-gray-900 dark:text-gray-100">
                                        {{ sale.invoice_number || `#${String(sale.id).padStart(6, '0')}` }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="text-sm text-gray-700 dark:text-gray-300">
                                        {{ new Date(sale.created_at).toLocaleTimeString('es-MX', {
                                            hour: '2-digit',
                                            minute: '2-digit'
                                        }) }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center gap-2">
                                        <GoogleIcon
                                            :name="getPaymentMethodIcon(sale.payment_method)"
                                            class="text-gray-500 dark:text-gray-400"
                                        />
                                        <span class="text-sm text-gray-700 dark:text-gray-300">
                                            {{ getPaymentMethodLabel(sale.payment_method) }}
                                        </span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right">
                                    <span class="text-sm font-bold text-gray-900 dark:text-gray-100">
                                        {{ formatCurrency(sale.total) }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-center">
                                    <button
                                        @click="openSaleDetail(sale)"
                                        class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300 transition-colors"
                                        title="Ver detalle"
                                    >
                                        <GoogleIcon name="visibility" class="text-xl" />
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Modal de Detalle de Venta -->
        <SaleDetailModal
            :show="showSaleModal"
            :sale="selectedSale"
            @close="closeSaleModal"
        />
    </div>
</template>