// A small DOM for tests/area-chat.test.ts: enough of Element (attributes, children, text, `closest`,
// `querySelectorAll` over the selectors Chat+ uses, listeners with bubbling, focus, style) to run
// the Chat+ modules over X-shaped chat markup without a browser (./x.ts builds that markup and plays
// X's part). Not a DOM library: it implements only what these tests use, and a selector it does not
// understand throws. The selector engine is the one of ../profile/miniDom.ts.

type Simple = { tag?: string; id?: string; classes: string[]; attrs: { name: string; op?: string; value?: string }[]; nots: Simple[] };
type Step = { simple: Simple; child: boolean };

/** Splits at top-level separators (not inside brackets, parentheses or quotes). */
function split(source: string, separators: string): { part: string; by: string }[] {
  const out: { part: string; by: string }[] = [];
  let depth = 0;
  let quote = '';
  let part = '';
  let by = '';
  for (const char of source) {
    if (quote) { part += char; if (char === quote) quote = ''; continue; }
    if (char === '"' || char === "'") { quote = char; part += char; continue; }
    if (char === '[' || char === '(') depth += 1;
    if (char === ']' || char === ')') depth -= 1;
    if (depth === 0 && separators.includes(char)) {
      if (part) { out.push({ part, by }); part = ''; by = ''; }
      if (char !== ' ') by = char;
      continue;
    }
    part += char;
  }
  if (part) out.push({ part, by });
  return out;
}

function parseSimple(source: string): Simple {
  const simple: Simple = { classes: [], attrs: [], nots: [] };
  let rest = source;
  const take = (pattern: RegExp) => { const match = pattern.exec(rest); if (match) rest = rest.slice(match[0].length); return match; };
  let match = take(/^[a-zA-Z][\w-]*/);
  if (match) simple.tag = match[0].toLowerCase();
  while (rest) {
    if ((match = take(/^#([\w-]+)/))) simple.id = match[1];
    else if ((match = take(/^\.([\w-]+)/))) simple.classes.push(match[1]!);
    else if ((match = take(/^\[([\w-]+)(?:([\^$*]?=)"([^"]*)")?\]/))) simple.attrs.push({ name: match[1]!, op: match[2], value: match[3] });
    else if ((match = take(/^:not\(([^()]*)\)/))) simple.nots.push(parseSimple(match[1]!));
    else throw new Error(`miniDom: selector not supported: ${source}`);
  }
  return simple;
}

const parsed = new Map<string, Step[][]>();
function parse(selector: string): Step[][] {
  let list = parsed.get(selector);
  if (!list) {
    list = split(selector, ',').map(({ part }) => split(part.trim(), ' >').map(step => ({ simple: parseSimple(step.part), child: step.by === '>' })));
    parsed.set(selector, list);
  }
  return list;
}

function matchesSimple(el: El, simple: Simple): boolean {
  if (simple.tag && el.tagName.toLowerCase() !== simple.tag) return false;
  if (simple.id && el.getAttribute('id') !== simple.id) return false;
  for (const name of simple.classes) if (!el.classList.contains(name)) return false;
  for (const { name, op, value } of simple.attrs) {
    const actual = el.getAttribute(name);
    if (actual === null) return false;
    if (op === '=' && actual !== value) return false;
    if (op === '^=' && !actual.startsWith(value!)) return false;
    if (op === '$=' && !actual.endsWith(value!)) return false;
    if (op === '*=' && !actual.includes(value!)) return false;
  }
  return !simple.nots.some(not => matchesSimple(el, not));
}

function matchesSteps(el: El, steps: Step[], index = steps.length - 1): boolean {
  const step = steps[index]!;
  if (!matchesSimple(el, step.simple)) return false;
  if (index === 0) return true;
  if (step.child) return !!el.parentElement && matchesSteps(el.parentElement, steps, index - 1);
  for (let up = el.parentElement; up; up = up.parentElement) if (matchesSteps(up, steps, index - 1)) return true;
  return false;
}

export class Txt {
  text: string;
  parentElement: El | null = null;
  constructor(text: string) { this.text = text; }
}

/** An event as the code under test makes them (`new win.MouseEvent(type, init)`) and as X's part fires them. */
export class Ev {
  type: string;
  target: El | null = null;
  currentTarget: unknown = null;
  defaultPrevented = false;
  stopped = false;
  [key: string]: unknown;
  constructor(type: string, init: Record<string, unknown> = {}) { this.type = type; Object.assign(this, init); }
  preventDefault() { this.defaultPrevented = true; }
  stopPropagation() { this.stopped = true; }
}

type Listener = (event: Ev) => void;
type DocLike = { activeElement: unknown; emit(type: string, event: unknown): void };

class Style {
  [key: string]: unknown;
  setProperty(name: string, value: string) { this[name] = value; }
  getPropertyValue(name: string) { return String(this[name] ?? ''); }
}

export class El {
  tagName: string;
  parentElement: El | null = null;
  childNodes: (El | Txt)[] = [];
  style = new Style();
  value = '';
  title = '';
  type = '';
  disabled = false;
  scrollTop = 0;
  scrollHeight = 0;
  clientHeight = 0;
  /** Set by `mount` on `<html>`: where an event goes after the tree, and who knows the focus. */
  doc: DocLike | null = null;
  rect = { left: 0, top: 0, right: 0, bottom: 0, width: 0, height: 0 };
  private attributes = new Map<string, string>();
  private listeners = new Map<string, Listener[]>();

  constructor(tag: string) { this.tagName = tag.toUpperCase(); }

  get nodeName() { return this.tagName; }
  get children(): El[] { return this.childNodes.filter((node): node is El => node instanceof El); }
  get firstElementChild(): El | null { return this.children[0] ?? null; }
  get previousElementSibling(): El | null { const all = this.parentElement?.children ?? []; return all[all.indexOf(this) - 1] ?? null; }
  get nextElementSibling(): El | null { const all = this.parentElement?.children ?? []; return all[all.indexOf(this) + 1] ?? null; }
  private get root(): El { let up: El = this; while (up.parentElement) up = up.parentElement; return up; }
  get isConnected(): boolean { return this.root.tagName === 'HTML'; }

  getAttribute(name: string) { return this.attributes.get(name) ?? null; }
  hasAttribute(name: string) { return this.attributes.has(name); }
  setAttribute(name: string, value: string) { this.attributes.set(name, String(value)); }
  removeAttribute(name: string) { this.attributes.delete(name); }
  toggleAttribute(name: string, on = !this.attributes.has(name)) { if (on) this.attributes.set(name, ''); else this.attributes.delete(name); return on; }
  get id() { return this.getAttribute('id') ?? ''; }
  get className() { return this.getAttribute('class') ?? ''; }
  set className(value: string) { this.setAttribute('class', value); }
  get classList() {
    const names = () => this.className.split(/\s+/).filter(Boolean);
    return { contains: (name: string) => names().includes(name) };
  }

  get textContent(): string { return this.childNodes.map(node => (node instanceof El ? node.textContent : node.text)).join(''); }
  set textContent(value: string) {
    for (const node of this.childNodes) node.parentElement = null;
    this.childNodes = [];
    if (value !== '') this.append(String(value));
  }

  private adopt(nodes: (El | Txt | string)[]): (El | Txt)[] {
    return nodes.map(node => {
      const own = typeof node === 'string' ? new Txt(node) : node;
      if (own instanceof El) own.remove();
      return own;
    });
  }
  private insert(at: number, nodes: (El | Txt)[]) {
    this.childNodes.splice(at, 0, ...nodes);
    for (const node of nodes) node.parentElement = this;
  }
  append(...nodes: (El | Txt | string)[]) { this.insert(this.childNodes.length, this.adopt(nodes)); }
  appendChild<T extends El>(node: T): T { this.append(node); return node; }
  insertBefore<T extends El>(node: T, before: El | null): T {
    const own = this.adopt([node]);
    this.insert(before ? this.childNodes.indexOf(before) : this.childNodes.length, own);
    return node;
  }
  replaceChildren(...nodes: (El | Txt | string)[]) { this.textContent = ''; this.append(...nodes); }
  remove() {
    const parent = this.parentElement;
    if (!parent) return;
    parent.childNodes.splice(parent.childNodes.indexOf(this), 1);
    this.parentElement = null;
  }
  contains(other: El | null): boolean { for (let up = other; up; up = up.parentElement) if (up === this) return true; return false; }

  matches(selector: string): boolean { return parse(selector).some(steps => matchesSteps(this, steps)); }
  closest(selector: string): El | null {
    for (let up: El | null = this; up; up = up.parentElement) if (up.matches(selector)) return up;
    return null;
  }
  querySelectorAll(selector: string): El[] {
    const out: El[] = [];
    const walk = (el: El) => { for (const child of el.children) { if (child.matches(selector)) out.push(child); walk(child); } };
    walk(this);
    return out;
  }
  querySelector(selector: string): El | null { return this.querySelectorAll(selector)[0] ?? null; }

  addEventListener(type: string, listener: Listener) { (this.listeners.get(type) ?? this.listeners.set(type, []).get(type)!).push(listener); }
  removeEventListener(type: string, listener: Listener) { this.listeners.set(type, (this.listeners.get(type) ?? []).filter(item => item !== listener)); }
  /** Runs the listeners of this element and, for an event that bubbles, of its ancestors and the document. */
  dispatchEvent(event: Ev): boolean {
    event.target ??= this;
    const root = this.root;
    for (let at: El | null = this; at && !event.stopped; at = event.bubbles === false ? null : at.parentElement) {
      event.currentTarget = at;
      for (const listener of [...(at.listeners.get(event.type) ?? [])]) listener(event);
    }
    if (!event.stopped && event.bubbles !== false) root.doc?.emit(event.type, event);
    return !event.defaultPrevented;
  }
  click() { this.dispatchEvent(new Ev('click', { bubbles: true })); }
  focus() { const doc = this.root.doc; if (doc) doc.activeElement = this; }
  select() {}
  scrollIntoView() {}
  scrollBy(options: { top: number }) { this.scrollTop = Math.max(0, this.scrollTop + options.top); }
  getBoundingClientRect() { return this.rect; }
}

type Child = El | string | null | false | undefined;

/** `h('div', { 'data-testid': 'dm-container' }, h('span', null, 'Name'))`. */
export function h(tag: string, attrs?: Record<string, string> | null, ...children: Child[]): El {
  const el = new El(tag);
  for (const [name, value] of Object.entries(attrs ?? {})) el.setAttribute(name, value);
  el.append(...children.filter((child): child is El | string => !!child));
  return el;
}

/** Shorthand for X's test ids: `t('dm-inbox-panel', ...)` is `<div data-testid="dm-inbox-panel">`. */
export const t = (testid: string, ...children: Child[]) => h('div', { 'data-testid': testid }, ...children);

/**
 * Puts `<html><body>…children</body></html>` behind an `areaPage` document: its queries and the
 * elements it creates are this DOM's (a `<style>` stays the page's own, so `env.live()` still
 * lists the stylesheets), and an event that bubbles out of the tree reaches the document's
 * listeners. Returns the body.
 */
export function mount(doc: Record<string, unknown>, ...children: Child[]): El {
  const body = h('body', null, ...children);
  const html = h('html', { lang: 'en' }, h('head'), body);
  html.doc = doc as unknown as DocLike;
  const createStyle = (doc.createElement as (tag: string) => unknown).bind(doc);
  Object.assign(doc, {
    body,
    querySelectorAll: (selector: string) => html.querySelectorAll(selector),
    querySelector: (selector: string) => html.querySelector(selector),
    createElement: (tag: string) => (tag === 'style' ? createStyle(tag) : new El(tag)),
    createElementNS: (_: string, tag: string) => new El(tag),
  });
  return body;
}