import { useEffect, useRef, useState } from 'react';
import { PhaserGame, type IRefPhaserGame } from './PhaserGame.tsx';
import { BeginScreen } from './ui/begin';
import { SeedPicker } from './ui/garden';
import { FragmentRevealModal, JournalIcon } from './ui/journal';
import { LuraDialogue } from './ui/dialogue';
import { Letter } from './ui/letter';
import { Settings, PersistenceToast } from './ui/settings';
import { useAppStore } from './store';

function App() {
  // PhaserGame ref — Phase 2+ will use this to access the active scene from React.
  const phaserRef = useRef<IRefPhaserGame | null>(null);
  const [settingsOpen, setSettingsOpen] = useState(false);
  // D-30 — toast surfaces for one cycle when the boot path's
  // requestPersistence resolves with denied. PhaserGame writes
  // showPersistenceToast=true; the toast component reads it.
  const showPersistenceToast = useAppStore((s) => s.showPersistenceToast);

  // D-29 — keyboard shortcuts for Settings and the Memory Journal.
  // Comma toggles Settings (a tasteful nod — settings is a subordinate
  // concern, easy to reach, no browser conflict).
  // 'j' toggles the Memory Journal via a window CustomEvent that
  // JournalIcon listens for — keeps the icon's open/close state local
  // (V1Payload has no journal-open flag, by design — see Plan 02-03
  // SUMMARY).
  useEffect(() => {
    const onKeyDown = (e: KeyboardEvent): void => {
      if (e.metaKey || e.ctrlKey || e.altKey) return;
      const target = e.target as HTMLElement | null;
      if (
        target &&
        (target.tagName === 'INPUT' ||
          target.tagName === 'TEXTAREA' ||
          target.isContentEditable)
      ) {
        return;
      }
      if (e.key === ',') {
        e.preventDefault();
        setSettingsOpen((o) => !o);
      } else if (e.key === 'j' || e.key === 'J') {
        e.preventDefault();
        window.dispatchEvent(new CustomEvent('tlg:toggle-journal'));
      }
    };
    window.addEventListener('keydown', onKeyDown);
    return () => window.removeEventListener('keydown', onKeyDown);
  }, []);

  return (
    <div id="app">
      <PhaserGame ref={phaserRef} />
      <BeginScreen />
      <SeedPicker />
      <FragmentRevealModal />
      <JournalIcon />
      <LuraDialogue />
      <Letter />
      <Settings open={settingsOpen} onClose={() => setSettingsOpen(false)} />
      <PersistenceToast show={showPersistenceToast} />
      <button
        data-testid="settings-icon"
        aria-label="Open settings"
        onClick={() => setSettingsOpen(true)}
        style={{
          position: 'fixed',
          bottom: 20,
          right: 76,
          zIndex: 40,
          width: 44,
          height: 44,
          borderRadius: 22,
          background: '#2a2a2e',
          color: '#e8e0d0',
          border: '1px solid #4d4d52',
          cursor: 'pointer',
          fontFamily: 'serif',
          fontSize: '1.2rem',
        }}
      >
        ⚙
      </button>
    </div>
  );
}

export default App;