// A DOM small enough to read, implementing exactly what compiled Solid touches and nothing else.
// `bun test` ships no DOM and no DOM library may be added, so an island — the only client-side
// code Ultimate ships — was untestable without one. `generate: 'dom'` builds every element from
// `_$template("<button …>")`, so a stub without a parsed `<template>` cannot run one line of it.
//
// Two neighbours at the 500-line ceiling: `island-selector.ts` is the selector grammar `find`
// and `all` read, and `island-observers.ts` is the `ResizeObserver` an island measures with.

import { decodeEntities } from './island-html-entities';
import type { FakeResizeObserver } from './island-observers';
import { createResizeObservers, rectOf } from './island-observers';
import { matchesSelector, parseSelector } from './island-selector';

/**
 * A node belongs to ONE parent, and the DOM enforces that by moving it: every attach detaches the
 * node from wherever it was first. Not a nicety — `reconcileArrays` re-orders a `<For>` by calling
 * `parentNode.insertBefore(child, ref)` on a child already in that parent (`solid-js/web`'s
 * `web.js:155`, `:163`, `:184`), so an attach that only pushes leaves the node in BOTH positions
 * and a five-row list becomes ten in an order no assertion can read back.
 */
function detach(node: FakeNode): void {
  const parent = node.parentNode;
  if (parent === null) return;
  const at = parent.children.indexOf(node);
  if (at >= 0) parent.children.splice(at, 1);
  node.parentNode = null;
}

export class FakeNode {
  readonly nodeType: number = 1;
  children: FakeNode[] = [];
  parentNode: FakeNode | null = null;
  appendChild(child: FakeNode): FakeNode {
    detach(child);
    child.parentNode = this;
    this.children.push(child);
    return child;
  }
  /** `ref === child` is the spec's own no-op, spelled the way the spec spells it — the reference
   *  becomes the node's next sibling, so a node asked to precede itself lands back where it was. */
  insertBefore(child: FakeNode, ref: FakeNode | null): FakeNode {
    const target = ref === child ? child.nextSibling : ref;
    detach(child);
    const at = target === null ? -1 : this.children.indexOf(target);
    child.parentNode = this;
    this.children.splice(at < 0 ? this.children.length : at, 0, child);
    return child;
  }
  /** The node that leaves keeps no parent: `reconcileArrays` calls `.remove()` on nodes it has
   *  already replaced, and a stale `parentNode` would take a live row out of the list instead. */
  replaceChild(next: FakeNode, prev: FakeNode): FakeNode {
    // The guard comes BEFORE the detach: a call that replaces nothing must move nothing either,
    // and detaching `next` first would take it out of the tree it was in and put it nowhere.
    if (next === prev || this.children.indexOf(prev) < 0) return prev;
    detach(next);
    // Read the index again — detaching `next` out of THIS parent shifts everything after it.
    this.children[this.children.indexOf(prev)] = next;
    next.parentNode = this;
    prev.parentNode = null;
    return prev;
  }
  /** A node that is not a child is left whole — the DOM throws `NotFoundError`, and clearing the
   *  parent of a node belonging to someone else would be the worse of the two answers. */
  removeChild(child: FakeNode): FakeNode {
    const at = this.children.indexOf(child);
    if (at < 0) return child;
    this.children.splice(at, 1);
    child.parentNode = null;
    return child;
  }
  remove(): void {
    this.parentNode?.removeChild(this);
  }
  cloneNode(deep?: boolean): FakeNode {
    const copy = new FakeNode();
    if (deep === true) for (const child of this.children) copy.appendChild(child.cloneNode(true));
    return copy;
  }
  get childNodes(): readonly FakeNode[] {
    return this.children;
  }
  get firstChild(): FakeNode | null {
    return this.children[0] ?? null;
  }
  get nextSibling(): FakeNode | null {
    const siblings = this.parentNode?.children ?? [];
    return siblings[siblings.indexOf(this) + 1] ?? null;
  }
  get textContent(): string {
    return this.children.map((child) => child.textContent).join('');
  }
  /** The dropped children are DETACHED, not merely forgotten: `el.textContent = ''` opens every
   *  island's `mount` and closes Solid's `render` disposer (`web.js:201`), and a shell node left
   *  holding its old parent is a node two trees claim. */
  set textContent(text: string) {
    for (const child of this.children) child.parentNode = null;
    this.children = [];
    if (text !== '') this.appendChild(new FakeText(text));
  }
}

/** `data`, not a private field: Solid updates a text node in place through `node.data = value`,
 *  and a stub without it reports a mount that renders once and never re-renders. */
export class FakeText extends FakeNode {
  override readonly nodeType = 3;
  constructor(public data: string) {
    super();
  }
  override get textContent(): string {
    return this.data;
  }
  override set textContent(text: string) {
    this.data = text;
  }
  override cloneNode(): FakeText {
    return new FakeText(this.data);
  }
}

/**
 * The three writes compiled Solid makes to `style`, over ONE declaration map: `setProperty` and
 * `removeProperty` (`setStyleProperty`, `solid-js/web`'s `web.js:302`, which is what the compiler
 * emits per dynamic entry of a `style={{ … }}` prop) and `cssText` (its `style()` runtime, for a
 * whole-object or string prop). It RECORDS: `<Form>`, `<Stack>`, `<Grid>` and `<Container>` each
 * set a custom property, so `style = {}` killed every one of them inside `mount`, and a no-op that
 * only stopped the crash would leave "the component set `--form-gap`" untestable instead — the
 * same shape of hole one layer down.
 */
export class FakeStyle {
  /** Declaration order, as `CSSStyleDeclaration` enumerates. */
  readonly properties = new Map<string, string>();

  setProperty(name: string, value: string): void {
    this.properties.set(name, String(value));
  }

  /** The old value, as the DOM's does — Solid ignores it, a test asserting a removal need not. */
  removeProperty(name: string): string {
    const previous = this.properties.get(name) ?? '';
    this.properties.delete(name);
    return previous;
  }

  getPropertyValue(name: string): string {
    return this.properties.get(name) ?? '';
  }

  get cssText(): string {
    return [...this.properties].map(([name, value]) => `${name}: ${value};`).join(' ');
  }

  /** A declaration with no `:` is dropped rather than stored, which is also how Solid's own reset
   *  lands: `style()` assigns `undefined` here to clear, and the DOM parses that to nothing. */
  set cssText(text: string) {
    this.properties.clear();
    for (const declaration of String(text).split(';')) {
      const at = declaration.indexOf(':');
      if (at > 0) {
        this.properties.set(declaration.slice(0, at).trim(), declaration.slice(at + 1).trim());
      }
    }
  }
}

/**
 * Backed by the element's `class` ATTRIBUTE rather than a list of its own: `classList.toggle` is
 * emitted inline by the compiler for `classList={{ … }}` while `class` goes through `className`,
 * and two representations would let one element answer a test two ways. `toggle` is the call Solid
 * makes and `add` was the one this stood in for — the double implemented the method nothing calls.
 */
export class FakeClassList {
  constructor(private readonly element: FakeElement) {}

  private get names(): string[] {
    return this.element.className.split(/\s+/).filter((name) => name.length > 0);
  }

  private write(names: readonly string[]): void {
    this.element.className = names.join(' ');
  }

  add(...names: readonly string[]): void {
    this.write([...this.names, ...names.filter((name) => !this.contains(name))]);
  }

  remove(...names: readonly string[]): void {
    this.write(this.names.filter((name) => !names.includes(name)));
  }

  contains(name: string): boolean {
    return this.names.includes(name);
  }

  toggle(name: string, force?: boolean): boolean {
    const next = force ?? !this.contains(name);
    if (next) this.add(name);
    else this.remove(name);
    return next;
  }
}

/** One `addEventListener` call, alive until its own `removeEventListener`. */
interface Registration {
  readonly fn: (event: unknown) => void;
  removed: boolean;
}

export class FakeElement extends FakeNode {
  readonly attributes = new Map<string, string>();
  /**
   * EVERY listener per type, in the order added, deduplicated by identity — the DOM's own rule. One
   * per type was a double that lost listeners: `@ultimat3/ui`'s Menu closes on an Escape it
   * registers on `document`, and its focus trap's keydown, registered next, replaced it.
   *
   * A REGISTRATION per add, not the bare function, so a dispatch can tell "removed before its
   * turn" (skipped, as a browser skips it) from "removed and added again" (a new registration the
   * running dispatch never saw, so also skipped) — a `Set` of functions answers both as present.
   */
  readonly #listeners = new Map<string, Map<(event: unknown) => void, Registration>>();
  /** Plain object, so `delete el.dataset.theme` behaves as the DOM's `DOMStringMap` does. */
  readonly dataset: Record<string, string> = {};
  readonly classList: FakeClassList = new FakeClassList(this);
  readonly style = new FakeStyle();
  /** Properties, not attributes: Solid assigns both of these straight onto the node. */
  value = '';
  checked = false;
  constructor(readonly tagName: string) {
    super();
  }
  get nodeName(): string {
    return this.tagName.toUpperCase();
  }
  /** `_$className` assigns the PROPERTY, never the attribute — class assertions read this. */
  get className(): string {
    return this.attributes.get('class') ?? '';
  }
  set className(value: string) {
    this.attributes.set('class', String(value));
  }
  /**
   * `style` is the declaration map wearing an attribute's name, in all four calls. Both spellings
   * are Solid's own: the compiler bakes a STATIC style entry into the template's `style=` attribute
   * — which `parseHtml` sets here — and clears a whole-object prop through `removeAttribute`
   * (`setAttribute(node, 'style')` with no value, `web.js:237`), while every dynamic entry goes to
   * `style.setProperty`. Two stores would let one element answer `getAttribute('style')` and
   * `style.getPropertyValue` differently.
   */
  setAttribute(name: string, value: string): void {
    if (name === 'style') this.style.cssText = String(value);
    else this.attributes.set(name, String(value));
  }
  getAttribute(name: string): string | null {
    if (name === 'style') return this.style.properties.size === 0 ? null : this.style.cssText;
    return this.attributes.get(name) ?? null;
  }
  hasAttribute(name: string): boolean {
    return name === 'style' ? this.style.properties.size > 0 : this.attributes.has(name);
  }
  removeAttribute(name: string): void {
    if (name === 'style') this.style.properties.clear();
    else this.attributes.delete(name);
  }
  addEventListener(name: string, fn: (event: unknown) => void): void {
    let held = this.#listeners.get(name);
    if (held === undefined) {
      held = new Map();
      this.#listeners.set(name, held);
    }
    if (!held.has(fn)) held.set(fn, { fn, removed: false });
  }
  /** By IDENTITY: a different function — even one that does the same thing — removes nothing. */
  removeEventListener(name: string, fn: (event: unknown) => void): void {
    const held = this.#listeners.get(name);
    const registration = held?.get(fn);
    if (held === undefined || registration === undefined) return;
    registration.removed = true;
    held.delete(fn);
    if (held.size === 0) this.#listeners.delete(name);
  }
  /** Every listener of `name`, as one call — `undefined` when there is none to run. */
  listenerFor(name: string): ((event: unknown) => void) | undefined {
    const held = this.#listeners.get(name);
    if (held === undefined || held.size === 0) return undefined;
    // The registrations as of NOW, for the DOM's rule: one added during the dispatch waits for the
    // next, and one removed before its turn does not run.
    const snapshot = [...held.values()];
    return (event: unknown): void => {
      for (const registration of snapshot) {
        if (!registration.removed) registration.fn(event);
      }
    };
  }
  override cloneNode(deep?: boolean): FakeElement {
    const copy = new FakeElement(this.tagName);
    for (const [name, value] of this.attributes) copy.attributes.set(name, value);
    // The declarations too, or a template's static `style=` survives the parse and dies at the
    // `importNode` every compiled island mounts through.
    for (const [name, value] of this.style.properties) copy.style.properties.set(name, value);
    if (deep === true) for (const child of this.children) copy.appendChild(child.cloneNode(true));
    return copy;
  }
  /**
   * The box, as a test set it. Every field is 0 until something writes it: this DOM lays nothing
   * out, and a number invented here would be a fact the harness made up. An island reads them the
   * way a virtualized list does — `clientHeight` for the window, `scrollTop` in a scroll handler,
   * `scrollHeight` to know the whole — and a stub without them answered `undefined`, which
   * `Math.floor` turns into `NaN` rows with no throw to point at it. Plain writable fields, so a
   * test sets `list.clientHeight = 400` directly, or through `mounted.resize`, which also notifies
   * the island's `ResizeObserver`.
   */
  clientWidth = 0;
  clientHeight = 0;
  offsetWidth = 0;
  offsetHeight = 0;
  scrollWidth = 0;
  scrollHeight = 0;
  scrollTop = 0;
  scrollLeft = 0;
  /** Derived from the offset box: no layout, so an element is always at the origin. */
  getBoundingClientRect(): ReturnType<typeof rectOf> {
    return rectOf(this.offsetWidth, this.offsetHeight);
  }
  /**
   * Both spellings the DOM takes — `scrollTo({ top })` and `scrollTo(left, top)` — writing the
   * offsets and running the island's `scroll` listener, which is how a virtualized list learns its
   * window moved. `scroll` is not in Solid's delegated set, so `onScroll` compiles to
   * `addEventListener('scroll', …)` and only that listener is looked for.
   */
  scrollTo(options: { top?: number; left?: number } | number, top?: number): void {
    if (typeof options === 'number') {
      this.scrollLeft = options;
      if (top !== undefined) this.scrollTop = top;
    } else {
      if (options.left !== undefined) this.scrollLeft = options.left;
      if (options.top !== undefined) this.scrollTop = options.top;
    }
    this.listenerFor('scroll')?.({ currentTarget: this, target: this });
  }
  /**
   * A compound of tag, `#id`, `.class`, `[attr]` and `[attr="value"]`, joined by the descendant
   * and child combinators — `island-selector.ts` — anywhere in the subtree. Anything richer throws
   * `X_TEST_ISLAND_SELECTOR_UNSUPPORTED` rather than matching nothing.
   *
   * DESCENDANTS only, never `this`: the DOM's own `querySelector` does not match the element it is
   * called on, and a host `<div>` answering `find('div')` reports the container the test built
   * instead of the markup the island rendered into it.
   */
  querySelectorAll(selector: string): readonly FakeElement[] {
    const parsed = parseSelector(selector);
    const found: FakeElement[] = [];
    const walk = (node: FakeNode): void => {
      for (const child of node.children) {
        if (child instanceof FakeElement && matchesSelector(child, parsed)) found.push(child);
        walk(child);
      }
    };
    walk(this);
    return found;
  }
  querySelector(selector: string): FakeElement | null {
    return this.querySelectorAll(selector)[0] ?? null;
  }
}

export class FakeTemplate extends FakeElement {
  content: FakeNode = new FakeNode();
  constructor() {
    super('template');
  }
  set innerHTML(html: string) {
    this.content = parseHtml(html);
  }
}

// The whole HTML void-element set. It held six, so `<picture><source><img></picture>` parsed the
// img INSIDE the source — a tree no browser builds, and one an island's querySelector disagrees with.
const VOID_TAGS = new Set([
  'area',
  'base',
  'br',
  'col',
  'embed',
  'hr',
  'img',
  'input',
  'link',
  'meta',
  'param',
  'source',
  'track',
  'wbr',
]);
// Group 6 is a comment: Solid compiles `<!>` as the marker its `nextSibling` walk counts, so it must
// be a node — read as text it merged into its neighbours and the walk landed one node short.
const TOKEN =
  /<(\/?)([a-zA-Z][\w-]*)((?:\s+[^\s=/>]+(?:=(?:"[^"]*"|'[^']*'|[^\s>]+))?)*)\s*(\/?)>|([^<]+)|(<!(?:--[\s\S]*?--|[^>]*)>)/g;
const ATTRIBUTE = /([^\s=/>]+)(?:=(?:"([^"]*)"|'([^']*)'|([^\s>]+)))?/g;

/** Only what `babel-preset-solid` emits into a template: tags, static attributes and text. */
export function parseHtml(html: string): FakeNode {
  const root = new FakeNode();
  const open: FakeNode[] = [root];
  for (const match of html.matchAll(TOKEN)) {
    const parent = open[open.length - 1] as FakeNode;
    if (match[5] !== undefined || match[6] !== undefined) {
      parent.appendChild(new FakeText(decodeEntities(match[5] ?? '')));
      continue;
    }
    if (match[1] === '/') {
      if (open.length > 1) open.pop();
      continue;
    }
    const element = new FakeElement(match[2] as string);
    for (const attr of (match[3] ?? '').matchAll(ATTRIBUTE)) {
      if (attr[1] !== undefined)
        element.setAttribute(attr[1], decodeEntities(attr[2] ?? attr[3] ?? attr[4] ?? ''));
    }
    parent.appendChild(element);
    if (match[4] !== '/' && !VOID_TAGS.has(element.tagName)) open.push(element);
  }
  return root;
}

export interface IslandDocument {
  readonly documentElement: FakeElement;
  readonly globals: Readonly<Record<string, unknown>>;
  /** Every `ResizeObserver` this document's island constructed and has not disconnected. */
  readonly resizeObservers: Set<FakeResizeObserver<FakeElement>>;
}

/**
 * A fresh `<html>` and the globals a compiled island reads, built per mount rather than once per
 * module: `document.documentElement.dataset.theme` is state one island writes and the next would
 * otherwise inherit.
 */
export function createIslandDocument(): IslandDocument {
  const documentElement = new FakeElement('html');
  // Per document, for the reason the document itself is: an observer the last mount's island
  // never disconnected must not hear the next mount's `resize`.
  const { registry: resizeObservers, ResizeObserver } = createResizeObservers<FakeElement>();
  const document = {
    documentElement,
    createElement: (tag: string): FakeElement =>
      tag === 'template' ? new FakeTemplate() : new FakeElement(tag),
    createElementNS: (_ns: string, tag: string): FakeElement => new FakeElement(tag),
    createTextNode: (text: string): FakeText => new FakeText(text),
    createComment: (): FakeText => new FakeText(''),
    importNode: (node: FakeNode, deep?: boolean): FakeNode => node.cloneNode(deep),
    // The document's listeners are the documentElement's, because this DOM has no bubbling at all
    // and a no-op here made a whole shape of component undrivable: `@ultimat3/ui`'s Menu, Popover
    // and focus trap each close on an Escape registered on `document`, never on their own node, so
    // a test could mount one and never shut it. `fire(mounted.documentElement, 'keydown', …)`
    // reaches them through the surface `MountedIsland` already exposes.
    addEventListener: (name: string, fn: (event: unknown) => void): void =>
      documentElement.addEventListener(name, fn),
    removeEventListener: (name: string, fn: (event: unknown) => void): void =>
      documentElement.removeEventListener(name, fn),
  };
  return {
    documentElement,
    resizeObservers,
    globals: {
      // Solid's event delegation reads `window` before it reads anything else.
      window: globalThis,
      Element: FakeElement,
      SVGElement: FakeElement,
      Node: FakeNode,
      Text: FakeText,
      document,
      // A constructor, so an island's `typeof ResizeObserver === 'function'` guard takes the
      // branch a browser takes. `window.ResizeObserver` resolves through `globalThis` above.
      ResizeObserver,
    },
  };
}

/** The delegated handler Solid parks on the node as `$$click`, or EVERY listener attached with
 *  `addEventListener` — a compiled island uses one or the other and a driver must accept both. */
export function handlerFor(
  element: FakeElement,
  type: string,
): ((event: unknown) => void) | undefined {
  const delegated = (element as unknown as Record<string, unknown>)[`$$${type}`];
  if (typeof delegated === 'function') return delegated as (event: unknown) => void;
  return element.listenerFor(type);
}