{% extends "base.html" %}
{% block title %}Brand Kit — {{ report.project_name }}{% endblock %}
{% block content %}
<div class="max-w-5xl 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">AI BRAND KIT</div>
            <h1 class="text-2xl font-bold text-white">هوية العلامة التجارية — {{ report.project_name }}</h1>
        </div>
    </div>

    <div class="glass p-6 rounded-xl border border-white/10 mb-6">
        <div class="mb-4">
            <label class="text-xs text-slate-400 block mb-1">الأسلوب</label>
            <select id="style" class="w-full bg-slate-800 border border-white/10 text-white rounded-lg px-3 py-2 text-sm">
                <option value="modern">عصري حديث</option>
                <option value="luxury">فاخر</option>
                <option value="playful">مرح ومبتكر</option>
                <option value="corporate">مؤسسي رسمي</option>
                <option value="minimal">بسيط أنيق</option>
            </select>
        </div>
        <button onclick="generateBrand()" id="brandBtn" class="w-full bg-gold-500/20 border border-gold-500/30 text-gold-400 px-6 py-2.5 rounded-lg text-sm font-medium hover:bg-gold-500/30 transition">توليد هوية العلامة</button>
        <div id="brandStatus" class="text-xs text-slate-400 mt-2 text-center"></div>
    </div>

    <div id="result" class="hidden space-y-6">
        <div id="namesSection" class="glass p-6 rounded-xl border border-white/10"></div>
        <div id="colorsSection" class="glass p-6 rounded-xl border border-white/10"></div>
        <div id="typographySection" class="glass p-6 rounded-xl border border-white/10"></div>
        <div id="voiceSection" class="glass p-6 rounded-xl border border-white/10"></div>
        <div id="valuesSection" class="glass p-6 rounded-xl border border-white/10 hidden"></div>

        <!-- Logo Generation Section -->
        <div id="logoSection" class="glass p-6 rounded-xl border border-white/10">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-white font-semibold">شعارات مقترحة (AI)</h3>
                <button onclick="generateLogos()" id="logoBtn" class="bg-gold-500 text-black px-4 py-2 rounded-lg text-xs font-bold hover:bg-gold-400 transition">
                    &#9889; توليد 4 شعارات
                </button>
            </div>
            <p class="text-xs text-slate-400 mb-4">سيتم توليد 4 تصاميم مختلفة للشعار باستخدام DALL-E 3 بناءً على هوية علامتك التجارية</p>
            <div id="logoStatus" class="text-xs text-slate-400 mb-4 hidden">
                <div class="flex items-center gap-2">
                    <div class="w-3 h-3 bg-gold-400 rounded-full animate-pulse"></div>
                    <span>جاري توليد الشعارات... قد يستغرق 1-2 دقيقة</span>
                </div>
            </div>
            <div id="logoGrid" class="grid grid-cols-2 gap-4"></div>
        </div>
    </div>
</div>

<script>
let brandData = {};

async function generateBrand() {
    document.getElementById('result').classList.remove('hidden');
    document.getElementById('brandBtn').disabled = true;
    document.getElementById('brandStatus').textContent = 'جاري توليد هوية العلامة...';
    document.getElementById('namesSection').innerHTML = '<div class="flex items-center gap-2"><div class="w-3 h-3 bg-gold-400 rounded-full animate-pulse"></div><span class="text-gold-400 text-sm">جاري التوليد...</span></div>';
    try {
        const resp = await fetch('{{ url_for("tools.api_brand_kit") }}', {
            method: 'POST', headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({report_id: {{ report.id }}, style: document.getElementById('style').value})
        });
        const data = await resp.json();
        brandData = data;

        if (data.brand_names) {
            let html = '<h3 class="text-white font-semibold mb-3">اقتراحات الأسماء</h3><div class="grid grid-cols-1 gap-2">';
            data.brand_names.forEach(n => {
                const text = typeof n === 'string' ? n : (n.arabic ? n.arabic + ' / ' + n.english : JSON.stringify(n));
                html += '<div class="bg-white/5 px-4 py-3 rounded-lg text-white text-sm cursor-pointer hover:bg-gold-500/10 hover:border-gold-500/30 border border-transparent transition brand-name-option" onclick="selectBrandName(this)">' + text + '</div>';
            });
            html += '</div>';
            if (data.taglines) {
                html += '<div class="mt-4"><b class="text-slate-400 text-xs">شعارات مقترحة:</b>';
                data.taglines.forEach(t => { html += '<p class="text-gold-400 text-sm mt-1">"' + t + '"</p>'; });
                html += '</div>';
            }
            document.getElementById('namesSection').innerHTML = html;
        }
        if (data.color_palette) {
            let html = '<h3 class="text-white font-semibold mb-3">لوحة الألوان</h3><div class="flex gap-3 flex-wrap">';
            data.color_palette.forEach(c => {
                if (typeof c === 'object') html += '<div class="flex-1 min-w-[80px] text-center"><div class="w-full h-16 rounded-lg mb-2 border border-white/10" style="background:' + c.hex + '"></div><div class="text-xs text-white">' + c.name + '</div><div class="text-xs text-slate-500">' + c.hex + '</div></div>';
            });
            html += '</div>';
            document.getElementById('colorsSection').innerHTML = html;
        }
        if (data.typography) {
            let t = data.typography;
            document.getElementById('typographySection').innerHTML = '<h3 class="text-white font-semibold mb-3">الخطوط</h3><div class="grid grid-cols-3 gap-4 text-sm text-slate-300"><div class="bg-white/5 p-3 rounded-lg"><div class="text-xs text-slate-500 mb-1">العناوين</div><b>' + t.heading_font + '</b></div><div class="bg-white/5 p-3 rounded-lg"><div class="text-xs text-slate-500 mb-1">النصوص</div><b>' + t.body_font + '</b></div><div class="bg-white/5 p-3 rounded-lg"><div class="text-xs text-slate-500 mb-1">التمييز</div><b>' + t.accent_font + '</b></div></div>';
        }
        if (data.brand_voice) {
            document.getElementById('voiceSection').innerHTML = '<h3 class="text-white font-semibold mb-3">نبرة العلامة</h3><p class="text-slate-300 text-sm">' + data.brand_voice + '</p>';
        }
        if (data.brand_values && data.brand_values.length) {
            let html = '<h3 class="text-white font-semibold mb-3">القيم الأساسية</h3><div class="flex flex-wrap gap-2">';
            data.brand_values.forEach(v => { html += '<span class="bg-gold-500/10 text-gold-400 px-3 py-1.5 rounded-full text-xs font-medium">' + v + '</span>'; });
            html += '</div>';
            document.getElementById('valuesSection').innerHTML = html;
            document.getElementById('valuesSection').classList.remove('hidden');
        }
        document.getElementById('brandStatus').textContent = '';
    } catch(e) {
        document.getElementById('brandStatus').textContent = 'خطأ: ' + e.message;
    }
    document.getElementById('brandBtn').disabled = false;
}

let selectedBrandName = '';
function selectBrandName(el) {
    document.querySelectorAll('.brand-name-option').forEach(e => e.classList.remove('border-gold-500/50', 'bg-gold-500/10'));
    el.classList.add('border-gold-500/50', 'bg-gold-500/10');
    selectedBrandName = el.textContent.trim();
}

async function generateLogos() {
    document.getElementById('logoBtn').disabled = true;
    document.getElementById('logoStatus').classList.remove('hidden');
    document.getElementById('logoGrid').innerHTML = '';

    const colorHint = brandData.color_palette ? brandData.color_palette.filter(c => c && c.hex).map(c => c.hex).slice(0, 3).join(', ') : '';

    for (let i = 0; i < 4; i++) {
        document.getElementById('logoGrid').innerHTML += '<div class="aspect-square bg-white/5 rounded-xl border border-white/10 flex items-center justify-center" id="logo-placeholder-' + i + '"><div class="w-6 h-6 border-2 border-gold-400 border-t-transparent rounded-full animate-spin"></div></div>';
    }

    try {
        const resp = await fetch('{{ url_for("tools.api_generate_logos") }}', {
            method: 'POST', headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                report_id: {{ report.id }},
                style: document.getElementById('style').value,
                brand_name: selectedBrandName,
                color_hint: colorHint
            })
        });
        const data = await resp.json();

        if (data.logos) {
            let html = '';
            data.logos.forEach((logo, i) => {
                if (logo.url) {
                    html += '<div class="group relative">' +
                        '<div class="aspect-square bg-white rounded-xl overflow-hidden border border-white/10">' +
                        '<img src="' + logo.url + '" alt="Logo ' + (i+1) + '" class="w-full h-full object-contain">' +
                        '</div>' +
                        '<div class="mt-2 flex items-center justify-between">' +
                        '<span class="text-xs text-slate-400">' + logo.style + '</span>' +
                        '<a href="' + logo.url + '" download="logo-' + (i+1) + '.png" target="_blank" class="text-xs text-gold-400 hover:text-gold-300 transition">تحميل &#8595;</a>' +
                        '</div></div>';
                } else {
                    html += '<div class="aspect-square bg-white/5 rounded-xl border border-red-500/20 flex items-center justify-center">' +
                        '<div class="text-center p-4"><div class="text-red-400 text-xs">' + (logo.error || 'فشل التوليد') + '</div>' +
                        '<div class="text-slate-500 text-xs mt-1">' + logo.style + '</div></div></div>';
                }
            });
            document.getElementById('logoGrid').innerHTML = html;
        } else {
            document.getElementById('logoGrid').innerHTML = '<div class="col-span-2 text-center text-red-400 text-sm py-8">' + (data.error || 'خطأ في التوليد') + '</div>';
        }
    } catch(e) {
        document.getElementById('logoGrid').innerHTML = '<div class="col-span-2 text-center text-red-400 text-sm py-8">خطأ: ' + e.message + '</div>';
    }
    document.getElementById('logoBtn').disabled = false;
    document.getElementById('logoStatus').classList.add('hidden');
}
</script>
{% endblock %}