{% extends "base.html" %}
{% block title %}صفحات الهبوط{% endblock %}
{% block content %}
<div class="max-w-7xl mx-auto px-4 py-12">
    <div class="flex items-center justify-between mb-8">
        <div>
            <h1 class="text-3xl font-serif font-bold text-white flex items-center gap-3">
                <span class="text-gold-400">&#9670;</span> صفحات الهبوط
            </h1>
            <p class="text-slate-400 mt-2 text-sm">إدارة صفحات الهبوط التي تم إنشاؤها بالذكاء الاصطناعي</p>
        </div>
        <div class="flex gap-3">
            <a href="{{ url_for('study.new') }}" class="bg-gold-500 text-black px-6 py-2 rounded-lg font-bold hover:bg-gold-400 transition flex items-center gap-2">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                صفحة هبوط جديدة
            </a>
        </div>
    </div>

    <!-- Stats Row -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
        <div class="glass p-4 rounded-xl text-center">
            <div class="text-2xl font-bold text-white">{{ landing_pages|length }}</div>
            <div class="text-xs text-slate-400 mt-1">إجمالي الصفحات</div>
        </div>
        <div class="glass p-4 rounded-xl text-center">
            <div class="text-2xl font-bold text-emerald-400">{{ landing_pages|selectattr('is_public')|list|length }}</div>
            <div class="text-xs text-slate-400 mt-1">منشورة</div>
        </div>
        <div class="glass p-4 rounded-xl text-center">
            <div class="text-2xl font-bold text-blue-400">{{ landing_pages|selectattr('status', 'equalto', 'ready')|list|length }}</div>
            <div class="text-xs text-slate-400 mt-1">جاهزة للنشر</div>
        </div>
        <div class="glass p-4 rounded-xl text-center">
            <div class="text-2xl font-bold text-yellow-400">{{ landing_pages|selectattr('status', 'equalto', 'generating')|list|length }}</div>
            <div class="text-xs text-slate-400 mt-1">قيد التوليد</div>
        </div>
    </div>

    {% if landing_pages %}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {% for page in landing_pages %}
        <div class="glass p-6 rounded-2xl hover:bg-white/5 transition group">
            <div class="flex items-start justify-between mb-4 gap-3">
                <div class="flex-1 min-w-0">
                    <h3 class="text-base font-bold text-white mb-1 line-clamp-2 leading-tight" title="{{ page.name }}">
                        {% set display_name = page.name.replace(' Landing Page', '') %}
                        {% if display_name|length > 50 %}
                            {{ display_name[:50] }}...
                        {% else %}
                            {{ display_name }}
                        {% endif %}
                        <span class="text-xs font-normal text-slate-400 block mt-1">
                            {% if page.report %}
                                {{ page.report.project_name[:40] }}{% if page.report.project_name|length > 40 %}...{% endif %}
                            {% else %}
                                N/A
                            {% endif %}
                        </span>
                    </h3>
                </div>
                <span class="text-xs px-3 py-1 rounded-full whitespace-nowrap flex-shrink-0
                    {% if page.status == 'published' %}bg-emerald-500/20 text-emerald-400
                    {% elif page.status == 'ready' %}bg-blue-500/20 text-blue-400
                    {% elif page.status == 'generating' %}bg-yellow-500/20 text-yellow-400
                    {% elif page.status == 'error' %}bg-red-500/20 text-red-400
                    {% else %}bg-slate-500/20 text-slate-400{% endif %}">
                    {% if page.status == 'generating' %}جاري التوليد
                    {% elif page.status == 'ready' %}جاهز
                    {% elif page.status == 'published' %}منشور
                    {% elif page.status == 'error' %}خطأ
                    {% else %}{{ page.status }}{% endif %}
                </span>
            </div>

            {% if page.content_ar and page.content_ar.hero_section %}
            <div class="mb-4 p-3 rounded-lg bg-black/20">
                <p class="text-sm text-white font-bold mb-1 line-clamp-2 leading-tight" title="{{ page.content_ar.hero_section.headline }}">
                    {{ page.content_ar.hero_section.headline[:70] }}{% if page.content_ar.hero_section.headline|length > 70 %}...{% endif %}
                </p>
                <p class="text-xs text-slate-400 line-clamp-2 leading-relaxed" title="{{ page.content_ar.hero_section.subheadline }}">
                    {{ page.content_ar.hero_section.subheadline[:100] }}{% if page.content_ar.hero_section.subheadline|length > 100 %}...{% endif %}
                </p>
                <div class="flex items-center gap-2 mt-2 text-xs text-slate-500">
                    <span class="flex items-center gap-1">
                        🇸🇦 <span class="text-gold-400">AR</span>
                    </span>
                    {% if page.content_en %}
                    <span class="flex items-center gap-1">
                        🇬🇧 <span class="text-blue-400">EN</span>
                    </span>
                    {% endif %}
                </div>
            </div>
            {% endif %}

            <div class="flex items-center justify-between text-xs text-slate-400 mb-4">
                <span>{{ page.created_at.strftime('%Y-%m-%d') }}</span>
                {% if page.is_public %}
                <span class="text-emerald-400 flex items-center gap-1">
                    🌐 <span>منشور</span>
                </span>
                {% else %}
                <span class="text-slate-500">مسودة</span>
                {% endif %}
            </div>

            <!-- Action Buttons -->
            <div class="flex gap-2">
                <a href="{{ url_for('landing.edit', landing_page_id=page.id) }}" class="flex-1 bg-gold-500/10 text-gold-400 px-4 py-2 rounded-lg hover:bg-gold-500/20 transition text-center text-sm font-medium">
                    {% if page.status == 'ready' or page.status == 'published' %}تعديل{% else %}التفاصيل{% endif %}
                </a>
                {% if page.status == 'ready' or page.status == 'published' %}
                <a href="{{ url_for('landing.preview', landing_page_id=page.id) }}" target="_blank" class="bg-blue-500/10 text-blue-400 px-4 py-2 rounded-lg hover:bg-blue-500/20 transition text-sm" title="معاينة">
                    👁️
                </a>
                {% endif %}
                {% if page.is_public %}
                <a href="{{ url_for('landing.view_published', slug=page.slug) }}" target="_blank" class="bg-emerald-500/10 text-emerald-400 px-4 py-2 rounded-lg hover:bg-emerald-500/20 transition text-sm" title="عرض المنشور">
                    🌐
                </a>
                {% endif %}
            </div>

            <!-- Additional Info -->
            {% if page.hero_image_url %}
            <div class="mt-3 pt-3 border-t border-white/10 flex items-center gap-2 text-xs text-slate-500">
                <span>🖼️</span>
                <span>صورة رئيسية مرفوعة</span>
            </div>
            {% endif %}
            {% if page.additional_images and page.additional_images|length > 0 %}
            <div class="mt-2 flex items-center gap-2 text-xs text-slate-500">
                <span>🖼️</span>
                <span>{{ page.additional_images|length }} صور إضافية</span>
            </div>
            {% endif %}
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="text-center py-16">
        <div class="text-6xl mb-4 opacity-20">&#128187;</div>
        <h3 class="text-xl font-bold text-white mb-2">لا توجد صفحات هبوط بعد</h3>
        <p class="text-slate-400 mb-6">ابدأ بإنشاء دراسة جدوى، ثم يمكنك إنشاء صفحة هبوط احترافية بالذكاء الاصطناعي</p>
        <div class="flex justify-center gap-4">
            <a href="{{ url_for('study.new') }}" class="inline-block bg-gold-500 text-black px-6 py-3 rounded-xl font-bold hover:bg-gold-400 transition">
                إنشاء دراسة جدوى جديدة
            </a>
            <a href="{{ url_for('study.index') }}" class="inline-block border border-white/20 text-white px-6 py-3 rounded-xl font-bold hover:bg-white/5 transition">
                عرض التقارير
            </a>
        </div>
    </div>
    {% endif %}
</div>

<style>
    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Better text wrapping for Arabic */
    h3, p {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    /* Ensure cards don't overflow */
    .glass {
        max-width: 100%;
        overflow: hidden;
    }
</style>
{% endblock %}