App.tsx

import React, { useState } from 'react';
import { MapMapperPlugin } from './plugins/mapMapper';
import { CharacterExpressPlugin } from './plugins/characterExpress/CharacterExpressPlugin';
import { CharacterIndicatorTest } from './featureTests/characterIndicators/CharacterIndicatorTest';
import { LLMInteractionTest } from './featureTests/llmInteraction/LLMInteractionTest';
import { LLManagerPlugin } from './plugins/LLManager';
import { EventMakerPlugin } from './plugins/eventMaker/EventMakerPlugin';
import { TopBar } from './components/TopBar';
import { GameRoot } from './MAIN/GameRoot';
import './style.css'; 

type AppMode = 'main' | 'plugin' | 'character' | 'test-indicator' | 'llmanager' | 'test-llm-interaction' | 'event-maker';

const App: React.FC = () => {
  const [mode, setMode] = useState<AppMode>('main');
  const [appKey, setAppKey] = useState(0);

  // Soft reload logic: Reset mode and increment key to force full re-render
  const handleReload = () => {
    setMode('main');
    setAppKey(prev => prev + 1);
  };

  // Helper render content based on mode
  const renderContent = () => {
      if (mode === 'main') return <GameRoot />;
      if (mode === 'plugin') return <MapMapperPlugin />;
      if (mode === 'character') return <CharacterExpressPlugin />;
      if (mode === 'test-indicator') return <CharacterIndicatorTest />;
      if (mode === 'llmanager') return <LLManagerPlugin />;
      if (mode === 'test-llm-interaction') return <LLMInteractionTest />;
      if (mode === 'event-maker') return <EventMakerPlugin />;

      return (
        <div className="flex flex-col items-center justify-center h-full space-y-4 bg-gray-900 opacity-50 select-none pointer-events-none">
            <h1 className="text-4xl font-bold tracking-wider text-gray-800">TOOLKIT</h1>
            <p className="text-gray-700">Select a tool from the menu to begin</p>
        </div>
      );
  };

  return (
    <div key={appKey} className="flex flex-col w-screen h-screen bg-gray-950 text-white overflow-hidden font-sans">
        <TopBar currentMode={mode as any} setMode={setMode as any} onReload={handleReload} />
        <div className="flex-1 relative overflow-hidden">
             {renderContent()}
        </div>
    </div>
  );
};

export default App;