// IDE Remote shell: pairing, connection (transport.js), the hello / welcome / invoke / event protocol (docs/ide-remote.md)
// and the global API the views use: window.IdeRemote.
import { Channel } from './channel.js';
import { connect } from './transport.js';

const $ = (id) => document.getElementById(id);
const store = {
  get(k) { try { return localStorage.getItem('ide-remote:' + k); } catch { return null; } },
  set(k, v) { try { v == null ? localStorage.removeItem('ide-remote:' + k) : localStorage.setItem('ide-remote:' + k, v); } catch { /* private window */ } },
};

// ---- texts (English built in; the 14 languages come from config/lang.yaml through PHP) -----------------------------
const EN = {
  connecting: 'Connecting…', waiting: 'Waiting for the PC to allow this device…', connected: 'Connected',
  reconnecting: 'Connection lost, reconnecting…', denied_refused: 'The PC refused this device.', denied_revoked: 'Access was revoked on the PC.',
  denied_expired: 'Sharing expired. Share again from the IDE.', denied_version: 'This app and the IDE versions do not match. Update the IDE.',
  pair_title: 'Connect to your IDE', pair_hint: 'In the IDE, click the screen icon of the Claude panel and open the link or scan the QR code, or paste the link here.',
  pair_button: 'Connect', device_name: 'Name of this device', retry: 'Retry', disconnect: 'Disconnect', panel_claude: 'Claude', panel_terminal: 'Terminal',
  panel_files: 'Files', panel_run: 'Run', via_direct: 'direct (same network)', via_relay: 'via relay (encrypted)', pair_invalid: 'This link is not a valid pairing link.',
  err_denied: 'The IDE refused this action.', err_timeout: 'The IDE did not answer in time.', err_closed: 'The connection was closed.', err_not_connected: 'Not connected to the IDE.',
  err_file_too_large: 'This file is too large to be sent.', err_bad_data: 'Invalid data.', err_empty_or_too_long: 'The message is empty or too long.', err_failed: 'The action failed.',
};
let table = EN;
const langCode = (new URLSearchParams(location.search).get('lang') || navigator.language || 'en').slice(0, 2).toLowerCase();
const t = (k, vars, fallback) => String(table[k] || EN[k] || fallback || k).replace(/\{(\w+)\}/g, (m, name) => (vars && name in vars ? vars[name] : m));
// An error of a call (the codes of the host and of this page) in the page's language; any other message is shown as it is.
const ERRORS = { denied: 'err_denied', timeout: 'err_timeout', closed: 'err_closed', 'channel closed': 'err_closed', 'not connected': 'err_not_connected',
  'file too large': 'err_file_too_large', 'bad data': 'err_bad_data', 'empty or too long': 'err_empty_or_too_long', failed: 'err_failed' };
const errorText = (e) => { const m = (e && e.message) || String(e); return ERRORS[m] ? t(ERRORS[m]) : m; };
function applyTexts() {
  const set = (id, k) => { $(id).textContent = t(k); };
  set('pairTitle', 'pair_title'); set('pairHint', 'pair_hint'); set('pairButton', 'pair_button'); set('deviceLabel', 'device_name');
  set('retry', 'retry'); set('disconnect', 'disconnect');
  document.documentElement.lang = langCode;
  document.querySelectorAll('#tabs button').forEach((b) => { b.textContent = t('panel_' + b.dataset.panel); });
  render();
}

// ---- the API for the views ---------------------------------------------------------------------------------------
const listeners = new Map();
const on = (type, fn) => {
  if (!listeners.has(type)) listeners.set(type, new Set());
  listeners.get(type).add(fn);
  return () => listeners.get(type).delete(fn);
};
const emit = (type, ...args) => { for (const fn of [...(listeners.get(type) || [])]) { try { fn(...args); } catch (e) { console.error(`[IdeRemote] listener of ${type}`, e); } } };

let channel = null; let nextId = 1; const calls = new Map();
const API = window.IdeRemote = {
  /** 'idle' | 'connecting' | 'waiting' | 'connected' | 'lost' | 'denied' */
  state: 'idle', scope: null, panels: [], project: null, via: null, active: null, t, errorText,
  /** Sends one message object to the IDE (queued until the channel is open). */
  send(obj) { return channel ? channel.send(obj) : Promise.reject(new Error('not connected')); },
  /** Runs an allowlisted command of the IDE: Promise<result>, rejects with Error(message) ('denied', 'timeout', 'closed', ...). */
  invoke(name, payload = {}, timeoutMs = 30000) {
    if (!channel || API.state !== 'connected') return Promise.reject(new Error('not connected'));
    const id = nextId++;
    return new Promise((resolve, reject) => {
      const timer = setTimeout(() => { calls.delete(id); reject(new Error('timeout')); }, timeoutMs);
      calls.set(id, { resolve, reject, timer });
      channel.send({ t: 'invoke', id, name, payload }).catch((e) => { clearTimeout(timer); calls.delete(id); reject(e); });
    });
  },
  /**
   * Subscribes. type: 'state' (state, info), 'welcome' (msg), 'snap' (msg) / 'snap:<panel>' (msg), 'event' (name, payload),
   * any IDE event name such as 'claude.event' / 'terminal.output' (payload), 'panel' (id: the panel shown), 'denied' (reason),
   * 'ready' (connected and welcomed: use it to ask a snapshot). Returns the unsubscribe function.
   */
  on,
  /** Shows a panel (its <section id="panel-<id>">). */
  show(id) { showPanel(id); },
  /** Asks the host for the late-joiner state of a panel: the answer arrives as a 'snap' message. */
  snap(panel) { return API.send({ t: 'invoke', id: nextId++, name: 'snap', payload: { panel } }); },
};

// ---- state / rendering -------------------------------------------------------------------------------------------
let pairing = null; let deviceName = ''; let info = '';
function setState(s, text = '') {
  API.state = s; info = text;
  render();
  emit('state', s, text);
}
function render() {
  const s = API.state;
  $('dot').dataset.state = s;
  $('status').textContent = s === 'connected' ? `${t('connected')} · ${t(API.via === 'direct' ? 'via_direct' : 'via_relay')}`
    : s === 'connecting' ? t('connecting') : s === 'waiting' ? t('waiting') : s === 'lost' ? t('reconnecting') : info;
  $('project').textContent = API.project?.name || 'JumPHP IDE';
  $('device').textContent = deviceName;
  $('disconnect').hidden = s === 'idle';
  const paired = s !== 'idle';
  $('pairForm').hidden = paired;
  $('wait').hidden = !paired || s === 'connected';
  $('waitText').textContent = s === 'denied' ? info : s === 'waiting' ? t('waiting') : s === 'lost' ? t('reconnecting') : t('connecting');
  $('retry').hidden = s !== 'denied';
  document.querySelector('.spinner').hidden = s === 'denied';
  $('gate').hidden = s === 'connected' && API.panels.length > 0;
  $('panels').hidden = !(s === 'connected' || (s === 'lost' && API.panels.length > 0));
  if (s === 'lost' && API.panels.length > 0) $('gate').hidden = true;
}

function buildTabs() {
  const tabs = $('tabs'); tabs.replaceChildren();
  const known = ['claude', 'terminal', 'files'];
  for (const p of API.panels) {
    if (!known.includes(p.id) && !$('panel-' + p.id)) continue;
    const b = document.createElement('button');
    b.type = 'button'; b.role = 'tab'; b.dataset.panel = p.id; b.textContent = t('panel_' + p.id, null, p.title);
    b.addEventListener('click', () => showPanel(p.id));
    tabs.append(b);
  }
}
function showPanel(id) {
  if (!API.panels.some((p) => p.id === id)) return;
  API.active = id; store.set('panel', id);
  document.querySelectorAll('.panel').forEach((el) => { el.hidden = el.id !== 'panel-' + id; });
  document.querySelectorAll('#tabs button').forEach((b) => b.setAttribute('aria-selected', String(b.dataset.panel === id)));
  emit('panel', id);
}

// ---- protocol ----------------------------------------------------------------------------------------------------
let attempt = 0; let stopped = false; let lastSeen = 0; let timers = [];
const clearTimers = () => { timers.forEach(clearInterval); timers = []; };

function failCalls(reason) { for (const [id, c] of calls) { clearTimeout(c.timer); c.reject(new Error(reason)); calls.delete(id); } }

async function start() {
  if (!pairing) return;
  stopped = false;
  setState('connecting');
  let settings = { relay_url: 'wss://jumphp.net/ide-relay/ws', net_mode: 'auto', native: false, direct_head_start: 1.5 };
  try { settings = { ...settings, ...(await window.jumphp.invoke('settings', {})) }; } catch { /* PHP not up: defaults */ }
  if (window.IDE_REMOTE_RELAY) settings.relay_url = window.IDE_REMOTE_RELAY;
  try {
    const { channel: ch, via } = await connect({ pairing, settings });
    if (stopped) return ch.close();
    channel = ch; API.via = via; lastSeen = Date.now(); attempt = 0;
    ch.on('message', onMessage);
    ch.on('close', () => onClosed('closed'));
    ch.on('error', (e) => console.warn('[IdeRemote] channel error', e));
    setState('waiting');
    ch.send({ t: 'hello', v: 1, name: deviceName, want: 'all' });
    timers.push(setInterval(() => {
      if (Date.now() - lastSeen > 60000) return onClosed('silent');
      ch.send({ t: 'ping' }).catch(() => {});
    }, 20000));
  } catch (e) {
    console.warn('[IdeRemote] connect failed', e);
    onClosed('failed');
  }
}

function onClosed() {
  clearTimers(); failCalls('closed');
  if (channel) { try { channel.close(); } catch { /* already closed */ } channel = null; }
  if (stopped || API.state === 'denied' || API.state === 'idle') return;
  setState('lost');
  const delay = Math.min(15000, 1000 * 2 ** attempt++);
  setTimeout(() => { if (API.state === 'lost' && !stopped) start(); }, delay);
}

function onMessage(m) {
  lastSeen = Date.now();
  switch (m && m.t) {
    case 'welcome': {
      API.scope = m.scope; API.project = m.project || null;
      API.panels = (m.panels || []).filter((p) => p && p.id);
      if (m.scope === 'all' && !API.panels.some((p) => p.id === 'files')) API.panels.push({ id: 'files', title: t('panel_files') });
      buildTabs(); setState('connected');
      showPanel(API.panels.some((p) => p.id === store.get('panel')) ? store.get('panel') : API.panels[0]?.id);
      channel.send({ t: 'sub', panels: API.panels.map((p) => p.id).filter((id) => id !== 'files') });
      emit('welcome', m); emit('ready');
      break;
    }
    case 'denied':
      stopped = true; clearTimers(); store.set('pairing', null);
      setState('denied', t('denied_' + (m.reason || 'refused')));
      emit('denied', m.reason);
      channel?.close(); channel = null;
      break;
    case 'result': {
      const c = calls.get(m.id);
      if (!c) break;
      calls.delete(m.id); clearTimeout(c.timer);
      m.ok ? c.resolve(m.result) : c.reject(new Error(m.error || 'failed'));
      break;
    }
    case 'event': emit('event', m.name, m.payload); emit(m.name, m.payload); break;
    case 'snap': emit('snap', m); emit('snap:' + m.panel, m); break;
    case 'ping': channel?.send({ t: 'pong' }).catch(() => {}); break;
    default: break; // pong and unknown types: only lastSeen counts
  }
}

function disconnect() {
  stopped = true; clearTimers();
  try { channel?.send({ t: 'bye' }); } catch { /* closing */ }
  setTimeout(() => { channel?.close(); channel = null; }, 100);
  failCalls('closed');
  store.set('pairing', null); pairing = null; API.panels = []; API.project = null; API.scope = null; API.via = null;
  $('pairLink').value = '';
  setState('idle');
}

// ---- pairing form / boot -----------------------------------------------------------------------------------------
function guessDeviceName() {
  const ua = navigator.userAgent || '';
  const os = /Android/.test(ua) ? 'Android' : /iPhone|iPad/.test(ua) ? 'iPhone' : /Windows/.test(ua) ? 'Windows' : /Mac/.test(ua) ? 'Mac' : /Linux/.test(ua) ? 'Linux' : 'Device';
  return `${os} browser`;
}
function pair(text) {
  const p = Channel.parsePairing(text);
  if (!p) { $('pairError').textContent = t('pair_invalid'); $('pairError').hidden = false; return; }
  $('pairError').hidden = true;
  deviceName = $('deviceName').value.trim().slice(0, 40) || guessDeviceName();
  store.set('device', deviceName); store.set('pairing', text);
  pairing = p; attempt = 0;
  if (location.hash) history.replaceState(null, '', location.pathname + location.search); // the key leaves the address bar
  try { if (window.parent !== window && window.parent.location.hash) window.parent.history.replaceState(null, '', window.parent.location.pathname + window.parent.location.search); } catch { /* not ours to touch */ }
  start();
}

$('pairForm').addEventListener('submit', (e) => { e.preventDefault(); pair($('pairLink').value.trim()); });
$('disconnect').addEventListener('click', disconnect);
$('retry').addEventListener('click', () => { const saved = $('pairLink').value; pairing = null; setState('idle'); $('pairLink').value = saved; });
document.addEventListener('visibilitychange', () => { if (!document.hidden && API.state === 'lost') start(); });
addEventListener('online', () => { if (API.state === 'lost') start(); });

(async function boot() {
  $('deviceName').value = store.get('device') || guessDeviceName();
  applyTexts();
  render();
  // texts in the user's language (PHP reads config/lang.yaml)
  try {
    const all = await window.jumphp.invoke('strings', {});
    if (all && all[langCode]) { table = { ...EN, ...all[langCode] }; applyTexts(); }
  } catch { /* English */ }
  // the app runs in a frame of the engine's page (same origin): the link's fragment is on the page around it
  let outer = '';
  try { outer = window.parent !== window ? window.parent.location.hash : ''; } catch { /* another origin: the pasted link then */ }
  const text = location.hash || outer || store.get('pairing') || '';
  if (Channel.parsePairing(text)) { $('pairLink').value = text; pair(text); }
})();