HemisphericLight

import { runMechanicContract } from '@babylonjsmarket/ecs/testing';
import {
  HemisphericLightComponent,
  HemisphericLightSystem,
  HemisphericLightEvents,
} from './HemisphericLight';

runMechanicContract({
  name: 'HemisphericLight',
  componentClass: HemisphericLightComponent,
  systemClass: HemisphericLightSystem,
  sampleInput: { intensity: 0.7 },
  events: {
    output: [HemisphericLightEvents.CREATED],
  },
});

// @vitest-environment jsdom
import { describe, it, expect, vi } from 'vitest';
import { render, fireEvent } from '@solidjs/testing-library';
import { HemisphericLightPanel, type HemisphericLightParams } from './HemisphericLight.panel';

function makeParams(): HemisphericLightParams {
  return {
    intensity: 0.4,
    directionX: 0, directionY: 1, directionZ: 0,
    diffuseR: 1, diffuseG: 1, diffuseB: 1,
    groundR: 0.3, groundG: 0.3, groundB: 0.4,
    specularR: 0, specularG: 0, specularB: 0,
  };
}

describe('HemisphericLightPanel', () => {
  it('mounts and shows Intensity', () => {
    const { container } = render(() => (
      <HemisphericLightPanel params={makeParams()} setParam={vi.fn()} onReset={vi.fn()} />
    ));
    expect(container.textContent).toContain('Intensity');
  });

  it('moving the intensity slider calls setParam', () => {
    const setParam = vi.fn();
    const { getAllByRole } = render(() => (
      <HemisphericLightPanel params={makeParams()} setParam={setParam} onReset={vi.fn()} />
    ));
    fireEvent.input(
      (getAllByRole('slider') as HTMLInputElement[])[0],
      { target: { value: '1.2' } },
    );
    expect(setParam).toHaveBeenCalledWith('intensity', 1.2);
  });

  it('Reset fires onReset', () => {
    const onReset = vi.fn();
    const { getByText } = render(() => (
      <HemisphericLightPanel params={makeParams()} setParam={vi.fn()} onReset={onReset} />
    ));
    fireEvent.click(getByText(/reset/i));
    expect(onReset).toHaveBeenCalled();
  });

  it('each direction slider forwards its own axis through setParam', () => {
    const setParam = vi.fn();
    const { getAllByRole } = render(() => (
      <HemisphericLightPanel params={makeParams()} setParam={setParam} onReset={vi.fn()} />
    ));
    // Slider order: Intensity, Direction X, Direction Y, Direction Z.
    const sliders = getAllByRole('slider') as HTMLInputElement[];
    const axes: Array<[number, keyof HemisphericLightParams, string]> = [
      [1, 'directionX', '0.4'],
      [2, 'directionY', '-0.6'],
      [3, 'directionZ', '0.9'],
    ];
    for (const [idx, key, value] of axes) {
      fireEvent.input(sliders[idx], { target: { value } });
      expect(setParam).toHaveBeenCalledWith(key, parseFloat(value));
    }
  });

  it('each ColorControl forwards its three channels through setParam', () => {
    const setParam = vi.fn();
    const { getByText } = render(() => (
      <HemisphericLightPanel params={makeParams()} setParam={setParam} onReset={vi.fn()} />
    ));

    // Each color control owns a labelled R/G/B row; the three controls map to
    // the diffuse / ground / specular channel triples on the params object.
    const controls: Array<[string, [string, string, string]]> = [
      ['Diffuse (Sky)', ['diffuseR', 'diffuseG', 'diffuseB']],
      ['Ground', ['groundR', 'groundG', 'groundB']],
      ['Specular', ['specularR', 'specularG', 'specularB']],
    ];

    for (const [label, keys] of controls) {
      // The label text lives in an inner div; its parent is the control
      // wrapper that also holds the R/G/B slider row.
      const wrapper = getByText(label).parentElement as HTMLElement;
      const sliders = wrapper.querySelectorAll('input[type="range"]');
      expect(sliders.length).toBe(3);

      setParam.mockClear();
      (sliders[0] as HTMLInputElement).value = '0.5';
      sliders[0].dispatchEvent(new Event('input', { bubbles: true }));

      // A single channel edit fans out to all three setParam keys because the
      // ColorControl re-emits the full r/g/b triple on every change.
      const calledKeys = setParam.mock.calls.map((c) => c[0]);
      expect(calledKeys).toEqual(expect.arrayContaining(keys));
    }
  });
});

import { describe, it, expect, beforeEach, vi } from 'vitest';
import {
  HemisphericLightComponent,
  HemisphericLightSystem,
  HemisphericLightEvents,
} from './HemisphericLight';
import { EventBus, World } from '@babylonjsmarket/ecs';
import { MockRendererAdapter } from '@babylonjsmarket/ecs';

describe('HemisphericLightComponent (core)', () => {
  it('defaults to upward direction, 0.3 intensity, white diffuse', () => {
    const c = new HemisphericLightComponent();
    expect(c.direction).toEqual([0, 1, 0]);
    expect(c.intensity).toBe(0.3);
    expect(c.diffuse).toEqual([1, 1, 1]);
    expect(c.groundColor).toEqual([0.2, 0.2, 0.2]);
    expect(c.specular).toEqual([0, 0, 0]);
    expect(c.initialized).toBe(false);
    expect(c.handle).toBeUndefined();
  });

  it('normalizes direction when provided', () => {
    const c = new HemisphericLightComponent({ direction: [2, 0, 0] });
    expect(c.direction[0]).toBeCloseTo(1);
    expect(c.direction[1]).toBeCloseTo(0);
    expect(c.direction[2]).toBeCloseTo(0);
  });

  it('accepts full color config as tuples', () => {
    const c = new HemisphericLightComponent({
      direction: [0, 1, 0],
      intensity: 0.6,
      diffuse: [0.9, 0.9, 1],
      groundColor: [0.3, 0.2, 0.1],
      specular: [0.1, 0.1, 0.1],
    });
    expect(c.intensity).toBe(0.6);
    expect(c.diffuse).toEqual([0.9, 0.9, 1]);
    expect(c.groundColor).toEqual([0.3, 0.2, 0.1]);
    expect(c.specular).toEqual([0.1, 0.1, 0.1]);
  });

  it('toSpec returns a plain HemisphericLightSpec', () => {
    const c = new HemisphericLightComponent({ intensity: 0.5 });
    const spec = c.toSpec();
    expect(spec.intensity).toBe(0.5);
    expect(spec.direction).toEqual([0, 1, 0]);
    expect(spec.diffuse).toEqual([1, 1, 1]);
  });

  it('serialize round-trips through the constructor', () => {
    const original = new HemisphericLightComponent({
      direction: [0, 1, 0],
      intensity: 0.7,
      diffuse: [0.8, 0.9, 1],
      groundColor: [0.3, 0.25, 0.2],
      specular: [0.05, 0.05, 0.05],
    });
    const copy = new HemisphericLightComponent(original.serialize());
    expect(copy.intensity).toBe(0.7);
    expect(copy.diffuse).toEqual([0.8, 0.9, 1]);
    expect(copy.groundColor).toEqual([0.3, 0.25, 0.2]);
  });

  it('falls back to up when given a zero-length direction', () => {
    // A zero vector has no meaningful direction, so normalize defaults to up
    // rather than dividing by zero.
    const c = new HemisphericLightComponent({ direction: [0, 0, 0] });
    expect(c.direction).toEqual([0, 1, 0]);
  });
});

describe('HemisphericLight event names', () => {
  it('defines CREATED and INTENSITY_CHANGED', () => {
    expect(HemisphericLightEvents.CREATED).toBe('hemisphericlight.created');
    expect(HemisphericLightEvents.INTENSITY_CHANGED).toBe('hemisphericlight.intensity.changed');
  });
});

describe('HemisphericLightSystem — adapter integration', () => {
  let eventBus: EventBus;
  let world: World;
  let renderer: MockRendererAdapter;
  let system: HemisphericLightSystem;

  beforeEach(() => {
    eventBus = new EventBus();
    renderer = new MockRendererAdapter();
    world = new World({ eventBus, renderer });
    system = new HemisphericLightSystem(eventBus);
    world.addSystem(system);
    world.initialize();
  });

  it('creates a light through the adapter on entity add', () => {
    const entity = world.createEntity();
    const comp = new HemisphericLightComponent({ intensity: 0.5 });
    entity.add(comp);
    expect(comp.initialized).toBe(true);
    expect(comp.handle).toBeDefined();
    const call = renderer.calls.find((c) => c.method === 'createHemisphericLight');
    expect(call).toBeDefined();
    expect((call?.args[1] as { intensity: number }).intensity).toBe(0.5);
  });

  it('emits CREATED with entity id and intensity', () => {
    const spy = vi.fn();
    eventBus.on(HemisphericLightEvents.CREATED, spy);
    const entity = world.createEntity();
    entity.add(new HemisphericLightComponent({ intensity: 0.4 }));
    expect(spy).toHaveBeenCalledWith({ entityId: entity.id, intensity: 0.4 });
  });

  it('forwards intensity changes through the adapter on update', () => {
    const entity = world.createEntity();
    const comp = new HemisphericLightComponent({ intensity: 0.3 });
    entity.add(comp);
    renderer.calls.length = 0;
    comp.intensity = 0.9;
    world.update(0.016);
    const call = renderer.calls.find((c) => c.method === 'updateLightIntensity');
    expect(call?.args[1]).toBe(0.9);
  });

  it('emits INTENSITY_CHANGED when intensity mutates after creation', () => {
    const spy = vi.fn();
    eventBus.on(HemisphericLightEvents.INTENSITY_CHANGED, spy);
    const entity = world.createEntity();
    const comp = new HemisphericLightComponent({ intensity: 0.3 });
    entity.add(comp);
    comp.intensity = 0.7;
    world.update(0.016);
    expect(spy).toHaveBeenCalledWith({ entityId: entity.id, intensity: 0.7 });
  });

  it('disposes the light when entity is removed', () => {
    const entity = world.createEntity();
    entity.add(new HemisphericLightComponent());
    renderer.calls.length = 0;
    world.removeEntity(entity);
    expect(renderer.calls.some((c) => c.method === 'disposeLight')).toBe(true);
  });

  it('does not re-dispose when a removed entity never got a handle', () => {
    // An entity whose component was never initialized (no renderer at add
    // time would leave handle undefined) must not call disposeLight.
    const entity = world.createEntity();
    const comp = new HemisphericLightComponent();
    entity.add(comp);
    comp.handle = undefined;
    comp.initialized = false;
    renderer.calls.length = 0;
    world.removeEntity(entity);
    expect(renderer.calls.some((c) => c.method === 'disposeLight')).toBe(false);
  });
});

describe('HemisphericLightSystem — entities present before initialize', () => {
  it('creates lights for entities that exist when the world initializes', () => {
    const eventBus = new EventBus();
    const renderer = new MockRendererAdapter();
    const world = new World({ eventBus, renderer });
    world.addSystem(new HemisphericLightSystem(eventBus));

    // Entity added BEFORE initialize → onInitialize's loop must create it.
    const entity = world.createEntity();
    const comp = new HemisphericLightComponent({ intensity: 0.42 });
    entity.add(comp);

    world.initialize();

    expect(comp.initialized).toBe(true);
    expect(comp.handle).toBeDefined();
    const call = renderer.calls.find((c) => c.method === 'createHemisphericLight');
    expect((call?.args[1] as { intensity: number }).intensity).toBe(0.42);
  });
});

// @vitest-environment jsdom
import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
import { render } from '@solidjs/testing-library';
import { EventBus, World, MockRendererAdapter } from '@babylonjsmarket/ecs';
import {
  HemisphericLightDebuggerComponent,
  HemisphericLightDebuggerInput,
  HemisphericLightDebuggerEvents,
  HemisphericLightDebuggerSystem,
} from './HemisphericLight.viz.tsx';
import { HemisphericLightComponent, HemisphericLightSystem } from './HemisphericLight';
import { vizStore } from '../_shared/viz';

describe('HemisphericLightDebuggerComponent', () => {
  let component: HemisphericLightDebuggerComponent;

  beforeEach(() => {
    component = new HemisphericLightDebuggerComponent({
      visible: true,
      activationKey: 'Digit6',
      position: 'top-right',
    });
  });

  describe('constructor', () => {
    it('should initialize with provided values', () => {
      expect(component.visible).toBe(true);
      expect(component.activationKey).toBe('Digit6');
      expect(component.position).toBe('top-right');
    });

    it('should use defaults when no data provided', () => {
      const defaultComponent = new HemisphericLightDebuggerComponent();
      expect(defaultComponent.visible).toBe(false);
      expect(defaultComponent.activationKey).toBe('Digit7');
      expect(defaultComponent.position).toBe('top-left');
    });

    it('should initialize with partial data', () => {
      const partialComponent = new HemisphericLightDebuggerComponent({
        visible: true,
      });
      expect(partialComponent.visible).toBe(true);
      expect(partialComponent.activationKey).toBe('Digit7');
      expect(partialComponent.position).toBe('top-left');
    });
  });

  describe('visibility', () => {
    it('should start hidden by default', () => {
      const comp = new HemisphericLightDebuggerComponent();
      expect(comp.visible).toBe(false);
    });

    it('should allow toggling visibility', () => {
      component.visible = false;
      expect(component.visible).toBe(false);
      component.visible = true;
      expect(component.visible).toBe(true);
    });

    it('should respect visible flag from constructor', () => {
      const visibleComp = new HemisphericLightDebuggerComponent({ visible: true });
      expect(visibleComp.visible).toBe(true);

      const hiddenComp = new HemisphericLightDebuggerComponent({ visible: false });
      expect(hiddenComp.visible).toBe(false);
    });
  });

  describe('activation key', () => {
    it('should accept valid keyboard codes', () => {
      const comp = new HemisphericLightDebuggerComponent({ activationKey: 'KeyL' });
      expect(comp.activationKey).toBe('KeyL');
    });

    it('should accept function keys', () => {
      const comp = new HemisphericLightDebuggerComponent({ activationKey: 'F7' });
      expect(comp.activationKey).toBe('F7');
    });

    it('should accept digit keys', () => {
      const comp = new HemisphericLightDebuggerComponent({ activationKey: 'Digit7' });
      expect(comp.activationKey).toBe('Digit7');
    });

    it('should default to Digit7', () => {
      const comp = new HemisphericLightDebuggerComponent();
      expect(comp.activationKey).toBe('Digit7');
    });

    it('should allow changing activation key', () => {
      component.activationKey = 'F8';
      expect(component.activationKey).toBe('F8');
    });
  });

  describe('position', () => {
    it('should accept top-left', () => {
      const comp = new HemisphericLightDebuggerComponent({ position: 'top-left' });
      expect(comp.position).toBe('top-left');
    });

    it('should accept top-right', () => {
      const comp = new HemisphericLightDebuggerComponent({ position: 'top-right' });
      expect(comp.position).toBe('top-right');
    });

    it('should accept bottom-left', () => {
      const comp = new HemisphericLightDebuggerComponent({ position: 'bottom-left' });
      expect(comp.position).toBe('bottom-left');
    });

    it('should accept bottom-right', () => {
      const comp = new HemisphericLightDebuggerComponent({ position: 'bottom-right' });
      expect(comp.position).toBe('bottom-right');
    });

    it('should default to top-left', () => {
      const comp = new HemisphericLightDebuggerComponent();
      expect(comp.position).toBe('top-left');
    });

    it('should allow changing position', () => {
      component.position = 'bottom-left';
      expect(component.position).toBe('bottom-left');
    });
  });

  describe('serialization', () => {
    it('should serialize to object', () => {
      const serialized = component.serialize();
      expect(serialized.visible).toBe(true);
      expect(serialized.activationKey).toBe('Digit6');
      expect(serialized.position).toBe('top-right');
    });

    it('should be reconstructable from serialized data', () => {
      const serialized = component.serialize();
      const reconstructed = new HemisphericLightDebuggerComponent(serialized);
      expect(reconstructed.visible).toBe(component.visible);
      expect(reconstructed.activationKey).toBe(component.activationKey);
      expect(reconstructed.position).toBe(component.position);
    });

    it('should serialize default values correctly', () => {
      const defaultComp = new HemisphericLightDebuggerComponent();
      const serialized = defaultComp.serialize();
      expect(serialized.visible).toBe(false);
      expect(serialized.activationKey).toBe('Digit7');
      expect(serialized.position).toBe('top-left');
    });

    it('should only include serializable properties', () => {
      const serialized = component.serialize();
      expect(serialized).toHaveProperty('visible');
      expect(serialized).toHaveProperty('activationKey');
      expect(serialized).toHaveProperty('position');
      expect(Object.keys(serialized).length).toBe(3);
    });
  });

  describe('state management', () => {
    it('should allow visibility to be modified', () => {
      expect(component.visible).toBe(true);
      component.visible = false;
      expect(component.visible).toBe(false);
    });

    it('should allow activationKey to be modified', () => {
      expect(component.activationKey).toBe('Digit6');
      component.activationKey = 'Digit5';
      expect(component.activationKey).toBe('Digit5');
    });

    it('should allow position to be modified', () => {
      expect(component.position).toBe('top-right');
      component.position = 'bottom-left';
      expect(component.position).toBe('bottom-left');
    });
  });
});

describe('HemisphericLightDebuggerEvents', () => {
  it('should define SHOWN event', () => {
    expect(HemisphericLightDebuggerEvents.SHOWN).toBe('hemisphericlightdebugger.shown');
  });

  it('should define HIDDEN event', () => {
    expect(HemisphericLightDebuggerEvents.HIDDEN).toBe('hemisphericlightdebugger.hidden');
  });
});

describe('HemisphericLightDebuggerSystem params', () => {
  // Note: Full system testing requires BabylonJS Scene context
  // These tests verify the param structure

  it('should have expected default param structure', () => {
    // These are the params that HemisphericLightDebuggerSystem exposes
    const expectedParams = {
      intensity: 0.3,
      directionX: 0,
      directionY: 1,
      directionZ: 0,
      diffuseR: 1,
      diffuseG: 1,
      diffuseB: 1,
      groundR: 0.2,
      groundG: 0.2,
      groundB: 0.2,
      specularR: 0,
      specularG: 0,
      specularB: 0,
    };

    // Verify structure
    expect(Object.keys(expectedParams)).toHaveLength(13);
    expect(expectedParams.intensity).toBe(0.3);
    expect(expectedParams.directionY).toBe(1);
    expect(expectedParams.diffuseR).toBe(1);
    expect(expectedParams.groundR).toBe(0.2);
    expect(expectedParams.specularR).toBe(0);
  });
});

const PANEL_ID = 'hemispheric-light-debugger';
const STORAGE_PREFIX = 'hemispheric-light-debugger-params';

describe('HemisphericLightDebuggerSystem — viz integration', () => {
  let eventBus: EventBus;
  let world: World;
  let renderer: MockRendererAdapter;
  let system: HemisphericLightDebuggerSystem;

  beforeEach(() => {
    eventBus = new EventBus();
    renderer = new MockRendererAdapter();
    world = new World({ eventBus, renderer });
    system = new HemisphericLightDebuggerSystem(eventBus);
    world.addSystem(system);
    // The light system gives HemisphericLightComponents a live renderer handle
    // and forwards the intensity edits the panel pushes onto them.
    world.addSystem(new HemisphericLightSystem(eventBus));
  });

  afterEach(() => {
    // The debugger drives a shared vizStore singleton + a window keydown
    // listener + localStorage. Tear the world down, then wipe shared state so
    // tests can't leak panels/handlers into each other.
    world.shutdown();
    vizStore.clear();
    localStorage.clear();
  });

  /** Add an entity carrying the debugger component; returns both. */
  function addDebugger(input?: HemisphericLightDebuggerInput) {
    const entity = world.createEntity();
    const comp = new HemisphericLightDebuggerComponent(input);
    entity.add(comp);
    return { entity, comp };
  }

  /** Add a plain hemispheric light entity (gets a live handle via the system). */
  function addLight(intensity = 0.3) {
    const entity = world.createEntity();
    const comp = new HemisphericLightComponent({ intensity });
    entity.add(comp);
    return { entity, comp };
  }

  describe('panel registration on initialize', () => {
    it('does not register a panel when no debugger entity exists', () => {
      world.initialize();
      expect(vizStore.panels[PANEL_ID]).toBeUndefined();
    });

    it('registers a panel when a debugger entity is present at initialize', () => {
      addDebugger({ activationKey: 'Digit6', position: 'top-right' });
      world.initialize();

      const panel = vizStore.panels[PANEL_ID];
      expect(panel).toBeDefined();
      expect(panel.title).toBe('Hemispheric Light Controls');
      expect(panel.position).toBe('top-right');
      expect(panel.titleColor).toBe('#ffcc00');
    });

    it('shows the panel and emits SHOWN when the component is visible', () => {
      const shown = vi.fn();
      eventBus.on(HemisphericLightDebuggerEvents.SHOWN, shown);
      addDebugger({ visible: true });
      world.initialize();
      expect(vizStore.isVisible(PANEL_ID)).toBe(true);
      expect(shown).toHaveBeenCalled();
    });

    it('registers hidden by default', () => {
      addDebugger();
      world.initialize();
      expect(vizStore.isVisible(PANEL_ID)).toBe(false);
    });
  });

  describe('onEntityAdded', () => {
    it('registers the panel when the debugger entity is added after initialize', () => {
      world.initialize();
      expect(vizStore.panels[PANEL_ID]).toBeUndefined();

      addDebugger({ position: 'bottom-left' });
      const panel = vizStore.panels[PANEL_ID];
      expect(panel).toBeDefined();
      expect(panel.position).toBe('bottom-left');
    });

    it('ignores a second debugger entity once one is bound', () => {
      world.initialize();
      const { comp: first } = addDebugger({ position: 'top-left' });
      addDebugger({ position: 'bottom-right' });

      // Panel still reflects the first component's position.
      expect(vizStore.panels[PANEL_ID].position).toBe('top-left');
      expect((system as unknown as { component: unknown }).component).toBe(first);
    });
  });

  describe('keyboard toggle', () => {
    function press(code: string) {
      window.dispatchEvent(new KeyboardEvent('keydown', { code }));
    }

    it('toggles the panel on the activation key and emits SHOWN / HIDDEN', () => {
      const shown = vi.fn();
      const hidden = vi.fn();
      eventBus.on(HemisphericLightDebuggerEvents.SHOWN, shown);
      eventBus.on(HemisphericLightDebuggerEvents.HIDDEN, hidden);

      const { comp } = addDebugger({ activationKey: 'Digit7' });
      world.initialize();
      expect(vizStore.isVisible(PANEL_ID)).toBe(false);

      press('Digit7');
      expect(vizStore.isVisible(PANEL_ID)).toBe(true);
      expect(comp.visible).toBe(true);
      expect(shown).toHaveBeenCalled();

      press('Digit7');
      expect(vizStore.isVisible(PANEL_ID)).toBe(false);
      expect(comp.visible).toBe(false);
      expect(hidden).toHaveBeenCalled();
    });

    it('ignores other keys', () => {
      addDebugger({ activationKey: 'Digit7' });
      world.initialize();
      press('Digit2');
      expect(vizStore.isVisible(PANEL_ID)).toBe(false);
    });

    it('does nothing when no debugger component is bound', () => {
      // System is added but never receives a debugger entity, so the keydown
      // handler short-circuits on the missing component.
      world.initialize();
      expect(() => press('Digit7')).not.toThrow();
    });
  });

  describe('onUpdate — visibility sync', () => {
    it('mirrors panel visibility back onto the component', () => {
      const { comp } = addDebugger({ visible: false });
      world.initialize();

      vizStore.showPanel(PANEL_ID);
      world.update(16);
      expect(comp.visible).toBe(true);

      vizStore.hidePanel(PANEL_ID);
      world.update(16);
      expect(comp.visible).toBe(false);
    });

    it('does nothing on update when no debugger component is bound', () => {
      world.initialize();
      expect(() => world.update(16)).not.toThrow();
    });
  });

  describe('onUpdate — applying params to hemispheric lights', () => {
    it('pushes the panel params onto every light while visible', () => {
      addDebugger({ visible: true });
      world.initialize();
      const { comp } = addLight();

      // Drive the params off-default so the write-through is observable.
      const sys = system as unknown as { params: Record<string, number> };
      Object.assign(sys.params, {
        intensity: 0.8,
        directionX: 0,
        directionY: 0,
        directionZ: 2,
        diffuseR: 0.5,
        diffuseG: 0.6,
        diffuseB: 0.7,
        groundR: 0.1,
        groundG: 0.2,
        groundB: 0.3,
        specularR: 0.05,
        specularG: 0.04,
        specularB: 0.03,
      });

      world.update(16);

      expect(comp.intensity).toBe(0.8);
      // Direction is normalized: (0,0,2) → (0,0,1).
      expect(comp.direction[0]).toBeCloseTo(0);
      expect(comp.direction[1]).toBeCloseTo(0);
      expect(comp.direction[2]).toBeCloseTo(1);
      expect(comp.diffuse).toEqual([0.5, 0.6, 0.7]);
      expect(comp.groundColor).toEqual([0.1, 0.2, 0.3]);
      expect(comp.specular).toEqual([0.05, 0.04, 0.03]);
    });

    it('forwards the intensity edit to the renderer via the light system', () => {
      addDebugger({ visible: true });
      world.initialize();
      addLight(0.3);

      const sys = system as unknown as { params: Record<string, number> };
      sys.params.intensity = 1.1;

      renderer.calls.length = 0;
      world.update(16);

      const call = renderer.calls.find((c) => c.method === 'updateLightIntensity');
      expect(call?.args[1]).toBe(1.1);
    });

    it('normalizes a zero-length direction to a unit step', () => {
      addDebugger({ visible: true });
      world.initialize();
      const { comp } = addLight();

      const sys = system as unknown as { params: Record<string, number> };
      sys.params.directionX = 0;
      sys.params.directionY = 0;
      sys.params.directionZ = 0;

      world.update(16);

      // len falls back to 1, so the zero vector stays zero rather than NaN.
      expect(comp.direction).toEqual([0, 0, 0]);
    });

    it('leaves lights untouched while the panel is hidden', () => {
      addDebugger({ visible: false });
      world.initialize();
      const { comp } = addLight();
      const before = comp.intensity;

      const sys = system as unknown as { params: Record<string, number> };
      sys.params.intensity = 1.9;

      world.update(16);
      expect(comp.intensity).toBe(before);
    });
  });

  describe('teardown', () => {
    it('unregisters the panel and removes the keydown listener on shutdown', () => {
      addDebugger({ activationKey: 'Digit7' });
      world.initialize();
      expect(vizStore.panels[PANEL_ID]).toBeDefined();

      world.shutdown();
      expect(vizStore.panels[PANEL_ID]).toBeUndefined();

      // After shutdown the listener is gone, so the key is a no-op.
      window.dispatchEvent(new KeyboardEvent('keydown', { code: 'Digit7' }));
      expect(vizStore.panels[PANEL_ID]).toBeUndefined();
    });

    it('unregisters the panel and unbinds when the debugger entity is removed', () => {
      const { entity } = addDebugger();
      world.initialize();
      expect(vizStore.panels[PANEL_ID]).toBeDefined();

      world.removeEntity(entity);
      expect(vizStore.panels[PANEL_ID]).toBeUndefined();
      expect((system as unknown as { component: unknown }).component).toBeNull();
    });

    it('leaves the panel alone when a non-bound entity is removed', () => {
      addDebugger();
      world.initialize();

      const other = world.createEntity();
      world.removeEntity(other);
      expect(vizStore.panels[PANEL_ID]).toBeDefined();
    });
  });

  describe('persisted params storage', () => {
    it('loads previously saved params from localStorage on registration', () => {
      localStorage.setItem(
        `${STORAGE_PREFIX}-${vizStore.sceneName}`,
        JSON.stringify({ intensity: 1.5 })
      );
      addDebugger({ visible: true });
      world.initialize();
      const { comp } = addLight();

      world.update(16);
      expect(comp.intensity).toBe(1.5);
    });

    it('tolerates corrupt stored params', () => {
      localStorage.setItem(`${STORAGE_PREFIX}-${vizStore.sceneName}`, 'not json');
      addDebugger();
      expect(() => world.initialize()).not.toThrow();
      expect(vizStore.panels[PANEL_ID]).toBeDefined();
    });
  });

  describe('panel content factory', () => {
    function renderPanelContent() {
      addDebugger();
      world.initialize();
      const content = vizStore.panels[PANEL_ID].content;
      return render(() => content() as Element);
    }

    it('renders the HemisphericLightPanel sliders', () => {
      const { getByText, unmount } = renderPanelContent();
      expect(getByText('Intensity')).toBeTruthy();
      expect(getByText('Direction X')).toBeTruthy();
      unmount();
    });

    it('persists a param change through setParam', () => {
      const { container, unmount } = renderPanelContent();
      const slider = container.querySelector('input[type="range"]') as HTMLInputElement;
      expect(slider).toBeTruthy();

      slider.value = '1.2';
      slider.dispatchEvent(new Event('input', { bubbles: true }));

      const saved = JSON.parse(
        localStorage.getItem(`${STORAGE_PREFIX}-${vizStore.sceneName}`) ?? '{}'
      );
      expect(saved.intensity).toBe(1.2);
      unmount();
    });

    it('swallows storage errors when saving a param change', () => {
      const { container, unmount } = renderPanelContent();
      const slider = container.querySelector('input[type="range"]') as HTMLInputElement;

      const original = Storage.prototype.setItem;
      Storage.prototype.setItem = () => {
        throw new Error('quota exceeded');
      };
      try {
        expect(() => {
          slider.value = '0.9';
          slider.dispatchEvent(new Event('input', { bubbles: true }));
        }).not.toThrow();
      } finally {
        Storage.prototype.setItem = original;
      }
      unmount();
    });

    it('resets params to defaults via the reset button', () => {
      const { getByText, container, unmount } = renderPanelContent();

      // Mutate intensity first so the reset is observable.
      const slider = container.querySelector('input[type="range"]') as HTMLInputElement;
      slider.value = '1.8';
      slider.dispatchEvent(new Event('input', { bubbles: true }));

      const resetBtn = getByText(/reset/i);
      resetBtn.dispatchEvent(new MouseEvent('click', { bubbles: true }));

      const saved = JSON.parse(
        localStorage.getItem(`${STORAGE_PREFIX}-${vizStore.sceneName}`) ?? '{}'
      );
      expect(saved.intensity).toBe(0.3);
      expect(saved.directionY).toBe(1);
      expect(saved.diffuseR).toBe(1);
      unmount();
    });
  });
});