{{define "backups_escrow"}}
{{template "layout_start" .}}

<!-- Controller-driven escrow ceremony wizard (v0.127.0). R (the recovery code) arrives ONLY via
     the claim XHR and lives ONLY in this page's JS scope — it is never templated server-side,
     never sent anywhere else, and the page + claim response are Cache-Control: no-store. -->

<div class="page-header">
    <div style="display:flex;align-items:center;gap:.5rem">
        <a href="/backups/remote" class="btn btn-sm btn-outline">{{T "backups_escrow.vissza"}}</a>
        <h2>{{T "backups_escrow.helyreallitasi_kod"}}</h2>
    </div>
    <span class="domain-badge">{{.Domain}}</span>
</div>

{{if .EscrowNotReady}}
<!-- R-546: the box cannot run the ceremony yet (the agent's own preflight is not ok — typically the
     first minutes after a bind, before the PBS storage is applied). No checklist of red crosses, no
     start form that would refuse, none of the agent's raw diagnostics: one sentence, and the page
     polls and reloads itself when the agent says ready. -->
<div class="settings-card" id="escrow-not-ready">
    <div class="alert alert-info">{{.EscrowNotReadyMessage}}</div>
    <p class="form-hint">{{T "backups_escrow.ehhez_nem_kell_semmit_tenned"}}</p>
</div>
<script>
(function(){
  function check(){
    fetch('/api/escrow/preflight',{headers:{'Accept':'application/json'}})
      .then(function(r){ return r.json(); })
      .then(function(j){ if(j && j.data && j.data.ok){ window.location.reload(); } })
      .catch(function(){});
  }
  setInterval(check, 20000);
})();
</script>
{{else if not .AgentSupported}}
<div class="alert alert-info">{{T "backups_escrow.a_funkciohoz_az_ugynok_frissitese"}}</div>
{{else}}

<!-- 1. Preflight -->
<div class="settings-card" id="pf-card">
    <h3>{{T "backups_escrow.1_elofeltetelek_ellenorzese"}}</h3>
    <div id="pf-error" class="alert alert-error" style="display:none;margin-bottom:1rem"></div>
    <div id="pf-list"><p class="form-hint">{{T "backups_escrow.ellenorzes_folyamatban"}}</p></div>
</div>

<!-- 2. Warning + 3. Re-auth (revealed when preflight is green) -->
<div class="settings-card" id="warn-card" style="display:none">
    <h3>{{T "backups_escrow.2_fontos_tudnivalok"}}</h3>
    <div class="alert alert-warning" style="margin-bottom:.75rem">
        {{T "backups_escrow.a_helyreallitasi_kod_a_mentesei"}}
    </div>
    {{if .Receremony}}
    <div class="alert alert-info" style="margin-bottom:.75rem">
        {{T "backups_escrow.az_uj_kod_letrehozasaval_a"}}
    </div>
    {{end}}
    <h3 style="margin-top:1.25rem">{{T "backups_escrow.3_megerosites"}}</h3>
    <form id="start-form" onsubmit="return startCeremony(event)">
        <div class="form-group">
            <label for="reauth-password">{{T "backups_escrow.a_folytatashoz_adja_meg_a"}}</label>
            <input type="password" id="reauth-password" class="form-control" autocomplete="current-password" required style="max-width:280px">
        </div>
        <div id="start-error" class="alert alert-error" style="display:none;margin-bottom:.75rem"></div>
        <div class="form-actions">
            <button type="submit" class="btn btn-primary" id="start-btn">{{T "backups_escrow.kod_letrehozasa"}}</button>
            <a href="/backups/remote" class="btn btn-outline">{{T "backups_escrow.megsem"}}</a>
        </div>
    </form>
</div>

<!-- 4. Progress -->
<div class="settings-card" id="progress-card" style="display:none">
    <h3>{{T "backups_escrow.4_letrehozas"}}</h3>
    <p class="form-hint" id="progress-line">{{T "backups_escrow.a_kod_letrehozasa_folyamatban_altalaban"}}</p>
    <div id="progress-error" class="alert alert-error" style="display:none"></div>
</div>

<!-- 5. Reveal + 6. Typed-back + 7. Finish -->
<div class="settings-card" id="reveal-card" style="display:none">
    <h3>{{T "backups_escrow.5_a_helyreallitasi_kod"}}</h3>
    <div id="reveal-gate">
        <p class="form-hint">{{T "backups_escrow.a_kod_pontosan_egyszer_jelenitheto"}}</p>
        <button class="btn btn-primary" id="reveal-btn" onclick="claimCode()">{{T "backups_escrow.kod_megjelenitese"}}</button>
        <div id="reveal-error" class="alert alert-error" style="display:none;margin-top:.75rem"></div>
    </div>
    <div id="reveal-shown" style="display:none">
        <div class="alert alert-warning" style="margin-bottom:.5rem">{{T "backups_escrow.ez_mostantol_az_elo_helyreallitasi"}}</div>
        <pre class="mono" id="code-block" style="white-space:pre-wrap;word-break:break-all;background:var(--bg-0);border:1px solid var(--line);border-radius:var(--radius);padding:1rem;font-size:1.05rem"></pre>
        <button type="button" class="btn btn-ghost btn-sm" id="code-blur-toggle" onclick="toggleCodeBlur()">{{T "backups_escrow.elrejtes"}}</button>
        <h3 style="margin-top:1.25rem">{{T "backups_escrow.6_ellenorzes"}}</h3>
        <div class="form-group">
            <label id="verify-label" for="verify-w1">{{T "backups_escrow.megerosites_irja_be_a_kod"}}</label>
            <div style="display:flex;gap:.5rem">
                <input type="text" id="verify-w1" class="form-control" autocomplete="off" style="max-width:180px">
                <input type="text" id="verify-w2" class="form-control" autocomplete="off" style="max-width:180px">
            </div>
            <div id="verify-error" class="alert alert-error" style="display:none;margin-top:.5rem">{{T "backups_escrow.a_megadott_szavak_nem_egyeznek"}}</div>
        </div>
        <button class="btn btn-sm" id="verify-btn" onclick="verifyWords()">{{T "backups_escrow.szavak_ellenorzese"}}</button>
        <div id="finish-block" style="display:none;margin-top:1rem">
            <h3>{{T "backups_escrow.7_befejezes"}}</h3>
            {{/* v0.138.0: the "what happens next" note — the wizard finishes to /backups/remote,
                 where the interim "awaiting hub confirmation" card shows until the flip. Setting
                 expectations here avoids surprise at that card. */}}
            <div class="alert alert-info" style="margin-bottom:.75rem">
                {{T "backups_escrow.mi_tortenik_ezutan_a_helyreallitasi"}}
            </div>
            <label class="toggle" style="margin-bottom:.75rem">
                <input type="checkbox" id="finish-check" onchange="document.getElementById('finish-btn').disabled=!this.checked">
                <span class="toggle-label">{{T "backups_escrow.felirtam_a_kodot_es_biztonsagos"}}</span>
            </label>
            <div><button class="btn btn-primary" id="finish-btn" disabled onclick="finishWizard()">{{T "backups_escrow.befejezes"}}</button></div>
        </div>
    </div>
</div>

<!-- Void / unclaimed state -->
<div class="settings-card" id="void-card" style="display:none">
    <div class="alert alert-warning">{{T "backups_escrow.a_kod_letrejott_de_nem"}}</div>
    <a href="/backup/escrow" class="btn btn-sm btn-primary">{{T "backups_escrow.ujrainditas"}}</a>
</div>

<script>
function esc(s){ return String(s==null?'':s).replace(/[&<>"]/g,function(c){return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c];}); }

// Hungarian labels for the agent preflight row ids.
var PF_LABELS = {
  pbs_storage_id: '{{T "backups_escrow.mentesi_tarolo_pbs_beallitva"}}',
  dr_tier:        '{{T "backups_escrow.helyreallitasi_dr_szint_aktiv"}}',
  age_binary:     '{{T "backups_escrow.titkosito_eszkoz_telepitve"}}',
  hub_upload:     '{{T "backups_escrow.kozponti_feltoltes_beallitva"}}',
  staged_secret:  '{{T "backups_escrow.tavoli_mentes_jelszava_elokeszitve"}}',
  sudo_grant:     '{{T "backups_escrow.rendszerjogosultsag_engedelyezve"}}'
};

// Hungarian DETAIL mapping (v0.127.1): the agent's `detail` strings are operator-English by
// design — presentation is the controller's job. OK rows keep only VALUE-bearing details
// (storage id / binary path); boolean-OK rows render no detail at all. Not-OK rows get the
// Hungarian explanation; unknown/future ids fall back to the raw detail (never blank a failure).
var PF_FAIL_DETAILS = {
  pbs_storage_id: '{{T "backups_escrow.nincs_beallitva_mentesi_tarolo"}}',
  age_binary:     '{{T "backups_escrow.a_titkosito_eszkoz_age_nem"}}',
  dr_tier:        '{{T "backups_escrow.a_dr_szint_nincs_alkalmazva"}}',
  hub_upload:     '{{T "backups_escrow.a_kozponti_feltoltes_nincs_beallitva"}}',
  sudo_grant:     '{{T "backups_escrow.a_rendszerjogosultsag_hianyzik_az_ugynok"}}',
  staged_secret:  '{{T "backups_escrow.nincs_elokeszitett_jelszo_a_varazslo"}}'
};
function pfDetail(it){
  if(it.ok){
    if(it.id==='pbs_storage_id' || it.id==='age_binary'){ return it.detail||''; } // the VALUE
    if(it.id==='staged_secret'){ return '{{T "backups_escrow.elokeszitve"}}'; }
    return ''; // dr_tier / hub_upload / sudo_grant: the check mark + label is complete
  }
  return PF_FAIL_DETAILS[it.id] || (it.detail||'');
}

async function loadPreflight(){
  try{
    var r = await fetch('/api/escrow/preflight'); var j = await r.json();
    if(!j.ok && !j.data){ throw new Error(j.error||'{{T "backups_escrow.hiba"}}'); }
    var d = j.data||{};
    var html='<ul style="list-style:none;padding:0;margin:0">';
    (d.items||[]).forEach(function(it){
      // staged_secret is informational: the controller re-stages before every run when offsite is
      // configured, so a red row there would be noise — render it neutral when not ok.
      var informational = it.id==='staged_secret';
      var mark = it.ok ? '<span style="color:var(--blue-bright)">&#10003;</span>'
               : (informational ? '<span style="color:var(--text-3)">&#8226;</span>'
                                : '<span style="color:var(--crit)">&#10007;</span>');
      var det = pfDetail(it);
      var line = mark+' '+esc(PF_LABELS[it.id]||it.id);
      if(det){ line += ' <span class="form-hint">— '+esc(det)+'</span>'; }
      // On failure keep the agent's raw detail as a muted diagnostic (English acceptable there) —
      // unless the fallback above already IS the raw detail (unknown id).
      if(!it.ok && it.detail && det!==it.detail){ line += ' <span class="form-hint" style="color:var(--text-3)">('+esc(it.detail)+')</span>'; }
      html+='<li style="padding:.35rem 0;border-bottom:1px solid var(--line-soft)">'+line+'</li>';
    });
    if(!d.agent_supported){
      html+='<li style="padding:.35rem 0"><span style="color:var(--crit)">&#10007;</span> {{T "backups_escrow.a_funkciohoz_az_ugynok_frissitese_2"}}</li>';
    }
    html+='</ul>';
    document.getElementById('pf-list').innerHTML=html;
    if(d.ok){
      document.getElementById('warn-card').style.display='block';
    } else {
      document.getElementById('pf-list').insertAdjacentHTML('beforeend',
        '<p class="form-hint" style="margin-top:.75rem">{{T "backups_escrow.a_folyamat_a_piros_feltetelek"}}</p>');
    }
  }catch(e){
    var el=document.getElementById('pf-error'); el.style.display='block';
    el.textContent='{{T "backups_escrow.az_elofeltetelek_ellenorzese_nem_sikerul"}} '+e.message;
  }
}

async function startCeremony(ev){
  ev.preventDefault();
  var btn=document.getElementById('start-btn'); btn.disabled=true;
  var errEl=document.getElementById('start-error'); errEl.style.display='none';
  try{
    var body=new URLSearchParams({password:document.getElementById('reauth-password').value});
    var r=await fetch('/api/escrow/start',{method:'POST',
      headers:Object.assign({'Content-Type':'application/x-www-form-urlencoded'},csrfHeaders()),body:body});
    var j=await r.json();
    if(!j.ok){ errEl.textContent=j.error||'{{T "backups_escrow.a_folyamat_inditasa_nem_sikerult"}}'; errEl.style.display='block'; btn.disabled=false; return false; }
    document.getElementById('reauth-password').value='';
    document.getElementById('warn-card').style.display='none';
    document.getElementById('progress-card').style.display='block';
    pollStatus();
  }catch(e){ errEl.textContent='{{T "backups_escrow.hiba_2"}} '+e.message; errEl.style.display='block'; btn.disabled=false; }
  return false;
}

var pollTimer=null;
function pollStatus(){
  pollTimer=setInterval(async function(){
    try{
      var r=await fetch('/api/escrow/status'); var j=await r.json();
      var d=(j&&j.data)||{};
      if(d.phase==='done'){
        clearInterval(pollTimer);
        document.getElementById('progress-card').style.display='none';
        if(d.claimable){ document.getElementById('reveal-card').style.display='block'; }
        else { document.getElementById('void-card').style.display='block'; }
      } else if(d.phase==='failed'){
        clearInterval(pollTimer);
        var el=document.getElementById('progress-error'); el.style.display='block';
        el.textContent='{{T "backups_escrow.a_letrehozas_nem_sikerult"}}'+(d.detail?(' {{T "backups_escrow.reszletek"}} '+d.detail):'');
      } else if(d.phase==='unclaimed_void' || d.phase==='none'){
        clearInterval(pollTimer);
        document.getElementById('progress-card').style.display='none';
        document.getElementById('void-card').style.display='block';
      }
    }catch(e){ /* transient poll error — keep polling */ }
  }, 2000);
}

// The claimed code lives ONLY in this closure variable + the #code-block textContent, until
// finishWizard() clears both. It never leaves the page's JS scope.
var claimedR='';
var verifyIdx=[0,0];

async function claimCode(){
  var btn=document.getElementById('reveal-btn'); btn.disabled=true;
  var errEl=document.getElementById('reveal-error'); errEl.style.display='none';
  try{
    var r=await fetch('/api/escrow/claim',{method:'POST',headers:csrfHeaders()});
    var j=await r.json();
    if(r.status===410){ document.getElementById('reveal-card').style.display='none'; document.getElementById('void-card').style.display='block'; return; }
    if(!j.ok || !j.data || !j.data.recovery_code){ errEl.textContent=j.error||'{{T "backups_escrow.a_kod_lekerese_nem_sikerult"}}'; errEl.style.display='block'; btn.disabled=false; return; }
    claimedR=j.data.recovery_code;
    // Typed-back positions FIRST (v0.127.1: the rendering below highlights them): two random
    // distinct 1-based word positions of the dash-separated code.
    var words=claimedR.split('-');
    var n=words.length;
    var a=1+Math.floor(Math.random()*n), b=1+Math.floor(Math.random()*n);
    while(b===a){ b=1+Math.floor(Math.random()*n); }
    verifyIdx=[Math.min(a,b),Math.max(a,b)];
    // Span-per-word DOM build — createElement + textContent + createTextNode ONLY. R never flows
    // through innerHTML/insertAdjacentHTML: with no HTML parse context there is no injection
    // surface, the same guarantee the old single textContent assignment gave. The two words the
    // customer must type back get the warn highlight so they can be found on paper too.
    var block=document.getElementById('code-block');
    block.textContent='';
    words.forEach(function(w,i){
      if(i>0){ block.appendChild(document.createTextNode('-')); }
      var sp=document.createElement('span');
      sp.textContent=w;
      if(i+1===verifyIdx[0] || i+1===verifyIdx[1]){ sp.style.color='var(--warn)'; sp.style.fontWeight='600'; }
      block.appendChild(sp);
    });
    document.getElementById('reveal-gate').style.display='none';
    document.getElementById('reveal-shown').style.display='block';
    document.getElementById('verify-label').textContent='{{T "backups_escrow.megerosites_irja_be_a_kod_2"}} '+verifyIdx[0]+'{{T "backups_escrow.es"}} '+verifyIdx[1]+'{{T "backups_escrow.szavat"}}';
  }catch(e){ errEl.textContent='{{T "backups_escrow.hiba_2"}} '+e.message; errEl.style.display='block'; btn.disabled=false; }
}

// Manual hide toggle (v0.127.2 — Viktor's live finding reversed the v0.127.1 auto-blur: blurring
// the code the moment a verification input gets focus made typing the words HARDER, since most
// customers type from the screen. The code now stays visible; "Elrejtés" is offered from the
// reveal onward for when hiding is wanted, e.g. a screen share). R stays in the JS closure;
// the blur is pure presentation.
var codeBlurred=false;
function setCodeBlur(on){
  codeBlurred=on;
  document.getElementById('code-block').style.filter=on?'blur(6px)':'';
  document.getElementById('code-blur-toggle').textContent=on?'{{T "backups_escrow.megjelenites"}}':'{{T "backups_escrow.elrejtes"}}';
}
function toggleCodeBlur(){ setCodeBlur(!codeBlurred); }

function verifyWords(){
  var words=claimedR.split('-');
  var w1=(document.getElementById('verify-w1').value||'').trim().toLowerCase();
  var w2=(document.getElementById('verify-w2').value||'').trim().toLowerCase();
  var ok = w1===words[verifyIdx[0]-1] && w2===words[verifyIdx[1]-1];
  document.getElementById('verify-error').style.display=ok?'none':'block';
  if(ok){ document.getElementById('finish-block').style.display='block'; }
}

function finishWizard(){
  // Drop every copy of the code this page holds, then leave. (Assigning textContent replaces ALL
  // child nodes with one empty text node — the per-word spans are removed with it, verified.)
  claimedR='';
  document.getElementById('code-block').textContent='';
  window.location='/backups/remote';
}

loadPreflight();
</script>

{{end}}
{{template "layout_end" .}}
{{end}}