%# /templates/meals.html.ep

% layout 'default';
% title icon('meals') . ' Meal Planner';

<% content_for head => begin %>
    <link rel="stylesheet" href="/css/meals.css">
    <script>
        // Initial state from server for fast first-paint
        let mealVault = <%== Mojo::JSON::to_json($vault) %>;
        let initialPlan = <%== Mojo::JSON::to_json($plan) %>;
        const currentUserId = <%= current_user_id() %>;
        const isAdmin = <%= is_admin() ? 'true' : 'false' %>;
    </script>
    <script src="/js/meals.js"></script>
<% end %>

<div class="meals-container">
    <div class="header-bar">
        <h1><%= icon('meals') %> <span>Meal Planner</span></h1>
        <div class="header-meta">
            % if (is_admin) {
                <button class="btn-primary" onclick="openAddEditMealModal()"><%= icon('add') %> Add</button>
                <button class="btn-secondary" onclick="openManageVaultModal()"><%= icon('settings') %> Manage</button>
            % }
        </div>
    </div>

    <%# --- ROLLING TIMELINE (Populated by JS) --- %>
    <div id="meals-timeline" class="meals-timeline">
        <div class="ereceipt-loading">
            <span class="ereceipt-loading-icon"><%= icon('ai') %></span>
            <p>Loading meal plan...</p>
        </div>
    </div>
</div>

<%# --- MODAL: SUGGEST MEAL --- %>
<div id="suggestModal" class="modal-overlay" style="display: none;">
    <div class="modal-content">
        <div class="modal-header">
            <h3><%= icon('add') %> Suggest Meal</h3>
            <span class="close-btn" onclick="closeSuggestModal()">&times;</span>
        </div>
        <div class="modal-body">
            <p class="modal-sub">Suggesting for <strong id="suggestDateLabel"></strong></p>
            <div class="form-group">
                <label>Meal Name</label>
                <div class="meal-input-wrapper">
                    <input type="text" id="mealInput" class="game-input" placeholder="Type a meal or pick from list..." autocomplete="off">
                    <div id="mealDropdown" class="meal-dropdown" style="display:none;"></div>
                </div>
            </div>
        </div>
        <div class="modal-actions" style="justify-content: center !important;">
            <input type="hidden" id="activePlanId">
            <button class="btn-primary" onclick="submitSuggestion()"><%= icon('save') %> Submit</button>
        </div>
    </div>
</div>

<%# --- MODAL: EDIT SUGGESTION --- %>
<div id="editSuggestionModal" class="modal-overlay" style="display: none;">
    <div class="modal-content">
        <div class="modal-header">
            <h3><%= icon('edit') %> Edit Suggestion</h3>
            <span class="close-btn" onclick="closeEditSuggestionModal()">&times;</span>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label>Meal Name</label>
                <div class="meal-input-wrapper">
                    <input type="text" id="editMealInput" class="game-input" placeholder="Type a meal or pick from list..." autocomplete="off">
                    <div id="editMealDropdown" class="meal-dropdown" style="display:none;"></div>
                </div>
            </div>
        </div>
        <div class="modal-actions" style="justify-content: center !important;">
            <input type="hidden" id="editSuggestionId">
            <button class="btn-primary" onclick="submitEditSuggestion()"><%= icon('save') %> Save</button>
        </div>
    </div>
</div>

<%# --- MODAL: DELETE SUGGESTION CONFIRMATION --- %>
<div id="deleteConfirmModal" class="delete-modal-overlay" style="display: none;">
    <div class="delete-modal-content">
        <div class="delete-modal-header">
            <h3><%= icon('delete') %> Remove Suggestion</h3>
            <span class="delete-modal-close" onclick="closeDeleteSuggestionModal()">&times;</span>
        </div>
        <div class="delete-modal-body">
            <p>Are you sure you want to remove "<strong id="deleteSuggestionName"></strong>"?</p>
        </div>
        <div class="delete-modal-actions" style="justify-content: center !important;">
            <input type="hidden" id="deleteSuggestionId">
            <button class="btn-danger-confirm" onclick="confirmDeleteSuggestion()"><%= icon('delete') %> Remove</button>
        </div>
    </div>
</div>

<%# --- MODAL: ADMIN BLACKOUT --- %>
<div id="blackoutModal" class="modal-overlay" style="display: none;">
    <div class="modal-content">
        <div class="modal-header">
            <h3><%= icon('cancel') %> Blackout Day</h3>
            <span class="close-btn" onclick="closeBlackoutModal()">&times;</span>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label>Reason</label>
                <select id="blackoutReason" class="game-input">
                    <option value="Eating Out">🍕 Eating Out</option>
                    <option value="Family Event">🎉 Family Event</option>
                    <option value="Takeout Night">🥡 Takeout Night</option>
                    <option value="Leftovers">🍲 Leftovers</option>
                </select>
            </div>
        </div>
    </div>
</div>

<!-- Manage Meals Modal (Admin) -->
<div id="manageVaultModal" class="modal-overlay" style="display: none;">
    <div class="modal-content" style="max-width: 450px; width: 95%;">
        <div class="modal-header">
            <h3><%= icon('settings') %> Manage Meals</h3>
            <span class="close-btn" onclick="closeManageVaultModal()">&times;</span>
        </div>
        <div class="modal-body">
            <div class="table-responsive">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Meal Name</th>
                            <th style="width: 80px; text-align: center;">Actions</th>
                        </tr>
                    </thead>
                    <tbody id="vault-table-body">
                        <%# Populated by JS %>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<%# --- MODAL: ADD/EDIT MEAL IN VAULT --- %>
<div id="addEditMealModal" class="modal-overlay" style="display: none;">
    <div class="modal-content" style="z-index: 10001;">
        <div class="modal-header">
            <h3 id="manageMealModalTitle"><%= icon('add') %> Add Meal</h3>
            <span class="close-btn" onclick="closeAddEditMealModal()">&times;</span>
        </div>
        <div class="modal-body">
            <input type="hidden" id="manageMealId">
            <div class="form-group">
                <label>Meal Name</label>
                <div class="meal-input-wrapper">
                    <input type="text" id="manageMealName" class="game-input" placeholder="e.g. Tacos" autocomplete="off">
                    <div id="manageMealDropdown" class="meal-dropdown" style="display:none;"></div>
                </div>
            </div>
        </div>
        <div class="modal-actions" style="justify-content: center !important;">
            <button class="btn-primary" onclick="submitManageMeal()"><%= icon('save') %> Save</button>
        </div>
    </div>
</div>

<%# --- MODAL: DELETE MEAL FROM VAULT --- %>
<div id="manageDeleteConfirmModal" class="delete-modal-overlay" style="display: none;">
    <div class="delete-modal-content" style="z-index: 10001;">
        <div class="delete-modal-header">
            <h3><%= icon('delete') %> Remove from Vault</h3>
            <span class="delete-modal-close" onclick="closeManageDeleteModal()">&times;</span>
        </div>
        <div class="delete-modal-body">
            <p>Are you sure you want to permanently remove "<strong id="manageDeleteMealName"></strong>" from the vault?</p>
        </div>
        <div class="delete-modal-actions" style="justify-content: center !important;">
            <input type="hidden" id="manageDeleteMealId">
            <button class="btn-danger-confirm" onclick="confirmManageDelete()"><%= icon('delete') %> Delete</button>
        </div>
    </div>
</div>