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

import Modal from '@Holos/Modal.vue';
import FormInput from '@Holos/Form/Input.vue';
import FormError from '@Holos/Form/Elements/Error.vue';
import GoogleIcon from '@Shared/GoogleIcon.vue';
import SerialInputList from '@Components/POS/SerialInputList.vue';

/** Eventos */
const emit = defineEmits(['close', 'created']);

/** Propiedades */
const props = defineProps({
    show: Boolean
});

/** Estado */
const products = ref([]);
const warehouses = ref([]);
const suppliers = ref([]);
const loading = ref(false);
const selectedProducts = ref([]);

// Estado para búsqueda de productos
let debounceTimer = null;
const productSearch = ref('');
const searchingProduct = ref(false);
const productNotFound = ref(false);
const productSuggestions = ref([]);
const showProductSuggestions = ref(false);
const currentSearchIndex = ref(null); // Índice del producto que se está buscando

const api = useApi();

/** Formulario */
const form = useForm({
    warehouse_id: '',
    supplier_id: null,
    invoice_reference: '',
    notes: '',
    products: []
});

/** Computed */
const totalCost = computed(() => {
    return selectedProducts.value.reduce((sum, item) => {
        return sum + (item.quantity * item.unit_cost);
    }, 0);
});

const totalQuantity = computed(() => {
    return selectedProducts.value.reduce((sum, item) => sum + Number(item.quantity), 0);
});

// Determina si un producto puede usar seriales (no puede si la unidad permite decimales)
const canUseSerials = (item) => {
    if (!item.unit_of_measure) return true;
    return !item.allows_decimals;
};

/** Métodos */
const loadData = () => {
    loading.value = true;

    Promise.all([
        api.get(apiURL('almacenes'), {
            onSuccess: (data) => {
                warehouses.value = data.warehouses?.data || data.data || [];

                // Establecer el almacén principal por defecto
                const mainWarehouse = warehouses.value.find(w => w.is_main || w.is_principal);
                if (mainWarehouse && !form.warehouse_id) {
                    form.warehouse_id = mainWarehouse.id;
                }
            }
        }),
        api.get(apiURL('proveedores'), {
            onSuccess: (data) => {
                suppliers.value = data.suppliers?.data || data.data || [];
            }
        }),
        api.get(apiURL('inventario'), {
            onSuccess: (data) => {
                products.value = data.products?.data || data.data || [];
            }
        })
    ]).finally(() => {
        loading.value = false;
    });
};

const addProduct = () => {
    selectedProducts.value.push({
        inventory_id: '',
        product_name: '',
        product_sku: '',
        quantity: 1,
        unit_cost: 0,
        track_serials: false,
        unit_of_measure: null,
        allows_decimals: false,
        serial_numbers_list: [{ serial_number: '', locked: false }], // Inputs individuales de seriales
        serial_validation_error: ''
    });
};

const removeProduct = (index) => {
    selectedProducts.value.splice(index, 1);
};

/** Métodos de búsqueda de productos */
const onProductInput = (index) => {
    currentSearchIndex.value = index;
    productNotFound.value = false;

    const searchValue = productSearch.value?.trim();
    if (!searchValue || searchValue.length < 1) {
        productSuggestions.value = [];
        showProductSuggestions.value = false;
        return;
    }

    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
        showProductSuggestions.value = true;
        searchProduct();
    }, 300);
};

const searchProduct = () => {
    const searchValue = productSearch.value?.trim();
    if (!searchValue) {
        productSuggestions.value = [];
        showProductSuggestions.value = false;
        return;
    }

    searchingProduct.value = true;
    productNotFound.value = false;

    api.get(apiURL(`inventario?q=${encodeURIComponent(searchValue)}`), {
        onSuccess: (data) => {
            const foundProducts = data.products?.data || data.data || data.products || [];
            if (foundProducts.length > 0) {
                productSuggestions.value = foundProducts;
                showProductSuggestions.value = true;
            } else {
                productSuggestions.value = [];
                showProductSuggestions.value = false;
                productNotFound.value = true;
            }
        },
        onFail: (data) => {
            productSuggestions.value = [];
            showProductSuggestions.value = false;
            productNotFound.value = true;
            window.Notify.error(data.message || 'Error al buscar producto');
        },
        onError: () => {
            productSuggestions.value = [];
            showProductSuggestions.value = false;
            productNotFound.value = true;
        },
        onFinish: () => {
            searchingProduct.value = false;
        }
    });
};

const selectProduct = (product) => {
    if (currentSearchIndex.value !== null) {
        selectedProducts.value[currentSearchIndex.value].inventory_id = product.id;
        selectedProducts.value[currentSearchIndex.value].product_name = product.name;
        selectedProducts.value[currentSearchIndex.value].product_sku = product.sku;
        selectedProducts.value[currentSearchIndex.value].track_serials = product.track_serials || false;
        selectedProducts.value[currentSearchIndex.value].unit_of_measure = product.unit_of_measure || null;
        selectedProducts.value[currentSearchIndex.value].allows_decimals = product.unit_of_measure?.allows_decimals || false;

        // Limpiar seriales si la unidad permite decimales
        if (product.unit_of_measure?.allows_decimals) {
            selectedProducts.value[currentSearchIndex.value].serial_numbers_list = [{ serial_number: '', locked: false }];
        }
    }

    productSearch.value = '';
    productSuggestions.value = [];
    showProductSuggestions.value = false;
    productNotFound.value = false;
    currentSearchIndex.value = null;

    window.Notify.success(`Producto ${product.name} agregado`);
};

// Contar seriales ingresados (solo para mostrar feedback visual)
const countSerials = (item) => {
    if (!item.serial_numbers_list) return 0;
    return item.serial_numbers_list.filter(s => s.serial_number.trim()).length;
};

// Actualizar cantidad según seriales ingresados (llamado por el watcher del v-model)
const updateQuantityFromSerials = (item) => {
    // Solo actualizar cantidad automáticamente si el producto requiere seriales y puede usarlos
    if (!item.track_serials || !canUseSerials(item)) {
        return;
    }

    const serialCount = countSerials(item);

    if (serialCount > 0) {
        item.quantity = serialCount;
    } else {
        item.quantity = 1;
    }
};

const createEntry = () => {
    // Preparar datos del formulario
    form.products = selectedProducts.value.map(item => {
        const productData = {
            inventory_id: item.inventory_id,
            quantity: Number(item.quantity),
            unit_cost: Number(item.unit_cost),
            serial_numbers: [] // Inicializar siempre como array vacío
        };

        // Agregar seriales solo si la unidad lo permite y hay seriales ingresados
        if (canUseSerials(item) && item.serial_numbers_list) {
            const serials = item.serial_numbers_list
                .map(s => s.serial_number.trim())
                .filter(s => s.length > 0)
                .filter((s, index, self) => self.indexOf(s) === index);

            if (serials.length > 0) {
                productData.serial_numbers = serials;
            }
        }

        return productData;
    });

    form.post(apiURL('movimientos/entrada'), {
        onSuccess: () => {
            window.Notify.success('Entrada registrada correctamente');
            emit('created');
            closeModal();
        },
        onFail: (data) => {
            window.Notify.error(data.message || 'Error al registrar la entrada');
        },
        onError: () => {
            window.Notify.error('Error al registrar la entrada');
        }
    });
};

const closeModal = () => {
    form.reset();
    selectedProducts.value = [];
    productSearch.value = '';
    productSuggestions.value = [];
    showProductSuggestions.value = false;
    productNotFound.value = false;
    currentSearchIndex.value = null;
    emit('close');
};

/** Watchers */
watch(() => props.show, (isShown) => {
    if (isShown) {
        loadData();
        if (selectedProducts.value.length === 0) {
            addProduct();
        }
    }
});

// Limpiar productos seleccionados cuando se cambia el almacén
watch(() => form.warehouse_id, (newWarehouseId, oldWarehouseId) => {
    if (newWarehouseId !== oldWarehouseId && oldWarehouseId && selectedProducts.value.length > 0) {
        selectedProducts.value = [];
        addProduct();
    }
});
</script>

<template>
    <Modal :show="show" max-width="lg" @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-10 h-10 rounded-full bg-green-100 dark:bg-green-900/30">
                        <GoogleIcon name="add_circle" class="text-xl text-green-600 dark:text-green-400" />
                    </div>
                    <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100">
                        Registrar Entrada
                    </h3>
                </div>
                <button
                    @click="closeModal"
                    class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
                >
                    <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>

            <!-- Formulario -->
            <form @submit.prevent="createEntry" class="space-y-4">
                <div class="space-y-4">
                    <!-- Almacén destino -->
                    <div>
                        <label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
                            ALMACÉN DESTINO
                        </label>
                        <select
                            v-model="form.warehouse_id"
                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                        >
                            <option value="">Seleccionar almacén...</option>
                            <option v-for="wh in warehouses" :key="wh.id" :value="wh.id">
                                {{ wh.name }} ({{ wh.code }})
                            </option>
                        </select>
                        <FormError :message="form.errors?.warehouse_id" />
                    </div>

                    <div>
                        <label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
                            PROVEEDOR <span class="text-gray-400 text-xs normal-case">(opcional)</span>
                        </label>
                        <select
                            v-model="form.supplier_id"
                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                        >
                            <option :value="null">Seleccionar proveedor...</option>
                            <option v-for="supplier in suppliers" :key="supplier.id" :value="supplier.id">
                                {{ supplier.business_name }}
                            </option>
                        </select>
                        <FormError :message="form.errors?.supplier_id" />
                    </div>

                    <!-- Lista de productos -->
                    <div>
                        <div class="flex items-center justify-between mb-2">
                            <label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase">
                                PRODUCTOS
                            </label>
                            <button
                            type="button"
                            @click="addProduct"
                            class="flex items-center gap-1 px-2 py-1 text-xs font-medium text-indigo-600 dark:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 rounded transition-colors"
                            >
                            <GoogleIcon name="add" class="text-sm" />
                            Agregar producto
                        </button>
                        </div>

                        <div class="space-y-3">
                            <div
                                v-for="(item, index) in selectedProducts"
                                :key="index"
                                class="p-3 border border-gray-200 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-gray-800/50"
                            >
                                <div class="grid grid-cols-12 gap-3 items-start">
                                    <!-- Producto -->
                                    <div class="col-span-12 sm:col-span-5">
                                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
                                            Producto
                                        </label>
                                        <!-- Si ya se seleccionó un producto -->
                                        <div v-if="item.inventory_id && item.product_name" class="flex items-center gap-2 px-2 py-1.5 bg-indigo-50 dark:bg-indigo-900/20 border border-indigo-200 dark:border-indigo-800 rounded text-sm">
                                            <div class="flex-1 min-w-0">
                                                <p class="text-sm font-semibold text-gray-900 dark:text-gray-100 truncate">
                                                    {{ item.product_name }}
                                                </p>
                                                <p class="text-xs text-gray-500 dark:text-gray-400">{{ item.product_sku }}</p>
                                            </div>
                                            <button
                                                type="button"
                                                @click="item.inventory_id = ''; item.product_name = ''; item.product_sku = ''"
                                                class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
                                            >
                                                <GoogleIcon name="close" class="text-sm" />
                                            </button>
                                        </div>
                                        <!-- Input de búsqueda -->
                                        <div v-else class="relative">
                                            <input
                                                v-model="productSearch"
                                                @input="onProductInput(index)"
                                                @focus="() => { currentSearchIndex = index; productSuggestions.length > 0 && (showProductSuggestions = true); }"
                                                type="text"
                                                placeholder="Buscar por código de barras o nombre..."
                                                class="w-full px-2 py-1.5 pr-8 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                                                :class="{
                                                    'border-red-500 focus:ring-red-500 focus:border-red-500': productNotFound && currentSearchIndex === index
                                                }"
                                                :readonly="searchingProduct"
                                            />
                                            <div v-if="searchingProduct && currentSearchIndex === index" class="absolute right-2 top-1/2 -translate-y-1/2">
                                                <GoogleIcon name="hourglass_empty" class="text-sm text-gray-400 animate-spin" />
                                            </div>
                                            <div v-else-if="productSearch && currentSearchIndex === index" class="absolute right-2 top-1/2 -translate-y-1/2">
                                                <GoogleIcon name="search" class="text-sm text-gray-400" />
                                            </div>
                                            <!-- Dropdown de sugerencias -->
                                            <div
                                                v-if="showProductSuggestions && productSuggestions.length > 0 && currentSearchIndex === index"
                                                class="absolute z-50 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg max-h-48 overflow-y-auto"
                                            >
                                                <button
                                                    v-for="product in productSuggestions"
                                                    :key="product.id"
                                                    type="button"
                                                    @click="selectProduct(product)"
                                                    class="w-full flex items-center gap-2 px-3 py-2 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 transition-colors text-left border-b border-gray-100 dark:border-gray-700 last:border-b-0"
                                                >
                                                    <div class="flex-1 min-w-0">
                                                        <p class="text-sm font-semibold text-gray-900 dark:text-gray-100 truncate">
                                                            {{ product.name }}
                                                        </p>
                                                        <p class="text-xs text-gray-500 dark:text-gray-400">
                                                            SKU: {{ product.sku }}
                                                        </p>
                                                    </div>
                                                </button>
                                            </div>
                                            <!-- Error de producto no encontrado -->
                                            <div v-if="productNotFound && currentSearchIndex === index" class="absolute z-50 w-full mt-1">
                                                <div class="flex items-start gap-1 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded p-2">
                                                    <GoogleIcon name="error" class="text-red-600 dark:text-red-400 text-sm shrink-0" />
                                                    <p class="text-xs text-red-800 dark:text-red-300">
                                                        Producto no encontrado
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Cantidad -->
                                    <div class="col-span-5 sm:col-span-3">
                                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
                                            Cantidad
                                        </label>
                                        <input
                                            v-model="item.quantity"
                                            type="number"
                                            min="1"
                                            step="1"
                                            placeholder="0"
                                            :disabled="item.track_serials && canUseSerials(item)"
                                            class="w-full px-2 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-100 dark:disabled:bg-gray-900"
                                        />
                                        <p v-if="item.track_serials && canUseSerials(item)" class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                            Controlado por seriales
                                        </p>
                                    </div>

                                    <!-- Costo unitario -->
                                    <div class="col-span-5 sm:col-span-3">
                                        <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
                                            Costo unit.
                                        </label>
                                        <input
                                            v-model="item.unit_cost"
                                            type="number"
                                            min="0"
                                            step="0.01"
                                            placeholder="0.00"
                                            class="w-full px-2 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                                        />
                                    </div>

                                    <!-- Botón eliminar -->
                                    <div class="col-span-2 sm:col-span-1">
                                        <label class="block text-xs font-medium text-transparent mb-1">.</label>
                                        <button
                                            type="button"
                                            @click="removeProduct(index)"
                                            :disabled="selectedProducts.length === 1"
                                            class="w-full px-2 py-1.5 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/30 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                                            :title="selectedProducts.length === 1 ? 'Debe haber al menos un producto' : 'Eliminar producto'"
                                        >
                                            <GoogleIcon name="delete" class="text-lg" />
                                        </button>
                                    </div>
                                </div>

                                <!-- Números de serie -->
                                <div v-if="item.inventory_id" class="mt-3">
                                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">
                                        Números de Serie
                                        <span v-if="item.track_serials && canUseSerials(item)" class="text-red-500">*</span>
                                        <span v-else-if="canUseSerials(item)" class="text-gray-500 font-normal">(opcional)</span>
                                    </label>

                                    <!-- Advertencia si la unidad permite decimales -->
                                    <div v-if="!canUseSerials(item)" class="p-2 mb-2 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded">
                                        <div class="flex items-start gap-2">
                                            <GoogleIcon name="warning" class="text-amber-600 dark:text-amber-400 text-sm shrink-0 mt-0.5" />
                                            <p class="text-xs text-amber-800 dark:text-amber-200">
                                                Este producto usa la unidad <strong>{{ item.unit_of_measure?.name }} ({{ item.unit_of_measure?.abbreviation }})</strong> que permite cantidades decimales. No se pueden agregar números de serie.
                                            </p>
                                        </div>
                                    </div>

                                    <SerialInputList
                                        v-model="item.serial_numbers_list"
                                        :disabled="!canUseSerials(item)"
                                        @update:model-value="updateQuantityFromSerials(item)"
                                    />
                                </div>

                                <!-- Subtotal del producto -->
                                <div v-if="item.quantity && item.unit_cost" class="mt-2 pt-2 border-t border-gray-200 dark:border-gray-700">
                                    <p class="text-xs text-gray-600 dark:text-gray-400">
                                        Subtotal:
                                        <span class="font-semibold text-gray-900 dark:text-gray-100">
                                            {{ formatCurrency(item.quantity * item.unit_cost) }}
                                        </span>
                                    </p>
                                </div>
                            </div>
                        </div>

                        <!-- Resumen total -->
                        <div v-if="selectedProducts.length > 0" class="mt-3 p-3 bg-indigo-50 dark:bg-indigo-900/20 rounded-lg border border-indigo-200 dark:border-indigo-800">
                            <div class="flex items-center justify-between text-sm">
                                <span class="font-medium text-gray-700 dark:text-gray-300">
                                    Total de productos: {{ selectedProducts.length }}
                                </span>
                                <span class="font-medium text-gray-700 dark:text-gray-300">
                                    Cantidad total: {{ totalQuantity }}
                                </span>
                                <span class="font-bold text-indigo-900 dark:text-indigo-100">
                                    Costo total: {{ formatCurrency(totalCost) }}
                                </span>
                            </div>
                        </div>

                        <FormError :message="form.errors?.products" />
                    </div>

                    <!-- Referencia de factura -->
                    <div>
                        <label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
                            REFERENCIA DE FACTURA
                        </label>
                        <FormInput
                            v-model="form.invoice_reference"
                            type="text"
                            placeholder="Ej: FAC-2026-001"
                            required
                        />
                        <FormError :message="form.errors?.invoice_reference" />
                    </div>

                    <!-- Notas -->
                    <div>
                        <label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
                            NOTAS <span class="text-gray-400 text-xs normal-case">(opcional)</span>
                        </label>
                        <textarea
                            v-model="form.notes"
                            rows="2"
                            placeholder="Ej: Compra de proveedor X"
                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 resize-none"
                        ></textarea>
                        <FormError :message="form.errors?.notes" />
                    </div>
                </div>

                <!-- Botones -->
                <div class="flex items-center justify-end gap-3 mt-6">
                    <button
                        type="button"
                        @click="closeModal"
                        class="px-4 py-2 text-sm font-medium 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-indigo-500 transition-colors"
                    >
                        Cancelar
                    </button>
                    <button
                        type="submit"
                        :disabled="form.processing || selectedProducts.length === 0"
                        class="flex items-center gap-2 px-4 py-2 text-sm font-semibold text-white bg-green-600 rounded-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                    >
                        <GoogleIcon name="add_circle" class="text-lg" />
                        <span v-if="form.processing">Registrando...</span>
                        <span v-else>Registrar Entrada</span>
                    </button>
                </div>
            </form>
        </div>
    </Modal>
</template>
