import React, { useState, useCallback } from 'react';
import { Header } from './components/Header';
import { CodexDashboard } from './components/CodexDashboard';
import { ModuleType } from './types';
import ChatbotModule from './modules/ChatbotModule';
import GroundedSearchModule from './modules/GroundedSearchModule';
import ImageAnalysisModule from './modules/ImageAnalysisModule';
import ImageEditModule from './modules/ImageEditModule';
import ImageGenerationModule from './modules/ImageGenerationModule';
import LiveConversationModule from './modules/LiveConversationModule';
import VideoFromImageModule from './modules/VideoFromImageModule';
import CodexWikiModule from './modules/CodexWikiModule';
import TarotModule from './modules/TarotModule';
import CybersecurityShieldModule from './modules/CybersecurityShieldModule';
import AlchemistsJourneyModule from './modules/AlchemistsJourneyModule';
import BlockchainAIModule from './modules/BlockchainAIModule';
import SystemMaintenanceModule from './modules/SystemMaintenanceModule';
import { ArrowLeftIcon } from './components/IconComponents';

const App: React.FC = () => {
  const [activeModule, setActiveModule] = useState<ModuleType | null>(null);

  const renderActiveModule = () => {
    switch (activeModule) {
      case ModuleType.ChatBot:
        return <ChatbotModule />;
      case ModuleType.GroundedSearch:
        return <GroundedSearchModule />;
      case ModuleType.ImageAnalysis:
        return <ImageAnalysisModule />;
      case ModuleType.ImageEdit:
        return <ImageEditModule />;
      case ModuleType.ImageGeneration:
        return <ImageGenerationModule />;
      case ModuleType.LiveConversation:
        return <LiveConversationModule />;
      case ModuleType.VideoFromImage:
        return <VideoFromImageModule />;
      case ModuleType.CodexWiki:
        return <CodexWikiModule />;
      case ModuleType.TarotReading:
        return <TarotModule />;
      case ModuleType.CybersecurityShield:
        return <CybersecurityShieldModule />;
      case ModuleType.AlchemistsJourney:
        return <AlchemistsJourneyModule />;
      case ModuleType.BlockchainAI:
        return <BlockchainAIModule />;
      case ModuleType.SystemMaintenance:
        return <SystemMaintenanceModule />;
      default:
        return <CodexDashboard onSelectModule={setActiveModule} />;
    }
  };
  
  const handleBack = useCallback(() => {
    setActiveModule(null);
  }, []);

  return (
    <div className="min-h-screen bg-gray-900 text-cyan-100 font-sans flex flex-col">
      <Header />
      <main className="flex-grow container mx-auto p-4 md:p-8 flex flex-col">
        {activeModule && (
          <button
            onClick={handleBack}
            className="mb-6 flex items-center gap-2 text-cyan-400 hover:text-cyan-200 transition-colors self-start"
          >
            <ArrowLeftIcon className="w-5 h-5" />
            Back to Codex
          </button>
        )}
        <div className="flex-grow flex flex-col bg-gray-900/50 border border-cyan-500/20 rounded-lg shadow-2xl shadow-cyan-500/10 p-4 sm:p-6">
          {renderActiveModule()}
        </div>
      </main>
      <footer className="text-center p-4 text-xs text-gray-500">
        Sentient Constellation Codex | Autonomous, Ethically-Aligned, Post-Quantum Architecture Interface
      </footer>
    </div>
  );
};

export default App;