{% extends "base.html" %}
{% block title %}Quests — df-storyteller{% endblock %}

{% block content %}
<h1 class="page-header">Quest Board of {{ fortress_name or "the Fortress" }}</h1>
<p class="page-subtitle">Challenges and deeds to bring glory to the fortress</p>

<!-- Manual quest creation -->
<details style="max-width: 600px; margin: 0 auto 1.5rem;">
    <summary style="cursor: pointer; color: var(--parchment-dark); font-size: 0.9rem; text-align: center;">
        Create your own quest
    </summary>
    <div class="parchment" style="margin-top: 0.5rem; padding: 1rem;">
        <div style="margin-bottom: 0.8rem;">
            <input type="text" id="manual-quest-title" placeholder="Quest title..."
                class="manual-textarea" style="resize: none; height: auto; padding: 0.4rem;">
        </div>
        <div style="margin-bottom: 0.8rem;">
            <textarea id="manual-quest-desc" rows="3" placeholder="Describe the challenge..."
                class="manual-textarea"></textarea>
        </div>
        <div style="display: flex; gap: 0.5rem; margin-bottom: 0.8rem; flex-wrap: wrap;">
            <select id="manual-quest-category" style="font-family: 'Crimson Text', serif; padding: 0.4rem; border: 1px solid var(--border); border-radius: 3px;">
                <option value="military">Military</option>
                <option value="construction">Construction</option>
                <option value="religious">Religious</option>
                <option value="crafting">Crafting</option>
                <option value="exploration">Exploration</option>
                <option value="social">Social</option>
                <option value="chaos">Chaos</option>
            </select>
            <select id="manual-quest-difficulty" style="font-family: 'Crimson Text', serif; padding: 0.4rem; border: 1px solid var(--border); border-radius: 3px;">
                <option value="easy">Easy</option>
                <option value="medium" selected>Medium</option>
                <option value="hard">Hard</option>
                <option value="legendary">Legendary</option>
            </select>
        </div>
        <div class="btn-row">
            <button class="btn btn-primary" onclick="createManualQuest()">Post Quest</button>
        </div>
    </div>
</details>

{% if not no_llm_mode %}
<div style="display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 1.5rem; align-items: center; flex-wrap: wrap;">
    <button class="btn btn-primary" id="generate-btn" onclick="generateQuests()">Seek New Quests</button>
    <select id="quest-count" style="font-family: 'Crimson Text', serif; padding: 0.4rem; border: 1px solid var(--border); border-radius: 3px; background: rgba(244,232,193,0.1); color: var(--parchment);">
        <option value="1">1 Quest</option>
        <option value="3" selected>3 Quests</option>
        <option value="5">5 Quests</option>
    </select>
    <select id="quest-category" style="font-family: 'Crimson Text', serif; padding: 0.4rem; border: 1px solid var(--border); border-radius: 3px; background: rgba(244,232,193,0.1); color: var(--parchment);">
        <option value="">Any Category</option>
        <option value="military">Military</option>
        <option value="construction">Construction</option>
        <option value="religious">Religious</option>
        <option value="crafting">Crafting</option>
        <option value="exploration">Exploration</option>
        <option value="social">Social</option>
        <option value="chaos">Chaos</option>
    </select>
    <select id="quest-difficulty" style="font-family: 'Crimson Text', serif; padding: 0.4rem; border: 1px solid var(--border); border-radius: 3px; background: rgba(244,232,193,0.1); color: var(--parchment);">
        <option value="">Any Difficulty</option>
        <option value="easy">Easy</option>
        <option value="medium">Medium</option>
        <option value="hard">Hard</option>
        <option value="legendary">Legendary</option>
    </select>
</div>

<div id="quest-loading" style="display: none; text-align: center; color: var(--ink-faded); font-style: italic; padding: 1rem;">
    The quest board shimmers as new challenges emerge...
</div>

<div id="completion-output" style="display: none; margin-bottom: 1.5rem;">
    <div class="parchment">
        <h3 style="color: var(--gold-dark);">Quest Fulfilled</h3>
        <div class="story-text streaming-text" id="completion-text"></div>
    </div>
</div>
{% endif %}

{% if active_quests %}
<h2 style="font-family: 'Cinzel', serif; font-size: 1.1rem; color: var(--gold-dark); margin-bottom: 0.8rem;">
    Active Quests ({{ active_quests | length }})
</h2>

{% for quest in active_quests %}
<div class="parchment quest-card {% if quest.priority %}quest-priority{% endif %}" id="quest-{{ quest.id }}">
    <div class="quest-header">
        <span class="quest-category cat-{{ quest.category.value }}">{{ quest.category.value }}</span>
        <span class="quest-difficulty diff-{{ quest.difficulty.value }}">{{ quest.difficulty.value }}</span>
        <h3 class="quest-title">{{ quest.title }}</h3>
        <button onclick="togglePriority('{{ quest.id }}')" class="quest-star {% if quest.priority %}starred{% endif %}">
            {% if quest.priority %}&#9733;{% else %}&#9734;{% endif %}
        </button>
    </div>
    <p class="quest-description">{{ quest.description | hotlink }}</p>
    {% if quest.hints %}
    <details class="quest-hints">
        <summary>Hints</summary>
        <ul>
            {% for hint in quest.hints %}
            <li>{{ hint }}</li>
            {% endfor %}
        </ul>
    </details>
    {% endif %}
    {% if quest.related_unit_names %}
    <p class="quest-related">Related: {{ quest.related_unit_names | join(', ') }}</p>
    {% endif %}
    <div class="quest-meta">
        Issued: {{ quest.game_season | title }} of Year {{ quest.game_year }}
    </div>
    <!-- Edit form (hidden) -->
    <div id="quest-edit-{{ quest.id }}" style="display: none; margin-bottom: 0.8rem;">
        <input type="text" id="quest-edit-title-{{ quest.id }}" value="{{ quest.title }}"
            class="manual-textarea" style="resize: none; height: auto; padding: 0.4rem; margin-bottom: 0.5rem;">
        <textarea id="quest-edit-desc-{{ quest.id }}" rows="3" class="manual-textarea">{{ quest.description }}</textarea>
        <div class="btn-row" style="margin-top: 0.5rem; gap: 0.5rem;">
            <button class="btn btn-primary" onclick="saveQuestEdit('{{ quest.id }}')">Save</button>
            <button class="btn btn-secondary" onclick="document.getElementById('quest-edit-{{ quest.id }}').style.display='none'">Cancel</button>
        </div>
    </div>
    <div class="quest-actions">
        {% if not no_llm_mode %}
        <button class="btn btn-primary" onclick="completeQuest('{{ quest.id }}', '{{ quest.title | e }}')">Complete</button>
        {% endif %}
        <button class="btn btn-primary" onclick="resolveQuest('{{ quest.id }}')">Resolve</button>
        <button class="btn btn-secondary" onclick="document.getElementById('quest-edit-{{ quest.id }}').style.display='block'">Edit</button>
        <button class="btn btn-secondary" onclick="abandonQuest('{{ quest.id }}')">Abandon</button>
    </div>
</div>
{% endfor %}
{% else %}
<div class="parchment" style="text-align: center; color: var(--ink-faded); font-style: italic; padding: 2rem;">
    No active quests. {% if no_llm_mode %}Create your own quest above, or disable No-LLM Mode in <a href="/settings" style="color: var(--gold-dark);">Settings</a> to generate quests with AI.{% else %}Click "Seek New Quests" above to generate challenges, or create your own.{% endif %}
</div>
{% endif %}

{% if completed_quests %}
<details style="margin-top: 1.5rem;">
    <summary style="font-family: 'Cinzel', serif; font-size: 1.1rem; color: var(--ink-faded); cursor: pointer;">
        Completed Quests ({{ completed_quests | length }})
    </summary>

    {% for quest in completed_quests %}
    <div class="parchment quest-card quest-completed" style="margin-top: 0.8rem;">
        <div class="quest-header">
            <span class="quest-category cat-{{ quest.category.value }}">{{ quest.category.value }}</span>
            <h3 class="quest-title">{{ quest.title }} <span class="quest-check">&#10003;</span></h3>
        </div>
        <p class="quest-description">{{ quest.description | hotlink }}</p>
        {% if quest.completion_narrative %}
        <div class="quest-narrative">{{ quest.completion_narrative | hotlink }}</div>
        {% endif %}
        <div class="quest-meta">
            Completed: {{ quest.completed_at.strftime('%Y-%m-%d') if quest.completed_at else 'Unknown' }}
        </div>
        <button class="btn btn-secondary" onclick="deleteQuest('{{ quest.id }}')" style="font-size: 0.8rem; margin-top: 0.3rem;">Remove</button>
    </div>
    {% endfor %}
</details>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
async function createManualQuest() {
    const title = document.getElementById('manual-quest-title').value.trim();
    const description = document.getElementById('manual-quest-desc').value.trim();
    const category = document.getElementById('manual-quest-category').value;
    const difficulty = document.getElementById('manual-quest-difficulty').value;
    if (!title || !description) { alert('Title and description are required.'); return; }
    try {
        const resp = await fetch('/api/quests/manual', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ title, description, category, difficulty }),
        });
        if (!resp.ok) throw new Error('Save failed');
        window.location.reload();
    } catch (err) {
        alert('Failed to create quest: ' + err.message);
    }
}

async function saveQuestEdit(questId) {
    const title = document.getElementById('quest-edit-title-' + questId).value.trim();
    const description = document.getElementById('quest-edit-desc-' + questId).value.trim();
    if (!title || !description) { alert('Title and description are required.'); return; }
    try {
        const resp = await fetch('/api/quests/' + questId + '/edit', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ title, description }),
        });
        if (!resp.ok) throw new Error('Save failed');
        window.location.reload();
    } catch (err) {
        alert('Failed to save: ' + err.message);
    }
}

async function resolveQuest(questId) {
    const comment = prompt('How was this quest resolved? (optional)');
    if (comment === null) return; // cancelled
    try {
        const resp = await fetch('/api/quests/' + questId + '/resolve', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ comment: comment }),
        });
        if (!resp.ok) throw new Error('Failed');
        window.location.reload();
    } catch (err) {
        alert('Failed to resolve quest: ' + err.message);
    }
}

async function generateQuests() {
    const btn = document.getElementById('generate-btn');
    const loading = document.getElementById('quest-loading');
    const count = document.getElementById('quest-count').value;
    const category = document.getElementById('quest-category').value;
    const difficulty = document.getElementById('quest-difficulty').value;

    btn.disabled = true;
    btn.textContent = 'Consulting the fates...';
    loading.style.display = 'block';
    loading.textContent = 'The quest board shimmers as new challenges emerge...';

    try {
        const body = { count: parseInt(count) };
        if (category) body.category = category;
        if (difficulty) body.difficulty = difficulty;
        const response = await fetch('/api/quests/generate', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(body),
        });
        if (!response.ok) throw new Error('Server error (' + response.status + ')');
        const quests = await response.json();
        if (quests.length > 0) {
            window.location.reload();
        } else {
            loading.textContent = 'The fates are silent. Try again.';
        }
    } catch (err) {
        loading.textContent = 'Error: ' + err.message;
    } finally {
        btn.disabled = false;
        btn.textContent = 'Seek New Quests';
    }
}

async function completeQuest(questId, questTitle) {
    const output = document.getElementById('completion-output');
    const textEl = document.getElementById('completion-text');
    const card = document.getElementById('quest-' + questId);
    const completeBtn = card ? card.querySelector('.btn-primary') : null;

    if (completeBtn) {
        completeBtn.disabled = true;
        completeBtn.textContent = 'Completing...';
    }

    output.style.display = 'block';
    textEl.innerHTML = '<span class="streaming-cursor"></span>';
    output.scrollIntoView({ behavior: 'smooth' });

    try {
        const response = await fetch('/api/quests/' + questId + '/complete', { method: 'POST' });
        if (!response.ok) throw new Error('Server error (' + response.status + ')');
        const reader = response.body.getReader();
        const decoder = new TextDecoder();
        let fullText = '';

        while (true) {
            const { done, value } = await reader.read();
            if (done) break;
            const chunk = decoder.decode(value, { stream: true });
            fullText += chunk;
            textEl.innerHTML = fullText.replace(/\n/g, '<br>') + '<span class="streaming-cursor"></span>';
        }

        textEl.innerHTML = fullText.replace(/\n/g, '<br>');

        // Hide the quest card — narrative is saved and will appear in Completed section on reload
        if (card) card.style.display = 'none';
        // Reload after user has time to read (narrative persists in completed section)
        setTimeout(() => window.location.reload(), 8000);
    } catch (err) {
        textEl.innerHTML = '<em style="color: var(--danger);">Generation failed: ' + err.message + '</em>';
        if (completeBtn) {
            completeBtn.disabled = false;
            completeBtn.textContent = 'Complete';
        }
    }
}

async function abandonQuest(questId) {
    try {
        const response = await fetch('/api/quests/' + questId + '/abandon', { method: 'POST' });
        if (!response.ok) throw new Error('Failed');
        const card = document.getElementById('quest-' + questId);
        if (card) {
            card.style.opacity = '0.3';
            card.style.transition = 'opacity 0.3s';
            setTimeout(() => card.remove(), 300);
        }
    } catch (err) {
        alert('Failed to abandon quest');
    }
}

async function togglePriority(questId) {
    try {
        const response = await fetch('/api/quests/' + questId + '/priority', { method: 'POST' });
        if (!response.ok) throw new Error('Failed');
        const card = document.getElementById('quest-' + questId);
        if (card) {
            const star = card.querySelector('.quest-star');
            const isNowPriority = star.textContent.trim() === '\u2606'; // was unstarred
            star.textContent = isNowPriority ? '\u2605' : '\u2606';
            star.classList.toggle('starred');
            card.classList.toggle('quest-priority');
        }
    } catch (err) {
        alert('Failed to update priority');
    }
}

async function deleteQuest(questId) {
    try {
        const response = await fetch('/api/quests/' + questId, { method: 'DELETE' });
        if (!response.ok) throw new Error('Failed');
        // Find the closest parent that's a quest card
        const cards = document.querySelectorAll('.quest-card');
        for (const card of cards) {
            if (card.querySelector('[onclick*="' + questId + '"]')) {
                card.style.opacity = '0.3';
                card.style.transition = 'opacity 0.3s';
                setTimeout(() => card.remove(), 300);
                break;
            }
        }
    } catch (err) {
        alert('Failed to delete quest');
    }
}
</script>
{% endblock %}