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

{% block title %}{{ message.subject or "Email" }} - Cyborg Dashboard{% endblock %}

{% block content %}
<!-- Back link -->
<a href="/dashboard/emails" class="inline-flex items-center gap-2 text-accent-cyan hover:text-accent-cyan/80 transition-colors mb-6">
    &larr; Back to Emails
</a>

<!-- Message Header -->
<div class="glass-card neon-border-cyan rounded-xl p-6 mb-6">
    <h1 class="text-2xl font-bold mb-4">{{ message.subject or "(no subject)" }}</h1>

    <div class="space-y-2 text-sm">
        <div class="flex gap-3">
            <span class="text-text-muted w-12 shrink-0">From</span>
            <span class="text-text-primary">
                {% if message.sender_name %}
                    {{ message.sender_name }}
                    <span class="text-text-muted">&lt;{{ message.sender_email }}&gt;</span>
                {% else %}
                    {{ message.sender_email }}
                {% endif %}
            </span>
        </div>
        <div class="flex gap-3">
            <span class="text-text-muted w-12 shrink-0">To</span>
            <span class="text-text-primary">{{ to_addresses | join(', ') }}</span>
        </div>
        {% if cc_addresses %}
        <div class="flex gap-3">
            <span class="text-text-muted w-12 shrink-0">Cc</span>
            <span class="text-text-primary">{{ cc_addresses | join(', ') }}</span>
        </div>
        {% endif %}
        <div class="flex gap-3">
            <span class="text-text-muted w-12 shrink-0">Time</span>
            <span class="text-text-primary font-mono-data">{{ message.message_timestamp }}</span>
        </div>
        {% if attachments %}
        <div class="flex gap-3">
            <span class="text-text-muted w-12 shrink-0">Files</span>
            <div class="flex flex-wrap gap-2">
                {% for att in attachments %}
                <span class="text-xs px-2 py-1 rounded bg-accent-cyan/10 text-accent-cyan border border-accent-cyan/20">
                    {{ att.filename or att.name or "attachment" }}
                </span>
                {% endfor %}
            </div>
        </div>
        {% endif %}
    </div>
</div>

<!-- Message Body -->
<div class="glass-card rounded-xl p-6">
    {% if message.text_body %}
    <pre class="whitespace-pre-wrap text-sm text-text-primary font-sans leading-relaxed">{{ message.text_body }}</pre>
    {% elif message.html_body %}
    <div class="text-sm text-text-primary prose prose-invert max-w-none">
        {{ message.html_body | safe }}
    </div>
    {% elif message.preview %}
    <p class="text-sm text-text-muted">{{ message.preview }}</p>
    {% else %}
    <p class="text-sm text-text-muted">(no body content)</p>
    {% endif %}
</div>

{% if dispatches %}
<!-- Dispatches -->
<div class="glass-card rounded-xl p-6 mb-6">
    <h2 class="text-lg font-semibold mb-4 flex items-center gap-2">
        <span class="text-accent-orange">&#9654;</span>
        Dispatches
    </h2>
    <div class="space-y-3">
        {% for d in dispatches %}
        <div class="p-3 rounded-lg bg-bg-card/50 border border-accent-orange/10">
            <div class="flex items-center justify-between gap-3 mb-1">
                <div class="text-sm font-medium">
                    {{ d.notification_type | replace('_', ' ') | title }}
                    {% if d.task_title %}
                    — {{ d.task_title }}
                    {% elif d.project_title %}
                    — {{ d.project_title }}
                    {% endif %}
                </div>
                <span class="text-xs px-2 py-0.5 rounded {% if d.status == 'active' %}bg-accent-orange/20 text-accent-orange{% elif d.status == 'completed' %}bg-accent-green/20 text-accent-green{% elif d.status == 'failed' %}bg-accent-red/20 text-accent-red{% else %}bg-bg-elevated text-text-muted{% endif %}">
                    {{ d.status | upper }}
                </span>
            </div>
            <div class="text-xs text-text-muted">
                Dispatched {{ d.dispatched_at | relative_time }}
                {% if d.duration_seconds %}
                · {{ "%.0f" | format(d.duration_seconds) }}s
                {% endif %}
                {% if d.tap_count %}
                · tapped {{ d.tap_count }}x
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

{% if prompt_history %}
<!-- Prompt History -->
<div class="glass-card rounded-xl p-6">
    <h2 class="text-lg font-semibold mb-4 flex items-center gap-2">
        <span class="text-accent-purple">&#9998;</span>
        Prompt History
    </h2>
    <div class="space-y-3">
        {% for p in prompt_history %}
        <details class="group">
            <summary class="cursor-pointer p-3 rounded-lg bg-bg-card/50 border border-accent-purple/10 hover:border-accent-purple/30 transition-colors">
                <div class="flex items-center justify-between gap-3">
                    <div class="text-sm">
                        <span class="text-accent-purple">{{ p.category | replace('_', ' ') | title }}</span>
                        {% if p.token_count_estimate %}
                        <span class="text-text-muted ml-2">~{{ p.token_count_estimate }} tokens</span>
                        {% endif %}
                    </div>
                    <span class="text-xs text-text-muted">{{ p.timestamp | relative_time }}</span>
                </div>
            </summary>
            <div class="mt-2 p-3 rounded-lg bg-bg-deep/80 border border-accent-purple/10">
                <pre class="whitespace-pre-wrap text-xs text-text-secondary max-h-96 overflow-y-auto">{{ p.prompt_text }}</pre>
            </div>
        </details>
        {% endfor %}
    </div>
</div>
{% endif %}
{% endblock %}