// @vitest-environment happy-dom

import { afterEach, beforeEach, describe, expect, it } from 'vitest';
import { act } from 'react';
import { createRoot, type Root } from 'react-dom/client';

import { ProductProvider, useProduct } from '@/lib/product-context';

function ProductProbe() {
  const { productId, productName, setProductId } = useProduct();
  return (
    <div>
      <output data-testid="product-id">{productId}</output>
      <output data-testid="product-name">{productName}</output>
      <button type="button" onClick={() => setProductId('nomgap')}>
        Switch to NomGap
      </button>
    </div>
  );
}

describe('ProductProvider', () => {
  let container: HTMLDivElement;
  let root: Root;

  beforeEach(() => {
    (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT =
      true;
    localStorage.clear();
    container = document.createElement('div');
    document.body.appendChild(container);
    root = createRoot(container);
  });

  afterEach(() => {
    act(() => root.unmount());
    container.remove();
    localStorage.clear();
  });

  it('persists changes and emits a same-tab product-changed event', () => {
    let eventCount = 0;
    window.addEventListener('admin:product-changed', () => {
      eventCount += 1;
    });

    act(() => {
      root.render(
        <ProductProvider>
          <ProductProbe />
        </ProductProvider>
      );
    });

    act(() => {
      container.querySelector('button')!.dispatchEvent(new MouseEvent('click', { bubbles: true }));
    });

    expect(container.querySelector('[data-testid="product-id"]')?.textContent).toBe('nomgap');
    expect(container.querySelector('[data-testid="product-name"]')?.textContent).toBe('NomGap');
    expect(localStorage.getItem('admin_selected_product')).toBe('nomgap');
    expect(eventCount).toBe(1);
  });

  it('syncs provider state when another admin component updates localStorage', () => {
    act(() => {
      root.render(
        <ProductProvider>
          <ProductProbe />
        </ProductProvider>
      );
    });

    act(() => {
      localStorage.setItem('admin_selected_product', 'mindlyst');
      window.dispatchEvent(new Event('admin:product-changed'));
    });

    expect(container.querySelector('[data-testid="product-id"]')?.textContent).toBe('mindlyst');
    expect(container.querySelector('[data-testid="product-name"]')?.textContent).toBe('MindLyst');
  });
});
