// Vehicle Dashboard JavaScript - Navegacion por tarjetas
class VehicleDashboard {
    constructor() {
        this.currentView = 'brands'; // brands, models, vehicles, categories, groups, parts, diagrams
        this.selectedBrand = null;
        this.selectedModel = null;
        this.selectedYear = null; // FASE 5: Track selected year for breadcrumb
        this.selectedVehicleId = null;
        this.selectedCategory = null;
        this.selectedGroupId = null;
        this.selectedGroup = null; // FASE 5: Track selected group for breadcrumb
        this.allVehicles = [];
        this.filteredVehicles = [];
        this.allCategories = [];
        this.allParts = [];
        this.stats = { brands: 0, models: 0, vehicles: 0, parts: 0 };
        this.currentDiagramZoom = 1; // FASE 3: Zoom level for diagram viewer
        this.lastFocusedElement = null; // FASE 5: Track focus for modal management
        this.init();
    }

    async init() {
        await this.loadStats();
        await this.showBrands();
        this.bindFilterEvents();
        this.bindKeyboardShortcuts(); // FASE 5: Keyboard shortcuts
        this.bindSearchEvents(); // Bind search input events
        this.initDarkMode(); // FASE 5: Dark mode
    }

    bindSearchEvents() {
        const searchInput = document.getElementById('searchInput');
        if (searchInput) {
            searchInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') {
                    this.searchPartNumber();
                }
            });
        }
    }

    async loadStats() {
        try {
            const [brandsRes, vehiclesRes, partsRes, categoriesRes] = await Promise.all([
                fetch('/api/brands'),
                fetch('/api/vehicles'),
                fetch('/api/parts'),
                fetch('/api/categories')
            ]);

            if (brandsRes.ok && vehiclesRes.ok) {
                const brands = await brandsRes.json();
                const vehicles = await vehiclesRes.json();

                // Contar modelos únicos
                const uniqueModels = new Set(vehicles.map(v => `${v.brand}-${v.model}`));

                this.stats.brands = brands.length;
                this.stats.models = uniqueModels.size;
                this.stats.vehicles = vehicles.length;

                const brandsEl = document.getElementById('totalBrands');
                const modelsEl = document.getElementById('totalModels');
                if (brandsEl) brandsEl.textContent = this.stats.brands;
                if (modelsEl) modelsEl.textContent = this.stats.models > 1000 ? Math.floor(this.stats.models/1000) + 'K+' : this.stats.models;
            }

            if (partsRes.ok) {
                const partsData = await partsRes.json();
                // Handle paginated response
                this.stats.parts = partsData.pagination ? partsData.pagination.total : (partsData.data ? partsData.data.length : partsData.length || 0);
                const partsEl = document.getElementById('totalParts');
                if (partsEl) partsEl.textContent = this.stats.parts;
            }

            if (categoriesRes.ok) {
                this.allCategories = await categoriesRes.json();
            }
        } catch (error) {
            console.error('Error loading stats:', error);
        }
    }

    updateBreadcrumb() {
        const breadcrumb = document.getElementById('breadcrumb');
        let items = [];

        // Build breadcrumb items based on current view
        if (this.currentView === 'brands') {
            items.push({ label: '<i class="fas fa-home"></i> Marcas', active: true });
        } else if (this.currentView === 'models') {
            items.push({ label: '<i class="fas fa-home"></i> Marcas', action: 'dashboard.goToBrands()' });
            items.push({ label: this.selectedBrand, active: true });
        } else if (this.currentView === 'vehicles') {
            items.push({ label: '<i class="fas fa-home"></i> Marcas', action: 'dashboard.goToBrands()' });
            items.push({ label: this.selectedBrand, action: `dashboard.goToModels('${this.selectedBrand}')` });
            items.push({ label: this.selectedModel, active: true });
        } else if (this.currentView === 'categories') {
            items.push({ label: '<i class="fas fa-home"></i> Marcas', action: 'dashboard.goToBrands()' });
            items.push({ label: this.selectedBrand, action: `dashboard.goToModels('${this.selectedBrand}')` });
            items.push({ label: this.selectedModel, action: `dashboard.goToVehicles('${this.selectedBrand}', '${this.selectedModel}')` });
            if (this.selectedYear) items.push({ label: this.selectedYear });
            items.push({ label: 'Categorías', active: true });
        } else if (this.currentView === 'groups') {
            items.push({ label: '<i class="fas fa-home"></i> Marcas', action: 'dashboard.goToBrands()' });
            items.push({ label: this.selectedBrand, action: `dashboard.goToModels('${this.selectedBrand}')` });
            items.push({ label: this.selectedModel, action: `dashboard.goToVehicles('${this.selectedBrand}', '${this.selectedModel}')` });
            if (this.selectedYear) items.push({ label: this.selectedYear });
            items.push({ label: 'Categorías', action: `dashboard.goToCategories(${this.selectedVehicleId})` });
            items.push({ label: this.selectedCategory ? (this.selectedCategory.name_es || this.selectedCategory.name) : 'Grupos', active: true });
        } else if (this.currentView === 'parts') {
            const groupName = this.selectedGroup ? (this.selectedGroup.name_es || this.selectedGroup.name) : 'Grupo';
            items.push({ label: '<i class="fas fa-home"></i> Marcas', action: 'dashboard.goToBrands()' });
            items.push({ label: this.selectedBrand, action: `dashboard.goToModels('${this.selectedBrand}')` });
            items.push({ label: this.selectedModel, action: `dashboard.goToVehicles('${this.selectedBrand}', '${this.selectedModel}')` });
            if (this.selectedYear) items.push({ label: this.selectedYear });
            items.push({ label: 'Categorías', action: `dashboard.goToCategories(${this.selectedVehicleId})` });
            items.push({ label: this.selectedCategory ? (this.selectedCategory.name_es || this.selectedCategory.name) : 'Categoría', action: `dashboard.goToGroups(${this.selectedCategory ? this.selectedCategory.id : 0})` });
            items.push({ label: groupName, active: true });
        }

        // Generate HTML
        breadcrumb.innerHTML = items.map((item, i) => {
            const isLast = i === items.length - 1;
            const separator = !isLast ? '<span class="breadcrumb-separator">/</span>' : '';

            if (item.action) {
                return `<span class="breadcrumb-item"><a href="#" onclick="${item.action}; return false;">${item.label}</a></span>${separator}`;
            } else if (item.active) {
                return `<span class="breadcrumb-item active">${item.label}</span>`;
            } else {
                return `<span class="breadcrumb-item">${item.label}</span>${separator}`;
            }
        }).join('');
    }

    // FASE 5: Keyboard shortcuts
    bindKeyboardShortcuts() {
        document.addEventListener('keydown', (e) => {
            // Check if user is typing in an input/textarea
            const isTyping = e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA';

            // Close modals with Escape (always works)
            if (e.key === 'Escape') {
                this.closeAllModals();
                return;
            }

            // Skip other shortcuts if typing
            if (isTyping) {
                return;
            }

            // Focus search input with "/" or Ctrl+K
            if (e.key === '/' || (e.ctrlKey && e.key === 'k')) {
                e.preventDefault();
                const searchInput = document.getElementById('searchInput');
                if (searchInput) {
                    searchInput.focus();
                }
                return;
            }

            // Toggle dark mode with Ctrl+D
            if (e.ctrlKey && e.key === 'd') {
                e.preventDefault();
                this.toggleDarkMode();
                return;
            }

            // Go back one level with Backspace
            if (e.key === 'Backspace') {
                e.preventDefault();
                this.goBack();
                return;
            }
        });
    }

    // FASE 5: Close all open modals (custom modal system)
    closeAllModals() {
        const modals = ['partDetailModal', 'searchResultsModal', 'diagramModal', 'vinDecoderModal'];
        modals.forEach(modalId => {
            this.closeModal(modalId);
        });
    }

    // Custom modal open
    openModal(modalId) {
        this.lastFocusedElement = document.activeElement;
        const modal = document.getElementById(modalId);
        if (modal) {
            modal.classList.add('active');
            // Focus first focusable element
            setTimeout(() => {
                const focusable = modal.querySelector('input, button, [tabindex]:not([tabindex="-1"])');
                if (focusable) focusable.focus();
            }, 100);
        }
    }

    // Custom modal close
    closeModal(modalId) {
        const modal = document.getElementById(modalId);
        if (modal) {
            modal.classList.remove('active');
            if (this.lastFocusedElement) {
                this.lastFocusedElement.focus();
            }
        }
    }

    // FASE 5: Go back one level in navigation
    goBack() {
        switch (this.currentView) {
            case 'models':
                this.goToBrands();
                break;
            case 'vehicles':
                this.goToModels(this.selectedBrand);
                break;
            case 'categories':
                this.goToVehicles(this.selectedBrand, this.selectedModel);
                break;
            case 'groups':
                this.goToCategories(this.selectedVehicleId);
                break;
            case 'parts':
                if (this.selectedCategory) {
                    this.goToGroups(this.selectedCategory.id);
                } else {
                    this.goToCategories(this.selectedVehicleId);
                }
                break;
            default:
                // Already at top level (brands)
                break;
        }
    }

    // Theme is now always dark, no toggle needed
    initDarkMode() {
        // Dark theme is the default and only theme
    }

    toggleDarkMode() {
        // No-op: single theme design
    }

    updateDarkModeIcon() {
        // No-op: no toggle button in new design
    }

    // FASE 5: Make cards keyboard accessible
    makeCardsAccessible(containerSelector, cardSelector) {
        const container = document.querySelector(containerSelector);
        if (!container) return;

        const cards = container.querySelectorAll(cardSelector);
        cards.forEach((card, index) => {
            // Add accessibility attributes
            card.setAttribute('tabindex', '0');
            card.setAttribute('role', 'button');

            // Get the card text for aria-label
            const cardText = card.textContent.trim().replace(/\s+/g, ' ');
            card.setAttribute('aria-label', cardText.substring(0, 100));

            // Add keyboard event handler
            card.addEventListener('keydown', (e) => {
                if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    card.click();
                }
            });
        });
    }

    // FASE 5: Open modal with focus management (custom modal system)
    openModalWithFocus(modalId) {
        this.openModal(modalId);
        return { hide: () => this.closeModal(modalId) };
    }

    async showBrands() {
        this.currentView = 'brands';
        this.selectedBrand = null;
        this.selectedModel = null;
        this.selectedYear = null; // FASE 5: Reset year
        this.selectedGroup = null; // FASE 5: Reset group
        this.updateBreadcrumb();
        this.hideFilters();

        const container = document.getElementById('mainContent');
        container.innerHTML = `
            <div class="loading-state">
                <i class="fas fa-spinner fa-spin"></i>
                <h4>Cargando marcas...</h4>
            </div>
        `;

        try {
            const [brandsRes, vehiclesRes] = await Promise.all([
                fetch('/api/brands'),
                fetch('/api/vehicles')
            ]);

            if (!brandsRes.ok || !vehiclesRes.ok) {
                throw new Error('Error al cargar datos');
            }

            const brands = await brandsRes.json();
            const vehicles = await vehiclesRes.json();

            // Contar modelos y vehículos por marca
            const brandStats = {};
            brands.forEach(brand => {
                brandStats[brand] = { models: new Set(), vehicles: 0 };
            });

            vehicles.forEach(v => {
                if (brandStats[v.brand]) {
                    brandStats[v.brand].models.add(v.model);
                    brandStats[v.brand].vehicles++;
                }
            });

            if (brands.length === 0) {
                container.innerHTML = `
                    <div class="empty-state">
                        <i class="fas fa-car"></i>
                        <h4>No hay marcas disponibles</h4>
                        <p>Agrega algunas marcas a la base de datos</p>
                    </div>
                `;
                return;
            }

            container.innerHTML = `<div class="content-grid brands-grid">
                ${brands.map(brand => `
                    <div class="brand-card" onclick="dashboard.goToModels('${brand}')">
                        <div class="brand-icon">
                            <i class="fas fa-car"></i>
                        </div>
                        <div class="brand-name">${brand}</div>
                        <div class="brand-count">
                            ${brandStats[brand].models.size} modelos
                        </div>
                        <div class="brand-count">
                            ${brandStats[brand].vehicles} vehículos
                        </div>
                    </div>
                `).join('')}
            </div>`;

            // FASE 5: Make brand cards keyboard accessible
            this.makeCardsAccessible('#mainContent', '.brand-card');

        } catch (error) {
            console.error('Error:', error);
            container.innerHTML = `
                <div class="empty-state">
                    <i class="fas fa-exclamation-triangle"></i>
                    <h4>Error al cargar marcas</h4>
                    <p>${error.message}</p>
                </div>
            `;
        }
    }

    async goToModels(brand) {
        this.currentView = 'models';
        this.selectedBrand = brand;
        this.selectedModel = null;
        this.selectedYear = null; // FASE 5: Reset year
        this.selectedGroup = null; // FASE 5: Reset group
        this.updateBreadcrumb();
        this.hideFilters();

        const container = document.getElementById('mainContent');
        container.innerHTML = `
            <div class="loading-state">
                <i class="fas fa-spinner fa-spin"></i>
                <h4>Cargando modelos de ${brand}...</h4>
            </div>
        `;

        try {
            const [modelsRes, vehiclesRes] = await Promise.all([
                fetch(`/api/models?brand=${encodeURIComponent(brand)}`),
                fetch(`/api/vehicles?brand=${encodeURIComponent(brand)}`)
            ]);

            if (!modelsRes.ok || !vehiclesRes.ok) {
                throw new Error('Error al cargar datos');
            }

            const models = await modelsRes.json();
            const vehicles = await vehiclesRes.json();

            // Contar vehículos y años por modelo
            const modelStats = {};
            models.forEach(model => {
                modelStats[model] = { years: new Set(), vehicles: 0, engines: new Set() };
            });

            vehicles.forEach(v => {
                if (modelStats[v.model]) {
                    modelStats[v.model].years.add(v.year);
                    modelStats[v.model].vehicles++;
                    modelStats[v.model].engines.add(v.engine);
                }
            });

            if (models.length === 0) {
                container.innerHTML = `
                    <div class="empty-state">
                        <i class="fas fa-car-side"></i>
                        <h4>No hay modelos para ${brand}</h4>
                        <p>Esta marca no tiene modelos registrados</p>
                        <button class="btn btn-back mt-3" onclick="dashboard.goToBrands()">
                            <i class="fas fa-arrow-left"></i> Volver a marcas
                        </button>
                    </div>
                `;
                return;
            }

            container.innerHTML = `<div class="content-grid models-grid">
                ${models.map(model => {
                    const stats = modelStats[model];
                    const yearsArray = Array.from(stats.years).sort((a, b) => b - a);
                    const yearRange = yearsArray.length > 0
                        ? (yearsArray.length > 1
                            ? `${yearsArray[yearsArray.length - 1]} - ${yearsArray[0]}`
                            : `${yearsArray[0]}`)
                        : 'N/A';

                    return `
                        <div class="model-card" onclick="dashboard.goToVehicles('${brand}', '${model}')">
                            <div class="model-name">${model}</div>
                            <div class="model-info">
                                <i class="fas fa-calendar-alt"></i> ${yearRange}
                            </div>
                            <div class="model-info">
                                <i class="fas fa-cogs"></i> ${stats.engines.size} motores
                            </div>
                            <div class="model-info">
                                <i class="fas fa-list"></i> ${stats.vehicles} variantes
                            </div>
                        </div>
                    `;
                }).join('')}
            </div>`;

            // FASE 5: Make model cards keyboard accessible
            this.makeCardsAccessible('#mainContent', '.model-card');

        } catch (error) {
            console.error('Error:', error);
            container.innerHTML = `
                <div class="empty-state">
                    <i class="fas fa-exclamation-triangle"></i>
                    <h4>Error al cargar modelos</h4>
                    <p>${error.message}</p>
                    <button class="btn btn-back mt-3" onclick="dashboard.goToBrands()">
                        <i class="fas fa-arrow-left"></i> Volver a marcas
                    </button>
                </div>
            `;
        }
    }

    async goToVehicles(brand, model) {
        this.currentView = 'vehicles';
        this.selectedBrand = brand;
        this.selectedModel = model;
        this.selectedYear = null; // FASE 5: Reset year (will be set when selecting vehicle)
        this.selectedGroup = null; // FASE 5: Reset group
        this.updateBreadcrumb();
        this.showFilters();

        const container = document.getElementById('mainContent');
        container.innerHTML = `
            <div class="loading-state">
                <i class="fas fa-spinner fa-spin"></i>
                <h4>Cargando vehículos...</h4>
            </div>
        `;

        try {
            // Fetch both vehicles info and model_year_engine IDs
            const [vehiclesRes, myeRes] = await Promise.all([
                fetch(`/api/vehicles?brand=${encodeURIComponent(brand)}&model=${encodeURIComponent(model)}`),
                fetch(`/api/model-year-engine?brand=${encodeURIComponent(brand)}&model=${encodeURIComponent(model)}`)
            ]);

            if (!vehiclesRes.ok || !myeRes.ok) {
                throw new Error('Error al cargar vehículos');
            }

            const vehicles = await vehiclesRes.json();
            const myeRecords = await myeRes.json();

            // Merge mye_id into vehicles based on matching fields
            this.allVehicles = vehicles.map(v => {
                const mye = myeRecords.find(m =>
                    m.brand === v.brand &&
                    m.model === v.model &&
                    m.year === v.year &&
                    m.engine === v.engine &&
                    (m.trim_level === v.trim_level || (!m.trim_level && !v.trim_level) || (m.trim_level === 'unknown' && v.trim_level === 'unknown'))
                );
                return { ...v, mye_id: mye ? mye.id : null };
            });
            this.filteredVehicles = [...this.allVehicles];

            // Poblar filtros
            await this.populateFilters(brand, model);

            this.displayVehicles();

        } catch (error) {
            console.error('Error:', error);
            container.innerHTML = `
                <div class="empty-state">
                    <i class="fas fa-exclamation-triangle"></i>
                    <h4>Error al cargar vehículos</h4>
                    <p>${error.message}</p>
                    <button class="btn btn-back mt-3" onclick="dashboard.goToModels('${brand}')">
                        <i class="fas fa-arrow-left"></i> Volver a modelos
                    </button>
                </div>
            `;
        }
    }

    async populateFilters(brand, model) {
        try {
            const [yearsRes, enginesRes] = await Promise.all([
                fetch(`/api/years?brand=${encodeURIComponent(brand)}&model=${encodeURIComponent(model)}`),
                fetch(`/api/engines?brand=${encodeURIComponent(brand)}&model=${encodeURIComponent(model)}`)
            ]);

            if (yearsRes.ok) {
                const years = await yearsRes.json();
                const yearFilter = document.getElementById('yearFilter');
                yearFilter.innerHTML = '<option value="">Todos los años</option>';
                years.forEach(year => {
                    yearFilter.innerHTML += `<option value="${year}">${year}</option>`;
                });
            }

            if (enginesRes.ok) {
                const engines = await enginesRes.json();
                const engineFilter = document.getElementById('engineFilter');
                engineFilter.innerHTML = '<option value="">Todos los motores</option>';
                engines.forEach(engine => {
                    engineFilter.innerHTML += `<option value="${engine}">${engine}</option>`;
                });
            }

        } catch (error) {
            console.error('Error populating filters:', error);
        }
    }

    bindFilterEvents() {
        document.getElementById('yearFilter').addEventListener('change', () => {
            this.applyFilters();
        });

        document.getElementById('engineFilter').addEventListener('change', () => {
            this.applyFilters();
        });
    }

    applyFilters() {
        const year = document.getElementById('yearFilter').value;
        const engine = document.getElementById('engineFilter').value;

        this.filteredVehicles = this.allVehicles.filter(v => {
            return (!year || v.year.toString() === year) &&
                   (!engine || v.engine === engine);
        });

        this.displayVehicles();
    }

    // Helper: Extract engine configuration from engine name
    getEngineConfig(engineName) {
        if (!engineName) return 'N/A';
        const upper = engineName.toUpperCase();

        // Match patterns like V6, V8, I4, H4, W12
        const vMatch = upper.match(/V(\d+)/);
        if (vMatch) return `V${vMatch[1]}`;

        const iMatch = upper.match(/I(\d+)|INLINE[- ]?(\d+)/);
        if (iMatch) return `I${iMatch[1] || iMatch[2]}`;

        const hMatch = upper.match(/H(\d+)|FLAT[- ]?(\d+)/);
        if (hMatch) return `H${hMatch[1] || hMatch[2]}`;

        const wMatch = upper.match(/W(\d+)/);
        if (wMatch) return `W${wMatch[1]}`;

        // Try to derive from cylinder count in name
        const cylMatch = upper.match(/(\d)[- ]?CYL/);
        if (cylMatch) return `${cylMatch[1]} Cil`;

        if (upper.includes('ELECTRIC')) return 'EV';
        if (upper.includes('ROTARY')) return 'Rotary';

        return 'N/A';
    }

    // Helper: Format displacement (cc to L)
    formatDisplacement(cc) {
        if (!cc || cc === 0) return 'N/A';
        const liters = (cc / 1000).toFixed(1);
        return `${liters}L`;
    }

    // Helper: Format fuel type in Spanish
    formatFuelType(fuel) {
        const types = {
            'gasoline': 'Gasolina',
            'diesel': 'Diésel',
            'electric': 'Eléctrico',
            'hybrid': 'Híbrido',
            'other': 'Otro'
        };
        return types[fuel] || fuel || 'N/A';
    }

    displayVehicles() {
        const container = document.getElementById('mainContent');
        const resultCount = document.getElementById('resultCount');

        resultCount.textContent = `${this.filteredVehicles.length} resultado${this.filteredVehicles.length !== 1 ? 's' : ''}`;

        if (this.filteredVehicles.length === 0) {
            container.innerHTML = `
                <div class="state-container">
                    <i class="fas fa-car"></i>
                    <h4>No se encontraron vehículos</h4>
                    <p>Intenta ajustar los filtros</p>
                </div>
            `;
            return;
        }

        container.innerHTML = `<div class="content-grid vehicles-grid">
            ${this.filteredVehicles.map(v => `
                <div class="vehicle-card">
                    <div class="vehicle-header">
                        <div class="vehicle-title">${v.year} ${v.brand} ${v.model}</div>
                        <div class="vehicle-engine">${v.engine}</div>
                    </div>
                    <div class="vehicle-body">
                        <div class="vehicle-specs">
                            <div class="spec-item">
                                <i class="fas fa-gas-pump"></i>
                                <div class="spec-value">${this.formatFuelType(v.fuel_type)}</div>
                            </div>
                            <div class="spec-item">
                                <i class="fas fa-bolt"></i>
                                <div class="spec-value">${v.power_hp || 'N/A'} HP</div>
                            </div>
                            <div class="spec-item">
                                <i class="fas fa-sync-alt"></i>
                                <div class="spec-value">${v.torque_nm || 'N/A'} Nm</div>
                            </div>
                            <div class="spec-item">
                                <i class="fas fa-tachometer-alt"></i>
                                <div class="spec-value">${this.formatDisplacement(v.displacement_cc)}</div>
                            </div>
                            <div class="spec-item">
                                <i class="fas fa-circle-notch"></i>
                                <div class="spec-value">${v.cylinders || 'N/A'} Cil</div>
                            </div>
                            <div class="spec-item">
                                <i class="fas fa-cog"></i>
                                <div class="spec-value">${this.getEngineConfig(v.engine)}</div>
                            </div>
                        </div>
                        ${v.trim_level && v.trim_level !== 'unknown' ? `
                            <div style="text-align: center; margin-top: 0.75rem;">
                                <span style="background: var(--accent); color: white; padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.8rem;">${v.trim_level}</span>
                            </div>
                        ` : ''}
                        <button class="btn-parts" onclick="dashboard.goToCategories(${v.mye_id})">
                            <i class="fas fa-cogs"></i> Ver Partes
                        </button>
                    </div>
                </div>
            `).join('')}
        </div>`;
    }

    goToBrands() {
        this.showBrands();
    }

    showFilters() {
        document.getElementById('filtersBar').classList.add('visible');
        // Reset filters
        document.getElementById('yearFilter').value = '';
        document.getElementById('engineFilter').value = '';
    }

    hideFilters() {
        document.getElementById('filtersBar').classList.remove('visible');
    }

    async goToCategories(myeId) {
        this.currentView = 'categories';
        this.selectedVehicleId = myeId;
        this.selectedCategory = null;

        // FASE 5: Find the vehicle to get year for breadcrumb
        const vehicle = this.allVehicles.find(v => v.mye_id === myeId);
        if (vehicle) {
            this.selectedYear = vehicle.year;
        }

        this.updateBreadcrumb();
        this.hideFilters();

        const container = document.getElementById('mainContent');
        container.innerHTML = `
            <div class="loading-state">
                <i class="fas fa-spinner fa-spin"></i>
                <h4>Cargando categorías...</h4>
            </div>
        `;

        try {
            // Get all categories (since we don't have vehicle-specific parts yet, show all categories)
            const response = await fetch('/api/categories');

            if (!response.ok) {
                throw new Error('Error al cargar categorías');
            }

            this.allCategories = await response.json();
            this.displayCategories();

        } catch (error) {
            console.error('Error:', error);
            container.innerHTML = `
                <div class="empty-state">
                    <i class="fas fa-exclamation-triangle"></i>
                    <h4>Error al cargar categorías</h4>
                    <p>${error.message}</p>
                    <button class="btn btn-back mt-3" onclick="dashboard.goToVehicles('${this.selectedBrand}', '${this.selectedModel}')">
                        <i class="fas fa-arrow-left"></i> Volver a vehículos
                    </button>
                </div>
            `;
        }
    }

    displayCategories() {
        const container = document.getElementById('mainContent');

        if (this.allCategories.length === 0) {
            container.innerHTML = `
                <div class="empty-state">
                    <i class="fas fa-folder-open"></i>
                    <h4>No hay categorías disponibles</h4>
                    <p>Este vehículo no tiene partes registradas</p>
                    <button class="btn btn-back mt-3" onclick="dashboard.goToVehicles('${this.selectedBrand}', '${this.selectedModel}')">
                        <i class="fas fa-arrow-left"></i> Volver a vehículos
                    </button>
                </div>
            `;
            return;
        }

        container.innerHTML = `<div class="content-grid categories-grid">
            ${this.allCategories.map(cat => {
                // Use icon_name directly from database (e.g., "fa-cog", "fa-bolt")
                const iconClass = cat.icon_name || 'fa-cog';
                const displayName = cat.name_es || cat.name;
                return `
                    <div class="category-card" onclick="dashboard.goToGroups(${cat.id})">
                        <div class="category-icon">
                            <i class="fas ${iconClass}"></i>
                        </div>
                        <div class="category-name">${displayName}</div>
                        <div class="category-count">
                            ${cat.children ? cat.children.length + ' subcategorías' : ''}
                        </div>
                    </div>
                `;
            }).join('')}
        </div>
        <div class="mt-3">
            <button class="btn btn-back" onclick="dashboard.goToVehicles('${this.selectedBrand}', '${this.selectedModel}')">
                <i class="fas fa-arrow-left"></i> Volver a vehículos
            </button>
        </div>`;

        // FASE 5: Make category cards keyboard accessible
        this.makeCardsAccessible('#mainContent', '.category-card');
    }

    async goToGroups(categoryId) {
        this.currentView = 'groups';
        const category = this.allCategories.find(c => c.id === categoryId);
        this.selectedCategory = category || { id: categoryId, name: 'Categoria' };
        this.selectedGroup = null; // FASE 5: Reset group
        this.updateBreadcrumb();
        this.hideFilters();

        const container = document.getElementById('mainContent');
        container.innerHTML = `
            <div class="loading-state">
                <i class="fas fa-spinner fa-spin"></i>
                <h4>Cargando grupos...</h4>
            </div>
        `;

        try {
            const response = await fetch(`/api/categories/${categoryId}/groups`);

            if (!response.ok) {
                throw new Error('Error al cargar grupos');
            }

            const groups = await response.json();
            this.displayGroups(groups, categoryId);

        } catch (error) {
            console.error('Error:', error);
            container.innerHTML = `
                <div class="empty-state">
                    <i class="fas fa-exclamation-triangle"></i>
                    <h4>Error al cargar grupos</h4>
                    <p>${error.message}</p>
                    <button class="btn btn-back mt-3" onclick="dashboard.goToCategories(${this.selectedVehicleId})">
                        <i class="fas fa-arrow-left"></i> Volver a categorías
                    </button>
                </div>
            `;
        }
    }

    displayGroups(groups, categoryId) {
        const container = document.getElementById('mainContent');

        if (groups.length === 0) {
            container.innerHTML = `
                <div class="empty-state">
                    <i class="fas fa-folder-open"></i>
                    <h4>No hay grupos en esta categoría</h4>
                    <button class="btn btn-back mt-3" onclick="dashboard.goToCategories(${this.selectedVehicleId})">
                        <i class="fas fa-arrow-left"></i> Volver a categorías
                    </button>
                </div>
            `;
            return;
        }

        container.innerHTML = `
        <h4 class="mb-3">${this.selectedCategory.name_es || this.selectedCategory.name}</h4>
        <div class="content-grid categories-grid">
            ${groups.map(group => `
                <div class="category-card">
                    <div class="category-icon" style="background: linear-gradient(135deg, var(--secondary-color), #2980b9);" onclick="dashboard.goToParts(${group.id})">
                        <i class="fas fa-layer-group"></i>
                    </div>
                    <div class="category-name" onclick="dashboard.goToParts(${group.id})">${group.name_es || group.name}</div>
                    <div class="mt-2">
                        <button class="btn btn-sm btn-primary me-1" onclick="dashboard.goToParts(${group.id})">
                            <i class="fas fa-cogs"></i> Ver Partes
                        </button>
                        <button class="btn btn-sm btn-outline-secondary" onclick="dashboard.goToDiagrams(${group.id})" title="Ver Diagramas">
                            <i class="fas fa-project-diagram"></i> Diagramas
                        </button>
                    </div>
                </div>
            `).join('')}
        </div>
        <div class="mt-3">
            <button class="btn btn-back" onclick="dashboard.goToCategories(${this.selectedVehicleId})">
                <i class="fas fa-arrow-left"></i> Volver a categorías
            </button>
        </div>`;

        // FASE 5: Make group cards keyboard accessible
        this.makeCardsAccessible('#mainContent', '.category-card');
    }

    async goToParts(groupId) {
        this.currentView = 'parts';
        this.selectedGroupId = groupId;

        // FASE 5: Fetch group details for breadcrumb
        try {
            const response = await fetch(`/api/groups/${groupId}`);
            if (response.ok) {
                this.selectedGroup = await response.json();
            }
        } catch (error) {
            console.error('Error fetching group details:', error);
            this.selectedGroup = { id: groupId, name: 'Grupo' };
        }

        this.updateBreadcrumb();
        this.hideFilters();

        const container = document.getElementById('mainContent');
        container.innerHTML = `
            <div class="loading-state">
                <i class="fas fa-spinner fa-spin"></i>
                <h4>Cargando partes...</h4>
            </div>
        `;

        try {
            const response = await fetch(`/api/parts?group_id=${groupId}`);

            if (!response.ok) {
                throw new Error('Error al cargar partes');
            }

            const partsData = await response.json();
            // Handle paginated response
            this.allParts = partsData.data || partsData;
            this.displayParts();

        } catch (error) {
            console.error('Error:', error);
            container.innerHTML = `
                <div class="empty-state">
                    <i class="fas fa-exclamation-triangle"></i>
                    <h4>Error al cargar partes</h4>
                    <p>${error.message}</p>
                    <button class="btn btn-back mt-3" onclick="dashboard.goToGroups(${this.selectedCategory.id})">
                        <i class="fas fa-arrow-left"></i> Volver a grupos
                    </button>
                </div>
            `;
        }
    }

    displayParts() {
        const container = document.getElementById('mainContent');

        if (this.allParts.length === 0) {
            container.innerHTML = `
                <div class="empty-state">
                    <i class="fas fa-box-open"></i>
                    <h4>No hay partes disponibles</h4>
                    <p>Este grupo no tiene partes registradas aún</p>
                    <button class="btn btn-back mt-3" onclick="dashboard.goToGroups(${this.selectedCategory.id})">
                        <i class="fas fa-arrow-left"></i> Volver a grupos
                    </button>
                </div>
            `;
            return;
        }

        container.innerHTML = `
            <div class="parts-table">
                <table>
                    <thead>
                        <tr>
                            <th><i class="fas fa-barcode"></i> OEM #</th>
                            <th><i class="fas fa-tag"></i> Nombre</th>
                            <th><i class="fas fa-layer-group"></i> Grupo</th>
                            <th><i class="fas fa-eye"></i> Acción</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${this.allParts.map(part => `
                            <tr>
                                <td><span class="part-oem-badge">${part.oem_part_number || 'N/A'}</span></td>
                                <td>${part.name_es || part.name || 'Sin nombre'}</td>
                                <td>${part.group_name || 'N/A'}</td>
                                <td>
                                    <button class="btn-view" onclick="dashboard.showPartDetail(${part.id})">
                                        <i class="fas fa-search"></i> Ver
                                    </button>
                                </td>
                            </tr>
                        `).join('')}
                    </tbody>
                </table>
            </div>
            <div class="mt-3">
                <button class="btn btn-back" onclick="dashboard.goToGroups(${this.selectedCategory.id})">
                    <i class="fas fa-arrow-left"></i> Volver a grupos
                </button>
            </div>
        `;
    }

    async showPartDetail(partId) {
        // FASE 5: Use focus management for modal
        const contentContainer = document.getElementById('partDetailContent');

        contentContainer.innerHTML = `
            <div class="text-center py-4">
                <i class="fas fa-spinner fa-spin fa-2x"></i>
                <p class="mt-2">Cargando detalles...</p>
            </div>
        `;

        const modal = this.openModalWithFocus('partDetailModal');

        try {
            // Fetch part details, alternatives, and cross-references in parallel
            const [partRes, alternativesRes, crossRefsRes] = await Promise.all([
                fetch(`/api/parts/${partId}`),
                fetch(`/api/parts/${partId}/alternatives`),
                fetch(`/api/parts/${partId}/cross-references`)
            ]);

            if (!partRes.ok) {
                throw new Error('Error al cargar detalle de la parte');
            }

            const part = await partRes.json();
            const alternatives = alternativesRes.ok ? await alternativesRes.json() : [];
            const crossRefs = crossRefsRes.ok ? await crossRefsRes.json() : [];

            contentContainer.innerHTML = `
                <div class="row">
                    <div class="col-12">
                        <h4 class="mb-3">${part.name_es || part.name || 'Sin nombre'}</h4>
                    </div>
                </div>
                <div class="part-detail-row">
                    <span class="part-detail-label">Número OEM</span>
                    <span class="part-detail-value"><span class="part-oem-badge">${part.oem_part_number || 'N/A'}</span></span>
                </div>
                <div class="part-detail-row">
                    <span class="part-detail-label">Categoría</span>
                    <span class="part-detail-value">${part.category_name_es || part.category_name || 'N/A'}</span>
                </div>
                <div class="part-detail-row">
                    <span class="part-detail-label">Grupo</span>
                    <span class="part-detail-value">${part.group_name_es || part.group_name || 'N/A'}</span>
                </div>
                ${part.description || part.description_es ? `
                <div class="part-detail-row">
                    <span class="part-detail-label">Descripción</span>
                    <span class="part-detail-value">${part.description_es || part.description}</span>
                </div>
                ` : ''}

                <!-- FASE 2: Cross-Referencias Section -->
                ${this.renderCrossReferences(crossRefs)}

                <!-- FASE 2: Alternativas Aftermarket Section -->
                ${this.renderAlternatives(alternatives)}
            `;

        } catch (error) {
            console.error('Error:', error);
            contentContainer.innerHTML = `
                <div class="text-center py-4">
                    <i class="fas fa-exclamation-triangle fa-2x text-warning"></i>
                    <p class="mt-2">${error.message}</p>
                </div>
            `;
        }
    }

    // FASE 2: Render cross-references section
    renderCrossReferences(crossRefs) {
        if (!crossRefs || crossRefs.length === 0) {
            return '';
        }

        const badges = crossRefs.map(ref => {
            const refNumber = ref.cross_reference_number || ref.part_number || ref;
            const brand = ref.brand ? ` (${ref.brand})` : '';
            return `<span class="crossref-badge">${refNumber}${brand}</span>`;
        }).join('');

        return `
            <div class="crossref-section">
                <h5><i class="fas fa-exchange-alt"></i> Cross-Referencias</h5>
                <div>
                    ${badges}
                </div>
            </div>
        `;
    }

    // FASE 2: Render alternatives section
    renderAlternatives(alternatives) {
        if (!alternatives || alternatives.length === 0) {
            return '';
        }

        const rows = alternatives.map(alt => `
            <tr>
                <td>${alt.brand || 'N/A'}</td>
                <td>${alt.part_number || 'N/A'}</td>
                <td>${alt.name_es || alt.name || 'N/A'}</td>
                <td>${this.getQualityBadge(alt.quality_tier)}</td>
                <td class="price-tag">${this.formatPrice(alt.price)}</td>
            </tr>
        `).join('');

        return `
            <div class="alternatives-section">
                <h5><i class="fas fa-clone"></i> Alternativas Aftermarket</h5>
                <table class="alternatives-table">
                    <thead>
                        <tr>
                            <th>Marca</th>
                            <th>Número de Parte</th>
                            <th>Nombre</th>
                            <th>Calidad</th>
                            <th>Precio</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${rows}
                    </tbody>
                </table>
            </div>
        `;
    }

    // FASE 2: Get quality tier badge HTML
    getQualityBadge(tier) {
        const tiers = {
            'economy': { class: 'quality-economy', label: 'Económico' },
            'standard': { class: 'quality-standard', label: 'Estándar' },
            'premium': { class: 'quality-premium', label: 'Premium' },
            'oem': { class: 'quality-oem', label: 'OEM' }
        };

        const tierInfo = tiers[tier?.toLowerCase()] || tiers['standard'];
        return `<span class="quality-badge ${tierInfo.class}">${tierInfo.label}</span>`;
    }

    // FASE 2: Format price as currency
    formatPrice(price) {
        if (price === null || price === undefined) {
            return 'N/A';
        }
        return new Intl.NumberFormat('es-MX', {
            style: 'currency',
            currency: 'MXN'
        }).format(price);
    }

    // FASE 2/4: Search by part number or general search
    async searchPartNumber() {
        const searchInputEl = document.getElementById('searchInput');
        const searchTerm = searchInputEl.value.trim();

        if (!searchTerm) {
            return;
        }

        // FASE 4: Check if input looks like a VIN (17 characters alphanumeric)
        if (searchTerm.length === 17 && /^[A-HJ-NPR-Z0-9]{17}$/i.test(searchTerm)) {
            // Offer to decode VIN
            if (confirm('El texto parece ser un VIN. ¿Deseas decodificarlo?')) {
                document.getElementById('vinInput').value = searchTerm.toUpperCase();
                this.openVinDecoder();
                return;
            }
        }

        // FASE 5: Use focus management for modal
        const contentContainer = document.getElementById('searchResultsContent');

        contentContainer.innerHTML = `
            <div class="text-center py-4">
                <i class="fas fa-spinner fa-spin fa-2x"></i>
                <p class="mt-2">Buscando "${searchTerm}"...</p>
            </div>
        `;

        const modal = this.openModalWithFocus('searchResultsModal');

        try {
            // FASE 4: Use full-text search endpoint for general search
            let response;
            // Try part number search first
            response = await fetch(`/api/search/part-number/${encodeURIComponent(searchTerm)}`);

            let results = [];
            if (response.ok) {
                results = await response.json();
            }

            // If no results from part number, try general search
            if (results.length === 0) {
                const searchResponse = await fetch(`/api/search?q=${encodeURIComponent(searchTerm)}`);
                if (searchResponse.ok) {
                    const searchData = await searchResponse.json();
                    results = searchData.parts || searchData || [];
                }
            }

            this.showSearchResults(results, searchTerm);

        } catch (error) {
            console.error('Error:', error);
            contentContainer.innerHTML = `
                <div class="text-center py-4">
                    <i class="fas fa-exclamation-triangle fa-2x text-warning"></i>
                    <p class="mt-2">Error al buscar: ${error.message}</p>
                </div>
            `;
        }
    }

    // FASE 2: Display search results
    showSearchResults(results, searchTerm) {
        const contentContainer = document.getElementById('searchResultsContent');
        const modalTitle = document.getElementById('searchResultsModalLabel');

        modalTitle.innerHTML = `<i class="fas fa-search"></i> Resultados para "${searchTerm}"`;

        if (!results || results.length === 0) {
            contentContainer.innerHTML = `
                <div class="text-center py-4">
                    <i class="fas fa-search fa-2x text-muted"></i>
                    <p class="mt-2">No se encontraron resultados para "${searchTerm}"</p>
                </div>
            `;
            return;
        }

        const resultItems = results.map(part => `
            <div class="search-result-item" onclick="dashboard.showPartDetailFromSearch(${part.id})">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <div class="search-result-part-number">
                            <span class="part-oem-badge">${part.oem_part_number || part.part_number || 'N/A'}</span>
                        </div>
                        <div class="search-result-name mt-1">${part.name_es || part.name || 'Sin nombre'}</div>
                    </div>
                    <div class="text-end">
                        ${part.quality_tier ? this.getQualityBadge(part.quality_tier) : ''}
                        ${part.brand ? `<div class="text-muted small mt-1">${part.brand}</div>` : ''}
                    </div>
                </div>
            </div>
        `).join('');

        contentContainer.innerHTML = `
            <p class="text-muted mb-3">${results.length} resultado${results.length !== 1 ? 's' : ''} encontrado${results.length !== 1 ? 's' : ''}</p>
            <div class="search-results-list">
                ${resultItems}
            </div>
        `;

        // FASE 5: Make search result items keyboard accessible
        this.makeCardsAccessible('#searchResultsContent', '.search-result-item');
    }

    // FASE 2: Show part detail from search results (closes search modal first)
    showPartDetailFromSearch(partId) {
        // Close search results modal
        const searchModal = bootstrap.Modal.getInstance(document.getElementById('searchResultsModal'));
        if (searchModal) {
            searchModal.hide();
        }

        // Small delay to allow modal transition, then show part detail
        setTimeout(() => {
            this.showPartDetail(partId);
        }, 300);
    }

    // FASE 3: Go to diagrams view for a group
    async goToDiagrams(groupId) {
        const container = document.getElementById('mainContent');
        container.innerHTML = `
            <div class="loading-state">
                <i class="fas fa-spinner fa-spin"></i>
                <h4>Cargando diagramas...</h4>
            </div>
        `;

        try {
            const response = await fetch(`/api/groups/${groupId}/diagrams`);

            if (!response.ok) {
                throw new Error('Error al cargar diagramas');
            }

            const diagrams = await response.json();
            this.displayDiagramThumbnails(diagrams, groupId);

        } catch (error) {
            console.error('Error:', error);
            container.innerHTML = `
                <div class="empty-state">
                    <i class="fas fa-exclamation-triangle"></i>
                    <h4>Error al cargar diagramas</h4>
                    <p>${error.message}</p>
                    <button class="btn btn-back mt-3" onclick="dashboard.goToGroups(${this.selectedCategory ? this.selectedCategory.id : 0})">
                        <i class="fas fa-arrow-left"></i> Volver a grupos
                    </button>
                </div>
            `;
        }
    }

    // FASE 3: Display diagram thumbnails grid
    displayDiagramThumbnails(diagrams, groupId) {
        const container = document.getElementById('mainContent');

        if (!diagrams || diagrams.length === 0) {
            container.innerHTML = `
                <div class="empty-state">
                    <i class="fas fa-project-diagram"></i>
                    <h4>No hay diagramas disponibles</h4>
                    <p>Este grupo no tiene diagramas registrados</p>
                    <button class="btn btn-back mt-3" onclick="dashboard.goToGroups(${this.selectedCategory ? this.selectedCategory.id : 0})">
                        <i class="fas fa-arrow-left"></i> Volver a grupos
                    </button>
                </div>
            `;
            return;
        }

        container.innerHTML = `
            <div class="diagram-viewer">
                <div class="diagram-header">
                    <h5 class="mb-0"><i class="fas fa-project-diagram"></i> Diagramas del Grupo</h5>
                    <span class="badge bg-light text-dark">${diagrams.length} diagrama${diagrams.length !== 1 ? 's' : ''}</span>
                </div>
                <div class="diagram-thumbnails">
                    ${diagrams.map(diagram => `
                        <div class="diagram-thumbnail" onclick="dashboard.showDiagram(${diagram.id})">
                            <div style="height: 100px; display: flex; align-items: center; justify-content: center; background: #f8f9fa; border-radius: 4px;">
                                ${diagram.thumbnail_url
                                    ? `<img src="${diagram.thumbnail_url}" alt="${diagram.name_es || diagram.name}">`
                                    : `<i class="fas fa-project-diagram fa-3x text-muted"></i>`
                                }
                            </div>
                            <div class="diagram-thumbnail-name">${diagram.name_es || diagram.name || 'Diagrama'}</div>
                        </div>
                    `).join('')}
                </div>
            </div>
            <div class="mt-3">
                <button class="btn btn-back" onclick="dashboard.goToGroups(${this.selectedCategory ? this.selectedCategory.id : 0})">
                    <i class="fas fa-arrow-left"></i> Volver a grupos
                </button>
            </div>
        `;

        // FASE 5: Make diagram thumbnails keyboard accessible
        this.makeCardsAccessible('#mainContent', '.diagram-thumbnail');
    }

    // FASE 3: Show diagram in modal with hotspots
    async showDiagram(diagramId) {
        // FASE 5: Use focus management for modal
        const contentContainer = document.getElementById('diagramModalContent');
        const modalTitle = document.getElementById('diagramModalLabel');

        contentContainer.innerHTML = `
            <div class="text-center py-5">
                <i class="fas fa-spinner fa-spin fa-2x"></i>
                <p class="mt-2">Cargando diagrama...</p>
            </div>
        `;

        const modal = this.openModalWithFocus('diagramModal');

        try {
            const response = await fetch(`/api/diagrams/${diagramId}`);

            if (!response.ok) {
                throw new Error('Error al cargar diagrama');
            }

            const diagram = await response.json();
            modalTitle.innerHTML = `<i class="fas fa-project-diagram"></i> ${diagram.name_es || diagram.name || 'Diagrama'}`;

            this.currentDiagramZoom = 1;
            this.renderDiagramWithHotspots(diagram);

        } catch (error) {
            console.error('Error:', error);
            contentContainer.innerHTML = `
                <div class="text-center py-5">
                    <i class="fas fa-exclamation-triangle fa-2x text-warning"></i>
                    <p class="mt-2">Error al cargar diagrama: ${error.message}</p>
                </div>
            `;
        }
    }

    // FASE 3: Render diagram with interactive hotspots
    renderDiagramWithHotspots(diagram) {
        const contentContainer = document.getElementById('diagramModalContent');
        const hotspots = diagram.hotspots || [];

        contentContainer.innerHTML = `
            <div class="diagram-header">
                <span>${diagram.description_es || diagram.description || ''}</span>
                <div class="zoom-controls">
                    <button onclick="dashboard.zoomDiagram(-0.1)" title="Reducir">
                        <i class="fas fa-minus"></i>
                    </button>
                    <button onclick="dashboard.zoomDiagram(0)" title="Restablecer">
                        <i class="fas fa-redo"></i>
                    </button>
                    <button onclick="dashboard.zoomDiagram(0.1)" title="Ampliar">
                        <i class="fas fa-plus"></i>
                    </button>
                </div>
            </div>
            <div class="diagram-container" style="overflow: auto;">
                <div class="diagram-svg-wrapper" id="diagramWrapper" style="transform: scale(${this.currentDiagramZoom}); transform-origin: center center;">
                    ${diagram.svg_content
                        ? diagram.svg_content
                        : diagram.image_url
                            ? `<img src="${diagram.image_url}" alt="${diagram.name_es || diagram.name}" style="max-width: 100%;">`
                            : `<div class="text-center text-muted py-5">
                                <i class="fas fa-image fa-4x"></i>
                                <p class="mt-3">No hay imagen de diagrama disponible</p>
                               </div>`
                    }
                    ${hotspots.map((hotspot, index) => this.renderHotspot(hotspot, index)).join('')}
                </div>
            </div>
            ${hotspots.length > 0 ? `
                <div class="p-3 border-top">
                    <h6 class="mb-2"><i class="fas fa-info-circle"></i> Leyenda de Partes</h6>
                    <div class="row">
                        ${hotspots.map((hotspot, index) => `
                            <div class="col-md-4 col-sm-6 mb-2">
                                <span class="badge bg-primary me-1">${index + 1}</span>
                                <span class="small">${hotspot.name_es || hotspot.name || hotspot.label || 'Parte ' + (index + 1)}</span>
                            </div>
                        `).join('')}
                    </div>
                </div>
            ` : ''}
        `;
    }

    // FASE 3: Render individual hotspot marker
    renderHotspot(hotspot, index) {
        const x = hotspot.x || hotspot.position_x || 0;
        const y = hotspot.y || hotspot.position_y || 0;
        const width = hotspot.width || 30;
        const height = hotspot.height || 30;

        return `
            <div class="hotspot"
                 style="left: ${x}px; top: ${y}px; width: ${width}px; height: ${height}px;"
                 onclick="dashboard.onHotspotClick(${JSON.stringify(hotspot).replace(/"/g, '&quot;')})"
                 title="${hotspot.name_es || hotspot.name || hotspot.label || ''}">
                <div class="hotspot-label" style="left: ${width + 5}px; top: 0;">
                    ${index + 1}
                </div>
                <svg width="${width}" height="${height}" style="position: absolute; top: 0; left: 0;">
                    <circle cx="${width/2}" cy="${height/2}" r="${Math.min(width, height)/2 - 2}"
                            fill="rgba(231, 76, 60, 0.3)"
                            stroke="var(--accent-color)"
                            stroke-width="2"/>
                </svg>
            </div>
        `;
    }

    // FASE 3: Handle hotspot click
    onHotspotClick(hotspot) {
        if (hotspot.part_id) {
            // Close diagram modal first
            const diagramModal = bootstrap.Modal.getInstance(document.getElementById('diagramModal'));
            if (diagramModal) {
                diagramModal.hide();
            }

            // Small delay to allow modal transition, then show part detail
            setTimeout(() => {
                this.showPartDetail(hotspot.part_id);
            }, 300);
        } else {
            // Show tooltip or alert with hotspot info
            const name = hotspot.name_es || hotspot.name || hotspot.label || 'Parte';
            const description = hotspot.description_es || hotspot.description || '';

            alert(`${name}${description ? '\n\n' + description : ''}`);
        }
    }

    // FASE 3: Zoom diagram controls
    zoomDiagram(delta) {
        const wrapper = document.getElementById('diagramWrapper');
        if (!wrapper) return;

        if (delta === 0) {
            // Reset zoom
            this.currentDiagramZoom = 1;
        } else {
            // Adjust zoom with limits
            this.currentDiagramZoom = Math.max(0.5, Math.min(2, this.currentDiagramZoom + delta));
        }

        wrapper.style.transform = `scale(${this.currentDiagramZoom})`;
    }

    // FASE 4: Open VIN decoder modal
    openVinDecoder() {
        // Clear previous results
        document.getElementById('vinResult').innerHTML = '';
        // FASE 5: Use focus management for modal
        this.openModalWithFocus('vinDecoderModal');
    }

    // FASE 4: Decode VIN
    async decodeVin() {
        const vinInput = document.getElementById('vinInput');
        const vin = vinInput.value.trim().toUpperCase();
        const resultContainer = document.getElementById('vinResult');

        // Validate VIN
        if (!vin) {
            resultContainer.innerHTML = `
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle"></i> Por favor ingresa un VIN
                </div>
            `;
            return;
        }

        if (vin.length !== 17) {
            resultContainer.innerHTML = `
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle"></i> El VIN debe tener exactamente 17 caracteres (actual: ${vin.length})
                </div>
            `;
            return;
        }

        // Check for invalid characters (I, O, Q are not allowed in VINs)
        if (/[IOQ]/i.test(vin)) {
            resultContainer.innerHTML = `
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle"></i> El VIN contiene caracteres invalidos. Las letras I, O y Q no se permiten en VINs.
                </div>
            `;
            return;
        }

        // Validate VIN format
        if (!/^[A-HJ-NPR-Z0-9]{17}$/i.test(vin)) {
            resultContainer.innerHTML = `
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle"></i> El VIN contiene caracteres invalidos. Solo se permiten letras (excepto I, O, Q) y numeros.
                </div>
            `;
            return;
        }

        resultContainer.innerHTML = `
            <div class="text-center py-4">
                <i class="fas fa-spinner fa-spin fa-2x"></i>
                <p class="mt-2">Decodificando VIN...</p>
            </div>
        `;

        try {
            const response = await fetch(`/api/vin/decode/${encodeURIComponent(vin)}`);

            if (!response.ok) {
                const errorData = await response.json().catch(() => ({}));
                throw new Error(errorData.detail || errorData.message || 'Error al decodificar VIN');
            }

            const data = await response.json();
            this.showVinResult(data, vin);

        } catch (error) {
            console.error('Error:', error);
            resultContainer.innerHTML = `
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-circle"></i> ${error.message}
                </div>
            `;
        }
    }

    // FASE 4: Show VIN decode result
    showVinResult(data, vin) {
        const resultContainer = document.getElementById('vinResult');

        // Build vehicle info from decoded data
        const vehicleInfo = data.vehicle || data;
        const make = vehicleInfo.make || vehicleInfo.brand || 'Desconocido';
        const model = vehicleInfo.model || 'Desconocido';
        const year = vehicleInfo.year || vehicleInfo.model_year || 'Desconocido';
        const engine = vehicleInfo.engine || vehicleInfo.engine_description || 'N/A';
        const trim = vehicleInfo.trim || vehicleInfo.trim_level || '';
        const bodyType = vehicleInfo.body_type || vehicleInfo.body_class || 'N/A';
        const driveType = vehicleInfo.drive_type || vehicleInfo.drivetrain || 'N/A';
        const fuelType = vehicleInfo.fuel_type || 'N/A';
        const transmission = vehicleInfo.transmission || 'N/A';
        const country = vehicleInfo.country || vehicleInfo.plant_country || 'N/A';

        // Check if we have a match in our database
        const hasMatch = data.matched || data.database_match || vehicleInfo.mye_id;
        const myeId = vehicleInfo.mye_id || data.mye_id;

        let matchCard = '';
        if (hasMatch && myeId) {
            matchCard = `
                <div class="vehicle-match-card">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <i class="fas fa-check-circle fa-2x me-2"></i>
                            <strong>Vehiculo encontrado en la base de datos</strong>
                        </div>
                        <button class="btn btn-light" onclick="dashboard.viewVinParts('${vin}', ${myeId})">
                            <i class="fas fa-cogs"></i> Ver Partes
                        </button>
                    </div>
                </div>
            `;
        } else {
            matchCard = `
                <div class="vehicle-match-card vehicle-no-match">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <i class="fas fa-info-circle fa-2x me-2"></i>
                            <strong>Vehiculo no encontrado en la base de datos</strong>
                        </div>
                        <button class="btn btn-light" onclick="dashboard.searchManuallyFromVin('${make}', '${model}', '${year}')">
                            <i class="fas fa-search"></i> Buscar Manualmente
                        </button>
                    </div>
                </div>
            `;
        }

        resultContainer.innerHTML = `
            <div class="vin-result">
                <div class="vin-result-header">
                    <span class="vin-badge">${vin}</span>
                    <span class="badge bg-success"><i class="fas fa-check"></i> VIN Valido</span>
                </div>

                <h5 class="mb-3">${year} ${make} ${model} ${trim}</h5>

                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="part-detail-row">
                            <span class="part-detail-label"><i class="fas fa-car"></i> Marca</span>
                            <span class="part-detail-value">${make}</span>
                        </div>
                        <div class="part-detail-row">
                            <span class="part-detail-label"><i class="fas fa-car-side"></i> Modelo</span>
                            <span class="part-detail-value">${model}</span>
                        </div>
                        <div class="part-detail-row">
                            <span class="part-detail-label"><i class="fas fa-calendar-alt"></i> Año</span>
                            <span class="part-detail-value">${year}</span>
                        </div>
                        <div class="part-detail-row">
                            <span class="part-detail-label"><i class="fas fa-cogs"></i> Motor</span>
                            <span class="part-detail-value">${engine}</span>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="part-detail-row">
                            <span class="part-detail-label"><i class="fas fa-gas-pump"></i> Combustible</span>
                            <span class="part-detail-value">${fuelType}</span>
                        </div>
                        <div class="part-detail-row">
                            <span class="part-detail-label"><i class="fas fa-exchange-alt"></i> Transmision</span>
                            <span class="part-detail-value">${transmission}</span>
                        </div>
                        <div class="part-detail-row">
                            <span class="part-detail-label"><i class="fas fa-road"></i> Traccion</span>
                            <span class="part-detail-value">${driveType}</span>
                        </div>
                        <div class="part-detail-row">
                            <span class="part-detail-label"><i class="fas fa-globe"></i> Pais</span>
                            <span class="part-detail-value">${country}</span>
                        </div>
                    </div>
                </div>

                ${matchCard}
            </div>
        `;
    }

    // FASE 4: View parts for a VIN
    async viewVinParts(vin, myeId) {
        // Close VIN modal
        const vinModal = bootstrap.Modal.getInstance(document.getElementById('vinDecoderModal'));
        if (vinModal) {
            vinModal.hide();
        }

        // FASE 5: Use focus management for modal
        const contentContainer = document.getElementById('searchResultsContent');
        const modalTitle = document.getElementById('searchResultsModalLabel');

        modalTitle.innerHTML = `<i class="fas fa-cogs"></i> Partes para VIN: ${vin.substring(0, 8)}...`;

        contentContainer.innerHTML = `
            <div class="text-center py-4">
                <i class="fas fa-spinner fa-spin fa-2x"></i>
                <p class="mt-2">Cargando partes...</p>
            </div>
        `;

        const modal = this.openModalWithFocus('searchResultsModal');

        try {
            const response = await fetch(`/api/vin/${encodeURIComponent(vin)}/parts`);

            if (!response.ok) {
                throw new Error('Error al cargar partes');
            }

            const data = await response.json();
            const parts = data.parts || data;

            this.displayVinParts(parts, vin, myeId);

        } catch (error) {
            console.error('Error:', error);
            // If VIN parts endpoint fails, try to use the mye_id to show categories
            if (myeId) {
                contentContainer.innerHTML = `
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle"></i> No se encontraron partes especificas para este VIN.
                        <br><br>
                        <button class="btn btn-primary" onclick="bootstrap.Modal.getInstance(document.getElementById('searchResultsModal')).hide(); setTimeout(() => dashboard.goToCategories(${myeId}), 300);">
                            <i class="fas fa-folder-open"></i> Ver Categorias del Vehiculo
                        </button>
                    </div>
                `;
            } else {
                contentContainer.innerHTML = `
                    <div class="text-center py-4">
                        <i class="fas fa-exclamation-triangle fa-2x text-warning"></i>
                        <p class="mt-2">Error al cargar partes: ${error.message}</p>
                    </div>
                `;
            }
        }
    }

    // FASE 4: Display parts from VIN lookup grouped by category
    displayVinParts(parts, vin, myeId) {
        const contentContainer = document.getElementById('searchResultsContent');

        if (!parts || parts.length === 0) {
            contentContainer.innerHTML = `
                <div class="text-center py-4">
                    <i class="fas fa-box-open fa-2x text-muted"></i>
                    <p class="mt-2">No se encontraron partes para este VIN</p>
                    ${myeId ? `
                        <button class="btn btn-primary mt-2" onclick="bootstrap.Modal.getInstance(document.getElementById('searchResultsModal')).hide(); setTimeout(() => dashboard.goToCategories(${myeId}), 300);">
                            <i class="fas fa-folder-open"></i> Ver Categorias del Vehiculo
                        </button>
                    ` : ''}
                </div>
            `;
            return;
        }

        // Group parts by category
        const grouped = {};
        parts.forEach(part => {
            const category = part.category_name_es || part.category_name || 'Sin Categoria';
            if (!grouped[category]) {
                grouped[category] = [];
            }
            grouped[category].push(part);
        });

        let html = `<p class="text-muted mb-3">${parts.length} parte${parts.length !== 1 ? 's' : ''} encontrada${parts.length !== 1 ? 's' : ''}</p>`;

        for (const [category, categoryParts] of Object.entries(grouped)) {
            html += `
                <div class="search-results-section">
                    <h5><i class="fas fa-folder"></i> ${category}</h5>
                    <div class="search-results-list" style="max-height: none;">
                        ${categoryParts.map(part => `
                            <div class="search-result-item" onclick="dashboard.showPartDetailFromSearch(${part.id})">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <div class="search-result-part-number">
                                            <span class="part-oem-badge">${part.oem_part_number || part.part_number || 'N/A'}</span>
                                        </div>
                                        <div class="search-result-name mt-1">${part.name_es || part.name || 'Sin nombre'}</div>
                                    </div>
                                    <div class="text-end">
                                        ${part.quality_tier ? this.getQualityBadge(part.quality_tier) : ''}
                                        ${part.group_name_es || part.group_name ? `<div class="text-muted small mt-1">${part.group_name_es || part.group_name}</div>` : ''}
                                    </div>
                                </div>
                            </div>
                        `).join('')}
                    </div>
                </div>
            `;
        }

        if (myeId) {
            html += `
                <div class="mt-3 text-center">
                    <button class="btn btn-primary" onclick="bootstrap.Modal.getInstance(document.getElementById('searchResultsModal')).hide(); setTimeout(() => dashboard.goToCategories(${myeId}), 300);">
                        <i class="fas fa-folder-open"></i> Ver Todas las Categorias
                    </button>
                </div>
            `;
        }

        contentContainer.innerHTML = html;
    }

    // FASE 4: Search manually from VIN (when no database match)
    searchManuallyFromVin(make, model, year) {
        // Close VIN modal
        const vinModal = bootstrap.Modal.getInstance(document.getElementById('vinDecoderModal'));
        if (vinModal) {
            vinModal.hide();
        }

        // Navigate to brand/model if they exist in our database
        setTimeout(async () => {
            try {
                // Check if brand exists
                const brandsRes = await fetch('/api/brands');
                if (brandsRes.ok) {
                    const brands = await brandsRes.json();
                    const matchedBrand = brands.find(b =>
                        b.toLowerCase() === make.toLowerCase() ||
                        b.toLowerCase().includes(make.toLowerCase()) ||
                        make.toLowerCase().includes(b.toLowerCase())
                    );

                    if (matchedBrand) {
                        // Brand exists, go to models
                        this.goToModels(matchedBrand);
                        return;
                    }
                }

                // Brand not found, show all brands
                alert(`La marca "${make}" no se encontro en la base de datos. Mostrando todas las marcas disponibles.`);
                this.goToBrands();

            } catch (error) {
                console.error('Error:', error);
                this.goToBrands();
            }
        }, 300);
    }
}

// Initialize dashboard globally
let dashboard;
document.addEventListener('DOMContentLoaded', () => {
    dashboard = new VehicleDashboard();
});