import { getRecipeListHTML } from './views/RecipeList.js';
import { getFilterHTML, setupFilter } from './views/Filter.js';
import { getRecipeDetailHTML, setupRecipeDetail } from './views/RecipeDetail.js';

document.addEventListener('DOMContentLoaded', () => {
    const appContainer = document.getElementById('app-container');

    // Inject all views into the main container
    appContainer.innerHTML = `
        ${getRecipeListHTML()}
        ${getRecipeDetailHTML()}
        ${getFilterHTML()}
    `;

    // Initialize logic for the injected views
    setupFilter();
    setupRecipeDetail();
});

// --- GLOBAL NAVIGATION METHODS ---
window.openRecipeDetail = () => {
    const view = document.getElementById('recipe-detail-view');
    // Swap Tailwind classes to slide IN
    view.classList.remove('translate-x-full', 'opacity-0', 'pointer-events-none');
    view.classList.add('translate-x-0', 'opacity-100', 'pointer-events-auto');
};

window.closeRecipeDetail = () => {
    const view = document.getElementById('recipe-detail-view');
    // Swap Tailwind classes to slide OUT
    view.classList.remove('translate-x-0', 'opacity-100', 'pointer-events-auto');
    view.classList.add('translate-x-full', 'opacity-0', 'pointer-events-none');
};

window.openFilters = () => {
    const fv = document.getElementById('filter-view');
    fv.classList.remove('hidden');
    fv.classList.add('flex');
};

window.closeFilters = () => {
    const fv = document.getElementById('filter-view');
    fv.classList.add('hidden');
    fv.classList.remove('flex');
};