{% extends "base.html" %}
{% block title %}براءة اختراع - {{ patent.title_ar or '' }}{% endblock %}
{% block content %}
<div class="max-w-5xl mx-auto px-4 py-8">
    {% if not shared %}
    <div class="mb-6 flex items-center justify-between">
        <a href="{{ url_for('ip.index') }}" class="text-indigo-600 hover:underline text-sm">← العودة للملكية الفكرية</a>
        <div class="flex gap-2">
            <a href="{{ url_for('ip.edit_patent', app_id=patent.id) }}" class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 px-4 py-2 rounded-lg hover:bg-gray-300 transition text-sm">✏️ تعديل</a>
            <a href="{{ url_for('ip.export_patent', app_id=patent.id) }}" class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition text-sm">📄 تصدير Word</a>
            <button onclick="window.print()" class="bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700 transition text-sm">🖨️ طباعة</button>
            <button onclick="sharePatent()" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition text-sm">🔗 مشاركة</button>
        </div>
    </div>
    {% endif %}

    {% set finfo = filing_info.get(patent.filing_type, {}) %}

    <!-- Header -->
    <div class="bg-gradient-to-r from-indigo-600 to-purple-600 rounded-xl shadow-lg p-6 mb-6 text-white print:bg-white print:text-black print:border print:border-gray-300">
        <div class="flex items-center gap-3 mb-3">
            <span class="text-3xl">{{ finfo.get('icon', '📄') }}</span>
            <div>
                <h1 class="text-2xl font-bold">طلب براءة اختراع</h1>
                <p class="text-indigo-200 print:text-gray-500">{{ finfo.get('name_ar', '') }}</p>
            </div>
        </div>
        <div class="flex flex-wrap gap-4 text-sm text-indigo-200 print:text-gray-500">
            {% set st_labels = {'draft': 'مسودة', 'generated': 'تم التوليد', 'review': 'قيد المراجعة', 'submitted': 'تم التقديم'} %}
            <span>الحالة: {{ st_labels.get(patent.status, patent.status) }}</span>
            <span>التاريخ: {{ patent.created_at.strftime('%Y-%m-%d') }}</span>
            {% if patent.ipc_code %}<span>IPC: {{ patent.ipc_code }}</span>{% endif %}
        </div>
    </div>

    <div class="space-y-6 print:space-y-4">
        <!-- Applicant -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 print:shadow-none print:border print:border-gray-200">
            <h2 class="text-lg font-bold text-gray-900 dark:text-white mb-4 border-b dark:border-gray-700 pb-2">1. بيانات مقدم الطلب</h2>
            {% set app = patent.applicant_json or {} %}
            <div class="grid grid-cols-2 gap-3 text-sm">
                <div><span class="text-gray-500">الاسم (عربي):</span> <strong class="dark:text-white">{{ app.get('name_ar', '-') }}</strong></div>
                <div><span class="text-gray-500">الاسم (إنجليزي):</span> <strong class="dark:text-white">{{ app.get('name_en', '-') }}</strong></div>
                <div class="col-span-2"><span class="text-gray-500">العنوان:</span> <strong class="dark:text-white">{{ app.get('address', '-') }}</strong></div>
                <div><span class="text-gray-500">الجنسية:</span> <strong class="dark:text-white">{{ app.get('nationality', '-') }}</strong></div>
                <div><span class="text-gray-500">رقم الهوية:</span> <strong class="dark:text-white">{{ app.get('id_number', '-') }}</strong></div>
                <div><span class="text-gray-500">الهاتف:</span> <strong class="dark:text-white">{{ app.get('phone', '-') }}</strong></div>
                <div><span class="text-gray-500">البريد:</span> <strong class="dark:text-white">{{ app.get('email', '-') }}</strong></div>
            </div>
        </div>

        <!-- Inventors -->
        {% if patent.inventors_json %}
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 print:shadow-none print:border print:border-gray-200">
            <h2 class="text-lg font-bold text-gray-900 dark:text-white mb-4 border-b dark:border-gray-700 pb-2">2. بيانات المخترع(ين)</h2>
            <div class="space-y-3">
                {% for inv in patent.inventors_json %}
                <div class="border dark:border-gray-700 rounded-lg p-3 text-sm">
                    <div class="font-bold text-gray-900 dark:text-white mb-1">المخترع {{ loop.index }}: {{ inv.get('name', '') }}</div>
                    <div class="text-gray-500">الجنسية: {{ inv.get('nationality', '-') }} | العنوان: {{ inv.get('address', '-') }}</div>
                    {% if inv.get('contribution') %}<div class="text-gray-500">المساهمة: {{ inv.contribution }}</div>{% endif %}
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        <!-- Title & Field -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 print:shadow-none print:border print:border-gray-200">
            <h2 class="text-lg font-bold text-gray-900 dark:text-white mb-4 border-b dark:border-gray-700 pb-2">3. عنوان الاختراع والمجال التقني</h2>
            <div class="space-y-3 text-sm">
                <div><span class="text-gray-500">العنوان بالعربية:</span> <strong class="text-lg text-gray-900 dark:text-white block mt-1">{{ patent.title_ar or '-' }}</strong></div>
                <div><span class="text-gray-500">العنوان بالإنجليزية:</span> <strong class="text-lg text-gray-900 dark:text-white block mt-1" dir="ltr">{{ patent.title_en or '-' }}</strong></div>
                {% if patent.technical_field %}
                <div><span class="text-gray-500">المجال التقني:</span><p class="text-gray-700 dark:text-gray-300 mt-1 whitespace-pre-line">{{ patent.technical_field }}</p></div>
                {% endif %}
                {% if patent.ipc_code %}
                <div><span class="text-gray-500">تصنيف IPC:</span> <strong class="dark:text-white">{{ patent.ipc_code }}</strong></div>
                {% endif %}
            </div>
        </div>

        <!-- Background Art -->
        {% if patent.background_art %}
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 print:shadow-none print:border print:border-gray-200">
            <h2 class="text-lg font-bold text-gray-900 dark:text-white mb-4 border-b dark:border-gray-700 pb-2">4. خلفية الاختراع</h2>
            <div class="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-line leading-relaxed">{{ patent.background_art }}</div>
        </div>
        {% endif %}

        <!-- Description -->
        {% if patent.invention_description %}
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 print:shadow-none print:border print:border-gray-200">
            <h2 class="text-lg font-bold text-gray-900 dark:text-white mb-4 border-b dark:border-gray-700 pb-2">5. وصف الاختراع التفصيلي</h2>
            <div class="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-line leading-relaxed">{{ patent.invention_description }}</div>
        </div>
        {% endif %}

        <!-- Claims -->
        {% if patent.claims_json %}
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 print:shadow-none print:border print:border-gray-200">
            <h2 class="text-lg font-bold text-gray-900 dark:text-white mb-4 border-b dark:border-gray-700 pb-2">6. عناصر الحماية (المطالبات)</h2>
            <div class="space-y-2">
                {% for claim in patent.claims_json %}
                <div class="text-sm border-r-4 {% if claim.get('type') == 'independent' %}border-indigo-500{% else %}border-gray-300{% endif %} pr-4 py-2">
                    <span class="text-xs font-medium {% if claim.get('type') == 'independent' %}text-indigo-600{% else %}text-gray-400{% endif %}">
                        {% if claim.get('type') == 'independent' %}مطالبة مستقلة{% else %}مطالبة تابعة{% endif %}
                    </span>
                    <p class="text-gray-700 dark:text-gray-300 mt-1">{{ loop.index }}. {{ claim.get('text', '') }}</p>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        <!-- Abstract -->
        {% if patent.abstract_ar or patent.abstract_en %}
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 print:shadow-none print:border print:border-gray-200">
            <h2 class="text-lg font-bold text-gray-900 dark:text-white mb-4 border-b dark:border-gray-700 pb-2">7. ملخص الاختراع</h2>
            {% if patent.abstract_ar %}
            <div class="mb-3">
                <span class="text-xs text-gray-500 font-medium">بالعربية:</span>
                <p class="text-sm text-gray-700 dark:text-gray-300 mt-1 leading-relaxed">{{ patent.abstract_ar }}</p>
            </div>
            {% endif %}
            {% if patent.abstract_en %}
            <div>
                <span class="text-xs text-gray-500 font-medium">بالإنجليزية:</span>
                <p class="text-sm text-gray-700 dark:text-gray-300 mt-1 leading-relaxed" dir="ltr">{{ patent.abstract_en }}</p>
            </div>
            {% endif %}
        </div>
        {% endif %}

        <!-- Drawings -->
        {% if patent.drawings_description %}
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 print:shadow-none print:border print:border-gray-200">
            <h2 class="text-lg font-bold text-gray-900 dark:text-white mb-4 border-b dark:border-gray-700 pb-2">8. وصف الرسومات</h2>
            <div class="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-line">{{ patent.drawings_description }}</div>
        </div>
        {% endif %}

        <!-- Priority Claims -->
        {% if patent.priority_claims_json %}
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 print:shadow-none print:border print:border-gray-200">
            <h2 class="text-lg font-bold text-gray-900 dark:text-white mb-4 border-b dark:border-gray-700 pb-2">9. بيانات الأولوية</h2>
            <div class="space-y-2">
                {% for pri in patent.priority_claims_json %}
                <div class="text-sm text-gray-700 dark:text-gray-300">
                    الدولة: <strong>{{ pri.get('country', '') }}</strong> — التاريخ: <strong>{{ pri.get('date', '') }}</strong> — الرقم: <strong>{{ pri.get('number', '') }}</strong>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}
    </div>
</div>

{% if not shared %}
<!-- Share Modal -->
<div id="shareModal" class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl max-w-md w-full p-6">
        <h3 class="text-lg font-bold mb-4 dark:text-white">🔗 مشاركة طلب البراءة</h3>
        <p class="text-sm text-gray-500 mb-3">انسخ الرابط التالي لمشاركة طلب البراءة:</p>
        <div class="flex gap-2">
            <input type="text" id="shareUrl" value="{{ url_for('ip.share_patent', token=patent.share_token, _external=True) }}" readonly class="flex-1 border rounded-lg px-3 py-2 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white" dir="ltr">
            <button onclick="copyShare()" class="bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-indigo-700 transition">نسخ</button>
        </div>
        <button onclick="document.getElementById('shareModal').classList.add('hidden')" class="mt-4 w-full border rounded-lg py-2 hover:bg-gray-50 dark:hover:bg-gray-700 transition dark:text-white text-sm">إغلاق</button>
    </div>
</div>

<script>
function sharePatent() { document.getElementById('shareModal').classList.remove('hidden'); }
function copyShare() {
    const input = document.getElementById('shareUrl');
    input.select();
    document.execCommand('copy');
    alert('تم نسخ الرابط!');
}
</script>
{% endif %}

<style>
@media print {
    nav, footer, .no-print, button, a[href] { display: none !important; }
    body { background: white !important; }
    .shadow-lg { box-shadow: none !important; }
}
</style>
{% endblock %}