{% extends "base.html" %}
{% block title %}API - LAZARUS{% endblock %}
{% block content %}
<h1>🌐 مدیریت API</h1>

<!-- فرم اضافه کردن -->
<div class="card">
    <h3>➕ مدل جدید اضافه کن</h3>
    <input type="text" id="new_name" placeholder="نام (مثلاً: OpenCode)">
    <input type="text" id="new_url" placeholder="Base URL (مثلاً: https://opencode.ai/zen/v1)">
    <input type="text" id="new_key" placeholder="API Key">
    <button class="btn" onclick="addModel()">💾 ذخیره مدل</button>
    <div id="add_status" class="mt-1"></div>
</div>

<!-- لیست مدل‌ها -->
<div class="card">
    <h3>📋 مدل‌های ذخیره شده</h3>
    <input type="text" id="search_box" placeholder="جستجوی مدل..." oninput="filterModels()" style="margin-bottom:12px;">
    <div id="models_list"></div>
</div>

<script>
let allModels = [];

function loadModels() {
    fetch('/api/models-list').then(r=>r.json()).then(d=>{
        allModels = d.models || [];
        renderModels(allModels);
    });
}

function renderModels(models) {
    const box = document.getElementById('models_list');
    if (!models.length) {
        box.innerHTML = '<p class="text-muted">مدلی ذخیره نشده</p>';
        return;
    }
    box.innerHTML = models.map((m,i) => `
        <div style="padding:12px;border-bottom:1px solid #30363d;display:flex;justify-content:space-between;align-items:center;">
            <div>
                <strong>${m.name}</strong><br>
                <span class="text-muted">${m.url.substring(0,40)}...</span>
            </div>
            <div style="display:flex;gap:6px;">
                <button class="btn btn-sm btn-blue" onclick="testModel('${i}')">🧪 تست</button>
                <button class="btn btn-sm" onclick="selectModel(${i})">✅ انتخاب</button>
                <button class="btn btn-sm btn-red" onclick="removeModel(${i})">🗑️</button>
            </div>
        </div>
    `).join('');
}

function filterModels() {
    const q = document.getElementById('search_box').value.toLowerCase();
    const filtered = allModels.filter(m => m.name.toLowerCase().includes(q) || m.url.toLowerCase().includes(q));
    renderModels(filtered);
}

function addModel() {
    const name = document.getElementById('new_name').value;
    const url = document.getElementById('new_url').value;
    const key = document.getElementById('new_key').value;
    const status = document.getElementById('add_status');
    if (!name || !url || !key) { status.innerHTML = '<span class="error">همه فیلدها الزامیه</span>'; return; }
    fetch('/api/add-model', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({name, url, key})})
    .then(r=>r.json()).then(d=>{
        if (d.ok) {
            status.innerHTML = '<span class="success">✅ ذخیره شد</span>';
            document.getElementById('new_name').value = '';
            document.getElementById('new_url').value = '';
            document.getElementById('new_key').value = '';
            loadModels();
        } else {
            status.innerHTML = '<span class="error">❌ ' + d.error + '</span>';
        }
    });
}

function testModel(i) {
    const m = allModels[i];
    if (!m) return;
    const url = document.getElementById('new_url').value || m.url;
    const key = document.getElementById('new_key').value || m.key;
    const status = document.getElementById('add_status');
    status.innerHTML = '⏳ تست...';
    fetch('/api/test-model', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({api_url:m.url, api_key:m.key, model:m.name})})
    .then(r=>r.json()).then(d=>{
        status.innerHTML = d.ok ? '<span class="success">✅ ' + d.response + '</span>' : '<span class="error">❌ ' + d.error + '</span>';
    });
}

function selectModel(i) {
    const m = allModels[i];
    if (!m) return;
    fetch('/api/save-api', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({api_url:m.url, api_key:m.key, api_model:m.name})})
    .then(r=>r.json()).then(d=>{
        document.getElementById('add_status').innerHTML = d.ok ? '<span class="success">✅ مدل فعال شد: ' + m.name + '</span>' : '<span class="error">❌ ' + d.error + '</span>';
    });
}

function removeModel(i) {
    fetch('/api/remove-model', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({index:i})})
    .then(r=>r.json()).then(()=>loadModels());
}

loadModels();
</script>
{% endblock %}