{% extends 'admin_base.html.twig' %}

{% block title %}{{ email.subject }}{% endblock %}
{% block header_title %}E-Mail anzeigen{% endblock %}

{% block stylesheets %}
<style>
    /* Moderne Benachrichtigungen */
    .notification {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 9999;
        max-width: 400px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        border-left: 4px solid #007bff;
        animation: slideIn 0.3s ease-out;
    }

    .notification-success {
        border-left-color: #28a745;
    }

    .notification-error {
        border-left-color: #dc3545;
    }

    .notification-info {
        border-left-color: #17a2b8;
    }

    .notification-content {
        display: flex;
        align-items: center;
        padding: 16px;
        gap: 12px;
    }

    .notification-content i:first-child {
        font-size: 20px;
        color: #007bff;
    }

    .notification-success .notification-content i:first-child {
        color: #28a745;
    }

    .notification-error .notification-content i:first-child {
        color: #dc3545;
    }

    .notification-info .notification-content i:first-child {
        color: #17a2b8;
    }

    .notification-content span {
        flex: 1;
        font-weight: 500;
        color: #333;
    }

    .notification-close {
        background: none;
        border: none;
        color: #666;
        cursor: pointer;
        padding: 4px;
        border-radius: 4px;
        transition: background-color 0.2s;
    }

    .notification-close:hover {
        background-color: #f8f9fa;
    }

    @keyframes slideIn {
        from {
            transform: translateX(100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
    .email-view {
        background: #f8f9fc;
        border-radius: 15px;
        padding: 2rem;
        margin-bottom: 2rem;
    }
    
    .email-header {
        background: white;
        border-radius: 12px;
        padding: 2rem;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        margin-bottom: 1.5rem;
    }
    
    .email-meta {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .email-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: linear-gradient(135deg, #4e73df, #375fc7);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 600;
        font-size: 1.5rem;
    }
    
    .email-info h4 {
        margin: 0;
        color: #2c3e50;
        font-weight: 700;
    }
    
    .email-info p {
        margin: 0.25rem 0;
        color: #6c757d;
    }
    
    .email-subject {
        font-size: 1.5rem;
        font-weight: 700;
        color: #2c3e50;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
        border-bottom: 2px solid #e9ecef;
    }
    
    .email-body {
        background: white;
        border-radius: 12px;
        padding: 2rem;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        margin-bottom: 1.5rem;
    }
    
    .email-body-content {
        line-height: 1.6;
        color: #2c3e50;
        white-space: pre-wrap;
        word-wrap: break-word;
    }
    
    .email-actions {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    
    .status-badges {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }
    
    .status-badge {
        padding: 0.5rem 1rem;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: uppercase;
    }
    
    .status-read {
        background: #e8f5e8;
        color: #388e3c;
    }
    
    .status-replied {
        background: #e3f2fd;
        color: #1976d2;
    }
    
    .status-unread {
        background: #fff3e0;
        color: #f57c00;
    }
    
    .attachment-list {
        background: #f8f9fc;
        border-radius: 8px;
        padding: 1rem;
        margin-top: 1rem;
    }
    
    .attachment-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem;
        background: white;
        border-radius: 6px;
        margin-bottom: 0.5rem;
    }
    
    .btn-modern {
        border-radius: 8px;
        font-weight: 600;
        padding: 0.75rem 1.5rem;
        transition: all 0.2s ease;
    }
    
    .btn-modern:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    
    .email-details {
        background: #f8f9fc;
        border-radius: 8px;
        padding: 1rem;
        margin-top: 1rem;
    }
    
    .email-details h6 {
        color: #5a5c69;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }
    
    .email-details p {
        margin: 0.25rem 0;
        color: #6c757d;
        font-size: 0.9rem;
    }

    /* E-Mail Thread Styling */
    .email-thread {
        background: #fff;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .email-message {
        border-bottom: 1px solid #e9ecef;
        padding: 1.5rem;
    }

    .email-message:last-child {
        border-bottom: none;
    }

    .email-message.current {
        background: #f8f9fc;
        border-left: 4px solid #007bff;
    }

    .email-message.reply {
        background: #f8f9fa;
        border-left: 4px solid #28a745;
    }

    .email-message.original {
        background: #fff;
        border-left: 4px solid #6c757d;
    }

    .message-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #e9ecef;
    }

    .message-sender {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .sender-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #007bff;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 0.875rem;
    }

    .sender-info {
        display: flex;
        flex-direction: column;
    }

    .sender-name {
        font-weight: 600;
        color: #333;
        margin: 0;
    }

    .sender-email {
        font-size: 0.875rem;
        color: #6c757d;
        margin: 0;
    }

    .message-meta {
        text-align: right;
        font-size: 0.875rem;
        color: #6c757d;
    }

    .message-date {
        font-weight: 500;
    }

    .message-subject {
        font-weight: 600;
        color: #333;
        margin: 0.5rem 0;
    }

    .message-content {
        background: #fff;
        border: 1px solid #e9ecef;
        border-radius: 6px;
        padding: 1rem;
        margin-top: 0.5rem;
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    .message-content.quoted {
        background: #f8f9fa;
        border-left: 3px solid #dee2e6;
        padding-left: 1rem;
        margin-left: 1rem;
        font-size: 0.9rem;
        color: #6c757d;
    }

    .message-content.quoted .quoted-header {
        font-weight: 600;
        color: #495057;
        margin-bottom: 0.5rem;
        padding-bottom: 0.25rem;
        border-bottom: 1px solid #dee2e6;
    }

    .message-content.quoted .quoted-content {
        color: #6c757d;
    }

    .thread-indicator {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 1rem;
        padding: 0.5rem 1rem;
        background: #e3f2fd;
        border-radius: 6px;
        font-size: 0.875rem;
        color: #1976d2;
    }

    .thread-indicator i {
        font-size: 1rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="page-header">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h1><i class="fas fa-envelope me-2"></i>E-Mail anzeigen</h1>
            <div class="page-breadcrumb">
                <a href="{{ path('admin_dashboard') }}"><i class="fas fa-home"></i> Dashboard</a>
                <i class="fas fa-chevron-right"></i>
                <a href="{{ path('admin_email_inbox') }}">E-Mail Postfach</a>
                <i class="fas fa-chevron-right"></i>
                <span>E-Mail anzeigen</span>
            </div>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ path('admin_email_inbox') }}" class="btn btn-secondary btn-modern">
                <i class="fas fa-arrow-left me-2"></i>Zurück
            </a>
            <a href="{{ path('admin_email_reply', {'id': email.id}) }}" class="btn btn-primary btn-modern">
                <i class="fas fa-reply me-2"></i>Antworten
            </a>
        </div>
    </div>
</div>

<!-- E-Mail Header -->
<div class="email-header">
    <div class="email-meta">
        <div class="email-avatar">
            {{ email.fromDisplayName|first|upper }}
        </div>
        <div class="email-info">
            <h4>{{ email.fromDisplayName }}</h4>
            <p><i class="fas fa-envelope me-2"></i>{{ email.fromEmail }}</p>
            <p><i class="fas fa-clock me-2"></i>{{ email.receivedAt|date('d.m.Y H:i') }}</p>
        </div>
        <div class="ms-auto">
            <div class="status-badges">
                {% if email.isRead %}
                    <span class="status-badge status-read">Gelesen</span>
                {% else %}
                    <span class="status-badge status-unread">Ungelesen</span>
                {% endif %}
                {% if email.isReplied %}
                    <span class="status-badge status-replied">Beantwortet</span>
                {% endif %}
            </div>
        </div>
    </div>
    
    <div class="email-subject">
        {{ email.subject }}
    </div>
    
    <div class="email-details">
        <h6><i class="fas fa-info-circle me-2"></i>E-Mail Details</h6>
        <p><strong>An:</strong> {{ email.toDisplayName }} ({{ email.toEmail }})</p>
        {% if email.replyTo %}
            <p><strong>Antwort an:</strong> {{ email.replyTo }}</p>
        {% endif %}
        {% if email.cc %}
            <p><strong>CC:</strong> {{ email.cc }}</p>
        {% endif %}
        {% if email.bcc %}
            <p><strong>BCC:</strong> {{ email.bcc }}</p>
        {% endif %}
        <p><strong>Nachrichten-ID:</strong> {{ email.messageId }}</p>
        <p><strong>Status:</strong> {{ email.status }}</p>
        {% if email.appointmentId %}
            <p><strong>Verknüpft mit Termin:</strong> #{{ email.appointmentId }}</p>
        {% endif %}
        {% if email.customerId %}
            <p><strong>Verknüpft mit Kunde:</strong> #{{ email.customerId }}</p>
        {% endif %}
    </div>
</div>

<!-- E-Mail Body (Absätze/Zeilenumbrüche aus htmlBody oder body) -->
<div class="email-body">
    <h5 class="mb-3"><i class="fas fa-file-text me-2"></i>Nachricht</h5>
    <div id="emailThreadContainer" class="email-body-content">
        {{ (bodyForDisplay|default(''))|raw }}
    </div>
    
    {% if email.hasAttachments %}
        <div class="attachment-list">
            <h6><i class="fas fa-paperclip me-2"></i>Anhänge ({{ email.attachmentCount }})</h6>
            {% for attachment in email.attachmentList %}
                <div class="attachment-item">
                    <i class="fas fa-file me-2"></i>
                    <span>{{ attachment.name }}</span>
                    <small class="text-muted ms-auto">({{ attachment.size }})</small>
                </div>
            {% endfor %}
        </div>
    {% endif %}
</div>

<!-- E-Mail Actions -->
<div class="email-actions">
    <h5 class="mb-3"><i class="fas fa-cogs me-2"></i>Aktionen</h5>
    <div class="row">
        <div class="col-md-6">
            <div class="d-grid gap-2">
                <a href="{{ path('admin_email_reply', {'id': email.id}) }}" class="btn btn-primary btn-modern">
                    <i class="fas fa-reply me-2"></i>Antworten
                </a>
                <button class="btn btn-success btn-modern" onclick="markAsRead({{ email.id }})" {{ email.isRead ? 'disabled' : '' }}>
                    <i class="fas fa-envelope-open me-2"></i>Als gelesen markieren
                </button>
            </div>
        </div>
        <div class="col-md-6">
            <div class="d-grid gap-2">
                <button class="btn btn-info btn-modern" onclick="forwardEmail({{ email.id }})">
                    <i class="fas fa-share me-2"></i>Weiterleiten
                </button>
                <button class="btn btn-danger btn-modern" onclick="deleteEmail({{ email.id }})">
                    <i class="fas fa-trash me-2"></i>Löschen
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
    // Moderne Benachrichtigungen
    function showSuccess(message) {
        showNotification(message, 'success');
    }

    function showError(message) {
        showNotification(message, 'error');
    }

    function showInfo(message) {
        showNotification(message, 'info');
    }

    function showNotification(message, type = 'info') {
        const notification = document.createElement('div');
        notification.className = `notification notification-${type}`;
        notification.innerHTML = `
            <div class="notification-content">
                <i class="fas fa-${type === 'success' ? 'check-circle' : type === 'error' ? 'exclamation-circle' : 'info-circle'}"></i>
                <span>${message}</span>
                <button class="notification-close" onclick="this.parentElement.parentElement.remove()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        `;
        
        document.body.appendChild(notification);
        
        setTimeout(() => {
            if (notification.parentElement) {
                notification.remove();
            }
        }, 5000);
    }

    // E-Mail Thread Parser (erwartet bereits normalisierte Zeilenumbrüche \n)
    function parseEmailThread(emailBody) {
        const messages = [];
        const lines = (emailBody || '').split('\n');
        let currentMessage = null;
        let inQuotedContent = false;
        let quotedLevel = 0;

        // Erste Nachricht (aktuelle Antwort)
        currentMessage = {
            type: 'current',
            header: 'Aktuelle Nachricht',
            content: [],
            quoted: []
        };

        for (let i = 0; i < lines.length; i++) {
            const line = lines[i].trim();
            
            // Prüfe auf neue Nachricht (Datum-Pattern)
            if (line.match(/^Am .* um .* schrieb/)) {
                if (currentMessage && currentMessage.content.length > 0) {
                    messages.push(currentMessage);
                }
                currentMessage = {
                    type: 'reply',
                    header: line,
                    content: [],
                    quoted: []
                };
                inQuotedContent = false;
                quotedLevel = 0;
            }
            // Prüfe auf ursprüngliche Nachricht
            else if (line.includes('--- Ursprüngliche Nachricht ---')) {
                if (currentMessage && currentMessage.content.length > 0) {
                    messages.push(currentMessage);
                }
                currentMessage = {
                    type: 'original',
                    header: 'Ursprüngliche Nachricht',
                    content: [],
                    quoted: []
                };
                inQuotedContent = true;
            }
            // Prüfe auf zitierten Inhalt
            else if (line.startsWith('>') || line.startsWith('&gt;')) {
                if (currentMessage) {
                    currentMessage.quoted.push(line.replace(/^[>&]/, '').trim());
                }
                inQuotedContent = true;
            }
            // Normale Inhalte (leere Zeilen mitnehmen für Absätze)
            else if (!inQuotedContent) {
                if (currentMessage) {
                    currentMessage.content.push(line);
                }
            }
        }

        if (currentMessage) {
            messages.push(currentMessage);
        }

        return messages;
    }

    function escapeHtml(text) {
        if (!text) return '';
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    function textToHtmlWithBreaks(text) {
        if (!text) return '';
        var normalized = text.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
        return escapeHtml(normalized).replace(/\n/g, '<br>');
    }

    function renderEmailThread(emailBody) {
        var normalizedBody = (emailBody || '').replace(/\r\n/g, '\n').replace(/\r/g, '\n');
        const messages = parseEmailThread(normalizedBody);
        const container = document.getElementById('emailThreadContainer');
        
        if (messages.length <= 1 && !normalizedBody.match(/(^Am .* um .* schrieb)|(--- Ursprüngliche Nachricht ---)/m)) {
            // Einfache Darstellung: Absätze und Zeilenumbrüche erhalten
            container.innerHTML = '<div class="message-content">' + textToHtmlWithBreaks(normalizedBody) + '</div>';
            return;
        }

        // Thread-Darstellung
        let html = '<div class="email-thread">';
        
        messages.forEach((message, index) => {
            const isCurrent = index === 0;
            const messageClass = isCurrent ? 'current' : message.type;
            
            html += `<div class="email-message ${messageClass}">`;
            
            // Header
            html += '<div class="message-header">';
            html += '<div class="message-sender">';
            html += '<div class="sender-avatar">' + (message.type === 'original' ? 'O' : 'R') + '</div>';
            html += '<div class="sender-info">';
            html += '<div class="sender-name">' + (message.type === 'original' ? 'Ursprüngliche Nachricht' : 'Antwort') + '</div>';
            html += '</div>';
            html += '</div>';
            html += '<div class="message-meta">';
            html += '<div class="message-date">' + (isCurrent ? 'Aktuell' : 'Früher') + '</div>';
            html += '</div>';
            html += '</div>';
            
            // Content (Zeilenumbrüche erhalten, HTML escapen)
            if (message.content.length > 0) {
                var contentHtml = message.content.map(function(line) { return escapeHtml(line); }).join('<br>');
                html += '<div class="message-content">' + contentHtml + '</div>';
            }
            
            // Quoted content
            if (message.quoted.length > 0) {
                var quotedHtml = message.quoted.map(function(line) { return escapeHtml(line); }).join('<br>');
                html += '<div class="message-content quoted">';
                html += '<div class="quoted-header">Zitierter Inhalt:</div>';
                html += '<div class="quoted-content">' + quotedHtml + '</div>';
                html += '</div>';
            }
            
            html += '</div>';
        });
        
        html += '</div>';
        container.innerHTML = html;
    }

    async function markAsRead(id) {
        try {
            const response = await fetch(`{{ path('admin_email_mark_read', {id: 'PLACEHOLDER'}) }}`.replace('PLACEHOLDER', id), {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                }
            });
            
            const data = await response.json();
            
            if (data.success) {
                showSuccess('E-Mail als gelesen markiert!');
                // Globalen Badge aktualisieren
                if (typeof updateEmailBadges === 'function') {
                    updateEmailBadges();
                }
                location.reload();
            } else {
                showError('Fehler: ' + (data.error || 'Unbekannter Fehler'));
            }
        } catch (error) {
            showError('Netzwerkfehler beim Markieren');
        }
    }
    
    async function deleteEmail(id) {
        if (!confirm('Möchten Sie diese E-Mail wirklich löschen?')) return;
        
        try {
            const response = await fetch(`{{ path('admin_email_delete', {id: 'PLACEHOLDER'}) }}`.replace('PLACEHOLDER', id), {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                }
            });
            
            const data = await response.json();
            
            if (data.success) {
                alert('E-Mail wurde gelöscht!');
                window.location.href = '{{ path('admin_email_inbox') }}';
            } else {
                alert('Fehler: ' + (data.error || 'Unbekannter Fehler'));
            }
        } catch (error) {
            alert('Netzwerkfehler beim Löschen');
        }
    }
    
    function forwardEmail(id) {
        // TODO: Implementieren Sie die Weiterleitungsfunktionalität
        alert('Weiterleitungsfunktion wird noch implementiert');
    }
</script>
{% endblock %}