import React, { useState, useCallback } from 'react';
import { useEditor } from '@craftjs/core';
import { TopBar } from '../panels/topbar/TopBar';
import { LeftPanel } from '../panels/left/LeftPanel';
import { RightPanel } from '../panels/right/RightPanel';
import { Canvas } from './Canvas';
import { ContextMenu } from '../panels/context-menu/ContextMenu';
import { useContextMenu } from '../hooks/useContextMenu';
import { useKeyboardShortcuts } from '../hooks/useKeyboardShortcuts';
import { DeviceMode } from '../types';

export const EditorShell: React.FC = () => {
  const [device, setDevice] = useState<DeviceMode>('desktop');
  const { menuState, show: showMenu, hide: hideMenu } = useContextMenu();
  const { query } = useEditor();

  // Register keyboard shortcuts
  useKeyboardShortcuts();

  const handleContextMenu = useCallback((e: React.MouseEvent) => {
    e.preventDefault();
    // Find the selected node id
    let nodeId: string | null = null;
    try {
      const selected = query.getEvent('selected').all();
      if (selected.length > 0) {
        nodeId = selected[0];
      }
    } catch {
      // No selection
    }
    showMenu(e.clientX, e.clientY, nodeId);
  }, [query, showMenu]);

  return (
    <div className="editor-app">
      <TopBar device={device} onDeviceChange={setDevice} />
      <div className="editor-container">
        <LeftPanel />
        <div onContextMenu={handleContextMenu} style={{ flex: 1, display: 'flex', minWidth: 0 }}>
          <Canvas device={device} />
        </div>
        <RightPanel />
      </div>
      <ContextMenu
        visible={menuState.visible}
        x={menuState.x}
        y={menuState.y}
        nodeId={menuState.nodeId}
        onClose={hideMenu}
      />
    </div>
  );
};