{% extends "base.html" %}
{% block title %}تعديل طلب الحاضنة{% endblock %}
{% block content %}
<div class="max-w-3xl mx-auto px-4 py-12">
    <div class="flex items-center gap-3 mb-8">
        <a href="{{ url_for('incubator.apply', report_id=application.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">{{ application.incubator_name }}</div>
            <h1 class="text-2xl font-bold text-white">بيانات طلب الانضمام</h1>
        </div>
    </div>

    <div class="glass p-6 rounded-xl border border-white/10 mb-6">
        <form method="POST" class="space-y-5">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            {% set d = application.application_data_json or {} %}

            <div>
                <label class="text-xs text-slate-400 block mb-1">حجم الفريق</label>
                <input name="team_size" type="text" value="{{ d.get('team_size', '') }}" placeholder="مثال: 3 مؤسسين + 2 مطورين"
                       class="w-full bg-slate-800 border border-white/10 text-white rounded-lg px-3 py-2 text-sm">
            </div>
            <div>
                <label class="text-xs text-slate-400 block mb-1">مرحلة المشروع</label>
                <select name="stage" class="w-full bg-slate-800 border border-white/10 text-white rounded-lg px-3 py-2 text-sm">
                    <option value="idea" {% if d.get('stage')=='idea' %}selected{% endif %}>فكرة</option>
                    <option value="mvp" {% if d.get('stage')=='mvp' %}selected{% endif %}>MVP</option>
                    <option value="beta" {% if d.get('stage')=='beta' %}selected{% endif %}>Beta</option>
                    <option value="launched" {% if d.get('stage')=='launched' %}selected{% endif %}>تم الإطلاق</option>
                    <option value="growth" {% if d.get('stage')=='growth' %}selected{% endif %}>نمو</option>
                </select>
            </div>
            <div>
                <label class="text-xs text-slate-400 block mb-1">التمويل المطلوب</label>
                <input name="funding_needed" type="text" value="{{ d.get('funding_needed', '') }}" placeholder="مثال: 500,000 ريال"
                       class="w-full bg-slate-800 border border-white/10 text-white rounded-lg px-3 py-2 text-sm">
            </div>
            <div>
                <label class="text-xs text-slate-400 block mb-1">الجذب / Traction</label>
                <textarea name="traction" rows="2" placeholder="مثال: 1000 مستخدم، 50 عميل مدفوع"
                          class="w-full bg-slate-800 border border-white/10 text-white rounded-lg px-3 py-2 text-sm">{{ d.get('traction', '') }}</textarea>
            </div>
            <div>
                <label class="text-xs text-slate-400 block mb-1">القيمة الفريدة</label>
                <textarea name="unique_value" rows="2" placeholder="ما الذي يميز مشروعك؟"
                          class="w-full bg-slate-800 border border-white/10 text-white rounded-lg px-3 py-2 text-sm">{{ d.get('unique_value', '') }}</textarea>
            </div>
            <div>
                <div class="flex items-center justify-between mb-1">
                    <label class="text-xs text-slate-400">نبذة عن المشروع</label>
                    <button type="button" onclick="generateFullApplication()" class="text-xs text-emerald-400 hover:text-emerald-300 transition">إعادة التوليد</button>
                </div>
                <style>
                    #projectSummaryContainer, #projectSummaryContainer * { color: #f1f5f9 !important; }
                    #projectSummaryContainer h3 { color: #93c5fd !important; font-size: 1rem; font-weight: 700; margin-top: 1.2em; margin-bottom: 0.5em; }
                    #projectSummaryContainer p { margin-bottom: 0.8em; line-height: 1.8; }
                    </style>
                <div id="projectSummaryContainer" class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 text-sm text-white min-h-[200px] max-h-[500px] overflow-y-auto">
                    {% if d.get('project_summary') %}
                        {{ d.get('project_summary') | safe }}
                    {% elif application.ai_application_text %}
                        {{ application.ai_application_text | safe }}
                    {% else %}
                        <span class="text-slate-500">سيتم توليد نبذة تفصيلية عن المشروع تلقائياً عند الضغط على "توليد طلب بالذكاء الاصطناعي"</span>
                    {% endif %}
                </div>
                <input type="hidden" name="project_summary" id="projectSummaryInput" value="">
            </div>

            <div class="flex gap-3">
                <button type="submit" class="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>
                <button type="button" id="aiFillBtn" onclick="fillFormWithAI()" class="bg-emerald-500/20 border border-emerald-500/30 text-emerald-400 px-6 py-2.5 rounded-lg text-sm font-medium hover:bg-emerald-500/30 transition">
                    توليد طلب بالذكاء الاصطناعي
                </button>
            </div>
        </form>
    </div>

</div>

<script>
async function fillFormWithAI() {
    const btn = document.getElementById('aiFillBtn');
    const origText = btn.textContent;
    btn.disabled = true;
    btn.textContent = 'جاري التوليد...';
    btn.classList.add('opacity-50');

    try {
        const resp = await fetch('{{ url_for("incubator.api_fill_form") }}', {
            method: 'POST', headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({application_id: {{ application.id }}})
        });
        const result = await resp.json();

        if (result.fields) {
            const f = result.fields;
            // Fill text inputs
            if (f.team_size) document.querySelector('[name="team_size"]').value = f.team_size;
            if (f.funding_needed) document.querySelector('[name="funding_needed"]').value = f.funding_needed;
            if (f.traction) document.querySelector('[name="traction"]').value = f.traction;
            if (f.unique_value) document.querySelector('[name="unique_value"]').value = f.unique_value;
            // Fill select
            if (f.stage) {
                const sel = document.querySelector('[name="stage"]');
                for (let opt of sel.options) {
                    if (opt.value === f.stage) { sel.value = f.stage; break; }
                }
            }
            // Flash highlight on filled fields
            document.querySelectorAll('input[name="team_size"], input[name="funding_needed"], textarea[name="traction"], textarea[name="unique_value"], select[name="stage"]').forEach(el => {
                el.classList.add('border-emerald-500/50');
                setTimeout(() => el.classList.remove('border-emerald-500/50'), 2000);
            });
            // Fill project_summary field too
            if (f.project_summary) {
                document.getElementById('projectSummaryContainer').innerHTML = f.project_summary;
                document.getElementById('projectSummaryInput').value = f.project_summary;
            }
            // Auto-generate full application after filling fields
            btn.textContent = 'جاري توليد الطلب الكامل...';
            await generateFullApplication();
        } else if (result.error) {
            alert(result.error);
        }
    } catch(e) {
        alert('حدث خطأ أثناء التوليد');
    } finally {
        btn.disabled = false;
        btn.textContent = origText;
        btn.classList.remove('opacity-50');
    }
}

async function generateFullApplication() {
    const container = document.getElementById('projectSummaryContainer');
    container.innerHTML = '<div class="text-gold-400 animate-pulse">جاري توليد نبذة تفصيلية عن المشروع...</div>';
    // Collect current form field values
    const formData = {
        team_size: document.querySelector('[name="team_size"]').value,
        stage: document.querySelector('[name="stage"]').value,
        funding_needed: document.querySelector('[name="funding_needed"]').value,
        traction: document.querySelector('[name="traction"]').value,
        unique_value: document.querySelector('[name="unique_value"]').value,
    };
    try {
        const resp = await fetch('{{ url_for("incubator.api_generate_application") }}', {
            method: 'POST', headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({application_id: {{ application.id }}, form_data: formData})
        });
        const result = await resp.json();
        const html = result.text || result.error;
        container.innerHTML = html;
        document.getElementById('projectSummaryInput').value = html;
    } catch(e) {
        container.innerHTML = '<div class="text-red-400">حدث خطأ في التوليد</div>';
    }
}
</script>
{% endblock %}