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

<!-- API Settings -->
<div class="card">
    <h3 style="color: #58a6ff;">🌐 تنظیمات API</h3>
    
    <label style="color: #8b949e; font-size: 12px;">API URL</label>
    <input type="text" id="api_url" value="{{ config.api.url }}" placeholder="https://opencode.ai/zen/v1/chat/completions">
    
    <label style="color: #8b949e; font-size: 12px;">API Key</label>
    <input type="text" id="api_key" value="{{ config.api.key }}" placeholder="sk-...">
    
    <div style="display: flex; gap: 8px; margin-bottom: 12px;">
        <button class="btn btn-blue" onclick="fetchModels()" id="fetchBtn">🔍 دریافت مدل‌ها</button>
        <button class="btn" onclick="saveConfig()">💾 ذخیره تنظیمات</button>
    </div>
    
    <div id="modelsStatus" style="color: #8b949e; font-size: 12px; margin-bottom: 8px;"></div>
    
    <label style="color: #8b949e; font-size: 12px;">مدل فعال</label>
    <select id="api_model" style="width: 100%; padding: 12px; background: #0d1117; border: 1px solid #30363d; border-radius: 8px; color: #e6edf3; font-family: inherit; font-size: 14px; margin-bottom: 12px;">
        {% if config.api.model %}
        <option value="{{ config.api.model }}" selected>{{ config.api.model }}</option>
        {% endif %}
    </select>
    
    <button class="btn btn-blue" onclick="testModel()" id="testBtn" style="margin-bottom: 12px;">🧪 تست مدل</button>
    <div id="testStatus" style="margin-bottom: 12px; font-size: 12px;"></div>
    
    <label style="color: #8b949e; font-size: 12px;">Username</label>
    <input type="text" id="username" value="{{ config.username }}">
    
    <label style="color: #8b949e; font-size: 12px;">Password</label>
    <input type="password" id="password" placeholder="留空保持当前密码">
    
    <div id="saveStatus" style="margin-top: 8px;"></div>
</div>

<!-- Status -->
<div class="card">
    <h3 style="color: #58a6ff;">📊 وضعیت</h3>
    <p style="color: #8b949e;">
        وضعیت: <span class="badge badge-green">{{ progress.status }}</span>
        | پیشرفت: {{ progress.done }}/{{ progress.total }} ({{ progress.percent|int }}%)
    </p>
</div>

<!-- Chat -->
<div class="card">
    <h3 style="color: #58a6ff;">💬 چت</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;">
        <button class="btn" onclick="sendMsg()">ارسال</button>
    </div>
</div>

<!-- Sites -->
<div class="card">
    <h3 style="color: #58a6ff;">📁 سایت‌ها ({{ sites|length }})</h3>
    {% for site in sites %}
    <div style="display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #30363d;">
        <span>{{ site.name }} <span style="color: #8b949e; font-size: 12px;">({{ (site.size / 1024)|round(1) }}KB)</span></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 btn = document.getElementById('fetchBtn');
    const status = document.getElementById('modelsStatus');
    const select = document.getElementById('api_model');
    const url = document.getElementById('api_url').value;
    const key = document.getElementById('api_key').value;

    if (!url || !key) {
        status.innerHTML = '<span style="color:#f85149;">URL و Key رو پر کن</span>';
        return;
    }

    btn.disabled = true;
    btn.textContent = '⏳ در حال دریافت...';
    status.innerHTML = 'در حال دریافت مدل‌ها از API...';

    fetch('/api/fetch-models', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({api_url: url, api_key: key})
    })
    .then(r => r.json())
    .then(data => {
        btn.disabled = false;
        btn.textContent = '🔍 دریافت مدل‌ها';
        
        if (data.error) {
            status.innerHTML = '<span style="color:#f85149;">خطا: ' + data.error + '</span>';
            // Still allow manual model entry
            return;
        }
        
        if (data.models && data.models.length > 0) {
            select.innerHTML = '';
            data.models.forEach(m => {
                const opt = document.createElement('option');
                opt.value = m;
                opt.textContent = m;
                select.appendChild(opt);
            });
            status.innerHTML = '<span style="color:#3fb950;">✅ ' + data.models.length + ' مدل پیدا شد</span>';
        } else {
            status.innerHTML = '<span style="color:#f85149;">مدلی پیدا نشد</span>';
        }
    })
    .catch(err => {
        btn.disabled = false;
        btn.textContent = '🔍 دریافت مدل‌ها';
        status.innerHTML = '<span style="color:#f85149;">خطا: ' + err + '</span>';
    });
}

function testModel() {
    const btn = document.getElementById('testBtn');
    const status = document.getElementById('testStatus');
    btn.disabled = true;
    btn.textContent = '⏳ تست...';
    status.innerHTML = '<span style="color:#8b949e;">در حال تست مدل...</span>';

    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(data => {
        btn.disabled = false;
        btn.textContent = '🧪 تست مدل';
        if (data.ok) {
            status.innerHTML = '<span style="color:#3fb950;">✅ کار میکنه! پاسخ: ' + data.response + '</span>';
        } else {
            status.innerHTML = '<span style="color:#f85149;">❌ خطا: ' + data.error + '</span>';
        }
    })
    .catch(err => {
        btn.disabled = false;
        btn.textContent = '🧪 تست مدل';
        status.innerHTML = '<span style="color:#f85149;">❌ خطا: ' + err + '</span>';
    });
}

function saveConfig() {
    const status = document.getElementById('saveStatus');
    const data = {
        api_url: document.getElementById('api_url').value,
        api_key: document.getElementById('api_key').value,
        api_model: document.getElementById('api_model').value,
        username: document.getElementById('username').value,
        password: document.getElementById('password').value,
    };

    fetch('/admin/save-config', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(data)
    })
    .then(r => r.json())
    .then(d => {
        if (d.ok) {
            status.innerHTML = '<span style="color:#3fb950;">✅ ذخیره شد!</span>';
        } else {
            status.innerHTML = '<span style="color:#f85149;">خطا</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; display:inline-block; max-width:80%;">' + msg + '</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 => {
        let response = 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; display:inline-block; max-width:80%; white-space:pre-wrap;">' + response + '</span></div>';
        chat.scrollTop = chat.scrollHeight;
    })
    .catch(err => {
        chat.innerHTML += '<div style="margin:8px 0; text-align:right;"><span style="background:#da3633; padding:8px 12px; border-radius:8px; display:inline-block;">Error: ' + err + '</span></div>';
        chat.scrollTop = chat.scrollHeight;
    });
}

document.getElementById('msg').addEventListener('keydown', function(e) {
    if (e.key === 'Enter') sendMsg();
});
</script>
{% endblock %}