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

{% block content %}
<div style="margin-bottom: 1rem;">
    <a href="/" style="color: var(--parchment-dark); text-decoration: none;">&larr; Back to Chronicle</a>
</div>

{% if not gazette %}
<div class="parchment" style="text-align: center; padding: 2rem;">
    <h1 class="page-header">The Fortress Gazette</h1>
    {% if no_llm_mode %}
    <p class="page-subtitle">Write your own fortress gazette</p>
    <form id="manual-gazette-form" style="text-align: left; margin-top: 1rem;">
        <div style="margin-bottom: 1rem;">
            <label style="font-family: 'Cinzel', serif; font-size: 0.9rem; color: var(--gold-dark);">Herald</label>
            <textarea name="herald" rows="4" placeholder="Main fortress news and events..."
                class="manual-textarea"></textarea>
        </div>
        <div style="margin-bottom: 1rem;">
            <label style="font-family: 'Cinzel', serif; font-size: 0.9rem; color: var(--gold-dark);">Military Dispatches</label>
            <textarea name="military" rows="4" placeholder="Combat reports, squad movements, military news..."
                class="manual-textarea"></textarea>
        </div>
        <div style="margin-bottom: 1rem;">
            <label style="font-family: 'Cinzel', serif; font-size: 0.9rem; color: var(--gold-dark);">Quarry Gossip</label>
            <textarea name="gossip" rows="4" placeholder="Social happenings, relationships, rumors..."
                class="manual-textarea"></textarea>
        </div>
        <div style="margin-bottom: 1rem;">
            <label style="font-family: 'Cinzel', serif; font-size: 0.9rem; color: var(--gold-dark);">Quest Board</label>
            <textarea name="quests" rows="3" placeholder="Active challenges and ongoing deeds..."
                class="manual-textarea"></textarea>
        </div>
        <div style="margin-bottom: 1rem;">
            <label style="font-family: 'Cinzel', serif; font-size: 0.9rem; color: var(--gold-dark);">Obituaries</label>
            <textarea name="obituaries" rows="3" placeholder="Deaths and farewells..."
                class="manual-textarea"></textarea>
        </div>
        <div class="btn-row" style="justify-content: center;">
            <button type="button" class="btn btn-primary" onclick="saveManualGazette()">Publish Edition</button>
        </div>
    </form>
    {% else %}
    <p class="page-subtitle">No gazette has been written for this season yet.</p>
    <div style="margin-top: 1rem;">
        <button class="btn btn-primary" id="gazette-btn" onclick="generateGazette()">
            Publish This Season's Edition
        </button>
    </div>
    <div id="gazette-loading" style="display: none; margin-top: 1rem; color: var(--ink-faded); font-style: italic;">
        The printing press rumbles to life...
    </div>
    {% endif %}
</div>
{% else %}

<div class="newspaper">
    <!-- Masthead -->
    <div class="newspaper-masthead">
        <div class="newspaper-rule"></div>
        <div class="newspaper-name">The {{ fortress_name or "Fortress" }} Gazette</div>
        <div class="newspaper-subtitle">All the News Fit to Engrave in Stone</div>
        <div class="newspaper-meta">
            <span>{{ gazette.season | default('') | title }} of Year {{ gazette.year | default('?') }}</span>
            <span>&middot;</span>
            <span>Population: {{ population }}</span>
            <span>&middot;</span>
            <span>Editor: {{ gazette.author | default('Unknown') }}</span>
        </div>
        <div class="newspaper-rule"></div>
    </div>

    <!-- Content in newspaper columns -->
    <div class="newspaper-content">
        {% if gazette.sections.herald %}
        <div class="newspaper-section">
            <h2 class="newspaper-section-head">The Fortress Herald</h2>
            <div class="newspaper-body">{{ gazette.sections.herald | hotlink }}</div>
        </div>
        {% endif %}

        {% if gazette.sections.military %}
        <div class="newspaper-section">
            <h2 class="newspaper-section-head">Military Dispatches</h2>
            <div class="newspaper-body">{{ gazette.sections.military | hotlink }}</div>
        </div>
        {% endif %}

        {% if gazette.sections.gossip %}
        <div class="newspaper-section">
            <h2 class="newspaper-section-head">Quarry Gossip</h2>
            <div class="newspaper-body">{{ gazette.sections.gossip | hotlink }}</div>
        </div>
        {% endif %}

        {% if gazette.sections.quests %}
        <div class="newspaper-section">
            <h2 class="newspaper-section-head">Quest Board</h2>
            <div class="newspaper-body">{{ gazette.sections.quests | hotlink }}</div>
        </div>
        {% endif %}

        {% if gazette.sections.obituaries %}
        <div class="newspaper-section">
            <h2 class="newspaper-section-head">Obituaries</h2>
            <div class="newspaper-body">{{ gazette.sections.obituaries | hotlink }}</div>
        </div>
        {% endif %}
    </div>

    <!-- Footer -->
    <div class="newspaper-footer">
        <div class="newspaper-rule"></div>
        <p>Written and edited by {{ gazette.author | default('Unknown') }} &middot; Printed at {{ fortress_name or "the Fortress" }}</p>
    </div>
</div>

<!-- Edit / Rewrite controls -->
<div style="margin-top: 1rem; text-align: center; display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap;">
    <button class="btn btn-secondary" onclick="editGazette()">Edit This Edition</button>
    {% if not no_llm_mode %}
    <button class="btn btn-secondary" id="gazette-btn" onclick="generateGazette()">
        Rewrite with AI
    </button>
    <div id="gazette-loading" style="display: none; margin-top: 1rem; color: var(--ink-faded); font-style: italic;">
        The printing press rumbles to life...
    </div>
    {% endif %}
</div>

<!-- Edit form (hidden by default) -->
<div id="gazette-edit-form" style="display: none; margin-top: 1rem;">
    <div class="parchment" style="padding: 1rem;">
        <h3 style="font-family: 'Cinzel', serif; color: var(--gold-dark); margin-bottom: 1rem;">Edit Gazette</h3>
        <div style="margin-bottom: 0.8rem;">
            <label style="font-family: 'Cinzel', serif; font-size: 0.9rem;">Herald</label>
            <textarea name="herald" rows="4" class="manual-textarea">{{ gazette.sections.herald | default('') }}</textarea>
        </div>
        <div style="margin-bottom: 0.8rem;">
            <label style="font-family: 'Cinzel', serif; font-size: 0.9rem;">Military Dispatches</label>
            <textarea name="military" rows="4" class="manual-textarea">{{ gazette.sections.military | default('') }}</textarea>
        </div>
        <div style="margin-bottom: 0.8rem;">
            <label style="font-family: 'Cinzel', serif; font-size: 0.9rem;">Quarry Gossip</label>
            <textarea name="gossip" rows="4" class="manual-textarea">{{ gazette.sections.gossip | default('') }}</textarea>
        </div>
        <div style="margin-bottom: 0.8rem;">
            <label style="font-family: 'Cinzel', serif; font-size: 0.9rem;">Quest Board</label>
            <textarea name="quests" rows="3" class="manual-textarea">{{ gazette.sections.quests | default('') }}</textarea>
        </div>
        <div style="margin-bottom: 0.8rem;">
            <label style="font-family: 'Cinzel', serif; font-size: 0.9rem;">Obituaries</label>
            <textarea name="obituaries" rows="3" class="manual-textarea">{{ gazette.sections.obituaries | default('') }}</textarea>
        </div>
        <div class="btn-row" style="justify-content: center; gap: 0.5rem;">
            <button type="button" class="btn btn-primary" onclick="saveGazetteEdit()">Save Changes</button>
            <button type="button" class="btn btn-secondary" onclick="document.getElementById('gazette-edit-form').style.display='none'">Cancel</button>
        </div>
    </div>
</div>
{% endif %}

{% if past_gazettes %}
<details style="margin-top: 2rem;">
    <summary style="font-family: 'Cinzel', serif; font-size: 1.1rem; color: var(--ink-faded); cursor: pointer;">
        Past Editions ({{ past_gazettes | length }})
    </summary>
    {% for past in past_gazettes %}
    <div class="parchment" style="margin-top: 0.8rem;">
        <div style="font-family: 'Cinzel', serif; font-size: 1rem; color: var(--gold-dark); margin-bottom: 0.3rem;">
            {{ past.season | default('') | title }} of Year {{ past.year | default('?') }}
            <span style="font-size: 0.85rem; color: var(--ink-faded); font-family: 'Crimson Text', serif;">— by {{ past.author }}</span>
        </div>
        {% for section_name, section_text in past.sections.items() %}
        {% if section_text %}
        <div style="margin-bottom: 0.5rem;">
            <strong style="font-size: 0.9rem;">{{ section_name | replace('_', ' ') | title }}:</strong>
            <span style="font-size: 0.88rem; color: var(--ink-light);">{{ section_text | truncate(200) }}</span>
        </div>
        {% endif %}
        {% endfor %}
    </div>
    {% endfor %}
</details>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
async function saveManualGazette() {
    const form = document.getElementById('manual-gazette-form');
    const data = {
        herald: form.querySelector('[name=herald]').value.trim(),
        military: form.querySelector('[name=military]').value.trim(),
        gossip: form.querySelector('[name=gossip]').value.trim(),
        quests: form.querySelector('[name=quests]').value.trim(),
        obituaries: form.querySelector('[name=obituaries]').value.trim(),
    };
    if (!data.herald && !data.military && !data.gossip && !data.quests && !data.obituaries) {
        alert('Write at least one section before publishing.');
        return;
    }
    try {
        const resp = await fetch('/api/gazette/manual', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data),
        });
        if (!resp.ok) throw new Error('Save failed');
        window.location.reload();
    } catch (err) {
        alert('Failed to save: ' + err.message);
    }
}

function editGazette() {
    document.getElementById('gazette-edit-form').style.display = 'block';
    document.getElementById('gazette-edit-form').scrollIntoView({ behavior: 'smooth' });
}

async function saveGazetteEdit() {
    const form = document.getElementById('gazette-edit-form');
    const data = {
        herald: form.querySelector('[name=herald]').value.trim(),
        military: form.querySelector('[name=military]').value.trim(),
        gossip: form.querySelector('[name=gossip]').value.trim(),
        quests: form.querySelector('[name=quests]').value.trim(),
        obituaries: form.querySelector('[name=obituaries]').value.trim(),
    };
    try {
        const resp = await fetch('/api/gazette/manual', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data),
        });
        if (!resp.ok) throw new Error('Save failed');
        window.location.reload();
    } catch (err) {
        alert('Failed to save: ' + err.message);
    }
}

async function generateGazette() {
    const btn = document.getElementById('gazette-btn');
    const loading = document.getElementById('gazette-loading');

    btn.disabled = true;
    btn.textContent = 'Publishing...';
    loading.style.display = 'block';

    try {
        const response = await fetch('/api/gazette/generate', { method: 'POST' });
        if (!response.ok) throw new Error('Server error (' + response.status + ')');
        const data = await response.json();
        if (data.ok) {
            window.location.reload();
        } else {
            loading.textContent = 'Generation failed: ' + (data.error || 'unknown error');
        }
    } catch (err) {
        loading.textContent = 'Generation failed: ' + err.message;
    } finally {
        btn.disabled = false;
        btn.textContent = 'Publish This Season\'s Edition';
    }
}
</script>
{% endblock %}