import React, { useEffect, useState, useCallback } from 'react';
import { useEditorStore } from '@/core/store';
import type { LanguageMode } from '@/core/types';
import { ActivityBar } from './ActivityBar';
import { FileExplorer } from '@/filesystem/FileExplorer';
import { BookmarksPanel } from '@/bookmarks/BookmarksPanel';
import { SearchPanel } from './SearchPanel';
import { TrashPanel } from './TrashPanel';
import { FileManager } from './FileManager';
import { EditorArea } from './EditorArea';
import { StatusBar } from './StatusBar';
import CommandPalette from '@/commands/CommandPalette';
import { CreateItemDialog } from '@/components/CreateItemDialog';
import { getLanguageFromFileName } from '@/editor/languages';
import {
  ResizablePanelGroup,
  ResizablePanel,
  ResizableHandle,
} from '@/components/ui/resizable';
import { FileManagerModal } from './FileManagerModal';

export const IDELayout: React.FC = () => {
  const { 
    isSidebarOpen, 
    activeSidebarPanel, 
    toggleCommandPalette, 
    toggleSidebar,
    loadFiles,
    loadBookmarks,
    loadSettings,
    addFile,
    openSettingsTab,
  } = useEditorStore();
  const [createDialogOpen, setCreateDialogOpen] = useState(false);
  const [createType, setCreateType] = useState<'file' | 'folder'>('file');

  // Load data from API on mount
  useEffect(() => {
    const initializeData = async () => {
      try {
        await Promise.all([
          loadFiles(),
          loadBookmarks(),
          loadSettings(),
        ]);
      } catch (error) {
        console.error('Failed to initialize data:', error);
      }
    };
    initializeData();
  }, [loadFiles, loadBookmarks, loadSettings]);

  const handleCreateRootSubmit = useCallback(
    async (name: string) => {
      await addFile({
        name,
        type: createType,
        parentId: null,
        language: createType === 'file' ? (getLanguageFromFileName(name) as LanguageMode) : undefined,
        content: createType === 'file' ? '' : undefined,
        isExpanded: createType === 'folder' ? true : undefined,
      });
    },
    [createType, addFile]
  );

  // Keyboard shortcuts (Apple-style: smooth, responsive)
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      // Command Palette: Ctrl+Shift+P (Cmd+Shift+P on Mac)
      if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'P') {
        e.preventDefault();
        toggleCommandPalette();
      }
      // Toggle Sidebar: Ctrl+B (Cmd+B on Mac)
      if ((e.ctrlKey || e.metaKey) && e.key === 'b') {
        e.preventDefault();
        toggleSidebar();
      }
      // New File dialog: Ctrl+N (Cmd+N on Mac)
      if ((e.ctrlKey || e.metaKey) && e.key === 'n') {
        e.preventDefault();
        setCreateType('file');
        setCreateDialogOpen(true);
      }
      // Settings tab: Ctrl+, (Cmd+, on Mac)
      if ((e.ctrlKey || e.metaKey) && e.key === ',') {
        e.preventDefault();
        openSettingsTab();
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [toggleCommandPalette, toggleSidebar, openSettingsTab]);

  const renderSidebarContent = () => {
    switch (activeSidebarPanel) {
      case 'explorer':
        return <FileExplorer />;
      case 'search':
        return <SearchPanel />;
      case 'bookmarks':
        return <BookmarksPanel />;
      case 'trash':
        return <TrashPanel />;
      case 'settings':
        return <FileExplorer />;
      default:
        return <FileExplorer />;
    }
  };

  return (
    <div className="h-screen w-screen flex flex-col overflow-hidden bg-background">
      {/* Main content */}
      <div className="flex-1 flex overflow-hidden">
        {/* Activity Bar */}
        <ActivityBar />

        {/* Sidebar + Editor */}
        <ResizablePanelGroup direction="horizontal" className="flex-1">
          {/* Sidebar */}
          {isSidebarOpen && (
            <ResizablePanel
              defaultSize={20}
              minSize={15}
              maxSize={40}
              className="bg-sidebar flex flex-col"
            >
              <div className="flex-1 overflow-hidden min-h-0 flex flex-col">
                {renderSidebarContent()}
              </div>
            </ResizablePanel>
          )}

          {isSidebarOpen && <ResizableHandle withHandle />}

          {/* Editor Area - min-h-0 so flex child can shrink and scroll */}
          <ResizablePanel defaultSize={80} className="min-h-0 flex flex-col">
            <EditorArea />
          </ResizablePanel>
        </ResizablePanelGroup>
      </div>

      {/* Status Bar */}
      <StatusBar />

      {/* Command Palette */}
      <CommandPalette />

      {/* New File dialog (Ctrl+N) - root level */}
      <CreateItemDialog
        open={createDialogOpen}
        onOpenChange={setCreateDialogOpen}
        type={createType}
        parentLabel="Explorer"
        onCreate={handleCreateRootSubmit}
      />
      
      {/* File Manager Modal */}
      <FileManagerModal />
    </div>
  );
};

export default IDELayout;