{% extends "base.html" %}

{% block content %}
<div id="status-banner-container">
    {% include "partials/status_banner.html" %}
</div>

<div class="grid" style="grid-template-columns: 300px 1fr; gap: 2rem; align-items: start; width: 100%; max-width: 100%;">
    <div class="sidebar" style="background: var(--bg-sidebar); border: 2px solid var(--border-color); padding: 1rem; box-shadow: var(--card-shadow); border-radius: var(--border-radius); width: 300px; flex-shrink: 0;">
        <h4 style="margin-top: 0; background: var(--border-color); color: var(--card-bg); padding: 0.25rem; font-size: 0.8rem; text-transform: uppercase; font-weight: bold; text-align: center;">Control Panel</h4>

        <form hx-post="/generate" hx-target="#card-list" hx-indicator="#loading, #card-list" hx-swap="none">
            <div id="duplicate-alerts"></div>
            
            <fieldset style="border: 1px solid var(--border-color); padding: 0.75rem; margin-bottom: 1rem; background: var(--card-bg); border-radius: var(--border-radius);">
                <legend style="font-weight: bold; background: var(--bg-page); color: var(--text-main); border: 1px solid var(--border-color); padding: 0 0.5rem; font-size: 0.75rem;">INPUT SOURCE</legend>
                <label style="margin-bottom: 0.4rem; cursor: pointer;">
                    <input type="radio" name="input_source" value="chatgpt" {% if input_source == 'chatgpt' or not input_source %}checked{% endif %}>
                    AI Generation (LLM)
                </label>
                <label style="margin-bottom: 0; cursor: pointer;">
                    <input type="radio" name="input_source" value="manual" {% if input_source == 'manual' %}checked{% endif %}>
                    Manual (YAML)
                </label>
            </fieldset>

            <label style="display: flex; align-items: center; gap: 0.5rem; font-weight: bold; margin-bottom: 1rem; color: var(--text-main); font-size: 0.8rem;">
                <input type="checkbox" name="enable_images" role="switch" {% if enable_images %}checked{% endif %} onchange="document.getElementById('photo-source-group').style.display = this.checked ? 'block' : 'none'">
                ENABLE IMAGES
            </label>

            <fieldset id="photo-source-group" style="display: {% if enable_images %}block{% else %}none{% endif %}; border: 1px solid var(--border-color); padding: 0.75rem; margin-bottom: 1rem; background: var(--card-bg); border-radius: var(--border-radius);">
                <legend style="font-weight: bold; background: var(--bg-page); color: var(--text-main); border: 1px solid var(--border-color); padding: 0 0.5rem; font-size: 0.75rem;">PHOTO API</legend>
                <label style="margin-bottom: 0.4rem;">
                    <input type="radio" name="photo_source" value="pexels" {% if photo_source == 'pexels' or not photo_source %}checked{% endif %}>
                    Pexels
                </label>
                <label style="margin-bottom: 0;">
                    <input type="radio" name="photo_source" value="unsplash" {% if photo_source == 'unsplash' %}checked{% endif %}>
                    Unsplash
                </label>
            </fieldset>

            <label style="font-weight: bold; font-size: 0.75rem; color: var(--text-main);">
                INPUT
                <div id="manual-tools" style="display: {% if input_source == 'manual' %}flex{% else %}none{% endif %}; margin-bottom: 0.5rem; gap: 0.5rem;">
                    <button type="button" class="outline btn-sm" onclick="copyPrompt()" style="flex-grow: 1;">Copy LLM Prompt</button>
                    <button type="button" class="outline btn-sm" onclick="resetManualExample()" style="flex-grow: 1;">Reset Example</button>
                </div>
                <div style="margin-bottom: 0.5rem;">
                    <button type="button" class="outline btn-sm secondary" hx-post="/clear-cards" hx-target="#card-list" hx-confirm="Are you sure you want to clear all cards?" style="width: 100%;">Clear All Cards</button>
                </div>
                <textarea id="input-text" name="input_text" rows="10" 
                    hx-post="/save-input" hx-trigger="keyup changed delay:500ms" hx-swap="none"
                    onkeyup="htmx.trigger('#duplicate-check-trigger', 'check')"
                    style="background: var(--input-bg); color: var(--text-main); border: 2px solid var(--border-color); font-family: monospace; font-size: 0.85rem; resize: vertical; border-radius: var(--border-radius);" 
                    placeholder="Paste data here...">{{ input_text or (llm_example if input_source != 'manual' else manual_example) }}</textarea>
                
                <button id="duplicate-check-trigger" style="display:none"
                    hx-post="/check-duplicates" 
                    hx-trigger="check delay:800ms" 
                    hx-target="#duplicate-alerts" 
                    hx-include="#input-text, [name='deck_name']"></button>
            </label>

            <script>
                document.body.addEventListener('card-deleted', (e) => {
                    const newText = e.detail.value;
                    document.getElementById('input-text').value = newText;
                });

                const examples = {
                    'chatgpt': `{{ llm_example | safe }}`,
                    'manual': `{{ manual_example | safe }}`
                };
                const gptPrompt = `{{ llm_prompt | safe }}`;

                document.querySelectorAll('input[name="input_source"]').forEach(radio => {
                    radio.addEventListener('change', (e) => {
                        const source = e.target.value;
                        const textarea = document.getElementById('input-text');
                        textarea.value = examples[source];

                        const manualTools = document.getElementById('manual-tools');
                        manualTools.style.display = (source === 'manual') ? 'flex' : 'none';
                    });
                });

                function copyPrompt() {
                    navigator.clipboard.writeText(gptPrompt).then(() => {
                        const btn = event.target;
                        const originalText = btn.innerText;
                        btn.innerText = 'COPIED!';
                        setTimeout(() => btn.innerText = originalText, 2000);
                    });
                }

                function resetManualExample() {
                    document.getElementById('input-text').value = examples['manual'];
                }
            </script>

            <button type="submit" style="width: 100%; margin-top: 0.5rem;">Generate Preview</button>
        </form>

        <hr style="border: 0; border-top: 1px solid var(--border-color); margin: 1.5rem 0;">

        <form hx-post="/create-cards" hx-target="#card-list" hx-swap="innerHTML">
            <label style="font-weight: bold; font-size: 0.75rem;">
                TARGET DECK
                <select name="deck_name" style="background: var(--input-bg); border: 2px solid var(--border-color); border-radius: var(--border-radius);">
                    {% if anki_decks %}
                        {% for deck in anki_decks %}
                            <option value="{{ deck }}" {% if deck == deck_name %}selected{% endif %}>{{ deck }}</option>
                        {% endfor %}
                    {% else %}
                        <option value="{{ deck_name }}">{{ deck_name }}</option>
                    {% endif %}
                </select>
                {% if not anki_decks %}
                    <small style="color: #ff0000; font-weight: bold;">[!] OFFLINE</small>
                {% endif %}
            </label>

            <label style="display: flex; align-items: center; gap: 0.5rem; font-weight: bold; margin-bottom: 1rem; color: var(--text-main); font-size: 0.7rem;">
                <input type="checkbox" name="force_update" role="switch">
                ACCEPT TEMPLATE UPDATES (MAY AFFECT EXISTING CARDS)
            </label>

            <button id="sync-button" type="submit" class="secondary" style="width: 100%; margin-top: 0.5rem;">Sync to Anki</button>
            <button type="button" class="outline" onclick="window.location.href='/export-cards'" style="width: 100%; margin-top: 0.5rem;">Export to .apkg (Manual)</button>
            <div id="create-response" style="margin-top: 0.5rem;"></div>
        </form>
    </div>

    <div style="flex-grow: 1; width: 100%;">
        <div style="display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--border-color); margin-bottom: 1.5rem;">
            <h3 style="color: var(--text-main); text-transform: uppercase; font-weight: bold; display: inline-block; margin-bottom: 0; font-size: 1.2rem;">Preview Browser</h3>
            <div id="loading" class="htmx-indicator" style="font-size: 1rem; font-weight: bold; color: var(--primary-accent);">
                <span aria-busy="true"></span> BUSY...
            </div>
        </div>
        <div id="card-list-container" style="width: 100%;">
            {% if cards %}
                {% include "partials/card_list.html" %}
            {% else %}
                <ul id="card-list" style="list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; width: 100%;">
                    <div id="empty-state" style="grid-column: 1 / -1; border: 2px dashed var(--border-color); padding: 3rem; text-align: center; background: var(--card-bg); width: 100%; border-radius: var(--border-radius);">
                        <p style="font-weight: bold; color: var(--text-main); opacity: 0.5;">EMPTY</p>
                    </div>
                </ul>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}