{% extends "base.html" %}
{% block title %}Admin{% endblock %}
{% block content %}
<h1>پنل ادمین</h1>

<div class="card">
    <h3>🌐 تنظیمات API</h3>
    <input type="text" id="api_url" value="{{ config.api.url }}" placeholder="API URL">
    <input type="text" id="api_key" value="{{ config.api.key }}" placeholder="API Key">
    <input type="text" id="api_model" value="{{ config.api.model }}" placeholder="Model name">
    <div style="display:flex;gap:8px;margin-top:8px;">
        <button class="btn btn-blue" onclick="fetchModels()">🔍 جستجوی مدل‌ها</button>
        <button class="btn btn-blue" onclick="testModel()">🧪 تست مدل</button>
        <button class="btn" onclick="saveConfig()">💾 ذخیره</button>
    </div>
    <div id="status" style="font-size:12px;margin-top:8px;"></div>
</div>

<div class="card">
    <h3>💬 چت</h3>
    <div id="chat" style="height:300px;overflow-y:auto;padding:12px;background:#0d1117;border-radius:8px;margin:12px 0;"></div>
    <div style="display:flex;gap:8px;">
        <input type="text" id="msg" placeholder="پیام..." style="margin:0;flex:1;" onkeydown="if(event.key==='Enter')sendMsg()">
        <button class="btn" onclick="sendMsg()">ارسال</button>
    </div>
</div>

<div class="card">
    <h3>📁 سایت من</h3>
    {% for site in sites %}
    <div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #30363d;">
        <span>{{ site.name }} ({{ (site.size/1024)|round(1) }}KB)</span>
        <a href="/preview/{{ site.file }}" target="_blank" class="btn" style="padding:4px 12px;">👁️ مشاهده</a>
    </div>
    {% endfor %}
    {% if not sites %}<p style="color:#8b949e;">هنوز سایتی ساخته نشده</p>{% endif %}
</div>

<script>
function fetchModels() {
    const status = document.getElementById('status');
    status.textContent = '⏳ در حال دریافت...';
    fetch('/api/fetch-models', {method:'POST', headers:{'Content-Type':'application/json'},
        body:JSON.stringify({api_url:document.getElementById('api_url').value, api_key:document.getElementById('api_key').value})})
    .then(r=>r.json()).then(d=>{
        if(d.models && d.models.length > 0) {
            const sel = document.getElementById('api_model');
            sel.value = d.models[0];
            status.innerHTML = '<span style="color:#3fb950;">✅ ' + d.models.length + ' مدل پیدا شد. اولی انتخاب شد: ' + d.models[0] + '</span>';
        } else {
            status.innerHTML = '<span style="color:#f85149;">❌ ' + (d.error||'خطا') + '</span>';
        }
    });
}

function testModel() {
    const status = document.getElementById('status');
    status.textContent = '⏳ تست...';
    fetch('/api/test-model', {method:'POST', headers:{'Content-Type':'application/json'},
        body:JSON.stringify({api_url:document.getElementById('api_url').value, api_key:document.getElementById('api_key').value, model:document.getElementById('api_model').value})})
    .then(r=>r.json()).then(d=>{
        if(d.ok) status.innerHTML = '<span style="color:#3fb950;">✅ مدل کار میکنه: ' + d.response + '</span>';
        else status.innerHTML = '<span style="color:#f85149;">❌ ' + d.error + '</span>';
    });
}

function saveConfig() {
    fetch('/admin/save-config', {method:'POST', headers:{'Content-Type':'application/json'},
        body:JSON.stringify({api_url:document.getElementById('api_url').value, api_key:document.getElementById('api_key').value, api_model:document.getElementById('api_model').value})})
    .then(r=>r.json()).then(d=>{ document.getElementById('status').innerHTML='<span style="color:#3fb950;">✅ ذخیره شد!</span>'; });
}

function sendMsg() {
    const input = document.getElementById('msg');
    const chat = document.getElementById('chat');
    const msg = input.value.trim();
    if (!msg) return;
    chat.innerHTML += '<div style="margin:8px 0;"><span style="background:#1f6feb;padding:8px 12px;border-radius:8px;">'+msg+'</span></div>';
    chat.innerHTML += '<div id="loading" style="margin:8px 0;text-align:right;"><span style="background:#21262d;padding:8px 12px;border-radius:8px;color:#8b949e;">⏳ داره فکر میکنه...</span></div>';
    input.value = ''; chat.scrollTop = chat.scrollHeight;
    fetch('/api/chat', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({message:msg})})
    .then(r=>r.json()).then(data=>{
        document.getElementById('loading')?.remove();
        let r = data.error || data.response || JSON.stringify(data);
        chat.innerHTML += '<div style="margin:8px 0;text-align:right;"><span style="background:#21262d;padding:8px 12px;border-radius:8px;white-space:pre-wrap;">'+r+'</span></div>';
        chat.scrollTop = chat.scrollHeight;
    }).catch(err=>{
        document.getElementById('loading')?.remove();
        chat.innerHTML += '<div style="margin:8px 0;text-align:right;"><span style="background:#da3633;padding:8px 12px;border-radius:8px;">❌ '+err+'</span></div>';
    });
}
</script>
{% endblock %}