{% extends "base.html" %}

{% block content %}
<div class="container py-3">
    


    <ul class="nav nav-pills nav-fill mb-4 bg-white rounded shadow-sm p-1 border" id="createTabs" role="tablist">
        <li class="nav-item">
            <button class="nav-link active fw-bold" id="ai-tab" data-bs-toggle="pill" data-bs-target="#ai-panel" type="button">
                <i class="fas fa-robot me-2"></i>AI PDF Import
            </button>
        </li>
        <li class="nav-item">
            <button class="nav-link fw-bold" id="manual-tab" data-bs-toggle="pill" data-bs-target="#manual-panel" type="button">
                <i class="fas fa-pen me-2"></i>Manual Entry
            </button>
        </li>
    </ul>

    <div class="tab-content">
        
        <div class="tab-pane fade show active" id="ai-panel">
            <div class="card shadow-sm border-success">
                <div class="card-body py-5 text-center">
                    <h5 class="fw-bold mb-3">Upload a Recipe PDF</h5>
                    <p class="text-muted small mb-4 mx-auto" style="max-width: 500px;">
                        Our AI will scan the text, detect ingredients, and calculate cooking times automatically.
                    </p>
                    
                    <div class="mx-auto" style="max-width: 400px;">
                        <input class="form-control" type="file" id="pdfInput" accept=".pdf">
                        <div class="form-text text-muted mb-3">Max file size: 16 MB</div>
                        <button class="btn btn-success w-100 shadow-sm" id="uploadPdfBtn" onclick="uploadPdf()">
                            Start Extraction
                        </button>
                    </div>

                    <div id="uploadProgressContainer" class="mt-4 mx-auto d-none" style="max-width: 400px;">
                        <div class="progress" style="height: 25px;">
                            <div id="uploadProgressBar" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 0%"></div>
                        </div>
                        <p id="statusText" class="small text-dark mt-2 fw-bold">Initializing...</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-pane fade" id="manual-panel">
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <form method="POST" enctype="multipart/form-data">
                        <input type="hidden" name="entry_type" value="manual">
                        <div class="alert alert-light border small text-muted mb-4">
                            <i class="fas fa-info-circle me-1"></i> Type a recipe from scratch.
                        </div>

                        <div class="mb-3">
                            <label class="form-label small fw-bold text-muted">TITLE <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="title" required placeholder="e.g. Grandma's Apple Pie">
                        </div>

                        <div class="mb-3">
                            <label class="form-label small fw-bold text-muted">DESCRIPTION</label>
                            <textarea class="form-control border-bottom" name="description" rows="2"></textarea>
                        </div>

                        <div class="row g-2 mb-3 pt-3 border-top">
                            <div class="col-6 col-md-3">
                                <label class="form-label small fw-bold text-muted">SERVINGS <span class="text-danger">*</span></label>
                                <input type="number" class="form-control" name="servings" placeholder="0">
                            </div>
                            <div class="col-6 col-md-3">
                                <label class="form-label small fw-bold text-muted">PREP (M) <span class="text-danger">*</span></label>
                                <input type="number" class="form-control" name="prep_time" placeholder="0">
                            </div>
                            <div class="col-6 col-md-3">
                                <label class="form-label small fw-bold text-muted">COOK (M) <span class="text-danger">*</span></label>
                                <input type="number" class="form-control" name="cook_time" placeholder="0">
                            </div>
                            <div class="col-6 col-md-3">
                                <label class="form-label small fw-bold text-muted">CUISINE <span class="text-danger">*</span></label>
                                                                                                <select class="form-select" name="cuisine_type">
                                    <option value="">Select cuisine</option>
                                    {% set cuisines_by_region = cuisines|groupby('region') %}
                                    {% for region, region_cuisines in cuisines_by_region %}
                                    <optgroup label="{{ region }}">
                                        {% for c in region_cuisines %}
                                        <option value="{{ c.name }}">{{ c.name }}</option>
                                        {% endfor %}
                                    </optgroup>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>

                        
                        <div class="mb-3 mt-2">
                          <label class="form-label small fw-bold text-muted">DIETARY FLAGS</label>
                          <div class="d-flex flex-wrap gap-3">
                            <div class="form-check"><input class="form-check-input" type="checkbox" name="is_vegan" id="c_vegan"><label class="form-check-label small" for="c_vegan">Vegan</label></div>
                            <div class="form-check"><input class="form-check-input" type="checkbox" name="is_vegetarian" id="c_veg"><label class="form-check-label small" for="c_veg">Vegetarian</label></div>
                            <div class="form-check"><input class="form-check-input" type="checkbox" name="is_gluten_free" id="c_gf"><label class="form-check-label small" for="c_gf">Gluten-Free</label></div>
                            <div class="form-check"><input class="form-check-input" type="checkbox" name="is_dairy_free" id="c_df"><label class="form-check-label small" for="c_df">Dairy-Free</label></div>
                            <div class="form-check"><input class="form-check-input" type="checkbox" name="is_nut_free" id="c_nf"><label class="form-check-label small" for="c_nf">Nut-Free</label></div>
                            <div class="form-check"><input class="form-check-input" type="checkbox" name="is_halal" id="c_hl"><label class="form-check-label small" for="c_hl">Halal</label></div>
                          </div>
                        </div>
                        <h6 class="fw-bold text-success border-top pt-4 mb-3">Ingredients</h6>
                        
                        <!-- Column Headers -->
                        <div class="row g-1 mb-1 small text-muted fw-bold">
                            <div class="col-2 col-md-1">Qty <span class="text-danger">*</span></div>
                            <div class="col-2 col-md-2">Unit</div>
                            <div class="col-2 col-md-1 package-header" style="display: none;">Pkg Qty</div>
                            <div class="col-3 col-md-2 package-header" style="display: none;">Pkg Unit</div>
                            <div class="col-4 col-md-2">Ingredient</div>
                            <div class="col-3 col-md-3 modifier-header" style="display: none;">Modifiers</div>
                            <div class="col-md-1"></div>
                        </div>
                        
                        <div id="ingredients-container">
                            <div class="row g-1 mb-2 align-items-start ingredient-row">
                                <!-- Quantity -->
                                <div class="col-2 col-md-1">
                                    <input type="text" class="form-control form-control-sm" name="ingredient_amount[]" placeholder="1" required>
                                </div>
                                
                                <!-- Unit -->
                                <div class="col-2 col-md-2">
                                    <select class="form-select form-select-sm unit-select" name="ingredient_unit[]" onchange="togglePackageField(this)">
                                        <option value="">-</option>
                                        <optgroup label="Common Cooking">
                                            {% for u in units|sort(attribute='sort_order') %}
                                            {% if u.sort_order >= 1 and u.sort_order < 10 %}
                                            <option value="{{ u.abbreviation or u.name }}">{{ u.name }}</option>
                                            {% endif %}
                                            {% endfor %}
                                        </optgroup>
                                        <optgroup label="Metric">
                                            {% for u in units|sort(attribute='sort_order') %}
                                            {% if u.sort_order >= 10 and u.sort_order < 20 %}
                                            <option value="{{ u.abbreviation or u.name }}">{{ u.name }}</option>
                                            {% endif %}
                                            {% endfor %}
                                        </optgroup>
                                        <optgroup label="Volume">
                                            {% for u in units|sort(attribute='sort_order') %}
                                            {% if u.sort_order >= 20 and u.sort_order < 30 %}
                                            <option value="{{ u.abbreviation or u.name }}">{{ u.name }}</option>
                                            {% endif %}
                                            {% endfor %}
                                        </optgroup>
                                        <optgroup label="Package Types">
                                            {% for u in units|sort(attribute='sort_order') %}
                                            {% if u.sort_order >= 30 and u.sort_order < 40 %}
                                            <option value="{{ u.abbreviation or u.name }}">{{ u.name }}</option>
                                            {% endif %}
                                            {% endfor %}
                                        </optgroup>
                                        <optgroup label="Pieces & Portions">
                                            {% for u in units|sort(attribute='sort_order') %}
                                            {% if u.sort_order >= 40 and u.sort_order < 60 %}
                                            <option value="{{ u.abbreviation or u.name }}">{{ u.name }}</option>
                                            {% endif %}
                                            {% endfor %}
                                        </optgroup>
                                        <optgroup label="Other">
                                            {% for u in units|sort(attribute='sort_order') %}
                                            {% if u.sort_order >= 100 %}
                                            <option value="{{ u.abbreviation or u.name }}">{{ u.name }}</option>
                                            {% endif %}
                                            {% endfor %}
                                        </optgroup>
                                    </select>
                                </div>
                                
                                <!-- Package Quantity (Conditional) -->
                                <div class="col-2 col-md-1 package-field" style="display: none;">
                                    <input type="text" class="form-control form-control-sm" name="ingredient_package_qty[]" placeholder="8">
                                </div>
                                
                                <!-- Package Unit (Conditional) -->
                                <div class="col-3 col-md-2 package-field" style="display: none;">
                                    <select class="form-select form-select-sm package-unit-select" name="ingredient_package_unit[]">
                                        <option value="">-</option>
                                        {% set grocery_units = ['oz', 'lb', 'g', 'kg', 'mg', 'fl oz', 'ml', 'L', 'gal', 'qt', 'pt'] %}
                                        {% for u in units %}
                                        {% if (u.abbreviation in grocery_units) or (u.name in grocery_units) %}
                                        <option value="{{ u.abbreviation or u.name }}">{{ u.name }}</option>
                                        {% endif %}
                                        {% endfor %}
                                    </select>
                                </div>
                                
                                <!-- Ingredient Name (Searchable) -->
                                <div class="col-4 col-md-2">
                                    <select class="form-select form-select-sm ingredient-select" name="ingredient_id[]" onchange="showModifierButton(this)">
                                        <option value="">Search ingredient...</option>
                                        {% set ingredients_by_cat = all_ingredients|groupby('category') %}
                                        {% for category, cat_ingredients in ingredients_by_cat %}
                                        <optgroup label="{{ category }}">
                                            {% for ing in cat_ingredients %}
                                            <option value="{{ ing.id }}" data-has-modifiers="{{ 'true' if ing.id in ingredients_with_modifiers else 'false' }}" data-category="{{ ing.category }}">{{ ing.name }}</option>
                                            {% endfor %}
                                        </optgroup>
                                        {% endfor %}
                                    </select>
                                </div>
                                
                                <!-- Modifiers (Expandable - Desktop only) -->
                                <div class="col-3 col-md-3 modifier-column" style="display: none;">
                                    <button type="button" class="btn btn-sm btn-outline-secondary w-100 modifier-btn" style="font-size: 0.75rem;" onclick="openModifierModal(this)">
                                        <i class="fas fa-tags me-1"></i><span class="mod-text">None</span>
                                    </button>
                                    <input type="hidden" class="modifier-data" name="ingredient_modifiers[]" value="">
                                </div>
                                
                                <!-- Remove Button -->
                                <div class="col-12 col-md-1">
                                    <button type="button" class="btn btn-link text-danger p-0 remove-row-btn" onclick="removeIngredientRow(this)" title="Remove">
                                        <i class="fas fa-times fa-lg"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <button type="button" id="add-row-btn" class="btn btn-sm btn-outline-success rounded-pill mt-2 mb-4">
                            <i class="fas fa-plus"></i> Ingredient
                        </button>
                        
                        <h6 class="fw-bold text-success border-top pt-4 mb-3">Instructions</h6>
                        <textarea class="form-control" name="instructions" rows="10" placeholder="Enter cooking instructions (one step per line)

Example:
• Preheat oven to 350°F
• Mix flour and sugar in bowl
• Bake for 25-30 minutes

Tip: Each line becomes a numbered step"></textarea>
                        
<div class="mb-3 mt-4 bg-light p-3 rounded border">
                            <label class="form-label small fw-bold text-dark">RECIPE PHOTO (OPTIONAL)</label>
                            <input class="form-control mb-3" type="file" name="recipe_photo" accept="image/*">
                            
                            <label class="form-label small fw-bold text-dark">ATTACH REFERENCE PDF (OPTIONAL)</label>
                            <input class="form-control" type="file" name="manual_pdf" accept=".pdf">
                            <div class="form-text small">Stored for reference only. No AI processing.</div>
                        </div>

                        <div class="text-end mt-4"><button type="submit" class="btn btn-success btn-lg shadow px-5">Save Recipe</button></div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


<script>

function togglePackageField(selectEl) {
    const selectedText = selectEl.options[selectEl.selectedIndex].text;
    console.log('togglePackageField called, selected unit:', selectedText);
    const row = selectEl.closest('.ingredient-row');
    const packageFields = row.querySelectorAll('.package-field');
    console.log('Found package fields:', packageFields.length);
    const packageHeaders = document.querySelectorAll('.package-header');
    const selectedUnit = selectedText.toLowerCase();
    
    // Package units that need size specification
    const packageUnits = ['can', 'jar', 'box', 'bag', 'bottle', 'package', 'container', 'pkg', 'btl', 'cont'];
    const shouldShow = packageUnits.some(unit => selectedUnit.includes(unit));
    
    console.log('Should show package fields?', shouldShow);
    
    // Show/hide ALL package fields in this row
    packageFields.forEach(field => {
        field.style.display = shouldShow ? 'block' : 'none';
    });
    
    // Show/hide headers
    const anyPackageVisible = Array.from(document.querySelectorAll('.package-field'))
        .some(field => field.style.display === 'block');
    
    packageHeaders.forEach(header => {
        header.style.display = anyPackageVisible ? 'block' : 'none';
    });
}



// Ingredient-specific modifier mapping (from database)
const INGREDIENT_MODIFIER_MAP = {{ ingredient_modifiers | tojson | safe }};

console.log('=== INGREDIENT MODIFIER MAP LOADED ===');
console.log('Total ingredients with modifiers:', Object.keys(INGREDIENT_MODIFIER_MAP).length);
console.log('Full map:', INGREDIENT_MODIFIER_MAP);






function showModifierButton(selectEl) {
    const row = selectEl.closest('.ingredient-row');
    const modifierColumn = row.querySelector('.modifier-column');
    const selectedValue = selectEl.value;
    
    if (selectedValue && selectedValue !== '') {
        // Show modifier button when ingredient selected
        modifierColumn.style.display = 'block';
        
        // Show header if any row has an ingredient selected
        const anySelected = Array.from(document.querySelectorAll('select[name="ingredient_id[]"]'))
            .some(sel => sel.value && sel.value !== '');
        if (anySelected) {
            document.querySelector('.modifier-header').style.display = 'block';
        }
    } else {
        // Hide modifier column for this row
        modifierColumn.style.display = 'none';
        
        // Clear modifier data when ingredient cleared
        const modData = row.querySelector('.modifier-data');
        const modBtn = row.querySelector('.modifier-btn');
        const modText = row.querySelector('.mod-text');
        
        if (modData) modData.value = '';
        if (modBtn) {
            modBtn.classList.remove('btn-success');
            modBtn.classList.add('btn-outline-secondary');
        }
        if (modText) modText.textContent = 'None';
        
        // Hide header if NO rows have ingredients selected
        const anySelected = Array.from(document.querySelectorAll('select[name="ingredient_id[]"]'))
            .some(sel => sel.value && sel.value !== '');
        if (!anySelected) {
            document.querySelector('.modifier-header').style.display = 'none';
        }
    }
}

function openModifierModal(button) {
    currentModifierButton = button;
    const row = button.closest('.ingredient-row');
    const hiddenInput = row.querySelector('.modifier-data');
    const selectedModifiers = hiddenInput.value ? hiddenInput.value.split(',').filter(Boolean) : [];
    
    // Get selected ingredient ID — select now uses ingredient_id[] with DB ID as value
    const ingredientSelect = row.querySelector('select[name="ingredient_id[]"]');
    const ingredientId = ingredientSelect ? ingredientSelect.value : '';
    const selectedOpt = ingredientSelect ? ingredientSelect.options[ingredientSelect.selectedIndex] : null;
    const ingredientName = selectedOpt ? selectedOpt.textContent.trim() : '';

    // Get applicable modifiers for THIS SPECIFIC ingredient (keyed by ID)
    const applicableModifiers = INGREDIENT_MODIFIER_MAP[String(ingredientId)] || [];
    
    // Show/hide individual modifiers based on ingredient
    document.querySelectorAll('.modifier-radio').forEach(radio => {
        const modifierValue = radio.value;
        const formCheck = radio.closest('.form-check');
        
        if (applicableModifiers.includes(modifierValue)) {
            // Show this modifier
            formCheck.style.display = 'block';
            radio.disabled = false;
        } else {
            // Hide this modifier
            formCheck.style.display = 'none';
            radio.disabled = true;
            radio.checked = false;
        }
    });
    
    // Auto-expand categories that have visible modifiers
    document.querySelectorAll('#modifierAccordion .accordion-item').forEach(item => {
        const collapseEl = item.querySelector('.accordion-collapse');
        const visibleModifiers = item.querySelectorAll('.form-check[style*="display: block"]');
        
        if (visibleModifiers.length > 0) {
            item.style.display = 'block';
            collapseEl.classList.add('show');
        } else {
            item.style.display = 'none';
            collapseEl.classList.remove('show');
        }
    });
    
    // Clear and check boxes
    document.querySelectorAll('.modifier-radio').forEach(cb => cb.checked = false);
    selectedModifiers.forEach(mod => {
        const radio = document.querySelector(`.modifier-radio[value="${mod.trim()}"]`);
        if (radio) radio.checked = true;
    });
    
    new bootstrap.Modal(document.getElementById('modifierModal')).show();
}

function clearModifiers() {
    document.querySelectorAll('.modifier-radio').forEach(cb => cb.checked = false);
}



function removeIngredientRow(button) {
    const container = document.getElementById('ingredients-container');
    if (container.children.length > 1) {
        button.closest('.ingredient-row').remove();
        
        // Check if any remaining rows have ingredients selected
        const anySelected = Array.from(document.querySelectorAll('select[name="ingredient_id[]"]'))
            .some(sel => sel.value && sel.value !== '');
        
        // Hide header if no ingredients selected
        if (!anySelected) {
            const header = document.querySelector('.modifier-header');
            if (header) header.style.display = 'none';
        }
    }
}

// Safer button update
function updateModifierButtonDisplay(button, selected) {
    console.log('=== UPDATE BUTTON DISPLAY ===');
    console.log('Button:', button);
    console.log('Selected:', selected);
    
    const textSpan = button.querySelector('.mod-text');
    console.log('Text span found:', textSpan);
    
    if (textSpan) {
        if (selected.length > 0) {
            // Trim values to remove leading/trailing spaces
            const trimmed = selected.map(s => s.trim());
            const display = trimmed.slice(0, 2).join(', ') + (trimmed.length > 2 ? ' +' + (trimmed.length - 2) : '');
            console.log('Setting display to:', display);
            textSpan.textContent = display;
            console.log('Text span now says:', textSpan.textContent);
        } else {
            textSpan.textContent = 'None';
        }
    } else {
        console.error('MOD-TEXT SPAN NOT FOUND!');
    }
}


function uploadPdf() {
    {% if current_user.is_authenticated and current_user.is_demo %}
    var demoModal = new bootstrap.Modal(document.getElementById('demoRegisterModal'));
    demoModal.show(); return;
    {% endif %}
    const file = document.getElementById('pdfInput').files[0];
    if(!file) { kcAlert('Select a file first'); return; }
    
    document.getElementById('uploadProgressContainer').classList.remove('d-none');
    document.getElementById('uploadPdfBtn').classList.add('disabled');
    const bar = document.getElementById('uploadProgressBar');
    const status = document.getElementById('statusText');
    
    let progress = 5;
    // UPDATED STEPS TO MATCH BACKEND
    const stages = [
        { pct: 15, text: "Uploading PDF..." },
        { pct: 30, text: "Scanning & Extracting Text..." },
        { pct: 50, text: "Analyzing Recipe Structure..." },
        { pct: 70, text: "Validating Ingredients & Times..." },
        { pct: 90, text: "Finalizing Database Entry..." }
    ];
    let stageIdx = 0;
    const interval = setInterval(() => {
        if(stageIdx < stages.length) {
            progress = stages[stageIdx].pct;
            bar.style.width = progress + "%";
            status.innerText = stages[stageIdx].text;
            stageIdx++;
        }
    }, 1800); 
    
    const formData = new FormData();
    formData.append('file', file);
    formData.append('entry_type', 'ai');
    
    fetch('/recipe/upload', { method: 'POST', body: formData })
    .then(r => {
        if(r.status === 403) {
            clearInterval(interval);
            document.getElementById('uploadProgressContainer').classList.add('d-none');
            document.getElementById('uploadPdfBtn').classList.remove('disabled');
            var demoModal = new bootstrap.Modal(document.getElementById('demoRegisterModal'));
            demoModal.show();
            return null;
        }
        return r.json();
    })
    .then(data => {
        if(!data) return;
        clearInterval(interval);
        if(data.success) {
            bar.style.width = "100%";
            status.innerText = "Success! Loading recipe...";
            // Check for detected groups
            if (data.groups_detected && data.groups_detected.length >= 2) {
                showGroupModal(data.groups_detected, data.redirect);
            } else {
                setTimeout(() => window.location.href = data.redirect || "/recipe/" + data.recipe_id, 500);
            }
        } else {
            document.getElementById('uploadProgressContainer').classList.add('d-none');
            document.getElementById('uploadPdfBtn').classList.remove('disabled');
            kcAlert('Upload Failed: ' + data.error, 'Upload Error');
        }
    })
    .catch(err => {
        clearInterval(interval);
        document.getElementById('uploadProgressContainer').classList.add('d-none');
        document.getElementById('uploadPdfBtn').classList.remove('disabled');
        kcAlert('Error: ' + err, 'Error');
    });
}

document.getElementById('add-row-btn').addEventListener('click', function() {
    // Create fresh row instead of cloning
    const container = document.getElementById('ingredients-container');
    const firstRow = document.querySelector('.ingredient-row');
    
    // Clone the original template row HTML (not the Select2-enhanced version)
    const newRow = firstRow.cloneNode(true);
    
    // Clear all input values
    newRow.querySelectorAll('input[type="text"], input[type="hidden"]').forEach(input => {
        input.value = '';
    });
    
    // Reset all select elements to first option
    newRow.querySelectorAll('select').forEach(select => {
        select.selectedIndex = 0;
        // Remove any Select2 classes/attributes
        select.classList.remove('select2-hidden-accessible');
        select.removeAttribute('data-select2-id');
        select.removeAttribute('aria-hidden');
        select.removeAttribute('tabindex');
    });
    
    // Remove ALL Select2 containers
    newRow.querySelectorAll('.select2-container').forEach(el => el.remove());
    
    // Reset modifier button to default state
    const modBtn = newRow.querySelector('.modifier-btn');
    const modText = newRow.querySelector('.mod-text');
    if (modBtn) {
        modBtn.classList.remove('btn-success');
        modBtn.classList.add('btn-outline-secondary');
    }
    if (modText) {
        modText.textContent = 'None';
    }
    
    // Hide package and modifier columns
    const packageField = newRow.querySelector('.package-field');
    if (packageField) packageField.style.display = 'none';
    
    const modColumn = newRow.querySelector('.modifier-column');
    if (modColumn) modColumn.style.display = 'none';
    
    // Append the cleaned row
    // Ensure group_label hidden input exists on new row
    if (!newRow.querySelector('.group-label-input')) {
        var glInp = document.createElement('input');
        glInp.type = 'hidden';
        glInp.name = 'ingredient_group_label[]';
        glInp.className = 'group-label-input';
        glInp.value = '';
        newRow.appendChild(glInp);
    }
    container.appendChild(newRow);
    if (typeof initCulinaryQtyInputs === 'function') {
        var newQty = newRow.querySelector('input[name="ingredient_amount[]"]');
        if (newQty && typeof attachCulinaryQtyInput === 'function') attachCulinaryQtyInput(newQty);
    }
    
    // Re-initialize Select2 on ALL rows (including the new one)
    setTimeout(function() {
        // Safely destroy existing Select2 instances (only if initialized)
        $('select[name="ingredient_unit[]"]').each(function() {
            if ($(this).hasClass('select2-hidden-accessible')) {
                $(this).select2('destroy');
            }
        });
        $('select[name="ingredient_id[]"]').each(function() {
            if ($(this).hasClass('select2-hidden-accessible')) {
                $(this).select2('destroy');
            }
        });
        
        // Re-initialize everything
        initUnitSelects();
        initIngredientSelects();
        initPackageUnitSelects();
    initPackageUnitSelects();
    }, 50);
});


let currentModifierButton = null;


// Ingredient Category → Applicable Modifiers Mapping







function clearModifiers() {
    document.querySelectorAll('.modifier-radio').forEach(cb => cb.checked = false);
}


// Safer button update that doesn't break Select2
function updateModifierButtonDisplay(button, selected) {
    console.log('=== UPDATE BUTTON DISPLAY ===');
    console.log('Button:', button);
    console.log('Selected:', selected);
    
    const textSpan = button.querySelector('.mod-text');
    console.log('Text span found:', textSpan);
    
    if (textSpan) {
        if (selected.length > 0) {
            // Trim values to remove leading/trailing spaces
            const trimmed = selected.map(s => s.trim());
            const display = trimmed.slice(0, 2).join(', ') + (trimmed.length > 2 ? ' +' + (trimmed.length - 2) : '');
            console.log('Setting display to:', display);
            textSpan.textContent = display;
            console.log('Text span now says:', textSpan.textContent);
        } else {
            textSpan.textContent = 'None';
        }
    } else {
        console.error('MOD-TEXT SPAN NOT FOUND!');
    }
}

function saveModifiers() {
    console.log('saveModifiers called');
    console.log('Ingredient selects BEFORE:', document.querySelectorAll('select[name="ingredient_id[]"]').length);
    const selected = Array.from(document.querySelectorAll('.modifier-radio:checked')).map(rb => rb.value);
    
    if (currentModifierButton) {
        const row = currentModifierButton.closest('.ingredient-row');
        const hiddenInput = row.querySelector('.modifier-data');
        
        // Just update hidden input and class - don't touch button text yet
        hiddenInput.value = selected.join(',');
        
        // Update button appearance without breaking Select2
        if (selected.length > 0) {
            currentModifierButton.classList.remove('btn-outline-secondary');
            currentModifierButton.classList.add('btn-success');
            currentModifierButton.setAttribute('data-count', selected.length);
            currentModifierButton.setAttribute('data-selected', selected.slice(0, 2).join(', '));
        updateModifierButtonDisplay(currentModifierButton, selected);
        } else {
            currentModifierButton.classList.remove('btn-success');
            currentModifierButton.classList.add('btn-outline-secondary');
            currentModifierButton.removeAttribute('data-count');
            currentModifierButton.removeAttribute('data-selected');
        updateModifierButtonDisplay(currentModifierButton, []);
        }
    }
    
    console.log('Ingredient selects AFTER:', document.querySelectorAll('select[name="ingredient_id[]"]').length);
    // Restore Select2 z-index
    const select2Containers = document.querySelectorAll('.select2-container');
    select2Containers.forEach(c => c.style.zIndex = '');
    
    const modal = bootstrap.Modal.getInstance(document.getElementById('modifierModal'));
    modal.hide();
    
    // Re-initialize Select2 after modal closes to fix any rendering issues
    setTimeout(function() {
        initIngredientSelects();
        initPackageUnitSelects();
    initPackageUnitSelects();
        initUnitSelects();
    }, 300);
}

</script>

<!-- Modifier Selection Modal -->
<div class="modal fade" id="modifierModal" tabindex="-1" >
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Select Modifiers</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="accordion" id="modifierAccordion">
                    {% set categories = {
                        'preparation_state': 'Preparation',
                        'cooking_method': 'Cooking Method',
                        'processing_level': 'Processing Level',
                        'quality_variety': 'Quality/Variety',
                        'temperature_state': 'Temperature',
                        'packaging_format': 'Packaging',
                        'origin_style': 'Origin/Style',
                        'portion_descriptor': 'Portion'
                    } %}
                    
                    {% for cat_key, cat_label in categories.items() %}
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{ cat_key }}">
                                {{ cat_label }}
                            </button>
                        </h2>
                        <div id="collapse-{{ cat_key }}" class="accordion-collapse collapse" data-bs-parent="#modifierAccordion">
                            <div class="accordion-body p-2">
                                <div class="modifier-category" data-category="{{ cat_key }}">
                            {% for mod in modifiers|selectattr('category', 'equalto', cat_key)|list %}
                            <div class="form-check">
                                <input class="form-check-input modifier-radio" type="radio" name="mod_{{ cat_key }}" value="{{ mod.name }}" id="mod-{{ mod.id }}">
                                <label class="form-check-label small" for="mod-{{ mod.id }}">{{ mod.name }}</label>
                            </div>
                            {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-danger" onclick="clearModifiers()">Clear All</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" onclick="saveModifiers()">Apply Modifiers</button>
            </div>
        </div>
    </div>
</div>





<!-- Select2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />

<!-- jQuery (must load before Select2) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Select2 JS -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
function initUnitSelects() {
        $('select[name="ingredient_unit[]"]').not('.select2-hidden-accessible').select2({
            theme: 'bootstrap-5',
            placeholder: 'Unit',
            allowClear: true,
            width: '100%',
            minimumResultsForSearch: 0
        }).on('select2:open', function() {
            setTimeout(function() {
                document.querySelector('.select2-search__field').focus();
            }, 100);
        });
    }
    
    // Initialize ingredient selects
    
    // Initialize package unit selects
    function initPackageUnitSelects() {
        $('.package-unit-select').not('.select2-hidden-accessible').select2({
            theme: 'bootstrap-5',
            placeholder: 'Unit',
            allowClear: true,
            width: '100%'
        });
    }

function initIngredientSelects() {
        $('select[name="ingredient_id[]"]').not('.select2-hidden-accessible').select2({
            theme: 'bootstrap-5',
            placeholder: 'Search ingredient...',
            allowClear: true,
            width: '100%',
            dropdownAutoWidth: true,
            minimumResultsForSearch: 0  // Always show search box
        }).on('select2:open', function() {
            // Auto-focus search box when dropdown opens (works on mobile too)
            setTimeout(function() {
                const searchField = document.querySelector('.select2-search__field');
                if (searchField) {
                    searchField.focus();
                    // Trigger click for mobile keyboard
                    searchField.click();
                }
            }, 50);
        });
    }

$(document).ready(function() {
    // Initialize all Select2 dropdowns
    $('select[name="cuisine_type"]').select2({
        theme: 'bootstrap-5',
        placeholder: 'Select cuisine',
        allowClear: true,
        width: '100%'
    });
    
    initUnitSelects();
    initIngredientSelects();
    initPackageUnitSelects();
});
</script>

<style>
#groupModal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:9999; align-items:center; justify-content:center; }
#groupModal.show { display:flex; }
.gmodal-box { background:#fff; border-radius:12px; padding:1.5rem; max-width:520px; width:90%; max-height:80vh; overflow-y:auto; }
.gmodal-title { font-size:1.1rem; font-weight:700; margin-bottom:.25rem; }
.gmodal-sub { font-size:.82rem; color:#6b7280; margin-bottom:1rem; }
.gmodal-group { border:1px solid #e5e7eb; border-radius:8px; padding:.75rem 1rem; margin-bottom:.75rem; }
.gmodal-label-wrap { display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem; }
.gmodal-label { font-size:.75rem; font-weight:700; color:#198754; text-transform:uppercase; letter-spacing:.04em; flex:1; border:none; border-bottom:1px dashed #198754; background:transparent; outline:none; padding:2px 0; }
.gmodal-ings { font-size:.78rem; color:#6b7280; line-height:1.7; }
.gmodal-actions { display:flex; gap:.75rem; justify-content:flex-end; margin-top:1rem; border-top:1px solid #e5e7eb; padding-top:1rem; }
</style>

<div id="groupModal">
  <div class="gmodal-box">
    <div class="gmodal-title">Ingredient Groups Detected</div>
    <div class="gmodal-sub">We found ingredient sections in this recipe. Review and confirm, or dismiss to save as a flat list.</div>
    <div id="groupModalBody"></div>
    <div class="gmodal-actions">
      <button class="btn btn-outline-secondary btn-sm" onclick="dismissGroups()">Dismiss — Save Flat</button>
      <button class="btn btn-success btn-sm" onclick="confirmGroups()">Confirm Groups</button>
    </div>
  </div>
</div>

<script>
var _groupRedirect = '';
var _groupRecipeId = null;

function showGroupModal(groups, redirect) {
    _groupRedirect = redirect;
    var match = redirect ? redirect.match(/\/recipe\/(\d+)/) : null;
    _groupRecipeId = match ? parseInt(match[1]) : null;
    var body = document.getElementById('groupModalBody');
    body.innerHTML = '';
    groups.forEach(function(g) {
        var div = document.createElement('div');
        div.className = 'gmodal-group';
        div.innerHTML = '<div class="gmodal-label-wrap">' +
            '<input class="gmodal-label" value="' + g.label.replace(/"/g, '&quot;') + '" data-original="' + g.label.replace(/"/g, '&quot;') + '">' +
            '</div>' +
            '<div class="gmodal-ings">' + g.ingredients.join(', ') + '</div>';
        body.appendChild(div);
    });
    document.getElementById('groupModal').classList.add('show');
}

function dismissGroups() {
    document.getElementById('groupModal').classList.remove('show');
    window.location.href = _groupRedirect;
}

function confirmGroups() {
    var inputs = document.querySelectorAll('.gmodal-label');
    var renames = [];
    inputs.forEach(function(inp) {
        if (inp.value !== inp.dataset.original) {
            renames.push({original: inp.dataset.original, new_label: inp.value});
        }
    });
    fetch('/recipe/confirm-groups', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({recipe_id: _groupRecipeId, renames: renames})
    }).then(function() {
        window.location.href = _groupRedirect;
    }).catch(function() {
        window.location.href = _groupRedirect;
    });
}
</script>

<script src="{{ url_for('static', filename='js/culinary_qty.js') }}"></script>

{% if current_user.is_authenticated and current_user.is_demo %}
<div class="modal fade" id="demoRegisterModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-sm">
    <div class="modal-content border-0 shadow">
      <div class="modal-header border-0 pb-0">
        <h6 class="modal-title fw-bold">
          <i class="fas fa-lock me-2 text-success"></i>Create a Free Account
        </h6>
        <button type="button" class="btn-close btn-sm" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body pt-2 pb-1">
        <p class="mb-2" style="font-size:.88rem">
          Recipe importing is available to registered users. Free and takes 30 seconds.
        </p>
      </div>
      <div class="modal-footer border-0 pt-1 gap-2">
        <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Maybe Later</button>
        <a href="{{ url_for('register') }}" class="btn btn-sm btn-success">Register Free</a>
      </div>
    </div>
  </div>
</div>
<script>
(function() {
  var modal = new bootstrap.Modal(document.getElementById('demoRegisterModal'));
  var intercepts = ['#pdfInput','#uploadPdfBtn','#manual-tab'];
  intercepts.forEach(function(sel) {
    var el = document.querySelector(sel);
    if (!el) return;
    el.addEventListener('click', function(e) {
      e.preventDefault();
      e.stopImmediatePropagation();
      modal.show();
    }, true);
  });
  document.addEventListener('click', function(e) {
    var panel = document.getElementById('manual-panel');
    if (panel && panel.contains(e.target)) {
      e.preventDefault();
      e.stopImmediatePropagation();
      modal.show();
    }
  }, true);
})();
</script>
{% endif %}
{% endblock %}