{% extends 'base.html' %}

{% block content %}
<!-- Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 flex items-center">
        <div class="p-3 rounded-full bg-blue-100 text-blue-600 ml-4">
            <i class="fas fa-envelope fa-fw text-xl"></i>
        </div>
        <div>
            <p class="text-sm font-medium text-gray-500">رسائل جديدة (غير مقروءة)</p>
            <p class="text-2xl font-bold text-gray-900">{{ stats.new_messages }}</p>
        </div>
    </div>
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 flex items-center">
        <div class="p-3 rounded-full bg-yellow-100 text-yellow-600 ml-4">
            <i class="fas fa-star fa-fw text-xl"></i>
        </div>
        <div>
            <p class="text-sm font-medium text-gray-500">عملاء VIP</p>
            <p class="text-2xl font-bold text-gray-900">{{ stats.vip_clients }}</p>
        </div>
    </div>
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 flex items-center">
        <div class="p-3 rounded-full bg-green-100 text-green-600 ml-4">
            <i class="fas fa-wallet fa-fw text-xl"></i>
        </div>
        <div>
            <p class="text-sm font-medium text-gray-500">إجمالي الأرباح</p>
            <p class="text-2xl font-bold text-gray-900">${{ stats.total_revenue }}</p>
        </div>
    </div>
</div>

<div class="mb-6 flex">
    <form method="GET" action="" class="w-full md:w-2/3 lg:w-1/2 flex shadow-sm rounded-md">
        <input type="text" name="q" value="{{ q }}" placeholder="ابحث في الإيميلات، اسم المرسل، أو عنوان الرسالة..." class="flex-1 border border-gray-300 rounded-r-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm">
        <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-l-md transition-colors font-medium text-sm">
            <i class="fas fa-search ml-1"></i> بحث
        </button>
        {% if q %}
        <a href="/" class="bg-gray-100 border border-gray-300 hover:bg-gray-200 text-gray-700 px-4 py-2 mr-2 rounded-md transition-colors font-medium text-sm flex items-center shadow-sm">
            <i class="fas fa-times ml-1"></i> مسح
        </a>
        {% endif %}
    </form>
</div>

<div class="bg-white shadow-sm rounded-lg border border-gray-200 overflow-hidden">
    <ul class="divide-y divide-gray-200">
        {% for email in emails %}
        <li class="hover:bg-gray-50 transition-colors cursor-pointer">
            <a href="{% url 'read_email' email.id %}" class="block">
                <div class="px-6 py-4 flex items-center justify-between">
                <div class="flex items-center min-w-0 flex-1">
                    <div class="flex-shrink-0">
                        <span class="inline-flex items-center justify-center h-10 w-10 rounded-full bg-indigo-100">
                            <span class="text-indigo-600 font-medium text-lg">{{ email.sender_name|default:email.sender_email|make_list|first|upper }}</span>
                        </span>
                    </div>
                    <div class="min-w-0 flex-1 px-4 md:grid md:grid-cols-2 md:gap-4">
                        <div>
                            <p class="text-sm font-medium text-indigo-600 truncate">{{ email.sender_name|default:email.sender_email }}</p>
                            <p class="mt-2 flex items-center text-sm text-gray-500">
                                <span class="truncate font-semibold">{{ email.subject|default:"(بدون عنوان)" }}</span>
                            </p>
                        </div>
                        <div class="hidden md:block">
                            <div>
                                <p class="text-sm text-gray-900">
                                    {{ email.received_at|date:"d M Y, h:i A" }}
                                </p>
                                <p class="mt-2 flex items-center text-sm text-gray-500">
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                                        {% if email.status == 'new' %} bg-green-100 text-green-800 
                                        {% elif email.status == 'read' %} bg-gray-100 text-gray-800
                                        {% else %} bg-blue-100 text-blue-800 {% endif %}">
                                        {{ email.get_status_display }}
                                    </span>
                                    <span class="mx-2 text-gray-300">|</span>
                                    إلى: {{ email.account.name }}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ml-5 flex-shrink-0">
                    <i class="fas fa-chevron-left text-gray-400"></i>
                </div>
            </div>
            </a>
        </li>
        {% empty %}
        <li class="px-6 py-12 text-center">
            <i class="fas fa-inbox text-gray-300 text-5xl mb-4"></i>
            <h3 class="text-lg font-medium text-gray-900">لا توجد رسائل بعد</h3>
            <p class="mt-1 text-sm text-gray-500">قم بإضافة حساب إيميل وتشغيل محرك الجلب لرؤية الرسائل هنا.</p>
        </li>
        {% endfor %}
    </ul>
</div>
{% endblock %}