{% extends "base.html" %}
{% block title %}تعديل علامة تجارية - {{ tm.brand_name_ar or '' }}{% endblock %}
{% block content %}
<div class="max-w-4xl mx-auto px-4 py-8">
    <div class="mb-6 flex items-center justify-between">
        <a href="{{ url_for('ip.index') }}" class="text-indigo-600 hover:underline text-sm">← العودة للملكية الفكرية</a>
        <button onclick="aiFillTrademark()" id="aiFillBtn" class="bg-gradient-to-r from-purple-600 to-pink-600 text-white px-5 py-2 rounded-lg hover:opacity-90 transition text-sm font-medium">🤖 تعبئة بالذكاء الاصطناعي</button>
    </div>

    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 mb-6">
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">™️ تعديل طلب علامة تجارية</h1>
        <p class="text-gray-500 text-sm">{{ tm.report.project_name if tm.report else '' }}</p>
    </div>

    <!-- AI Suggestions -->
    <div id="aiSuggestions" class="hidden bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded-xl p-5 mb-6">
        <h3 class="font-bold text-purple-800 dark:text-purple-300 mb-3">🤖 اقتراحات الذكاء الاصطناعي</h3>
        <div id="aiContent"></div>
    </div>

    <form method="POST" class="space-y-6">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

        <!-- Filing Type -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
            <h2 class="text-lg font-bold text-gray-900 dark:text-white mb-4">جهة التقديم</h2>
            <div class="grid grid-cols-3 gap-3">
                {% for key, label in [('saip', '🇸🇦 SAIP السعودية'), ('gcc', '🌍 مجلس التعاون'), ('international', '🌐 دولي (مدريد)')] %}
                <label class="cursor-pointer">
                    <input type="radio" name="filing_type" value="{{ key }}" {% if tm.filing_type == key %}checked{% endif %} class="peer sr-only">
                    <div class="border-2 border-gray-200 dark:border-gray-600 rounded-lg p-3 text-center text-sm hover:border-purple-300 peer-checked:border-purple-600 peer-checked:bg-purple-50 dark:peer-checked:bg-purple-900/20 transition font-medium dark:text-white">{{ label }}</div>
                </label>
                {% endfor %}
            </div>
        </div>

        <!-- Applicant -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
            <h2 class="text-lg font-bold text-gray-900 dark:text-white mb-4">بيانات مقدم الطلب</h2>
            {% set app = tm.applicant_json or {} %}
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">الاسم بالعربية</label>
                    <input type="text" name="applicant_name_ar" value="{{ app.get('name_ar', '') }}" class="w-full border rounded-lg px-3 py-2 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">الاسم بالإنجليزية</label>
                    <input type="text" name="applicant_name_en" value="{{ app.get('name_en', '') }}" class="w-full border rounded-lg px-3 py-2 dark:bg-gray-700 dark:border-gray-600 dark:text-white" dir="ltr">
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">العنوان</label>
                    <input type="text" name="applicant_address" value="{{ app.get('address', '') }}" class="w-full border rounded-lg px-3 py-2 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">الجنسية</label>
                    <input type="text" name="applicant_nationality" value="{{ app.get('nationality', '') }}" class="w-full border rounded-lg px-3 py-2 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">الهاتف</label>
                    <input type="text" name="applicant_phone" value="{{ app.get('phone', '') }}" class="w-full border rounded-lg px-3 py-2 dark:bg-gray-700 dark:border-gray-600 dark:text-white" dir="ltr">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">البريد الإلكتروني</label>
                    <input type="email" name="applicant_email" value="{{ app.get('email', '') }}" class="w-full border rounded-lg px-3 py-2 dark:bg-gray-700 dark:border-gray-600 dark:text-white" dir="ltr">
                </div>
            </div>
        </div>

        <!-- Brand Name -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
            <h2 class="text-lg font-bold text-gray-900 dark:text-white mb-4">العلامة التجارية</h2>
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">اسم العلامة بالعربية</label>
                    <input type="text" name="brand_name_ar" id="brand_name_ar" value="{{ tm.brand_name_ar or '' }}" class="w-full border rounded-lg px-3 py-2 text-lg font-bold dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">اسم العلامة بالإنجليزية</label>
                    <input type="text" name="brand_name_en" id="brand_name_en" value="{{ tm.brand_name_en or '' }}" class="w-full border rounded-lg px-3 py-2 text-lg font-bold dark:bg-gray-700 dark:border-gray-600 dark:text-white" dir="ltr">
                </div>
            </div>
        </div>

        <!-- Nice Classification -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
            <h2 class="text-lg font-bold text-gray-900 dark:text-white mb-4">تصنيف نيس (فئات السلع والخدمات)</h2>
            <p class="text-sm text-gray-500 mb-4">اختر الفئات التي تنطبق على علامتك التجارية</p>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 max-h-80 overflow-y-auto">
                {% for nc in nice_classes %}
                <label class="flex items-center gap-2 p-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer text-sm">
                    <input type="checkbox" name="nice_classes[]" value="{{ nc.num }}" {% if tm.nice_classes_json and nc.num in tm.nice_classes_json %}checked{% endif %} class="rounded text-purple-600">
                    <span class="font-medium text-gray-700 dark:text-gray-300">{{ nc.num }}.</span>
                    <span class="text-gray-600 dark:text-gray-400">{{ nc.ar }} <span class="text-xs text-gray-400">({{ nc.en }})</span></span>
                </label>
                {% endfor %}
            </div>
        </div>

        <!-- Goods/Services Description -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
            <h2 class="text-lg font-bold text-gray-900 dark:text-white mb-4">وصف السلع والخدمات</h2>
            <textarea name="goods_services_description" id="goods_desc" rows="5" class="w-full border rounded-lg px-3 py-2 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="وصف تفصيلي للسلع والخدمات التي ستُستخدم العلامة التجارية عليها...">{{ tm.goods_services_description or '' }}</textarea>
        </div>

        <!-- Color Claim -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
            <h2 class="text-lg font-bold text-gray-900 dark:text-white mb-4">ادعاء اللون <span class="text-xs text-gray-400 font-normal">(اختياري)</span></h2>
            <input type="text" name="color_claim" id="color_claim" value="{{ tm.color_claim or '' }}" placeholder="وصف الألوان المطلوب حمايتها..." class="w-full border rounded-lg px-3 py-2 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
        </div>

        <!-- Submit -->
        <div class="flex gap-3">
            <button type="submit" name="status" value="draft" class="flex-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 py-3 rounded-xl hover:bg-gray-300 transition font-medium">حفظ كمسودة</button>
            <button type="submit" name="status" value="generated" class="flex-1 bg-purple-600 text-white py-3 rounded-xl hover:bg-purple-700 transition font-medium">حفظ ومعاينة →</button>
        </div>
    </form>
</div>

<script>
function aiFillTrademark() {
    const btn = document.getElementById('aiFillBtn');
    btn.disabled = true; btn.textContent = '⏳ جاري التوليد...';
    fetch('/ip/api/ai-fill-trademark', {
        method: 'POST',
        headers: {'Content-Type': 'application/json', 'X-CSRFToken': '{{ csrf_token() }}'},
        body: JSON.stringify({trademark_id: {{ tm.id }}})
    }).then(r => r.json()).then(data => {
        btn.disabled = false; btn.textContent = '🤖 تعبئة بالذكاء الاصطناعي';
        if (data.content) {
            const c = data.content;
            if (c.brand_name_ar) document.getElementById('brand_name_ar').value = c.brand_name_ar;
            if (c.brand_name_en) document.getElementById('brand_name_en').value = c.brand_name_en;
            if (c.goods_services_description) document.getElementById('goods_desc').value = c.goods_services_description;
            if (c.color_claim) document.getElementById('color_claim').value = c.color_claim;
            if (c.suggested_classes) {
                c.suggested_classes.forEach(cls => {
                    const cb = document.querySelector(`input[name="nice_classes[]"][value="${cls}"]`);
                    if (cb) cb.checked = true;
                });
            }
            // Show suggestions
            let html = '';
            if (c.alternative_names) {
                html += '<div class="mb-3"><strong class="text-sm">أسماء بديلة مقترحة:</strong><div class="flex flex-wrap gap-2 mt-1">';
                c.alternative_names.forEach(n => { html += `<span class="bg-purple-100 text-purple-700 px-3 py-1 rounded-full text-sm cursor-pointer hover:bg-purple-200" onclick="document.getElementById('brand_name_ar').value='${n}'">${n}</span>`; });
                html += '</div></div>';
            }
            if (c.logo_description) {
                html += `<div class="text-sm"><strong>وصف الشعار المقترح:</strong> <span class="text-gray-600 dark:text-gray-400">${c.logo_description}</span></div>`;
            }
            if (html) {
                document.getElementById('aiSuggestions').classList.remove('hidden');
                document.getElementById('aiContent').innerHTML = html;
            }
            alert('تم تعبئة النموذج بنجاح!');
        } else { alert(data.error || 'حدث خطأ'); }
    }).catch(() => { btn.disabled = false; btn.textContent = '🤖 تعبئة بالذكاء الاصطناعي'; });
}
</script>
{% endblock %}