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

{% block content %}
<h1 class="page-header">Events</h1>
<p class="page-subtitle">A live record of happenings in the fortress</p>

<div class="parchment">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
        <div>
            <span class="status-dot" id="live-dot"></span>
            <span id="live-status" style="font-size: 0.85rem; color: var(--ink-faded);">Connecting...</span>
        </div>
        <div>
            <select id="event-filter" onchange="filterEvents()" style="font-family: 'Crimson Text', serif; padding: 0.3rem; border: 1px solid var(--border); border-radius: 3px;">
                <option value="all">All Events</option>
                <option value="death">Deaths</option>
                <option value="combat">Combat</option>
                <option value="mood">Moods</option>
                <option value="artifact">Artifacts</option>
                <option value="season_change">Seasons</option>
                <option value="building">Buildings</option>
                <option value="profession_change">Role Changes</option>
                <option value="noble_appointment">Appointments</option>
                <option value="military_change">Military</option>
                <option value="stress_change">Stress</option>
                <option value="migrant_arrived">Migrants</option>
            </select>
        </div>
    </div>

    <div class="event-feed" id="event-feed">
        {% if events %}
            {% set ns = namespace(current_group='') %}
            {% for event in events %}
                {% set group = event.season | title ~ ' ' ~ event.year %}
                {% if group != ns.current_group %}
                    {% set ns.current_group = group %}
                    <div class="event-season-header" style="font-family: 'Cinzel', serif; color: var(--gold-dark); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; margin: 1rem 0 0.5rem; padding-bottom: 0.3rem; border-bottom: 1px solid rgba(201,168,76,0.3);">
                        {{ group }}
                    </div>
                {% endif %}
                <div class="event-card {{ event.type }}" data-type="{{ event.type }}">
                    <div class="event-time">{{ event.type | replace('_', ' ') | title }}</div>
                    <div class="event-text">{{ event.description }}</div>
                </div>
            {% endfor %}
        {% else %}
            <p style="text-align: center; color: var(--ink-faded); font-style: italic; padding: 2rem;">
                No events captured yet. Events auto-start when you load a fortress.
            </p>
        {% endif %}
    </div>
</div>

{% macro render_blowbyblow(raw_lines) %}
<div style="font-size: 0.88rem; line-height: 1.6;">
    {% for line in raw_lines %}
        {% set lower_line = line.lower() %}
        {% if 'hacks' in lower_line or 'slashes' in lower_line or 'stabs' in lower_line or 'strikes' in lower_line or 'punches' in lower_line or 'kicks' in lower_line or 'bites' in lower_line or 'scratches' in lower_line or 'bashes' in lower_line or 'gores' in lower_line %}
        <div style="color: var(--ink-light); margin-top: 0.3rem;">
            <span style="color: var(--parchment);">&#9876;</span> {{ line }}
        </div>
        {% elif 'artery' in lower_line or 'tendon' in lower_line or 'nerve' in lower_line or 'has been' in lower_line %}
        <div style="color: #c98b8b; padding-left: 1.2rem; font-size: 0.83rem;">{{ line }}</div>
        {% elif 'the force' in lower_line %}
        <div style="color: #c9a87b; padding-left: 1.2rem; font-size: 0.83rem;">{{ line }}</div>
        {% elif 'falls over' in lower_line or 'gives in' in lower_line or 'knocked unconscious' in lower_line or 'collapses' in lower_line %}
        <div style="font-style: italic; color: var(--ink-faded); margin-top: 0.2rem; padding-left: 1.2rem;">{{ line }}</div>
        {% elif 'cloven asunder' in lower_line or 'sails off' in lower_line or 'flies off' in lower_line %}
        <div style="color: #c98b8b; font-weight: bold; padding-left: 1.2rem;">{{ line }}</div>
        {% else %}
        <div style="color: var(--ink-faded); padding-left: 1.2rem; font-size: 0.83rem;">{{ line }}</div>
        {% endif %}
    {% endfor %}
</div>
{% endmacro %}

{% if combat_encounters %}
<h2 class="page-header" style="margin-top: 2rem;">Combat Log</h2>
<p class="page-subtitle">Expand a fight to see blow-by-blow details or generate a battle report</p>

<div class="parchment">
    {% for encounter in combat_encounters %}

    {% if encounter.is_engagement is defined and encounter.is_engagement %}
    {# Grouped engagement — multiple fights in one battle/siege #}
    <details class="combat-details" style="margin-bottom: 0.5rem; border: 1px solid var(--border); border-radius: 4px; border-left: 3px solid {% if encounter.is_lethal %}#c98b8b{% else %}var(--gold-dark){% endif %};">
        <summary style="padding: 0.6rem 0.8rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center;">
            <div>
                <span style="font-family: 'Cinzel', serif; font-size: 1.05rem; color: var(--gold-dark);">
                    Battle &mdash; {{ encounter.fight_count }} fights
                </span>
                <span style="font-size: 0.8rem; color: var(--ink-faded); margin-left: 0.5rem;">
                    {{ encounter.total_blows }} blows &middot; {{ encounter.participants | length }} combatants
                    {% if encounter.casualties %} &middot; <span style="color: #c98b8b;">{{ encounter.casualties }} killed</span>{% endif %}
                </span>
            </div>
            <span style="font-size: 0.8rem; color: var(--ink-faded);">{{ encounter.season | title }} {{ encounter.year }}</span>
        </summary>

        <div style="padding: 0.4rem 0.8rem 0.8rem;">
            <div style="font-size: 0.85rem; color: var(--ink-faded); margin-bottom: 0.5rem;">
                Combatants: {{ encounter.participants | join(', ') }}
            </div>

            {% for fight in encounter.fights %}
            <details class="combat-details" style="margin-bottom: 0.4rem; border: 1px solid rgba(184,160,120,0.2); border-radius: 3px; {% if fight.is_lethal %}border-left: 2px solid #c98b8b;{% endif %}">
                <summary style="padding: 0.4rem 0.6rem; cursor: pointer; font-size: 0.9rem;">
                    {{ fight.attacker }} <span style="color: var(--ink-faded);">vs</span> {{ fight.defender }}
                    {% if fight.weapon %}<span style="color: var(--gold-dark);"> &mdash; {{ fight.weapon }}</span>{% endif %}
                    <span style="color: var(--ink-faded);">
                        {{ fight.blows | length }} blow{{ 's' if fight.blows | length != 1 else '' }}{% if fight.outcome %} &middot; {{ fight.outcome }}{% endif %}{% if fight.is_lethal %} <span style="color: #c98b8b;">[FATAL]</span>{% endif %}
                    </span>
                </summary>
                <div style="padding: 0.3rem 0.6rem 0.5rem;">
                    {{ render_blowbyblow(fight.raw_lines) }}
                    {% if fight.outcome %}
                    <div style="margin-top: 0.3rem; font-style: italic; font-size: 0.85rem; color: {% if fight.is_lethal %}#c98b8b{% else %}var(--ink-faded){% endif %};">
                        {{ fight.defender }} {{ fight.outcome }}{% if fight.is_lethal %} — FATAL{% endif %}
                    </div>
                    {% endif %}
                </div>
            </details>
            {% endfor %}

            <div style="margin-top: 0.6rem;">
                <button class="btn btn-secondary" style="font-size: 0.85rem;" onclick="writeBattleReport({{ loop.index0 }})">
                    Write Siege Report
                </button>
                <div class="story-text streaming-text" id="battle-report-{{ loop.index0 }}" style="display: none; margin-top: 0.5rem;"></div>
            </div>
        </div>
    </details>

    {% else %}
    {# Solo fight #}
    <details class="combat-details" style="margin-bottom: 0.5rem; border: 1px solid var(--border); border-radius: 4px; {% if encounter.is_lethal %}border-left: 3px solid #c98b8b;{% endif %}">
        <summary style="padding: 0.6rem 0.8rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center;">
            <div>
                <span style="font-family: 'Cinzel', serif; font-size: 1rem;">
                    {{ encounter.attacker }} <span style="color: var(--ink-faded);">vs</span> {{ encounter.defender }}
                </span>
                {% if encounter.weapon %}<span style="font-size: 0.85rem; color: var(--gold-dark);"> &mdash; {{ encounter.weapon }}</span>{% endif %}
                <span style="font-size: 0.8rem; color: var(--ink-faded); margin-left: 0.5rem;">
                    {{ encounter.blows | length }} blow{{ 's' if encounter.blows | length != 1 else '' }}{% if encounter.outcome %} &middot; {{ encounter.outcome }}{% endif %}{% if encounter.is_lethal %} <span style="color: #c98b8b;">[FATAL]</span>{% endif %}
                </span>
            </div>
            <span style="font-size: 0.8rem; color: var(--ink-faded);">{{ encounter.season | title }} {{ encounter.year }}</span>
        </summary>

        <div style="padding: 0.4rem 0.8rem 0.8rem;">
            {{ render_blowbyblow(encounter.raw_lines) }}

            {% if encounter.outcome %}
            <div style="margin-top: 0.5rem; font-style: italic; font-size: 0.9rem; color: {% if encounter.is_lethal %}#c98b8b{% else %}var(--ink-faded){% endif %}; border-top: 1px solid var(--border); padding-top: 0.4rem;">
                {{ encounter.defender }} {{ encounter.outcome }}{% if encounter.is_lethal %} — FATAL{% endif %}
            </div>
            {% endif %}

            <div style="margin-top: 0.6rem;">
                {% if solo_reports and loop.index0 in solo_reports %}
                <div id="solo-report-{{ loop.index0 }}" style="margin-top: 0.5rem; line-height: 1.7;">
                    <div class="story-text" style="white-space: pre-wrap;">{{ solo_reports[loop.index0].text }}</div>
                    <div style="font-size: 0.8rem; color: var(--ink-faded); text-align: right; font-style: italic; margin-top: 0.3rem;">
                        — {{ solo_reports[loop.index0].author }}
                    </div>
                </div>
                <button class="btn btn-secondary" style="font-size: 0.8rem; margin-top: 0.3rem;" onclick="rewriteBattleReport({{ loop.index0 }})">
                    Rewrite
                </button>
                <div class="story-text streaming-text" id="battle-report-{{ loop.index0 }}" style="display: none; margin-top: 0.5rem;"></div>
                {% else %}
                <button class="btn btn-secondary" style="font-size: 0.85rem;" onclick="writeBattleReport({{ loop.index0 }})">
                    Write Battle Report
                </button>
                <div class="story-text streaming-text" id="battle-report-{{ loop.index0 }}" style="display: none; margin-top: 0.5rem;"></div>
                {% endif %}
            </div>
        </div>
    </details>
    {% endif %}

    {% endfor %}
</div>
{% endif %}

{% if saved_battle_reports %}
<h2 class="page-header" style="margin-top: 2rem;">Battle Reports</h2>
<p class="page-subtitle">Accounts of past engagements, written by those who were there</p>

<div class="parchment">
    {% for report in saved_battle_reports | reverse %}
    <details style="margin-bottom: 0.8rem;">
        <summary style="cursor: pointer; font-family: 'Cinzel', serif; font-size: 1rem;">
            {{ report.season | default('') | title }} of Year {{ report.year | default('?') }}
            — {{ report.participants | join(', ') | truncate(60) }}
            {% if report.is_siege %}<span style="color: var(--gold-dark);">[Siege]</span>{% endif %}
            {% if report.is_lethal %}<span style="color: #c98b8b;">[Fatal]</span>{% endif %}
        </summary>
        <div style="padding: 0.5rem 0; line-height: 1.7;">
            <div id="engagement-report-{{ loop.index0 }}" class="story-text" style="white-space: pre-wrap;">{{ report.text }}</div>
            <div style="margin-top: 0.5rem; font-size: 0.8rem; color: var(--ink-faded); text-align: right; font-style: italic;">
                — {{ report.author }}
            </div>
            {% if report.encounter_index is defined %}
            <button class="btn btn-secondary" style="font-size: 0.8rem; margin-top: 0.3rem;" onclick="rewriteBattleReport({{ report.encounter_index }})">
                Rewrite
            </button>
            <div class="story-text streaming-text" id="battle-report-{{ report.encounter_index }}" style="display: none; margin-top: 0.5rem;"></div>
            {% endif %}
        </div>
    </details>
    {% endfor %}
</div>
{% endif %}

{% if chat_lines %}
<h2 class="page-header" style="margin-top: 2rem;">Chat Log</h2>
<p class="page-subtitle">What the dwarves have been saying and feeling</p>

<div class="parchment">
    <div style="margin-bottom: 1rem;">
        <button class="btn btn-primary" id="chat-summarize-btn" onclick="summarizeChat()">Summarize with AI</button>
        <div class="story-text streaming-text" id="chat-summary" style="display: none; margin-top: 0.8rem;"></div>
    </div>

    <div style="max-height: 500px; overflow-y: auto;">
        {% for chat in chat_lines %}
        <div style="margin-bottom: 0.3rem; font-size: 0.88rem; line-height: 1.5;">
            <strong style="color: var(--parchment);">{{ chat.name }}</strong><span style="color: var(--ink-faded);">, {{ chat.profession }}:</span>
            <span style="color: var(--ink-light);">{{ chat.message }}</span>
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
let ws = null;
let allEvents = [];

function connectEventFeed() {
    const dot = document.getElementById('live-dot');
    const status = document.getElementById('live-status');

    ws = new WebSocket('ws://' + window.location.host + '/ws/events');

    ws.onopen = () => {
        dot.classList.remove('inactive');
        status.textContent = 'Connected — waiting for events';
    };

    ws.onmessage = (msg) => {
        const event = JSON.parse(msg.data);
        if (event.type === 'status') {
            status.textContent = event.description;
            return;
        }
        dot.classList.remove('inactive');
        status.textContent = 'Live — receiving events';
        addEventCard(event);
    };

    ws.onclose = () => {
        dot.classList.add('inactive');
        status.textContent = 'Disconnected — will retry in 5s...';
        setTimeout(connectEventFeed, 5000);
    };

    ws.onerror = () => {
        // Don't show error immediately — onclose will handle retry
    };
}

function addEventCard(event) {
    const feed = document.getElementById('event-feed');
    // Remove empty state message if present
    const emptyMsg = feed.querySelector('p');
    if (emptyMsg) emptyMsg.remove();

    const card = document.createElement('div');
    card.className = 'event-card ' + (event.type || '');
    card.dataset.type = event.type || 'unknown';

    const timeDiv = document.createElement('div');
    timeDiv.className = 'event-time';
    timeDiv.textContent = `${event.season || ''} ${event.year || ''} · ${event.type || ''}`;

    const textDiv = document.createElement('div');
    textDiv.className = 'event-text';
    textDiv.textContent = event.description || '';

    card.appendChild(timeDiv);
    card.appendChild(textDiv);

    feed.insertBefore(card, feed.firstChild);
    allEvents.unshift(event);

    // Apply filter
    filterEvents();
}

function filterEvents() {
    const filter = document.getElementById('event-filter').value;
    const cards = document.querySelectorAll('.event-card');
    cards.forEach(card => {
        if (filter === 'all' || card.dataset.type === filter) {
            card.style.display = '';
        } else {
            card.style.display = 'none';
        }
    });
}

connectEventFeed();

async function summarizeChat() {
    const btn = document.getElementById('chat-summarize-btn');
    const summaryEl = document.getElementById('chat-summary');
    if (!btn || !summaryEl) return;

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

    try {
        const response = await fetch('/api/chat/summarize', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({}),
        });
        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;
            summaryEl.innerHTML = fullText.replace(/\n/g, '<br>') + '<span class="streaming-cursor"></span>';
        }

        summaryEl.innerHTML = fullText.replace(/\n/g, '<br>');
    } catch (err) {
        summaryEl.innerHTML = '<em style="color: var(--danger);">Generation failed: ' + err.message + '</em>';
    } finally {
        btn.disabled = false;
        btn.textContent = 'Summarize with AI';
    }
}

async function rewriteBattleReport(index) {
    const existingEl = document.getElementById('solo-report-' + index) || document.getElementById('engagement-report-' + index);
    if (existingEl) existingEl.style.display = 'none';
    await writeBattleReport(index);
}

async function writeBattleReport(index) {
    const textEl = document.getElementById('battle-report-' + index);
    const btn = event.target;
    const originalText = btn.textContent;

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

    try {
        const response = await fetch('/api/battle-report/' + index, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({}),
        });
        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>');
    } catch (err) {
        textEl.innerHTML = '<em style="color: var(--danger);">Generation failed: ' + err.message + '</em>';
    } finally {
        btn.disabled = false;
        btn.textContent = originalText;
    }
}
</script>
{% endblock %}