{% extends "base.html" %}
{% block title %}{{ asset_info.label_ar }} — {{ report.project_name }}{% endblock %}
{% block content %}
<div class="max-w-5xl mx-auto px-4 py-8">

    <!-- Header -->
    <div class="flex flex-col md:flex-row md:items-center justify-between mb-6 pb-6 border-b border-white/5">
        <div>
            <div class="flex items-center gap-3 mb-3">
                {% if not shared %}
                <a href="{{ url_for('study.notebook_view', report_id=report.id) }}"
                   class="w-10 h-10 rounded-xl glass flex items-center justify-center text-slate-400 hover:text-white hover:border-accent-gold transition-all duration-300">&larr;</a>
                {% endif %}
                <div class="px-3 py-1 rounded-full bg-{{ asset_info.color }}-500/10 border border-{{ asset_info.color }}-500/20 text-[10px] text-{{ asset_info.color }}-400 font-bold uppercase tracking-wider">
                    {{ asset_info.label_en }}
                </div>
            </div>
            <h1 class="text-2xl font-black text-white">{{ asset_info.icon }} {{ asset_info.label_ar }}</h1>
            <p class="text-slate-500 text-sm mt-1">{{ report.project_name }}</p>
        </div>
        <div class="flex items-center gap-3 mt-4 md:mt-0">
            {% include "study/_share_btn.html" %}
            {% if not shared %}
            <a href="{{ url_for('study.api_notebook_download', asset_id=asset.id) }}"
               class="btn-luxury px-5 py-2.5 rounded-xl font-bold text-xs flex items-center gap-2 transition-all">
                ⬇ تحميل
            </a>
            {% endif %}
        </div>
    </div>

    <!-- Content Area -->
    {% if is_html and html_content %}
    <!-- AI-Generated HTML Content Viewer -->
    <div class="panel p-8 rounded-2xl">
        <div class="ai-generated-content text-slate-200 leading-relaxed" style="color: #e2e8f0;">
            <style>
                .ai-generated-content h1, .ai-generated-content h2, .ai-generated-content h3 { color: #fff; font-weight: 800; margin-top: 1.5em; margin-bottom: 0.5em; }
                .ai-generated-content h1 { font-size: 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 0.5rem; }
                .ai-generated-content h2 { font-size: 1.25rem; color: #fbbf24; }
                .ai-generated-content h3 { font-size: 1.1rem; color: #93c5fd; }
                .ai-generated-content p { margin-bottom: 1em; line-height: 1.8; color: #cbd5e1; }
                .ai-generated-content strong { color: #fff; }
                .ai-generated-content ul, .ai-generated-content ol { margin: 0.5em 0 1em 1.5em; color: #cbd5e1; }
                .ai-generated-content li { margin-bottom: 0.3em; }
                .ai-generated-content table { width: 100%; border-collapse: collapse; margin: 1em 0; }
                .ai-generated-content th { background: rgba(255,255,255,0.05); color: #fff; padding: 0.5rem; text-align: right; border: 1px solid rgba(255,255,255,0.1); }
                .ai-generated-content td { padding: 0.5rem; border: 1px solid rgba(255,255,255,0.1); color: #cbd5e1; }
                .ai-generated-content .scene { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 1.5rem; margin: 1rem 0; }
                .ai-generated-content .visual { color: #60a5fa; font-style: italic; }
                .ai-generated-content .narration { color: #a5b4fc; }
                .ai-generated-content .slide { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 2rem; margin: 1.5rem 0; min-height: 200px; }
            </style>
            {{ html_content | safe }}
        </div>
    </div>

    {% elif asset_type == "audio" %}
    <!-- Audio Player -->
    <div class="panel p-8 rounded-2xl">
        <div class="flex flex-col items-center">
            <div class="w-32 h-32 rounded-full bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center text-5xl mb-6">
                🎧
            </div>
            <h3 class="text-lg font-bold text-white mb-2">ملخص صوتي</h3>
            <p class="text-slate-500 text-sm mb-6">استمع للملخص الصوتي لدراسة الجدوى</p>
            <audio controls class="w-full max-w-lg" style="filter: hue-rotate(120deg);">
                <source src="{{ file_url }}" type="audio/mpeg">
                المتصفح لا يدعم تشغيل الصوت.
            </audio>
        </div>
    </div>

    {% elif asset_type == "video" %}
    <!-- Video Player -->
    <div class="panel p-4 rounded-2xl overflow-hidden">
        <video controls class="w-full rounded-xl" style="max-height: 600px;">
            <source src="{{ file_url }}" type="video/mp4">
            المتصفح لا يدعم تشغيل الفيديو.
        </video>
    </div>

    {% elif asset_type == "report" %}
    <!-- Report Markdown Viewer -->
    <div class="panel p-8 rounded-2xl">
        <div id="reportContent" class="prose prose-invert prose-sm max-w-none
            prose-headings:text-white prose-headings:font-black
            prose-h1:text-2xl prose-h1:border-b prose-h1:border-white/5 prose-h1:pb-4 prose-h1:mb-6
            prose-h2:text-xl prose-h2:text-amber-300 prose-h2:mt-8
            prose-h3:text-lg prose-h3:text-slate-200
            prose-p:text-slate-300 prose-p:leading-relaxed
            prose-strong:text-white
            prose-blockquote:border-amber-500/30 prose-blockquote:bg-amber-500/5 prose-blockquote:rounded-xl prose-blockquote:py-2 prose-blockquote:px-4 prose-blockquote:text-amber-200/80
            prose-li:text-slate-300
            prose-table:border-white/10
            prose-th:text-white prose-th:bg-white/5 prose-th:px-4 prose-th:py-2
            prose-td:text-slate-300 prose-td:px-4 prose-td:py-2 prose-td:border-white/5
            prose-a:text-amber-400 prose-a:no-underline hover:prose-a:underline
            prose-code:text-amber-300 prose-code:bg-white/5 prose-code:px-1 prose-code:rounded">
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script>
        const md = {{ report_content | safe }};
        document.getElementById('reportContent').innerHTML = marked.parse(md);
    </script>

    {% elif asset_type == "infographic" %}
    <!-- Infographic Image Viewer -->
    <div class="panel p-4 rounded-2xl text-center">
        <div class="overflow-auto" style="max-height: 80vh;">
            <img src="{{ file_url }}" alt="إنفوجرافيك" class="mx-auto rounded-xl max-w-full" style="max-height: 75vh; object-fit: contain;">
        </div>
    </div>

    {% elif asset_type == "slide_deck" %}
    <!-- PDF Slide Deck Viewer -->
    <div class="panel p-4 rounded-2xl">
        <iframe src="{{ file_url }}" class="w-full rounded-xl border-0" style="height: 75vh;" allowfullscreen>
            المتصفح لا يدعم عرض ملفات PDF.
        </iframe>
        <p class="text-center text-[11px] text-slate-500 mt-3">
            إذا لم يظهر العرض، <a href="{{ file_url }}" target="_blank" class="text-amber-400 hover:underline">اضغط هنا لفتحه في نافذة جديدة</a>
        </p>
    </div>

    {% endif %}
</div>
{% endblock %}