{{define "title"}}{{.Title}}{{end}}

{{define "content"}}
{{template "host_chrome" .}}
{{$page := .Page}}
{{$host := $page.Host}}
<div class="max-w-[1280px] mx-auto px-8 pt-6 pb-14">

  <div class="flex items-baseline justify-between mb-4">
    <div>
      <h2 class="text-[19px] font-medium tracking-[-0.005em]">Restore from snapshot</h2>
      <div class="text-[12.5px] text-ink-mute mt-1">
        Pick a snapshot, choose paths, decide where files go, then dispatch.
        Live progress streams to a job page once you start.
      </div>
    </div>
    <div class="flex gap-2">
      <a href="/hosts/{{$host.ID}}" class="btn">Cancel</a>
    </div>
  </div>

  {{if $page.Error}}
    <div class="rounded-[6px] px-3.5 py-3 text-[13px] mb-4"
         style="border: 1px solid color-mix(in oklch, var(--bad), transparent 60%); background: color-mix(in oklch, var(--bad), transparent 92%);">
      {{$page.Error}}
    </div>
  {{end}}

  <form method="post" action="/hosts/{{$host.ID}}/restore" id="restore-form" class="space-y-4">

    {{/* ============ STEP 1 — snapshot picker ============ */}}
    <section class="rounded-[8px] border border-line-soft bg-panel overflow-hidden">
      <header class="flex items-center justify-between px-[18px] py-[14px] border-b border-line-soft"
              style="background: color-mix(in oklch, var(--panel), var(--panel-hi) 30%);">
        <div class="flex items-center gap-3">
          {{if $page.Selected}}
            <span class="inline-flex items-center justify-center w-[22px] h-[22px] rounded-full mono text-[11px] font-medium"
                  style="background: color-mix(in oklch, var(--ok), transparent 86%); color: var(--ok); border: 1px solid color-mix(in oklch, var(--ok), transparent 60%);">✓</span>
          {{else}}
            <span class="inline-flex items-center justify-center w-[22px] h-[22px] rounded-full mono text-[11px] font-medium"
                  style="background: color-mix(in oklch, var(--accent), transparent 84%); color: var(--accent); border: 1px solid color-mix(in oklch, var(--accent), transparent 50%);">1</span>
          {{end}}
          <div>
            <div class="text-[14px] font-medium">Snapshot</div>
            <div class="text-[12px] text-ink-mute mt-0.5">Pick the point-in-time you want to restore from.</div>
          </div>
        </div>
        <span class="mono text-[11px] text-ink-fade">step 1 of 4</span>
      </header>
      <div class="p-[18px]">
        {{if $page.Selected}}
          {{/* selected summary card */}}
          <div class="grid items-center gap-4 px-3.5 py-3 rounded-[6px] bg-bg border border-line-soft"
               style="grid-template-columns: auto 1fr auto auto;">
            <span class="mono text-[12px] text-accent">{{$page.Selected.ShortID}}</span>
            <div>
              <div class="text-[13px] text-ink">{{$page.Selected.Time.Format "2006-01-02 15:04 MST"}} <span class="text-ink-fade mx-2">·</span><span class="text-ink-mute">{{relTime $page.Selected.Time}}</span></div>
              <div class="mt-1 text-[12px] text-ink-mute">
                {{range $page.Selected.Tags}}<span class="tag mr-1.5">{{.}}</span>{{end}}
                paths:
                {{range $i, $p := $page.Selected.Paths}}{{if $i}}, {{end}}<span class="mono text-ink-mid">{{$p}}</span>{{end}}
                {{if $page.Selected.SizeBytes}} · {{bytes $page.Selected.SizeBytes}}{{end}}
              </div>
            </div>
            <span class="text-ink-fade text-[12px]">picked from {{len $page.Snapshots}} snapshots</span>
            <a href="/hosts/{{$host.ID}}/restore" class="btn">Change</a>
          </div>
          <input type="hidden" name="snapshot_id" value="{{$page.Selected.ID}}" />
        {{else}}
          {{/* full picker table */}}
          <div class="rounded-[6px] border border-line-soft bg-bg overflow-hidden">
            <div class="snap-row head">
              <div>Time</div>
              <div>Tag</div>
              <div>Paths</div>
              <div>Size</div>
              <div>Snapshot ID</div>
              <div></div>
            </div>
            {{if not $page.Snapshots}}
              <div class="px-4 py-8 text-center text-ink-mute text-[13px]">No snapshots yet. Run a backup first.</div>
            {{end}}
            {{range $page.Snapshots}}
              <a href="/hosts/{{$host.ID}}/snapshots/{{.ID}}/restore" class="snap-row" style="text-decoration: none; color: inherit;">
                <div class="mono text-ink-mid">{{relTime .Time}}</div>
                <div>{{range .Tags}}<span class="tag">{{.}}</span>{{end}}</div>
                <div class="text-ink-mute" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                  {{range $i, $p := .Paths}}{{if $i}}, {{end}}<span class="mono text-ink-mid">{{$p}}</span>{{end}}
                </div>
                <div class="mono text-ink-mid">{{if .SizeBytes}}{{bytes .SizeBytes}}{{else}}—{{end}}</div>
                <div class="mono text-ink-mid">{{.ShortID}}</div>
                <div></div>
              </a>
            {{end}}
          </div>
        {{end}}
      </div>
    </section>

    {{/* ============ STEP 2 — paths (tree browser) ============ */}}
    <section class="rounded-[8px] border border-line-soft bg-panel overflow-hidden {{if not $page.Selected}}opacity-40 pointer-events-none{{end}}">
      <header class="flex items-center justify-between px-[18px] py-[14px] border-b border-line-soft"
              style="background: color-mix(in oklch, var(--panel), var(--panel-hi) 30%);">
        <div class="flex items-center gap-3">
          <span class="inline-flex items-center justify-center w-[22px] h-[22px] rounded-full mono text-[11px] font-medium"
                style="{{if $page.Selected}}background: color-mix(in oklch, var(--accent), transparent 84%); color: var(--accent); border: 1px solid color-mix(in oklch, var(--accent), transparent 50%);{{else}}background: var(--bg); color: var(--ink-mute); border: 1px solid var(--line);{{end}}">2</span>
          <div>
            <div class="text-[14px] font-medium">Paths</div>
            <div class="text-[12px] text-ink-mute mt-0.5">Tick files and directories to restore. Folders restore recursively.</div>
          </div>
        </div>
        <span class="mono text-[11px] text-ink-fade">step 2 of 4</span>
      </header>
      <div class="p-[18px]">
        {{if $page.Selected}}
          <div class="rounded-[6px] border border-line-soft bg-bg overflow-hidden p-2">
            {{/* Root tree node — fetched on first wizard render; child
                 expansions reuse the same tree.list cache server-side. */}}
            <div id="tree-root">
              <div class="text-ink-mute text-[12.5px] mono px-3 py-2">loading…</div>
            </div>
          </div>
          <script>
            (function() {
              fetch('/hosts/{{$host.ID}}/restore/tree?snapshot={{$page.Selected.ID}}&path=/', { credentials: 'same-origin' })
                .then(function(r) { return r.text(); })
                .then(function(html) {
                  document.getElementById('tree-root').innerHTML = html;
                  document.body.dispatchEvent(new CustomEvent('tree:loaded'));
                });
            })();
          </script>
          <div class="mt-3 px-3.5 py-2.5 rounded-[6px] text-[12.5px]"
               style="border: 1px solid color-mix(in oklch, var(--accent), transparent 70%); background: color-mix(in oklch, var(--accent), transparent 92%);">
            <span class="text-accent" id="tally-count">0 files selected</span>
            <span class="text-ink-fade mx-2">·</span>
            <span class="text-ink-mute mono" id="tally-paths">tick a file or directory above</span>
          </div>
        {{else}}
          <div class="text-ink-mute text-[13px]">Pick a snapshot above to load its paths.</div>
        {{end}}
      </div>
    </section>

    {{/* ============ STEP 3 — target ============ */}}
    <section class="rounded-[8px] border border-line-soft bg-panel overflow-hidden {{if not $page.Selected}}opacity-40 pointer-events-none{{end}}">
      <header class="flex items-center justify-between px-[18px] py-[14px] border-b border-line-soft"
              style="background: color-mix(in oklch, var(--panel), var(--panel-hi) 30%);">
        <div class="flex items-center gap-3">
          <span class="inline-flex items-center justify-center w-[22px] h-[22px] rounded-full mono text-[11px] font-medium"
                style="background: color-mix(in oklch, var(--accent), transparent 84%); color: var(--accent); border: 1px solid color-mix(in oklch, var(--accent), transparent 50%);">3</span>
          <div>
            <div class="text-[14px] font-medium">Target</div>
            <div class="text-[12px] text-ink-mute mt-0.5">Where should the files land? Defaults to a fresh, isolated directory.</div>
          </div>
        </div>
        <span class="mono text-[11px] text-ink-fade">step 3 of 4</span>
      </header>
      <div class="p-[18px]">
        <div class="grid grid-cols-2 gap-3.5">
          <label class="block rounded-[7px] p-4 cursor-pointer transition border target-card-new"
                 id="target-new-card"
                 style="border-color: color-mix(in oklch, var(--accent), transparent 50%); background: color-mix(in oklch, var(--accent), transparent 95%);">
            <div class="flex items-start gap-3">
              <input type="radio" name="target_mode" value="new_dir" class="mt-1" {{if not $page.FormInPlace}}checked{{end}} />
              <div class="flex-1">
                <div class="text-[14px] font-medium text-ink">New directory</div>
                <div class="text-[12px] text-ink-mute mt-1 leading-[1.55]">
                  Files restore into a fresh path on the host. Original files untouched.
                  Restored as the agent user — original uid/gid is dropped (restic ≥ 0.17;
                  older versions preserve it).
                </div>
                <div class="mt-3 flex items-center gap-2.5">
                  <span class="text-ink-fade mono text-[12px]">→</span>
                  <input type="text" name="target_dir" id="target-dir-input"
                         class="field mono text-[12px] flex-1"
                         value="{{if $page.FormTargetDir}}{{$page.FormTargetDir}}{{else}}{{$page.DefaultTargetDir}}{{end}}"
                         placeholder="/root/rm-restore/&lt;job-id&gt;/" />
                </div>
                <div class="text-[11.5px] text-ink-fade mt-1.5">
                  Edit if you want a specific directory
                  (<span class="mono">&lt;job-id&gt;</span> is substituted).
                </div>
              </div>
            </div>
          </label>

          <label class="block rounded-[7px] p-4 cursor-pointer transition border target-card-inplace"
                 id="target-inplace-card"
                 style="border-color: color-mix(in oklch, var(--bad), transparent 70%); background: color-mix(in oklch, var(--bad), transparent 96%);">
            <div class="flex items-start gap-3">
              <input type="radio" name="target_mode" value="in_place" class="mt-1" {{if $page.FormInPlace}}checked{{end}} />
              <div class="flex-1">
                <div class="text-[14px] font-medium">
                  <span class="text-bad">In place</span>
                  <span class="text-ink-mute font-normal">— overwrite original paths</span>
                </div>
                <div class="text-[12px] text-ink-mute mt-1 leading-[1.55]">
                  Files replace whatever is at their original paths.
                  Original ownership and permissions are preserved.
                  <span class="text-bad">Destructive — cannot be undone.</span>
                </div>
                <div class="mt-3 px-3 py-3 rounded-[5px]"
                     style="background: color-mix(in oklch, var(--bad), transparent 92%); border: 1px solid color-mix(in oklch, var(--bad), transparent 60%);">
                  <div class="text-[11px] text-bad uppercase tracking-[0.08em] font-medium">Confirm host name</div>
                  <div class="text-[11.5px] text-ink-mute mt-1 leading-[1.55]">
                    Type <span class="mono text-ink">{{$host.Name}}</span> to enable this option.
                  </div>
                  <input type="text" name="confirm_hostname" class="field mono mt-2"
                         placeholder="{{$host.Name}}"
                         value="{{$page.FormConfirmHN}}" />
                </div>
              </div>
            </div>
          </label>
        </div>
      </div>
    </section>

    {{/* ============ STEP 4 — confirm ============ */}}
    <section class="rounded-[8px] border border-line-soft bg-panel overflow-hidden {{if not $page.Selected}}opacity-40 pointer-events-none{{end}}">
      <header class="flex items-center justify-between px-[18px] py-[14px]"
              style="background: color-mix(in oklch, var(--panel), var(--panel-hi) 30%);">
        <div class="flex items-center gap-3">
          <span class="inline-flex items-center justify-center w-[22px] h-[22px] rounded-full mono text-[11px] font-medium"
                style="background: color-mix(in oklch, var(--accent), transparent 84%); color: var(--accent); border: 1px solid color-mix(in oklch, var(--accent), transparent 50%);">4</span>
          <div>
            <div class="text-[14px] font-medium">Confirm &amp; start</div>
            <div class="text-[12px] text-ink-mute mt-0.5">Final review. Logs and progress will stream live.</div>
          </div>
        </div>
        <span class="mono text-[11px] text-ink-fade">step 4 of 4</span>
      </header>
      <div class="px-[18px] pb-[18px]" id="confirm-summary">
        <div class="text-[12px] text-ink-mute py-2">A summary will appear here once you've made your selections.</div>
      </div>
    </section>

    {{/* sticky-style action bar */}}
    <div class="rounded-[8px] border border-line-soft px-[18px] py-[14px] flex items-center justify-between"
         style="background: color-mix(in oklch, var(--panel), var(--panel-hi) 30%);">
      <div class="text-[12.5px] text-ink-mute">
        Audit row <span class="mono text-ink-mid">host.restore</span> will be written on dispatch.
      </div>
      <div class="flex items-center gap-2.5">
        <a href="/hosts/{{$host.ID}}" class="btn">Back</a>
        <button type="submit" id="dispatch-btn" class="btn btn-primary btn-lg" {{if not $page.Online}}disabled title="agent is offline"{{end}}>
          Start restore →
        </button>
      </div>
    </div>
  </form>
</div>

{{/* Lightweight JS to drive the live tally + summary card + tree toggle.
     The tree-toggle is plain fetch (not HTMX) so its target lookup is
     trivial — the .tree-children div is always the next sibling
     inside the same .tree-pair wrapper. */}}
<script>
window.__rmTreeToggle = function(btn) {
  var pair = btn.closest('.tree-pair');
  if (!pair) return;
  var kids = pair.querySelector(':scope > .tree-children');
  if (!kids) return;
  var loaded = btn.getAttribute('data-loaded') === 'true';
  if (!loaded) {
    var url = btn.getAttribute('data-tree-url');
    btn.disabled = true;
    fetch(url, { credentials: 'same-origin' })
      .then(function(r) { return r.text(); })
      .then(function(html) {
        kids.innerHTML = html;
        kids.classList.remove('hidden');
        btn.textContent = '▾';
        btn.setAttribute('data-loaded', 'true');
        btn.disabled = false;
        // Notify the wizard's recompute() that tally state may have changed.
        document.body.dispatchEvent(new CustomEvent('tree:loaded'));
      })
      .catch(function(e) {
        kids.innerHTML = '<div class="px-3 py-2 mono text-[12px] text-bad">load failed: ' + e + '</div>';
        kids.classList.remove('hidden');
        btn.textContent = '▾';
        btn.disabled = false;
      });
    return;
  }
  kids.classList.toggle('hidden');
  btn.textContent = kids.classList.contains('hidden') ? '▸' : '▾';
};
(function() {
  const form = document.getElementById('restore-form');
  if (!form) return;
  const tallyCount = document.getElementById('tally-count');
  const tallyPaths = document.getElementById('tally-paths');
  const dispatchBtn = document.getElementById('dispatch-btn');
  const summary = document.getElementById('confirm-summary');
  const inplaceRadio = document.querySelector('input[name="target_mode"][value="in_place"]');
  const newRadio = document.querySelector('input[name="target_mode"][value="new_dir"]');
  const newCard = document.getElementById('target-new-card');
  const inplaceCard = document.getElementById('target-inplace-card');
  const confirmInput = document.querySelector('input[name="confirm_hostname"]');
  const hostName = {{$host.Name | js}};
  const defaultTarget = {{$page.DefaultTargetDir | js}};
  const selectedSnapID = {{if $page.Selected}}{{$page.Selected.ShortID | js}}{{else}}""{{end}};
  const selectedSnapTime = {{if $page.Selected}}{{$page.Selected.Time.Format "2006-01-02 15:04 MST" | js}}{{else}}""{{end}};

  function getCheckedPaths() {
    return Array.from(form.querySelectorAll('input[name="paths"]:checked')).map(i => i.value);
  }
  function recompute() {
    const paths = getCheckedPaths();
    const count = paths.length;
    if (tallyCount) tallyCount.textContent = count + ' file' + (count === 1 ? '' : 's') + ' selected';
    if (tallyPaths) {
      tallyPaths.textContent = count === 0 ? 'tick a file or directory above'
        : paths.slice(0, 4).join(' · ') + (count > 4 ? ' …' : '');
    }
    // Card emphasis on radio change
    if (newCard && inplaceCard && inplaceRadio && newRadio) {
      const isInPlace = inplaceRadio.checked;
      newCard.style.borderColor   = isInPlace ? 'var(--line-soft)' : 'color-mix(in oklch, var(--accent), transparent 50%)';
      newCard.style.background    = isInPlace ? 'var(--bg)'        : 'color-mix(in oklch, var(--accent), transparent 95%)';
      inplaceCard.style.borderColor = isInPlace ? 'color-mix(in oklch, var(--bad), transparent 35%)' : 'color-mix(in oklch, var(--bad), transparent 70%)';
      inplaceCard.style.background  = isInPlace ? 'color-mix(in oklch, var(--bad), transparent 90%)' : 'color-mix(in oklch, var(--bad), transparent 96%)';
    }
    // Dispatch button state
    if (dispatchBtn) {
      const inPlace = inplaceRadio && inplaceRadio.checked;
      const okConfirm = !inPlace || (confirmInput && confirmInput.value.trim() === hostName);
      const enabled = count > 0 && okConfirm;
      dispatchBtn.disabled = !enabled || !{{if $page.Online}}true{{else}}false{{end}};
      dispatchBtn.textContent = inPlace ? 'Start restore (overwrite) →' : 'Start restore →';
      if (inPlace) dispatchBtn.classList.add('btn-danger'); else dispatchBtn.classList.remove('btn-danger');
    }
    // Summary card
    if (summary) {
      if (count === 0) {
        summary.innerHTML = '<div class="text-[12px] text-ink-mute py-2">A summary will appear here once you\'ve made your selections.</div>';
      } else {
        const inPlace = inplaceRadio && inplaceRadio.checked;
        const escTarget = defaultTarget
          .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
        const targetLine = inPlace
          ? '<span class="text-bad">in place · originals will be overwritten</span>'
          : '<span class="text-ink">New directory</span> <span class="text-ink-fade mx-2">·</span> <span class="mono text-ink-mid">' + escTarget + '</span>';
        const ownLine = 'preserved (uid/gid/mode/mtime)';
        const pathLines = paths.slice(0, 12).map(p => '<div>' + p + '</div>').join('');
        const more = paths.length > 12 ? ('<div class="text-ink-fade">… and ' + (paths.length - 12) + ' more</div>') : '';
        summary.innerHTML = `
          <div class="rounded-[6px] border border-line-soft p-3.5 bg-bg">
            <div class="grid gap-y-2.5" style="grid-template-columns: 140px 1fr; column-gap: 18px; font-size: 13px;">
              <span class="text-[11px] text-ink-fade uppercase tracking-[0.08em] pt-0.5">Source</span>
              <div>snapshot <span class="mono text-accent">${selectedSnapID}</span> · <span class="text-ink-mid">${selectedSnapTime}</span></div>
              <span class="text-[11px] text-ink-fade uppercase tracking-[0.08em] pt-0.5">Paths</span>
              <div>
                <span class="text-ink">${count} file${count === 1 ? '' : 's'}</span>
                <div class="mono text-[11.5px] text-ink-mute mt-1.5 leading-[1.7]">${pathLines}${more}</div>
              </div>
              <span class="text-[11px] text-ink-fade uppercase tracking-[0.08em] pt-0.5">Target</span>
              <div>${targetLine}</div>
              <span class="text-[11px] text-ink-fade uppercase tracking-[0.08em] pt-0.5">Ownership</span>
              <div class="text-ink-mute">${ownLine}</div>
            </div>
          </div>
        `;
      }
    }
  }
  // Recompute on any change in the form (path checks, radio swap, typed-confirm).
  form.addEventListener('change', recompute);
  form.addEventListener('input', recompute);
  // Also after HTMX swaps in tree fragments (so initial state is right).
  document.body.addEventListener('htmx:afterSwap', recompute);
  recompute();
})();
</script>

{{end}}