import type { JSX } from 'react';
import { useState } from 'react';
import { BookOpen, Wand2, Settings2, Download, Plus } from 'lucide-react';
import { Switch } from '@/components/ui/switch';
import { Button } from '@/components/ui/button';
import { useComicStore } from '@/store/comicStore';
import { ExportModal } from '@/components/export/ExportModal';
import { NewComicModal } from './NewComicModal';

export function TopBar(): JSX.Element {
  const { userMode, setUserMode, resetProject } = useComicStore();
  const [isExportOpen, setIsExportOpen] = useState(false);
  const [isNewComicOpen, setIsNewComicOpen] = useState(false);

  const handleNewComic = () => {
    resetProject();
    setIsNewComicOpen(false);
  };

  return (
    <>
      <header className="h-14 border-b flex items-center justify-between px-4 bg-background shrink-0">
        <div className="flex items-center gap-2">
          <BookOpen className="w-6 h-6 text-primary" />
          <span className="font-bold text-lg">AI Comic Creator</span>
        </div>

        <div className="flex items-center gap-4">
          {/* New Comic Button */}
          <Button
            variant="outline"
            size="sm"
            onClick={() => setIsNewComicOpen(true)}
          >
            <Plus className="w-4 h-4 mr-2" />
            New Comic
          </Button>

          {/* Export Button */}
          <Button
            variant="outline"
            size="sm"
            onClick={() => setIsExportOpen(true)}
          >
            <Download className="w-4 h-4 mr-2" />
            Export
          </Button>

          {/* Mode Toggle */}
          <div className="flex items-center gap-3 bg-muted rounded-full px-4 py-1.5">
            <Wand2 className={`w-4 h-4 ${userMode === 'casual' ? 'text-primary' : 'text-muted-foreground'}`} />
            <span className={`text-sm ${userMode === 'casual' ? 'font-medium' : 'text-muted-foreground'}`}>
              Casual
            </span>
            <Switch
              checked={userMode === 'professional'}
              onCheckedChange={(checked) => setUserMode(checked ? 'professional' : 'casual')}
            />
            <span className={`text-sm ${userMode === 'professional' ? 'font-medium' : 'text-muted-foreground'}`}>
              Pro
            </span>
            <Settings2 className={`w-4 h-4 ${userMode === 'professional' ? 'text-primary' : 'text-muted-foreground'}`} />
          </div>
        </div>
      </header>

      <ExportModal isOpen={isExportOpen} onClose={() => setIsExportOpen(false)} />
      <NewComicModal 
        isOpen={isNewComicOpen} 
        onClose={() => setIsNewComicOpen(false)} 
        onConfirm={handleNewComic}
      />
    </>
  );
}
