export function getRecipeDetailHTML() {
    return `
    <div id="recipe-detail-view" class="absolute inset-0 bg-white z-30 transition-all duration-300 ease-in-out translate-x-full opacity-0 pointer-events-none flex flex-col overflow-hidden">
        
        <div class="absolute top-0 w-full p-4 flex justify-between z-40 mt-4">
            <button onclick="closeRecipeDetail()" class="w-10 h-10 bg-white/90 backdrop-blur rounded-full flex items-center justify-center shadow-sm text-gray-800 hover:bg-white transition-colors">
                <i class="fas fa-arrow-left"></i>
            </button>
            <button class="w-10 h-10 bg-white/90 backdrop-blur rounded-full flex items-center justify-center shadow-sm text-gray-400 hover:text-red-500 transition-colors">
                <i class="far fa-heart"></i>
            </button>
        </div>

        <div class="h-[260px] shrink-0 w-full bg-[#d4d4d4] flex items-center justify-center relative">
            <span class="text-white font-medium text-lg">Pancakes Hero Image</span>
        </div>

        <div class="bg-white rounded-t-3xl -mt-6 relative z-30 pt-8 flex flex-col flex-1 overflow-hidden">
            
            <div class="mb-4 px-6 shrink-0">
                <div class="flex justify-between items-start mb-3">
                    <h1 class="text-2xl font-bold text-gray-900">Fluffy Pancakes</h1>
                </div>
                
                <div class="flex flex-wrap gap-2 mb-4">
                    <span class="px-3 py-1 bg-gray-100 text-gray-700 text-xs rounded-md font-medium">Breakfast</span>
                    <span class="px-3 py-1 bg-gray-100 text-gray-700 text-xs rounded-md font-medium">Vegetarian</span>
                </div>
                
                <div class="flex justify-between items-center text-sm text-gray-600 font-medium">
                    <div class="flex gap-4">
                        <div class="flex items-center gap-1.5"><i class="fas fa-clock text-gray-400"></i><span>15 min</span></div>
                        <div class="flex items-center gap-1.5"><i class="fas fa-fire text-gray-400"></i><span>320 cal</span></div>
                    </div>
                    
                    <div class="flex items-center gap-1 bg-gray-100 p-1 rounded-lg">
                        <button onclick="changeServings(-1)" class="w-6 h-6 bg-white rounded shadow-sm flex items-center justify-center text-gray-600 hover:text-black hover:bg-gray-50"><i class="fas fa-minus text-[10px]"></i></button>
                        <div class="flex items-center gap-1 px-2">
                            <span id="servings-count" class="font-bold text-gray-900 text-sm w-3 text-center">2</span>
                            <span class="text-xs text-gray-500"><i class="fas fa-user-friends"></i></span>
                        </div>
                        <button onclick="changeServings(1)" class="w-6 h-6 bg-white rounded shadow-sm flex items-center justify-center text-gray-600 hover:text-black hover:bg-gray-50"><i class="fas fa-plus text-[10px]"></i></button>
                    </div>
                </div>
            </div>

            <div class="flex border-b border-gray-200 mb-2 px-6 shrink-0">
                <button class="flex-1 pb-3 text-sm font-semibold text-gray-900 border-b-2 border-gray-900 tab-btn" onclick="switchTab('ingredients', this)">Ingredients</button>
                <button class="flex-1 pb-3 text-sm font-medium text-gray-500 border-b-2 border-transparent hover:text-gray-700 tab-btn" onclick="switchTab('steps', this)">Steps</button>
                <button class="flex-1 pb-3 text-sm font-medium text-gray-500 border-b-2 border-transparent hover:text-gray-700 tab-btn" onclick="switchTab('nutrition', this)">Nutrition</button>
            </div>

            <div class="flex-1 overflow-y-auto px-6 pt-2 pb-10 no-scrollbar">
                
                <div id="tab-ingredients" class="tab-content block animate-fade-in">
                    <ul class="space-y-0 mb-6" id="ingredient-list">
                        <li class="flex items-center gap-3 py-3 border-b border-gray-100 cursor-pointer hover:bg-gray-50 px-1 -mx-1 transition-colors" onclick="toggleIngredient(this)">
                            <div class="w-5 h-5 rounded border border-gray-300 flex items-center justify-center text-white check-box transition-colors"><i class="fas fa-check text-[10px] hidden check-icon"></i></div>
                            <span class="text-gray-700 text-sm flex-1 ingredient-text transition-colors">All-purpose flour</span>
                            <span class="font-medium text-gray-900 text-sm ingredient-amount" data-base-amount="1" data-unit="cup">1 cup</span>
                        </li>
                        <li class="flex items-center gap-3 py-3 border-b border-gray-100 cursor-pointer hover:bg-gray-50 px-1 -mx-1 transition-colors" onclick="toggleIngredient(this)">
                            <div class="w-5 h-5 rounded border border-gray-300 flex items-center justify-center text-white check-box transition-colors"><i class="fas fa-check text-[10px] hidden check-icon"></i></div>
                            <span class="text-gray-700 text-sm flex-1 ingredient-text transition-colors">Milk</span>
                            <span class="font-medium text-gray-900 text-sm ingredient-amount" data-base-amount="0.75" data-unit="cup">0.75 cup</span>
                        </li>
                        <li class="flex items-center gap-3 py-3 border-b border-gray-100 cursor-pointer hover:bg-gray-50 px-1 -mx-1 transition-colors" onclick="toggleIngredient(this)">
                            <div class="w-5 h-5 rounded border border-gray-300 flex items-center justify-center text-white check-box transition-colors"><i class="fas fa-check text-[10px] hidden check-icon"></i></div>
                            <span class="text-gray-700 text-sm flex-1 ingredient-text transition-colors">Eggs</span>
                            <span class="font-medium text-gray-900 text-sm ingredient-amount" data-base-amount="1" data-unit="large">1 large</span>
                        </li>
                    </ul>
                    
                    <button class="w-full bg-gray-900 hover:bg-black text-white py-3.5 rounded-xl font-semibold shadow-sm transition-colors text-sm flex items-center justify-center gap-2 mb-6">
                        <i class="fas fa-plus"></i> Add Selected to Shopping List
                    </button>
                </div>

                <div id="tab-steps" class="tab-content hidden animate-fade-in">
                    <div class="space-y-6 pb-6">
                        <div class="flex gap-4">
                            <div class="w-7 h-7 rounded-full bg-gray-900 text-white flex items-center justify-center text-sm font-bold shrink-0 shadow-sm">1</div>
                            <div class="pt-0.5"><p class="text-sm text-gray-600 leading-relaxed">Whisk the flour, sugar, baking powder, and salt together in a large bowl.</p></div>
                        </div>
                        <div class="flex gap-4">
                            <div class="w-7 h-7 rounded-full bg-gray-900 text-white flex items-center justify-center text-sm font-bold shrink-0 shadow-sm">2</div>
                            <div class="pt-0.5"><p class="text-sm text-gray-600 leading-relaxed">Create a well in the center and add milk, egg, and melted butter. Mix until just combined.</p></div>
                        </div>
                    </div>
                </div>

                <div id="tab-nutrition" class="tab-content hidden animate-fade-in">
                    <div class="bg-gray-50 rounded-xl p-5 border border-gray-100 mb-6">
                        <h3 class="font-bold text-gray-900 border-b border-gray-200 pb-2 mb-2 text-lg">Nutrition Facts</h3>
                        <p class="text-xs text-gray-500 mb-4">Amount per serving</p>
                        <ul class="space-y-0 divide-y divide-gray-200">
                            <li class="flex justify-between py-2.5 font-bold"><span class="text-gray-900 text-sm">Calories</span><span class="text-gray-900 text-sm">320</span></li>
                            <li class="flex justify-between py-2.5"><span class="text-gray-800 text-sm font-medium">Total Fat</span><span class="font-medium text-gray-900 text-sm">12g</span></li>
                            <li class="flex justify-between py-2.5"><span class="text-gray-800 text-sm font-medium">Protein</span><span class="font-medium text-gray-900 text-sm">8g</span></li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
    </div>
    `;
}

export function setupRecipeDetail() {
    let currentServings = 2; 
    const defaultServings = 2; 

    window.switchTab = (tabId, clickedBtn) => {
        document.querySelectorAll('.tab-content').forEach(el => {
            el.classList.remove('block');
            el.classList.add('hidden');
        });
        
        const targetTab = document.getElementById(`tab-${tabId}`);
        targetTab.classList.remove('hidden');
        targetTab.classList.add('block');
        targetTab.parentElement.scrollTop = 0;

        document.querySelectorAll('.tab-btn').forEach(btn => {
            btn.classList.remove('text-gray-900', 'border-gray-900', 'font-semibold');
            btn.classList.add('text-gray-500', 'border-transparent', 'font-medium');
        });

        clickedBtn.classList.remove('text-gray-500', 'border-transparent', 'font-medium');
        clickedBtn.classList.add('text-gray-900', 'border-gray-900', 'font-semibold');
    };

    window.toggleIngredient = (element) => {
        element.classList.toggle('ingredient-active');
    };

    window.changeServings = (delta) => {
        const newServings = currentServings + delta;
        if (newServings < 1) return; 
        
        currentServings = newServings;
        document.getElementById('servings-count').innerText = currentServings;
        
        const ratio = currentServings / defaultServings;
        document.querySelectorAll('.ingredient-amount').forEach(el => {
            const baseAmount = parseFloat(el.getAttribute('data-base-amount'));
            const unit = el.getAttribute('data-unit');
            
            if (!isNaN(baseAmount)) {
                let newAmount = baseAmount * ratio;
                newAmount = Number.isInteger(newAmount) ? newAmount : parseFloat(newAmount.toFixed(2));
                el.innerText = `${newAmount} ${unit}`;
            }
        });
    };
}