{% extends "base.html" %}
{% block title %}مشترياتي{% endblock %}
{% block content %}
<div class="max-w-6xl mx-auto px-4 py-8">
    <div class="flex items-center justify-between mb-8">
        <div>
            <h1 class="text-2xl 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>
        <a href="{{ url_for('marketplace.index') }}" class="text-sm text-slate-400 hover:text-gold-400 transition">تصفح السوق</a>
    </div>

    {% if purchases %}
    <div class="space-y-4">
        {% for purchase in purchases %}
        <div class="bg-white/5 border border-white/10 rounded-xl p-5 flex items-center justify-between gap-4">
            <div class="flex-1 min-w-0">
                <h3 class="text-white font-semibold truncate">{{ purchase.listing.title or purchase.listing.report.project_name }}</h3>
                <div class="flex items-center gap-4 mt-1 text-xs text-slate-500">
                    <span>{{ purchase.created_at.strftime('%Y-%m-%d') }}</span>
                    <span class="text-gold-400">{{ purchase.amount }} {{ purchase.currency }}</span>
                    <span>بواسطة {{ purchase.listing.user.name }}</span>
                </div>
            </div>
            <div class="flex items-center gap-2 shrink-0">
                <a href="{{ url_for('study.view', report_id=purchase.listing.report_id) }}"
                   class="text-xs text-gold-400 hover:text-gold-300 transition px-3 py-1.5 bg-gold-500/10 rounded-lg">
                    عرض الدراسة
                </a>
                {% if not purchase.review %}
                <button onclick="showReviewModal({{ purchase.id }})"
                    class="text-xs text-slate-400 hover:text-gold-400 transition px-3 py-1.5 bg-white/5 rounded-lg">
                    تقييم
                </button>
                {% else %}
                <span class="text-xs text-gold-400">{{ '⭐' * purchase.review[0].rating if purchase.review else '' }}</span>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="text-center py-16">
        <div class="text-4xl mb-4">🛒</div>
        <p class="text-slate-400 mb-2">لم تشترِ أي دراسة بعد</p>
        <a href="{{ url_for('marketplace.index') }}" class="text-gold-400 text-sm hover:underline">تصفح السوق</a>
    </div>
    {% endif %}
</div>

<!-- Review Modal -->
<div id="reviewModal" 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">تقييم الدراسة</h3>
        <div class="space-y-3">
            <div class="flex gap-2 justify-center" id="starRating">
                {% for i in range(1, 6) %}
                <button type="button" onclick="setRating({{ i }})" class="text-2xl star-btn text-slate-600 hover:text-gold-400 transition" data-star="{{ i }}">⭐</button>
                {% endfor %}
            </div>
            <input type="hidden" id="reviewRating" value="5">
            <input type="hidden" id="reviewPurchaseId" value="">
            <textarea id="reviewComment" rows="3" placeholder="تعليقك (اختياري)..."
                class="w-full bg-white/5 border border-white/10 text-white rounded-lg px-3 py-2 text-sm"></textarea>
            <div class="flex gap-2">
                <button onclick="submitReview()" class="flex-1 bg-gold-500/20 text-gold-400 px-4 py-2 rounded-lg text-sm hover:bg-gold-500/30 transition">إرسال التقييم</button>
                <button onclick="hideReviewModal()" class="px-4 py-2 text-slate-400 text-sm hover:text-white transition">إلغاء</button>
            </div>
        </div>
    </div>
</div>

<script>
let currentRating = 5;
function showReviewModal(purchaseId) {
    document.getElementById('reviewPurchaseId').value = purchaseId;
    document.getElementById('reviewModal').classList.remove('hidden');
    setRating(5);
}
function hideReviewModal() { document.getElementById('reviewModal').classList.add('hidden'); }
function setRating(n) {
    currentRating = n;
    document.getElementById('reviewRating').value = n;
    document.querySelectorAll('.star-btn').forEach(btn => {
        btn.style.opacity = parseInt(btn.dataset.star) <= n ? '1' : '0.3';
    });
}
function submitReview() {
    const purchaseId = document.getElementById('reviewPurchaseId').value;
    fetch('/marketplace/review/' + purchaseId, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
            rating: currentRating,
            comment: document.getElementById('reviewComment').value,
        })
    }).then(r => r.json()).then(data => {
        if (data.status === 'ok') { hideReviewModal(); location.reload(); }
        else { alert(data.error || 'حدث خطأ'); }
    });
}
</script>
{% endblock %}