LiveTuner

export interface TunerKnob {
  /** Entity the knob works on. Defaults to the tuner's `target`. */
  entity?: string;
  /** Component type name as the scene file spells it, e.g. 'CarDrive'. */
  component: string;
  /** Numeric field on that component, e.g. 'steerRate'. */
  field: string;
  /** Row label. Defaults to the field name. */
  label?: string;
  min: number;
  max: number;
  /** Slider step. Defaults to a hundredth of the range. */
  step?: number;
}

/** Saved and copied values, keyed `Component.field` (or `Entity/Component.field` for a knob on another entity). */
export type TunerValues = Record<string, number>;

export const knobKey = (k: Pick<TunerKnob, 'entity' | 'component' | 'field'>): string =>
  `${k.entity ? `${k.entity}/` : ''}${k.component}.${k.field}`;

/** The entity a knob works on. */
export const knobEntity = (k: Pick<TunerKnob, 'entity'>, target: string): string => k.entity || target;

export function knobStep(k: TunerKnob): number {
  return k.step && k.step > 0 ? k.step : (k.max - k.min) / 100;
}

/** Clamp to the knob's range and snap to its step (from `min`). */
export function snapToKnob(k: TunerKnob, value: number): number {
  if (!Number.isFinite(value)) return k.min;
  const step = knobStep(k);
  const v = Math.min(k.max, Math.max(k.min, value));
  const snapped = k.min + Math.round((v - k.min) / step) * step;
  // Trim float noise from the multiply (0.1 * 3 = 0.30000000000000004).
  const places = Math.max(0, Math.min(6, Math.ceil(-Math.log10(step)) + 1));
  return Math.min(k.max, Number(snapped.toFixed(places)));
}

export function toSceneShape(
  knobs: readonly TunerKnob[],
  values: TunerValues,
  target: string,
): Record<string, Record<string, Record<string, number>>> {
  const out: Record<string, Record<string, Record<string, number>>> = {};
  for (const k of knobs) {
    const v = values[knobKey(k)];
    if (v === undefined) continue;
    ((out[knobEntity(k, target)] ??= {})[k.component] ??= {})[k.field] = v;
  }
  return out;
}

/** Read saved values back, keeping only numbers for knobs that still exist, snapped to their ranges. */
export function parseSaved(knobs: readonly TunerKnob[], raw: string | null | undefined): TunerValues {
  if (!raw) return {};
  let data: unknown;
  try {
    data = JSON.parse(raw);
  } catch {
    return {};
  }
  if (!data || typeof data !== 'object') return {};
  const out: TunerValues = {};
  for (const k of knobs) {
    const v = (data as Record<string, unknown>)[knobKey(k)];
    if (typeof v === 'number' && Number.isFinite(v)) out[knobKey(k)] = snapToKnob(k, v);
  }
  return out;
}

import { Component } from '@babylonjsmarket/ecs';
import type { TunerKnob } from './LiveTuner.core';

export interface LiveTunerInput {
  /** Entity whose components the sliders move. */
  target?: string;
  /** URL query flag that opens the panel on load (`?tune`). Empty = never from the URL. */
  urlFlag?: string;
  /** KeyboardEvent.code that shows and hides the panel. Empty = no key. */
  toggleKey?: string;
  /** Panel heading. */
  title?: string;
  /** Browser storage key the values are kept under. Empty = `liveTuner:<target>`. */
  storageKey?: string;
  /** The sliders. */
  knobs?: TunerKnob[];
}

export class LiveTunerComponent extends Component {
  static componentType = 'LiveTuner';

  target: string;
  urlFlag: string;
  toggleKey: string;
  title: string;
  storageKey: string;
  knobs: TunerKnob[];

  constructor(data: LiveTunerInput = {}) {
    super();
    this.target = data.target ?? 'Player';
    this.urlFlag = data.urlFlag ?? 'tune';
    this.toggleKey = data.toggleKey ?? 'Backquote';
    this.title = data.title ?? 'Tuning';
    this.storageKey = data.storageKey ?? '';
    this.knobs = (data.knobs ?? []).map((k) => ({ ...k }));
  }

  /** Where the values are kept in the browser. */
  storeKey(): string {
    return this.storageKey || `liveTuner:${this.target}`;
  }

  serialize(): LiveTunerInput {
    return {
      target: this.target,
      urlFlag: this.urlFlag,
      toggleKey: this.toggleKey,
      title: this.title,
      storageKey: this.storageKey,
      knobs: this.knobs.map((k) => ({ ...k })),
    };
  }
}

export type { TunerKnob, TunerValues } from './LiveTuner.core';

import { System, componentTypeId } from '@babylonjsmarket/ecs';
import type { Component, Entity, EventBus } from '@babylonjsmarket/ecs';
import { knobEntity, knobKey, knobStep, parseSaved, snapToKnob, toSceneShape, type TunerKnob, type TunerValues } from './LiveTuner.core';
import { LiveTunerComponent } from './LiveTuner.defs';

interface Panel {
  root: HTMLElement;
  rows: Map<string, { input: HTMLInputElement; out: HTMLElement; knob: TunerKnob }>;
  status: HTMLElement;
}

interface Runtime {
  /** The scene's own values, captured before anything is applied. */
  original: TunerValues;
  /** Values the user has set, saved in the browser. */
  values: TunerValues;
  /** Entity id → the live entity the values were last applied to. */
  appliedTo: Map<string, Entity>;
  panel: Panel | null;
  wanted: boolean;
  sinceRefresh: number;
}

const REFRESH_EVERY = 0.3;

export class LiveTunerSystem extends System {
  protected query = { required: [LiveTunerComponent] };
  private runtime = new WeakMap<LiveTunerComponent, Runtime>();
  private keyHandler: ((e: KeyboardEvent) => void) | null = null;

  constructor(eventBus: EventBus) {
    super(eventBus);
    // Tuning goes on while the game is paused.
    this.pauseable = false;
  }

  protected onInitialize(): void {
    if (typeof window === 'undefined') return;
    this.keyHandler = (e: KeyboardEvent) => {
      for (const entity of this.entities) {
        const c = entity.get(LiveTunerComponent);
        if (!c || !c.toggleKey || e.code !== c.toggleKey) continue;
        const rt = this.getRuntime(c);
        rt.wanted = !rt.wanted;
        if (rt.panel) rt.panel.root.style.display = rt.wanted ? '' : 'none';
      }
    };
    window.addEventListener('keydown', this.keyHandler);
  }

  protected onShutdown(): void {
    if (this.keyHandler && typeof window !== 'undefined') window.removeEventListener('keydown', this.keyHandler);
    this.keyHandler = null;
    for (const entity of this.entities) {
      const c = entity.get(LiveTunerComponent);
      const rt = c ? this.runtime.get(c) : undefined;
      rt?.panel?.root.remove();
    }
  }

  protected onEntityRemoved(entity: Entity): void {
    const c = entity.get(LiveTunerComponent);
    const rt = c ? this.runtime.get(c) : undefined;
    rt?.panel?.root.remove();
    if (rt) rt.panel = null;
  }

  protected onUpdate(dt: number): void {
    for (const entity of this.entities) {
      const c = entity.get(LiveTunerComponent);
      if (!c) continue;
      const rt = this.getRuntime(c);
      // A new (or newly spawned) entity gets the saved values; its own values
      // are remembered first, for Reset.
      for (const id of this.entityIds(c)) {
        const live = this.world?.getEntity(id);
        if (!live || rt.appliedTo.get(id) === live) continue;
        for (const k of c.knobs) {
          if (knobEntity(k, c.target) !== id) continue;
          const v = this.readOn(live, k);
          if (v !== undefined && !(knobKey(k) in rt.original)) rt.original[knobKey(k)] = v;
          const saved = rt.values[knobKey(k)];
          if (saved !== undefined) this.writeOn(live, k, saved);
        }
        rt.appliedTo.set(id, live);
      }
      if (rt.wanted && !rt.panel && typeof document !== 'undefined') rt.panel = this.buildPanel(c, rt);
      rt.sinceRefresh += dt;
      if (rt.panel && rt.sinceRefresh >= REFRESH_EVERY) {
        rt.sinceRefresh = 0;
        this.refresh(c, rt);
      }
    }
  }

  // ------------------------------------------------------------------
  // Fields
  // ------------------------------------------------------------------

  private componentOn(entity: Entity, type: string): Component | undefined {
    return entity.getComponents().find((x) => componentTypeId(x.constructor as never) === type);
  }

  private entityIds(c: LiveTunerComponent): Set<string> {
    return new Set(c.knobs.map((k) => knobEntity(k, c.target)));
  }

  private readOn(entity: Entity, k: TunerKnob): number | undefined {
    const comp = this.componentOn(entity, k.component) as unknown as Record<string, unknown> | undefined;
    const v = comp?.[k.field];
    return typeof v === 'number' ? v : undefined;
  }

  private writeOn(entity: Entity, k: TunerKnob, value: number): void {
    const comp = this.componentOn(entity, k.component) as unknown as Record<string, unknown> | undefined;
    if (comp && typeof comp[k.field] === 'number') comp[k.field] = value;
  }

  /** The knob's field on its live entity, if both exist. */
  private read(c: LiveTunerComponent, rt: Pick<Runtime, 'appliedTo'>, k: TunerKnob): number | undefined {
    const e = rt.appliedTo.get(knobEntity(k, c.target));
    return e ? this.readOn(e, k) : undefined;
  }

  private write(c: LiveTunerComponent, rt: Pick<Runtime, 'appliedTo'>, k: TunerKnob, value: number): void {
    const e = rt.appliedTo.get(knobEntity(k, c.target));
    if (e) this.writeOn(e, k, value);
  }

  // ------------------------------------------------------------------
  // Storage
  // ------------------------------------------------------------------

  private load(c: LiveTunerComponent): TunerValues {
    try {
      return parseSaved(c.knobs, globalThis.localStorage?.getItem(c.storeKey()));
    } catch {
      return {};
    }
  }

  private save(c: LiveTunerComponent, values: TunerValues): void {
    try {
      if (Object.keys(values).length) globalThis.localStorage?.setItem(c.storeKey(), JSON.stringify(values));
      else globalThis.localStorage?.removeItem(c.storeKey());
    } catch {
      /* private mode or blocked storage: the tune just won't outlive the page */
    }
  }

  private getRuntime(c: LiveTunerComponent): Runtime {
    let rt = this.runtime.get(c);
    if (!rt) {
      let wanted = false;
      try {
        wanted = !!c.urlFlag && typeof location !== 'undefined' && new URLSearchParams(location.search).has(c.urlFlag);
      } catch {
        wanted = false;
      }
      rt = { original: {}, values: this.load(c), appliedTo: new Map(), panel: null, wanted, sinceRefresh: 0 };
      this.runtime.set(c, rt);
    }
    return rt;
  }

  // ------------------------------------------------------------------
  // Panel
  // ------------------------------------------------------------------

  private buildPanel(c: LiveTunerComponent, rt: Runtime): Panel {
    const root = document.createElement('div');
    root.className = 'live-tuner';
    root.setAttribute('data-live-tuner', c.target);
    Object.assign(root.style, {
      position: 'fixed', top: '104px', right: '12px', zIndex: '60', width: '300px', maxWidth: 'calc(100vw - 24px)',
      maxHeight: 'calc(100vh - 180px)', overflowY: 'auto', padding: '10px 12px', borderRadius: '10px',
      background: 'rgba(12,14,18,0.86)', color: '#e8e8e8', font: '12px/1.35 system-ui, sans-serif',
      boxShadow: '0 6px 24px rgba(0,0,0,0.45)', pointerEvents: 'auto', touchAction: 'pan-y',
    } satisfies Partial<CSSStyleDeclaration>);
    const head = document.createElement('div');
    Object.assign(head.style, { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '6px' });
    const title = document.createElement('strong');
    title.textContent = c.title;
    const close = document.createElement('button');
    close.textContent = '×';
    close.title = 'Hide';
    this.styleButton(close);
    close.onclick = () => {
      rt.wanted = false;
      root.style.display = 'none';
    };
    head.append(title, close);
    root.append(head);

    const rows = new Map<string, { input: HTMLInputElement; out: HTMLElement; knob: TunerKnob }>();
    let section = '';
    for (const k of c.knobs) {
      const where = knobEntity(k, c.target);
      const heading = where === c.target ? k.component : `${where} · ${k.component}`;
      if (heading !== section) {
        section = heading;
        const h = document.createElement('div');
        h.textContent = section;
        Object.assign(h.style, { margin: '8px 0 2px', opacity: '0.65', textTransform: 'uppercase', letterSpacing: '0.08em', fontSize: '10px' });
        root.append(h);
      }
      const row = document.createElement('label');
      Object.assign(row.style, { display: 'grid', gridTemplateColumns: '1fr 52px', gap: '0 8px', alignItems: 'center', margin: '2px 0' });
      const name = document.createElement('span');
      name.textContent = k.label ?? k.field;
      const out = document.createElement('span');
      Object.assign(out.style, { textAlign: 'right', fontVariantNumeric: 'tabular-nums' });
      const input = document.createElement('input');
      input.type = 'range';
      input.min = String(k.min);
      input.max = String(k.max);
      input.step = String(knobStep(k));
      Object.assign(input.style, { gridColumn: '1 / span 2', width: '100%' });
      input.oninput = () => {
        const v = snapToKnob(k, Number(input.value));
        rt.values[knobKey(k)] = v;
        this.write(c, rt, k, v);
        out.textContent = String(v);
        this.save(c, rt.values);
      };
      // Arrow keys on a focused slider would also steer the car.
      input.onchange = () => input.blur();
      row.append(name, out, input);
      root.append(row);
      rows.set(knobKey(k), { input, out, knob: k });
    }

    const foot = document.createElement('div');
    Object.assign(foot.style, { display: 'flex', gap: '6px', marginTop: '10px', alignItems: 'center', flexWrap: 'wrap' });
    const copy = document.createElement('button');
    copy.textContent = 'Copy';
    copy.title = 'Copy the values as scene JSON';
    this.styleButton(copy);
    const reset = document.createElement('button');
    reset.textContent = 'Reset';
    reset.title = "Back to the scene's own values";
    this.styleButton(reset);
    const status = document.createElement('span');
    Object.assign(status.style, { opacity: '0.7', fontSize: '11px' });
    copy.onclick = () => {
      const json = this.copyText(c, rt);
      const done = () => (status.textContent = 'Copied');
      const fail = () => {
        status.textContent = 'Select and copy:';
        const box = document.createElement('textarea');
        box.value = json;
        Object.assign(box.style, { width: '100%', height: '90px', marginTop: '6px', font: '11px monospace' });
        root.append(box);
        box.select();
      };
      try {
        const p = navigator.clipboard?.writeText(json);
        if (p) p.then(done, fail);
        else fail();
      } catch {
        fail();
      }
    };
    reset.onclick = () => {
      rt.values = {};
      this.save(c, rt.values);
      for (const k of c.knobs) {
        const v = rt.original[knobKey(k)];
        if (v !== undefined) this.write(c, rt, k, v);
      }
      status.textContent = 'Reset';
      this.refresh(c, rt);
    };
    foot.append(copy, reset, status);
    root.append(foot);

    (document.body ?? document.documentElement).append(root);
    const panel = { root, rows, status };
    this.refresh(c, { ...rt, panel });
    return panel;
  }

  /** The values on the entities now, as scene JSON. */
  copyText(c: LiveTunerComponent, rt: Pick<Runtime, 'appliedTo'>): string {
    const now: TunerValues = {};
    for (const k of c.knobs) {
      const v = this.read(c, rt, k);
      if (v !== undefined) now[knobKey(k)] = v;
    }
    return JSON.stringify(toSceneShape(c.knobs, now, c.target), null, 2);
  }

  /** Show what the fields hold now — another system (a refit, a respawn) may have moved them. */
  private refresh(c: LiveTunerComponent, rt: Runtime): void {
    if (!rt.panel) return;
    for (const { input, out, knob } of rt.panel.rows.values()) {
      const v = this.read(c, rt, knob);
      if (v === undefined) {
        out.textContent = '—';
        input.disabled = true;
        continue;
      }
      input.disabled = false;
      if (typeof document !== 'undefined' && document.activeElement === input) continue;
      input.value = String(v);
      out.textContent = String(Number(v.toFixed(3)));
    }
  }

  private styleButton(b: HTMLButtonElement): void {
    Object.assign(b.style, {
      background: 'rgba(255,255,255,0.1)', color: 'inherit', border: '1px solid rgba(255,255,255,0.2)',
      borderRadius: '6px', padding: '3px 10px', font: 'inherit', cursor: 'pointer',
    } satisfies Partial<CSSStyleDeclaration>);
  }
}

export { LiveTunerComponent, type LiveTunerInput, type TunerKnob, type TunerValues } from './LiveTuner.defs';
export { knobKey, snapToKnob, toSceneShape, parseSaved } from './LiveTuner.core';