{% 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" style="padding: 0; overflow: hidden;">
    <div class="char-sheet" style="display: grid !important; grid-template-columns: 1fr 1fr !important;">
        <div class="char-header">
            <img src="/api/portraits/{{ dwarf.unit_id }}" alt="" class="dwarf-portrait" loading="lazy">
            <div class="char-name">{{ dwarf.name }}</div>
            <div class="char-title">
                {% if dwarf.sex == 'male' %}<span class="sex-badge male" title="Male">&#9794;</span>{% elif dwarf.sex == 'female' %}<span class="sex-badge female" title="Female">&#9792;</span>{% endif %}
                {% set unique_positions = dwarf.noble_positions | reject('equalto', dwarf.profession) | list %}
                {{ dwarf.profession }}
                {% if unique_positions %} &mdash; {{ unique_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.happiness_desc %}
            <div style="margin-top: 0.3rem; font-style: italic; color: var(--ink-faded);">
                Mood: {{ dwarf.happiness_desc }}
                <span class="mood-indicator mood-{{ dwarf.happiness_desc }}">&#9679;</span>
            </div>
            {% elif dwarf.stress_desc %}
            <div style="margin-top: 0.3rem; font-style: italic; color: var(--ink-faded);">
                Mood: {{ dwarf.stress_desc }}
            </div>
            {% endif %}
            {% if dwarf.hist_figure_id %}
            <div style="margin-top: 0.4rem;">
                <a href="/lore/figure/{{ dwarf.hist_figure_id }}" class="lore-link" style="font-size: 0.85rem;">View in Legends &rarr;</a>
            </div>
            {% endif %}
            <div style="margin-top: 0.5rem;">
                <select id="dwarf-role" onchange="setHighlight({{ dwarf.unit_id }}, '{{ dwarf.name | replace("'", "\\'") }}', this.value)"
                    style="font-family: 'Crimson Text', serif; padding: 0.3rem; border: 1px solid var(--border); border-radius: 3px; background: rgba(244,232,193,0.1); color: var(--parchment); font-size: 0.85rem;">
                    <option value="">No highlight</option>
                    <option value="protagonist" {% if dwarf.highlight_role == 'protagonist' %}selected{% endif %}>Protagonist</option>
                    <option value="antagonist" {% if dwarf.highlight_role == 'antagonist' %}selected{% endif %}>Antagonist</option>
                    <option value="watchlist" {% if dwarf.highlight_role == 'watchlist' %}selected{% endif %}>Watchlist</option>
                    <option value="suspicious" {% if dwarf.highlight_role == 'suspicious' %}selected{% endif %}>Suspicious</option>
                </select>
            </div>
        </div>

        <!-- Left Column: Personality -->
        <div class="stat-section" style="grid-column: 1; grid-row: 2;">
            {% if dwarf.personality_traits %}
            <div class="stat-block">
                <h3>Personality</h3>
                <ul class="stat-list">
                    {% for trait in dwarf.personality_traits %}
                    <li>{{ trait }}</li>
                    {% endfor %}
                </ul>
            </div>
            {% endif %}

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

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

            {% if dwarf.relationships %}
            <div class="stat-block">
                <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>
            </div>
            {% endif %}
        </div>

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

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

            {% if dwarf.skills %}
            <div class="stat-block">
                <h3>Skills ({{ dwarf.skills | length }})</h3>
                <ul class="stat-list">
                    {% for skill in dwarf.skills %}
                    <li style="display: flex; justify-content: space-between; align-items: center;">
                        <span>{{ skill.name }}</span>
                        <span class="skill-level skill-level-{{ skill.level_num }}" style="font-size: 0.75rem; padding: 0.1rem 0.4rem; border-radius: 3px; white-space: nowrap;
                            {% if skill.level_num >= 15 %}background: rgba(201,168,76,0.25); color: #c9a84c; font-weight: 700;
                            {% elif skill.level_num >= 12 %}background: rgba(139,37,0,0.15); color: #c98b8b;
                            {% elif skill.level_num >= 8 %}background: rgba(45,90,39,0.15); color: #8bc98b;
                            {% elif skill.level_num >= 4 %}background: rgba(74,111,165,0.15); color: #8b9cc9;
                            {% else %}background: rgba(122,101,88,0.1); color: var(--ink-faded);
                            {% endif %}">{{ skill.level }}</span>
                    </li>
                    {% endfor %}
                </ul>
            </div>
            {% endif %}

            {% if dwarf.pets %}
            <div class="stat-block">
                <h3>Pets</h3>
                <ul class="stat-list">
                    {% for pet in dwarf.pets %}
                    <li>
                        {% if pet.name %}{{ pet.name }} — {% endif %}{{ pet.race }}
                        {% if not pet.is_alive %}<span class="deceased-badge" style="font-size: 0.75rem;">Deceased</span>{% endif %}
                    </li>
                    {% endfor %}
                </ul>
            </div>
            {% endif %}
        </div>

        <!-- Equipment & Wounds — full-width side-by-side row -->
        {% if dwarf.equipment or dwarf.wounds %}
        <div class="equip-wounds-row">
            <div>
                {% if dwarf.equipment %}
                <div class="stat-block">
                <h3>Equipment</h3>
                {% set weapons = dwarf.equipment | selectattr('mode', 'equalto', 'Weapon') | list if dwarf.equipment[0] is mapping else [] %}
                {% set strapped = dwarf.equipment | selectattr('mode', 'equalto', 'Strapped') | list if dwarf.equipment[0] is mapping else [] %}
                {% set worn = dwarf.equipment | selectattr('mode', 'equalto', 'Worn') | list if dwarf.equipment[0] is mapping else [] %}
                {% if weapons %}
                <div style="margin-bottom: 0.4rem;">
                    <span style="font-weight: bold; color: var(--gold-dark); font-size: 0.85rem;">Weapons</span>
                    <ul class="stat-list" style="margin-top: 0.2rem;">
                    {% for item in weapons %}
                        <li>{{ item.description }}</li>
                    {% endfor %}
                    </ul>
                </div>
                {% endif %}
                {% if strapped %}
                <div style="margin-bottom: 0.4rem;">
                    <span style="font-weight: bold; color: var(--gold-dark); font-size: 0.85rem;">Armor</span>
                    <ul class="stat-list" style="margin-top: 0.2rem;">
                    {% for item in strapped %}
                        <li>{{ item.description }}</li>
                    {% endfor %}
                    </ul>
                </div>
                {% endif %}
                {% if worn %}
                <div style="margin-bottom: 0.4rem;">
                    <span style="font-weight: bold; color: var(--gold-dark); font-size: 0.85rem;">Clothing</span>
                    <ul class="stat-list" style="margin-top: 0.2rem;">
                    {% for item in worn %}
                        <li>{{ item.description }}</li>
                    {% endfor %}
                    </ul>
                </div>
                {% endif %}
                </div>
                {% endif %}
            </div>
            <div>
                {% if dwarf.wounds %}
                {% set permanent_wounds = [] %}
                {% for wound in dwarf.wounds %}
                    {% if wound is mapping and wound.is_permanent %}
                        {% if permanent_wounds.append(wound) %}{% endif %}
                    {% elif wound is not mapping %}
                        {% if permanent_wounds.append(wound) %}{% endif %}
                    {% endif %}
                {% endfor %}
                {% if permanent_wounds %}
                <div class="stat-block">
                    <h3>Wounds</h3>
                    <ul class="stat-list">
                        {% for wound in permanent_wounds %}
                        {% if wound is mapping %}
                        <li style="color: #c98b8b;">
                            {{ wound.body_part }} <span style="font-size: 0.8rem; font-weight: bold;">({{ wound.wound_type }})</span>
                        </li>
                        {% else %}
                        <li style="color: var(--danger);">{{ wound }}</li>
                        {% endif %}
                        {% endfor %}
                    </ul>
                </div>
                {% endif %}
                {% endif %}
            </div>
        </div>
        {% endif %}

        <!-- Combat Record (collapsible) -->
        {% if dwarf.combat_highlights %}
        <details class="sheet-collapsible" open>
            <summary>Combat Record ({{ dwarf.combat_highlights | length }})</summary>
            <div class="collapsible-body">
            {% 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>
        </details>
        {% endif %}

        <!-- Event History (collapsible, starts collapsed) -->
        {% if dwarf.events %}
        <details class="sheet-collapsible">
            <summary>Event History ({{ dwarf.events | length }})</summary>
            <div class="collapsible-body">
            {% 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>
        </details>
        {% 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>
                <button class="dwarf-tab" onclick="switchTab('timeline')">Timeline{% if dwarf.timeline_events %} ({{ dwarf.timeline_events | 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 no_llm_mode %}
                {% 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>
                {% endif %}

                <!-- Manual biography writing -->
                <details style="margin-bottom: 0.8rem;" {% if no_llm_mode %}open{% endif %}>
                    <summary style="cursor: pointer; color: var(--ink-faded); font-size: 0.9rem;">
                        {% if no_llm_mode %}Write a biography entry{% else %}Write your own entry{% endif %}
                    </summary>
                    <div style="margin-top: 0.5rem;">
                        <textarea id="manual-bio-text" rows="6" placeholder="Write about this dwarf... 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-bio-images">Attach Screenshots</label>
                            <input type="file" id="manual-bio-images" multiple accept="image/png,image/jpeg,image/gif,image/webp" style="display: none;">
                        </div>
                        <div id="manual-bio-previews" class="image-previews"></div>
                        <div class="btn-row" style="margin-top: 0.5rem;">
                            <button class="btn btn-primary" onclick="saveManualBio({{ dwarf.unit_id }})">Save Entry</button>
                        </div>
                    </div>
                </details>

                {% 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 %}{% if entry.get('is_manual') %}<span class="manual-badge">Player</span> {% endif %}{{ entry.season | default('') | title }} of Year {{ entry.year | default('?') }}
                        </div>
                        <div class="story-text">{{ entry.text | inline_images | hotlink | 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 not no_llm_mode %}
                {% 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>
                {% endif %}

                <!-- Manual diary writing -->
                <details style="margin-bottom: 0.8rem;" {% if no_llm_mode %}open{% endif %}>
                    <summary style="cursor: pointer; color: var(--ink-faded); font-size: 0.9rem;">
                        {% if no_llm_mode %}Write a diary entry{% else %}Write your own diary entry{% endif %}
                    </summary>
                    <div style="margin-top: 0.5rem;">
                        <textarea id="manual-diary-text" rows="6" placeholder="Write a diary entry in this dwarf's voice..."
                            class="manual-textarea"></textarea>
                        <div class="image-upload-row">
                            <label class="image-upload-btn" for="manual-diary-images">Attach Screenshots</label>
                            <input type="file" id="manual-diary-images" multiple accept="image/png,image/jpeg,image/gif,image/webp" style="display: none;">
                        </div>
                        <div id="manual-diary-previews" class="image-previews"></div>
                        <div class="btn-row" style="margin-top: 0.5rem;">
                            <button class="btn btn-primary" onclick="saveManualDiary({{ dwarf.unit_id }})">Save Entry</button>
                        </div>
                    </div>
                </details>

                {% 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;">
                            {% if entry.get('is_manual') %}<span class="manual-badge">Player</span> {% endif %}{{ entry.season | default('') | title }} of Year {{ entry.year | default('?') }}
                        </div>
                        <div class="story-text">{{ entry.text | inline_images | hotlink | 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>

            <!-- Timeline Tab -->
            <div class="dwarf-tab-content" id="tab-timeline" style="display: none;">
                {% if dwarf.highlight_role %}
                <div style="margin-bottom: 1rem;">
                    <span class="role-badge role-{{ dwarf.highlight_role }}">{{ dwarf.highlight_role }}</span>
                </div>
                {% endif %}

                {% if dwarf.timeline_events %}
                <div class="dwarf-timeline">
                    {% for period in dwarf.timeline_events %}
                    <div class="timeline-period">
                        <div class="timeline-period-label">{{ period.season }} of Year {{ period.year }}</div>
                        {% for evt in period.events %}
                        <div class="timeline-event">
                            <div class="timeline-node timeline-icon-{{ evt.icon }}"></div>
                            <div class="timeline-event-card">
                                <span class="timeline-event-type">{{ evt.type }}</span>
                                <span class="timeline-event-desc">{{ evt.description }}</span>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <em style="color: var(--ink-faded);">
                    No events recorded for this dwarf yet. Play through some seasons to build their story.
                </em>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

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

async function setHighlight(unitId, name, role) {
    if (!role) {
        await fetch('/api/highlights/' + unitId, { method: 'DELETE' });
    } else {
        await fetch('/api/highlights', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ unit_id: unitId, name: name, role: role }),
        });
    }
}

async function saveManualBio(unitId) {
    const text = document.getElementById('manual-bio-text').value.trim();
    if (!text) return;
    try {
        const resp = await fetch('/api/bio/' + unitId + '/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 saveManualDiary(unitId) {
    const text = document.getElementById('manual-diary-text').value.trim();
    if (!text) return;
    try {
        const resp = await fetch('/api/diary/' + unitId + '/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);
    }
}

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(); });
    setupImageUpload('manual-bio-images', 'manual-bio-previews', 'manual-bio-text');
    setupImageUpload('manual-diary-images', 'manual-diary-previews', 'manual-diary-text');
});

// 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 %}