{% extends 'base.html' %}

{% block header_title %}قراءة الرسالة{% endblock %}

{% block content %}
<div class="bg-white shadow-sm rounded-lg border border-gray-200 overflow-hidden">
    <!-- رأس الرسالة -->
    <div class="bg-gray-50 px-6 py-4 border-b border-gray-200 flex justify-between items-center">
        <div>
            <h2 class="text-xl font-bold text-gray-900">{{ email.subject|default:"(بدون عنوان)" }}</h2>
            <div class="mt-2 flex items-center text-sm text-gray-500">
                <span class="font-medium text-gray-900">من:</span> <span class="ml-2">{{ email.sender_name }} ({{ email.sender_email }})</span>
            </div>
            <div class="mt-1 flex items-center text-sm text-gray-500">
                <span class="font-medium text-gray-900">إلى:</span> <span class="ml-2">{{ email.account.name }}</span>
            </div>
        </div>
        <div class="text-right">
            <span class="text-sm text-gray-500 block mb-2">{{ email.received_at|date:"d M Y, h:i A" }}</span>
            <span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">{{ email.get_status_display }}</span>
        </div>
    </div>

    <!-- الإجراءات -->
    <div class="px-6 py-3 bg-white border-b border-gray-100 flex gap-2">
        <a href="javascript:history.back()" class="text-gray-600 hover:text-gray-900 px-3 py-1.5 border border-gray-300 rounded text-sm font-medium transition-colors">
            <i class="fas fa-arrow-right ml-1"></i> رجوع
        </a>
        <button onclick="toggleReply()" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-1.5 rounded text-sm font-medium transition-colors shadow-sm">
            <i class="fas fa-reply ml-1"></i> رد
        </button>
        {% if email.client %}
        <a href="{% url 'client_profile' email.client.id %}" class="bg-green-50 hover:bg-green-100 text-green-700 px-4 py-1.5 border border-green-200 rounded text-sm font-medium transition-colors">
            <i class="fas fa-user ml-1"></i> فتح ملف العميل
        </a>
        {% endif %}
    </div>

    <!-- محتوى الرسالة -->
    <div class="p-8 text-gray-800" style="min-height: 200px; font-size: 15px; line-height: 1.8;">
        {% if email.body_html %}
            <div class="email-html-content">
                {{ email.body_html|safe }}
            </div>
        {% else %}
            <div class="whitespace-pre-wrap">
                {{ email.body_text|urlize }}
            </div>
        {% endif %}
    </div>

    <!-- صندوق الرد -->
    <div id="replyBox" class="hidden border-t border-gray-200 bg-gray-50 p-6">
        <h3 class="text-lg font-bold text-gray-800 mb-4">كتابة رد إلى: {{ email.sender_name|default:email.sender_email }}</h3>
        <form method="POST" action="{% url 'reply_email' email.id %}">
            {% csrf_token %}
            <textarea name="reply_content" rows="6" required placeholder="اكتب ردك هنا..." class="w-full border border-gray-300 rounded-md p-4 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 shadow-sm"></textarea>
            <div class="mt-4 flex justify-end gap-2">
                <button type="button" onclick="document.getElementById('replyBox').classList.add('hidden')" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 bg-white hover:bg-gray-50 font-medium">إلغاء</button>
                <button type="submit" onclick="this.innerHTML='<i class=\'fas fa-spinner fa-spin ml-1\'></i> جاري الإرسال...'" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-md font-medium shadow-sm transition-colors">
                    <i class="fas fa-paper-plane ml-1"></i> إرسال الرد
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    function toggleReply() {
        var box = document.getElementById('replyBox');
        box.classList.toggle('hidden');
        if (!box.classList.contains('hidden')) {
            box.scrollIntoView({ behavior: 'smooth' });
            box.querySelector('textarea').focus();
        }
    }
</script>
{% endblock %}