{% extends "base.html" %}
{% block title %}API Settings — LAZARUS{% endblock %}

{% block content %}
<style>
    .settings{padding:2rem;max-width:1000px;margin:0 auto;}
    .settings-header{margin-bottom:2rem;opacity:0;animation:fU .6s ease-out .1s forwards;}
    @keyframes fU{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
    .settings-header h1{font-size:1.75rem;font-weight:700;margin-bottom:4px;}
    .settings-header p{font-size:0.875rem;color:var(--text-muted);}

    .settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;opacity:0;animation:fU .6s ease-out .2s forwards;}
    .settings-card{background:rgba(30,30,40,0.6);backdrop-filter:blur(12px);border:1px solid rgba(99,102,241,0.15);border-radius:14px;padding:1.5rem;transition:all .3s;}
    .settings-card:hover{border-color:rgba(99,102,241,0.3);}
    .settings-card.full{grid-column:1/-1;}
    .settings-card h3{font-size:0.9375rem;font-weight:600;margin-bottom:1rem;display:flex;align-items:center;gap:8px;}
    .settings-card h3 svg{width:18px;height:18px;color:var(--primary);}

    .form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;}
    .form-label{font-size:0.75rem;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;}
    .form-input{width:100%;padding:10px 14px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;color:var(--text-main);font-size:14px;font-family:'Space Grotesk',sans-serif;outline:none;transition:all .2s;}
    .form-input::placeholder{color:var(--text-subtle);}
    .form-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(59,130,246,0.12);}
    .form-row{display:flex;gap:8px;}
    .form-row .form-group{flex:1;}

    .btn{padding:10px 18px;border-radius:10px;font-family:'Space Grotesk',sans-serif;font-size:0.8125rem;font-weight:600;cursor:pointer;transition:all .2s;border:none;display:inline-flex;align-items:center;gap:6px;}
    .btn-primary{background:linear-gradient(135deg,var(--brand-500),var(--brand-700));color:white;}
    .btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(99,102,241,0.3);}
    .btn-secondary{background:var(--surface-3);color:var(--text-main);border:1px solid var(--border);}
    .btn-secondary:hover{border-color:var(--primary);}
    .btn-danger{background:rgba(239,68,68,0.1);color:var(--danger);border:1px solid rgba(239,68,68,0.2);}
    .btn-danger:hover{background:rgba(239,68,68,0.2);}
    .btn-sm{padding:6px 12px;font-size:0.75rem;}

    .status-msg{padding:10px 14px;border-radius:10px;font-size:0.8125rem;margin-top:8px;display:flex;align-items:center;gap:8px;}
    .status-msg.success{background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.2);color:var(--success);}
    .status-msg.error{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.2);color:var(--danger);}
    .status-msg.loading{background:rgba(59,130,246,0.1);border:1px solid rgba(59,130,246,0.2);color:var(--info);}

    .model-list{display:flex;flex-direction:column;gap:6px;max-height:400px;overflow-y:auto;}
    .model-item{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;transition:all .2s;flex-wrap:wrap;}
    .model-item:hover{border-color:var(--primary);}
    .model-name{font-size:0.8125rem;font-weight:600;font-family:'JetBrains Mono',monospace;}
    .model-url{font-size:0.6875rem;color:var(--text-subtle);margin-top:2px;font-family:'JetBrains Mono',monospace;}
    .model-actions{display:flex;gap:4px;}
    .model-result{width:100%;margin-top:8px;padding:8px 12px;border-radius:8px;font-size:0.75rem;font-family:'JetBrains Mono',monospace;word-break:break-all;}
    .model-result.success{background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.2);color:var(--success);}
    .model-result.error{background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.2);color:var(--danger);}
    .model-result.loading{background:rgba(59,130,246,0.08);border:1px solid rgba(59,130,246,0.2);color:var(--info);}

    .empty-state{text-align:center;padding:2rem;color:var(--text-subtle);font-size:0.8125rem;}

    @media(max-width:768px){.settings-grid{grid-template-columns:1fr;}.form-row{flex-direction:column;}}
</style>

<div class="settings" dir="ltr" style="direction:ltr;text-align:left">
    <div class="settings-header">
        <h1>API Settings</h1>
        <p>Configure your AI provider and manage models.</p>
    </div>

    <div class="settings-grid">
        <!-- Add Model -->
        <div class="settings-card">
            <h3><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> Add Model</h3>
            <div class="form-group">
                <label class="form-label">Name</label>
                <input type="text" id="new_name" class="form-input" placeholder="e.g. OpenCode">
            </div>
            <div class="form-group">
                <label class="form-label">Base URL</label>
                <input type="text" id="new_url" class="form-input" placeholder="https://api.example.com/v1">
                <div style="font-size:0.75rem;color:var(--text-subtle);margin-top:4px;">
                    &#9888; Fetching models or testing sends that request's API key to this URL. A saved/active key only travels to its own configured origin; a pasted key only travels to public-or-allowlisted https hosts or loopback/allowlisted http hosts (<code>api_url_allowlist</code>).
                </div>
            </div>
            <div class="form-group">
                <label class="form-label">API Key</label>
                <input type="password" id="new_key" class="form-input" placeholder="sk-...">
            </div>
            <div class="form-row">
                <button class="btn btn-secondary" onclick="fetchModels()" style="flex:1;">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px;"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                    Fetch Models
                </button>
                <button class="btn btn-primary" onclick="addModel()" style="flex:1;">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px;"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
                    Save Model
                </button>
            </div>
            <div id="status"></div>
        </div>

        <!-- Active Model -->
        <div class="settings-card">
            <h3><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg> Active Model</h3>
            <div id="activeModelInfo" style="padding:1rem;background:var(--surface-2);border-radius:10px;border:1px solid var(--border);">
                <div style="font-size:0.75rem;color:var(--text-subtle);margin-bottom:4px;">CURRENT MODEL</div>
                {# Rendered server-side from config.api (T1.6): the card used to
                   show models[0] from /api/models-list, i.e. the first SAVED
                   entry, not the provider the chat actually spends. #}
                {% if config.api and config.api.model %}
                <div id="activeModelName" style="font-size:1rem;font-weight:600;font-family:'JetBrains Mono',monospace;">{{ config.api.model }}</div>
                <div id="activeModelUrl" style="font-size:0.75rem;color:var(--text-subtle);margin-top:4px;font-family:'JetBrains Mono',monospace;">{{ config.api.url }}</div>
                {% else %}
                <div id="activeModelName" style="font-size:1rem;font-weight:600;font-family:'JetBrains Mono',monospace;">No model configured</div>
                <div id="activeModelUrl" style="font-size:0.75rem;color:var(--text-subtle);margin-top:4px;font-family:'JetBrains Mono',monospace;"></div>
                {% endif %}
            </div>
            <div style="margin-top:12px;">
                <button class="btn btn-secondary" onclick="location.reload()" style="width:100%;">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px;"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
                    Refresh
                </button>
            </div>
        </div>

        <!-- Fetched Models -->
        <div class="settings-card full" id="fetched_section" style="display:none;">
            <h3><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg> Available Models</h3>
            <div class="form-group" style="margin-bottom:12px;">
                <input type="text" id="search_fetched" class="form-input" placeholder="Search models..." oninput="filterFetched()">
            </div>
            <div class="model-list" id="fetched_list"></div>
        </div>

        <!-- Saved Models -->
        <div class="settings-card full">
            <h3><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg> Saved Models</h3>
            <div class="form-group" style="margin-bottom:12px;">
                <input type="text" id="search_saved" class="form-input" placeholder="Search saved models..." oninput="filterSaved()">
            </div>
            <div class="model-list" id="saved_list"></div>
        </div>
    </div>
</div>

<script>
let fetchedModels=[], filteredFetched=[], savedModels=[];

// Status boxes are built with textContent, never innerHTML: `d.error`, model
// names and URLs come from the server and must stay text, not markup.
function setStatus(el,text,kind){
    el.textContent='';
    const msg=document.createElement('div');
    msg.className='status-msg '+(kind||'');
    msg.textContent=text;
    el.appendChild(msg);
}
function fetchModels(){
    const url=document.getElementById('new_url').value;
    const key=document.getElementById('new_key').value;
    const st=document.getElementById('status');
    if(!url||!key){setStatus(st,'URL and Key are required','error');return;}
    if(!confirm('Your API key will be sent to this URL:\n'+url+'\nContinue?')){return;}
    setStatus(st,'Fetching models...','loading');
    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(d=>{
        if(d.models&&d.models.length>0){fetchedModels=d.models;filteredFetched=d.models.slice();renderFetched();document.getElementById('fetched_section').style.display='block';setStatus(st,'Found '+d.models.length+' models','success');}
        else{setStatus(st,d.error||'No models found','error');}
    });
}
function renderFetched(){
    const box=document.getElementById('fetched_list');
    box.textContent='';
    if(!filteredFetched.length){
        const empty=document.createElement('div');
        empty.className='empty-state';
        empty.textContent='No models found';
        box.appendChild(empty);
        return;
    }
    filteredFetched.forEach(m=>{
        const item=document.createElement('div');
        item.className='model-item';
        const name=document.createElement('div');
        name.className='model-name';
        name.textContent=m;
        const actions=document.createElement('div');
        actions.className='model-actions';
        const btn=document.createElement('button');
        btn.className='btn btn-primary btn-sm';
        btn.textContent='Select';
        btn.addEventListener('click',()=>selectFetchedModel(m));
        actions.appendChild(btn);
        item.appendChild(name);
        item.appendChild(actions);
        box.appendChild(item);
    });
}
function filterFetched(){const q=document.getElementById('search_fetched').value.toLowerCase();filteredFetched=fetchedModels.filter(m=>m.toLowerCase().includes(q));renderFetched();}
function selectFetchedModel(n){document.getElementById('new_name').value=n;setStatus(document.getElementById('status'),'Selected: '+n,'success');window.scrollTo({top:0,behavior:'smooth'});}

function addModel(){
    const n=document.getElementById('new_name').value,u=document.getElementById('new_url').value,k=document.getElementById('new_key').value;
    const st=document.getElementById('status');
    if(!n||!u||!k){setStatus(st,'All fields are required','error');return;}
    fetch('/api/add-model',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name:n,url:u,key:k})})
    .then(r=>r.json()).then(d=>{
        if(d.ok){setStatus(st,'Saved: '+n,'success');document.getElementById('new_name').value='';loadSaved();}
        else{setStatus(st,d.error||'Error','error');}
    });
}

function loadSaved(){fetch('/api/models-list').then(r=>r.json()).then(d=>{savedModels=d.models||[];renderSaved();});}
function _savedItem(m,i){
    const item=document.createElement('div');
    item.className='model-item';
    const info=document.createElement('div');
    info.style.cssText='flex:1;min-width:0;';
    const name=document.createElement('div');
    name.className='model-name';
    name.textContent=m.name;
    const url=document.createElement('div');
    url.className='model-url';
    url.textContent=m.url;
    const result=document.createElement('div');
    result.className='model-result';
    result.id='model-result-'+i;
    result.style.display='none';
    info.appendChild(name);info.appendChild(url);info.appendChild(result);
    const actions=document.createElement('div');
    actions.className='model-actions';
    const bTest=document.createElement('button');
    bTest.className='btn btn-secondary btn-sm';bTest.textContent='Test';
    bTest.addEventListener('click',()=>testSaved(i));
    const bUse=document.createElement('button');
    bUse.className='btn btn-primary btn-sm';bUse.textContent='Use';
    bUse.addEventListener('click',()=>useSaved(i));
    const bDel=document.createElement('button');
    bDel.className='btn btn-danger btn-sm';bDel.textContent='Delete';
    bDel.addEventListener('click',()=>removeSaved(i));
    actions.appendChild(bTest);actions.appendChild(bUse);actions.appendChild(bDel);
    item.appendChild(info);item.appendChild(actions);
    return item;
}
function renderSaved(){
    const box=document.getElementById('saved_list');
    box.textContent='';
    if(!savedModels.length){
        const empty=document.createElement('div');
        empty.className='empty-state';
        empty.textContent='No saved models';
        box.appendChild(empty);
        return;
    }
    savedModels.forEach((m,i)=>box.appendChild(_savedItem(m,i)));
}
function filterSaved(){
    const q=document.getElementById('search_saved').value.toLowerCase();
    const f=savedModels.filter(m=>m.name.toLowerCase().includes(q)||m.url.toLowerCase().includes(q));
    const box=document.getElementById('saved_list');
    box.textContent='';
    if(!f.length){
        const empty=document.createElement('div');
        empty.className='empty-state';
        empty.textContent='No results';
        box.appendChild(empty);
        return;
    }
    f.forEach(m=>box.appendChild(_savedItem(m,savedModels.indexOf(m))));
}

function testSaved(i){
    const m=savedModels[i];
    const el=document.getElementById('model-result-'+i);
    if(!el){return;}
    if(!confirm('Your API key for '+m.name+' will be sent to:\n'+m.url+'\nContinue?')){return;}
    el.className='model-result loading';el.textContent='Testing '+m.name+'...';el.style.display='block';
    // The key never reaches the browser -- models-list ships redacted -- so
    // the index is what identifies the entry and the server resolves its own
    // stored key. Sending m.key here would send undefined.
    fetch('/api/test-model',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({model_index:i})}).then(r=>r.json()).then(d=>{
        el.className=d.ok?'model-result success':'model-result error';
        el.textContent=d.ok?'OK: '+d.response:d.error;
    });
}
function useSaved(i){
    const m=savedModels[i];
    const el=document.getElementById('model-result-'+i);
    if(!el){return;}
    el.className='model-result loading';el.textContent='Activating '+m.name+'...';el.style.display='block';
    // model_index, not a key: activation copies url+key+model together on the
    // server, so the active provider is never paired with a stale key.
    fetch('/api/save-api',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({model_index:i})}).then(r=>r.json()).then(d=>{
        el.className=d.ok?'model-result success':'model-result error';
        el.textContent=d.ok?'Activated: '+m.name:d.error;
        location.reload();  // the card is server-rendered from config.api
    });
}
function removeSaved(i){fetch('/api/remove-model',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({index:i})}).then(r=>r.json()).then(()=>loadSaved());}

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