import { useEffect } from 'react';
import { gameRuntime } from '../state/runtime';
import { useGameStore } from '../state/store';
import { AboutPanel } from './AboutPanel';
import { AppShell } from './AppShell';
import { NavRail } from './NavRail';
import { PlayPanel } from './PlayPanel';
import { RightRail } from './RightRail';
import { SettingsPanel } from './SettingsPanel';
import { StoryView } from './StoryView';

/**
 * M1 playable-loop shell. Boots the runtime once on mount; everything else
 * renders from the Zustand store the runtime feeds.
 */
export function App() {
  const activePanel = useGameStore((s) => s.activePanel);

  useEffect(() => {
    void gameRuntime.boot();
  }, []);

  const renderActivePanel = () => {
    switch (activePanel) {
      case 'play':
        return <PlayPanel />;
      case 'story':
        return <StoryView />;
      case 'settings':
        return <SettingsPanel />;
      case 'about':
        return <AboutPanel />;
      default:
        return <PlayPanel />;
    }
  };

  return (
    <AppShell
      nav={<NavRail />}
      center={renderActivePanel()}
      right={activePanel === 'play' ? <RightRail /> : undefined}
    />
  );
}