{% extends "base.html" %}
{% block title %}عرض تقديمي — {{ report.project_name }}{% endblock %}
{% block content %}
<div class="max-w-4xl mx-auto px-4 py-12">
    <div class="flex items-center gap-3 mb-8">
        <a href="{{ url_for('study.view', report_id=report.id) }}" class="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center text-slate-400 hover:bg-white/10 transition">&larr;</a>
        <div>
            <div class="text-xs text-gold-500 font-mono tracking-widest uppercase">PRESENTATION GENERATOR</div>
            <h1 class="text-2xl font-bold text-white">{{ report.project_name }}</h1>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
        <!-- Gamma.app -->
        <div class="glass p-6 rounded-xl border border-white/10">
            <div class="flex items-center gap-3 mb-4">
                <div class="w-10 h-10 rounded-lg bg-purple-500/20 flex items-center justify-center text-purple-400 text-lg font-bold">G</div>
                <div>
                    <h3 class="text-white font-semibold">Gamma.app</h3>
                    <p class="text-xs text-slate-400">AI Presentation — عرض احترافي تلقائي</p>
                </div>
            </div>
            <form method="POST" class="space-y-4">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <div>
                    <label class="text-xs text-slate-400 block mb-1">نوع المخرج</label>
                    <select name="format_type" class="w-full bg-slate-800 border border-white/10 text-white rounded-lg px-3 py-2 text-sm">
                        <option value="presentation">عرض تقديمي (Slides)</option>
                        <option value="document">مستند (Document)</option>
                        <option value="webpage">صفحة ويب (Webpage)</option>
                    </select>
                </div>
                <div>
                    <label class="text-xs text-slate-400 block mb-1">السمة (اختياري)</label>
                    <input name="theme" type="text" placeholder="e.g. professional, minimal, bold"
                           class="w-full bg-slate-800 border border-white/10 text-white rounded-lg px-3 py-2 text-sm">
                </div>
                <button type="submit" class="w-full bg-purple-500/20 border border-purple-500/30 text-purple-400 px-4 py-2.5 rounded-lg text-sm font-medium hover:bg-purple-500/30 transition">
                    إنشاء عبر Gamma.app
                </button>
            </form>
        </div>

        <!-- PPTX Export -->
        <div class="glass p-6 rounded-xl border border-white/10">
            <div class="flex items-center gap-3 mb-4">
                <div class="w-10 h-10 rounded-lg bg-orange-500/20 flex items-center justify-center text-orange-400 text-lg font-bold">P</div>
                <div>
                    <h3 class="text-white font-semibold">PowerPoint Export</h3>
                    <p class="text-xs text-slate-400">تصدير PPTX مباشر من التقرير</p>
                </div>
            </div>
            <p class="text-slate-300 text-sm mb-4">تصدير Pitch Deck بصيغة PowerPoint قابلة للتعديل مباشرة من بيانات دراسة الجدوى.</p>
            <a href="{{ url_for('study.export_pptx', report_id=report.id) }}"
               class="block text-center w-full bg-orange-500/20 border border-orange-500/30 text-orange-400 px-4 py-2.5 rounded-lg text-sm font-medium hover:bg-orange-500/30 transition">
                تحميل PPTX
            </a>
        </div>
    </div>

    {% if presentations %}
    <h2 class="text-lg font-semibold text-white mb-4">العروض السابقة</h2>
    <div class="space-y-3">
        {% for p in presentations %}
        <div class="glass p-4 rounded-xl border border-white/10 flex items-center justify-between">
            <div>
                <span class="text-sm text-white">{{ p.format_type }}</span>
                <span class="text-xs text-slate-500 ml-3">{{ p.created_at.strftime('%Y-%m-%d %H:%M') }}</span>
                <span class="text-xs px-2 py-0.5 rounded-full ml-2
                    {% if p.status == 'completed' %}bg-emerald-500/20 text-emerald-400
                    {% elif p.status == 'error' %}bg-red-500/20 text-red-400
                    {% else %}bg-yellow-500/20 text-yellow-400{% endif %}">{{ p.status }}</span>
            </div>
            {% if p.gamma_url %}
            <a href="{{ p.gamma_url }}" target="_blank" class="text-purple-400 text-sm hover:underline">فتح العرض &rarr;</a>
            {% endif %}
        </div>
        {% endfor %}
    </div>
    {% endif %}
</div>
{% endblock %}