<script setup>
import { ref, computed, watch } from 'vue';
import { useApi, apiURL } from '@Services/Api';
import { formatCurrency } from '@/utils/formatters';
import GoogleIcon from '@Shared/GoogleIcon.vue';
import Modal from '@Holos/Modal.vue';

/** Props */
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    cart: {
        type: Object,
        required: true
    },
    processing: {
        type: Boolean,
        default: false
    }
});

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

/** Estado */
const selectedMethod = ref('cash');
const cashReceived = ref(0);
const clientNumber = ref('');
const selectedClient = ref(null);
const searchingClient = ref(false);
const clientNotFound = ref(false);

/** Computados */
const formattedSubtotal = computed(() => {
    return new Intl.NumberFormat('es-MX', {
        style: 'currency',
        currency: 'MXN'
    }).format(props.cart.subtotal);
});

const formattedTax = computed(() => {
    return new Intl.NumberFormat('es-MX', {
        style: 'currency',
        currency: 'MXN'
    }).format(props.cart.tax);
});

// Descuento del cliente
const clientDiscount = computed(() => {
    if (selectedClient.value?.tier?.discount_percentage) {
        return parseFloat(selectedClient.value.tier.discount_percentage);
    }
    return 0;
});

const estimatedDiscountAmount = computed(() => {
    return (props.cart.subtotal * clientDiscount.value) / 100;
});

// Total sin descuento
const formattedTotal = computed(() => {
    return new Intl.NumberFormat('es-MX', {
        style: 'currency',
        currency: 'MXN'
    }).format(props.cart.total);
});

// Cálculo de cambio (usando total sin descuento)
const change = computed(() => {
    if (selectedMethod.value === 'cash' && cashReceived.value > 0) {
        return cashReceived.value - estimatedTotalWithDiscount.value;
    }
    return 0;
});

// Validar que el efectivo sea suficiente
const isValidCash = computed(() => {
    if (selectedMethod.value === 'cash') {
        return cashReceived.value >= estimatedTotalWithDiscount.value;
    }
    return true; // Tarjetas siempre válidas
});

// Puede confirmar si no es efectivo o si el efectivo es válido
const canConfirm = computed(() => {
    if (selectedMethod.value === 'cash') {
        return cashReceived.value > 0 && isValidCash.value;
    }
    return true;
});

const paymentMethods = [
    {
        value: 'cash',
        label: 'Efectivo',
        subtitle: 'Pago en efectivo',
        icon: 'payments',
        color: 'bg-green-500'
    },
    {
        value: 'credit_card',
        label: 'Tarjeta de Crédito',
        subtitle: 'Pago con tarjeta de crédito',
        icon: 'credit_card',
        color: 'bg-blue-500'
    },
    {
        value: 'debit_card',
        label: 'Tarjeta de Débito',
        subtitle: 'Pago con tarjeta de débito',
        icon: 'credit_card',
        color: 'bg-purple-500'
    }
];

/** Métodos de búsqueda de cliente */
const searchClient = () => {
    if (!clientNumber.value || clientNumber.value.trim() === '') {
        selectedClient.value = null;
        clientNotFound.value = false;
        return;
    }

    searchingClient.value = true;
    clientNotFound.value = false;

    const api = useApi();
    let urlParams = `client_number=${clientNumber.value.trim()}&with=tier`;
    api.get(apiURL(`clients?${urlParams}`), {
        onSuccess: (data) => {
            if (data.clients && data.clients.data.length > 0) {
                const client = data.clients.data[0]; 
                selectedClient.value = client;
                clientNotFound.value = false;
                window.Notify.success(`Cliente ${client.name} encontrado`);
            } else {
                selectedClient.value = null;
                clientNotFound.value = true;
            }
        },
        onFail: (data) => {
            selectedClient.value = null;
            clientNotFound.value = true;
            window.Notify.error(data.message || 'Error al buscar cliente');
        },
        onError: () => {
            selectedClient.value = null;
            clientNotFound.value = true;
        },
        onFinish: () => {
            searchingClient.value = false;
        }
    });
};

const clearClient = () => {
    clientNumber.value = '';
    selectedClient.value = null;
    clientNotFound.value = false;
};



/** Watchers */
// Limpiar cashReceived cuando cambia el método de pago
watch(selectedMethod, (newMethod) => {
    if (newMethod !== 'cash') {
        cashReceived.value = 0;
    }
});

// Resetear cuando se abre el modal
watch(() => props.show, (isShown) => {
    if (isShown) {
        cashReceived.value = 0;
        clientNumber.value = '';
        selectedClient.value = null;
        clientNotFound.value = false;
    }
});

/** Métodos */
const handleConfirm = () => {
    // Validar método de pago seleccionado
    if (!selectedMethod.value) {
        window.Notify.error('Selecciona un método de pago');
        return;
    }

    // Validaciones específicas para efectivo (usando total sin descuento)
    if (selectedMethod.value === 'cash') {
        if (!cashReceived.value || cashReceived.value <= 0) {
            window.Notify.error('Ingresa el efectivo recibido');
            return;
        }

        if (cashReceived.value < props.cart.total) {
            window.Notify.error(`El efectivo recibido es insuficiente. Faltan $${(props.cart.total - cashReceived.value).toFixed(2)}`);
            return;
        }
    }

    // Emitir evento con client_number para que el backend aplique el descuento automáticamente
    emit('confirm', {
        paymentMethod: selectedMethod.value,
        cashReceived: selectedMethod.value === 'cash' ? parseFloat(cashReceived.value) : null,
        clientNumber: selectedClient.value ? selectedClient.value.client_number : null,
        clientData: selectedClient.value // Enviar datos completos del cliente para referencia
    });
};

const handleClose = () => {
    if (!props.processing) {
        selectedMethod.value = 'cash';
        cashReceived.value = 0;
        clearClient();
        emit('close');
    }
};

// Total estimado con descuento (para mostrar al operador)
const estimatedTotalWithDiscount = computed(() => {
    if (clientDiscount.value > 0) {
        return props.cart.total - estimatedDiscountAmount.value;
    }
    return props.cart.total;
});

const formattedEstimatedTotal = computed(() => {
    return new Intl.NumberFormat('es-MX', {
        style: 'currency',
        currency: 'MXN'
    }).format(estimatedTotalWithDiscount.value);
});
</script>

<template>
    <Modal :show="show" max-width="xl" @close="handleClose">
        <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-14 h-14 rounded-full bg-indigo-100 dark:bg-indigo-900/30">
                        <GoogleIcon name="point_of_sale" class="text-3xl text-indigo-600 dark:text-indigo-400" />
                    </div>
                    <div>
                        <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100">
                            Cobrar
                        </h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Resumen de compra y método de pago</p>
                    </div>
                </div>
                <button
                    @click="handleClose"
                    :disabled="processing"
                    class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors disabled:opacity-50"
                >
                    <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">
                <!-- Resumen de compra -->
                <div>
                    <h4 class="text-sm font-bold text-gray-700 dark:text-gray-300 mb-3">
                        Resumen de compra
                    </h4>
                    <div class="bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-4 space-y-3">
                        <!-- Items -->
                        <div class="space-y-2 max-h-56 overflow-y-auto">
                            <div
                                v-for="item in cart.items"
                                :key="item.inventory_id"
                                class="flex items-start justify-between py-2"
                            >
                                <div class="flex-1 min-w-0 pr-4">
                                    <p class="text-sm font-semibold text-gray-800 dark:text-gray-200 truncate">
                                        {{ item.product_name }}
                                    </p>
                                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                        {{ item.quantity }} × ${{ item.unit_price.toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) }}
                                    </p>
                                </div>
                                <span class="text-base font-bold text-gray-900 dark:text-gray-100 shrink-0">
                                    ${{ (item.quantity * item.unit_price).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) }}
                                </span>
                            </div>
                        </div>

                        <!-- Totales -->
                        <div class="pt-3 border-t border-gray-300 dark:border-gray-600 space-y-2">
                            <div class="flex items-center justify-between text-sm">
                                <span class="text-gray-600 dark:text-gray-400">Subtotal</span>
                                <span class="font-semibold text-gray-800 dark:text-gray-200">{{ formattedSubtotal }}</span>
                            </div>
                            <div class="flex items-center justify-between text-sm">
                                <span class="text-gray-600 dark:text-gray-400">IVA (16%)</span>
                                <span class="font-semibold text-gray-800 dark:text-gray-200">{{ formattedTax }}</span>
                            </div>
                        </div>

                        <!-- Descuento del cliente (informativo) -->
                        <div v-if="selectedClient && clientDiscount > 0" class="pt-3 border-t border-gray-300 dark:border-gray-600">
                            <div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-700 rounded-lg p-3">
                                <div class="flex items-center gap-2 mb-1">
                                    <GoogleIcon name="info" class="text-green-600 dark:text-green-400 text-sm" />
                                    <span class="text-xs text-green-700 dark:text-green-300 font-semibold">Descuento a aplicar</span>
                                </div>
                                <div class="flex items-center justify-between text-sm">
                                    <span class="text-green-600 dark:text-green-400 font-semibold">{{ clientDiscount.toFixed(2) }}% ({{ selectedClient.tier?.tier_name }})</span>
                                    <span class="font-semibold text-green-600 dark:text-green-400">≈ -${{ estimatedDiscountAmount.toFixed(2) }}</span>
                                </div>
                                <p class="text-xs text-green-700 dark:text-green-400 mt-1">
                                    El descuento se aplicará automáticamente al procesar la venta
                                </p>
                            </div>
                        </div>

                        <!-- Total a pagar -->
                        <div class="pt-3 border-t-2 border-gray-300 dark:border-gray-600 space-y-2">
                            <!-- Total original (tachado si hay descuento) -->
                            <div v-if="selectedClient && clientDiscount > 0" class="flex items-center justify-between">
                                <span class="text-sm text-gray-500 dark:text-gray-400">Total sin descuento</span>
                                <span class="text-lg text-gray-400 line-through">{{ formattedTotal }}</span>
                            </div>
                            
                            <!-- Total final (con o sin descuento) -->
                            <div class="flex items-center justify-between">
                                <span class="text-base font-bold text-gray-800 dark:text-gray-200">
                                    {{ selectedClient && clientDiscount > 0 ? 'Total con descuento' : 'Total a pagar' }}
                                </span>
                                <span 
                                    class="text-3xl font-bold"
                                    :class="selectedClient && clientDiscount > 0 
                                        ? 'text-green-600 dark:text-green-400' 
                                        : 'text-indigo-600 dark:text-indigo-400'"
                                >
                                    {{ selectedClient && clientDiscount > 0 ? formattedEstimatedTotal : formattedTotal }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Sección de Cliente -->
                <div>
                    <h4 class="text-sm font-bold text-gray-700 dark:text-gray-300 mb-3">
                        Cliente (Opcional)
                    </h4>

                    <!-- Input de búsqueda de cliente -->
                    <div v-if="!selectedClient" class="space-y-2">
                        <div class="relative">
                            <input
                                v-model="clientNumber"
                                @keyup.enter="searchClient"
                                type="text"
                                placeholder="Ingresa el código de cliente (ej: CLI-0001)"
                                class="w-full px-4 py-3 pr-24 border-2 border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400"
                                :class="{
                                    'border-red-500 focus:ring-red-500 focus:border-red-500': clientNotFound
                                }"
                                :disabled="searchingClient"
                            />
                            <button
                                @click="searchClient"
                                :disabled="searchingClient || !clientNumber"
                                class="absolute right-2 top-1/2 -translate-y-1/2 px-4 py-1.5 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                            >
                                {{ searchingClient ? 'Buscando...' : 'Buscar' }}
                            </button>
                        </div>

                        <!-- Error de cliente no encontrado -->
                        <div v-if="clientNotFound" class="flex items-start gap-2 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-3">
                            <GoogleIcon name="error" class="text-red-600 dark:text-red-400 text-lg shrink-0 mt-0.5" />
                            <p class="text-sm text-red-800 dark:text-red-300">
                                Cliente no encontrado. Verifica el código e intenta nuevamente.
                            </p>
                        </div>
                    </div>

                    <!-- Cliente seleccionado -->
                    <div v-else class="bg-linear-to-br from-indigo-50 to-indigo-100 dark:from-indigo-900/20 dark:to-indigo-800/20 border border-indigo-200 dark:border-indigo-800 rounded-xl p-4 space-y-3">
                        <div class="flex items-start justify-between">
                            <div class="flex items-center gap-3">
                                <div class="w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center text-white font-bold text-lg">
                                    {{ selectedClient.name.charAt(0).toUpperCase() }}
                                </div>
                                <div>
                                    <p class="text-base font-bold text-gray-900 dark:text-gray-100">
                                        {{ selectedClient.name }}
                                    </p>
                                    <p class="text-sm text-gray-600 dark:text-gray-400">
                                        {{ selectedClient.client_number }}
                                    </p>
                                </div>
                            </div>
                            <button
                                @click="clearClient"
                                class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition-colors"
                                title="Quitar cliente"
                            >
                                <GoogleIcon name="close" class="text-xl" />
                            </button>
                        </div>

                        <!-- Tier y estadísticas -->
                        <div class="grid grid-cols-2 gap-2">
                            <div class="bg-white/50 dark:bg-gray-900/20 rounded-lg p-2">
                                <p class="text-xs text-gray-600 dark:text-gray-400">Tier actual</p>
                                <p class="text-sm font-bold text-gray-900 dark:text-gray-100">
                                    {{ selectedClient.tier?.tier_name || 'Sin tier' }}
                                </p>
                            </div>
                            <div class="bg-white/50 dark:bg-gray-900/20 rounded-lg p-2">
                                <p class="text-xs text-gray-600 dark:text-gray-400">Descuento</p>
                                <p class="text-sm font-bold text-green-600 dark:text-green-400">
                                    {{ clientDiscount.toFixed(2) }}%
                                </p>
                            </div>
                            <div v-if="selectedClient.total_purchases !== undefined" class="bg-white/50 dark:bg-gray-900/20 rounded-lg p-2">
                                <p class="text-xs text-gray-600 dark:text-gray-400">Compras acumuladas</p>
                                <p class="text-sm font-bold text-gray-900 dark:text-gray-100">
                                    {{ formatCurrency(selectedClient.total_purchases) }}
                                </p>
                            </div>
                            <div v-if="selectedClient.total_transactions !== undefined" class="bg-white/50 dark:bg-gray-900/20 rounded-lg p-2">
                                <p class="text-xs text-gray-600 dark:text-gray-400">Transacciones</p>
                                <p class="text-sm font-bold text-gray-900 dark:text-gray-100">
                                    {{ selectedClient.total_transactions || 0 }}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Método de pago -->
                <div>
                    <h4 class="text-sm font-bold text-gray-700 dark:text-gray-300 mb-3">
                        Selecciona método de pago
                    </h4>
                    <div class="grid grid-cols-1 gap-3">
                        <button
                            v-for="method in paymentMethods"
                            :key="method.value"
                            type="button"
                            :disabled="processing"
                            class="relative flex items-center gap-4 p-4 rounded-xl border-2 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
                            :class="{
                                'border-indigo-500 bg-indigo-50 dark:bg-indigo-900/20 ring-2 ring-indigo-500 ring-offset-2 dark:ring-offset-gray-900': selectedMethod === method.value,
                                'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800': selectedMethod !== method.value
                            }"
                            @click="selectedMethod = method.value"
                        >
                            <div
                                class="w-14 h-14 rounded-xl flex items-center justify-center text-white shadow-lg transition-transform"
                                :class="[
                                    method.color,
                                    selectedMethod === method.value ? 'scale-110' : ''
                                ]"
                            >
                                <GoogleIcon :name="method.icon" class="text-2xl" />
                            </div>
                            <div class="flex-1 text-left">
                                <p class="text-base font-bold text-gray-800 dark:text-gray-200">
                                    {{ method.label }}
                                </p>
                                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                    {{ method.subtitle }}
                                </p>
                            </div>
                            <div v-if="selectedMethod === method.value" class="absolute top-3 right-3">
                                <div class="w-6 h-6 rounded-full bg-indigo-600 flex items-center justify-center">
                                    <GoogleIcon name="check" class="text-sm text-white" />
                                </div>
                            </div>
                        </button>
                    </div>
                </div>

                <!-- Sección de efectivo -->
                <div v-if="selectedMethod === 'cash'" class="space-y-4">
                    <!-- Input de efectivo recibido -->
                    <div>
                        <label class="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2">
                            Efectivo Recibido *
                        </label>
                        <div class="relative">
                            <span class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400 text-xl font-semibold">$</span>
                            <input
                                v-model.number="cashReceived"
                                type="number"
                                min="0"
                                step="0.01"
                                placeholder="0.00"
                                class="w-full pl-10 pr-4 py-3 text-xl font-bold border-2 border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400"
                                :class="{
                                    'border-red-500 focus:ring-red-500 focus:border-red-500': cashReceived > 0 && !isValidCash,
                                    'border-green-500 focus:ring-green-500 focus:border-green-500': cashReceived > 0 && isValidCash
                                }"
                                autofocus
                            />
                        </div>
                        <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
                            Ingresa el monto en efectivo que recibiste del cliente
                        </p>
                    </div>

                    <!-- Mostrar cambio -->
                    <div v-if="cashReceived > 0" class="bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl p-5">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1">
                                    {{ change >= 0 ? 'Cambio a devolver' : 'Falta' }}
                                </p>
                                <p
                                    class="text-4xl font-bold"
                                    :class="{
                                        'text-green-600 dark:text-green-400': change >= 0,
                                        'text-red-600 dark:text-red-400': change < 0
                                    }"
                                >
                                    ${{ Math.abs(change).toFixed(2) }}
                                </p>
                            </div>
                            <div>
                                <GoogleIcon
                                    :name="change >= 0 ? 'check_circle' : 'error'"
                                    class="text-5xl"
                                    :class="{
                                        'text-green-500': change >= 0,
                                        'text-red-500': change < 0
                                    }"
                                />
                            </div>
                        </div>
                    </div>

                    <!-- Advertencia de dinero insuficiente -->
                    <div v-if="cashReceived > 0 && !isValidCash" class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
                        <div class="flex gap-3">
                            <GoogleIcon name="warning" class="text-red-600 dark:text-red-400 text-xl shrink-0" />
                            <div>
                                <p class="text-sm font-semibold text-red-800 dark:text-red-300">
                                    Efectivo insuficiente
                                </p>
                                <p class="text-xs text-red-700 dark:text-red-400 mt-1">
                                    El dinero recibido debe ser mayor o igual al total de {{ formattedEstimatedTotal }}
                                </p>
                            </div>
                        </div>
                    </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="handleClose"
                    :disabled="processing"
                    class="px-6 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"
                >
                    Cancelar
                </button>
                <button
                    type="button"
                    @click="handleConfirm"
                    :disabled="processing || !canConfirm"
                    class="flex items-center gap-2 px-6 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600 shadow-lg shadow-indigo-600/30 transition-all disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none"
                >
                    <GoogleIcon
                        :name="processing ? 'hourglass_empty' : 'check'"
                        class="text-xl"
                        :class="{ 'animate-spin': processing }"
                    />
                    <span v-if="processing">Procesando...</span>
                    <span v-else>Confirmar Cobro</span>
                </button>
            </div>
        </div>
    </Modal>
</template>
