import type { JSX } from 'react';
import { useState } from 'react';
import { TopBar } from '@/components/layout/TopBar';
import { Sidebar } from '@/components/layout/Sidebar';
import { StoryInput } from '@/components/story/StoryInput';
import { ScriptViewer } from '@/components/story/ScriptViewer';
import { CharacterManager } from '@/components/story/CharacterManager';
import { PanelGrid } from '@/components/panels/PanelGrid';
import { LayoutEngine } from '@/components/layout/LayoutEngine';
import { SpeechBubbleSystem } from '@/components/speech/SpeechBubbleSystem';
import { ExportSection } from '@/components/export/ExportSection';
import { useComicStore } from '@/store/comicStore';

// Placeholder components for other sections
function PlaceholderSection({ title }: { title: string }): JSX.Element {
  return (
    <div className="flex items-center justify-center h-full">
      <div className="text-center space-y-4">
        <h2 className="text-2xl font-bold">{title}</h2>
        <p className="text-muted-foreground">This section is coming soon...</p>
      </div>
    </div>
  );
}

// Story section that shows either input or viewer based on workflow
function StorySection(): JSX.Element {
  const { workflow } = useComicStore();

  // Show script viewer if we have a script or are reviewing
  if (workflow.currentStep === 'script-review') {
    return <ScriptViewer />;
  }

  // Show character manager during character setup
  if (workflow.currentStep === 'character-setup') {
    return <CharacterManager />;
  }

  // Show panel grid during panel generation
  if (workflow.currentStep === 'generating-panels') {
    return <PanelGrid />;
  }

  // Show layout engine during layout
  if (workflow.currentStep === 'layout') {
    return <LayoutEngine />;
  }

  // Show speech bubble system during speech bubbles step
  if (workflow.currentStep === 'speech-bubbles') {
    return <SpeechBubbleSystem />;
  }

  // Show script viewer for complete step
  if (workflow.currentStep === 'complete') {
    return <ScriptViewer />;
  }

  // Otherwise show input
  return <StoryInput />;
}

function App(): JSX.Element {
  const [activeSection, setActiveSection] = useState('story');

  const renderContent = (): JSX.Element => {
    switch (activeSection) {
      case 'story':
        return <StorySection />;
      case 'characters':
        return <CharacterManager />;
      case 'panels':
        return <PanelGrid />;
      case 'layout':
        return <LayoutEngine />;
      case 'bubbles':
        return <SpeechBubbleSystem />;
      case 'export':
        return <ExportSection />;
      case 'community':
        return <PlaceholderSection title="Community" />;
      default:
        return <StorySection />;
    }
  };

  return (
    <div className="h-screen flex flex-col overflow-hidden bg-background">
      <TopBar />
      <div className="flex-1 flex overflow-hidden">
        <Sidebar 
          activeSection={activeSection} 
          onSectionChange={setActiveSection} 
        />
        <main className="flex-1 overflow-hidden flex flex-col">
          <div className="flex-1 overflow-auto p-6">
            {renderContent()}
          </div>
        </main>
      </div>
    </div>
  );
}

export default App;
