// IDE Remote: the Terminal view (xterm.js). Classic script: window.IdeRemoteViews.terminal = {mount(container)}.
// Needs vendor/xterm/xterm.js + addon-fit.js + xterm.css and vendor/ide-md.js (the el helper) loaded before.
// Payloads as the IDE's ide/ui/js/terminal.js: terminal.output {id, data: base64}, terminal.exit {id},
// invoke terminal.open {cols, rows} -> {id, pty, shell}, terminal.write {id, data: string}, terminal.resize {id, cols, rows}, terminal.close {id}.
(function (root, factory) {
  const api = factory(root);
  if (typeof module === 'object' && module.exports) module.exports = api;
  else {
    (root.IdeRemoteViews = root.IdeRemoteViews || {}).terminal = { mount: api.mount, pure: api.pure };
    if (root.document && root.document.getElementById) api.boot('terminal', api.mount, ['vendor/ide-md.js', 'vendor/xterm/xterm.css', 'vendor/xterm/xterm.js', 'vendor/xterm/addon-fit.js']);
  }
})(typeof window !== 'undefined' ? window : globalThis, function (root) {
  // Texts: the page's table (config/lang.yaml, 14 languages) through IdeRemote.t; the English given here is the fallback (and what tests see).
  const L = (key, en, vars) => (root.IdeRemote && root.IdeRemote.t ? root.IdeRemote.t(key, vars, en) : String(en).replace(/\{(\w+)\}/g, (m, k) => (vars && k in vars ? vars[k] : m)));
  const errText = (e) => (root.IdeRemote && root.IdeRemote.errorText ? root.IdeRemote.errorText(e) : (e && e.message) || String(e));
  // ---------------------------------------------------------------- pure part
  /** base64 (as the IDE sends terminal output: raw bytes) -> Uint8Array. Tolerates url-safe base64 and missing padding. */
  function decode(b64) {
    const s = String(b64 || '').replace(/-/g, '+').replace(/_/g, '/').replace(/\s+/g, '');
    const bin = atob(s + '='.repeat((4 - (s.length % 4)) % 4));
    const out = new Uint8Array(bin.length);
    for (let i = 0; i < bin.length; i++) out[i] = bin.charCodeAt(i);
    return out;
  }

  /** What a message of the host means for the terminals: {kind:'output'|'snap'|'exit', id, bytes?, cols?, rows?} or null. */
  function interpret(type, msg) {
    if (!msg || typeof msg !== 'object') return null;
    if (type === 'snap') {
      if (msg.panel !== 'terminal' || msg.id === undefined || msg.id === null) return null;
      return { kind: 'snap', id: msg.id, bytes: decode(msg.data), cols: msg.cols || 0, rows: msg.rows || 0 };
    }
    if (type === 'terminal.output') return msg.id === undefined ? null : { kind: 'output', id: msg.id, bytes: decode(msg.data) };
    if (type === 'terminal.exit') return msg.id === undefined ? null : { kind: 'exit', id: msg.id };
    return null;
  }

  /** What a key of the bar sends; `ctrl` (sticky) turns a letter into its control code. */
  const KEYS = { Esc: '\x1b', Tab: '\t', Up: '\x1b[A', Down: '\x1b[B', Right: '\x1b[C', Left: '\x1b[D', Home: '\x1b[H', End: '\x1b[F', PgUp: '\x1b[5~', PgDn: '\x1b[6~' };
  function applyCtrl(data) {
    if (data.length === 1) {
      const c = data.toLowerCase().charCodeAt(0);
      if (c >= 97 && c <= 122) return String.fromCharCode(c - 96);
      if (data === ' ') return '\x00';
      if (data === '[') return '\x1b';
    }
    return data;
  }

  const pure = { decode, interpret, applyCtrl, KEYS };

  // ---------------------------------------------------------------- DOM part
  function mount(container) {
    const R = root.IdeRemote, { el, clear } = root.IdeMd;
    const terms = new Map();           // id -> {id, label, term, fit, node, ended, pty}
    let active = null, ctrl = false, opening = false, count = 0, raf = 0;

    const tabs = el('div.rv-tabs');
    const stage = el('div.rv-term-stage');
    const empty = el('div.rv-empty', {}, L('empty_terminal', 'No terminal yet. Press + to open one on the computer.'));
    stage.append(empty);
    const keys = el('div.rv-keys');
    clear(container);
    container.classList.add('rv-terminal');
    container.append(tabs, stage, keys);

    const css = (n, f) => (getComputedStyle(root.document.documentElement).getPropertyValue(n).trim() || f);
    const theme = () => ({ background: css('--rv-bg', '#1e1f22'), foreground: css('--rv-text', '#dfe1e5'), cursor: css('--rv-text', '#dfe1e5'), selectionBackground: css('--rv-selection', '#2e436e') });

    function write(data) {
      if (!active || active.ended) return;
      R.invoke('terminal.write', { id: active.id, data }).catch(() => {});
    }
    function typed(data) {
      if (ctrl) { data = applyCtrl(data); setCtrl(false); }
      write(data);
    }
    function setCtrl(on) { ctrl = on; ctrlBtn.classList.toggle('on', on); ctrlBtn.setAttribute('aria-pressed', String(on)); }

    const keyBtn = (label, send) => el('button.rv-key', { type: 'button',
      // pointerdown + preventDefault: the on-screen keyboard and xterm's focus stay as they are
      onpointerdown: (e) => { e.preventDefault(); send(); } }, label);
    const ctrlBtn = el('button.rv-key', { type: 'button', 'aria-pressed': 'false', onpointerdown: (e) => { e.preventDefault(); setCtrl(!ctrl); } }, 'Ctrl');
    keys.append(keyBtn('Esc', () => typed(KEYS.Esc)), keyBtn('Tab', () => typed(KEYS.Tab)), ctrlBtn,
      keyBtn('←', () => typed(KEYS.Left)), keyBtn('↓', () => typed(KEYS.Down)), keyBtn('↑', () => typed(KEYS.Up)), keyBtn('→', () => typed(KEYS.Right)),
      keyBtn('|', () => typed('|')), keyBtn('/', () => typed('/')), keyBtn('~', () => typed('~')), keyBtn('-', () => typed('-')),
      keyBtn('Ctrl-C', () => write('\x03')));

    function renderTabs() {
      clear(tabs);
      for (const t of terms.values()) {
        tabs.append(el('button.rv-tab' + (t === active ? '.on' : ''), { type: 'button', onclick: () => select(t) }, t.label + (t.ended ? ' (ended)' : '')));
      }
      tabs.append(el('button.rv-tab.rv-plus', { type: 'button', 'aria-label': L('new_terminal', 'New terminal'), onclick: openNew }, '+'));
      if (active && !active.ended) tabs.append(el('button.rv-tab.rv-close', { type: 'button', 'aria-label': L('close_terminal', 'Close terminal'), onclick: () => close(active) }, '×'));
      empty.hidden = terms.size > 0;
    }

    function select(t) {
      active = t;
      for (const x of terms.values()) x.node.hidden = x !== t;
      renderTabs();
      scheduleFit();
    }

    function make(id, label) {
      if (terms.has(id)) return terms.get(id);
      if (!root.Terminal || !root.FitAddon) { stage.append(el('div.rv-empty', {}, L('xterm_missing', 'The terminal display (xterm.js) is missing.'))); return null; }
      const term = new root.Terminal({ fontFamily: css('--rv-mono', 'monospace'), fontSize: 13, cursorBlink: true, scrollback: 5000, theme: theme() });
      const fit = new root.FitAddon.FitAddon();
      term.loadAddon(fit);
      const t = { id, label: label || `${L('panel_terminal', 'Terminal')}${count++ ? ' ' + count : ''}`, term, fit, node: el('div.rv-term'), ended: false };
      terms.set(id, t);
      stage.append(t.node);
      term.open(t.node);
      term.onData((d) => { if (active === t) typed(d); else R.invoke('terminal.write', { id, data: d }).catch(() => {}); });
      term.onResize(({ cols, rows }) => { if (!t.ended) R.invoke('terminal.resize', { id, cols, rows }).catch(() => {}); });
      if (!active) select(t); else { t.node.hidden = true; renderTabs(); }
      return t;
    }

    async function openNew() {
      if (opening) return;
      opening = true;
      try {
        const size = fitSize();
        const r = await R.invoke('terminal.open', { cols: size.cols, rows: size.rows });
        const t = make(r.id, r.shell && !/^(bash|zsh|sh)$/.test(r.shell) ? String(r.shell).replace(/\.exe$/i, '') : null);
        if (t) select(t);
      } catch (e) {
        if (active) active.term.write(`\r\n\x1b[31m${errText(e)}\x1b[0m\r\n`);
        else { empty.hidden = false; empty.textContent = errText(e); }
      } finally { opening = false; }
    }

    function close(t) {
      R.invoke('terminal.close', { id: t.id }).catch(() => {});
      t.term.dispose(); t.node.remove(); terms.delete(t.id);
      active = null;
      const next = [...terms.values()].pop();
      if (next) select(next); else renderTabs();
    }

    function fitSize() {
      const t = active;
      if (t && t.node.offsetWidth) { try { const d = t.fit.proposeDimensions(); if (d) return d; } catch (e) { /* not laid out */ } }
      return { cols: 80, rows: 24 };
    }
    function scheduleFit() {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        raf = 0;
        if (!active || !container.offsetWidth || !active.node.offsetWidth) return;
        try { active.fit.fit(); } catch (e) { /* not laid out yet */ }
      });
    }
    let autoAt = Date.now() + 1500, autoDone = false;
    function maybeAuto() {          // a first shell, once the panel is shown and the host's snapshot had time to arrive
      if (autoDone || terms.size || !container.offsetWidth || R.state !== 'connected') return;
      if (R.panels && R.panels.length && !R.panels.some((p) => p.id === 'terminal')) return;
      if (Date.now() < autoAt) { setTimeout(maybeAuto, autoAt - Date.now() + 20); return; }
      autoDone = true; openNew();
    }
    new ResizeObserver(() => { scheduleFit(); maybeAuto(); }).observe(stage);
    if (root.visualViewport) root.visualViewport.addEventListener('resize', scheduleFit);

    function handle(type) {
      return (msg) => {
        const m = interpret(type, msg);
        if (!m) return;
        if (m.kind === 'exit') {
          const t = terms.get(m.id);
          if (t) { t.ended = true; t.term.write('\r\n\x1b[2m[process ended]\x1b[0m\r\n'); renderTabs(); }
          return;
        }
        let t = terms.get(m.id);
        if (!t) t = make(m.id);                       // a terminal opened on the computer before this device came
        if (!t) return;
        if (m.kind === 'snap') t.term.reset();
        t.term.write(m.bytes);
      };
    }
    R.on('terminal.output', handle('terminal.output'));
    R.on('terminal.exit', handle('terminal.exit'));
    R.on('snap', handle('snap'));
    renderTabs();
    setTimeout(maybeAuto, 1500);
    R.on('ready', () => { autoAt = Date.now() + 1500; try { if (R.snap) R.snap('terminal'); } catch (e) { /* ignore */ } setTimeout(maybeAuto, 1500); });
    R.on('panel', () => setTimeout(maybeAuto, 50));
    return { focus: () => active && active.term.focus(), refit: scheduleFit };
  }


  // The shell loads this file as a module and never calls mount(): the view mounts itself in its <section>, loading its libraries first.
  function boot(id, mount, assets) {
    const doc = root.document;
    const load = (src) => {
      const cache = (root.__rvAssets = root.__rvAssets || {});
      if (cache[src]) return cache[src];
      return (cache[src] = new Promise((resolve, reject) => {
        if (src.endsWith('.css')) { const l = doc.createElement('link'); l.rel = 'stylesheet'; l.href = src; l.onload = resolve; l.onerror = resolve; doc.head.append(l); return; }
        const s = doc.createElement('script'); s.src = src; s.onload = resolve; s.onerror = () => reject(new Error('cannot load ' + src)); doc.head.append(s);
      }));
    };
    const run = async () => {
      const c = doc.getElementById('panel-' + id);
      if (!c || c.dataset.rvMounted) return;
      c.dataset.rvMounted = '1';
      try { for (const a of assets) await load(a); mount(c); }
      catch (e) { c.textContent = errText(e); }
    };
    if (doc.readyState === 'loading') doc.addEventListener('DOMContentLoaded', run); else run();
  }

  return { mount, pure, boot, ...pure };
});