// window.APP — переменные из Jinja2 (заполняются в index.html)
// window.APP = { version, stand, hasUserToken };

/*
 * === АРХИТЕКТУРА ФРОНТЕНДА ===
 *
 * Один HTML-файл, ванильный JS (без фреймворков).
 * Три колонки: инфраструктура | сервисы | инстансы+операции+параметры.
 *
 * Глобальное состояние:
 *   svcInstances   — кеш списка инстансов из /api/operations/{svcId}
 *   selectedInst   — UID выбранного инстанса (null если не выбран)
 *   selectedOp     — {opId, opName, svcId} выбранная операция
 *   pollTimer      — setInterval таймер поллинга статуса операции
 *   SVC_ID = 1     — фиксированный сервис (Болванка)
 *   AUTOTEST_PREFIX — префикс имён autotest-инстансов
 *
 * Потоки:
 *   CREATE:  startCreate() → showParams(18,'create') → executeOp(pp) → poll → refresh
 *   MODIFY:  toggleInstance() → runOp('modify',id) → showParams(id,'modify') → validate → executeOp
 *   БЕЗ ПАРАМЕТРОВ (delete/suspend/resume/redeploy): runOp() → confirm → executeOp({})
 *
 * Хелперы:
 *   _esc(s)         — HTML-экранирование (" → &quot; & → &amp; < → &lt;)
 *   validateJson()  — проверка JSON.parse для map-полей (onblur + перед отправкой)
 *   showStages()    — отрисовка этапов выполнения операции (⏳/✅/❌)
 */
let svcInstances=[], selectedInst=null, selectedOp=null, pollTimer=null;
const SVC_ID=1;
const AUTOTEST_PREFIX='autotest-';

selectService(SVC_ID);

async function selectService(svcId){
    selectedInst=null; selectedOp=null; stopPoll();
    document.getElementById('params-card').style.display='none';
    document.getElementById('stages-box').style.display='none';

    const r=await fetch('/api/operations/'+svcId);
    const d=await r.json();
    svcInstances=d.instances||[];

    let html='';
    svcInstances.forEach(i=>{
        const status=i.status||i.explainedStatus||'?';
        const sc=status==='running'?'badge-success':'';
        html+=`<div class="inst-item" onclick="toggleInstance('${i.instanceUid}')" data-iuid="${i.instanceUid}">
            <span style="flex:1;">${i.displayName}</span>
            <span class="badge ${sc}" style="font-size:9px;">${status}</span>
        </div>`;
        html+=`<div class="inst-ops" id="ops-${i.instanceUid}"></div>`;
    });
    html+=`<div class="inst-item" style="margin-top:8px;border-top:1px solid var(--brand-gray);padding-top:8px;" onclick="startCreate()">
        <span style="flex:1;color:var(--brand-primary);">+ Создать новый инстанс</span>
    </div>`;
    document.getElementById('inst-list').innerHTML=html;
}

async function toggleInstance(iuid){
    selectedInst=iuid; stopPoll();
    document.querySelectorAll('[data-iuid]').forEach(e=>e.classList.toggle('active',e.dataset.iuid===iuid));
    document.getElementById('params-card').style.display='none';

    const opsEl=document.getElementById('ops-'+iuid);
    if(opsEl.classList.contains('open')){opsEl.classList.remove('open');return;}
    document.querySelectorAll('.inst-ops').forEach(e=>e.classList.remove('open'));

    const r=await fetch('/api/operations/'+SVC_ID);
    const d=await r.json();
    const ops=d.operations.filter(o=>o.operation!=='reconcile'&&o.operation!=='create');
    opsEl.innerHTML=ops.map(o=>
        `<button class="btn btn-sm op-btn ${opClass(o.operation)}" onclick="runOp('${o.operation}',${o.svcOperationId})">${o.operation}</button>`
    ).join('');
    opsEl.classList.add('open');
}

function opClass(opName){
    if(opName==='modify') return 'op-btn-modify';
    if(opName==='suspend') return 'op-btn-suspend';
    if(opName==='resume') return 'op-btn-resume';
    if(opName==='delete') return 'op-btn-delete';
    if(opName==='redeploy') return 'op-btn-redeploy';
    if(opName==='reconcile') return 'op-btn-reconcile';
    return '';
}

function startCreate(){
    selectedInst=null; stopPoll();
    document.querySelectorAll('[data-iuid]').forEach(e=>e.classList.remove('active'));
    document.querySelectorAll('.inst-ops').forEach(e=>e.classList.remove('open'));
    showParams(18,'create');
}

function makeCreateDisplayName(){
    const suffix = Date.now().toString(36);
    return suffix;
}

function runOp(opName,opId){
    stopPoll();
    selectedOp={opId,opName,svcId:SVC_ID};
    if(opName==='modify'){
        showParams(opId,opName);
    }else{
        // confirm and execute immediately
        if(!confirm(`Запустить ${opName} для ${findInstName()}?`)) return;
        executeOp({});
    }
}

function findInstName(){
    const i=svcInstances.find(x=>x.instanceUid===selectedInst);
    return i?i.displayName:selectedInst;
}

function showParams(opId,opName){
    selectedOp={opId,opName,svcId:SVC_ID};
    document.getElementById('params-card').style.display='block';
    document.getElementById('stages-box').style.display='none';
    document.getElementById('test-status').textContent='';

    const isCreate=opName==='create';
    const qs=isCreate?'' : `?instanceUid=${selectedInst}`;
    fetch('/api/params/'+opId+qs).then(r=>r.json()).then(data=>{
        const params=data.params||data;
        const form=document.getElementById('params-form');
        const displayNameValue=isCreate?makeCreateDisplayName():'';
        form.innerHTML=(opName==='create'?`<div class="param-row"><label class="req">displayName</label><span style="font-size:12px;color:var(--muted);white-space:nowrap;">${AUTOTEST_PREFIX}</span><input type="text" id="param-displayname" value="${_esc(displayNameValue)}" autocomplete="off"></div>`:'')
            + params.map(p=>{
            const req=p.isRequired;
            const hasDfl=p.defaultValue!==null&&p.defaultValue!==undefined&&p.defaultValue!=='';
            const labelCls=req?(hasDfl?'req':'req-nodfl'):'';
            const dfl=hasDfl?p.defaultValue:(req?'':'');
            const vl=p.valueList;
            const isMap=(p.dataType||'').startsWith('map');
            let input;
            if(vl&&Array.isArray(vl)){
                input=`<select name="p_${p.svcOperationCfsParamId}" data-type="${_esc(p.dataType)}">${vl.map(v=>`<option value="${_esc(v)}" ${v==dfl?'selected':''}>${_esc(v)}</option>`).join('')}</select>`;
            }else if(p.dataType==='boolean'){
                input=`<select name="p_${p.svcOperationCfsParamId}" data-type="boolean"><option value="true" ${dfl==='true'||dfl===true?'selected':''}>true</option><option value="false" ${dfl==='false'||dfl===false?'selected':''}>false</option></select>`;
            }else{
                const dt=isMap?'map':'';
                input=`<input type="text" name="p_${p.svcOperationCfsParamId}" value="${_esc(dfl)}" data-type="${dt}" placeholder="${req&&!hasDfl?'обязательно':''}"${isMap?' onblur="validateJson(this)"':''}>`;
                if(isMap) input+=`<span class="json-err" style="display:none;color:var(--destructive);font-size:10px;margin-left:4px;"></span>`;
            }
            return `<div class="param-row"><label class="${labelCls}">${_esc(p.name)}</label>${input}</div>`;
        }).join('');
        const btn=document.getElementById('btn-test');
        btn.style.display='inline-flex';
        btn.textContent='Запустить';
        btn.onclick=()=>{
            // Проверить ВСЕ map-поля перед отправкой
            let bad=[];
            document.querySelectorAll('#params-form [data-type="map"]').forEach(el=>{
                if(!validateJson(el,true)) bad.push(el);
            });
            if(bad.length>0){
                document.getElementById('test-status').innerHTML=`<span class="badge">Ошибка</span> ${bad.length} полей с невалидным JSON — поправьте и нажмите Запустить снова`;
                return;
            }
            const pp={};
            document.querySelectorAll('#params-form [name^="p_"]').forEach(el=>{
                let v=el.value;
                const dt=el.dataset.type||'';
                if(dt==='array'||dt.startsWith('array')) v=JSON.stringify([v]);
                if(dt==='map'||dt==='map-fixed') v=v||'{}';
                pp[el.name.replace('p_','')]=v;
            });
            executeOp(pp);
        };
    });
}

// === Хелперы ===

function _esc(s){
    /* HTML-экранирование: " → &quot;  & → &amp;  < → &lt; */
    return String(s||'').replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;');
}

function validateJson(el,quiet){
    /* Проверить что значение в поле — валидный JSON.
       quiet=true — не менять внешний вид (для batch-проверки перед отправкой). */
    const errEl=el.parentElement.querySelector('.json-err');
    const v=el.value.trim();
    if(!v) return true;  // пусто — ок
    try{ JSON.parse(v); }
    catch(e){
        if(!quiet&&errEl){ errEl.style.display='inline'; errEl.textContent='Ошибка JSON: '+e.message; }
        el.style.borderColor='var(--destructive)';
        return false;
    }
    if(!quiet&&errEl) errEl.style.display='none';
    el.style.borderColor='';
    return true;
}

function setFinishedState(statusText, statusClass, statusError, statusDuration, instanceName){
    const btn=document.getElementById('btn-test');
    btn.disabled=false;
    btn.textContent='Готово';
    btn.onclick=null;
    const opName=selectedOp?.opName||'операция';
    const durationText=statusDuration!==undefined&&statusDuration!==null?`${statusDuration}s`:'0s';
    const extra=statusError||'';
    const instName=instanceName||findInstName()||selectedInst||'';
    document.getElementById('test-status').innerHTML=` <span class="badge ${statusClass}">${statusText}</span> <span style="color:var(--muted);">${opName}</span> <span style="color:var(--muted);">${durationText}</span> <span style="color:var(--muted);">${instName}</span> ${extra}`;
}

function setRunningState(opName, displayName){
    const btn=document.getElementById('btn-test');
    const title=displayName || opName;
    btn.textContent=opName+'...';
    document.getElementById('test-status').textContent=' ⏳ '+title+' выполняется...';
}

async function executeOp(params){
    stopPoll();
    const isCreate=selectedOp?.opName==='create';
    const displayNameInput=document.getElementById('param-displayname');
    const displayNameSuffix=(displayNameInput?.value||'').trim();
    const displayName=isCreate ? `${AUTOTEST_PREFIX}${displayNameSuffix || makeCreateDisplayName()}` : findInstName();
    document.getElementById('params-card').style.display='block';
    document.getElementById('params-form').innerHTML='';
    const btn=document.getElementById('btn-test');
    btn.style.display='inline-flex';
    btn.textContent=selectedOp.opName+'...';
    btn.disabled=true;
    setRunningState(selectedOp.opName, displayName);
    document.getElementById('stages-box').style.display='block';
    document.getElementById('stages-box').innerHTML='';

    try{
        const r=await fetch('/api/test',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({
            serviceId:SVC_ID,
            operation:selectedOp.opName,
            svcOperationId:selectedOp.opId,
            params,
            instanceUid:selectedInst||'',
            displayName:isCreate ? displayName : ''
        })});
        const d=await r.json();
        if(d.status==='FAIL'){document.getElementById('test-status').innerHTML=` <span class="badge">FAIL</span> ${d.error||''}`;btn.disabled=false;return;}
        // start polling
        const opUid=d.opUid;
        const instanceName=d.displayName||displayName||findInstName();
        pollTimer=setInterval(async()=>{
            const sr=await fetch('/api/test/status/'+opUid);
            const sd=await sr.json();
            showStages(sd.stages||[]);
            if(sd.status!=='RUNNING'){
                stopPoll();
                setFinishedState(sd.status, sd.status==='OK'?'badge-success':'badge', sd.error||sd.errorLog, sd.duration, sd.displayName||instanceName);
                if(sd.status==='OK'){
                    await refreshInstances();
                }
            }
        },2000);
    }catch(e){
        document.getElementById('test-status').textContent=' Ошибка: '+e.message;
        btn.disabled=false;
    }
}

function showStages(stages){
    if(!stages||!stages.length) return;
    let html='<div style="font-size:11px;font-weight:600;color:var(--muted);margin-top:4px;">Этапы</div>';
    stages.forEach(s=>{
        const done=!!s.dtFinish;
        const icon=done?(s.isSuccessful?'✅':'❌'):'⏳';
        html+=`<div style="font-size:11px;padding:2px 0;">${icon} ${s.stage} — ${(s.duration||0).toFixed(1)}s</div>`;
    });
    document.getElementById('stages-box').innerHTML=html;
}

function stopPoll(){
    if(pollTimer){clearInterval(pollTimer);pollTimer=null;}
}

async function refreshInstances(){
    const r=await fetch('/api/operations/'+SVC_ID);
    const d=await r.json();
    const newInsts=d.instances||[];
    svcInstances=newInsts;
    let html='';
    svcInstances.forEach(i=>{
        const status=i.status||i.explainedStatus||'?';
        const sc=status==='running'?'badge-success':'';
        html+=`<div class="inst-item" onclick="toggleInstance('${i.instanceUid}')" data-iuid="${i.instanceUid}">
            <span style="flex:1;">${i.displayName}</span>
            <span class="badge ${sc}" style="font-size:9px;">${status}</span>
        </div>`;
        html+=`<div class="inst-ops" id="ops-${i.instanceUid}"></div>`;
    });
    html+=`<div class="inst-item" style="margin-top:8px;border-top:1px solid var(--brand-gray);padding-top:8px;" onclick="startCreate()">
        <span style="flex:1;color:var(--brand-primary);">+ Создать новый инстанс</span>
    </div>`;
    document.getElementById('inst-list').innerHTML=html;
}

// === Панель логов (скрыта, показывается по кнопке) ===
let logPollTimer=null;
function startLogPoll(){
    if(logPollTimer) return;
    logPollTimer=setInterval(async()=>{
        const el=document.getElementById('log-panel');
        if(!el||el.style.display==='none') return;  // не дёргать если скрыта
        try{
            const r=await fetch('/api/log');
            const lines=await r.json();
            el.innerHTML=lines.map(l=>`<div>${l}</div>`).join('');
            el.scrollTop=el.scrollHeight;
        }catch(e){}
    },2000);
}
function toggleLog(){
    const el=document.getElementById('log-panel');
    if(!el) return;
    if(el.style.display==='none'){ el.style.display='block'; startLogPoll(); }
    else el.style.display='none';
}
startLogPoll();