import { handlers, NextDraw, plotters, realClock, STOP_CODES, WebSerialTransport,

  webSerialSupported } from '../src/index.js';

import { EBBSimulator } from '../src/sim/ebb-sim.js';

import { joinPolylines, svgToPolylines } from '../src/svg.js';

const $ = (sel) => document.querySelector(sel);

const $$ = (sel) => [...document.querySelectorAll(sel)];

const SVG_NS = 'http://www.w3.org/2000/svg';

const SETTINGS_KEY = 'dotter.settings';

const SETTING_NAMES = ['model', 'handling', 'speedPendown', 'speedPenup', 'accel', 'penPosUp', 'penPosDown',

  'penRateLower', 'penRateRaise', 'homing'];

let nd = null; // Connected NextDraw, if any

let sim = null; // Simulator, when connected to one instead of USB

let busy = false;

let job = null; // { polylines, dryRun }

// --- Logging & status ---

function log(message, isError = false) {

  const li = document.createElement('li');

  li.textContent = message;

  if (isError) li.className = 'err';

  $('#log').prepend(li);

}

function setStatus() {

  const el = $('#status');

  if (!nd) {

    el.textContent = 'Not connected';

    el.className = 'status off';

  } else {

    const who = sim ? 'Simulator' : (nd.nickname || nd.params.modelName);

    el.textContent = `${who} · fw ${nd.fwVersion ?? '?'}${busy ? ' · busy' : ''}`;

    el.className = `status on${busy ? ' busy' : ''}`;

  }

  $('#connect').hidden = Boolean(nd);

  $('#simulate').hidden = Boolean(nd);

  $('#disconnect').hidden = !nd;

  for (const b of $$('.needs-conn')) b.disabled = !nd || busy;

  $('#plot').disabled = !nd || busy || !job || job.dryRun?.violations.length > 0;

  $('#stop').disabled = !busy;

  $('#disconnect').disabled = busy;

}

/** Run one machine operation at a time; report errors to the log. */

async function run(label, fn) {

  if (busy) return;

  busy = true;

  setStatus();

  try {

    await fn();

  } catch (e) {

    log(`${label}: ${e.message ?? e}`, true);

  } finally {

    busy = false;

    setStatus();

    drawCarriage();

    if (sim) drawInk(sim.ink);

  }

}

// --- Drawing the bed ---

function setBed() {

  const model = plotters[Number(readSettings().model)];

  const svg = $('#bed');

  svg.setAttribute('viewBox', `-0.2 -0.2 ${model.travelX + 0.4} ${model.travelY + 0.4}`);

  $('#bed-area').setAttribute('width', model.travelX);

  $('#bed-area').setAttribute('height', model.travelY);

}

function polylineElements(group, polylines) {

  group.replaceChildren(...polylines.map((pts) => {

    const el = document.createElementNS(SVG_NS, 'polyline');

    el.setAttribute('points', pts.map(([x, y]) => `${x.toFixed(4)},${y.toFixed(4)}`).join(' '));

    return el;

  }));

}

function drawPlan(polylines) {

  polylineElements($('#layer-plan'), polylines);

}

function drawInk(polylines) {

  polylineElements($('#layer-ink'), polylines);

}

function drawCarriage() {

  if (!nd || nd.pen.phys.xpos == null) {

    $('#pos').textContent = '–';

    return;

  }

  const { xpos, ypos } = nd.pen.phys;

  $('#carriage').setAttribute('cx', xpos);

  $('#carriage').setAttribute('cy', ypos);

  $('#pos').textContent = `${(xpos * 25.4).toFixed(1)}, ${(ypos * 25.4).toFixed(1)} mm`;

}

// --- Settings ---

function readSettings() {

  const form = $('#settings');

  const out = {};

  for (const name of SETTING_NAMES) {

    const input = form.elements[name];

    out[name] = input.type === 'checkbox' ? input.checked : Number(input.value);

  }

  return out;

}

function applySettings(target) {

  Object.assign(target.options, readSettings());

}

function initSettings() {

  const form = $('#settings');

  const defaults = new NextDraw().options;

  let saved = {};

  try {

    saved = JSON.parse(localStorage.getItem(SETTINGS_KEY) || '{}');

  } catch {

    saved = {};

  }

  plotters.forEach((p, i) => {

    if (i > 0) form.elements.model.add(new Option(p.modelName, i));

  });

  handlers.forEach((h, i) => {

    if (i > 0) form.elements.handling.add(new Option(h.name, i));

  });

  for (const name of SETTING_NAMES) {

    const input = form.elements[name];

    const value = saved[name] ?? defaults[name];

    if (input.type === 'checkbox') input.checked = Boolean(value);

    else input.value = value;

  }

  const refresh = () => {

    for (const input of form.querySelectorAll('input[type=range]')) {

      input.previousElementSibling.textContent = `${input.value}%`;

    }

    try {

      localStorage.setItem(SETTINGS_KEY, JSON.stringify(readSettings()));

    } catch {

      // Storage unavailable; settings just won't persist.

    }

    setBed();

  };

  form.addEventListener('input', () => {

    refresh();

    if (job) dryRun();

  });

  form.addEventListener('submit', (e) => {

    e.preventDefault();

    run('Apply settings', async () => {

      const modelChanged = Number(form.elements.model.value) !== nd.options.model;

      applySettings(nd);

      if (modelChanged) log('Model changed: disconnect and reconnect so homing uses the new travel limits.', true);

      await nd.update();

      log('Settings applied.');

    });

  });

  refresh();

}

// --- Connecting ---

async function connectWith(transport, clock) {

  const isSim = clock !== realClock;

  const machine = new NextDraw({ transport, clock, log: (m) => log(m) });

  machine.interactive();

  applySettings(machine);

  log(isSim ? 'Connecting to simulator…' : 'Connecting…');

  const ok = await machine.connect();

  if (!ok) {

    const code = machine.plotStatus.stopped;

    log(`Connection failed${code ? `: ${STOP_CODES[code] ?? code}` : ''}. ${machine.machine.err ?? ''}`, true);

    await machine.disconnect().catch(() => {});

    return;

  }

  nd = machine;

  log(`Connected: ${nd.params.modelName}, firmware ${nd.fwVersion}. Homed.`);

}

/** Virtual time that still lets the page repaint during long simulations. */

function yieldingClock() {

  let t = 0;

  let last = performance.now();

  return {

    now: () => t,

    async sleep(ms) {

      t += Math.max(0, ms);

      if (performance.now() - last > 30) {

        last = performance.now();

        await new Promise((r) => setTimeout(r, 0));

      }

    },

  };

}

$('#connect').addEventListener('click', () => run('Connect', async () => {

  let transport;

  try {

    transport = await WebSerialTransport.request();

  } catch {

    return; // User closed the chooser.

  }

  sim = null;

  await connectWith(transport, realClock);

}));

$('#simulate').addEventListener('click', () => run('Simulator', async () => {

  const model = plotters[Number(readSettings().model)];

  const clock = yieldingClock(); // Shared, so the simulated FIFO advances with the driver's time.

  sim = new EBBSimulator({ clock, travelX: model.travelX, travelY: model.travelY, startX: 3, startY: 2 });

  await connectWith(sim, clock);

  if (!nd) sim = null;

}));

$('#disconnect').addEventListener('click', () => run('Disconnect', async () => {

  await nd.disconnect();

  nd = null;

  sim = null;

  log('Disconnected.');

}));

if (!webSerialSupported()) {

  $('#unsupported').hidden = false;

  $('#connect').disabled = true;

}

navigator.serial?.addEventListener('disconnect', () => {

  if (nd && !sim) {

    log('NextDraw was unplugged.', true);

    nd.requestPause();

    nd = null;

    setStatus();

  }

});

// --- Pen, motors, jog ---

const actions = {

  penup: () => nd.penup(),

  pendown: () => nd.pendown(),

  cycle: () => nd.cyclePen(),

  home: () => nd.walkHome(),

  rehome: async () => {

    if (await nd.rehome()) log('Homed.');

    else log('Homing failed.', true);

  },

  disable: async () => {

    await nd.disableXY();

    log('Motors off. Re-home before moving again.');

  },

};

for (const b of $$('[data-action]')) {

  b.addEventListener('click', () => run(b.textContent, actions[b.dataset.action]));

}

for (const b of $$('[data-jog]')) {

  b.addEventListener('click', () => run('Jog', async () => {

    const [dx, dy] = b.dataset.jog.split(',').map(Number);

    const step = Number($('#jog-step').value);

    await nd.move(dx * step, dy * step);

  }));

}

// --- Plotting ---

async function loadFile(file) {

  const text = await file.text();

  const doc = new DOMParser().parseFromString(text, 'image/svg+xml');

  if (doc.querySelector('parsererror') || doc.documentElement.localName !== 'svg') {

    throw new Error('Not a valid SVG file.');

  }

  const result = svgToPolylines(doc, { tolerance: 0.002, autoRotate: $('#rotate').checked });

  const ox = Number($('#offset-x').value) || 0;

  const oy = Number($('#offset-y').value) || 0;

  let polylines = result.polylines.map((p) => p.map(([x, y]) => [x + ox, y + oy]));

  if ($('#join').checked) polylines = joinPolylines(polylines);

  return { polylines, name: file.name, size: [result.width, result.height], rotated: result.rotated };

}

/** Plot the job on a fresh simulated machine: time estimate plus safety check. */

async function dryRun() {

  if (!job) return;

  const settings = readSettings();

  const model = plotters[settings.model];

  const clock = yieldingClock();

  const s = new EBBSimulator({ clock, travelX: model.travelX, travelY: model.travelY });

  const machine = new NextDraw({ transport: s, clock, log: () => {} });

  machine.interactive();

  Object.assign(machine.options, settings);

  $('#plot-info').textContent = 'Checking plot in the simulator…';

  const ok = await machine.connect();

  const result = ok ? await machine.plotPolylines(job.polylines) : null;

  job.dryRun = { violations: s.violations, timeMs: clock.now(), warnings: [...machine.warnings], ok };

  const mins = Math.floor(clock.now() / 60000);

  const secs = Math.round((clock.now() % 60000) / 1000);

  const parts = [`${job.name}: ${job.polylines.length} paths, ${job.size[0].toFixed(2)} × ${job.size[1].toFixed(2)} in` +

    `${job.rotated ? ' (rotated)' : ''}.`];

  if (!ok || result.stopped) {

    parts.push('Simulation failed; not plotting.');

    job.dryRun.violations = [...s.violations, { kind: 'sim', detail: 'simulation failed' }];

  } else if (s.violations.length) {

    parts.push(`Safety check failed (${s.violations[0].kind}: ${s.violations[0].detail}). Plot disabled.`);

  } else {

    parts.push(`Estimated time ${mins}m ${secs}s. Simulator check passed.`);

  }

  if (machine.warnings.has('bounds')) parts.push('Parts outside the travel area will be clipped.');

  $('#plot-info').textContent = parts.join(' ');

  setStatus();

}

async function reloadJob() {

  const file = $('#file').files[0];

  if (!file) return;

  try {

    job = await loadFile(file);

  } catch (e) {

    job = null;

    $('#plot-info').textContent = e.message;

    setStatus();

    return;

  }

  drawPlan(job.polylines);

  drawInk([]);

  await dryRun();

}

for (const id of ['#file', '#rotate', '#join', '#offset-x', '#offset-y']) {

  $(id).addEventListener('change', reloadJob);

}

$('#plot').addEventListener('click', () => run('Plot', async () => {

  const progress = $('#progress');

  progress.hidden = false;

  progress.value = 0;

  if (!sim) drawInk([]);

  log(`Plotting ${job.name}…`);

  const started = performance.now();

  const result = await nd.plotPolylines(job.polylines, {

    onProgress: (done, total) => {

      progress.value = done / total;

      drawCarriage();

      if (sim) drawInk(sim.ink);

      else drawInk(job.polylines.slice(0, done));

    },

  });

  progress.hidden = true;

  if (result.stopped) log(`Plot stopped: ${STOP_CODES[result.stopped] ?? result.stopped}.`, true);

  else log(`Plot complete in ${((performance.now() - started) / 1000).toFixed(0)} s.`);

}));

$('#stop').addEventListener('click', () => {

  nd?.requestPause();

  log('Stopping…');

});

initSettings();

setStatus();