{% extends "base.html" %}
{% block title %}سوق دراسات الجدوى{% endblock %}
{% block content %}
<div class="max-w-7xl mx-auto px-4 py-8">
    <!-- Header -->
    <div class="flex flex-col md:flex-row items-start md:items-center justify-between mb-8 gap-4">
        <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-sm text-slate-400 mt-1">اكتشف دراسات جدوى جاهزة — للبيع أو الاستثمار أو الشراكة</p>
        </div>
        <div class="flex items-center gap-3">
            {% if current_user.is_authenticated %}
            <a href="{{ url_for('marketplace.my_listings') }}" class="text-sm text-slate-400 hover:text-gold-400 transition">دراساتي</a>
            <a href="{{ url_for('marketplace.my_purchases') }}" class="text-sm text-slate-400 hover:text-gold-400 transition">مشترياتي</a>
            <a href="{{ url_for('marketplace.create') }}" class="bg-gold-500/20 border border-gold-500/30 text-gold-400 px-4 py-2 rounded-lg text-sm hover:bg-gold-500/30 transition">+ عرض دراسة</a>
            {% endif %}
        </div>
    </div>

    <!-- Goal Tabs -->
    <div class="flex flex-wrap gap-2 mb-6">
        <a href="{{ url_for('marketplace.index', sector=sector, q=search, sort=sort) }}"
           class="px-4 py-1.5 rounded-full text-xs font-medium transition {{ 'bg-gold-500/20 text-gold-400 border border-gold-500/30' if not goal else 'bg-white/5 text-slate-400 border border-white/10 hover:border-white/20' }}">
            الكل
        </a>
        {% for g_key, g_val in goal_info.items() %}
        <a href="{{ url_for('marketplace.index', goal=g_key, sector=sector, q=search, sort=sort) }}"
           class="px-4 py-1.5 rounded-full text-xs font-medium transition {{ 'bg-' + g_val.color + '-500/20 text-' + g_val.color + '-400 border border-' + g_val.color + '-500/30' if goal == g_key else 'bg-white/5 text-slate-400 border border-white/10 hover:border-white/20' }}">
            {{ g_val.icon }} {{ g_val.label }}
        </a>
        {% endfor %}
    </div>

    <!-- Search & Filters -->
    <form method="GET" class="flex flex-wrap gap-3 mb-8">
        {% if goal %}<input type="hidden" name="goal" value="{{ goal }}">{% endif %}
        <input type="text" name="q" value="{{ search }}" placeholder="ابحث عن دراسة..."
               class="flex-1 min-w-[200px] bg-white/5 border border-white/10 rounded-lg px-4 py-2 text-sm text-white placeholder-slate-500 focus:outline-none focus:border-gold-500/50">
        <select name="sector" class="bg-slate-800 border border-white/10 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-gold-500/50">
            <option value="">كل القطاعات</option>
            {% for s in sectors %}
            <option value="{{ s }}" {{ 'selected' if sector == s }}>{{ s }}</option>
            {% endfor %}
        </select>
        <select name="sort" class="bg-slate-800 border border-white/10 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-gold-500/50">
            <option value="newest" {{ 'selected' if sort == 'newest' }}>الأحدث</option>
            <option value="popular" {{ 'selected' if sort == 'popular' }}>الأكثر مبيعاً</option>
            <option value="price_low" {{ 'selected' if sort == 'price_low' }}>السعر: الأقل</option>
            <option value="price_high" {{ 'selected' if sort == 'price_high' }}>السعر: الأعلى</option>
        </select>
        <button type="submit" class="bg-gold-500/20 text-gold-400 px-5 py-2 rounded-lg text-sm hover:bg-gold-500/30 transition">بحث</button>
    </form>

    <!-- Featured Listings -->
    {% if featured_listings %}
    <div class="mb-10">
        <h2 class="text-lg font-semibold text-gold-400 mb-4">⭐ دراسات مميزة</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            {% for listing in featured_listings %}
            <a href="{{ url_for('marketplace.view_listing', listing_id=listing.id) }}"
               class="bg-gradient-to-br from-gold-500/10 to-transparent border border-gold-500/20 rounded-xl p-5 hover:border-gold-500/40 transition block relative overflow-hidden">
                <div class="absolute top-3 left-3 bg-gold-500/20 text-gold-400 text-[10px] px-2 py-0.5 rounded-full">مميزة</div>
                <span class="inline-block px-2 py-0.5 rounded-full text-[10px] font-medium bg-{{ listing.goal_color }}-500/20 text-{{ listing.goal_color }}-400 mb-2">{{ listing.goal_label }}</span>
                <h3 class="text-white font-semibold mb-1">{{ listing.title or listing.report.project_name }}</h3>
                {% if listing.sector %}<span class="text-[10px] text-slate-500">{{ listing.sector }}</span>{% endif %}
                <p class="text-slate-400 text-xs mt-2 line-clamp-2">{{ listing.description or listing.report.project_description }}</p>
                <div class="flex items-center justify-between mt-3 text-xs text-slate-500">
                    {% if listing.listing_goal in ('sell', 'license') %}
                    <span class="text-gold-400 font-semibold">{{ listing.price }} {{ listing.currency }}</span>
                    {% elif listing.listing_goal == 'find_investor' %}
                    <span class="text-emerald-400">استثمار: {{ listing.investment_needed }} {{ listing.currency }}</span>
                    {% elif listing.listing_goal == 'free' %}
                    <span class="text-slate-300">مجاني</span>
                    {% else %}
                    <span></span>
                    {% endif %}
                    <div class="flex items-center gap-2">
                        {% if listing.avg_rating > 0 %}<span>⭐ {{ listing.avg_rating }}</span>{% endif %}
                        <span>👁 {{ listing.views }}</span>
                    </div>
                </div>
            </a>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- Listings Grid -->
    {% if pagination.items %}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {% for listing in pagination.items %}
        <a href="{{ url_for('marketplace.view_listing', listing_id=listing.id) }}"
           class="bg-white/5 border border-white/10 rounded-xl p-5 hover:border-{{ listing.goal_color }}-500/30 transition block group">
            <div class="flex items-center justify-between mb-3">
                <span class="px-2 py-0.5 rounded-full text-[10px] font-medium bg-{{ listing.goal_color }}-500/20 text-{{ listing.goal_color }}-400">
                    {{ listing.goal_label }}
                </span>
                {% if listing.sector %}
                <span class="text-[10px] text-slate-500">{{ listing.sector }}</span>
                {% endif %}
            </div>
            <h3 class="text-white font-semibold mb-1 group-hover:text-{{ listing.goal_color }}-400 transition">{{ listing.title or listing.report.project_name }}</h3>
            <p class="text-slate-400 text-xs mb-3 line-clamp-2">{{ listing.preview_text or listing.description or listing.report.project_description }}</p>
            <div class="flex items-center justify-between text-xs text-slate-500">
                {% if listing.listing_goal in ('sell', 'license') %}
                <span class="text-gold-400 font-semibold text-sm">{{ listing.price }} {{ listing.currency }}</span>
                {% elif listing.listing_goal == 'find_investor' %}
                <span class="text-emerald-400">{{ listing.investment_needed }} {{ listing.currency }}</span>
                {% elif listing.listing_goal == 'free' %}
                <span class="text-slate-300 font-medium">مجاني</span>
                {% else %}
                <span></span>
                {% endif %}
                <div class="flex items-center gap-3">
                    {% if listing.avg_rating > 0 %}<span>⭐ {{ listing.avg_rating }}</span>{% endif %}
                    <span>👁 {{ listing.views }}</span>
                    {% if listing.purchases > 0 %}<span>🛒 {{ listing.purchases }}</span>{% endif %}
                </div>
            </div>
            <div class="mt-3 pt-3 border-t border-white/5 flex items-center gap-2 text-[10px] text-slate-500">
                <span>بواسطة {{ listing.user.name }}</span>
                <span>·</span>
                <span>{{ listing.created_at.strftime('%Y-%m-%d') }}</span>
            </div>
        </a>
        {% endfor %}
    </div>

    <!-- Pagination -->
    {% if pagination.pages > 1 %}
    <div class="flex justify-center gap-2 mt-8">
        {% for p in pagination.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
            {% if p %}
            <a href="{{ url_for('marketplace.index', page=p, goal=goal, sector=sector, q=search, sort=sort) }}"
               class="w-8 h-8 flex items-center justify-center rounded-lg text-xs {{ 'bg-gold-500/20 text-gold-400' if p == pagination.page else 'bg-white/5 text-slate-400 hover:bg-white/10' }}">
                {{ p }}
            </a>
            {% else %}
            <span class="text-slate-600">…</span>
            {% endif %}
        {% endfor %}
    </div>
    {% endif %}

    {% else %}
    <div class="text-center py-16">
        <div class="text-4xl mb-4">📊</div>
        <p class="text-slate-400 mb-2">لا توجد دراسات متاحة حالياً</p>
        {% if current_user.is_authenticated %}
        <a href="{{ url_for('marketplace.create') }}" class="text-gold-400 text-sm hover:underline">كن أول من يعرض دراسته!</a>
        {% endif %}
    </div>
    {% endif %}
</div>
{% endblock %}