{% extends "base.html" %}

{% block title %}Home - AI Recipe Generator{% endblock %}

{% block content %}
<div class="container mt-5">
    <!-- Hero Section -->
    <div class="hero-section text-center mb-5">
        <h1 class="display-4 mb-3">AI-Powered Recipe Generation</h1>
        <p class="lead text-muted mb-4">Generate creative recipes, search intelligently, and analyze nutrition with AI</p>
        <div class="d-flex justify-content-center gap-3">
            <a href="#generate-section" class="btn btn-primary btn-lg">Generate Recipe</a>
            <a href="#search-section" class="btn btn-outline-primary btn-lg">Search Recipes</a>
        </div>
    </div>

    <!-- Generate Recipe Section -->
    <section id="generate-section" class="card mb-5 shadow-sm">
        <div class="card-header bg-primary text-white">
            <h2 class="mb-0">🎨 Generate Recipe</h2>
        </div>
        <div class="card-body">
            <form id="generateForm">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label for="ingredients" class="form-label">Ingredients (comma-separated)</label>
                        <input type="text" class="form-control" id="ingredients" placeholder="e.g., chicken, garlic, tomato" required>
                    </div>
                    <div class="col-md-3">
                        <label for="mealType" class="form-label">Meal Type</label>
                        <select class="form-select" id="mealType">
                            <option value="">Any</option>
                            <option value="breakfast">Breakfast</option>
                            <option value="lunch">Lunch</option>
                            <option value="dinner">Dinner</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="wordCount" class="form-label">Word Count</label>
                        <input type="number" class="form-control" id="wordCount" value="150" min="50" max="500">
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">Generate Recipe</button>
            </form>

            <!-- Generate Result -->
            <div id="generateResult" class="mt-4" style="display: none;">
                <div id="recipeResult"></div>
                <div id="nutritionResult" class="mt-4"></div>
            </div>

            <!-- Loading Spinner -->
            <div id="generateLoading" class="spinner-border mt-4" style="display: none;" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
    </section>

    <!-- Search Recipes Section -->
    <section id="search-section" class="card mb-5 shadow-sm">
        <div class="card-header bg-success text-white">
            <h2 class="mb-0">🔍 Search Recipes</h2>
        </div>
        <div class="card-body">
            <form id="searchForm">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label for="searchIngredients" class="form-label">Ingredients</label>
                        <input type="text" class="form-control" id="searchIngredients" placeholder="e.g., chicken, garlic">
                    </div>
                    <div class="col-md-2">
                        <label for="searchMealType" class="form-label">Meal Type</label>
                        <select class="form-select" id="searchMealType">
                            <option value="">Any</option>
                            <option value="breakfast">Breakfast</option>
                            <option value="lunch">Lunch</option>
                            <option value="dinner">Dinner</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label for="searchTime" class="form-label">Max Time (min)</label>
                        <input type="number" class="form-control" id="searchTime" placeholder="60">
                    </div>
                    <div class="col-md-2">
                        <label for="searchDifficulty" class="form-label">Difficulty</label>
                        <select class="form-select" id="searchDifficulty">
                            <option value="">Any</option>
                            <option value="easy">Easy</option>
                            <option value="medium">Medium</option>
                            <option value="hard">Hard</option>
                        </select>
                    </div>
                </div>
                <button type="submit" class="btn btn-success">Search</button>
            </form>

            <!-- Search Results -->
            <div id="searchResults" class="mt-4" style="display: none;">
                <h4 id="searchResultCount"></h4>
                <div id="recipesList" class="row mt-3"></div>
            </div>

            <!-- Loading Spinner -->
            <div id="searchLoading" class="spinner-border mt-4" style="display: none;" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
    </section>

    <!-- Nutrition Analysis Section -->
    <section id="nutrition-section" class="card mb-5 shadow-sm">
        <div class="card-header bg-info text-white">
            <h2 class="mb-0">📊 Nutrition Analysis</h2>
        </div>
        <div class="card-body">
            <form id="nutritionForm">
                <div class="row mb-3">
                    <div class="col-md-8">
                        <label for="nutritionIngredients" class="form-label">Ingredients</label>
                        <input type="text" class="form-control" id="nutritionIngredients" 
                               placeholder="e.g., 100g chicken, 50ml olive oil, 2 tomatoes" required>
                    </div>
                    <div class="col-md-2">
                        <label for="servings" class="form-label">Servings</label>
                        <input type="number" class="form-control" id="servings" value="1" min="1">
                    </div>
                    <div class="col-md-2 d-flex align-items-end">
                        <button type="submit" class="btn btn-info w-100">Analyze</button>
                    </div>
                </div>
            </form>

            <!-- Nutrition Results -->
            <div id="nutritionResults" style="display: none;" class="mt-4">
                <div id="nutritionTable"></div>
            </div>

            <!-- Loading Spinner -->
            <div id="nutritionLoading" class="spinner-border mt-4" style="display: none;" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="row mb-5">
        <div class="col-md-4 mb-3">
            <div class="card h-100">
                <div class="card-body text-center">
                    <h5 class="card-title">🤖 AI Generation</h5>
                    <p class="card-text">Creates unique recipes using GPT-2 based on your ingredients</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-3">
            <div class="card h-100">
                <div class="card-body text-center">
                    <h5 class="card-title">📚 Smart Search</h5>
                    <p class="card-text">Search through thousands of recipes with intelligent filters</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 mb-3">
            <div class="card h-100">
                <div class="card-body text-center">
                    <h5 class="card-title">🥗 Nutrition Info</h5>
                    <p class="card-text">Get detailed nutrition analysis for any recipe combination</p>
                </div>
            </div>
        </div>
    </section>
</div>
{% endblock %}

{% block scripts %}
<script>
    // Generate Recipe Form
    document.getElementById('generateForm').addEventListener('submit', async (e) => {
        e.preventDefault();
        const ingredients = document.getElementById('ingredients').value.split(',').map(i => i.trim());
        const mealType = document.getElementById('mealType').value;
        const wordCount = parseInt(document.getElementById('wordCount').value);

        document.getElementById('generateLoading').style.display = 'block';
        document.getElementById('generateResult').style.display = 'none';

        try {
            const response = await fetch('/api/generate', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    ingredients: ingredients,
                    meal_type: mealType,
                    num_words: wordCount
                })
            });

            const data = await response.json();
            document.getElementById('generateLoading').style.display = 'none';

            if (data.success) {
                document.getElementById('recipeResult').innerHTML = `
                    <div class="alert alert-success">
                        <h4>Generated Recipe</h4>
                        <p>${data.recipe}</p>
                    </div>
                `;

                document.getElementById('nutritionResult').innerHTML = `
                    <div class="alert alert-info">
                        <h4>Nutrition Information</h4>
                        <pre>${data.nutrition_summary}</pre>
                    </div>
                `;

                document.getElementById('generateResult').style.display = 'block';
            } else {
                alert('Error: ' + data.error);
            }
        } catch (error) {
            document.getElementById('generateLoading').style.display = 'none';
            alert('Error: ' + error.message);
        }
    });

    // Search Recipes Form
    document.getElementById('searchForm').addEventListener('submit', async (e) => {
        e.preventDefault();
        const ingredients = document.getElementById('searchIngredients').value.split(',').map(i => i.trim()).filter(i => i);
        const mealType = document.getElementById('searchMealType').value;
        const maxTime = parseInt(document.getElementById('searchTime').value) || null;
        const difficulty = document.getElementById('searchDifficulty').value;

        document.getElementById('searchLoading').style.display = 'block';
        document.getElementById('searchResults').style.display = 'none';

        try {
            const response = await fetch('/api/search', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    ingredients: ingredients,
                    meal_type: mealType || null,
                    max_cooking_time: maxTime,
                    difficulty: difficulty || null
                })
            });

            const data = await response.json();
            document.getElementById('searchLoading').style.display = 'none';

            if (data.success) {
                document.getElementById('searchResultCount').textContent = `Found ${data.count} recipe(s)`;

                const recipesList = document.getElementById('recipesList');
                recipesList.innerHTML = '';

                data.recipes.forEach(recipe => {
                    recipesList.innerHTML += `
                        <div class="col-md-6 mb-3">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title">${recipe.title}</h5>
                                    <p class="card-text"><strong>Ingredients:</strong> ${recipe.ingredients.join(', ')}</p>
                                    <p class="card-text"><strong>Time:</strong> ${recipe.cooking_time} min | <strong>Difficulty:</strong> ${recipe.difficulty}</p>
                                    <p class="card-text">${recipe.instructions}</p>
                                </div>
                            </div>
                        </div>
                    `;
                });

                document.getElementById('searchResults').style.display = 'block';
            } else {
                alert('Error: ' + data.error);
            }
        } catch (error) {
            document.getElementById('searchLoading').style.display = 'none';
            alert('Error: ' + error.message);
        }
    });

    // Nutrition Analysis Form
    document.getElementById('nutritionForm').addEventListener('submit', async (e) => {
        e.preventDefault();
        const ingredients = document.getElementById('nutritionIngredients').value.split(',').map(i => i.trim());
        const servings = parseInt(document.getElementById('servings').value);

        document.getElementById('nutritionLoading').style.display = 'block';
        document.getElementById('nutritionResults').style.display = 'none';

        try {
            const response = await fetch('/api/nutrition', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    ingredients: ingredients,
                    servings: servings
                })
            });

            const data = await response.json();
            document.getElementById('nutritionLoading').style.display = 'none';

            if (data.success) {
                const perServing = data.nutrition.per_serving;
                document.getElementById('nutritionTable').innerHTML = `
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Nutrient</th>
                                <th>Per Serving</th>
                                <th>% Daily Value</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Calories</td>
                                <td>${perServing.calories} kcal</td>
                                <td>${data.daily_value_percentages.calories}%</td>
                            </tr>
                            <tr>
                                <td>Protein</td>
                                <td>${perServing.protein}g</td>
                                <td>${data.daily_value_percentages.protein}%</td>
                            </tr>
                            <tr>
                                <td>Fat</td>
                                <td>${perServing.fat}g</td>
                                <td>${data.daily_value_percentages.fat}%</td>
                            </tr>
                            <tr>
                                <td>Carbs</td>
                                <td>${perServing.carbs}g</td>
                                <td>${data.daily_value_percentages.carbs}%</td>
                            </tr>
                            <tr>
                                <td>Fiber</td>
                                <td>${perServing.fiber}g</td>
                                <td>${data.daily_value_percentages.fiber}%</td>
                            </tr>
                        </tbody>
                    </table>
                `;

                document.getElementById('nutritionResults').style.display = 'block';
            } else {
                alert('Error: ' + data.error);
            }
        } catch (error) {
            document.getElementById('nutritionLoading').style.display = 'none';
            alert('Error: ' + error.message);
        }
    });
</script>
{% endblock %}