{% extends "base.html" %}
{% block title %}إدارة البرومبتات — Admin{% endblock %}
{% block content %}
<div class="max-w-6xl mx-auto px-4 py-12">
    <div class="flex items-center justify-between mb-8">
        <div>
            <a href="{{ url_for('admin.index') }}" class="text-xs text-slate-400 hover:text-gold-400 transition">&#8592; لوحة الإدارة</a>
            <h1 class="text-2xl font-bold text-white mt-2">إدارة البرومبتات</h1>
            <p class="text-slate-400 text-sm mt-1">تعديل البرومبتات المستخدمة في توليد التقارير والخدمات</p>
        </div>
        <a href="{{ url_for('admin.ai_config') }}" class="glass px-4 py-2 rounded-xl text-slate-300 text-xs font-bold uppercase tracking-wider hover:border-gold-500/50 transition">
            إعدادات الموديلات &rarr;
        </a>
    </div>

    {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
    {% for category, message in messages %}
    <div class="mb-4 p-3 rounded-xl text-sm {% if category == 'success' %}bg-emerald-500/20 text-emerald-400{% else %}bg-red-500/20 text-red-400{% endif %}">{{ message }}</div>
    {% endfor %}
    {% endif %}
    {% endwith %}

    <!-- Existing Prompts -->
    {% if prompts %}
    <div class="space-y-4 mb-10">
        {% for p in prompts %}
        <div class="glass rounded-2xl overflow-hidden">
            <div class="flex items-center justify-between px-6 py-4 border-b border-white/5">
                <div class="flex items-center gap-3">
                    <span class="text-xs px-2 py-0.5 rounded-full {% if p.is_active %}bg-emerald-500/20 text-emerald-400{% else %}bg-red-500/20 text-red-400{% endif %}">
                        {{ 'مفعّل' if p.is_active else 'معطّل' }}
                    </span>
                    <span class="text-white font-bold text-sm">{{ p.display_name }}</span>
                    <span class="text-slate-500 text-xs font-mono">{{ p.service_key }}</span>
                </div>
                <div class="flex items-center gap-2">
                    <button onclick="editPrompt('{{ p.service_key }}', {{ p.id }})" class="text-xs text-gold-400 hover:text-gold-300 transition cursor-pointer">تعديل</button>
                    <form method="POST" action="{{ url_for('admin.toggle_prompt', prompt_id=p.id) }}" class="inline">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        <button type="submit" class="text-xs text-slate-400 hover:text-white transition">{{ 'تعطيل' if p.is_active else 'تفعيل' }}</button>
                    </form>
                    <form method="POST" action="{{ url_for('admin.delete_prompt', prompt_id=p.id) }}" class="inline">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        <button type="submit" class="text-xs text-red-400 hover:text-red-300 transition" onclick="return confirm('حذف هذا البرومبت؟')">حذف</button>
                    </form>
                </div>
            </div>
            <div class="px-6 py-4">
                <div class="mb-3">
                    <span class="text-[10px] uppercase tracking-widest text-slate-500">System Prompt</span>
                    <pre class="mt-1 text-xs text-slate-300 bg-black/30 rounded-lg p-3 max-h-32 overflow-y-auto whitespace-pre-wrap font-mono leading-relaxed">{{ p.system_prompt[:500] }}{% if p.system_prompt|length > 500 %}...{% endif %}</pre>
                </div>
                {% if p.user_prompt_template %}
                <div>
                    <span class="text-[10px] uppercase tracking-widest text-slate-500">User Prompt Template</span>
                    <pre class="mt-1 text-xs text-slate-300 bg-black/30 rounded-lg p-3 max-h-24 overflow-y-auto whitespace-pre-wrap font-mono leading-relaxed">{{ p.user_prompt_template[:300] }}{% if p.user_prompt_template|length > 300 %}...{% endif %}</pre>
                </div>
                {% endif %}
                {% if p.updated_at %}
                <div class="mt-2 text-[10px] text-slate-600">آخر تحديث: {{ p.updated_at.strftime('%Y-%m-%d %H:%M') }}</div>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="glass p-6 rounded-2xl mb-8 text-center text-slate-400 text-sm">
        لا توجد برومبتات مخصصة. سيتم استخدام البرومبتات الافتراضية من الكود.
    </div>
    {% endif %}

    <!-- Add / Edit Prompt Form -->
    <div class="glass p-8 rounded-2xl" id="promptForm">
        <h2 class="text-lg font-bold text-white mb-2" id="formTitle">إضافة / تعديل برومبت</h2>
        <p class="text-slate-400 text-xs mb-6">اختر الخدمة ثم عدّل البرومبت. يمكنك استخدام المتغيرات: <code class="text-gold-400">{project_name}</code>, <code class="text-gold-400">{project_description}</code>, <code class="text-gold-400">{language}</code></p>

        <form method="POST" action="{{ url_for('admin.save_prompt') }}" class="space-y-4">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs text-slate-400 mb-1">الخدمة</label>
                    <select name="service_key" id="serviceKeySelect" required onchange="onServiceChange(this.value)"
                        class="w-full bg-black/30 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-gold-500/50">
                        <option value="">— اختر الخدمة —</option>
                        {% for value, label in service_choices %}
                        <option value="{{ value }}">{{ label }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label class="block text-xs text-slate-400 mb-1">الاسم المعروض (اختياري)</label>
                    <input type="text" name="display_name" id="displayNameInput" placeholder="يتم ملؤه تلقائياً..."
                        class="w-full bg-black/30 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-gold-500/50">
                </div>
            </div>

            <div>
                <div class="flex items-center justify-between mb-1">
                    <label class="text-xs text-slate-400">System Prompt (تعليمات النظام)</label>
                    <button type="button" onclick="loadDefault()" class="text-[10px] text-gold-400 hover:text-gold-300 transition cursor-pointer uppercase tracking-wider">تحميل الافتراضي</button>
                </div>
                <textarea name="system_prompt" id="systemPromptArea" required rows="12" placeholder="أنت محلل مالي متخصص في..."
                    class="w-full bg-black/30 border border-white/10 rounded-lg px-3 py-3 text-white text-sm font-mono leading-relaxed focus:outline-none focus:border-gold-500/50 resize-y"></textarea>
            </div>

            <div>
                <label class="text-xs text-slate-400 mb-1 block">User Prompt Template (اختياري — قالب رسالة المستخدم)</label>
                <textarea name="user_prompt_template" id="userPromptArea" rows="6" placeholder="Business Idea: {project_name}&#10;Description: {project_description}&#10;..."
                    class="w-full bg-black/30 border border-white/10 rounded-lg px-3 py-3 text-white text-sm font-mono leading-relaxed focus:outline-none focus:border-gold-500/50 resize-y"></textarea>
                <p class="text-[10px] text-slate-600 mt-1">إذا تركته فارغاً سيتم استخدام القالب الافتراضي من الكود.</p>
            </div>

            <button type="submit" class="bg-gold-500 text-black px-6 py-2.5 rounded-lg font-bold text-sm hover:bg-gold-400 transition">حفظ البرومبت</button>
        </form>
    </div>

    <!-- Info Box -->
    <div class="glass p-6 rounded-2xl mt-6">
        <h3 class="text-sm font-bold text-slate-300 mb-3">كيف يعمل النظام</h3>
        <ul class="text-xs text-slate-400 space-y-2 list-disc list-inside">
            <li>إذا وُجد برومبت مخصص <strong class="text-emerald-400">مفعّل</strong> لخدمة معينة، يتم استخدامه بدلاً من الافتراضي.</li>
            <li>إذا لم يوجد أو كان <strong class="text-red-400">معطّلاً</strong>، يتم استخدام البرومبت الافتراضي من الكود.</li>
            <li>يمكنك تحديد الموديل المستخدم لكل خدمة حسب الباقة من <a href="{{ url_for('admin.ai_config') }}" class="text-gold-400 hover:underline">إعدادات نماذج AI</a>.</li>
            <li>المتغيرات المتاحة: <code class="text-gold-400">{project_name}</code>, <code class="text-gold-400">{project_description}</code>, <code class="text-gold-400">{language}</code>, <code class="text-gold-400">{lang_instruction}</code></li>
        </ul>
    </div>
</div>

<script>
async function onServiceChange(key) {
    if (!key) return;
    // Auto-fill display name
    const select = document.getElementById('serviceKeySelect');
    const option = select.querySelector(`option[value="${key}"]`);
    if (option) {
        document.getElementById('displayNameInput').value = option.textContent.trim();
    }
}

async function loadDefault() {
    const key = document.getElementById('serviceKeySelect').value;
    if (!key) { alert('اختر الخدمة أولاً'); return; }
    try {
        const res = await fetch(`/admin/prompts/default/${key}`);
        const data = await res.json();
        if (data.system) document.getElementById('systemPromptArea').value = data.system;
        if (data.user) document.getElementById('userPromptArea').value = data.user;
    } catch(e) {
        alert('خطأ في تحميل البرومبت الافتراضي');
    }
}

function editPrompt(serviceKey, promptId) {
    document.getElementById('serviceKeySelect').value = serviceKey;
    onServiceChange(serviceKey);
    // Load current values from the existing prompt card
    const form = document.getElementById('promptForm');
    form.scrollIntoView({ behavior: 'smooth' });
    // Load default to populate, then admin can see current
    loadDefault();
    // Actually load from DB via the existing card content
    fetch(`/admin/prompts/default/${serviceKey}`).then(r => r.json()).then(data => {
        // The form is ready for editing
    });
}
</script>
{% endblock %}