{% extends "base.html" %}
{% block title %}Email - {{ session.id }} - Personaut{% endblock %}

{% block content %}
<div class="email-container">
    <header class="email-header">
        <div class="email-info">
            <h2>Email Conversation</h2>
            <span class="badge">{{ individual.name }}</span>
        </div>
        <div class="email-controls">
            <button class="btn btn-primary" id="compose-btn">✉️ Compose</button>
            <a href="{{ url_for('chat.select_session') }}" class="btn btn-secondary">Exit</a>
        </div>
    </header>

    <div class="email-thread" id="email-thread">
        {% for email in messages %}
        <div class="email-item {% if email.sender == 'user' %}sent{% else %}received{% endif %}"
            onclick="this.classList.toggle('expanded')">
            <div class="email-summary">
                <div class="email-sender">
                    <strong>{{ email.sender_name or email.sender }}</strong>
                    <span class="email-date">{{ email.timestamp }}</span>
                </div>
                <div class="email-subject">{{ email.subject or 'No Subject' }}</div>
                <div class="email-preview">{{ email.content[:100] }}...</div>
            </div>
            <div class="email-body">
                <div class="email-full-header">
                    <p><strong>From:</strong> {{ email.sender_name }}</p>
                    <p><strong>To:</strong> {{ email.recipient_name }}</p>
                    <p><strong>Date:</strong> {{ email.timestamp }}</p>
                    <p><strong>Subject:</strong> {{ email.subject or 'No Subject' }}</p>
                </div>
                <div class="email-content">{{ email.content }}</div>
                <div class="email-actions">
                    <button class="btn btn-sm" onclick="reply('{{ email.id }}')">Reply</button>
                    <button class="btn btn-sm btn-secondary" onclick="forward('{{ email.id }}')">Forward</button>
                </div>
            </div>
        </div>
        {% else %}
        <p class="empty-state">No emails yet. Start composing!</p>
        {% endfor %}
    </div>
</div>

<!-- Compose Modal -->
<div class="modal" id="compose-modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Compose Email</h3>
            <button class="modal-close" onclick="closeModal()">&times;</button>
        </div>
        <form id="email-form" class="email-compose">
            <div class="form-group">
                <label>To:</label>
                <input type="text" name="to" value="{{ individual.name }}" readonly>
            </div>
            <div class="form-group">
                <label>Subject:</label>
                <input type="text" name="subject" placeholder="Email subject...">
            </div>
            <div class="form-group">
                <label>Body:</label>
                <textarea name="body" rows="10" placeholder="Write your email..."></textarea>
            </div>
            <div class="form-actions">
                <button type="button" class="btn btn-secondary" onclick="closeModal()">Cancel</button>
                <button type="submit" class="btn btn-primary">Send Email</button>
            </div>
        </form>
    </div>
</div>

<style>
    .email-container {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 120px);
    }

    .email-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        background: var(--bg-secondary);
        border-radius: 12px 12px 0 0;
    }

    .email-thread {
        flex: 1;
        overflow-y: auto;
        padding: 1rem;
        background: var(--bg-secondary);
        border-radius: 0 0 12px 12px;
    }

    .email-item {
        background: var(--bg-tertiary);
        border-radius: 8px;
        margin-bottom: 0.5rem;
        cursor: pointer;
        transition: all 0.2s;
    }

    .email-item:hover {
        background: var(--bg-primary);
    }

    .email-item.sent {
        border-left: 3px solid var(--accent);
    }

    .email-item.received {
        border-left: 3px solid #888;
    }

    .email-summary {
        padding: 1rem;
    }

    .email-sender {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.5rem;
    }

    .email-date {
        color: var(--text-secondary);
        font-size: 0.875rem;
    }

    .email-subject {
        font-weight: 500;
        margin-bottom: 0.25rem;
    }

    .email-preview {
        color: var(--text-secondary);
        font-size: 0.875rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .email-body {
        display: none;
        padding: 1rem;
        border-top: 1px solid var(--bg-primary);
    }

    .email-item.expanded .email-body {
        display: block;
    }

    .email-full-header {
        background: var(--bg-primary);
        padding: 0.75rem;
        border-radius: 6px;
        margin-bottom: 1rem;
        font-size: 0.875rem;
    }

    .email-full-header p {
        margin: 0.25rem 0;
    }

    .email-content {
        white-space: pre-wrap;
        line-height: 1.6;
    }

    .email-actions {
        margin-top: 1rem;
        display: flex;
        gap: 0.5rem;
    }

    .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.7);
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }

    .modal.active {
        display: flex;
    }

    .modal-content {
        background: var(--bg-secondary);
        border-radius: 12px;
        width: 90%;
        max-width: 600px;
    }

    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        border-bottom: 1px solid var(--bg-tertiary);
    }

    .modal-close {
        background: none;
        border: none;
        color: var(--text-primary);
        font-size: 1.5rem;
        cursor: pointer;
    }

    .email-compose {
        padding: 1rem;
    }

    .email-compose textarea {
        width: 100%;
        resize: vertical;
    }
</style>
{% endblock %}

{% block scripts %}
<script>
    const sessionId = '{{ session.id }}';

    document.getElementById('compose-btn').addEventListener('click', () => {
        document.getElementById('compose-modal').classList.add('active');
    });

    function closeModal() {
        document.getElementById('compose-modal').classList.remove('active');
    }

    function reply(emailId) {
        document.getElementById('compose-modal').classList.add('active');
        // Pre-fill subject with Re:
    }

    function forward(emailId) {
        document.getElementById('compose-modal').classList.add('active');
        // Pre-fill subject with Fwd:
    }

    document.getElementById('email-form').addEventListener('submit', async (e) => {
        e.preventDefault();
        const formData = new FormData(e.target);

        // Send email via API
        await fetch(`/api/sessions/${sessionId}/messages`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                content: formData.get('body'),
                subject: formData.get('subject'),
                modality: 'email'
            })
        });

        closeModal();
        location.reload();
    });
</script>
{% endblock %}