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

{% block content %}
<h1 class="page-header">The Chronicle of {{ fortress_name or "the Fortress" }}</h1>
<p class="page-subtitle">A record of events, as told by the keepers of memory</p>

{% if current_season and current_year %}
<p style="text-align: center; color: var(--parchment-dark); font-size: 0.95rem; margin-bottom: 0.5rem;">
    Writing for: <strong>{{ current_season | title }} of Year {{ current_year }}</strong>
    {% if already_written %}
    <br><span style="color: var(--gold-dark); font-size: 0.85rem;">An entry exists for this season — generating will replace it.</span>
    {% endif %}
</p>
{% endif %}

<!-- Fortress-wide player notes -->
{% if fortress_notes %}
<div class="parchment" style="max-width: 600px; margin: 0 auto 1rem; padding: 1rem;">
    <h3 style="font-size: 0.95rem; margin-bottom: 0.5rem;">Fortress Notes</h3>
    {% for note in fortress_notes %}
    <div class="note-card {{ 'resolved' if note.resolved else '' }}" data-id="{{ note.id }}">
        <span class="note-tag tag-{{ note.tag.value }}">{{ note.tag.value }}</span>
        <span class="note-text">{{ note.text }}</span>
        <span class="note-time">{{ note.game_season | title }} Y{{ note.game_year }}</span>
        <span class="note-actions">
            <button onclick="resolveNote('{{ note.id }}')" class="note-btn">{{ '↩' if note.resolved else '✓' }}</button>
            <button onclick="deleteNote('{{ note.id }}')" class="note-btn">✕</button>
        </span>
    </div>
    {% endfor %}
</div>
{% endif %}

<div style="max-width: 600px; margin: 0 auto 0.5rem; display: flex; gap: 0.5rem; align-items: center;">
    <select id="fortress-note-tag" 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="mood">Mood</option>
        <option value="fact">Fact</option>
        <option value="foreshadow">Foreshadow</option>
        <option value="rumor">Rumor</option>
        <option value="theory">Theory</option>
        <option value="what_if">What If</option>
    </select>
    <input type="text" id="fortress-note-text" placeholder="Add a fortress-wide note..."
        style="flex: 1; 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);">
    <button class="btn btn-secondary" onclick="addFortressNote()" style="padding: 0.4rem 1rem; color: var(--parchment);">Add</button>
</div>

{% if not no_llm_mode %}
<details style="max-width: 600px; margin: 0 auto 1rem;">
    <summary style="cursor: pointer; color: var(--parchment-dark); font-size: 0.9rem; text-align: center;">
        Add context for this entry (optional)
    </summary>
    <div style="margin-top: 0.5rem;">
        <input type="text" id="chronicle-context" placeholder="e.g. 'The goblins attacked from the east, focus on the defense'"
            style="width: 100%; font-family: 'Crimson Text', serif; padding: 0.5rem; border: 1px solid var(--border); border-radius: 3px; background: rgba(244,232,193,0.1); color: var(--parchment);">
    </div>
</details>

<div class="btn-row" style="justify-content: center;">
    <button class="btn btn-primary" id="generate-btn" onclick="generateChronicle()">
        {% if already_written %}Rewrite {{ current_season | title }} Entry{% else %}Write New Entry{% endif %}
    </button>
</div>

<!-- Streaming output area -->
<div id="stream-output" style="display: none;">
    <div class="parchment">
        <h2 id="stream-header">New Entry</h2>
        <div class="story-text streaming-text" id="stream-text"></div>
    </div>
    <div class="divider">&loz;</div>
</div>
{% endif %}

<!-- Manual writing area -->
<details style="max-width: 600px; margin: 0 auto 1rem;" {% if no_llm_mode %}open{% endif %}>
    <summary style="cursor: pointer; color: var(--parchment-dark); font-size: 0.9rem; text-align: center;">
        {% if no_llm_mode %}Write your chronicle entry{% else %}Write your own entry{% endif %}
    </summary>
    <div style="margin-top: 0.5rem;">
        <textarea id="manual-chronicle-text" rows="8" placeholder="Write your chronicle entry... Use [[name]] to link to legends figures, sites, or civilizations."
            class="manual-textarea"></textarea>
        <div class="image-upload-row">
            <label class="image-upload-btn" for="manual-chronicle-images">Attach Screenshots</label>
            <input type="file" id="manual-chronicle-images" multiple accept="image/png,image/jpeg,image/gif,image/webp" style="display: none;">
        </div>
        <div id="manual-chronicle-previews" class="image-previews"></div>
        <div class="btn-row" style="justify-content: center; margin-top: 0.5rem;">
            <button class="btn btn-primary" onclick="saveManualChronicle()">Save Entry</button>
        </div>
    </div>
</details>

<!-- Existing journal entries -->
{% if entries %}
    {% for entry in entries %}
    <div class="parchment chronicle-entry" id="chronicle-entry-{{ loop.index0 }}">
        {% if entry.header %}
        <h2 class="season-header">
            {{ entry.header }}
            {% if entry.is_manual %}<span class="manual-badge">Player</span>{% endif %}
        </h2>
        {% endif %}
        <div class="story-text" id="chronicle-text-{{ loop.index0 }}">{{ entry.text | inline_images | hotlink | safe }}</div>
        {% if entry.images %}
        <div class="entry-images">
            {% for img_id in entry.images %}
            <a href="/api/images/{{ img_id }}" target="_blank" class="entry-image-link">
                <img src="/api/images/{{ img_id }}" alt="Screenshot" class="entry-image" loading="lazy">
            </a>
            {% endfor %}
        </div>
        {% endif %}
        <div style="text-align: right; margin-top: 0.5rem;">
            <button class="btn btn-secondary" style="font-size: 0.8rem;" onclick="editChronicle({{ loop.index0 }}, '{{ entry.season }}', {{ entry.year }})">Edit</button>
        </div>
        <div id="chronicle-edit-{{ loop.index0 }}" style="display: none; margin-top: 0.5rem;">
            <textarea id="chronicle-edit-text-{{ loop.index0 }}" rows="8" class="manual-textarea">{{ entry.raw_text }}</textarea>
            <div class="image-upload-row">
                <label class="image-upload-btn" for="chronicle-edit-images-{{ loop.index0 }}">Attach Screenshots</label>
                <input type="file" id="chronicle-edit-images-{{ loop.index0 }}" multiple accept="image/png,image/jpeg,image/gif,image/webp" style="display: none;">
            </div>
            <div id="chronicle-edit-previews-{{ loop.index0 }}" class="image-previews"></div>
            <div class="btn-row" style="margin-top: 0.5rem; gap: 0.5rem;">
                <button class="btn btn-primary" onclick="saveChronicleEdit({{ loop.index0 }}, '{{ entry.season }}', {{ entry.year }})">Save</button>
                <button class="btn btn-secondary" onclick="document.getElementById('chronicle-edit-{{ loop.index0 }}').style.display='none'">Cancel</button>
            </div>
        </div>
    </div>
    {% if not loop.last %}
    <div class="divider">&loz;</div>
    {% endif %}
    {% endfor %}
{% else %}
    <div class="parchment">
        <p style="text-align: center; color: var(--ink-faded); font-style: italic;">
            No chronicle entries yet. Take a snapshot in DFHack
            (<code>storyteller-begin</code>), then {% if no_llm_mode %}write your first entry below{% else %}click "Write New Entry" to begin{% endif %}.
        </p>
    </div>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
// Fortress note CRUD
async function addFortressNote() {
    const tag = document.getElementById('fortress-note-tag').value;
    const text = document.getElementById('fortress-note-text').value.trim();
    if (!text) return;
    await fetch('/api/notes', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ tag, text, target_type: 'fortress' }),
    });
    document.getElementById('fortress-note-text').value = '';
    window.location.reload();
}
async function resolveNote(noteId) {
    await fetch('/api/notes/' + noteId + '/resolve', { method: 'POST' });
    window.location.reload();
}
async function deleteNote(noteId) {
    await fetch('/api/notes/' + noteId, { method: 'DELETE' });
    window.location.reload();
}
document.addEventListener('DOMContentLoaded', () => {
    const input = document.getElementById('fortress-note-text');
    if (input) input.addEventListener('keydown', (e) => { if (e.key === 'Enter') addFortressNote(); });
    setupImageUpload('manual-chronicle-images', 'manual-chronicle-previews', 'manual-chronicle-text');
});

// Dwarf name -> unit_id map for hotlinking (injected from server)
const dwarfNameMap = {{ dwarf_name_map | tojson | safe }};

function simpleMarkdown(text) {
    // Convert basic markdown to HTML — LLM headers become styled subheadings
    return text
        .split('\n\n').map(para => {
            para = para.trim();
            if (!para) return '';
            if (para.startsWith('### ')) return '<p class="story-heading">' + para.slice(4) + '</p>';
            if (para.startsWith('## ')) return '<p class="story-heading">' + para.slice(3) + '</p>';
            if (para.startsWith('# ')) return '<p class="story-heading story-title">' + para.slice(2) + '</p>';
            if (para === '---' || para === '***') return '<hr>';
            para = para.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
            para = para.replace(/\*(.+?)\*/g, '<em>$1</em>');
            return '<p>' + para.replace(/\n/g, ' ') + '</p>';
        })
        .join('\n');
}

function linkifyDwarfNames(text) {
    // Sort names by length descending to match longest first
    const names = Object.keys(dwarfNameMap).sort((a, b) => b.length - a.length);
    for (const name of names) {
        if (name.length < 3) continue;
        // Don't replace inside existing HTML tags
        const escaped = name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
        const regex = new RegExp('(?![^<]*>)' + escaped, 'g');
        const unitId = dwarfNameMap[name];
        text = text.replace(regex, `<a href="/dwarves/${unitId}" class="dwarf-link">${name}</a>`);
    }
    return text;
}

function editChronicle(index, season, year) {
    document.getElementById('chronicle-edit-' + index).style.display = 'block';
    setupImageUpload('chronicle-edit-images-' + index, 'chronicle-edit-previews-' + index, 'chronicle-edit-text-' + index);
}

async function saveChronicleEdit(index, season, year) {
    const text = document.getElementById('chronicle-edit-text-' + index).value.trim();
    if (!text) return;
    try {
        const resp = await fetch('/api/chronicle/manual', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ text, season, year }),
        });
        if (!resp.ok) throw new Error('Save failed');
        window.location.reload();
    } catch (err) {
        alert('Failed to save: ' + err.message);
    }
}

async function saveManualChronicle() {
    const text = document.getElementById('manual-chronicle-text').value.trim();
    if (!text) return;
    try {
        const resp = await fetch('/api/chronicle/manual', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ text }),
        });
        if (!resp.ok) throw new Error('Save failed');
        window.location.reload();
    } catch (err) {
        alert('Failed to save: ' + err.message);
    }
}

async function generateChronicle() {
    const btn = document.getElementById('generate-btn');
    const originalText = btn.textContent;
    const output = document.getElementById('stream-output');
    const textEl = document.getElementById('stream-text');

    btn.disabled = true;
    btn.textContent = 'Writing...';
    output.style.display = 'block';
    textEl.innerHTML = '<span class="streaming-cursor"></span>';

    try {
        const contextEl = document.getElementById('chronicle-context');
        const oneTimeContext = contextEl ? contextEl.value.trim() : '';
        const response = await fetch('/api/chronicle/generate', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ context: oneTimeContext }),
        });
        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.scrollIntoView({ behavior: 'smooth', block: 'end' });
        }

        let html = simpleMarkdown(fullText);
        html = linkifyDwarfNames(html);
        textEl.innerHTML = html;

        setTimeout(() => window.location.reload(), 2000);
    } catch (err) {
        textEl.innerHTML = '<em style="color: var(--danger);">Generation failed: ' + err.message + '</em>';
    } finally {
        btn.disabled = false;
        btn.textContent = originalText;
    }
}
</script>
{% endblock %}