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

{% block title %}Antworten: {{ email.subject }}{% endblock %}
{% block header_title %}E-Mail beantworten{% endblock %}

{% block stylesheets %}
<style>
    .reply-container {
        background: #f8f9fc;
        border-radius: 15px;
        padding: 2rem;
        margin-bottom: 2rem;
    }
    
    .original-email {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        margin-bottom: 2rem;
        border-left: 4px solid #e9ecef;
    }
    
    .original-email-header {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #e9ecef;
    }
    
    .original-avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: linear-gradient(135deg, #6c757d, #495057);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 600;
        font-size: 1.1rem;
    }
    
    .original-info h6 {
        margin: 0;
        color: #2c3e50;
        font-weight: 600;
    }
    
    .original-info p {
        margin: 0.25rem 0;
        color: #6c757d;
        font-size: 0.9rem;
    }
    
    .original-subject {
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 1rem;
    }
    
    .original-body {
        color: #6c757d;
        font-size: 0.9rem;
        line-height: 1.5;
        max-height: 200px;
        overflow-y: auto;
        white-space: pre-wrap;
        word-wrap: break-word;
    }
    
    .reply-form {
        background: white;
        border-radius: 12px;
        padding: 2rem;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    
    .form-group {
        margin-bottom: 1.5rem;
    }
    
    .form-label {
        font-weight: 600;
        color: #5a5c69;
        margin-bottom: 0.5rem;
    }
    
    .form-control, .form-select {
        border-radius: 8px;
        border: 2px solid #e9ecef;
        padding: 0.75rem;
        transition: all 0.2s ease;
    }
    
    .form-control:focus, .form-select:focus {
        border-color: #4e73df;
        box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
    }
    
    .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);
    }
    
    .preview-section {
        background: #f8f9fc;
        border-radius: 8px;
        padding: 1.5rem;
        margin-top: 1.5rem;
        border: 1px solid #e9ecef;
    }
    
    .preview-content {
        background: white;
        border-radius: 6px;
        padding: 1rem;
        border: 1px solid #dee2e6;
    }
    
    .preview-header {
        border-bottom: 1px solid #e9ecef;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }
    
    .preview-subject {
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 0.5rem;
    }
    
    .preview-meta {
        color: #6c757d;
        font-size: 0.9rem;
    }
    
    .preview-body {
        line-height: 1.6;
        color: #2c3e50;
        white-space: pre-wrap;
        word-wrap: break-word;
    }
    
    .loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.9);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }
    
    .loading-spinner {
        width: 3rem;
        height: 3rem;
        border: 0.25rem solid #dee2e6;
        border-right-color: #4e73df;
        border-radius: 50%;
        animation: spinner-border 0.75s linear infinite;
    }
    
    @keyframes spinner-border {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>
{% endblock %}

{% block content %}
<div class="page-header">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h1><i class="fas fa-reply me-2"></i>E-Mail beantworten</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>
                <a href="{{ path('admin_email_view', {'id': email.id}) }}">E-Mail anzeigen</a>
                <i class="fas fa-chevron-right"></i>
                <span>Antworten</span>
            </div>
        </div>
        <a href="{{ path('admin_email_view', {'id': email.id}) }}" class="btn btn-secondary btn-modern">
            <i class="fas fa-arrow-left me-2"></i>Zurück
        </a>
    </div>
</div>

<!-- Original E-Mail -->
<div class="original-email">
    <h5 class="mb-3"><i class="fas fa-envelope me-2"></i>Original E-Mail</h5>
    <div class="original-email-header">
        <div class="original-avatar">
            {{ email.fromDisplayName|first|upper }}
        </div>
        <div class="original-info">
            <h6>{{ email.fromDisplayName }}</h6>
            <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>
    <div class="original-subject">
        {{ email.subject }}
    </div>
    <div class="original-body">
        {{ email.body|slice(0, 500) }}{% if email.body|length > 500 %}...{% endif %}
    </div>
</div>

<!-- Antwort Formular -->
<div class="reply-form">
    <h5 class="mb-4"><i class="fas fa-edit me-2"></i>Antwort verfassen</h5>
    
    <form id="replyForm">
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="recipientEmail" class="form-label">An</label>
                    <input type="email" class="form-control" id="recipientEmail" name="recipientEmail" value="{{ email.fromEmail }}" readonly>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label for="replyTo" class="form-label">Antwort an</label>
                    <input type="email" class="form-control" id="replyTo" name="replyTo" value="{{ email.replyTo ?: email.fromEmail }}">
                </div>
            </div>
        </div>
        
        <div class="form-group">
            <label for="subject" class="form-label">Betreff</label>
            <input type="text" class="form-control" id="subject" name="subject" value="Re: {{ email.subject }}" required>
        </div>
        
        <div class="form-group">
            <label for="message" class="form-label">Nachricht</label>
            <textarea class="form-control" id="message" name="message" rows="10" required placeholder="Ihre Antwort..."></textarea>
            <div class="form-text">
                <strong>Verfügbare Platzhalter:</strong><br>
                <code>{{ "{{customer_name}}" }}</code> - Name des Kunden<br>
                <code>{{ "{{appointment_date}}" }}</code> - Termindatum<br>
                <code>{{ "{{appointment_time}}" }}</code> - Terminzeit<br>
                <code>{{ "{{location}}" }}</code> - Standort
            </div>
        </div>
        
        <div class="form-group">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="markAsReplied" name="markAsReplied" checked>
                <label class="form-check-label" for="markAsReplied">
                    Original E-Mail als beantwortet markieren
                </label>
            </div>
        </div>
        
        <div class="d-flex gap-2">
            <button type="button" class="btn btn-info btn-modern" onclick="previewReply()">
                <i class="fas fa-eye me-2"></i>Vorschau
            </button>
            <button type="submit" class="btn btn-primary btn-modern">
                <i class="fas fa-paper-plane me-2"></i>Antwort senden
            </button>
            <a href="{{ path('admin_email_view', {'id': email.id}) }}" class="btn btn-secondary btn-modern">
                <i class="fas fa-times me-2"></i>Abbrechen
            </a>
        </div>
    </form>
    
    <!-- Vorschau -->
    <div class="preview-section" id="previewSection" style="display: none;">
        <h6><i class="fas fa-eye me-2"></i>Vorschau</h6>
        <div class="preview-content">
            <div class="preview-header">
                <div class="preview-subject" id="previewSubject"></div>
                <div class="preview-meta" id="previewMeta"></div>
            </div>
            <div class="preview-body" id="previewBody"></div>
        </div>
    </div>
</div>

<!-- Loading Overlay -->
<div class="loading-overlay" id="loadingOverlay">
    <div class="text-center">
        <div class="loading-spinner"></div>
        <p class="mt-3 text-muted">E-Mail wird gesendet...</p>
    </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
    document.getElementById('replyForm').addEventListener('submit', async function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const subject = formData.get('subject');
        const message = formData.get('message');
        const recipientEmail = formData.get('recipientEmail');
        const replyTo = formData.get('replyTo');
        const markAsReplied = formData.get('markAsReplied') === 'on';
        
        if (!subject.trim() || !message.trim()) {
            alert('Bitte füllen Sie alle Felder aus!');
            return;
        }
        
        if (!confirm(`Antwort an ${recipientEmail} senden?`)) return;
        
        // Loading anzeigen
        document.getElementById('loadingOverlay').style.display = 'flex';
        
        try {
            const response = await fetch(`{{ path('admin_email_reply_send', {id: email.id}) }}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    subject: subject,
                    message: message,
                    recipientEmail: recipientEmail,
                    replyTo: replyTo,
                    markAsReplied: markAsReplied
                })
            });
            
            const data = await response.json();
            
            if (data.success) {
                alert('Antwort wurde erfolgreich gesendet!');
                window.location.href = '{{ path('admin_email_view', {'id': email.id}) }}';
            } else {
                throw new Error(data.error || 'Unbekannter Fehler');
            }
        } catch (error) {
            console.error('Reply error:', error);
            alert('Fehler beim Senden der Antwort: ' + error.message);
        } finally {
            document.getElementById('loadingOverlay').style.display = 'none';
        }
    });
    
    function previewReply() {
        const subject = document.getElementById('subject').value;
        const message = document.getElementById('message').value;
        const recipientEmail = document.getElementById('recipientEmail').value;
        
        if (!subject || !message) {
            alert('Bitte füllen Sie Betreff und Nachricht aus!');
            return;
        }
        
        document.getElementById('previewSubject').textContent = subject;
        document.getElementById('previewMeta').textContent = `An: ${recipientEmail}`;
        document.getElementById('previewBody').textContent = message;
        
        document.getElementById('previewSection').style.display = 'block';
        document.getElementById('previewSection').scrollIntoView({ behavior: 'smooth' });
    }
    
    // Auto-resize textarea
    document.getElementById('message').addEventListener('input', function() {
        this.style.height = 'auto';
        this.style.height = this.scrollHeight + 'px';
    });
    
    // Standard-Antwort einfügen
    document.addEventListener('DOMContentLoaded', function() {
        const messageTextarea = document.getElementById('message');
        const originalSubject = '{{ email.subject }}';
        const originalFrom = '{{ email.fromDisplayName }}';
        
        // Standard-Antwort basierend auf Original-E-Mail
        let standardReply = `\n\n--- Ursprüngliche Nachricht ---\n`;
        standardReply += `Von: ${originalFrom}\n`;
        standardReply += `Betreff: ${originalSubject}\n`;
        standardReply += `Datum: {{ email.receivedAt|date('d.m.Y H:i') }}\n\n`;
        standardReply += `{{ email.body|slice(0, 200) }}{% if email.body|length > 200 %}...{% endif %}\n`;
        
        messageTextarea.value = standardReply;
        messageTextarea.style.height = 'auto';
        messageTextarea.style.height = messageTextarea.scrollHeight + 'px';
    });
</script>
{% endblock %}