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

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

<div class="parchment">
    <div class="char-sheet">
        <div class="char-header">
            <div class="char-name">{{ dwarf.name }}</div>
            <div class="char-title">
                {{ dwarf.profession }}
                {% if dwarf.noble_positions %} &mdash; {{ dwarf.noble_positions | join(', ') }}{% endif %}
                {% if dwarf.military_squad %} &mdash; {{ dwarf.military_squad }}{% endif %}
                &middot; Age {{ dwarf.age | int }}
                {% if not dwarf.is_alive %}
                <span class="deceased-badge">Deceased</span>
                {% endif %}
            </div>
            {% if dwarf.stress_desc %}
            <div style="margin-top: 0.3rem; font-style: italic; color: var(--ink-faded);">
                Mood: {{ dwarf.stress_desc }}
            </div>
            {% endif %}
        </div>

        <!-- Left Column: Personality -->
        <div class="stat-section">
            {% if dwarf.personality_traits %}
            <h3>Personality</h3>
            <ul class="stat-list">
                {% for trait in dwarf.personality_traits %}
                <li>{{ trait }}</li>
                {% endfor %}
            </ul>
            {% endif %}

            {% if dwarf.beliefs %}
            <h3>Values &amp; Beliefs</h3>
            <ul class="stat-list">
                {% for belief in dwarf.beliefs %}
                <li>{{ belief }}</li>
                {% endfor %}
            </ul>
            {% endif %}

            {% if dwarf.goals %}
            <h3>Dreams</h3>
            <ul class="stat-list">
                {% for goal in dwarf.goals %}
                <li>{{ goal }}</li>
                {% endfor %}
            </ul>
            {% endif %}

            {% if dwarf.relationships %}
            <h3>Relationships</h3>
            <ul class="stat-list">
                {% for rel in dwarf.relationships %}
                <li><strong>{{ rel.type }}:</strong> {{ rel.name }}</li>
                {% endfor %}
            </ul>
            <a href="/dwarves/relationships" style="font-size: 0.85rem; color: var(--gold-dark);">View Relationship Web &rarr;</a>
            {% endif %}
        </div>

        <!-- Right Column: Attributes & Skills -->
        <div class="stat-section">
            {% if dwarf.physical_attrs %}
            <h3>Physical</h3>
            <ul class="stat-list">
                {% for attr in dwarf.physical_attrs %}
                <li>{{ attr }}</li>
                {% endfor %}
            </ul>
            {% endif %}

            {% if dwarf.mental_attrs %}
            <h3>Mind</h3>
            <ul class="stat-list">
                {% for attr in dwarf.mental_attrs %}
                <li>{{ attr }}</li>
                {% endfor %}
            </ul>
            {% endif %}

            {% if dwarf.skills %}
            <h3>Skills</h3>
            <ul class="stat-list">
                {% for skill in dwarf.skills %}
                <li>{{ skill }}</li>
                {% endfor %}
            </ul>
            {% endif %}

            {% if dwarf.equipment %}
            <h3>Equipment</h3>
            <ul class="stat-list">
                {% for item in dwarf.equipment %}
                <li>{{ item }}</li>
                {% endfor %}
            </ul>
            {% endif %}

            {% if dwarf.wounds %}
            <h3>Wounds</h3>
            <ul class="stat-list">
                {% for wound in dwarf.wounds %}
                <li style="color: var(--danger);">{{ wound }}</li>
                {% endfor %}
            </ul>
            {% endif %}
        </div>

        <!-- Combat Highlights -->
        {% if dwarf.combat_highlights %}
        <div class="bio-section">
            <h3>Combat Record</h3>
            {% for fight in dwarf.combat_highlights %}
            <div style="margin-bottom: 0.8rem; padding: 0.6rem; border: 1px solid var(--border); border-radius: 4px; {% if fight.is_lethal %}border-left: 3px solid #c98b8b;{% endif %}">
                <div style="display: flex; justify-content: space-between; align-items: baseline;">
                    <div style="font-size: 0.95rem;">
                        {% if fight.role == 'attacker' %}
                        <strong>{{ dwarf.name.split(' ')[0] }}</strong> <span style="color: var(--ink-faded);">attacked</span> {{ fight.opponent }}
                        {% else %}
                        {{ fight.opponent }} <span style="color: var(--ink-faded);">attacked</span> <strong>{{ dwarf.name.split(' ')[0] }}</strong>
                        {% endif %}
                    </div>
                    <div style="font-size: 0.8rem; color: var(--ink-faded);">{{ fight.season }} {{ fight.year }}</div>
                </div>
                <div style="font-size: 0.85rem; color: var(--ink-light); margin-top: 0.2rem;">
                    {% if fight.weapon %}<span style="color: var(--gold-dark);">{{ fight.weapon }}</span> &middot; {% endif %}
                    {{ fight.blow_count }} blow{{ 's' if fight.blow_count != 1 else '' }}
                    {% if fight.body_parts %} &middot; {{ fight.body_parts | join(', ') }}{% endif %}
                    {% if fight.outcome %} &middot; <em{% if fight.is_lethal %} style="color: #c98b8b;"{% endif %}>{{ fight.outcome }}{% if fight.is_lethal %} [FATAL]{% endif %}</em>{% endif %}
                </div>
            </div>
            {% endfor %}
        </div>
        {% endif %}

        <!-- Event History -->
        {% if dwarf.events %}
        <div class="bio-section">
            <h3>Event History</h3>
            {% for evt in dwarf.events %}
            <div class="event-card {{ evt.type | lower | replace(' ', '_') }}" style="margin-bottom: 0.4rem;">
                <div class="event-time">{{ evt.season }} {{ evt.year }} &middot; {{ evt.type }}</div>
                <div class="event-text">{{ evt.description }}</div>
            </div>
            {% endfor %}
        </div>
        {% endif %}

        <!-- Tabbed sections: Notes | Biography | Diary -->
        <div class="bio-section">
            <div class="dwarf-tabs">
                <button class="dwarf-tab active" onclick="switchTab('notes')">Notes</button>
                <button class="dwarf-tab" onclick="switchTab('biography')">Biography{% if dwarf.bio_entries %} ({{ dwarf.bio_entries | length }}){% endif %}</button>
                <button class="dwarf-tab" onclick="switchTab('diary')">Diary{% if dwarf.diary_entries %} ({{ dwarf.diary_entries | length }}){% endif %}</button>
            </div>

            <!-- Notes Tab -->
            <div class="dwarf-tab-content" id="tab-notes">
                <div id="notes-list">
                    {% for note in 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" title="{{ 'Unresolve' if note.resolved else 'Resolve' }}">{{ '↩' if note.resolved else '✓' }}</button>
                            <button onclick="deleteNote('{{ note.id }}')" class="note-btn" title="Delete">✕</button>
                        </span>
                    </div>
                    {% endfor %}
                </div>
                <div class="note-add" style="margin-top: 0.8rem; display: flex; gap: 0.5rem; align-items: center;">
                    <select id="note-tag" style="font-family: 'Crimson Text', serif; padding: 0.4rem; border: 1px solid var(--border); border-radius: 3px;">
                        <option value="suspicion">Suspicion</option>
                        <option value="fact">Fact</option>
                        <option value="theory">Theory</option>
                        <option value="rumor">Rumor</option>
                        <option value="secret">Secret</option>
                        <option value="foreshadow">Foreshadow</option>
                        <option value="mood">Mood</option>
                        <option value="what_if">What If</option>
                    </select>
                    <input type="text" id="note-text" placeholder="Write a note about this dwarf..."
                        style="flex: 1; font-family: 'Crimson Text', serif; padding: 0.4rem; border: 1px solid var(--border); border-radius: 3px;">
                    <button class="btn btn-secondary" onclick="addNote()" style="padding: 0.4rem 1rem;">Add</button>
                </div>
            </div>

            <!-- Biography Tab -->
            <div class="dwarf-tab-content" id="tab-biography" style="display: none;">
                {% if not dwarf.is_alive and not dwarf.has_eulogy %}
                <div class="memorial-section" style="margin-bottom: 1rem;">
                    <div class="btn-row">
                        <button class="btn btn-primary memorial-btn" id="eulogy-btn" onclick="generateEulogy({{ dwarf.unit_id }})">
                            Write Eulogy
                        </button>
                    </div>
                    <div class="story-text streaming-text" id="eulogy-text" style="display: none;"></div>
                </div>
                {% endif %}

                <details style="margin-bottom: 0.8rem;">
                    <summary style="cursor: pointer; color: var(--ink-faded); font-size: 0.9rem;">Add context for this entry (optional)</summary>
                    <div style="margin-top: 0.5rem; display: flex; gap: 0.5rem;">
                        <input type="text" id="bio-context" placeholder="e.g. 'Focus on their reaction to the siege'"
                            style="flex: 1; font-family: 'Crimson Text', serif; padding: 0.4rem; border: 1px solid var(--border); border-radius: 3px;">
                    </div>
                </details>

                <div class="btn-row">
                    <button class="btn btn-primary" id="bio-btn" onclick="generateBio({{ dwarf.unit_id }})">
                        {% if dwarf.bio_entries %}Write New Entry{% else %}Begin Biography{% endif %}
                    </button>
                </div>

                <div class="story-text streaming-text" id="bio-text" style="display: none;"></div>

                {% if dwarf.bio_entries %}
                    {% for entry in dwarf.bio_entries | reverse %}
                    <div class="chronicle-entry{% if entry.get('is_eulogy') %} eulogy-entry{% endif %}" style="margin-bottom: 1.5rem;">
                        <div class="season-header" style="font-size: 1rem;">
                            {% if entry.get('is_eulogy') %}Memorial — {% endif %}{{ entry.season | default('') | title }} of Year {{ entry.year | default('?') }}
                        </div>
                        <div class="story-text">{{ entry.text | replace('\n', '<br>') | safe }}</div>
                    </div>
                    {% if not loop.last %}
                    <div class="divider" style="margin: 1rem 0;">&loz;</div>
                    {% endif %}
                    {% endfor %}
                {% else %}
                    <em style="color: var(--ink-faded);">
                        No biography entries yet. Click above to write the first chapter of this dwarf's story.
                    </em>
                {% endif %}
            </div>

            <!-- Diary Tab -->
            <div class="dwarf-tab-content" id="tab-diary" style="display: none;">
                {% if dwarf.is_alive %}
                <div class="btn-row" style="margin-bottom: 1rem;">
                    <button class="btn btn-primary" id="diary-btn" onclick="generateDiary({{ dwarf.unit_id }})">
                        Write Diary Entry
                    </button>
                </div>
                {% endif %}

                <div class="story-text streaming-text" id="diary-text" style="display: none;"></div>

                {% if dwarf.diary_entries %}
                    {% for entry in dwarf.diary_entries | reverse %}
                    <div class="chronicle-entry diary-entry" style="margin-bottom: 1.5rem;">
                        <div class="season-header" style="font-size: 1rem;">
                            {{ entry.season | default('') | title }} of Year {{ entry.year | default('?') }}
                        </div>
                        <div class="story-text">{{ entry.text | replace('\n', '<br>') | safe }}</div>
                    </div>
                    {% if not loop.last %}
                    <div class="divider" style="margin: 1rem 0;">&loz;</div>
                    {% endif %}
                    {% endfor %}
                {% else %}
                    <em style="color: var(--ink-faded);">
                        No diary entries yet. Click above to hear this dwarf's inner thoughts.
                    </em>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
const UNIT_ID = {{ dwarf.unit_id }};

function switchTab(tabName) {
    document.querySelectorAll('.dwarf-tab-content').forEach(el => el.style.display = 'none');
    document.querySelectorAll('.dwarf-tab').forEach(el => el.classList.remove('active'));
    document.getElementById('tab-' + tabName).style.display = 'block';
    event.target.classList.add('active');
}

async function addNote() {
    const tag = document.getElementById('note-tag').value;
    const text = document.getElementById('note-text').value.trim();
    if (!text) return;

    try {
        const response = await fetch('/api/notes', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ tag, text, target_type: 'dwarf', target_id: UNIT_ID }),
        });
        if (!response.ok) throw new Error('Failed');
        const note = await response.json();

        // Add note to DOM
        const list = document.getElementById('notes-list');
        const card = document.createElement('div');
        card.className = 'note-card';
        card.dataset.id = note.id;
        card.innerHTML = '<span class="note-tag tag-' + note.tag + '">' + note.tag + '</span>' +
            '<span class="note-text">' + text + '</span>' +
            '<span class="note-actions">' +
            '<button onclick="resolveNote(\'' + note.id + '\')" class="note-btn" title="Resolve">✓</button>' +
            '<button onclick="deleteNote(\'' + note.id + '\')" class="note-btn" title="Delete">✕</button>' +
            '</span>';
        list.appendChild(card);
        document.getElementById('note-text').value = '';
    } catch (err) {
        alert('Failed to add note');
    }
}

async function resolveNote(noteId) {
    try {
        const response = await fetch('/api/notes/' + noteId + '/resolve', { method: 'POST' });
        if (!response.ok) throw new Error('Failed');
        const card = document.querySelector('.note-card[data-id="' + noteId + '"]');
        if (card) card.classList.toggle('resolved');
    } catch (err) {
        alert('Failed to resolve note');
    }
}

async function deleteNote(noteId) {
    try {
        const response = await fetch('/api/notes/' + noteId, { method: 'DELETE' });
        if (!response.ok) throw new Error('Failed');
        const card = document.querySelector('.note-card[data-id="' + noteId + '"]');
        if (card) {
            card.style.opacity = '0.3';
            card.style.transition = 'opacity 0.3s';
            setTimeout(() => card.remove(), 300);
        }
    } catch (err) {
        alert('Failed to delete note');
    }
}

// Enter key adds note
document.addEventListener('DOMContentLoaded', () => {
    const input = document.getElementById('note-text');
    if (input) input.addEventListener('keydown', (e) => { if (e.key === 'Enter') addNote(); });
});

// Shared streaming helper — handles fetch, stream, error, and button reset
async function streamGenerate(url, body, btn, textEl, originalText) {
    btn.disabled = true;
    btn.textContent = 'Writing...';
    textEl.style.display = 'block';
    textEl.innerHTML = '<span class="streaming-cursor"></span>';

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

async function generateBio(unitId) {
    const btn = document.getElementById('bio-btn');
    const contextEl = document.getElementById('bio-context');
    await streamGenerate('/api/bio/' + unitId, { context: contextEl ? contextEl.value.trim() : '' }, btn, document.getElementById('bio-text'), btn.textContent);
}

async function generateEulogy(unitId) {
    await streamGenerate('/api/eulogy/' + unitId, { context: '' }, document.getElementById('eulogy-btn'), document.getElementById('eulogy-text'), 'Write Eulogy');
}

async function generateDiary(unitId) {
    await streamGenerate('/api/diary/' + unitId, { context: '' }, document.getElementById('diary-btn'), document.getElementById('diary-text'), 'Write Diary Entry');
}
</script>
{% endblock %}