// Question and answer data structure
// Loaded from JSON file via AJAX

// Store all user answers
const userAnswers = {};

// Question data loaded from JSON
let questionData = {};
let productData = [];
let accessoryData = [];
let bitwiseData = {};

// Track accumulated bit value for URL state
let accumulatedBitValue = 0;

// Bit definitions (must match generate_bitwise_helper.py)
const BIT_DEFINITIONS = {
    'base_door': 0,          // 1
    'base_window': 1,        // 2
    'is_accessory': 2,       // 4
    'specific_item': 3,      // 8
    'material_aluminum': 4,   // 16
    'material_vinyl': 5,      // 32
    'color_black': 6,         // 64
    'color_white': 7,         // 128
    'color_bronze': 8,        // 256
    'color_tan': 9,           // 512
    'color_mill': 10,         // 1024
    'color_sandstone': 11,    // 2048
    'subtype_patio_door': 12,      // 4096
    'subtype_primary_window': 13,  // 8192
    'subtype_storm_door': 14,      // 16384
    'subtype_storm_window': 15     // 32768
};

// Initialize the quiz
function init() {
    // Load question data from JSON file
    loadQuestionData();
}

// Load question data and other JSON files
function loadQuestionData() {
    // Load all data files in parallel
    Promise.all([
        fetch('data/navigation.json').then(r => r.ok ? r.json() : Promise.reject('navigation.json not found')),
        fetch('data/products.json').then(r => r.ok ? r.json() : []).catch(() => []),
        fetch('data/accessories.json').then(r => r.ok ? r.json() : []).catch(() => []),
        fetch('data/product_bitwise.json').then(r => r.ok ? r.json() : []).catch(() => [])
    ])
    .then(([questions, products, accessories, bitwise]) => {
        questionData = questions;
        productData = products;
        accessoryData = accessories;
        
        // Index bitwise data by product code
        bitwiseData = {};
        bitwise.forEach(item => {
            bitwiseData[item.PROD_CODE] = item.BIT_VALUE;
        });
        
        console.log('Loaded:', {
            questions: Object.keys(questionData).length,
            products: productData.length,
            accessories: accessoryData.length,
            bitwise: Object.keys(bitwiseData).length
        });
        
        // Check if there's state in URL
        initFromURL();
    })
    .catch(error => {
        console.error('Error loading data:', error);
        document.getElementById('content').innerHTML = `
            <div class="result-container">
                <div class="result-title">Error Loading Application</div>
                <div class="result-details">
                    Failed to load data files. Please refresh the page or contact support.<br>
                    <small>Error: ${error}</small>
                </div>
            </div>
        `;
    });
}

// Handle conditional logic for q-material
function getNextForMaterial(answers) {
    const productType = answers['start'];
    if (productType === 'Window') {
        return 'q-window-type';
    } else if (productType === 'Door') {
        return 'q-door-type';
    } else if (productType === 'Patio Door') {
        return 'q-patio';
    }
    return 'q-window-type'; // default
}

// Navigation history
let history = ['start'];

// Initialize from URL parameters
function initFromURL() {
    const params = new URLSearchParams(window.location.search);
    
    // Priority 1: Direct product view
    const productCode = params.get('p');
    if (productCode) {
        accumulatedBitValue = parseInt(params.get('b') || '0', 10);
        showProductByCode(productCode);
        return;
    }
    
    // Priority 2: Restore navigation state
    const bitValue = params.get('b');
    const questionKey = params.get('q');
    
    if (bitValue) {
        accumulatedBitValue = parseInt(bitValue, 10);
        
        if (questionKey) {
            // Special case: results page
            if (questionKey === 'results') {
                restoreStateFromBitValue(accumulatedBitValue, null);
                history.push('results');
                showFilteredProducts();
                return;
            }
            
            restoreStateFromBitValue(accumulatedBitValue, questionKey);
            return;
        }
    }
    
    // Priority 3: Start fresh
    loadContent('start');
}

// Restore state from bit value
function restoreStateFromBitValue(bitValue, questionKey) {
    // Decode bit value back to user selections
    
    // Base type
    if (bitValue & 1) {
        userAnswers['start'] = 'Door';
    } else if (bitValue & 2) {
        userAnswers['start'] = 'Window';
    }
    
    // Subtypes
    if (bitValue & (1 << BIT_DEFINITIONS['subtype_patio_door'])) {
        if (bitValue & 1) userAnswers['q-door-type'] = 'Patio Door';
    }
    if (bitValue & (1 << BIT_DEFINITIONS['subtype_storm_door'])) {
        if (bitValue & 1) userAnswers['q-door-type'] = 'Storm Door';
    }
    if (bitValue & (1 << BIT_DEFINITIONS['subtype_primary_window'])) {
        if (bitValue & 2) userAnswers['q-window-type'] = 'Primary Window';
    }
    if (bitValue & (1 << BIT_DEFINITIONS['subtype_storm_window'])) {
        if (bitValue & 2) userAnswers['q-window-type'] = 'Storm Window';
    }
    
    // Materials
    if (bitValue & 16) {
        userAnswers['material'] = 'Aluminum';
    } else if (bitValue & 32) {
        userAnswers['material'] = 'Vinyl';
    }
    
    // Colors
    const colorMap = {
        64: 'Black', 128: 'White', 256: 'Bronze',
        512: 'Tan', 1024: 'Mill', 2048: 'Sandstone'
    };
    
    for (const [bit, color] of Object.entries(colorMap)) {
        if (bitValue & parseInt(bit)) {
            userAnswers['color'] = color;
            break;
        }
    }
    
    // Navigate to the saved question
    history = ['start'];
    if (questionKey && questionKey !== 'start') {
        history.push(questionKey);
    }
    loadContent(questionKey || 'start');
}

// Update URL with current state
function updateURL(questionKey = null) {
    const params = new URLSearchParams();
    
    if (accumulatedBitValue > 0) {
        params.set('b', accumulatedBitValue.toString());
    }
    
    const currentKey = questionKey || (history.length > 0 ? history[history.length - 1] : 'start');
    if (currentKey && currentKey !== 'start') {
        params.set('q', currentKey);
    }
    
    const newURL = window.location.pathname + (params.toString() ? '?' + params.toString() : '');
    window.history.replaceState(
        { bitValue: accumulatedBitValue, questionKey: currentKey },
        '',
        newURL
    );
}

// Update bit value based on selection
function updateBitValue(answerObject) {
    if (!answerObject || !answerObject.filter) return;
    
    const filter = answerObject.filter;
    
    // Base type
    if (filter.baseType === 'Door') {
        accumulatedBitValue |= (1 << BIT_DEFINITIONS['base_door']);
    } else if (filter.baseType === 'Window') {
        accumulatedBitValue |= (1 << BIT_DEFINITIONS['base_window']);
    }
    
    // Materials
    if (filter.material === 'Aluminum') {
        accumulatedBitValue |= (1 << BIT_DEFINITIONS['material_aluminum']);
    } else if (filter.material === 'Vinyl') {
        accumulatedBitValue |= (1 << BIT_DEFINITIONS['material_vinyl']);
    }
    
    // Colors
    const colorKey = filter.color ? 'color_' + filter.color.toLowerCase() : null;
    if (colorKey && BIT_DEFINITIONS[colorKey]) {
        accumulatedBitValue |= (1 << BIT_DEFINITIONS[colorKey]);
    }
    
    // Subtypes
    if (filter.subType) {
        const subtypeKey = 'subtype_' + filter.subType.toLowerCase().replace(/ /g, '_');
        if (BIT_DEFINITIONS[subtypeKey]) {
            accumulatedBitValue |= (1 << BIT_DEFINITIONS[subtypeKey]);
        }
    }
}

// Load content based on key
function loadContent(key) {
    // Special handling for results
    if (key === 'results') {
        showFilteredProducts();
        return;
    }
    
    const data = questionData[key];
    if (!data) {
        console.error('Content not found for key:', key);
        return;
    }

    const contentDiv = document.getElementById('content');
    
    if (data.type === 'question') {
        if (data.inputType === 'form') {
            renderForm(data, key);
        } else {
            renderQuestion(data, key);
        }
    } else if (data.type === 'product') {
        renderProduct(data);
    }

    updateBreadcrumb();
}

// Helper function to render notes section
function renderNotesSection(notes) {
    const notesId = 'notes-' + Date.now();
    return `
        <div class="notes-section">
            <button class="notes-toggle" onclick="toggleNotes('${notesId}')" type="button">
                <span class="notes-icon">ℹ️</span>
                <span class="notes-label">Additional Information</span>
                <span class="notes-arrow" id="${notesId}-arrow">▼</span>
            </button>
            <div class="notes-content" id="${notesId}" style="display: none;">
                ${notes}
            </div>
        </div>
    `;
}

// Toggle notes visibility
function toggleNotes(notesId) {
    const notesContent = document.getElementById(notesId);
    const arrow = document.getElementById(notesId + '-arrow');
    
    if (notesContent.style.display === 'none') {
        notesContent.style.display = 'block';
        arrow.textContent = '▲';
    } else {
        notesContent.style.display = 'none';
        arrow.textContent = '▼';
    }
}

// Render a question with answer buttons
function renderQuestion(data, currentKey) {
    const contentDiv = document.getElementById('content');
    
    let html = `
        <div class="question-container">
            <div class="question-title">${data.title}</div>
            <div class="question-subtitle">${data.subtitle}</div>
        </div>
    `;
    
    html += `
        <div class="buttons-wrapper">
            <div class="buttons-container">
    `;

    data.answers.forEach((answer, index) => {
        html += `
            <button class="answer-button" onclick="handleAnswerByIndex('${currentKey}', ${index})">
                <div class="answer-image">${answer.image}</div>
                <div class="answer-caption">${answer.caption}</div>
            </button>
        `;
    });

    html += `
            </div>
        </div>
    `;
    
    // Add notes section if available
    if (data.notes) {
        html += renderNotesSection(data.notes);
    }

    contentDiv.innerHTML = html;
}

// Render a form with text inputs
function renderForm(data, currentKey) {
    const contentDiv = document.getElementById('content');
    
    let html = `
        <div class="question-container">
            <div class="question-title">${data.title}</div>
            <div class="question-subtitle">${data.subtitle}</div>
        </div>
    `;
    
    // Render measurement type toggle buttons if configuration exists
    if (data.measurementType && data.measurementType.options) {
        const currentMeasurementType = userAnswers[`${currentKey}.measurementType`] || data.measurementType.defaultValue;
        
        html += `<div class="measurement-type-container">`;
        data.measurementType.options.forEach(option => {
            const isSelected = currentMeasurementType === option.value;
            const disabledClass = option.disabled ? 'disabled' : '';
            const disabledAttr = option.disabled ? 'disabled' : '';
            
            html += `
                <button type="button" 
                        class="measurement-toggle ${isSelected ? 'selected' : ''} ${disabledClass}"
                        data-value="${option.value}"
                        ${disabledAttr}
                        onclick="handleMeasurementTypeToggle('${option.value}', '${currentKey}')">
                    <span class="toggle-icon">📏</span>
                    <span class="toggle-label">${option.label}</span>
                </button>
            `;
        });
        html += `</div>`;
    }
    
    html += `
        <div class="form-wrapper">
            <form id="dynamicForm" class="dynamic-form" onsubmit="handleFormSubmit(event, '${currentKey}')">
    `;

    data.fields.forEach((field, index) => {
        html += `<div class="form-group">`;
        html += `<label for="${field.name}">${field.label}${field.required ? ' *' : ''}</label>`;
        
        if (field.type === 'select') {
            html += `<select id="${field.name}" name="${field.name}" ${field.required ? 'required' : ''}>`;
            field.options.forEach(option => {
                const selected = userAnswers[`${currentKey}.${field.name}`] === option.value ? 'selected' : '';
                html += `<option value="${option.value}" ${selected}>${option.label}</option>`;
            });
            html += `</select>`;
        } else if (field.type === 'textarea') {
            const value = userAnswers[`${currentKey}.${field.name}`] || '';
            html += `<textarea id="${field.name}" name="${field.name}" 
                     placeholder="${field.placeholder || ''}" 
                     ${field.required ? 'required' : ''}>${value}</textarea>`;
        } else {
            const value = userAnswers[`${currentKey}.${field.name}`] || '';
            html += `<input type="${field.type}" 
                     id="${field.name}" 
                     name="${field.name}" 
                     placeholder="${field.placeholder || ''}" 
                     value="${value}"
                     ${field.required ? 'required' : ''}>`;
        }
        
        html += `</div>`;
    });

    html += `
                <div class="form-group">
                    <button type="submit" class="submit-button">Continue →</button>
                </div>
            </form>
        </div>
    `;
    
    // Add notes section if available
    if (data.notes) {
        html += renderNotesSection(data.notes);
    }

    contentDiv.innerHTML = html;
}

// Render a product result
function renderProduct(data) {
    const contentDiv = document.getElementById('content');
    
    // Build specifications from stored answers
    let specsHtml = '';
    if (Object.keys(userAnswers).length > 0) {
        specsHtml = '<strong>Your Specifications:</strong><br>';
        for (const [key, value] of Object.entries(userAnswers)) {
            if (value && key !== 'start') {
                const displayKey = key.split('.').pop().replace(/([A-Z])/g, ' $1').trim();
                specsHtml += `${displayKey.charAt(0).toUpperCase() + displayKey.slice(1)}: ${value}<br>`;
            }
        }
        specsHtml += '<br>';
    }
    
    // Get product image (use placeholder if not specified)
    const productImage = data.image || 'https://via.placeholder.com/400x400/e0e0e0/666?text=' + encodeURIComponent(data.code);
    
    let html = `
        <div class="result-container">
            <div class="result-title">${data.title}</div>
            <div class="result-content">
                <div class="result-image-section">
                    <img src="${productImage}" alt="${data.title}" class="product-image" onerror="this.src='https://via.placeholder.com/400x400/e0e0e0/666?text=No+Image'">
                </div>
                <div class="result-details">
                    <strong>Product Code:</strong> ${data.code}<br>
                    <strong>Category:</strong> ${data.category}<br><br>
                    ${specsHtml}
                    ${data.description}<br><br>
                    <strong>Key Features:</strong>
                    <ul style="list-style-position: inside; text-align: left;">
                        ${data.features.map(f => `<li>${f}</li>`).join('')}
                    </ul>
                </div>
            </div>
            <div class="result-actions">
                <button class="back-button" onclick="goBack()">← Go Back</button>
                <button class="back-button" onclick="startOver()" style="margin-left: 10px;">Start Over</button>
            </div>
        </div>
    `;

    contentDiv.innerHTML = html;
}

// Handle answer selection from buttons
function handleAnswer(currentKey, answerValue, nextKeyOrIndex) {
    // Store the answer
    userAnswers[currentKey] = answerValue;
    
    // Check if this is an index (new format) or key (old format)
    let nextKey = nextKeyOrIndex;
    const currentQuestion = questionData[currentKey];
    
    if (currentQuestion && currentQuestion.answers && typeof nextKeyOrIndex === 'number') {
        // New format: index provided
        const answerObject = currentQuestion.answers[nextKeyOrIndex];
        nextKey = answerObject.next;
        
        // Store dimensions if provided (for preset sizes)
        if (answerObject.dimensions) {
            userAnswers['q-dimensions.width'] = answerObject.dimensions.width;
            userAnswers['q-dimensions.height'] = answerObject.dimensions.height;
        }
        
        // Update bit value if filter exists
        if (answerObject.filter) {
            updateBitValue(answerObject);
        }
    }
    
    history.push(nextKey);
    updateURL(nextKey);
    loadContent(nextKey);
}

// Handle answer by index only (used by buttons to avoid escaping issues)
function handleAnswerByIndex(currentKey, answerIndex) {
    const currentQuestion = questionData[currentKey];
    if (!currentQuestion || !currentQuestion.answers) {
        console.error('Invalid question:', currentKey);
        return;
    }
    
    const answerObject = currentQuestion.answers[answerIndex];
    if (!answerObject) {
        console.error('Invalid answer index:', answerIndex);
        return;
    }
    
    // Store the answer caption
    userAnswers[currentKey] = answerObject.caption;
    
    // Store dimensions if provided (for preset sizes)
    if (answerObject.dimensions) {
        userAnswers['q-dimensions.width'] = answerObject.dimensions.width;
        userAnswers['q-dimensions.height'] = answerObject.dimensions.height;
    }
    
    // Update bit value if filter exists
    if (answerObject.filter) {
        updateBitValue(answerObject);
    }
    
    // Navigate to next question
    history.push(answerObject.next);
    updateURL(answerObject.next);
    loadContent(answerObject.next);
}

// Handle measurement type toggle button click
function handleMeasurementTypeToggle(value, currentKey) {
    // Store the selected measurement type
    userAnswers[`${currentKey}.measurementType`] = value;
    
    // Update the UI to reflect the selection
    const toggleButtons = document.querySelectorAll('.measurement-toggle');
    toggleButtons.forEach(button => {
        if (button.dataset.value === value) {
            button.classList.add('selected');
        } else {
            button.classList.remove('selected');
        }
    });
}

// Handle form submission
function handleFormSubmit(event, currentKey) {
    event.preventDefault();
    
    const form = event.target;
    const formData = new FormData(form);
    
    // Store all form field values
    for (const [key, value] of formData.entries()) {
        userAnswers[`${currentKey}.${key}`] = value;
    }
    
    // Ensure measurement type is saved if it was selected
    const data = questionData[currentKey];
    if (data.measurementType && !userAnswers[`${currentKey}.measurementType`]) {
        userAnswers[`${currentKey}.measurementType`] = data.measurementType.defaultValue;
    }
    
    // Get the next key (handle conditional logic)
    let nextKey;
    
    // Check if this is the q-material question that needs conditional logic
    if (currentKey === 'q-material' && data.next === 'q-material-conditional') {
        nextKey = getNextForMaterial(userAnswers);
    } else {
        nextKey = data.next;
    }
    
    // Special handling for results
    if (nextKey === 'results') {
        history.push(nextKey);
        updateURL(nextKey);
        showFilteredProducts();
        return;
    }
    
    history.push(nextKey);
    updateURL(nextKey);
    loadContent(nextKey);
}

// Go back to previous question
function goBack() {
    if (history.length > 1) {
        history.pop();
        const previousKey = history[history.length - 1];
        loadContent(previousKey);
    }
}

// Start over
function startOver() {
    history = ['start'];
    // Clear all stored answers
    for (const key in userAnswers) {
        delete userAnswers[key];
    }
    // Clear bit value
    accumulatedBitValue = 0;
    // Clear URL
    window.history.replaceState({}, '', window.location.pathname);
    loadContent('start');
}

// Show product by code (from URL)
function showProductByCode(productCode) {
    if (productData.length === 0) {
        document.getElementById('content').innerHTML = `
            <div class="result-container">
                <div class="result-title">Products Not Loaded</div>
                <div class="result-details">
                    Product data not available yet. Please generate JSON files first.
                </div>
                <button class="back-button" onclick="startOver()">Start Over</button>
            </div>
        `;
        return;
    }
    
    const product = productData.find(p => p.productCode === productCode || p.id === productCode);
    if (!product) {
        document.getElementById('content').innerHTML = `
            <div class="result-container">
                <div class="result-title">Product Not Found</div>
                <div class="result-details">
                    Product ${productCode} not found.
                </div>
                <button class="back-button" onclick="startOver()">Start Over</button>
            </div>
        `;
        return;
    }
    
    showProductDetail(product);
}

// Show product detail
function showProductDetail(product) {
    const prodCode = product.productCode || product.id;
    
    // Add to history if not already there
    const productKey = `product-${prodCode}`;
    if (history[history.length - 1] !== productKey) {
        history.push(productKey);
    }
    
    // Update URL with product code
    const params = new URLSearchParams();
    params.set('p', prodCode);
    if (accumulatedBitValue > 0) {
        params.set('b', accumulatedBitValue.toString());
    }
    
    window.history.pushState(
        { productCode: prodCode },
        '',
        '?' + params.toString()
    );
    
    // Get compatible accessories if available
    const compatibleAccessories = accessoryData.filter(acc => 
        product.compatibleAccessories && product.compatibleAccessories.includes(acc.id)
    );
    
    // Build specifications from stored answers
    let specsHtml = '';
    if (Object.keys(userAnswers).length > 0) {
        specsHtml = '<strong>Your Specifications:</strong><br>';
        for (const [key, value] of Object.entries(userAnswers)) {
            if (value && key !== 'start') {
                const displayKey = key.split('.').pop().replace(/([A-Z])/g, ' $1').trim();
                specsHtml += `${displayKey.charAt(0).toUpperCase() + displayKey.slice(1)}: ${value}<br>`;
            }
        }
        specsHtml += '<br>';
    }
    
    // Get product details
    const title = product.title || product.description || product.DESCRIPTION || prodCode;
    const category = product.category || product.CATEGORY || 'N/A';
    const description = product.detailedDescription || product.description || product.DESCRIPTION || 'No description available';
    const features = product.features || [];
    
    // Get product image configuration
    const productImage = product.image || `https://via.placeholder.com/400x400/e0e0e0/666?text=${encodeURIComponent(prodCode)}`;
    const hasLayeredImages = product.imageConfig && product.imageConfig.layered === true;
    const hasFlatImages = product.flatImages === true || product.imagePattern;
    const useDynamicAPI = product.useDynamicAPI === true;
    
    // Get available materials and colors from product data
    const availableMaterials = product.materials || [];
    const availableColors = product.colors || [];
    const availableSizes = product.sizes || [];
    
    // Sort materials alphabetically
    const sortedMaterials = [...availableMaterials].sort((a, b) => a.localeCompare(b));
    
    // Sort colors alphabetically, but put White at the bottom
    const sortedColors = [...availableColors].sort((a, b) => {
        if (a === 'White') return 1;
        if (b === 'White') return -1;
        return a.localeCompare(b);
    });
    
    // Get user's quiz answers to pre-select dropdowns
    // Check multiple possible keys for material and color
    let selectedMaterial = null;
    let selectedColor = null;
    
    for (const key in userAnswers) {
        if (key.includes('material') && userAnswers[key]) {
            selectedMaterial = userAnswers[key].toLowerCase();
        }
        if (key.includes('color') && userAnswers[key]) {
            selectedColor = userAnswers[key].toLowerCase();
        }
    }
    
    // Build material options
    let materialOptionsHtml = '';
    if (sortedMaterials.length === 0) {
        materialOptionsHtml = '<option value="">N/A</option>';
    } else if (sortedMaterials.length === 1) {
        materialOptionsHtml = `<option value="${sortedMaterials[0].toLowerCase()}" selected>${sortedMaterials[0]}</option>`;
    } else {
        materialOptionsHtml = '<option value="">Select Material</option>';
        sortedMaterials.forEach(material => {
            const materialLower = material.toLowerCase();
            const selected = (selectedMaterial && materialLower === selectedMaterial) ? 'selected' : '';
            materialOptionsHtml += `<option value="${materialLower}" ${selected}>${material}</option>`;
        });
    }
    
    // Build color options
    let colorOptionsHtml = '';
    if (sortedColors.length === 0) {
        colorOptionsHtml = '<option value="">N/A</option>';
    } else if (sortedColors.length === 1) {
        colorOptionsHtml = `<option value="${sortedColors[0].toLowerCase()}" selected>${sortedColors[0]}</option>`;
    } else {
        colorOptionsHtml = '<option value="">Select Color</option>';
        sortedColors.forEach(color => {
            const colorLower = color.toLowerCase();
            const selected = (selectedColor && colorLower === selectedColor) ? 'selected' : '';
            colorOptionsHtml += `<option value="${colorLower}" ${selected}>${color}</option>`;
        });
    }
    
    // Get dimensions from quiz to pre-select size
    const quizWidth = userAnswers['q-dimensions.width'];
    const quizHeight = userAnswers['q-dimensions.height'];
    const selectedSize = (quizWidth && quizHeight) ? `${quizWidth}x${quizHeight}` : null;
    
    // Build size options
    let sizeOptionsHtml = '<option value="">Select Size</option>';
    if (availableSizes.length > 0) {
        availableSizes.forEach(size => {
            if (typeof size === 'object' && size.value && size.label) {
                const selected = (selectedSize && size.value === selectedSize) ? 'selected' : '';
                sizeOptionsHtml += `<option value="${size.value}" ${selected}>${size.label}</option>`;
            } else if (typeof size === 'string') {
                const selected = (selectedSize && size === selectedSize) ? 'selected' : '';
                sizeOptionsHtml += `<option value="${size}" ${selected}>${size}</option>`;
            }
        });
    } else {
        // Default generic sizes if none specified
        sizeOptionsHtml += `<option value="30x80" ${selectedSize === '30x80' ? 'selected' : ''}>30" x 80"</option>`;
        sizeOptionsHtml += `<option value="32x80" ${selectedSize === '32x80' ? 'selected' : ''}>32" x 80"</option>`;
        sizeOptionsHtml += `<option value="36x80" ${selectedSize === '36x80' ? 'selected' : ''}>36" x 80"</option>`;
    }
    sizeOptionsHtml += '<option value="custom">Custom Size</option>';
    
    const contentDiv = document.getElementById('content');
    
    // Build the image display (layered, flat, or dynamic API)
    let imageDisplayHtml = '';
    
    if (hasLayeredImages && !hasFlatImages && !useDynamicAPI) {
        // Use layered image system
        const basePath = product.imageConfig.basePath || '';
        const layers = product.imageConfig.layers || {};
        
        imageDisplayHtml = `
            <div class="door-configurator" id="door-configurator">
                ${layers.base ? `<img src="${basePath}${layers.base}" class="layer-base" alt="Base">` : ''}
                <img src="" class="layer-door" id="door-layer" alt="Door" style="display:none;">
                ${layers.hardware ? `<img src="${basePath}${layers.hardware}" class="layer-hardware" id="hardware-layer" alt="Hardware">` : ''}
                <img src="" class="layer-overlay" id="overlay-layer" alt="View" style="display:none;">
                <div class="config-preview-notice" id="config-notice" style="display:none;">
                    ⚠️ Preview not available for this configuration
                </div>
            </div>
        `;
    } else {
        // Use flat image (for pre-rendered images or dynamic API)
        // Determine initial image based on user's quiz answer, or default/first color
        let initialImage = productImage;
        
        if (hasFlatImages && sortedColors.length > 0) {
            // Priority: 1) User's quiz selection, 2) Single color auto-select, 3) Default to 'white'
            let defaultColor;
            if (selectedColor && sortedColors.some(c => c.toLowerCase() === selectedColor)) {
                defaultColor = selectedColor;
            } else if (sortedColors.length === 1) {
                defaultColor = sortedColors[0].toLowerCase();
            } else {
                defaultColor = 'white';
            }
            
            // Determine handle color based on door color
            let handleColor = product.handleColor || 'silver';
            if (prodCode.toUpperCase() === 'COBRAI') {
                const handleMap = {
                    'black': 'black',
                    'white': 'white',
                    'bronze': 'bronze',
                    'sandstone': 'bronze'
                };
                handleColor = handleMap[defaultColor] || defaultColor;
            }
            
            initialImage = buildFlatImagePath(product, defaultColor, handleColor);
        }
        
        imageDisplayHtml = `
            <img id="product-detail-image" 
                 src="${initialImage}" 
                 alt="${title}" 
                 class="product-image" 
                 onerror="this.src='${productImage}'">
        `;
    }
    
    let html = `
        <div class="result-container">
            <div class="result-title">${title}</div>
            <div class="result-content">
                <div class="result-image-section">
                    ${imageDisplayHtml}
                    <div class="product-config-form">
                        <h3>Configure Your Product</h3>
                        <div class="config-field">
                            <label for="config-material">Material:</label>
                            <select id="config-material" class="config-select" ${availableMaterials.length <= 1 ? 'disabled' : ''} onchange="updateProductPreview('${prodCode}')">
                                ${materialOptionsHtml}
                            </select>
                        </div>
                        <div class="config-field">
                            <label for="config-color">Color:</label>
                            <select id="config-color" class="config-select" ${availableColors.length <= 1 ? 'disabled' : ''} onchange="updateProductPreview('${prodCode}')">
                                ${colorOptionsHtml}
                            </select>
                        </div>
                        <div class="config-field">
                            <label for="config-size">Size:</label>
                            <select id="config-size" class="config-select" onchange="handleSizeChange('${prodCode}')">
                                ${sizeOptionsHtml}
                            </select>
                        </div>
                        <div id="custom-size-fields" class="config-field" style="display: none; margin-left: 20px;">
                            <div style="display: flex; gap: 10px; align-items: center;">
                                <div style="flex: 1;">
                                    <label for="custom-width">Width (inches):</label>
                                    <input type="number" id="custom-width" class="config-input" placeholder="e.g., 36" min="1" max="120">
                                </div>
                                <div style="flex: 1;">
                                    <label for="custom-height">Height (inches):</label>
                                    <input type="number" id="custom-height" class="config-input" placeholder="e.g., 80" min="1" max="120">
                                </div>
                            </div>
                        </div>
                        <div class="config-field">
                            <label>Hinge Location:</label>
                            <div class="hinge-options">
                                <label class="radio-label">
                                    <input type="radio" name="hinge-location" value="right" onchange="updateHingeLocation(true)">
                                    <span>Right Hinge Door</span>
                                </label>
                                <label class="radio-label">
                                    <input type="radio" name="hinge-location" value="left" checked onchange="updateHingeLocation(false)">
                                    <span>Left Hinge Door</span>
                                </label>
                            </div>
                        </div>
                        <div class="config-field" style="margin-top: 20px;">
                            <button class="back-button" onclick="addToOrder('${prodCode}')" style="width: 100%; padding: 12px; font-size: 16px;">Add to Order</button>
                        </div>
                    </div>
                </div>
                <div class="result-details">
                    <strong>Product Code:</strong> ${prodCode}<br>
                    <strong>Category:</strong> ${category}<br><br>
                    ${specsHtml}
                    ${description}<br><br>
    `;
    
    // Add features if available
    if (features.length > 0) {
        html += `
                    <strong>Key Features:</strong>
                    <ul style="list-style-position: inside; text-align: left;">
                        ${features.map(f => `<li>${f}</li>`).join('')}
                    </ul>
        `;
    }
    
    if (compatibleAccessories.length > 0) {
        html += `
            <h3 style="margin-top: 20px;">Compatible Accessories</h3>
            <div class="accessories-list">
        `;
        compatibleAccessories.forEach(acc => {
            html += `
                <div class="accessory-item">
                    <strong>${acc.description}</strong><br>
                    <small>Code: ${acc.accessoryCode} | ${acc.materials ? acc.materials.join(', ') : 'N/A'}</small>
                </div>
            `;
        });
        html += `</div>`;
    }
    
    html += `
                </div>
            </div>
            <div class="result-actions" style="justify-content: center;">
                <button class="back-button" onclick="goBackToResults()">← Go Back</button>
                <button class="back-button" onclick="startOver()">Start Over</button>
                <button class="back-button" onclick="shareCurrentPage()">🔗 Share</button>
            </div>
        </div>
    `;
    
    contentDiv.innerHTML = html;
    updateBreadcrumb();
    
    // Initialize images based on type
    if (hasLayeredImages && !hasFlatImages && !useDynamicAPI) {
        updateProductPreview(prodCode);
    } else if (hasFlatImages || useDynamicAPI) {
        // Flat images or dynamic API - will update on dropdown change
        // Initialize with first color if flat images
        if (hasFlatImages && sortedColors.length > 0) {
            updateFlatImagePreview(prodCode);
        }
    }
}

// Update product preview based on configuration
function updateProductPreview(productCode) {
    console.log('updateProductPreview called with:', productCode);
    
    const product = productData.find(p => p.productCode === productCode || p.id === productCode);
    if (!product) return;
    
    // Check which system to use
    const hasFlatImages = product.flatImages === true || product.imagePattern;
    const useDynamicAPI = product.useDynamicAPI === true;
    
    console.log('Product flags - hasFlatImages:', hasFlatImages, 'useDynamicAPI:', useDynamicAPI);
    
    if (hasFlatImages) {
        // Use pre-rendered flat images
        updateFlatImagePreview(productCode);
        return;
    }
    
    if (useDynamicAPI) {
        // Use dynamic image generation API
        updateDynamicImagePreview(productCode);
        return;
    }
    
    // Otherwise use layered image system
    if (!product.imageConfig || !product.imageConfig.layered) return;
    
    const basePath = product.imageConfig.basePath || '';
    const layers = product.imageConfig.layers || {};
    
    // Get selected values
    const selectedColor = document.getElementById('config-color')?.value || '';
    const selectedSize = document.getElementById('config-size')?.value || '';
    
    const doorLayer = document.getElementById('door-layer');
    const overlayLayer = document.getElementById('overlay-layer');
    const notice = document.getElementById('config-notice');
    
    let hasPreview = true;
    
    // Update door color layer
    if (doorLayer && layers.door) {
        if (selectedColor && layers.door[selectedColor]) {
            doorLayer.src = basePath + layers.door[selectedColor];
            doorLayer.style.display = 'block';
            doorLayer.onerror = function() {
                this.style.display = 'none';
                showConfigNotice(true);
            };
        } else if (selectedColor) {
            doorLayer.style.display = 'none';
            hasPreview = false;
        }
    }
    
    // Update overlay layer (if configuration dependent)
    if (overlayLayer && layers.overlay) {
        // You can add logic here based on door type, view, etc.
        // For now, keep it hidden unless specifically needed
        overlayLayer.style.display = 'none';
    }
    
    // Show/hide notice
    showConfigNotice(!hasPreview && selectedColor);
}

// Build flat image path based on product configuration and selections
function buildFlatImagePath(product, doorColor, handleColor = 'silver') {
    const prodCode = product.productCode || product.id;
    
    // Option 1: Use custom image pattern if defined
    if (product.imagePattern) {
        return product.imagePattern
            .replace('{productCode}', prodCode)
            .replace('{doorColor}', doorColor)
            .replace('{handleColor}', handleColor);
    }
    
    // Option 2: Use custom image map if defined
    if (product.imageMap && product.imageMap[doorColor]) {
        return product.imageMap[doorColor];
    }
    
    // Option 3: Default naming convention: productCode-doorColor-handleColor
    // Use relative path (Flask serves from app/images/)
    return `images/${prodCode.toLowerCase()}-${doorColor.toLowerCase()}-${handleColor.toLowerCase()}.png`;
}

// Update preview using pre-rendered flat images
function updateFlatImagePreview(productCode) {
    const product = productData.find(p => p.productCode === productCode || p.id === productCode);
    if (!product) return;
    
    const img = document.getElementById('product-detail-image');
    if (!img) return;
    
    // Get selected configuration
    const doorColor = document.getElementById('config-color')?.value || 'white';
    const material = document.getElementById('config-material')?.value || 'aluminum';
    
    console.log('updateFlatImagePreview - productCode:', productCode, 'doorColor:', doorColor);
    
    // Determine handle color based on door color (matching hardware to door)
    let handleColor = product.handleColor || 'silver';
    
    // For cobrai, map door colors to their matching handle colors
    if (productCode.toUpperCase() === 'COBRAI') {
        const handleMap = {
            'black': 'black',
            'white': 'white',
            'bronze': 'bronze',
            'sandstone': 'bronze'
        };
        handleColor = handleMap[doorColor.toLowerCase()] || doorColor;
    }
    
    // Build image path
    const imagePath = buildFlatImagePath(product, doorColor, handleColor);
    console.log('Image path:', imagePath);
    
    // Update image source (with fallback to original product image)
    const fallbackImage = product.image || `https://via.placeholder.com/400x400/e0e0e0/666?text=${encodeURIComponent(productCode)}`;
    img.onerror = function() {
        console.log('Image failed to load:', imagePath);
        this.onerror = null; // Prevent infinite loop
        this.src = fallbackImage;
    };
    img.src = imagePath;
    console.log('Image src set to:', img.src);
}

// Update preview using dynamic image API
function updateDynamicImagePreview(productCode) {
    const img = document.getElementById('product-detail-image');
    if (!img) return;
    
    // Get selected configuration
    const color = document.getElementById('config-color')?.value || 'white';
    const hinge = document.querySelector('[name="hinge-location"]:checked')?.value || 'right';
    const material = document.getElementById('config-material')?.value || 'aluminum';
    
    // Build API URL
    const apiUrl = `/api/product-image/${productCode}?color=${color}&hinge=${hinge}&material=${material}`;
    
    // Update image source
    img.src = apiUrl;
}

// Show or hide configuration notice
function showConfigNotice(show) {
    const notice = document.getElementById('config-notice');
    if (notice) {
        notice.style.display = show ? 'block' : 'none';
    }
}

// Update hinge location (handles both flat and layered images)
function updateHingeLocation(flipLeft) {
    // Check if current product uses dynamic API or flat images
    const urlParams = new URLSearchParams(window.location.search);
    const productCode = urlParams.get('p');
    
    if (productCode) {
        const product = productData.find(p => p.productCode === productCode || p.id === productCode);
        
        if (product) {
            // For dynamic API, regenerate image with new hinge
            if (product.useDynamicAPI === true) {
                updateDynamicImagePreview(productCode);
                return;
            }
            
            // For flat images, just flip the image visually
            if (product.flatImages === true || product.imagePattern) {
                const flatImg = document.getElementById('product-detail-image');
                if (flatImg) {
                    flatImg.style.transform = flipLeft ? 'scaleX(-1)' : 'scaleX(1)';
                }
                return;
            }
        }
    }
    
    // Try flat image element
    const flatImg = document.getElementById('product-detail-image');
    if (flatImg) {
        flatImg.style.transform = flipLeft ? 'scaleX(-1)' : 'scaleX(1)';
        return;
    }
    
    // Try layered images
    const hardwareLayer = document.getElementById('hardware-layer');
    const doorLayer = document.getElementById('door-layer');
    
    if (hardwareLayer) {
        hardwareLayer.style.transform = flipLeft ? 'scaleX(-1)' : 'scaleX(1)';
    }
    if (doorLayer) {
        doorLayer.style.transform = flipLeft ? 'scaleX(-1)' : 'scaleX(1)';
    }
}

// Flip product image based on hinge location (deprecated - use updateHingeLocation)
function flipProductImage(flip) {
    updateHingeLocation(flip);
}

// Handle size dropdown change to show/hide custom size fields
function handleSizeChange(productCode) {
    const sizeSelect = document.getElementById('config-size');
    const customFields = document.getElementById('custom-size-fields');
    
    if (sizeSelect && customFields) {
        if (sizeSelect.value === 'custom') {
            customFields.style.display = 'block';
        } else {
            customFields.style.display = 'none';
        }
    }
    
    // Update preview if not custom (custom doesn't affect image)
    if (sizeSelect && sizeSelect.value !== 'custom') {
        updateProductPreview(productCode);
    }
}

// Go back to results from product detail
function goBackToResults() {
    // Find results in history or load it directly
    const resultsIndex = history.indexOf('results');
    if (resultsIndex >= 0) {
        history = history.slice(0, resultsIndex + 1);
    } else {
        // If not in history, add it
        history.push('results');
    }
    
    // Update URL to results state
    updateURL('results');
    showFilteredProducts();
}

// Share current page
function shareCurrentPage() {
    const url = window.location.href;
    
    if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(url).then(() => {
            showNotification('Link copied to clipboard!');
        }).catch(() => {
            prompt('Copy this URL to share:', url);
        });
    } else {
        prompt('Copy this URL to share:', url);
    }
}

// Show filtered products based on user selections
function showFilteredProducts() {
    const contentDiv = document.getElementById('content');
    
    // Get filter criteria from userAnswers
    let baseType = userAnswers['start'];
    let subType = userAnswers['q-door-type'] || userAnswers['q-window-type'];
    let material = null;
    let color = null;
    
    // Extract material from any material questions
    for (const key in userAnswers) {
        if (key.includes('material') && userAnswers[key]) {
            material = userAnswers[key];
        }
        if (key.includes('color') && userAnswers[key]) {
            color = userAnswers[key];
        }
    }
    
    // Get dimensions
    const width = userAnswers['q-dimensions.width'];
    const height = userAnswers['q-dimensions.height'];
    
    console.log('Filtering with:', { baseType, subType, material, color, width, height });
    
    // Filter products
    let filtered = productData.filter(product => {
        // Check base type
        if (baseType && product.baseType !== baseType) return false;
        
        // Check sub-type
        if (subType) {
            const prodSubType = product.subType?.door || product.subType?.window;
            if (prodSubType !== subType) return false;
        }
        
        // Check material
        if (material && !product.materials.includes(material)) return false;
        
        // Check color
        if (color && !product.colors.includes(color)) return false;
        
        return true;
    });
    
    console.log('Filtered products:', filtered.length);
    
    // Display results
    if (filtered.length === 0) {
        contentDiv.innerHTML = `
            <div class="result-container">
                <div class="result-title">No Products Found</div>
                <div class="result-details">
                    <p>We couldn't find any products matching your criteria:</p>
                    <ul style="text-align: left;">
                        ${baseType ? `<li>Type: ${baseType}</li>` : ''}
                        ${subType ? `<li>Sub-type: ${subType}</li>` : ''}
                        ${material ? `<li>Material: ${material}</li>` : ''}
                        ${color ? `<li>Color: ${color}</li>` : ''}
                        ${width ? `<li>Width: ${width}"</li>` : ''}
                        ${height ? `<li>Height: ${height}"</li>` : ''}
                    </ul>
                    <p>Please try different options or contact us for assistance.</p>
                </div>
                <div class="result-actions">
                    <button class="back-button" onclick="goBack()">← Go Back</button>
                    <button class="back-button" onclick="startOver()">Start Over</button>
                </div>
            </div>
        `;
        return;
    }
    
    // Display product grid
    let html = `
        <div class="result-container">
            <div class="result-title">Found ${filtered.length} Product${filtered.length > 1 ? 's' : ''}</div>
            <div class="result-details">
                <p style="margin-bottom: 20px;">Your selections: 
                    ${baseType || ''} ${subType ? '› ' + subType : ''} 
                    ${material ? '› ' + material : ''} 
                    ${color ? '› ' + color : ''}
                    ${width && height ? `› ${width}" × ${height}"` : ''}
                </p>
            </div>
            <div class="products-grid">
    `;
    
    filtered.forEach(product => {
        const prodCode = product.productCode || product.id;
        const desc = product.description || product.DESCRIPTION || 'No description';
        const materials = product.materials ? product.materials.join(', ') : 'N/A';
        const colors = product.colors ? product.colors.join(', ') : 'N/A';
        
        html += `
            <div class="product-card" onclick="showProductByCode('${prodCode}')">
                <h3>${desc}</h3>
                <p style="color: #999; font-size: 0.95em; margin-top: 5px;">${prodCode}</p>
                <div style="font-size: 0.9em; color: #666; margin-top: 10px;">
                    <strong>Materials:</strong> ${materials}<br>
                    <strong>Colors:</strong> ${colors}
                </div>
            </div>
        `;
    });
    
    html += `
            </div>
            <div class="result-actions">
                <button class="back-button" onclick="goBack()">← Go Back</button>
                <button class="back-button" onclick="startOver()">Start Over</button>
                <button class="back-button" onclick="shareCurrentPage()">🔗 Share</button>
            </div>
        </div>
    `;
    
    contentDiv.innerHTML = html;
    updateBreadcrumb();
}

// Show notification
function showNotification(message) {
    const notification = document.createElement('div');
    notification.className = 'notification';
    notification.textContent = message;
    notification.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        background: #4CAF50;
        color: white;
        padding: 15px 20px;
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        z-index: 10000;
        animation: slideIn 0.3s ease-out;
    `;
    
    document.body.appendChild(notification);
    
    setTimeout(() => {
        notification.style.animation = 'slideOut 0.3s ease-in';
        setTimeout(() => notification.remove(), 300);
    }, 3000);
}

// Handle browser back/forward buttons
window.addEventListener('popstate', function(event) {
    if (event.state) {
        if (event.state.productCode) {
            showProductByCode(event.state.productCode);
        } else if (event.state.questionKey) {
            accumulatedBitValue = event.state.bitValue || 0;
            loadContent(event.state.questionKey);
        } else {
            startOver();
        }
    } else {
        // No state, check URL
        initFromURL();
    }
});

// Update breadcrumb trail
function updateBreadcrumb() {
    const breadcrumb = document.getElementById('breadcrumb');
    const trail = history.map((key, index) => {
        const data = questionData[key];
        let label = 'Start';
        
        if (key === 'results') {
            label = 'Results';
        } else if (key !== 'start') {
            if (key.startsWith('product-')) {
                // Product detail page
                const productCode = key.replace('product-', '');
                label = productCode;
            } else if (data && data.type === 'product') {
                label = data.code;
            } else if (data && data.title) {
                // Extract meaningful part from question title
                let title = data.title;
                
                // Remove common question prefixes and clean up
                title = title.replace(/^What (are you looking for|type of|is your|do you)[\s?]*/i, '');
                title = title.replace(/^(Select|Choose|Enter)[\s]*/i, '');
                title = title.replace(/\?$/, '');
                
                // Capitalize if needed
                if (title.length > 0) {
                    title = title.charAt(0).toUpperCase() + title.slice(1);
                }
                
                label = title || 'Question ' + index;
            } else {
                label = `Question ${index}`;
            }
        }
        
        if (index < history.length - 1) {
            return `<span style="cursor: pointer; text-decoration: underline;" onclick="navigateToHistory(${index})">${label}</span>`;
        } else {
            return `<strong>${label}</strong>`;
        }
    });
    
    breadcrumb.innerHTML = trail.join(' <span>→</span> ');
}

// Navigate to a specific point in history
function navigateToHistory(index) {
    history = history.slice(0, index + 1);
    loadContent(history[history.length - 1]);
}

// Start the quiz when page loads
window.addEventListener('DOMContentLoaded', init);