import { Toolbar } from './Toolbar';
import { FlowCanvas } from './FlowCanvas';
import { FlowSidebar } from './FlowSidebar';
import { CanvasOverlays } from './CanvasOverlays';
import { Dialogs } from './Dialogs';
import { useFlowBuilderState } from './useFlowBuilderState';

interface FlowBuilderProps {
  workflowId?: string;
  onBack: () => void;
  onWorkflowCreated?: (id: number) => void;
}

/**
 * FlowBuilder is the main workflow editor component.
 *
 * It acts as a thin composition shell, orchestrating child components:
 * - FlowCanvas: ReactFlow canvas with nodes, edges, and viewport controls
 * - FlowSidebar: Config panel, app selector, data fields, and version history
 * - Toolbar: Workflow name, undo/redo, save, publish, and active toggle
 * - CanvasOverlays: Loading, error, and empty state overlays
 * - Dialogs: Node deletion and unsaved changes confirmation dialogs
 *
 * All state management and business logic lives in useFlowBuilderState.
 */
export default function FlowBuilder({ workflowId, onBack, onWorkflowCreated }: FlowBuilderProps) {
  const state = useFlowBuilderState({ workflowId, onBack, onWorkflowCreated });

  return (
    <div
      className="flex flex-col bg-[var(--wf-neutral-50)] relative overflow-hidden"
      style={{ height: 'calc(100vh - 130px)' }}
    >
      <CanvasOverlays
        nodes={state.nodes}
        loading={state.loading}
        loadError={state.loadError}
        onAddTrigger={() => state.canvasActions.handleAddPlaceholder('trigger')}
        onRetryLoad={() => state.retryLoad(workflowId!)}
        onBack={onBack}
      />

      <div className="flex-1 flex flex-col min-h-0">
        <Toolbar
          workflowName={state.workflowName}
          onNameChange={state.setWorkflowName}
          onNameBlur={state.handleNameBlur}
          nameSaveStatus={state.nameSaveStatus}
          onBack={state.handleBack}
          onSave={state.handleSave}
          canUndo={state.canUndo}
          canRedo={state.canRedo}
          onUndo={state.undo}
          onRedo={state.redo}
          undoCount={state.undoCount}
          redoCount={state.redoCount}
          isSaving={state.isSaving}
          hasUnsavedChanges={state.hasUnsavedChanges}
          isActive={state.isActive}
          isActivating={state.isActivating}
          isPublished={state.publishedVersionId !== null}
          hasUnpublishedChanges={state.hasUnpublishedChanges}
          isPublishing={state.isPublishing}
          onOpenHistory={state.openHistoryPanel}
          onPublish={state.handlePublish}
          onToggleActive={state.handleToggleActive}
          canToggleActive={!!workflowId}
        />

        <div className="flex-1 flex min-h-0">
          <div className="flex-1 min-w-0 relative overflow-hidden">
            <FlowCanvas
              nodes={state.displayNodes}
              edges={state.edgesWithInsert}
              onNodesChange={state.onNodesChange}
              onEdgesChange={state.onEdgesChange}
              onConnect={state.onConnect}
              onNodeClick={state.handleNodeClick}
              rawNodes={state.nodes}
              sidebarOpen={state.sidebarOpen}
              loading={state.loading}
            />
          </div>

          <FlowSidebar
            selectedNodeId={state.selectedNodeId}
            nodes={state.nodes}
            edges={state.edges}
            onCloseConfig={() => state.setSelectedNodeId(null)}
            onUpdateNode={state.handleUpdateNode}
            onDeleteNode={state.canvasActions.handleRequestDeleteNode}
            onAppSelected={state.canvasActions.handleAppSelected}
            onCloseAppSelector={state.canvasActions.handleCloseAppSelector}
            workflowId={workflowId}
            onRestoreRequest={state.handleRestoreRequest}
            onMakeLive={state.handleMakeLive}
            versionToRestore={state.versionToRestore}
            onCloseRestoreDialog={() => state.setVersionToRestore(null)}
            onRestoreConfirm={state.handleRestoreConfirm}
            isRestoring={state.isRestoring}
          />
        </div>
      </div>

      <Dialogs
        onConfirmDeleteNode={state.canvasActions.handleConfirmDeleteNode}
        onCancelDeleteNode={state.canvasActions.handleCancelDeleteNode}
        onLeaveWithoutSaving={onBack}
      />
    </div>
  );
}