{% extends "base.html" %}
{% block title %}Admin{% endblock %}
{% block content %}
<h1>Admin Panel</h1>

<div class="card">
    <h3>API Settings</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">
    <select id="api_model">
        {% if config.api.model %}<option value="{{ config.api.model }}" selected>{{ config.api.model }}</option>{% endif %}
    </select>
    <div style="display:flex;gap:8px;margin-top:8px;">
        <button class="btn btn-blue" onclick="fetchModels()" id="fetchBtn">Get Models</button>
        <button class="btn" onclick="saveConfig()">Save</button>
    </div>
    <div id="status" style="font-size:12px;margin-top:8px;"></div>
</div>

<div class="card">
    <h3>Chat</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="Type..." style="margin:0;flex:1;" onkeydown="if(event.key==='Enter')sendMsg()">
        <button class="btn" onclick="sendMsg()">Send</button>
    </div>
</div>

<div class="card">
    <h3>Sites ({{ sites|length }})</h3>
    {% for site in sites %}
    <div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #30363d;">
        <span>{{ site.name }}</span>
        <a href="/preview/{{ site.file }}" target="_blank" class="btn" style="padding:4px 12px;">View</a>
    </div>
    {% endfor %}
    {% if not sites %}<p style="color:#8b949e;">No sites yet</p>{% endif %}
</div>

<script>
function fetchModels() {
    const status = document.getElementById('status');
    status.textContent = 'Loading...';
    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.innerHTML = '';
            d.models.forEach(m => { const o = document.createElement('option'); o.value = m; o.textContent = m; sel.appendChild(o); });
            status.innerHTML = '<span style="color:#3fb950;">' + d.models.length + ' models</span>';
        } else {
            status.innerHTML = '<span style="color:#f85149;">Error: ' + (d.error||'none') + '</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;">Saved!</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;">Thinking...</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;">Error: '+err+'</span></div>';
    });
}
</script>
{% endblock %}