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

{% block head %}
<style>
    /* --- Tab bar (same as import.html) --- */
    .tab-bar {
        display: flex;
        gap: 0;
        border-bottom: 2px solid var(--border);
        margin-bottom: 1.2rem;
    }
    .tab-btn {
        background: none;
        border: none;
        color: var(--text-dim);
        font-size: 1rem;
        font-weight: 600;
        padding: 0.6rem 1.2rem;
        cursor: pointer;
        border-bottom: 2px solid transparent;
        margin-bottom: -2px;
        transition: color 0.15s, border-color 0.15s;
        font-family: inherit;
    }
    .tab-btn:hover { color: var(--text); }
    .tab-btn.active {
        color: var(--accent-light);
        border-bottom-color: var(--accent-light);
    }

    /* --- Search & filter bar --- */
    .search-section {
        margin-bottom: 1rem;
    }
    .search-row {
        display: flex;
        gap: 0.5rem;
        align-items: center;
        margin-bottom: 0.75rem;
        position: relative;
    }
    .search-row input[type="text"] {
        margin-bottom: 0;
        flex: 1;
    }
    .search-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        right: 60px;
        background: var(--surface2);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        max-height: 250px;
        overflow-y: auto;
        z-index: 110;
        display: none;
    }
    .search-dropdown.open { display: block; }
    .search-dropdown-item {
        padding: 0.5rem 0.75rem;
        cursor: pointer;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .search-dropdown-item:hover, .search-dropdown-item.highlighted { background: var(--accent-glow); }
    .search-dropdown-item .sdi-name {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .search-dropdown-item .sdi-actions {
        display: flex;
        gap: 0.3rem;
        flex-shrink: 0;
    }
    .search-dropdown-item .sdi-actions button {
        background: none;
        border: none;
        cursor: pointer;
        font-size: 0.85rem;
        padding: 0.15rem 0.35rem;
        border-radius: 4px;
        color: var(--text-dim);
        transition: background 0.1s, color 0.1s;
    }
    .search-dropdown-item .sdi-actions button:hover {
        background: var(--surface);
        color: var(--text);
    }
    .search-dropdown-item .sdi-actions .sdi-delete:hover {
        background: rgba(218,54,51,0.2);
        color: #f85149;
    }
    .tag-filter-wrap {
        position: relative;
    }
    .tag-filter-wrap input[type="text"] {
        margin-bottom: 0;
    }
    .active-filter-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.3rem;
        margin-top: 0.5rem;
    }
    .filter-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        background: var(--accent);
        color: #fff;
        padding: 0.2rem 0.6rem;
        border-radius: 99px;
        font-size: 0.8rem;
        font-weight: 500;
    }
    .filter-chip .remove-chip {
        cursor: pointer;
        opacity: 0.7;
        font-size: 1rem;
        line-height: 1;
    }
    .filter-chip .remove-chip:hover { opacity: 1; }

    /* Tag dropdown */
    .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: 100;
        display: none;
    }
    .tag-dropdown.open { display: block; }
    .tag-dropdown-item {
        padding: 0.5rem 0.75rem;
        cursor: pointer;
        font-size: 0.9rem;
        display: flex;
        justify-content: space-between;
    }
    .tag-dropdown-item:hover { background: var(--accent-glow); }

    /* --- Action bar --- */
    .action-bar {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 0.75rem;
        padding: 0.5rem 0;
    }
    .action-bar label {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        margin-bottom: 0;
        cursor: pointer;
        font-size: 0.9rem;
    }
    .action-bar .selection-info {
        color: var(--text-dim);
        font-size: 0.85rem;
    }
    /* --- Recipe list --- */
    .recipe-list {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .recipe-row {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.6rem 0.75rem;
        border-bottom: 1px solid var(--border);
        transition: background 0.1s;
    }
    .recipe-row:hover {
        background: var(--surface2);
    }
    .recipe-row.selected {
        background: rgba(0,136,204,0.08);
    }
    .recipe-row input[type="checkbox"] {
        flex-shrink: 0;
        cursor: pointer;
        width: 16px;
        height: 16px;
    }
    .recipe-name-col {
        flex: 1;
        min-width: 0;
    }
    .recipe-name-col a {
        color: var(--text);
        text-decoration: none;
        font-weight: 500;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .recipe-name-col a:hover {
        color: var(--accent-light);
    }
    .recipe-tags-col {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
        flex-shrink: 0;
        max-width: 250px;
    }
    .recipe-tag-sm {
        font-size: 0.7rem;
        padding: 0.1rem 0.4rem;
        background: var(--surface2);
        border: 1px solid var(--border);
        border-radius: 99px;
        color: var(--text-dim);
        white-space: nowrap;
    }
    .recipe-actions {
        display: flex;
        gap: 0.4rem;
        flex-shrink: 0;
    }
    .btn-sm {
        padding: 0.3rem 0.7rem;
        font-size: 0.8rem;
        border-radius: 8px;
    }
    .btn-icon {
        padding: 0.3rem 0.5rem;
        font-size: 0.85rem;
    }

    /* --- Pagination --- */
    .pagination-bar {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        margin-top: 1rem;
        padding: 0.75rem 0;
    }

    /* --- Modal --- */
    .modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.6);
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .modal-card {
        max-width: 450px;
        width: 90%;
    }
    .modal-card h2 {
        color: #f85149;
    }

    /* --- Toast --- */
    .toast {
        position: fixed;
        bottom: 1.5rem;
        right: 1.5rem;
        padding: 0.75rem 1.2rem;
        border-radius: var(--radius);
        color: #fff;
        font-weight: 500;
        font-size: 0.9rem;
        z-index: 2000;
        animation: toastIn 0.3s;
    }
    .toast-success { background: var(--success); }
    .toast-error { background: var(--danger); }
    @keyframes toastIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* --- Loading --- */
    .loading-row {
        text-align: center;
        padding: 2rem;
        color: var(--text-dim);
    }
    .empty-state {
        text-align: center;
        padding: 2rem;
        color: var(--text-dim);
    }
</style>
{% endblock %}

{% block content %}
<div class="card">
    <!-- Backend tabs -->
    <div class="tab-bar" id="backendTabs">
        {% if has_mealie %}
        <button class="tab-btn active" onclick="switchBackend('mealie')">Mealie</button>
        {% endif %}
        {% if has_tandoor %}
        <button class="tab-btn{% if not has_mealie %} active{% endif %}" onclick="switchBackend('tandoor')">Tandoor</button>
        {% endif %}
    </div>

    <!-- Search -->
    <div class="search-section">
        <div class="search-row">
            <input type="text" id="recipeSearch" placeholder="Recept keresése..."
                   oninput="onSearchInput()" onkeydown="onSearchKeydown(event)" autocomplete="off">
            <button class="btn btn-primary" onclick="executeSearch()">Keresés</button>
            <div id="searchDropdown" class="search-dropdown"></div>
        </div>
        <div class="tag-filter-wrap">
            <input type="text" id="tagFilterSearch" placeholder="Szűrés címke szerint..."
                   autocomplete="off" oninput="onFilterTagSearch()" onfocus="onFilterTagSearch()">
            <div id="tagFilterDropdown" class="tag-dropdown"></div>
            <div class="active-filter-tags" id="activeFilterTags"></div>
        </div>
    </div>

    <!-- Action bar -->
    <div class="action-bar" id="actionBar" style="display:none;">
        <label>
            <input type="checkbox" id="selectAll" onchange="onSelectAll()">
            Mind
        </label>
        <span class="selection-info" id="selectionCount"></span>
        <button class="btn btn-danger btn-sm" onclick="confirmBulkDelete()" id="bulkDeleteBtn" disabled>
            Törlés
        </button>
    </div>

    <!-- Loading -->
    <div id="loadingRow" class="loading-row hidden">
        <span class="spinner"></span> Betöltés...
    </div>

    <!-- Recipe list -->
    <div id="recipeList" class="recipe-list"></div>

    <!-- Empty state -->
    <div id="emptyState" class="empty-state hidden">Nincs találat.</div>

    <!-- Pagination -->
    <div id="pagination" class="pagination-bar hidden"></div>
</div>

<!-- Delete confirmation modal -->
<div id="deleteModal" class="modal-overlay hidden">
    <div class="modal-card card">
        <h2>Recept törlése</h2>
        <p id="deleteModalText"></p>
        <div class="flex" style="justify-content:flex-end;gap:0.5rem;margin-top:1rem;">
            <button class="btn btn-secondary" onclick="closeDeleteModal()">Mégsem</button>
            <button class="btn btn-danger" onclick="executeDelete()" id="confirmDeleteBtn">Törlés</button>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
/* ===== State ===== */
let currentBackend = '{{ "mealie" if has_mealie else "tandoor" }}';
let currentPage = 1;
const perPage = 50;
let searchTimeout = null;
let selectedIds = new Set();
let pendingDeleteIds = [];  // set by confirmDelete / confirmBulkDelete

let backendTags = [];       // [{name, id}, ...]
let activeFilterTagIds = [];
let activeFilterTagNames = {};  // id -> name, for chip display
let searchSuggestions = [];     // [{id, name}, ...] from last suggestion fetch
let searchHighlightIdx = -1;    // -1 = none highlighted

/* ===== Escaping ===== */
function escHtml(s) {
    const d = document.createElement('div');
    d.textContent = s;
    return d.innerHTML;
}

/* ===== Backend switching ===== */
function switchBackend(b) {
    currentBackend = b;
    currentPage = 1;
    selectedIds.clear();
    activeFilterTagIds = [];
    activeFilterTagNames = {};
    document.getElementById('activeFilterTags').innerHTML = '';
    document.getElementById('recipeSearch').value = '';
    document.querySelectorAll('#backendTabs .tab-btn').forEach(btn => {
        btn.classList.toggle('active',
            btn.textContent.trim().toLowerCase() === b.toLowerCase());
    });
    loadBackendTags();
    loadRecipes();
}

/* ===== Search ===== */
function onSearchInput() {
    clearTimeout(searchTimeout);
    searchHighlightIdx = -1;
    searchTimeout = setTimeout(() => {
        loadSearchSuggestions();
    }, 300);
}

function onSearchKeydown(e) {
    const dropdown = document.getElementById('searchDropdown');
    const isOpen = dropdown.classList.contains('open');

    if (e.key === 'ArrowDown' && isOpen) {
        e.preventDefault();
        searchHighlightIdx = Math.min(searchHighlightIdx + 1, searchSuggestions.length - 1);
        updateSearchHighlight();
    } else if (e.key === 'ArrowUp' && isOpen) {
        e.preventDefault();
        searchHighlightIdx = Math.max(searchHighlightIdx - 1, -1);
        updateSearchHighlight();
    } else if (e.key === 'Enter') {
        e.preventDefault();
        if (isOpen && searchHighlightIdx >= 0 && searchHighlightIdx < searchSuggestions.length) {
            // Navigate to edit page of highlighted item
            const item = searchSuggestions[searchHighlightIdx];
            dropdown.classList.remove('open');
            window.location.href = '/recipes/' + currentBackend + '/' + encodeURIComponent(item.id) + '/edit';
        } else {
            dropdown.classList.remove('open');
            executeSearch();
        }
    } else if (e.key === 'Escape') {
        dropdown.classList.remove('open');
        searchHighlightIdx = -1;
    }
}

function updateSearchHighlight() {
    const items = document.querySelectorAll('#searchDropdown .search-dropdown-item');
    items.forEach((el, i) => el.classList.toggle('highlighted', i === searchHighlightIdx));
    if (searchHighlightIdx >= 0 && items[searchHighlightIdx]) {
        items[searchHighlightIdx].scrollIntoView({ block: 'nearest' });
    }
}

function executeSearch() {
    document.getElementById('searchDropdown').classList.remove('open');
    searchHighlightIdx = -1;
    currentPage = 1;
    selectedIds.clear();
    loadRecipes();
}

async function loadSearchSuggestions() {
    const q = document.getElementById('recipeSearch').value.trim();
    const dropdown = document.getElementById('searchDropdown');
    if (!q) { dropdown.classList.remove('open'); searchSuggestions = []; return; }

    const params = new URLSearchParams({ page: 1, per_page: 8, search: q });
    if (activeFilterTagIds.length) params.set('tag_ids', activeFilterTagIds.join(','));

    try {
        const resp = await fetch('/api/recipes/' + currentBackend + '?' + params);
        const data = await resp.json();
        if (!data.ok || data.items.length === 0) {
            dropdown.classList.remove('open');
            searchSuggestions = [];
            return;
        }
        searchSuggestions = data.items;
        searchHighlightIdx = -1;
        renderSearchDropdown();
        dropdown.classList.add('open');
    } catch (e) {
        dropdown.classList.remove('open');
        searchSuggestions = [];
    }
}

function renderSearchDropdown() {
    const dropdown = document.getElementById('searchDropdown');
    let html = '';
    searchSuggestions.forEach((r, i) => {
        const editUrl = '/recipes/' + currentBackend + '/' + encodeURIComponent(r.id) + '/edit';
        const cls = i === searchHighlightIdx ? ' highlighted' : '';
        html += '<div class="search-dropdown-item' + cls + '" data-idx="' + i + '" ' +
            'onmouseenter="searchHighlightIdx=' + i + ';updateSearchHighlight()" ' +
            'onclick="navigateToEdit(' + i + ')">' +
            '<span class="sdi-name">' + escHtml(r.name) + '</span>' +
            '<span class="sdi-actions">' +
                '<button title="Szerkesztés" onclick="event.stopPropagation();navigateToEdit(' + i + ')">&#9998;</button>' +
                '<button class="sdi-delete" title="Törlés" onclick="event.stopPropagation();confirmSingleDelete(\'' +
                    escHtml(String(r.id)).replace(/'/g, "\\'") + '\', \'' +
                    escHtml(r.name).replace(/'/g, "\\'") + '\')">&#128465;</button>' +
            '</span></div>';
    });
    dropdown.innerHTML = html;
}

function navigateToEdit(idx) {
    if (idx >= 0 && idx < searchSuggestions.length) {
        const item = searchSuggestions[idx];
        document.getElementById('searchDropdown').classList.remove('open');
        window.location.href = '/recipes/' + currentBackend + '/' + encodeURIComponent(item.id) + '/edit';
    }
}

/* ===== Tag filter ===== */
async function loadBackendTags() {
    try {
        const r = await fetch('/api/tags/' + currentBackend);
        const d = await r.json();
        if (d.ok) backendTags = d.tags || [];
        else backendTags = [];
    } catch (e) { backendTags = []; }
}

function onFilterTagSearch() {
    const input = document.getElementById('tagFilterSearch');
    const dropdown = document.getElementById('tagFilterDropdown');
    const q = input.value.trim().toLowerCase();
    if (!q) { dropdown.classList.remove('open'); return; }

    const activeSet = new Set(activeFilterTagIds.map(String));
    const matches = backendTags
        .filter(t => t.name.toLowerCase().includes(q) && !activeSet.has(String(t.id)))
        .slice(0, 10);

    if (matches.length === 0) { dropdown.classList.remove('open'); return; }

    let html = '';
    for (const t of matches) {
        html += '<div class="tag-dropdown-item" onclick="addFilterTag(\'' +
            escHtml(String(t.id)).replace(/'/g, "\\'") + '\', \'' +
            escHtml(t.name).replace(/'/g, "\\'") + '\')">' +
            escHtml(t.name) + '</div>';
    }
    dropdown.innerHTML = html;
    dropdown.classList.add('open');
}

function addFilterTag(id, name) {
    if (activeFilterTagIds.includes(String(id))) return;
    activeFilterTagIds.push(String(id));
    activeFilterTagNames[String(id)] = name;
    renderFilterChips();
    document.getElementById('tagFilterSearch').value = '';
    document.getElementById('tagFilterDropdown').classList.remove('open');
    currentPage = 1;
    selectedIds.clear();
    loadRecipes();
}

function removeFilterTag(id) {
    activeFilterTagIds = activeFilterTagIds.filter(x => x !== String(id));
    delete activeFilterTagNames[String(id)];
    renderFilterChips();
    currentPage = 1;
    selectedIds.clear();
    loadRecipes();
}

function renderFilterChips() {
    const wrap = document.getElementById('activeFilterTags');
    let html = '';
    for (const id of activeFilterTagIds) {
        const name = activeFilterTagNames[id] || id;
        html += '<span class="filter-chip">' + escHtml(name) +
            ' <span class="remove-chip" onclick="removeFilterTag(\'' +
            escHtml(id).replace(/'/g, "\\'") + '\')">&times;</span></span>';
    }
    wrap.innerHTML = html;
}

/* ===== Close dropdowns on outside click ===== */
document.addEventListener('click', e => {
    const tagWrap = document.querySelector('.tag-filter-wrap');
    if (tagWrap && !tagWrap.contains(e.target)) {
        document.getElementById('tagFilterDropdown').classList.remove('open');
    }
    const searchRow = document.querySelector('.search-row');
    if (searchRow && !searchRow.contains(e.target)) {
        document.getElementById('searchDropdown').classList.remove('open');
    }
});

/* ===== Load recipes ===== */
async function loadRecipes() {
    const list = document.getElementById('recipeList');
    const loading = document.getElementById('loadingRow');
    const empty = document.getElementById('emptyState');
    const pagination = document.getElementById('pagination');
    const actionBar = document.getElementById('actionBar');

    loading.classList.remove('hidden');
    list.innerHTML = '';
    empty.classList.add('hidden');
    pagination.classList.add('hidden');
    actionBar.style.display = 'none';

    const search = document.getElementById('recipeSearch').value.trim();
    const params = new URLSearchParams({ page: currentPage, per_page: perPage });
    if (search) params.set('search', search);
    if (activeFilterTagIds.length) params.set('tag_ids', activeFilterTagIds.join(','));

    try {
        const resp = await fetch('/api/recipes/' + currentBackend + '?' + params);
        const data = await resp.json();
        loading.classList.add('hidden');

        if (!data.ok) {
            list.innerHTML = '<div class="alert alert-danger">' + escHtml(data.error) + '</div>';
            return;
        }

        if (data.items.length === 0) {
            empty.classList.remove('hidden');
            return;
        }

        actionBar.style.display = 'flex';
        renderRecipeList(data.items);
        renderPagination(data.page, data.per_page, data.total);
        updateSelectionUI();
    } catch (e) {
        loading.classList.add('hidden');
        list.innerHTML = '<div class="alert alert-danger">Hiba: ' + escHtml(e.message) + '</div>';
    }
}

/* ===== Render recipe list ===== */
function renderRecipeList(items) {
    const list = document.getElementById('recipeList');
    let html = '';
    for (const r of items) {
        const sel = selectedIds.has(String(r.id));
        const tagsHtml = r.tags.slice(0, 5).map(t =>
            '<span class="recipe-tag-sm">' + escHtml(t) + '</span>'
        ).join('');
        const editUrl = '/recipes/' + currentBackend + '/' + encodeURIComponent(r.id) + '/edit';
        html += '<div class="recipe-row' + (sel ? ' selected' : '') + '" data-id="' + escHtml(String(r.id)) + '">' +
            '<input type="checkbox" ' + (sel ? 'checked ' : '') +
                'onchange="onRecipeToggle(this, \'' + escHtml(String(r.id)).replace(/'/g, "\\'") + '\')">' +
            '<div class="recipe-name-col"><a href="' + escHtml(r.url) + '" target="_blank" title="' +
                escHtml(r.name) + '">' + escHtml(r.name) + '</a></div>' +
            '<div class="recipe-tags-col">' + tagsHtml + '</div>' +
            '<div class="recipe-actions">' +
                '<a href="' + editUrl + '" class="btn btn-secondary btn-sm btn-icon" title="Szerkesztés">&#9998;</a>' +
                '<button class="btn btn-danger btn-sm btn-icon" title="Törlés" ' +
                    'onclick="confirmSingleDelete(\'' + escHtml(String(r.id)).replace(/'/g, "\\'") + '\', \'' +
                    escHtml(r.name).replace(/'/g, "\\'") + '\')">&#128465;</button>' +
            '</div></div>';
    }
    list.innerHTML = html;
}

/* ===== Pagination ===== */
function renderPagination(page, pp, total) {
    const totalPages = Math.ceil(total / pp);
    if (totalPages <= 1) return;
    const bar = document.getElementById('pagination');
    bar.classList.remove('hidden');
    let html = '';
    if (page > 1) {
        html += '<button class="btn btn-secondary btn-sm" onclick="goToPage(' + (page - 1) + ')">&larr; Előző</button>';
    }
    html += '<span class="text-dim">' + page + ' / ' + totalPages + ' (összesen: ' + total + ')</span>';
    if (page < totalPages) {
        html += '<button class="btn btn-secondary btn-sm" onclick="goToPage(' + (page + 1) + ')">Következő &rarr;</button>';
    }
    bar.innerHTML = html;
}

function goToPage(p) {
    currentPage = p;
    loadRecipes();
    window.scrollTo(0, 0);
}

/* ===== Selection ===== */
function onRecipeToggle(cb, id) {
    if (cb.checked) selectedIds.add(id);
    else selectedIds.delete(id);
    cb.closest('.recipe-row').classList.toggle('selected', cb.checked);
    updateSelectionUI();
}

function onSelectAll() {
    const checked = document.getElementById('selectAll').checked;
    document.querySelectorAll('#recipeList input[type="checkbox"]').forEach(cb => {
        cb.checked = checked;
        const id = cb.closest('.recipe-row').dataset.id;
        if (checked) selectedIds.add(id);
        else selectedIds.delete(id);
        cb.closest('.recipe-row').classList.toggle('selected', checked);
    });
    updateSelectionUI();
}

function updateSelectionUI() {
    const count = selectedIds.size;
    document.getElementById('selectionCount').textContent =
        count > 0 ? count + ' kiválasztva' : '';
    document.getElementById('bulkDeleteBtn').disabled = count === 0;
    const checkboxes = document.querySelectorAll('#recipeList input[type="checkbox"]');
    document.getElementById('selectAll').checked =
        checkboxes.length > 0 &&
        document.querySelectorAll('#recipeList input[type="checkbox"]:not(:checked)').length === 0;
}

/* ===== Delete ===== */
function confirmSingleDelete(id, name) {
    pendingDeleteIds = [id];
    document.getElementById('deleteModalText').textContent =
        'Biztosan törölni szeretnéd a következő receptet: „' + name + '"? Ez a művelet nem vonható vissza!';
    document.getElementById('deleteModal').classList.remove('hidden');
}

function confirmBulkDelete() {
    if (selectedIds.size === 0) return;
    pendingDeleteIds = Array.from(selectedIds);
    document.getElementById('deleteModalText').textContent =
        'Biztosan törölni szeretnéd a kiválasztott ' + pendingDeleteIds.length +
        ' receptet? Ez a művelet nem vonható vissza!';
    document.getElementById('deleteModal').classList.remove('hidden');
}

function closeDeleteModal() {
    document.getElementById('deleteModal').classList.add('hidden');
}

async function executeDelete() {
    const btn = document.getElementById('confirmDeleteBtn');
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner"></span> Törlés...';

    try {
        const resp = await fetch('/api/recipes/' + currentBackend + '/delete', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ ids: pendingDeleteIds }),
        });
        const data = await resp.json();
        closeDeleteModal();
        btn.disabled = false;
        btn.textContent = 'Törlés';

        if (data.ok) {
            for (const id of pendingDeleteIds) selectedIds.delete(String(id));
            showToast(data.message, 'success');
            loadRecipes();
        } else {
            showToast(data.error || 'Hiba történt.', 'error');
        }
    } catch (e) {
        btn.disabled = false;
        btn.textContent = 'Törlés';
        closeDeleteModal();
        showToast('Hiba: ' + e.message, 'error');
    }
}

/* ===== Toast ===== */
function showToast(msg, type) {
    const el = document.createElement('div');
    el.className = 'toast toast-' + type;
    el.textContent = msg;
    document.body.appendChild(el);
    setTimeout(() => el.remove(), 3000);
}

/* ===== Init ===== */
loadBackendTags();
loadRecipes();
</script>
{% endblock %}