{% extends "base.html" %}
{% block title %}بريد استثماري — {{ report.project_name }}{% 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('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">PITCH EMAIL</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="grid grid-cols-2 gap-4 mb-4">
            <div>
                <label class="text-xs text-slate-400 block mb-1">نوع المستثمر</label>
                <select id="investorType" class="w-full bg-slate-800 border border-white/10 text-white rounded-lg px-3 py-2 text-sm">
                    <option value="VC">رأس مال جريء (VC)</option>
                    <option value="Angel">مستثمر ملائكي</option>
                    <option value="Government">صندوق حكومي</option>
                    <option value="Accelerator">مسرعة أعمال</option>
                </select>
            </div>
            <div>
                <label class="text-xs text-slate-400 block mb-1">النبرة</label>
                <select id="tone" class="w-full bg-slate-800 border border-white/10 text-white rounded-lg px-3 py-2 text-sm">
                    <option value="professional">رسمي</option>
                    <option value="casual">ودي</option>
                    <option value="urgent">عاجل/FOMO</option>
                </select>
            </div>
        </div>
        <button onclick="generateEmail()" 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>

    <div id="result" class="hidden">
        <div class="glass p-6 rounded-xl border border-white/10 mb-4">
            <div class="text-xs text-slate-500 mb-1">Subject</div>
            <div id="emailSubject" class="text-white font-semibold text-lg mb-4"></div>
            <div id="emailBody" class="text-slate-300 text-sm whitespace-pre-wrap"></div>
        </div>
        <button onclick="copyEmail()" class="bg-white/5 border border-white/10 text-slate-400 px-4 py-2 rounded-lg text-sm hover:bg-white/10 transition">نسخ البريد</button>
    </div>
</div>

<script>
async function generateEmail() {
    document.getElementById('result').classList.remove('hidden');
    document.getElementById('emailBody').innerHTML = '<span class="text-gold-400">جاري التوليد...</span>';
    const resp = await fetch('{{ url_for("tools.api_pitch_email") }}', {
        method: 'POST', headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({report_id: {{ report.id }}, investor_type: document.getElementById('investorType').value, tone: document.getElementById('tone').value})
    });
    const data = await resp.json();
    document.getElementById('emailSubject').textContent = data.subject || '';
    document.getElementById('emailBody').textContent = data.body || data.error || '';
}
function copyEmail() {
    const text = document.getElementById('emailSubject').textContent + '\n\n' + document.getElementById('emailBody').textContent;
    navigator.clipboard.writeText(text);
}
</script>
{% endblock %}