/* global React, ReactDOM, VariantA, VariantB, VariantC */
// Fullscreen wall display — renders one variant scaled to fit any viewport.
// Variant chosen via ?view= query param (rotating | mosaic | spotlight).

const STAGE_W = 1920;
const STAGE_H = 1080;

function useScaleToFit() {
  const [scale, setScale] = React.useState(1);
  React.useEffect(() => {
    function update() {
      const sx = window.innerWidth / STAGE_W;
      const sy = window.innerHeight / STAGE_H;
      setScale(Math.min(sx, sy));
    }
    update();
    window.addEventListener('resize', update);
    return () => window.removeEventListener('resize', update);
  }, []);
  return scale;
}

function getInitialView() {
  const params = new URLSearchParams(window.location.search);
  const v = params.get('view');
  if (v === 'mosaic' || v === 'spotlight') return v;
  return 'rotating';
}

const VIEW_LABELS = {
  rotating:  { name: 'A · Rotating wall display', short: 'Rotating' },
  mosaic:    { name: 'B · Mosaic terminal',       short: 'Mosaic'   },
  spotlight: { name: 'C · Hero spotlight',        short: 'Spotlight'},
};

function Wall() {
  const scale = useScaleToFit();
  const [view, setView] = React.useState(getInitialView());
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [chromeHidden, setChromeHidden] = React.useState(false);

  // sync URL when view changes
  React.useEffect(() => {
    const url = new URL(window.location);
    if (view === 'rotating') url.searchParams.delete('view');
    else url.searchParams.set('view', view);
    window.history.replaceState(null, '', url);
  }, [view]);

  // keyboard shortcut: press "h" to hide chrome
  React.useEffect(() => {
    const onKey = (e) => {
      if (e.key === 'h' || e.key === 'H') setChromeHidden(v => !v);
      if (e.key === 'f' || e.key === 'F') {
        if (document.fullscreenElement) document.exitFullscreen();
        else document.documentElement.requestFullscreen();
      }
      if (e.key === '1') setView('rotating');
      if (e.key === '2') setView('mosaic');
      if (e.key === '3') setView('spotlight');
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  // auto-hide chrome after inactivity
  React.useEffect(() => {
    if (chromeHidden) return;
    let timer;
    const reset = () => {
      clearTimeout(timer);
      setChromeHidden(false);
      timer = setTimeout(() => setChromeHidden(true), 8000);
    };
    reset();
    window.addEventListener('mousemove', reset);
    window.addEventListener('keydown', reset);
    return () => {
      clearTimeout(timer);
      window.removeEventListener('mousemove', reset);
      window.removeEventListener('keydown', reset);
    };
  }, []);

  return (
    <div className="cc-wall">
      <div
        className="cc-wall-stage"
        style={{
          width: STAGE_W,
          height: STAGE_H,
          transform: `scale(${scale})`,
          transformOrigin: 'center center',
        }}
      >
        {view === 'rotating'  && <VariantA />}
        {view === 'mosaic'    && <VariantB />}
        {view === 'spotlight' && <VariantC />}
      </div>

      {/* Floating chrome — auto-hides after 8s of no activity */}
      <div className={'cc-wall-chrome' + (chromeHidden ? ' is-hidden' : '')}>
        <button
          className="cc-wall-chip"
          onClick={() => setMenuOpen(o => !o)}
          aria-expanded={menuOpen}
        >
          <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--color-pos)', boxShadow: '0 0 6px var(--color-pos-glow)', display: 'inline-block', marginRight: 6 }}></span>
          {VIEW_LABELS[view].short}
          <span style={{ marginLeft: 8, color: 'var(--color-subtle)' }}>▾</span>
        </button>

        {menuOpen && (
          <div className="cc-wall-menu">
            {Object.entries(VIEW_LABELS).map(([key, info]) => (
              <button
                key={key}
                className={'cc-wall-menu-item' + (view === key ? ' active' : '')}
                onClick={() => { setView(key); setMenuOpen(false); }}
              >
                <span className="cc-wall-menu-key">{key === 'rotating' ? '1' : key === 'mosaic' ? '2' : '3'}</span>
                {info.name}
              </button>
            ))}
            <hr className="cc-wall-menu-sep" />
            <a className="cc-wall-menu-item" href="preview.html">
              <span className="cc-wall-menu-key">→</span>
              Compare all layouts
            </a>
            <button
              className="cc-wall-menu-item"
              onClick={() => {
                if (document.fullscreenElement) document.exitFullscreen();
                else document.documentElement.requestFullscreen();
                setMenuOpen(false);
              }}
            >
              <span className="cc-wall-menu-key">F</span>
              Toggle fullscreen
            </button>
            <button
              className="cc-wall-menu-item"
              onClick={() => { setChromeHidden(true); setMenuOpen(false); }}
            >
              <span className="cc-wall-menu-key">H</span>
              Hide controls
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<Wall />);