<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { useConfirm } from 'primevue/useconfirm';
import { useToast } from 'primevue/usetoast';
import Button from 'primevue/button';
import Card from 'primevue/card';
import Column from 'primevue/column';
import ConfirmDialog from 'primevue/confirmdialog';
import DataTable from 'primevue/datatable';
import Dialog from 'primevue/dialog';
import Dropdown from 'primevue/dropdown';
import InputText from 'primevue/inputtext';
import Textarea from 'primevue/textarea';
import InputSwitch from 'primevue/inputswitch';
import ProgressSpinner from 'primevue/progressspinner';
import Toast from 'primevue/toast';
import { useComercialClassificationStore } from '../../stores/comercialClassificationStore';
import type { ComercialClassification } from '../../types/comercialClassification';

const confirm = useConfirm();
const toast = useToast();
const classificationStore = useComercialClassificationStore();

interface Category {
    id: number;
    code: string;
    name: string;
    description: string;
    parent_id: number | null;
    is_active: number;
    created_at: string;
    subcategories: Category[];
}

const selectedCategory = ref<Category | null>(null);
const showCreateModal = ref(false);
const isSubmitting = ref(false);
const isEditMode = ref(false);
const editingId = ref<number | null>(null);

// Computed properties from store
const loading = computed(() => classificationStore.loading);
const categories = computed(() => transformClassifications(classificationStore.classifications));

// Form data
const formData = ref({
    code: '',
    name: '',
    description: '',
    parent_id: null as number | null,
    is_active: 1 as number
});

// Computed para el switch (convierte number a boolean y viceversa)
const isActiveSwitch = computed({
    get: () => formData.value.is_active === 1,
    set: (value: boolean) => {
        formData.value.is_active = value ? 1 : 0;
    }
});

// Transform API data to component structure
const transformClassifications = (classifications: ComercialClassification[]): Category[] => {
    return classifications.map(cls => ({
        id: cls.id,
        code: cls.code,
        name: cls.name,
        description: cls.description || '',
        parent_id: cls.parent_id,
        is_active: cls.is_active,
        created_at: cls.created_at,
        subcategories: cls.children ? cls.children.map(child => ({
            id: child.id,
            code: child.code,
            name: child.name,
            description: child.description || '',
            parent_id: child.parent_id,
            is_active: child.is_active,
            created_at: child.created_at,
            subcategories: []
        })) : []
    }));
};

const loadClassifications = async () => {
    try {
        await classificationStore.fetchClassifications();
        
        // Select first category by default
        if (categories.value.length > 0 && categories.value[0]) {
            selectedCategory.value = categories.value[0];
        }
    } catch (error) {
        console.error('Error loading classifications:', error);
        toast.add({
            severity: 'error',
            summary: 'Error',
            detail: 'No se pudieron cargar las clasificaciones comerciales.',
            life: 3000
        });
    }
};

const selectCategory = (category: Category) => {
    selectedCategory.value = category;
};

const addNewCategory = () => {
    // Reset form
    isEditMode.value = false;
    editingId.value = null;
    formData.value = {
        code: '',
        name: '',
        description: '',
        parent_id: null,
        is_active: 1
    };
    showCreateModal.value = true;
};

const closeModal = () => {
    showCreateModal.value = false;
    isEditMode.value = false;
    editingId.value = null;
};

const createClassification = async () => {
    try {
        isSubmitting.value = true;
        
        if (isEditMode.value && editingId.value) {
            // Update existing classification
            await classificationStore.updateClassification(editingId.value, formData.value);
            
            toast.add({
                severity: 'success',
                summary: 'Clasificación Actualizada',
                detail: `La clasificación "${formData.value.name}" ha sido actualizada exitosamente.`,
                life: 3000
            });
            
            // Actualizar la categoría seleccionada si fue la que se editó
            if (selectedCategory.value?.id === editingId.value) {
                const updatedCategory = categories.value.find(c => c.id === editingId.value);
                if (updatedCategory) {
                    selectedCategory.value = updatedCategory;
                }
            }
        } else {
            // Create new classification
            await classificationStore.createClassification(formData.value);
            
            toast.add({
                severity: 'success',
                summary: 'Clasificación Creada',
                detail: `La clasificación "${formData.value.name}" ha sido creada exitosamente.`,
                life: 3000
            });
            
            // Si se creó una subclasificación, actualizar la vista de la categoría padre
            if (formData.value.parent_id && selectedCategory.value?.id === formData.value.parent_id) {
                const parentCategory = categories.value.find(c => c.id === formData.value.parent_id);
                if (parentCategory) {
                    selectedCategory.value = parentCategory;
                }
            }
        }
        
        showCreateModal.value = false;
        isEditMode.value = false;
        editingId.value = null;
        // Reset form
        formData.value = {
            code: '',
            name: '',
            description: '',
            parent_id: null,
            is_active: 1
        };
    } catch (error) {
        console.error('Error saving classification:', error);
        toast.add({
            severity: 'error',
            summary: 'Error',
            detail: isEditMode.value 
                ? 'No se pudo actualizar la clasificación. Por favor, intenta nuevamente.'
                : 'No se pudo crear la clasificación. Por favor, intenta nuevamente.',
            life: 3000
        });
    } finally {
        isSubmitting.value = false;
    }
};

const addSubcategory = () => {
    if (selectedCategory.value) {
        isEditMode.value = false;
        editingId.value = null;
        formData.value = {
            code: '',
            name: '',
            description: '',
            parent_id: selectedCategory.value.id,
            is_active: 1
        };
        showCreateModal.value = true;
    }
};

const editCategory = () => {
    if (!selectedCategory.value) return;
    
    isEditMode.value = true;
    editingId.value = selectedCategory.value.id;
    formData.value = {
        code: selectedCategory.value.code,
        name: selectedCategory.value.name,
        description: selectedCategory.value.description,
        parent_id: selectedCategory.value.parent_id,
        is_active: selectedCategory.value.is_active
    };
    showCreateModal.value = true;
};

const deleteCategory = () => {
    if (!selectedCategory.value) return;
    
    confirm.require({
        message: `¿Estás seguro de eliminar la clasificación comercial "${selectedCategory.value.name}"?`,
        header: 'Confirmar Eliminación',
        icon: 'pi pi-exclamation-triangle',
        rejectLabel: 'Cancelar',
        acceptLabel: 'Eliminar',
        rejectClass: 'p-button-secondary p-button-outlined',
        acceptClass: 'p-button-danger',
        accept: async () => {
            try {
                const categoryName = selectedCategory.value!.name;
                const categoryId = selectedCategory.value!.id;
                await classificationStore.deleteClassification(categoryId);
                
                toast.add({
                    severity: 'success',
                    summary: 'Clasificación Eliminada',
                    detail: `La clasificación "${categoryName}" ha sido eliminada exitosamente.`,
                    life: 3000
                });
                
                // Seleccionar otra categoría o limpiar la selección
                if (categories.value.length > 0) {
                    selectedCategory.value = categories.value[0] || null;
                } else {
                    selectedCategory.value = null;
                }
            } catch (error) {
                console.error('Error deleting classification:', error);
                toast.add({
                    severity: 'error',
                    summary: 'Error al Eliminar',
                    detail: 'No se pudo eliminar la clasificación. Puede estar en uso.',
                    life: 3000
                });
            }
        }
    });
};

const editSubcategory = (subcategory: Category) => {
    isEditMode.value = true;
    editingId.value = subcategory.id;
    formData.value = {
        code: subcategory.code,
        name: subcategory.name,
        description: subcategory.description,
        parent_id: subcategory.parent_id,
        is_active: subcategory.is_active
    };
    showCreateModal.value = true;
};

const deleteSubcategory = (subcategory: Category) => {
    confirm.require({
        message: `¿Estás seguro de eliminar la subclasificación "${subcategory.name}"?`,
        header: 'Confirmar Eliminación',
        icon: 'pi pi-exclamation-triangle',
        rejectLabel: 'Cancelar',
        acceptLabel: 'Eliminar',
        rejectClass: 'p-button-secondary p-button-outlined',
        acceptClass: 'p-button-danger',
        accept: async () => {
            try {
                await classificationStore.deleteClassification(subcategory.id);
                
                toast.add({
                    severity: 'success',
                    summary: 'Subclasificación Eliminada',
                    detail: `La subclasificación "${subcategory.name}" ha sido eliminada exitosamente.`,
                    life: 3000
                });
                
                // Actualizar la vista de la categoría padre para reflejar los cambios
                if (selectedCategory.value) {
                    const updatedParent = categories.value.find(c => c.id === selectedCategory.value!.id);
                    if (updatedParent) {
                        selectedCategory.value = updatedParent;
                    }
                }
            } catch (error) {
                console.error('Error deleting subcategory:', error);
                toast.add({
                    severity: 'error',
                    summary: 'Error al Eliminar',
                    detail: 'No se pudo eliminar la subclasificación.',
                    life: 3000
                });
            }
        }
    });
};

onMounted(() => {
    loadClassifications();
});
</script>

<template>
    <div class="space-y-6">
        <!-- Toast Notifications -->
        <Toast position="bottom-right" />

        <!-- Confirm Dialog -->
        <ConfirmDialog></ConfirmDialog>

        <!-- Page Heading -->
        <div class="flex flex-wrap items-center justify-between gap-3">
            <h1 class="text-2xl font-bold leading-tight tracking-tight text-surface-900 dark:text-white">
                Clasificaciones Comerciales
            </h1>
        </div>

        <!-- Two-Panel Layout -->
        <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
            <!-- Left Panel (Category List) -->
            <Card class="lg:col-span-1">
                <template #content>
                    <div class="flex flex-col gap-4">
                        <!-- Add Category Button -->
                        <Button
                            label="Nueva Clasificación"
                            icon="pi pi-plus"
                            class="w-full"
                            @click="addNewCategory"
                        />

                        <!-- Categories List -->
                        <div v-if="loading" class="flex items-center justify-center py-8">
                            <ProgressSpinner style="width: 50px; height: 50px" />
                        </div>
                        <div v-else-if="categories.length === 0" class="flex flex-col items-center justify-center py-8 text-center">
                            <i class="pi pi-inbox text-4xl text-surface-300 dark:text-surface-600 mb-4"></i>
                            <p class="text-sm text-surface-500 dark:text-surface-400">
                                No hay clasificaciones comerciales creadas
                            </p>
                        </div>
                        <div v-else class="flex flex-col gap-1">
                            <div
                                v-for="category in categories"
                                :key="category.id"
                                :class="[
                                    'flex cursor-pointer items-center justify-between gap-4 rounded-lg px-4 py-3 transition-colors',
                                    selectedCategory?.id === category.id
                                        ? 'bg-primary/10 text-primary'
                                        : 'hover:bg-surface-100 dark:hover:bg-surface-800'
                                ]"
                                @click="selectCategory(category)"
                            >
                                <div class="flex items-center gap-4">
                                    <div
                                        :class="[
                                            'flex size-10 shrink-0 items-center justify-center rounded-lg',
                                            selectedCategory?.id === category.id
                                                ? 'bg-primary/20 text-primary'
                                                : 'bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-400'
                                        ]"
                                    >
                                        <i class="pi pi-shopping-bag"></i>
                                    </div>
                                    <div class="flex-1 min-w-0">
                                        <p
                                            :class="[
                                                'truncate text-base',
                                                selectedCategory?.id === category.id
                                                    ? 'font-semibold text-primary'
                                                    : 'font-normal text-surface-800 dark:text-surface-300'
                                            ]"
                                        >
                                            {{ category.name }}
                                        </p>
                                        <p class="text-xs text-surface-500 dark:text-surface-400 truncate">
                                            {{ category.code }}
                                        </p>
                                    </div>
                                </div>
                                <div :class="selectedCategory?.id === category.id ? 'text-primary' : 'text-surface-400'">
                                    <i class="pi pi-chevron-right"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </Card>

            <!-- Right Panel (Details View) -->
            <Card v-if="!selectedCategory" class="lg:col-span-2">
                <template #content>
                    <div class="flex flex-col items-center justify-center py-16">
                        <i class="pi pi-shopping-bag text-6xl text-surface-300 dark:text-surface-600 mb-4"></i>
                        <h3 class="text-xl font-semibold text-surface-700 dark:text-surface-300 mb-2">
                            Selecciona una clasificación
                        </h3>
                        <p class="text-sm text-surface-500 dark:text-surface-400">
                            Elige una clasificación comercial de la lista para ver sus detalles
                        </p>
                    </div>
                </template>
            </Card>

            <Card v-else class="lg:col-span-2">
                <template #content>
                    <div class="flex flex-col gap-6">
                        <!-- Header -->
                        <div class="flex flex-wrap items-start justify-between gap-4">
                            <div class="flex-1">
                                <p class="text-xs font-medium uppercase tracking-wider text-surface-500 dark:text-surface-400">
                                    Detalles de la Clasificación Comercial
                                </p>
                                <h3 class="text-xl font-bold text-surface-900 dark:text-white mt-1">
                                    {{ selectedCategory.name }}
                                </h3>
                                <p class="mt-1 text-sm font-mono text-surface-600 dark:text-surface-400">
                                    Código: {{ selectedCategory.code }}
                                </p>
                            </div>
                            <div class="flex items-center gap-2">
                                <Button
                                    icon="pi pi-pencil"
                                    outlined
                                    rounded
                                    @click="editCategory"
                                    v-tooltip.top="'Editar'"
                                />
                                <Button
                                    icon="pi pi-trash"
                                    severity="danger"
                                    outlined
                                    rounded
                                    @click="deleteCategory"
                                    v-tooltip.top="'Eliminar'"
                                />
                            </div>
                        </div>

                        <!-- Subcategory Section -->
                        <div class="flex flex-col">
                            <div class="mb-4 flex items-center justify-between">
                                <h4 class="font-semibold text-surface-800 dark:text-surface-200">
                                    Subclasificaciones ({{ selectedCategory.subcategories.length }})
                                </h4>
                                <Button
                                    label="Agregar Subclasificación"
                                    icon="pi pi-plus"
                                    size="small"
                                    @click="addSubcategory"
                                />
                            </div>

                            <!-- Subcategory Table -->
                            <DataTable
                                :value="selectedCategory.subcategories"
                                stripedRows
                                responsiveLayout="scroll"
                            >
                                <Column field="name" header="Nombre" sortable>
                                    <template #body="slotProps">
                                        <span class="font-medium text-surface-900 dark:text-white">
                                            {{ slotProps.data.name }}
                                        </span>
                                    </template>
                                </Column>

                                <Column field="code" header="Código" sortable>
                                    <template #body="slotProps">
                                        <span class="text-surface-500 dark:text-surface-400 font-mono">
                                            {{ slotProps.data.code }}
                                        </span>
                                    </template>
                                </Column>

                                <Column field="created_at" header="Fecha de Creación" sortable>
                                    <template #body="slotProps">
                                        <span class="text-surface-500 dark:text-surface-400">
                                            {{ new Date(slotProps.data.created_at).toLocaleDateString('es-MX', { 
                                                year: 'numeric', 
                                                month: 'short', 
                                                day: 'numeric',
                                                hour: '2-digit',
                                                minute: '2-digit'
                                            }) }}
                                        </span>
                                    </template>
                                </Column>

                                <Column header="Acciones" headerStyle="text-align: right" bodyStyle="text-align: right">
                                    <template #body="slotProps">
                                        <div class="flex items-center justify-end gap-2">
                                            <Button
                                                icon="pi pi-pencil"
                                                text
                                                rounded
                                                size="small"
                                                @click="editSubcategory(slotProps.data)"
                                            />
                                            <Button
                                                icon="pi pi-trash"
                                                text
                                                rounded
                                                size="small"
                                                severity="danger"
                                                @click="deleteSubcategory(slotProps.data)"
                                            />
                                        </div>
                                    </template>
                                </Column>

                                <template #empty>
                                    <div class="flex flex-col items-center justify-center py-8 text-center">
                                        <i class="pi pi-inbox text-4xl text-surface-300 dark:text-surface-600 mb-4"></i>
                                        <h3 class="text-lg font-semibold text-surface-900 dark:text-surface-0">
                                            No hay subclasificaciones
                                        </h3>
                                        <p class="text-sm text-surface-500 dark:text-surface-400 mt-2">
                                            Agrega subclasificaciones para organizar mejor esta categoría
                                        </p>
                                    </div>
                                </template>
                            </DataTable>
                        </div>
                    </div>
                </template>
            </Card>
        </div>

        <!-- Create/Edit Classification Modal -->
        <Dialog
            v-model:visible="showCreateModal"
            modal
            :header="isEditMode ? 'Editar Clasificación Comercial' : 'Nueva Clasificación Comercial'"
            :style="{ width: '500px' }"
        >
            <div class="flex flex-col gap-4 py-4">
                <!-- Code -->
                <div>
                    <label for="code" class="block text-sm font-medium mb-2">
                        Código <span class="text-red-500">*</span>
                    </label>
                    <InputText
                        id="code"
                        v-model="formData.code"
                        class="w-full"
                        placeholder="Ej: COM-001"
                    />
                </div>

                <!-- Name -->
                <div>
                    <label for="name" class="block text-sm font-medium mb-2">
                        Nombre <span class="text-red-500">*</span>
                    </label>
                    <InputText
                        id="name"
                        v-model="formData.name"
                        class="w-full"
                        placeholder="Ej: PRODUCTOS DE CONSUMO"
                    />
                </div>

                <!-- Description -->
                <div>
                    <label for="description" class="block text-sm font-medium mb-2">
                        Descripción
                    </label>
                    <Textarea
                        id="description"
                        v-model="formData.description"
                        rows="3"
                        class="w-full"
                        placeholder="Descripción de la clasificación comercial"
                    />
                </div>

                <!-- Parent Category -->
                <div>
                    <label for="parent" class="block text-sm font-medium mb-2">
                        Clasificación Padre (Opcional)
                    </label>
                    <Dropdown
                        id="parent"
                        v-model="formData.parent_id"
                        :options="categories"
                        optionLabel="name"
                        optionValue="id"
                        placeholder="Seleccionar clasificación padre..."
                        class="w-full"
                        showClear
                    />
                    <small class="text-surface-500 dark:text-surface-400">
                        Deja vacío para crear una clasificación raíz
                    </small>
                </div>

                <!-- Active Status -->
                <div>
                    <div class="flex items-center justify-between">
                        <div>
                            <label for="is_active" class="block text-sm font-medium mb-1">
                                Estado
                            </label>
                            <small class="text-surface-500 dark:text-surface-400">
                                Activa o desactiva esta clasificación comercial
                            </small>
                        </div>
                        <InputSwitch
                            id="is_active"
                            v-model="isActiveSwitch"
                        />
                    </div>
                </div>
            </div>

            <template #footer>
                <div class="flex justify-end gap-2">
                    <Button
                        label="Cancelar"
                        severity="secondary"
                        outlined
                        @click="closeModal"
                        :disabled="isSubmitting"
                    />
                    <Button
                        :label="isEditMode ? 'Actualizar' : 'Crear'"
                        @click="createClassification"
                        :loading="isSubmitting"
                        :disabled="!formData.code || !formData.name"
                    />
                </div>
            </template>
        </Dialog>
    </div>
</template>