import { RECIPES } from '../data/catalog.js?v=9';
import { getRecipeGridSectionHTML, renderRecipeGrid } from '../ui/recipeGrid.js';

const DEFAULT_MIN_MINUTES = 5;
const DEFAULT_MAX_MINUTES = 120;

let filterState = {
    query: '',
    slots: [],
    tags: [],
    minMinutes: DEFAULT_MIN_MINUTES,
    maxMinutes: DEFAULT_MAX_MINUTES,
};

let isSearchExpanded = false;
let recipeListDocListenersBound = false;

function matchesFilters(recipe) {
    const { query, slots, tags, minMinutes, maxMinutes } = filterState;

    if (query) {
        const q = query.toLowerCase();
        const haystack = `${recipe.title} ${(recipe.tags || []).join(' ')}`.toLowerCase();
        if (!haystack.includes(q)) return false;
    }

    if (slots.length > 0) {
        if (!recipe.allowedSlots.some((s) => slots.includes(s))) return false;
    }

    if (tags.length > 0) {
        const recipeTags = (recipe.tags || []).map((t) => t.toLowerCase());
        if (!tags.some((t) => recipeTags.includes(t.toLowerCase()))) return false;
    }

    if (minMinutes > DEFAULT_MIN_MINUTES && recipe.minutes < minMinutes) return false;
    if (maxMinutes < DEFAULT_MAX_MINUTES && recipe.minutes > maxMinutes) return false;

    return true;
}

function getFilteredRecipes() {
    return Object.values(RECIPES).filter(matchesFilters);
}

function syncRecipeScrollShadow() {
    const searchShell = document.getElementById('recipe-search-shell');
    if (searchShell) {
        searchShell.style.boxShadow = 'var(--shadow-shell)';
    }
}

function syncRecipeTopbarUI() {
    const defaultRow = document.getElementById('recipe-default-row');
    const searchShell = document.getElementById('recipe-search-shell');

    const showSearch = isSearchExpanded;

    if (defaultRow) {
        defaultRow.style.opacity = showSearch ? '0' : '1';
        defaultRow.style.transform = showSearch ? 'translateY(-2px) scale(0.98)' : 'translateY(0) scale(1)';
        defaultRow.style.pointerEvents = showSearch ? 'none' : 'auto';
    }

    if (searchShell) {
        searchShell.style.opacity = showSearch ? '1' : '0';
        searchShell.style.transform = showSearch ? 'translateY(0) scale(1)' : 'translateY(-2px) scale(0.98)';
        searchShell.style.pointerEvents = showSearch ? 'auto' : 'none';
        searchShell.style.boxShadow = 'var(--shadow-shell)';
    }
}

function closeSearch() {
    const input = document.getElementById('recipe-search-input');
    const hadQuery = Boolean(input?.value);
    if (input) {
        input.value = '';
        input.blur();
    }
    filterState.query = '';
    isSearchExpanded = false;
    syncRecipeTopbarUI();
    if (hadQuery) renderGrid();
}

function openSearch() {
    isSearchExpanded = true;
    window.closeFilters?.();
    syncRecipeTopbarUI();
    window.requestAnimationFrame(() => {
        document.getElementById('recipe-search-input')?.focus();
    });
}

function renderGrid() {
    const grid = document.getElementById('recipe-grid');
    const emptyState = document.getElementById('recipe-empty-state');
    if (!grid) return;

    renderRecipeGrid({
        gridEl: grid,
        emptyStateEl: emptyState,
        recipes: getFilteredRecipes(),
        showSlotLabels: false,
        cardClassName: 'recipe-list-card',
    });
    syncRecipeTopbarUI();
    requestAnimationFrame(syncRecipeScrollShadow);
}

export function getRecipeListHTML() {
    return `
    <div id="main-view" class="flex flex-col h-full absolute inset-0 bg-[rgb(var(--app-bg-rgb))] z-10" style="background:rgb(var(--app-bg-rgb)) !important;">
        <div id="recipe-top-bar" class="pointer-events-none absolute inset-x-0 top-0 z-[12] px-4 pt-4 pb-4" style="background:rgb(var(--app-bg-rgb)) !important; border:none !important;">
            <div class="pointer-events-auto relative z-[1] w-full">
                <div id="recipe-topbar" class="relative min-h-12">

                    <div id="recipe-default-row" class="flex min-h-12 items-center gap-2 transition-all duration-200" style="opacity:1; transform:translateY(0) scale(1);">
                        <h1 class="min-w-0 flex-1 truncate" style="margin:0;padding:0;color:rgb(var(--text-emphasis-rgb));font-family:var(--app-font);font-size:18px;font-weight:700;line-height:1.2;letter-spacing:-0.02em;">Katalog przepisów</h1>

                        <div id="recipe-filter-wrap" class="relative shrink-0">
                            <button type="button" id="recipe-filter-btn" class="relative w-11 h-11 rounded-full shrink-0 flex items-center justify-center transition-all duration-200" style="background:rgb(var(--card-rgb)); border:1px solid rgb(var(--border-card-rgb)); box-shadow:var(--shadow-shell); color:rgb(var(--text-body-rgb));" aria-label="Otwórz filtry">
                                <i class="fas fa-sliders-h text-[12px]" aria-hidden="true"></i>
                                <span id="recipe-filter-count" class="hidden absolute -top-1 -right-1 min-w-[1.1rem] h-[1.1rem] px-1 rounded-full text-[9px] font-bold leading-none items-center justify-center" style="background:rgb(var(--sunken-rgb)); border:1px solid rgb(var(--border-input-rgb)); color:rgb(var(--text-emphasis-rgb));"></span>
                            </button>
                        </div>

                        <button type="button" id="recipe-search-toggle" class="w-11 h-11 rounded-full shrink-0 flex items-center justify-center transition-all duration-200" style="background:rgb(var(--card-rgb)) !important; border:1px solid rgb(var(--border-card-rgb)) !important; box-shadow:var(--shadow-shell) !important; color:rgb(var(--text-body-rgb));" aria-label="Szukaj">
                            <i class="fas fa-search text-[13px]" aria-hidden="true"></i>
                        </button>
                    </div>

                    <div id="recipe-search-shell" class="absolute inset-0 flex items-center gap-2 rounded-full px-3 transition-all duration-200 pointer-events-none" style="background:rgb(var(--sunken-rgb)) !important; border:1px solid rgb(var(--border-input-rgb)) !important; box-shadow:var(--shadow-shell) !important; opacity:0; transform:translateY(-2px) scale(0.98);">
                        <i class="fas fa-search text-[13px] shrink-0" style="color:rgb(var(--text-dim-rgb));"></i>
                        <input type="search" id="recipe-search-input" autocomplete="off" placeholder="Szukaj przepisów…"
                            class="flex-1 min-w-0 h-full bg-transparent outline-none text-[15px] leading-none py-0" style="background:transparent !important; border:none !important; box-shadow:none !important; color:rgb(var(--text-body-rgb)); margin:0;">
                        <button type="button" id="recipe-search-close" class="w-8 h-8 rounded-full shrink-0 flex items-center justify-center transition-colors" style="background:rgb(var(--card-soft-rgb)); border:none; color:rgb(var(--text-dim-rgb));">
                            <i class="fas fa-xmark text-[13px]"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        ${getRecipeGridSectionHTML({
        scrollId: 'recipe-scroll',
        gridId: 'recipe-grid',
        emptyStateId: 'recipe-empty-state',
        scrollClassName: 'relative flex-1 overflow-y-auto px-4 pt-[5.35rem] pb-24 bg-[rgb(var(--app-bg-rgb))]',
        gridClassName: 'grid grid-cols-3 gap-2 bg-[rgb(var(--app-bg-rgb))]',
        emptyTitle: 'Brak wyników',
        emptyMessage: 'Zmień kryteria wyszukiwania lub filtry',
    })}
    </div>
    `;
}

export function getFilterState() {
    return filterState;
}

export function applyFilters(newState) {
    Object.assign(filterState, newState);
    renderGrid();
}

export function getFilteredCount() {
    return getFilteredRecipes().length;
}

export function refreshRecipeList() {
    renderGrid();
}

export function setupRecipeList() {
    renderGrid();

    document.getElementById('recipe-search-input')?.addEventListener('input', (e) => {
        filterState.query = e.target.value.trim();
        renderGrid();
    });
    document.getElementById('recipe-search-input')?.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') closeSearch();
    });

    document.getElementById('recipe-search-toggle')?.addEventListener('click', () => openSearch());
    document.getElementById('recipe-search-close')?.addEventListener('click', () => closeSearch());

    document.getElementById('recipe-filter-btn')?.addEventListener('click', (e) => {
        e.stopPropagation();
        if (isSearchExpanded) {
            isSearchExpanded = false;
            syncRecipeTopbarUI();
        }
        window.openFilters?.('recipes');
    });

    document.getElementById('recipe-grid')?.addEventListener('click', (e) => {
        const card = e.target.closest('.recipe-browser-card');
        if (!card) return;
        const recipeId = card.getAttribute('data-recipe-id');
        if (recipeId) window.openRecipeDetail?.(recipeId);
    });

    const recipeScroll = document.getElementById('recipe-scroll');
    const recipeTopBar = document.getElementById('recipe-top-bar');
    if (recipeScroll && recipeTopBar) {
        const shadow = document.createElement('div');
        shadow.style.cssText = 'position:absolute;left:0;right:0;bottom:-8px;height:8px;background:linear-gradient(to bottom,rgba(var(--overlay-rgb),0.25),transparent);opacity:0;transition:opacity 0.2s;pointer-events:none;';
        recipeTopBar.appendChild(shadow);
        recipeScroll.addEventListener('scroll', () => {
            shadow.style.opacity = recipeScroll.scrollTop > 2 ? '1' : '0';
        });
    }

    if (!recipeListDocListenersBound) {
        recipeListDocListenersBound = true;
        document.addEventListener('keydown', (e) => {
            if (e.key !== 'Escape' || !isSearchExpanded) return;
            if (!document.getElementById('main-view')?.classList.contains('hidden')) {
                closeSearch();
            }
        });
    }
}