import { lazy, Suspense } from 'react'
import { TreePreviewPanel } from '@/components/tree-preview/TreePreviewPanel'
import { FlowCanvas } from './FlowCanvas'
import { NodeEditorPanel } from './NodeEditorPanel'
import { MetadataSidePanel } from './MetadataSidePanel'
import { useTreeEditorStore } from '@/store/treeEditorStore'
import { cn } from '@/lib/utils'

// Lazy load CodeModeEditor (Monaco is ~2MB)
const CodeModeEditor = lazy(() =>
  import('./code-mode/CodeModeEditor').then(m => ({ default: m.CodeModeEditor }))
)

interface TreeEditorLayoutProps {
  isMobile?: boolean
  isMetadataOpen?: boolean
  onCloseMetadata?: () => void
  editingNodeId: string | null
  onNodeSelect: (nodeId: string | null) => void
  onSelectAnswerType: (nodeId: string, type: 'decision' | 'action' | 'solution') => void
}

export function TreeEditorLayout({
  isMobile = false,
  isMetadataOpen = false,
  onCloseMetadata = () => {},
  editingNodeId,
  onNodeSelect,
  onSelectAnswerType,
}: TreeEditorLayoutProps) {
  const editorMode = useTreeEditorStore(s => s.editorMode)

  return (
    <div
      className={cn(
        'flex min-h-0 flex-1 overflow-hidden',
        isMobile ? 'flex-col' : 'flex-row'
      )}
    >
      {editorMode === 'code' ? (
        <>
          {/* Code Mode: Monaco editor (60%) + Preview (40%) — unchanged */}
          <div className={cn(
            'flex flex-col overflow-hidden border-border',
            isMobile ? 'h-full w-full border-b' : 'w-3/5 border-r'
          )}>
            <Suspense fallback={
              <div className="flex h-full items-center justify-center bg-card">
                <div className="h-6 w-6 animate-spin rounded-full border-2 border-border border-t-foreground" />
              </div>
            }>
              <CodeModeEditor />
            </Suspense>
          </div>

          {/* Right Panel - Preview */}
          <div className={cn(
            'flex-1 overflow-hidden bg-accent/50',
            isMobile ? 'hidden' : 'block'
          )}>
            <TreePreviewPanel />
          </div>
        </>
      ) : (
        <>
          {/* Flow Mode: React Flow canvas + side panels */}
          <div className="flex-1 overflow-hidden">
            <FlowCanvas
              selectedNodeId={editingNodeId}
              onNodeSelect={onNodeSelect}
              onSelectAnswerType={onSelectAnswerType}
            />
          </div>

          {/* Node editor panel — takes real layout space */}
          {editingNodeId && (
            <NodeEditorPanel
              nodeId={editingNodeId}
              onClose={() => onNodeSelect(null)}
              onSelectType={onSelectAnswerType}
            />
          )}

          {/* Metadata side panel — only show when node editor is closed */}
          {!editingNodeId && (
            <MetadataSidePanel
              isOpen={isMetadataOpen}
              onClose={onCloseMetadata}
            />
          )}
        </>
      )}
    </div>
  )
}

export default TreeEditorLayout