{% extends "dashboard/base.html" %}

{% block title %}Email Threads - Cyborg Dashboard{% endblock %}

{% block content %}
<!-- Page Header -->
<div class="mb-8">
    <h1 class="text-3xl font-bold mb-2">
        <span class="neon-text-cyan">Email</span> Threads
    </h1>
    <p class="text-text-secondary">View and manage email conversation threads and their agendas.</p>
</div>

<!-- Stats Row -->
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
    <div class="glass-card neon-border-cyan rounded-xl p-5">
        <div class="text-3xl font-bold font-mono-data text-accent-cyan">{{ threads|length }}</div>
        <div class="text-text-muted text-sm mt-1">Total Threads</div>
    </div>
    <div class="glass-card rounded-xl p-5">
        <div class="text-3xl font-bold font-mono-data text-accent-green">{{ active_count }}</div>
        <div class="text-text-muted text-sm mt-1">Active</div>
    </div>
    <div class="glass-card rounded-xl p-5">
        <div class="text-3xl font-bold font-mono-data text-accent-purple">{{ inbox_count }}</div>
        <div class="text-text-muted text-sm mt-1">Inboxes</div>
    </div>
</div>

<!-- Sync Button -->
<div class="mb-6">
    <button onclick="syncEmails(this)" class="px-4 py-2 rounded-lg bg-accent-cyan/10 border border-accent-cyan/30 text-accent-cyan text-sm hover:bg-accent-cyan/20 transition-colors cursor-pointer">
        Sync from AgentMail
    </button>
    <span id="sync-result" class="text-xs text-text-muted ml-3"></span>
</div>

<!-- Thread List -->
<div class="space-y-4">
    {% for thread in threads %}
    {% set thread_messages = messages_by_thread.get(thread.id, []) %}
    <div class="glass-card rounded-xl overflow-hidden card-hover">
        <!-- Thread Header (clickable) -->
        <button onclick="toggleThread('thread-{{ loop.index }}')"
                class="w-full text-left p-6 flex items-start gap-4 hover:bg-accent-cyan/5 transition-colors">
            <div class="flex-1 min-w-0">
                <div class="flex items-center gap-3 mb-2">
                    <h3 class="text-lg font-semibold truncate">{{ thread.subject or "(no subject)" }}</h3>
                    {% if thread.is_active %}
                    <span class="text-xs px-2 py-0.5 rounded bg-accent-green/20 text-accent-green border border-accent-green/30">Active</span>
                    {% else %}
                    <span class="text-xs px-2 py-0.5 rounded bg-bg-elevated text-text-muted border border-accent-cyan/10">Inactive</span>
                    {% endif %}
                    <span class="text-xs text-text-muted">{{ thread_messages|length }} message{{ 's' if thread_messages|length != 1 else '' }}</span>
                </div>

                <div class="flex flex-wrap items-center gap-3 text-xs text-text-muted">
                    {% if thread.contact_email %}
                    <span class="text-text-secondary">{{ thread.contact_email }}</span>
                    {% endif %}
                    {% if thread.last_message_at %}
                    <span>Last: {{ thread.last_message_at|relative_time }}</span>
                    {% endif %}
                </div>
            </div>

            <!-- Expand/collapse chevron -->
            <svg id="chevron-thread-{{ loop.index }}" class="w-5 h-5 text-text-muted shrink-0 mt-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
            </svg>
        </button>

        <!-- Collapsible message list -->
        <div id="thread-{{ loop.index }}" class="hidden">
            <!-- Messages -->
            {% if thread_messages %}
            <div class="border-t border-accent-cyan/10">
                {% for msg in thread_messages %}
                <a href="/dashboard/emails/{{ msg.id }}"
                   class="block px-6 py-3 hover:bg-accent-cyan/5 transition-colors border-b border-accent-cyan/5 last:border-b-0">
                    <div class="flex items-center gap-4">
                        <!-- From -->
                        <div class="min-w-0 w-40 shrink-0">
                            <div class="text-sm font-medium text-text-primary truncate">
                                {{ msg.sender_name or msg.sender_email }}
                            </div>
                        </div>

                        <!-- Subject / Preview -->
                        <div class="min-w-0 flex-1">
                            {% if msg.subject %}
                            <div class="text-sm text-text-primary truncate">{{ msg.subject }}</div>
                            {% endif %}
                            {% if msg.preview %}
                            <div class="text-xs text-text-muted truncate">{{ msg.preview }}</div>
                            {% endif %}
                        </div>

                        <!-- To -->
                        <div class="min-w-0 w-40 shrink-0 text-xs text-text-secondary truncate">
                            {% if msg.to_addresses %}
                                {{ msg.to_addresses | join(', ') }}
                            {% endif %}
                        </div>

                        {% if msg.has_attachments %}
                        <div class="text-text-muted text-sm shrink-0">&#128206;</div>
                        {% endif %}

                        <!-- Time -->
                        <div class="text-xs text-text-muted whitespace-nowrap font-mono-data shrink-0">
                            {{ msg.message_timestamp|relative_time }}
                        </div>
                    </div>
                </a>
                {% endfor %}
            </div>
            {% endif %}

            <!-- Agenda (collapsible edit) -->
            <div class="border-t border-accent-cyan/10 p-6 bg-bg-deep/50">
                <div class="flex items-center justify-between mb-2">
                    <div class="text-xs text-accent-cyan font-semibold">AGENDA</div>
                    <button type="button"
                            onclick="toggleAgendaEdit(this)"
                            class="text-xs text-text-muted hover:text-accent-cyan transition-colors">
                        Edit
                    </button>
                </div>
                <div data-agenda-display class="text-sm text-text-primary whitespace-pre-line mb-3">{{ thread.agenda or "(no agenda set)" }}</div>
                <form hx-patch="/api/v1/email/threads/{{ thread.id }}/agenda"
                      hx-target="closest .glass-card"
                      hx-swap="none"
                      hx-on::after-request="location.reload()"
                      data-agenda-form
                      class="hidden space-y-2">
                    <textarea name="agenda"
                              rows="4"
                              placeholder="Enter agenda for this thread..."
                              class="w-full bg-bg-card border border-accent-cyan/20 rounded-lg p-3 text-sm text-text-primary placeholder-text-muted focus:border-accent-cyan focus:outline-none">{{ thread.agenda or '' }}</textarea>
                    <div class="flex gap-2">
                        <button type="submit"
                                class="px-3 py-1.5 bg-accent-cyan/20 text-accent-cyan border border-accent-cyan/30 rounded-lg hover:bg-accent-cyan/30 transition-colors text-sm font-medium">
                            Save
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

{% if not threads %}
<!-- Empty State -->
<div class="glass-card neon-border-cyan rounded-xl p-12 text-center">
    <div class="text-4xl mb-4 text-accent-cyan">&#9993;</div>
    <h3 class="text-xl font-semibold mb-2 text-accent-cyan">No email threads yet</h3>
    <p class="text-text-muted">Email threads will appear here when emails are sent or received.</p>
</div>
{% endif %}

<script>
function toggleThread(id) {
    const el = document.getElementById(id);
    const chevron = document.getElementById('chevron-' + id);
    el.classList.toggle('hidden');
    if (!el.classList.contains('hidden')) {
        chevron.style.transform = 'rotate(180deg)';
    } else {
        chevron.style.transform = 'rotate(0deg)';
    }
}

function toggleAgendaEdit(btn) {
    const container = btn.closest('.border-t');
    const display = container.querySelector('[data-agenda-display]');
    const form = container.querySelector('[data-agenda-form]');
    if (form.classList.contains('hidden')) {
        display.classList.add('hidden');
        form.classList.remove('hidden');
        form.querySelector('textarea').focus();
        btn.textContent = 'Cancel';
    } else {
        display.classList.remove('hidden');
        form.classList.add('hidden');
        btn.textContent = 'Edit';
    }
}

async function syncEmails(btn) {
    const result = document.getElementById('sync-result');
    btn.disabled = true;
    btn.textContent = 'Syncing...';
    result.textContent = '';
    try {
        const resp = await fetch('/api/v1/email/sync', { method: 'POST' });
        if (resp.ok) {
            const data = await resp.json();
            result.textContent = `Synced ${data.synced} message(s)`;
            if (data.synced > 0) setTimeout(() => location.reload(), 1000);
        } else {
            result.textContent = 'Sync failed: ' + await resp.text();
        }
    } catch (err) {
        result.textContent = 'Error: ' + err.message;
    } finally {
        btn.disabled = false;
        btn.textContent = 'Sync from AgentMail';
    }
}
</script>
{% endblock %}