{% extends "base.html" %}
{% block title %}مجتمع المشاريع{% endblock %}
{% block content %}
<div class="max-w-7xl mx-auto px-4 py-12">
    <!-- Header -->
    <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">&#128300;</span> مجتمع المشاريع
            </h1>
            <p class="text-slate-400 mt-2">اكتشف المشاريع المبتكرة من رواد الأعمال</p>
        </div>
        {% if current_user.is_authenticated %}
        <a href="{{ url_for('society.submit') }}" class="bg-gold-500 hover:bg-gold-600 text-black font-bold px-6 py-3 rounded-xl transition">
            + إضافة مشروع
        </a>
        {% endif %}
    </div>

    <!-- Stats -->
    <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">{{ total_projects }}</div>
            <div class="text-xs text-slate-400">مشروع منشور</div>
        </div>
        <div class="glass p-4 rounded-xl text-center">
            <div class="text-2xl font-bold text-emerald-400">{{ total_sponsors }}</div>
            <div class="text-xs text-slate-400">راعي</div>
        </div>
        <div class="glass p-4 rounded-xl text-center">
            <div class="text-2xl font-bold text-blue-400">{{ total_views }}</div>
            <div class="text-xs text-slate-400">مشاهدة</div>
        </div>
        <div class="glass p-4 rounded-xl text-center">
            <div class="text-2xl font-bold text-purple-400">{{ total_likes }}</div>
            <div class="text-xs text-slate-400">إعجاب</div>
        </div>
    </div>

    <!-- Filters -->
    <div class="glass p-4 rounded-xl mb-6">
        <form method="GET" class="flex flex-wrap gap-4 items-center">
            <div class="flex-1 min-w-[200px]">
                <input type="text" name="q" value="{{ search }}" placeholder="بحث في المشاريع..."
                    class="w-full bg-black/30 border border-white/10 rounded-lg px-4 py-2 text-white placeholder-slate-600">
            </div>
            <div>
                <select name="tier" class="bg-black/30 border border-white/10 rounded-lg px-4 py-2 text-white">
                    <option value="">كل المستويات</option>
                    <option value="platinum" {% if tier == 'platinum' %}selected{% endif %}>بلاتيني</option>
                    <option value="gold" {% if tier == 'gold' %}selected{% endif %}>ذهبي</option>
                    <option value="silver" {% if tier == 'silver' %}selected{% endif %}>فضي</option>
                    <option value="bronze" {% if tier == 'bronze' %}selected{% endif %}>برونزي</option>
                </select>
            </div>
            <div>
                <select name="sort" class="bg-black/30 border border-white/10 rounded-lg px-4 py-2 text-white">
                    <option value="latest" {% if sort == 'latest' %}selected{% endif %}>الأحدث</option>
                    <option value="popular" {% if sort == 'popular' %}selected{% endif %}>الأكثر مشاهدة</option>
                    <option value="sponsored" {% if sort == 'sponsored' %}selected{% endif %}>الأكثر رعاية</option>
                </select>
            </div>
            <button type="submit" class="bg-white/10 text-white px-6 py-2 rounded-lg hover:bg-white/20 transition">
                بحث
            </button>
        </form>
    </div>

    <!-- Featured Projects -->
    {% if featured_projects %}
    <div class="mb-8">
        <h2 class="text-xl font-bold text-white mb-4 flex items-center gap-2">
            <span class="text-gold-400">&#11088;</span> مشاريع مميزة
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            {% for project in featured_projects %}
            <a href="{{ url_for('society.detail', slug=project.slug) }}" class="group">
                <div class="glass rounded-2xl overflow-hidden hover:bg-white/5 transition">
                    {% if project.cover_image %}
                    <div class="aspect-video bg-black/30 relative overflow-hidden">
                        <img src="{{ project.cover_image }}" alt="{{ project.title_ar or project.title }}"
                            class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
                    </div>
                    {% endif %}
                    <div class="p-4">
                        <h3 class="text-white font-bold mb-2 group-hover:text-gold-400 transition">{{ project.title_ar or project.title }}</h3>
                        <p class="text-slate-400 text-sm line-clamp-2">{{ project.description_ar or project.description }}</p>
                        <div class="flex items-center gap-4 mt-3 text-xs text-slate-500">
                            <span>&#128065; {{ project.view_count }}</span>
                            <span>&#10084; {{ project.like_count }}</span>
                            <span>&#128101; {{ project.approved_sponsors|length }}</span>
                        </div>
                    </div>
                </div>
            </a>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- Projects Grid -->
    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
        {% for project in pagination.items %}
        <a href="{{ url_for('society.detail', slug=project.slug) }}" class="group">
            <div class="glass rounded-2xl overflow-hidden hover:bg-white/5 transition">
                {% if project.cover_image %}
                <div class="aspect-video bg-black/30 relative overflow-hidden">
                    <img src="{{ project.cover_image }}" alt="{{ project.title_ar or project.title }}"
                        class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
                    {% if project.is_featured %}
                    <span class="absolute top-2 right-2 bg-gold-500 text-black text-xs px-2 py-1 rounded-full font-bold">
                        &#11088; مميز
                    </span>
                    {% endif %}
                </div>
                {% else %}
                <div class="aspect-video bg-gradient-to-br from-gold-500/20 to-purple-500/20 flex items-center justify-center">
                    <span class="text-4xl text-white/20">&#128300;</span>
                </div>
                {% endif %}
                <div class="p-4">
                    <h3 class="text-white font-bold mb-2 line-clamp-2 group-hover:text-gold-400 transition">
                        {{ project.title_ar or project.title }}
                    </h3>
                    <p class="text-slate-400 text-sm line-clamp-2 mb-3">{{ project.description_ar or project.description }}</p>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-2">
                            <div class="w-6 h-6 rounded-full bg-gradient-to-br from-gold-500 to-orange-500"></div>
                            <span class="text-xs text-slate-500">{{ project.user.name }}</span>
                        </div>
                        <div class="flex items-center gap-2 text-xs text-slate-500">
                            <span>&#128065; {{ project.view_count }}</span>
                            <span>&#10084; {{ project.like_count }}</span>
                        </div>
                    </div>
                    <!-- Sponsors badges -->
                    {% if project.approved_sponsors %}
                    <div class="flex gap-1 mt-3">
                        {% for sponsor in project.approved_sponsors[:4] %}
                        {% if sponsor.logo_url %}
                        <img src="{{ sponsor.logo_url }}" alt="{{ sponsor.tier }}" class="w-6 h-6 rounded object-cover" title="{{ sponsor.tier_label_ar }}">
                        {% else %}
                        <span class="w-6 h-6 rounded bg-white/10 flex items-center justify-center text-xs" title="{{ sponsor.tier_label_ar }}">
                            {{ sponsor.tier[0]|upper }}
                        </span>
                        {% endif %}
                        {% endfor %}
                        {% if project.approved_sponsors|length > 4 %}
                        <span class="text-xs text-slate-500">+{{ project.approved_sponsors|length - 4 }}</span>
                        {% endif %}
                    </div>
                    {% endif %}
                </div>
            </div>
        </a>
        {% else %}
        <div class="col-span-full text-center py-12">
            <p class="text-slate-500">لا توجد مشاريع منشورة</p>
        </div>
        {% endfor %}
    </div>

    <!-- Pagination -->
    {% if pagination.pages > 1 %}
    <div class="flex justify-center gap-2 mt-8">
        {% if pagination.has_prev %}
        <a href="?page={{ pagination.prev_num }}&q={{ search }}&tier={{ tier }}&sort={{ sort }}"
            class="px-4 py-2 rounded-lg text-slate-400 hover:text-white bg-white/5 transition">&larr;</a>
        {% endif %}
        {% for p in pagination.iter_pages() %}
            {% if p %}
                {% if p == pagination.page %}
                <span class="px-4 py-2 rounded-lg bg-gold-500 text-black font-bold">{{ p }}</span>
                {% else %}
                <a href="?page={{ p }}&q={{ search }}&tier={{ tier }}&sort={{ sort }}"
                    class="px-4 py-2 rounded-lg text-slate-400 hover:text-white bg-white/5 transition">{{ p }}</a>
                {% endif %}
            {% else %}
            <span class="text-slate-600 px-2">...</span>
            {% endif %}
        {% endfor %}
        {% if pagination.has_next %}
        <a href="?page={{ pagination.next_num }}&q={{ search }}&tier={{ tier }}&sort={{ sort }}"
            class="px-4 py-2 rounded-lg text-slate-400 hover:text-white bg-white/5 transition">&rarr;</a>
        {% endif %}
    </div>
    {% endif %}
</div>
{% endblock %}