{% extends "base.html" %}
{% block title %}Importálás — Recept Importáló{% endblock %}

{% block head %}
<style>
    .recipe-preview { display: none; }
    .recipe-preview.visible { display: block; }
    .section-divider { border: none; border-top: 1px solid var(--border); margin: 1.2rem 0; }
    .recipe-image {
        max-width: 300px;
        max-height: 200px;
        border-radius: var(--radius);
        object-fit: cover;
    }
    .ingredient-header {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 0.3rem;
        padding-right: 34px; /* space for remove btn */
    }
    .ingredient-header span {
        font-size: 0.8rem;
        color: var(--text-dim);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }
    .ingredient-header .col-qty { width: 60px; flex-shrink: 0; }
    .ingredient-header .col-unit { width: 80px; flex-shrink: 0; }
    .ingredient-header .col-food { flex: 1; }
    .ingredient-header .col-extra { width: 120px; flex-shrink: 0; }

    .ingredient-row {
        display: flex;
        gap: 0.5rem;
        align-items: center;
        margin-bottom: 0.4rem;
    }
    .ingredient-row input { margin-bottom: 0; }
    .ingredient-row .ing-qty { width: 60px; flex-shrink: 0; }
    .ingredient-row .ing-unit { width: 80px; flex-shrink: 0; }
    .ingredient-row .ing-food { flex: 1; }
    .ingredient-row .ing-extra { width: 120px; flex-shrink: 0; }
    .ingredient-row button {
        background: var(--danger);
        border: none;
        color: #fff;
        width: 28px;
        height: 28px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 1rem;
        line-height: 1;
        flex-shrink: 0;
    }
    .ingredient-group {
        display: flex;
        gap: 0.5rem;
        align-items: center;
        margin: 0.8rem 0 0.3rem;
    }
    .ingredient-group input {
        margin-bottom: 0;
        flex: 1;
        font-weight: 600;
        color: var(--accent);
        border-style: dashed;
    }
    .ingredient-group button {
        background: var(--danger);
        border: none;
        color: #fff;
        width: 28px;
        height: 28px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 1rem;
        line-height: 1;
        flex-shrink: 0;
    }
    .instruction-row {
        display: flex;
        gap: 0.5rem;
        align-items: flex-start;
        margin-bottom: 0.5rem;
    }
    .instruction-row .step-num {
        background: var(--accent);
        color: #fff;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        font-weight: 700;
        flex-shrink: 0;
        margin-top: 0.4rem;
    }
    .instruction-row textarea { margin-bottom: 0; flex: 1; min-height: 60px; }
    .instruction-row button {
        background: var(--danger);
        border: none;
        color: #fff;
        width: 28px;
        height: 28px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 1rem;
        line-height: 1;
        flex-shrink: 0;
        margin-top: 0.4rem;
    }
    .add-btn {
        background: var(--surface2);
        border: 1px dashed var(--border);
        color: var(--text-dim);
        padding: 0.4rem 0.8rem;
        border-radius: var(--radius);
        cursor: pointer;
        font-size: 0.9rem;
        transition: border-color 0.15s;
    }
    .add-btn:hover { border-color: var(--accent); color: var(--text); }

    /* Tags */
    .tag-section-label {
        font-size: 0.8rem;
        color: var(--text-dim);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        margin-bottom: 0.3rem;
    }
    .tag-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        min-height: 28px;
    }
    .tag-chip {
        display: inline-flex;
        align-items: center;
        padding: 0.25rem 0.6rem;
        border-radius: 999px;
        font-size: 0.85rem;
        line-height: 1.2;
        cursor: pointer;
        transition: opacity 0.15s;
        user-select: none;
    }
    .tag-chip:hover { opacity: 0.8; }
    .tag-chip.tag-active {
        background: var(--success, #2ea043);
        color: #fff;
    }
    .tag-chip.tag-inactive {
        background: var(--surface2);
        color: var(--text-dim);
        border: 1px solid var(--border);
    }
    .tag-search-wrap {
        position: relative;
        margin-top: 0.5rem;
    }
    .tag-search-wrap input {
        margin-bottom: 0;
        width: 100%;
    }
    .tag-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--surface2);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        max-height: 200px;
        overflow-y: auto;
        z-index: 10;
        display: none;
    }
    .tag-dropdown.open { display: block; }
    .tag-dropdown-item {
        padding: 0.4rem 0.6rem;
        cursor: pointer;
        font-size: 0.9rem;
        display: flex;
        justify-content: space-between;
    }
    .tag-dropdown-item:hover { background: var(--surface); }
    .tag-dropdown-item .tag-source {
        color: var(--text-dim);
        font-size: 0.8rem;
    }
    .tag-dropdown-item.tag-add-new { color: var(--accent); font-style: italic; }

    .result-card { display: none; }
    .result-card.visible { display: block; }
</style>
{% endblock %}

{% block content %}
<!-- Step 1: URL input -->
<div class="card">
    <h2>Recept importálása</h2>
    <div class="flex">
        <input type="url" id="recipeUrl" class="grow" style="margin-bottom:0"
               placeholder="https://www.mindmegette.hu/recept/brassoi">
        <button class="btn btn-primary" id="scrapeBtn" onclick="scrapeRecipe()">
            Beolvasás
        </button>
    </div>
    <div id="scrapeStatus" class="mt-1"></div>
</div>

<!-- Step 2: Editable preview -->
<div class="recipe-preview" id="previewCard">
    <div class="card">
        <h2>Recept adatai</h2>

        <div class="flex flex-wrap mb-2">
            <div class="grow">
                <label for="recipeTitle">Név</label>
                <input type="text" id="recipeTitle">

                <label for="recipeDesc">Leírás</label>
                <textarea id="recipeDesc" rows="2"></textarea>
            </div>
            <div>
                <img id="recipeImage" class="recipe-image" src="" alt="">
            </div>
        </div>

        <hr class="section-divider">

        <!-- Ingredients -->
        <label>Hozzávalók</label>
        <div class="ingredient-header">
            <span class="col-qty">Menny.</span>
            <span class="col-unit">Egység</span>
            <span class="col-food">Hozzávaló</span>
            <span class="col-extra">Megjegyzés</span>
        </div>
        <div id="ingredientsList"></div>
        <div class="flex gap-1 mt-1 mb-2">
            <button class="add-btn" onclick="addIngredient({})">+ Hozzávaló</button>
            <button class="add-btn" onclick="addIngredientGroup('')">+ Csoport</button>
        </div>

        <hr class="section-divider">

        <!-- Instructions -->
        <label>Elkészítés</label>
        <div id="instructionsList"></div>
        <button class="add-btn mt-1 mb-2" onclick="addInstruction('')">+ Lépés hozzáadása</button>

        <hr class="section-divider">

        <!-- Tags -->
        <label>Címkék</label>
        <div class="tag-section-label">Hozzáadásra kerül:</div>
        <div id="tagsActive" class="tag-chips mb-1"></div>
        <div class="tag-search-wrap">
            <input type="text" id="tagSearch" placeholder="Címke keresése / hozzáadása..."
                   autocomplete="off" oninput="onTagSearch()" onfocus="onTagSearch()" onkeydown="onTagKeydown(event)">
            <div id="tagDropdown" class="tag-dropdown"></div>
        </div>
        <div class="tag-section-label" style="margin-top:0.6rem;">Weboldalról (kattints a hozzáadáshoz):</div>
        <div id="tagsInactive" class="tag-chips"></div>

        <hr class="section-divider">

        <div class="flex mt-2">
            {% if has_mealie %}
            <button class="btn btn-success" id="sendMealieBtn" onclick="sendToMealie()">
                Importálás Mealie-be
            </button>
            {% endif %}
            {% if has_tandoor %}
            <button class="btn btn-success" id="sendTandoorBtn" onclick="sendToTandoor()">
                Importálás Tandoor-ba
            </button>
            {% endif %}
            <span id="sendStatus"></span>
        </div>
    </div>
</div>

<!-- Step 3: Result -->
<div class="result-card" id="resultCard">
    <div class="card">
        <h2 class="text-success">Recept sikeresen importálva!</h2>
        <p class="mt-1" id="resultLinks"></p>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let currentRecipe = null;

async function scrapeRecipe() {
    const url = document.getElementById('recipeUrl').value.trim();
    if (!url) return;

    const btn = document.getElementById('scrapeBtn');
    const status = document.getElementById('scrapeStatus');
    btn.disabled = true;
    status.innerHTML = '<span class="spinner"></span> Beolvasás folyamatban...';

    document.getElementById('previewCard').classList.remove('visible');
    document.getElementById('resultCard').classList.remove('visible');
    Object.keys(importedLinks).forEach(k => delete importedLinks[k]);

    try {
        const form = new FormData();
        form.append('url', url);
        const resp = await fetch('/scrape', { method: 'POST', body: form });
        const data = await resp.json();

        if (!data.ok) {
            status.innerHTML = '<span class="text-danger">Hiba: ' + data.error + '</span>';
            btn.disabled = false;
            return;
        }

        currentRecipe = data.data;
        populatePreview(currentRecipe);
        document.getElementById('previewCard').classList.add('visible');

        const warnings = [];
        if (data.duplicate) {
            warnings.push('Mealie: <a href="' + escHtml(data.duplicate.url) + '" target="_blank" style="color:var(--accent)">'
                + escHtml(data.duplicate.name) + '</a>');
        }
        if (data.tandoor_duplicate) {
            warnings.push('Tandoor: <a href="' + escHtml(data.tandoor_duplicate.url) + '" target="_blank" style="color:var(--accent)">'
                + escHtml(data.tandoor_duplicate.name) + '</a>');
        }
        if (warnings.length > 0) {
            status.innerHTML = '<span class="text-warning">⚠ Ez a recept már létezik: ' + warnings.join(' | ') + '</span>';
        } else {
            status.innerHTML = '<span class="text-success">✓ Beolvasva</span>';
        }
    } catch (e) {
        status.innerHTML = '<span class="text-danger">Hálózati hiba: ' + e.message + '</span>';
    }
    btn.disabled = false;
}

function populatePreview(r) {
    document.getElementById('recipeTitle').value = r.title || '';
    document.getElementById('recipeDesc').value = r.description || '';

    const img = document.getElementById('recipeImage');
    if (r.image_url) {
        img.src = r.image_url;
        img.style.display = 'block';
    } else {
        img.style.display = 'none';
    }

    // Ingredients
    const ingList = document.getElementById('ingredientsList');
    ingList.innerHTML = '';
    (r.ingredients || []).forEach(i => addIngredient(i));

    // Instructions
    const instList = document.getElementById('instructionsList');
    instList.innerHTML = '';
    (r.instructions || []).forEach(t => addInstruction(t));

    // Tags — scraped tags go to inactive (user must opt-in)
    document.getElementById('tagsActive').innerHTML = '';
    document.getElementById('tagsInactive').innerHTML = '';
    (r.tags || []).forEach(t => addTagChip(t, false));
}

function addIngredient(item) {
    if (typeof item === 'string') item = { food: item };
    // Group header marker
    if (item.group !== undefined && item.food === undefined) {
        addIngredientGroup(item.group);
        return;
    }
    const list = document.getElementById('ingredientsList');
    const row = document.createElement('div');
    row.className = 'ingredient-row';
    row.innerHTML = '<input type="text" class="ing-qty" placeholder="" value="' + escHtml(item.quantity || '') + '">'
        + '<input type="text" class="ing-unit" placeholder="" value="' + escHtml(item.unit || '') + '">'
        + '<input type="text" class="ing-food" placeholder="Hozzávaló" value="' + escHtml(item.food || '') + '">'
        + '<input type="text" class="ing-extra" placeholder="" value="' + escHtml(item.extra || '') + '">'
        + '<button onclick="this.parentElement.remove()">✕</button>';
    list.appendChild(row);
}

function addIngredientGroup(name) {
    const list = document.getElementById('ingredientsList');
    const row = document.createElement('div');
    row.className = 'ingredient-group';
    row.innerHTML = '<input type="text" class="ing-group-name" placeholder="Csoport neve" value="' + escHtml(name || '') + '">'
        + '<button onclick="this.parentElement.remove()">✕</button>';
    list.appendChild(row);
}

function addInstruction(value) {
    const list = document.getElementById('instructionsList');
    const idx = list.children.length + 1;
    const row = document.createElement('div');
    row.className = 'instruction-row';
    row.innerHTML = '<span class="step-num">' + idx + '</span>'
        + '<textarea>' + escHtml(value) + '</textarea>'
        + '<button onclick="removeInstruction(this)">✕</button>';
    list.appendChild(row);
}

function removeInstruction(btn) {
    btn.closest('.instruction-row').remove();
    renumberInstructions();
}

function renumberInstructions() {
    document.querySelectorAll('#instructionsList .step-num').forEach((el, i) => {
        el.textContent = i + 1;
    });
}

function gatherRecipe() {
    const ingredients = [];
    document.querySelectorAll('#ingredientsList > div').forEach(el => {
        if (el.classList.contains('ingredient-group')) {
            const name = el.querySelector('.ing-group-name').value.trim();
            if (name) ingredients.push({ group: name });
        } else if (el.classList.contains('ingredient-row')) {
            const qty = el.querySelector('.ing-qty').value.trim();
            const unit = el.querySelector('.ing-unit').value.trim();
            const food = el.querySelector('.ing-food').value.trim();
            const extra = el.querySelector('.ing-extra').value.trim();
            if (food || qty) {
                ingredients.push({ quantity: qty, unit: unit, food: food, extra: extra });
            }
        }
    });

    const instructions = [];
    document.querySelectorAll('#instructionsList .instruction-row textarea').forEach(ta => {
        const v = ta.value.trim();
        if (v) instructions.push(v);
    });

    const tags = [];
    document.querySelectorAll('#tagsActive .tag-chip').forEach(el => {
        tags.push(el.dataset.tag);
    });

    return {
        title: document.getElementById('recipeTitle').value.trim(),
        description: document.getElementById('recipeDesc').value.trim(),
        image_url: currentRecipe ? currentRecipe.image_url : null,
        ingredients: ingredients,
        instructions: instructions,
        tags: tags,
        original_url: currentRecipe ? currentRecipe.original_url : '',
    };
}

const importedLinks = {};

async function sendToMealie() {
    const recipe = gatherRecipe();
    if (!recipe.title) { alert('A recept neve kötelező!'); return; }

    const btn = document.getElementById('sendMealieBtn');
    const status = document.getElementById('sendStatus');
    btn.disabled = true;
    status.innerHTML = '<span class="spinner"></span> Importálás Mealie-be...';

    try {
        const resp = await fetch('/send', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(recipe),
        });
        const data = await resp.json();

        if (!data.ok) {
            status.innerHTML = '<span class="text-danger">Hiba: ' + data.error + '</span>';
            btn.disabled = false;
            return;
        }

        status.innerHTML = '<span class="text-success">✓ Mealie kész</span>';
        importedLinks['Mealie'] = data.url;
        showResultCard();
    } catch (e) {
        status.innerHTML = '<span class="text-danger">Hálózati hiba: ' + e.message + '</span>';
    }
    btn.disabled = false;
}

async function sendToTandoor() {
    const recipe = gatherRecipe();
    if (!recipe.title) { alert('A recept neve kötelező!'); return; }

    const btn = document.getElementById('sendTandoorBtn');
    const status = document.getElementById('sendStatus');
    btn.disabled = true;
    status.innerHTML = '<span class="spinner"></span> Importálás Tandoor-ba...';

    try {
        const resp = await fetch('/send-tandoor', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(recipe),
        });
        const data = await resp.json();

        if (!data.ok) {
            status.innerHTML = '<span class="text-danger">Hiba: ' + data.error + '</span>';
            btn.disabled = false;
            return;
        }

        status.innerHTML = '<span class="text-success">✓ Tandoor kész</span>';
        importedLinks['Tandoor'] = data.url;
        showResultCard();
    } catch (e) {
        status.innerHTML = '<span class="text-danger">Hálózati hiba: ' + e.message + '</span>';
    }
    btn.disabled = false;
}

function showResultCard() {
    const links = Object.entries(importedLinks).map(([name, url]) =>
        '<a href="' + escHtml(url) + '" target="_blank" style="color:var(--accent);">Megnyitás ' + name + '-ben →</a>'
    ).join('<br>');
    document.getElementById('resultLinks').innerHTML = links;
    document.getElementById('resultCard').classList.add('visible');
}

// --- Tag management ---
let existingTags = { mealie: [], tandoor: [] };

async function loadExistingTags() {
    try {
        const resp = await fetch('/tags');
        if (resp.ok) existingTags = await resp.json();
    } catch (e) { /* ignore */ }
}

function tagExistsIn(name, containerId) {
    const container = document.getElementById(containerId);
    for (const c of container.querySelectorAll('.tag-chip')) {
        if (c.dataset.tag.toLowerCase() === name.toLowerCase()) return true;
    }
    return false;
}

function addTagChip(name, active) {
    name = name.trim();
    if (!name) return;
    // Avoid duplicates in both areas
    if (tagExistsIn(name, 'tagsActive') || tagExistsIn(name, 'tagsInactive')) return;

    const chip = document.createElement('span');
    chip.dataset.tag = name;
    chip.textContent = name;
    chip.onclick = function() { toggleTag(this); };

    if (active) {
        chip.className = 'tag-chip tag-active';
        document.getElementById('tagsActive').appendChild(chip);
    } else {
        chip.className = 'tag-chip tag-inactive';
        document.getElementById('tagsInactive').appendChild(chip);
    }
}

function toggleTag(chip) {
    if (chip.classList.contains('tag-active')) {
        // Move to inactive
        chip.classList.remove('tag-active');
        chip.classList.add('tag-inactive');
        document.getElementById('tagsInactive').appendChild(chip);
    } else {
        // Move to active
        chip.classList.remove('tag-inactive');
        chip.classList.add('tag-active');
        document.getElementById('tagsActive').appendChild(chip);
    }
}

function getAllTagNames() {
    const names = [];
    document.querySelectorAll('#tagsActive .tag-chip, #tagsInactive .tag-chip').forEach(el => {
        names.push(el.dataset.tag.toLowerCase());
    });
    return names;
}

function onTagSearch() {
    const input = document.getElementById('tagSearch');
    const dropdown = document.getElementById('tagDropdown');
    const q = input.value.trim().toLowerCase();

    if (!q) { dropdown.classList.remove('open'); return; }

    const allNames = getAllTagNames();
    // Merge tags from both sources, track origin
    const seen = {};
    for (const t of existingTags.mealie || []) {
        const k = t.toLowerCase();
        if (!seen[k]) seen[k] = { name: t, sources: [] };
        seen[k].sources.push('M');
    }
    for (const t of existingTags.tandoor || []) {
        const k = t.toLowerCase();
        if (!seen[k]) seen[k] = { name: t, sources: [] };
        seen[k].sources.push('T');
    }

    // Filter by query, exclude already-present tags
    const matches = Object.values(seen)
        .filter(e => e.name.toLowerCase().includes(q) && !allNames.includes(e.name.toLowerCase()))
        .slice(0, 10);

    let html = '';
    for (const m of matches) {
        const src = m.sources.join('+');
        html += '<div class="tag-dropdown-item" onclick="selectTag(\'' + escHtml(m.name).replace(/'/g, "\\'") + '\')">'
            + '<span>' + escHtml(m.name) + '</span>'
            + '<span class="tag-source">' + src + '</span></div>';
    }

    // "Add new" option if exact match not found
    const exactExists = matches.some(m => m.name.toLowerCase() === q) || allNames.includes(q);
    if (!exactExists && q) {
        html += '<div class="tag-dropdown-item tag-add-new" onclick="selectTag(\'' + escHtml(input.value.trim()).replace(/'/g, "\\'") + '\')">'
            + '+ &quot;' + escHtml(input.value.trim()) + '&quot; hozzáadása</div>';
    }

    dropdown.innerHTML = html;
    dropdown.classList.toggle('open', html.length > 0);
}

function selectTag(name) {
    addTagChip(name, true);  // manually added → active
    const input = document.getElementById('tagSearch');
    input.value = '';
    document.getElementById('tagDropdown').classList.remove('open');
    input.focus();
}

function onTagKeydown(e) {
    if (e.key === 'Enter') {
        e.preventDefault();
        const val = e.target.value.trim();
        if (val) {
            addTagChip(val, true);  // manually added → active
            e.target.value = '';
            document.getElementById('tagDropdown').classList.remove('open');
        }
    } else if (e.key === 'Escape') {
        document.getElementById('tagDropdown').classList.remove('open');
    }
}

// Close dropdown when clicking outside
document.addEventListener('click', function(e) {
    if (!e.target.closest('.tag-search-wrap')) {
        document.getElementById('tagDropdown').classList.remove('open');
    }
});

// Load existing tags on page load
loadExistingTags();

function escHtml(s) {
    const d = document.createElement('div');
    d.textContent = s;
    return d.innerHTML;
}
</script>
{% endblock %}