{% extends "base.html" %}
{% block content %}
{% set mk = masked_keys|default({}) %}
{% set st = stats|default({}) %}

<!-- ============================================================
     PROFILE PAGE
     ============================================================ -->
<div class="container py-4">

    <!-- ── Profile Header ──────────────────────────────────── -->
    <div class="card shadow-sm mb-4">
        <div class="card-body">
            <div class="d-flex align-items-center flex-wrap">
                <!-- Avatar -->
                <div class="rounded-circle bg-success bg-gradient text-white d-flex align-items-center justify-content-center me-3 mb-2"
                     style="width:68px;height:68px;font-size:1.6rem;font-weight:700;flex-shrink:0;">
                    {{ (current_user.username|default('??'))[:2]|upper }}
                </div>
                <!-- Info -->
                <div class="flex-grow-1 mb-2">
                    <h3 class="mb-0 fw-bold">{{ current_user.username|default('User') }}</h3>
                    <div class="text-muted small">
                        {{ current_user.email|default('') }}
                        {% if current_user.created_at is defined and current_user.created_at %}
                            &middot; Member since {{ current_user.created_at.strftime('%B %Y') }}
                        {% endif %}
                        {% if current_user.zip_code|default('') %}
                            &middot; <i class="fas fa-map-marker-alt"></i> {{ current_user.zip_code }}
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- Stat pills -->
            <div class="d-flex flex-wrap gap-3 mt-3 pt-3 border-top">
                <div class="text-center px-2">
                    <div class="fw-bold text-danger fs-5">{{ st.get('favorites', 0) }}</div>
                    <div class="text-muted small">Favorites</div>
                </div>
                <div class="text-center px-2">
                    <div class="fw-bold text-primary fs-5">{{ st.get('collections', 0) }}</div>
                    <div class="text-muted small">Collections</div>
                </div>
                <div class="text-center px-2">
                    <div class="fw-bold text-warning fs-5">{{ st.get('ratings', 0) }}</div>
                    <div class="text-muted small">Ratings</div>
                </div>
                <div class="text-center px-2">
                    <div class="fw-bold text-success fs-5">{{ st.get('cooked', 0) }}</div>
                    <div class="text-muted small">Cooked</div>
                </div>
                <div class="text-center px-2">
                    <div class="fw-bold text-info fs-5">{{ st.get('meal_plans', 0) }}</div>
                    <div class="text-muted small">Meal Plans</div>
                </div>
                <div class="text-center px-2">
                    <div class="fw-bold text-secondary fs-5">{{ st.get('photos', 0) }}</div>
                    <div class="text-muted small">Photos</div>
                </div>
            </div>
        </div>
    </div>

    <!-- ── Tabs ────────────────────────────────────────────── -->
    <ul class="nav nav-tabs mb-4" id="profileTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="tab-profile" data-bs-toggle="tab"
                    data-bs-target="#pane-profile" type="button" role="tab">
                <i class="fas fa-user me-1"></i>Profile
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="tab-settings" data-bs-toggle="tab"
                    data-bs-target="#pane-settings" type="button" role="tab">
                <i class="fas fa-gear me-1"></i>Settings
            </button>
        </li>
    </ul>

    <div class="tab-content">

        <!-- ======================================================
             PROFILE TAB
             ====================================================== -->
        <div class="tab-pane fade show active" id="pane-profile" role="tabpanel">
            <div class="row g-4">

                <!-- LEFT COLUMN ─────────────────────────────── -->
                <div class="col-lg-8">

                    <!-- ★ Favorite Recipes ──────────────────── -->
                    <div class="card shadow-sm mb-4">
                        <div class="card-header bg-white fw-bold">
                            <i class="fas fa-heart text-danger me-2"></i>Favorite Recipes
                        </div>
                        <div class="card-body">
                            <div class="row g-2 mb-3">
                                <div class="col">
                                    <input type="text" class="form-control form-control-sm"
                                           id="favSearch" placeholder="Search favorites..."
                                           oninput="debounceFav()">
                                </div>
                                <div class="col-auto">
                                    <select class="form-select form-select-sm" id="favPerPage"
                                            onchange="loadFavorites(1)">
                                        <option value="10">10</option>
                                        <option value="25" selected>25</option>
                                        <option value="50">50</option>
                                        <option value="100">100</option>
                                        <option value="-1">All</option>
                                    </select>
                                </div>
                            </div>
                            <div id="favGrid" class="row g-2"></div>
                            <div id="favEmpty" class="text-muted text-center py-4" style="display:none;">
                                <i class="fas fa-heart fa-2x mb-2 opacity-25"></i>
                                <p class="mb-0">No favorite recipes yet</p>
                                <small>Heart a recipe to see it here!</small>
                            </div>
                            <nav id="favPag" class="mt-3"></nav>
                        </div>
                    </div>

                    <!-- ★ Recipe Collections ────────────────── -->
                    <div class="card shadow-sm mb-4">
                        <div class="card-header bg-white d-flex justify-content-between align-items-center">
                            <span class="fw-bold"><i class="fas fa-layer-group text-primary me-2"></i>My Collections</span>
                            <button class="btn btn-sm btn-outline-primary" type="button" onclick="openNewCollModal()">
                                <i class="fas fa-plus me-1"></i>New
                            </button>
                        </div>
                        <div class="card-body">
                            <div class="row g-2 mb-3">
                                <div class="col">
                                    <input type="text" class="form-control form-control-sm"
                                           id="collSearch" placeholder="Search collections..."
                                           oninput="debounceColl()">
                                </div>
                                <div class="col-auto">
                                    <select class="form-select form-select-sm" id="collPerPage"
                                            onchange="loadCollections(1)">
                                        <option value="10">10</option>
                                        <option value="25" selected>25</option>
                                        <option value="50">50</option>
                                        <option value="100">100</option>
                                        <option value="-1">All</option>
                                    </select>
                                </div>
                            </div>
                            <div id="collGrid" class="row g-2"></div>
                            <div id="collEmpty" class="text-muted text-center py-4" style="display:none;">
                                <i class="fas fa-folder-open fa-2x mb-2 opacity-25"></i>
                                <p class="mb-0">No collections yet</p>
                                <small>Organize your recipes into collections!</small>
                            </div>
                            <nav id="collPag" class="mt-3"></nav>
                        </div>
                    </div>

                    <!-- ★ Photo Gallery Strip ──────────────── -->
                    <div class="card shadow-sm mb-4">
                        <div class="card-header bg-white fw-bold">
                            <i class="fas fa-camera-retro text-success me-2"></i>My Photos
                        </div>
                        <div class="card-body p-3">
                            <div id="photoStrip" class="d-flex gap-2 overflow-auto pb-2"
                                 style="scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;"></div>
                            <div id="photoEmpty" class="text-muted text-center py-4" style="display:none;">
                                <i class="fas fa-images fa-2x mb-2 opacity-25"></i>
                                <p class="mb-0">No photos uploaded yet</p>
                            </div>
                        </div>
                    </div>

                    <!-- ★ Meal Plan History ────────────────── -->
                    <div class="card shadow-sm mb-4">
                        <div class="card-header bg-white d-flex align-items-center justify-content-between py-2">
                            <span class="fw-bold"><i class="fas fa-calendar-week text-success me-2"></i>Meal History</span>
                            <span id="mealHistoryCount" class="text-muted" style="font-size:.75rem"></span>
                        </div>
                        <div class="card-body p-0">
                            <div id="mealHistoryLoading" class="text-center py-4">
                                <div class="spinner-border spinner-border-sm text-success" role="status"></div>
                            </div>
                            <div id="mealHistoryEmpty" class="text-muted text-center py-5" style="display:none">
                                <i class="fas fa-calendar-check fa-2x mb-3 opacity-25"></i>
                                <p class="mb-1 fw-semibold">No meal history yet</p>
                                <small>Plan some meals to see your history here</small>
                            </div>
                            <div id="mealHistoryList" style="display:none"></div>
                            <div id="mealHistoryPag" class="d-flex justify-content-center gap-2 p-3" style="display:none!important"></div>
                        </div>
                    </div>

                    <style>
                    .mh-week{border-bottom:1px solid #f1f5f9;padding:.75rem 1rem;}
                    .mh-week:last-child{border-bottom:none;}
                    .mh-week-head{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;}
                    .mh-week-label{font-weight:600;font-size:.85rem;color:#1e293b;}
                    .mh-week-meta{display:flex;align-items:center;gap:.5rem;}
                    .mh-progress{height:5px;background:#e5e7eb;border-radius:999px;width:60px;overflow:hidden;display:inline-block;vertical-align:middle;}
                    .mh-progress-fill{height:100%;background:#16a34a;border-radius:999px;transition:width .3s;}
                    .mh-meals{margin-top:.5rem;display:none;}
                    .mh-meals.open{display:block;}
                    .mh-meal-row{display:flex;align-items:center;gap:.5rem;padding:.3rem 0;font-size:.78rem;border-bottom:1px solid #f8fafc;}
                    .mh-meal-row:last-child{border-bottom:none;}
                    .mh-meal-type{width:70px;font-weight:600;text-transform:capitalize;color:#6b7280;flex-shrink:0;}
                    .mh-meal-date{width:70px;color:#9ca3af;font-size:.7rem;flex-shrink:0;}
                    .mh-meal-recipes{flex:1;min-width:0;}
                    .mh-recipe-link{color:#1a7a4a;text-decoration:none;font-weight:500;}
                    .mh-recipe-link:hover{text-decoration:underline;}
                    .mh-cooked-badge{font-size:.62rem;background:#dcfce7;color:#16a34a;border-radius:4px;padding:1px 5px;flex-shrink:0;}
                    .mh-current-badge{font-size:.62rem;background:#dbeafe;color:#1d4ed8;border-radius:4px;padding:1px 5px;}
                    .mh-pag-btn{border:1px solid #e5e7eb;background:#fff;border-radius:6px;padding:.25rem .65rem;font-size:.75rem;cursor:pointer;}
                    .mh-pag-btn:disabled{opacity:.4;cursor:default;}
                    .mh-pag-btn.active{background:#1a7a4a;color:#fff;border-color:#1a7a4a;}
                    </style>

                    <script>
                    (function(){
                        var _mhPage = 1;
                        var _mhPages = 1;

                        function loadMealHistory(page) {
                            document.getElementById('mealHistoryLoading').style.display = 'block';
                            document.getElementById('mealHistoryList').style.display = 'none';
                            document.getElementById('mealHistoryPag').style.display = 'none';
                            fetch('/api/profile/meal-plans?page=' + page)
                            .then(function(r){ return r.json(); })
                            .then(function(d){
                                document.getElementById('mealHistoryLoading').style.display = 'none';
                                if(!d.weeks || d.weeks.length === 0){
                                    document.getElementById('mealHistoryEmpty').style.display = 'block';
                                    return;
                                }
                                _mhPage = d.page;
                                _mhPages = d.pages;
                                document.getElementById('mealHistoryCount').textContent =
                                    d.total + ' week' + (d.total !== 1 ? 's' : '') + ' of meals';
                                renderWeeks(d.weeks);
                                renderPagination(d.page, d.pages);
                            })
                            .catch(function(){
                                document.getElementById('mealHistoryLoading').style.display = 'none';
                                document.getElementById('mealHistoryEmpty').style.display = 'block';
                            });
                        }

                        function renderWeeks(weeks) {
                            var html = '';
                            weeks.forEach(function(wk, idx) {
                                var pct = wk.total_count > 0 ? Math.round(wk.cooked_count / wk.total_count * 100) : 0;
                                var badge = wk.is_current ? '<span class="mh-current-badge ms-1">This Week</span>' : '';
                                html += '<div class="mh-week">';
                                html += '<div class="mh-week-head" onclick="toggleMhWeek(' + idx + ')">';
                                html += '<div class="mh-week-label">' + wk.week_start + ' &ndash; ' + wk.week_end + badge + '</div>';
                                html += '<div class="mh-week-meta">';
                                html += '<span style="font-size:.7rem;color:#6b7280">' + wk.cooked_count + '/' + wk.total_count + ' cooked</span>';
                                html += '<div class="mh-progress"><div class="mh-progress-fill" style="width:' + pct + '%"></div></div>';
                                html += '<i class="fas fa-chevron-down text-muted" style="font-size:.65rem" id="mh-chevron-' + idx + '"></i>';
                                html += '</div></div>';

                                // Meals list - sorted by date then meal type order
                                var mtOrder = {breakfast:0, lunch:1, dinner:2, snack:3, unplanned:4};
                                var sorted = wk.meals.slice().sort(function(a,b){
                                    if(a.date_iso !== b.date_iso) return a.date_iso < b.date_iso ? -1 : 1;
                                    return (mtOrder[a.meal_type]||0) - (mtOrder[b.meal_type]||0);
                                });
                                html += '<div class="mh-meals" id="mh-meals-' + idx + '">';
                                sorted.forEach(function(meal){
                                    var recipeLinks = meal.recipes.map(function(r){
                                        return '<a href="' + r.url + '" class="mh-recipe-link">' + r.title + '</a>';
                                    }).join(', ') || '<span class="text-muted">No recipe</span>';
                                    var cookedBadge = meal.is_cooked ? '<span class="mh-cooked-badge">&#10003; Cooked</span>' : '';
                                    html += '<div class="mh-meal-row">';
                                    html += '<span class="mh-meal-date">' + meal.date + '</span>';
                                    html += '<span class="mh-meal-type">' + meal.meal_type + '</span>';
                                    html += '<span class="mh-meal-recipes">' + recipeLinks + '</span>';
                                    html += cookedBadge;
                                    html += '</div>';
                                });
                                html += '</div></div>';
                            });
                            var list = document.getElementById('mealHistoryList');
                            list.innerHTML = html;
                            list.style.display = 'block';

                            // Auto-expand current week
                            weeks.forEach(function(wk, idx){
                                if(wk.is_current) toggleMhWeek(idx);
                            });
                        }

                        function renderPagination(page, pages) {
                            if(pages <= 1) return;
                            var pag = document.getElementById('mealHistoryPag');
                            var html = '<button class="mh-pag-btn" onclick="loadMealHistory(' + (page-1) + ')"' + (page<=1?' disabled':'') + '>&#8249;</button>';
                            for(var p=1; p<=pages; p++){
                                html += '<button class="mh-pag-btn' + (p===page?' active':'') + '" onclick="loadMealHistory(' + p + ')">' + p + '</button>';
                            }
                            html += '<button class="mh-pag-btn" onclick="loadMealHistory(' + (page+1) + ')"' + (page>=pages?' disabled':'') + '>&#8250;</button>';
                            pag.innerHTML = html;
                            pag.style.cssText = 'display:flex!important;justify-content:center;gap:.35rem;padding:.75rem;';
                        }

                        window.toggleMhWeek = function(idx) {
                            var meals = document.getElementById('mh-meals-' + idx);
                            var chevron = document.getElementById('mh-chevron-' + idx);
                            if(meals) meals.classList.toggle('open');
                            if(chevron) chevron.style.transform = meals.classList.contains('open') ? 'rotate(180deg)' : '';
                        };

                        window.loadMealHistory = loadMealHistory;
                        loadMealHistory(1);
                    })();
                    </script>

                </div><!-- /col-lg-8 -->

                <!-- RIGHT COLUMN ────────────────────────────── -->
                <div class="col-lg-4">

                    <!-- Recently Rated -->
                    <div class="card shadow-sm mb-4">
                        <div class="card-header bg-white fw-bold py-2">
                            <i class="fas fa-star text-warning me-2"></i>Recently Rated
                        </div>
                        <div class="list-group list-group-flush" id="recentRated">
                            <div class="list-group-item text-muted small text-center py-3">Loading…</div>
                        </div>
                    </div>

                    <!-- Recently Favorited -->
                    <div class="card shadow-sm mb-4">
                        <div class="card-header bg-white fw-bold py-2">
                            <i class="fas fa-heart text-danger me-2"></i>Recently Favorited
                        </div>
                        <div class="list-group list-group-flush" id="recentFavorited">
                            <div class="list-group-item text-muted small text-center py-3">Loading…</div>
                        </div>
                    </div>

                    <!-- Recently Cooked -->
                    <div class="card shadow-sm mb-4">
                        <div class="card-header bg-white fw-bold py-2">
                            <i class="fas fa-utensils text-success me-2"></i>Recently Cooked
                        </div>
                        <div class="list-group list-group-flush" id="recentCooked">
                            <div class="list-group-item text-muted small text-center py-3">Loading…</div>
                        </div>
                    </div>

                </div><!-- /col-lg-4 -->
            </div><!-- /row -->
        </div><!-- /pane-profile -->

        <!-- ======================================================
             SETTINGS TAB
             ====================================================== -->
        <div class="tab-pane fade" id="pane-settings" role="tabpanel">
            <div class="row justify-content-center">
                <div class="col-lg-8">

                    <form method="POST" action="{{ url_for('profile_settings') }}" id="settingsForm">

                        <!-- Profile Info -->
                        <div class="card shadow-sm mb-4">
                            <div class="card-header bg-white fw-bold">
                                <i class="fas fa-id-card me-2 text-muted"></i>Profile
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label for="zip_code" class="form-label">Zip Code</label>
                                    <input type="text" class="form-control" id="zip_code" name="zip_code"
                                           value="{{ current_user.zip_code|default('', true) }}"
                                           placeholder="e.g. 90210" maxlength="20">
                                    <div class="form-text">Used for local grocery pricing and store suggestions.</div>
                                </div>
                                <div class="mb-3">
                                    <label for="timezone" class="form-label">Timezone</label>
                                    <select class="form-select" id="timezone" name="timezone">
                                        {% set tz_list = [
                                            ('America/New_York', 'Eastern Time (ET)'),
                                            ('America/Chicago', 'Central Time (CT)'),
                                            ('America/Denver', 'Mountain Time (MT)'),
                                            ('America/Los_Angeles', 'Pacific Time (PT)'),
                                            ('America/Anchorage', 'Alaska Time (AKT)'),
                                            ('Pacific/Honolulu', 'Hawaii Time (HT)'),
                                            ('America/Phoenix', 'Arizona (no DST)'),
                                            ('Europe/London', 'London (GMT/BST)'),
                                            ('Europe/Paris', 'Paris (CET/CEST)'),
                                            ('Europe/Berlin', 'Berlin (CET/CEST)'),
                                            ('Asia/Tokyo', 'Tokyo (JST)'),
                                            ('Asia/Shanghai', 'Shanghai (CST)'),
                                            ('Asia/Dubai', 'Dubai (GST)'),
                                            ('Australia/Sydney', 'Sydney (AEST/AEDT)'),
                                            ('Pacific/Auckland', 'Auckland (NZST/NZDT)'),
                                        ] %}
                                        {% for tz_val, tz_label in tz_list %}
                                        <option value="{{ tz_val }}" {{ 'selected' if current_user.timezone == tz_val }}>{{ tz_label }}</option>
                                        {% endfor %}
                                    </select>
                                    <div class="form-text">Used for Today's Meals and meal planning accuracy.</div>
                                </div>
                            </div>
                        </div>

                        <!-- AI API Keys -->
                        <div class="card shadow-sm mb-4">
                            <div class="card-header bg-white fw-bold">
                                <i class="fas fa-robot me-2 text-muted"></i>AI API Keys
                            </div>
                            <div class="card-body">
                                <p class="text-muted small mb-3">
                                    Keys are encrypted before storage. Leave blank to keep current key. You only need one provider.
                                </p>

                                <div class="mb-4">
                                    <label for="preferred_ai_provider" class="form-label fw-semibold">Preferred AI Provider</label>
                                    <select class="form-select" id="preferred_ai_provider" name="preferred_ai_provider">
                                        <option value="claude" {{ 'selected' if current_user.preferred_ai_provider|default('claude') == 'claude' }}>Claude (Anthropic)</option>
                                        <option value="openai" {{ 'selected' if current_user.preferred_ai_provider|default('claude') == 'openai' }}>GPT (OpenAI)</option>
                                        <option value="gemini" {{ 'selected' if current_user.preferred_ai_provider|default('claude') == 'gemini' }}>Gemini (Google)</option>
                                    </select>
                                </div>

                                {% for prov, label, hint in [
                                    ('claude', 'Claude API Key', 'sk-ant-api03-...'),
                                    ('openai', 'OpenAI API Key', 'sk-...'),
                                    ('gemini', 'Gemini API Key', 'AI...')
                                ] %}
                                <div class="mb-3">
                                    <label for="api_key_{{ prov }}" class="form-label">{{ label }}</label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fas fa-key"></i></span>
                                        <input type="password" class="form-control"
                                               id="api_key_{{ prov }}" name="api_key_{{ prov }}"
                                               value=""
                                               placeholder="{{ mk.get(prov, hint) }}">
                                        <button class="btn btn-outline-secondary" type="button"
                                                onclick="toggleKey('api_key_{{ prov }}', this)">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        {% if mk.get(prov) %}
                                        <button class="btn btn-outline-danger" type="button"
                                                onclick="removeKey('api_key_{{ prov }}')" title="Remove key">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                        {% endif %}
                                    </div>
                                    <div class="form-text" id="status_api_key_{{ prov }}">
                                        {% if mk.get(prov) %}
                                        <span class="text-success"><i class="fas fa-check-circle me-1"></i>Saved: {{ mk[prov] }} — leave blank to keep</span>
                                        {% else %}
                                        <span class="text-muted">No key configured</span>
                                        {% endif %}
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>

                        <!-- Change Password -->
                        <div class="card shadow-sm mb-4">
                            <div class="card-header bg-white fw-bold">
                                <i class="fas fa-lock me-2 text-muted"></i>Change Password
                            </div>
                            <div class="card-body">
                                <p class="text-muted small mb-3">Leave blank to keep your current password.</p>
                                <div class="mb-3">
                                    <label for="new_password" class="form-label">New Password</label>
                                    <input type="password" class="form-control" id="new_password"
                                           name="new_password" placeholder="Min 6 characters">
                                </div>
                                <div class="mb-3">
                                    <label for="confirm_password" class="form-label">Confirm New Password</label>
                                    <input type="password" class="form-control" id="confirm_password"
                                           name="confirm_password" placeholder="Re-enter new password">
                                </div>
                            </div>
                        </div>

                        <div class="d-grid mb-5">
                            <button type="submit" class="btn btn-success btn-lg">
                                <i class="fas fa-check me-2"></i>Save Settings
                            </button>
                        </div>

                    </form>
                </div>
            </div>
        </div><!-- /pane-settings -->

    </div><!-- /tab-content -->
</div><!-- /container -->

<!-- ── Photo Lightbox Modal ────────────────────────────────── -->
<div class="modal fade" id="photoModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content bg-dark border-0">
            <div class="modal-header border-0 pb-0">
                <span class="text-white small" id="photoCaption"></span>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body text-center p-2">
                <img id="photoModalImg" src="" class="img-fluid rounded" style="max-height:75vh;">
            </div>
        </div>
    </div>
</div>

<!-- ── New Collection Modal ────────────────────────────────── -->
<div class="modal fade" id="newCollModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-folder-plus me-2"></i>New Collection</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">Name</label>
                    <input type="text" class="form-control" id="newCollName" placeholder="e.g. Weeknight Dinners" maxlength="100">
                </div>
                <div class="mb-3">
                    <label class="form-label">Description <span class="text-muted">(optional)</span></label>
                    <textarea class="form-control" id="newCollDesc" rows="2" maxlength="300"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button class="btn btn-primary" onclick="createCollection()">
                    <i class="fas fa-plus me-1"></i>Create
                </button>
            </div>
        </div>
    </div>
</div>

<!-- ── Confirm Remove Key Modal ────────────────────────────── -->
<div class="modal fade" id="confirmModal" tabindex="-1">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body text-center py-4">
                <i class="fas fa-exclamation-triangle text-warning fa-2x mb-3"></i>
                <p class="mb-0" id="confirmMsg">Are you sure?</p>
            </div>
            <div class="modal-footer justify-content-center border-0 pt-0">
                <button class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                <button class="btn btn-danger btn-sm" id="confirmYes">Remove</button>
            </div>
        </div>
    </div>
</div>


<!-- ============================================================
     JAVASCRIPT
     ============================================================ -->
<script>
document.addEventListener('DOMContentLoaded', function () {
    // ── Tab hash routing ──────────────────────────
    function activateHash() {
        const h = window.location.hash.replace('#', '');
        if (h === 'settings') {
            const tab = document.getElementById('tab-settings');
            if (tab) new bootstrap.Tab(tab).show();
        }
    }
    activateHash();
    window.addEventListener('hashchange', activateHash);

    document.querySelectorAll('#profileTabs button').forEach(btn => {
        btn.addEventListener('shown.bs.tab', function (e) {
            const id = e.target.getAttribute('data-bs-target').replace('#pane-', '');
            history.replaceState(null, '', '#' + id);
        });
    });

    // ── Initial data loads ────────────────────────
    loadFavorites(1);
    loadCollections(1);
    loadPhotos();
    loadRecent();
    loadMealPlans(1);
});

// ── Helpers ───────────────────────────────────────
function esc(s) {
    const d = document.createElement('div');
    d.textContent = s || '';
    return d.innerHTML;
}

function timeAgo(dateStr) {
    if (!dateStr) return '';
    return dateStr; // already formatted server-side
}

function recipeUrl(id) {
    return '/recipe/' + id;
}

// ── Pagination renderer ───────────────────────────
function renderPag(containerId, data, loadFn) {
    const el = document.getElementById(containerId);
    if (!el || data.pages <= 1) { if (el) el.innerHTML = ''; return; }

    let html = '<ul class="pagination pagination-sm justify-content-center mb-0">';

    // Prev
    html += '<li class="page-item ' + (data.page <= 1 ? 'disabled' : '') + '">';
    html += '<a class="page-link" href="#" onclick="event.preventDefault();' + loadFn + '(' + (data.page - 1) + ')">&laquo;</a></li>';

    // Pages (show max 7)
    let start = Math.max(1, data.page - 3);
    let end = Math.min(data.pages, start + 6);
    start = Math.max(1, end - 6);

    for (let i = start; i <= end; i++) {
        html += '<li class="page-item ' + (i === data.page ? 'active' : '') + '">';
        html += '<a class="page-link" href="#" onclick="event.preventDefault();' + loadFn + '(' + i + ')">' + i + '</a></li>';
    }

    // Next
    html += '<li class="page-item ' + (data.page >= data.pages ? 'disabled' : '') + '">';
    html += '<a class="page-link" href="#" onclick="event.preventDefault();' + loadFn + '(' + (data.page + 1) + ')">&raquo;</a></li>';

    html += '</ul>';
    html += '<div class="text-muted small text-center mt-1">Showing ' +
            ((data.page-1)*data.per_page+1) + '–' + Math.min(data.page*data.per_page, data.total) +
            ' of ' + data.total + '</div>';

    el.innerHTML = html;
}

// ── Debounce helpers ──────────────────────────────
let _favTimer, _collTimer;
function debounceFav()  { clearTimeout(_favTimer);  _favTimer  = setTimeout(() => loadFavorites(1),  300); }
function debounceColl() { clearTimeout(_collTimer); _collTimer = setTimeout(() => loadCollections(1), 300); }


// ==================================================================
// FAVORITES
// ==================================================================
function loadFavorites(page) {
    const search = document.getElementById('favSearch').value.trim();
    const pp = document.getElementById('favPerPage').value;
    const url = '/api/profile/favorites?page=' + page + '&per_page=' + pp + '&search=' + encodeURIComponent(search);

    fetch(url).then(r => r.json()).then(data => {
        const grid = document.getElementById('favGrid');
        const empty = document.getElementById('favEmpty');

        if (!data.items || data.items.length === 0) {
            grid.innerHTML = '';
            empty.style.display = 'block';
            document.getElementById('favPag').innerHTML = '';
            return;
        }
        empty.style.display = 'none';

        grid.innerHTML = data.items.map(f => {
            const r = f.recipe || {};
            const img = r.image_url
                ? '<img src="' + esc(r.image_url) + '" class="w-100 h-100 rounded-top" style="object-fit:cover;">'
                : '<div class="w-100 h-100 bg-light d-flex align-items-center justify-content-center rounded-top"><i class="fas fa-utensils text-muted fa-lg"></i></div>';
            return '<div class="col-6 col-md-4 col-xl-3">' +
                '<div class="card h-100 border">' +
                '<div style="height:110px;overflow:hidden;">' + img + '</div>' +
                '<div class="card-body p-2">' +
                '<a href="' + recipeUrl(r.id) + '" class="text-decoration-none stretched-link">' +
                '<div class="fw-semibold small text-truncate" title="' + esc(r.title) + '">' + esc(r.title) + '</div></a>' +
                '<div class="text-muted" style="font-size:.7rem;">' + esc(f.created_at) + '</div>' +
                '</div></div></div>';
        }).join('');

        renderPag('favPag', data, 'loadFavorites');
    }).catch(() => {
        document.getElementById('favGrid').innerHTML = '';
        document.getElementById('favEmpty').style.display = 'block';
    });
}


// ==================================================================
// COLLECTIONS
// ==================================================================
function loadCollections(page) {
    const search = document.getElementById('collSearch').value.trim();
    const pp = document.getElementById('collPerPage').value;
    const url = '/api/profile/collections?page=' + page + '&per_page=' + pp + '&search=' + encodeURIComponent(search);

    fetch(url).then(r => r.json()).then(data => {
        const grid = document.getElementById('collGrid');
        const empty = document.getElementById('collEmpty');

        if (!data.items || data.items.length === 0) {
            grid.innerHTML = '';
            empty.style.display = 'block';
            document.getElementById('collPag').innerHTML = '';
            return;
        }
        empty.style.display = 'none';

        grid.innerHTML = data.items.map(c => {
            const colors = ['primary','success','danger','warning','info','secondary'];
            const color = colors[c.id % colors.length];
            return '<div class="col-6 col-md-4">' +
                '<div class="card h-100 border">' +
                '<div class="bg-' + color + ' bg-opacity-10 d-flex align-items-center justify-content-center rounded-top" style="height:90px;">' +
                '<i class="fas fa-book-open text-' + color + ' fa-2x"></i></div>' +
                '<div class="card-body p-2">' +
                '<div class="fw-semibold small text-truncate">' + esc(c.name) + '</div>' +
                '<div class="text-muted" style="font-size:.7rem;">' + c.recipe_count + ' recipe' + (c.recipe_count !== 1 ? 's' : '') + '</div>' +
                '</div></div></div>';
        }).join('');

        renderPag('collPag', data, 'loadCollections');
    }).catch(() => {
        document.getElementById('collGrid').innerHTML = '';
        document.getElementById('collEmpty').style.display = 'block';
    });
}

function openNewCollModal() {
    document.getElementById('newCollName').value = '';
    document.getElementById('newCollDesc').value = '';
    new bootstrap.Modal(document.getElementById('newCollModal')).show();
}

function createCollection() {
    const name = document.getElementById('newCollName').value.trim();
    const desc = document.getElementById('newCollDesc').value.trim();
    if (!name) { document.getElementById('newCollName').classList.add('is-invalid'); return; }

    fetch('/api/profile/collections', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({name: name, description: desc})
    }).then(r => {
        if (!r.ok) throw new Error();
        return r.json();
    }).then(() => {
        bootstrap.Modal.getInstance(document.getElementById('newCollModal')).hide();
        loadCollections(1);
    }).catch(() => {
        document.getElementById('newCollName').classList.add('is-invalid');
    });
}


// ==================================================================
// PHOTOS
// ==================================================================
function loadPhotos() {
    fetch('/api/profile/photos?limit=30').then(r => r.json()).then(data => {
        const strip = document.getElementById('photoStrip');
        const empty = document.getElementById('photoEmpty');

        if (!data.items || data.items.length === 0) {
            strip.innerHTML = '';
            empty.style.display = 'block';
            return;
        }
        empty.style.display = 'none';

        strip.innerHTML = data.items.map(p =>
            '<div class="flex-shrink-0" style="width:120px;height:120px;scroll-snap-align:start;cursor:pointer;" ' +
            'onclick="openPhoto(\'' + esc(p.image_url) + '\',\'' + esc(p.caption || '') + '\')">' +
            '<img src="' + esc(p.image_url) + '" class="rounded w-100 h-100" style="object-fit:cover;" loading="lazy">' +
            '</div>'
        ).join('');
    }).catch(() => {
        document.getElementById('photoStrip').innerHTML = '';
        document.getElementById('photoEmpty').style.display = 'block';
    });
}

function openPhoto(url, caption) {
    document.getElementById('photoModalImg').src = url;
    document.getElementById('photoCaption').textContent = caption;
    new bootstrap.Modal(document.getElementById('photoModal')).show();
}


// ==================================================================
// RECENT ACTIVITY (right column)
// ==================================================================
function loadRecent() {
    fetch('/api/profile/recent').then(r => r.json()).then(data => {
        renderRecentList('recentRated', data.rated || [], 'star', function(item) {
            return '<span class="badge bg-warning text-dark">' + '★'.repeat(item.rating) + '</span>';
        });
        renderRecentList('recentFavorited', data.favorited || [], 'heart', function() {
            return '<i class="fas fa-heart text-danger"></i>';
        });
        renderRecentList('recentCooked', data.cooked || [], 'utensils', function() {
            return '<i class="fas fa-check-circle text-success"></i>';
        });
    }).catch(() => {
        ['recentRated','recentFavorited','recentCooked'].forEach(id => {
            document.getElementById(id).innerHTML =
                '<div class="list-group-item text-muted small text-center py-3">—</div>';
        });
    });
}

function renderRecentList(containerId, items, icon, badgeFn) {
    const el = document.getElementById(containerId);
    if (!items.length) {
        el.innerHTML = '<div class="list-group-item text-muted small text-center py-3">None yet</div>';
        return;
    }
    el.innerHTML = items.map(item => {
        const r = item.recipe || {};
        return '<a href="' + recipeUrl(r.id) + '" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center py-2">' +
            '<div class="text-truncate me-2">' +
            '<div class="small fw-semibold text-truncate">' + esc(r.title) + '</div>' +
            '<div class="text-muted" style="font-size:.7rem;">' + esc(item.date) + '</div>' +
            '</div>' +
            '<div class="flex-shrink-0">' + badgeFn(item) + '</div>' +
            '</a>';
    }).join('');
}


// ==================================================================
// MEAL PLAN HISTORY
// ==================================================================
function loadMealPlans(page) {
    fetch('/api/profile/meal-plans?page=' + page + '&per_page=10').then(r => r.json()).then(data => {
        const list = document.getElementById('mealList');
        const empty = document.getElementById('mealEmpty');

        if (!data.items || data.items.length === 0) {
            list.innerHTML = '';
            empty.style.display = 'block';
            document.getElementById('mealPag').innerHTML = '';
            return;
        }
        empty.style.display = 'none';

        list.innerHTML = data.items.map(mp =>
            '<div class="border rounded p-3 mb-2 d-flex justify-content-between align-items-center">' +
            '<div>' +
            '<div class="fw-semibold">' + esc(mp.title) + '</div>' +
            '<div class="text-muted small">' + esc(mp.start_date) + ' — ' + esc(mp.end_date) +
            ' &middot; ' + mp.meal_count + ' meal' + (mp.meal_count !== 1 ? 's' : '') + '</div>' +
            '</div>' +
            '<a href="/meal-plan/' + mp.id + '" class="btn btn-sm btn-outline-info"><i class="fas fa-eye me-1"></i>View</a>' +
            '</div>'
        ).join('');

        renderPag('mealPag', data, 'loadMealPlans');
    }).catch(() => {
        document.getElementById('mealList').innerHTML = '';
        document.getElementById('mealEmpty').style.display = 'block';
    });
}


// ==================================================================
// SETTINGS TAB HELPERS
// ==================================================================
function toggleKey(fieldId, btn) {
    const input = document.getElementById(fieldId);
    const icon = btn.querySelector('i');
    if (input.type === 'password') {
        input.type = 'text';
        icon.classList.replace('fa-eye', 'fa-eye-slash');
    } else {
        input.type = 'password';
        icon.classList.replace('fa-eye-slash', 'fa-eye');
    }
}

function removeKey(fieldId) {
    const modal = new bootstrap.Modal(document.getElementById('confirmModal'));
    document.getElementById('confirmMsg').textContent = 'Remove this API key?';
    document.getElementById('confirmYes').onclick = function () {
        document.getElementById(fieldId).value = 'REMOVE';
        const status = document.getElementById('status_' + fieldId);
        if (status) {
            status.innerHTML = '<span class="text-warning"><i class="fas fa-exclamation-triangle me-1"></i>Key will be removed on save</span>';
        }
        modal.hide();
    };
    modal.show();
}
</script>
{% endblock %}