{% extends "base.html" %}
{% block title %}{{ listing.title or listing.report.project_name }} — السوق{% endblock %}
{% block content %}
<div class="max-w-4xl mx-auto px-4 py-8">
    <a href="{{ url_for('marketplace.index') }}" class="text-sm text-slate-400 hover:text-gold-400 transition mb-6 inline-block">&larr; العودة للسوق</a>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Main Content -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Header Card -->
            <div class="bg-white/5 border border-white/10 rounded-xl p-6">
                <div class="flex items-center gap-3 mb-4">
                    <span class="px-3 py-1 rounded-full text-xs font-medium bg-{{ listing.goal_color }}-500/20 text-{{ listing.goal_color }}-400 border border-{{ listing.goal_color }}-500/30">
                        {{ listing.goal_label }}
                    </span>
                    {% if listing.sector %}
                    <span class="text-xs text-slate-500">{{ listing.sector }}</span>
                    {% endif %}
                    {% if listing.featured %}
                    <span class="text-xs text-gold-400">⭐ مميزة</span>
                    {% endif %}
                </div>
                <h1 class="text-2xl font-bold text-white mb-2">{{ listing.title or listing.report.project_name }}</h1>
                <p class="text-slate-400 text-sm leading-relaxed">{{ listing.description or listing.report.project_description }}</p>

                {% if listing.preview_text %}
                <div class="mt-4 p-4 bg-white/5 rounded-lg border border-white/5">
                    <div class="text-xs text-slate-500 mb-1">معاينة</div>
                    <p class="text-slate-300 text-sm">{{ listing.preview_text }}</p>
                </div>
                {% endif %}
            </div>

            <!-- Goal-Specific Details -->
            {% if listing.listing_goal == 'find_investor' and listing.investment_needed %}
            <div class="bg-emerald-500/5 border border-emerald-500/20 rounded-xl p-6">
                <h3 class="text-emerald-400 font-semibold mb-3">💰 تفاصيل الاستثمار</h3>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <div class="text-xs text-slate-500">المبلغ المطلوب</div>
                        <div class="text-lg text-white font-bold">{{ listing.investment_needed }} {{ listing.currency }}</div>
                    </div>
                    {% if listing.equity_offered %}
                    <div>
                        <div class="text-xs text-slate-500">الحصة المعروضة</div>
                        <div class="text-lg text-white font-bold">{{ listing.equity_offered }}%</div>
                    </div>
                    {% endif %}
                </div>
            </div>
            {% elif listing.listing_goal == 'find_partner' %}
            <div class="bg-blue-500/5 border border-blue-500/20 rounded-xl p-6">
                <h3 class="text-blue-400 font-semibold mb-3">🤝 تفاصيل الشراكة</h3>
                {% if listing.partner_role %}
                <div class="mb-3">
                    <div class="text-xs text-slate-500">الدور المطلوب</div>
                    <div class="text-white">{{ listing.partner_role }}</div>
                </div>
                {% endif %}
                {% if listing.equity_offered %}
                <div>
                    <div class="text-xs text-slate-500">الحصة المعروضة</div>
                    <div class="text-lg text-white font-bold">{{ listing.equity_offered }}%</div>
                </div>
                {% endif %}
            </div>
            {% elif listing.listing_goal == 'license' and listing.license_terms %}
            <div class="bg-purple-500/5 border border-purple-500/20 rounded-xl p-6">
                <h3 class="text-purple-400 font-semibold mb-3">📄 شروط الترخيص</h3>
                <p class="text-slate-300 text-sm whitespace-pre-line">{{ listing.license_terms }}</p>
            </div>
            {% endif %}

            <!-- Reviews -->
            {% if reviews %}
            <div class="bg-white/5 border border-white/10 rounded-xl p-6">
                <h3 class="text-white font-semibold mb-4">التقييمات ({{ reviews|length }})</h3>
                <div class="space-y-4">
                    {% for review in reviews %}
                    <div class="border-b border-white/5 pb-4 last:border-0 last:pb-0">
                        <div class="flex items-center justify-between mb-1">
                            <span class="text-sm text-white">{{ review.buyer.name }}</span>
                            <span class="text-xs text-slate-500">{{ review.created_at.strftime('%Y-%m-%d') }}</span>
                        </div>
                        <div class="text-gold-400 text-sm mb-1">{{ '⭐' * review.rating }}</div>
                        {% if review.comment %}
                        <p class="text-slate-400 text-xs">{{ review.comment }}</p>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
        </div>

        <!-- Sidebar -->
        <div class="space-y-4">
            <!-- Price / Action Card -->
            <div class="bg-white/5 border border-white/10 rounded-xl p-6 sticky top-4">
                {% if listing.listing_goal in ('sell', 'license') %}
                <div class="text-3xl font-bold text-gold-400 mb-1">{{ "%.2f"|format(listing.price) }} <span class="text-sm text-slate-400">{{ listing.currency }}</span></div>
                {% elif listing.listing_goal == 'free' %}
                <div class="text-2xl font-bold text-slate-300 mb-1">مجاني</div>
                {% elif listing.listing_goal == 'find_investor' %}
                <div class="text-xl font-bold text-emerald-400 mb-1">بحث عن مستثمر</div>
                {% elif listing.listing_goal == 'find_partner' %}
                <div class="text-xl font-bold text-blue-400 mb-1">بحث عن شريك</div>
                {% endif %}

                <div class="flex items-center gap-3 text-xs text-slate-500 mb-4">
                    <span>👁 {{ listing.views }}</span>
                    {% if listing.purchases > 0 %}<span>🛒 {{ listing.purchases }}</span>{% endif %}
                    {% if listing.avg_rating > 0 %}<span>⭐ {{ listing.avg_rating }} ({{ listing.review_count }})</span>{% endif %}
                </div>

                {% if current_user.is_authenticated and listing.user_id == current_user.id %}
                    <div class="text-center text-slate-500 text-sm py-2">هذه دراستك</div>

                {% elif already_purchased %}
                    <a href="{{ url_for('study.view', report_id=listing.report_id) }}"
                       class="block w-full text-center bg-emerald-500/20 border border-emerald-500/30 text-emerald-400 px-6 py-3 rounded-lg font-medium hover:bg-emerald-500/30 transition mb-2">
                        عرض الدراسة الكاملة
                    </a>
                    <p class="text-xs text-slate-500 text-center">لقد اشتريت هذه الدراسة</p>

                {% elif listing.listing_goal in ('sell', 'license') %}
                    {% if current_user.is_authenticated %}
                    <form method="POST" action="{{ url_for('marketplace.purchase', listing_id=listing.id) }}">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        <button type="submit" class="w-full bg-gold-500/20 border border-gold-500/30 text-gold-400 px-6 py-3 rounded-lg font-medium hover:bg-gold-500/30 transition">
                            {{ 'شراء الآن' if listing.listing_goal == 'sell' else 'شراء الترخيص' }}
                        </button>
                    </form>
                    {% else %}
                    <a href="{{ url_for('auth.login') }}" class="block w-full text-center bg-gold-500/20 border border-gold-500/30 text-gold-400 px-6 py-3 rounded-lg font-medium hover:bg-gold-500/30 transition">
                        سجّل دخولك للشراء
                    </a>
                    {% endif %}

                {% elif listing.listing_goal == 'free' %}
                    {% if current_user.is_authenticated %}
                    <a href="{{ url_for('study.view', report_id=listing.report_id) }}"
                       class="block w-full text-center bg-slate-500/20 border border-slate-500/30 text-slate-300 px-6 py-3 rounded-lg font-medium hover:bg-slate-500/30 transition">
                        عرض الدراسة مجاناً
                    </a>
                    {% else %}
                    <a href="{{ url_for('auth.login') }}" class="block w-full text-center bg-slate-500/20 border border-slate-500/30 text-slate-300 px-6 py-3 rounded-lg font-medium hover:bg-slate-500/30 transition">
                        سجّل دخولك للعرض
                    </a>
                    {% endif %}

                {% elif listing.listing_goal in ('find_investor', 'find_partner') %}
                    {% if current_user.is_authenticated %}
                        {% if user_inquiry %}
                        <div class="text-center py-2">
                            <div class="text-sm text-{{ listing.goal_color }}-400 mb-1">تم إرسال طلبك</div>
                            <div class="text-xs text-slate-500">الحالة: {{ user_inquiry.status }}</div>
                            {% if user_inquiry.reply_message %}
                            <div class="mt-2 p-2 bg-white/5 rounded text-xs text-slate-300">{{ user_inquiry.reply_message }}</div>
                            {% endif %}
                        </div>
                        {% else %}
                        <button onclick="showInquiryModal()" class="w-full bg-{{ listing.goal_color }}-500/20 border border-{{ listing.goal_color }}-500/30 text-{{ listing.goal_color }}-400 px-6 py-3 rounded-lg font-medium hover:bg-{{ listing.goal_color }}-500/30 transition">
                            {{ 'أنا مهتم بالاستثمار' if listing.listing_goal == 'find_investor' else 'أنا مهتم بالشراكة' }}
                        </button>
                        {% endif %}
                    {% else %}
                    <a href="{{ url_for('auth.login') }}" class="block w-full text-center bg-{{ listing.goal_color }}-500/20 border border-{{ listing.goal_color }}-500/30 text-{{ listing.goal_color }}-400 px-6 py-3 rounded-lg font-medium transition">
                        سجّل دخولك
                    </a>
                    {% endif %}
                {% endif %}
            </div>

            <!-- Seller Info -->
            <div class="bg-white/5 border border-white/10 rounded-xl p-5">
                <div class="text-xs text-slate-500 mb-2">صاحب الدراسة</div>
                <div class="text-white font-medium">{{ listing.user.name }}</div>
                <div class="text-xs text-slate-500 mt-1">{{ seller_sales }} عملية بيع</div>
                {% if listing.contact_email %}
                <div class="text-xs text-slate-400 mt-2">📧 {{ listing.contact_email }}</div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Inquiry Modal -->
{% if current_user.is_authenticated and listing.listing_goal in ('find_investor', 'find_partner') and not user_inquiry %}
<div id="inquiryModal" class="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-[#1a1a2e] border border-white/10 rounded-xl p-6 w-full max-w-md">
        <h3 class="text-white font-semibold mb-4">{{ 'إبداء اهتمام بالاستثمار' if listing.listing_goal == 'find_investor' else 'إبداء اهتمام بالشراكة' }}</h3>
        <div class="space-y-3">
            <textarea id="inqMessage" rows="3" placeholder="رسالتك لصاحب الدراسة..."
                class="w-full bg-white/5 border border-white/10 text-white rounded-lg px-3 py-2 text-sm"></textarea>
            <input id="inqContact" placeholder="بريدك أو رقم هاتفك (اختياري)"
                class="w-full bg-white/5 border border-white/10 text-white rounded-lg px-3 py-2 text-sm">
            <div class="flex gap-2">
                <button onclick="submitInquiry()" class="flex-1 bg-{{ listing.goal_color }}-500/20 text-{{ listing.goal_color }}-400 px-4 py-2 rounded-lg text-sm hover:bg-{{ listing.goal_color }}-500/30 transition">إرسال</button>
                <button onclick="hideInquiryModal()" class="px-4 py-2 text-slate-400 text-sm hover:text-white transition">إلغاء</button>
            </div>
        </div>
    </div>
</div>
<script>
function showInquiryModal() { document.getElementById('inquiryModal').classList.remove('hidden'); }
function hideInquiryModal() { document.getElementById('inquiryModal').classList.add('hidden'); }
function submitInquiry() {
    fetch('{{ url_for("marketplace.inquire", listing_id=listing.id) }}', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
            message: document.getElementById('inqMessage').value,
            contact_info: document.getElementById('inqContact').value,
        })
    }).then(r => r.json()).then(data => {
        if (data.status === 'ok') {
            hideInquiryModal();
            location.reload();
        } else {
            alert(data.error || 'حدث خطأ');
        }
    });
}
</script>
{% endif %}
{% endblock %}