resolutionflow/frontend/src/pages/TreeEditorPage.tsx

import { useEffect, useState, useCallback, useRef } from 'react'
import { useParams, useNavigate, useBlocker } from 'react-router-dom'
import { useStore } from 'zustand'
import { Undo2, Redo2, Save, CheckCircle2, Monitor, FileText, Code2, LayoutList, BarChart3, Settings, Download, Sparkles } from 'lucide-react'
import { getMonacoEditor } from '@/components/tree-editor/code-mode'
import { treesApi } from '@/api/trees'
import { treeMarkdownApi } from '@/api/treeMarkdown'
import type { TreeCreate, TreeUpdate, TreeStatus, TreeStructure, AIFixProposal } from '@/types'
import { useTreeEditorStore, useTreeEditorTemporal } from '@/store/treeEditorStore'
import { TreeEditorLayout } from '@/components/tree-editor/TreeEditorLayout'
import { ValidationSummary } from '@/components/tree-editor/ValidationSummary'
import { AIFixReviewModal } from '@/components/tree-editor/AIFixReviewModal'
import { useKeyboardShortcuts } from '@/hooks/useKeyboardShortcuts'
import { usePermissions } from '@/hooks/usePermissions'
import { Spinner } from '@/components/common/Spinner'
import { cn, safeGetItem } from '@/lib/utils'
import { toast } from '@/lib/toast'
import { FlowAnalyticsPanel } from '@/components/analytics/FlowAnalyticsPanel'
import { ExportFlowModal } from '@/components/library/ExportFlowModal'
import { EditorAIPanel } from '@/components/editor-ai/EditorAIPanel'
import { ContextMenu } from '@/components/common/ContextMenu'
import { useEditorAI } from '@/hooks/useEditorAI'
import { findNodeInTree } from '@/store/treeEditorStore'

/** Recursively check if any node in the tree has type 'answer' */
function hasAnswerNodes(node: TreeStructure): boolean {
  if (node.type === 'answer') return true
  return (node.children || []).some(hasAnswerNodes)
}

export function TreeEditorPage() {
  const { id } = useParams<{ id: string }>()
  const navigate = useNavigate()
  const isEditMode = !!id
  const { canCreateTrees, canEditTree } = usePermissions()

  const {
    name,
    description,
    isDirty,
    isLoading,
    isSaving,
    validationErrors,
    editorMode,
    treeStructure,
    initNewTree,
    loadTree,
    loadDraft,
    discardDraft,
    reset,
    validate,
    getTreeForSave,
    markSaved,
    setLoading,
    setSaving,
    selectNode,
    updateNode,
    deleteNode,
    setEditorMode,
    getAllNodeIds,
    replaceTreeStructure,
  } = useTreeEditorStore()

  // Access undo/redo from temporal store
  const { undo, redo, pastStates, futureStates } = useStore(useTreeEditorTemporal)

  const [showDraftPrompt, setShowDraftPrompt] = useState(false)
  const [treeStatus, setTreeStatus] = useState<TreeStatus>('draft')
  const [showAnalytics, setShowAnalytics] = useState(false)
  const [isMetadataOpen, setIsMetadataOpen] = useState(false)
  const [editingNodeId, setEditingNodeId] = useState<string | null>(null)
  const [isFixing, setIsFixing] = useState(false)
  const [fixProposals, setFixProposals] = useState<AIFixProposal[] | null>(null)
  const [showExportModal, setShowExportModal] = useState(false)
  const [importMetadata, setImportMetadata] = useState<Record<string, string | null> | null>(null)

  // Mobile detection
  const [isMobile, setIsMobile] = useState(false)
  useEffect(() => {
    const check = () => setIsMobile(window.innerWidth < 768)
    check()
    window.addEventListener('resize', check)
    return () => window.removeEventListener('resize', check)
  }, [])

  // AI Assist panel
  const handleFlowUpdate = useCallback((workingTree: Record<string, unknown>) => {
    // For troubleshooting flows, working_tree is the tree structure directly
    if (workingTree.type && workingTree.id) {
      replaceTreeStructure(workingTree as unknown as TreeStructure)
    }
  }, [replaceTreeStructure])

  const editorAI = useEditorAI({
    flowType: 'troubleshooting',
    treeId: id,
    getFlowContext: useCallback(() => {
      if (!treeStructure) return null
      return {
        name,
        description,
        tree_structure: treeStructure as unknown as Record<string, unknown>,
      }
    }, [treeStructure, name, description]),
    onFlowUpdate: handleFlowUpdate,
  })

  const previousEditingNodeRef = useRef<string | null>(null)

  const handleAIPanelClose = useCallback(() => {
    editorAI.closePanel()
    if (previousEditingNodeRef.current) {
      setEditingNodeId(previousEditingNodeRef.current)
      previousEditingNodeRef.current = null
    }
  }, [editorAI])

  // Calculate if there are blocking errors
  const hasBlockingErrors = validationErrors.some(e => e.severity === 'error')

  // Block navigation if there are unsaved changes
  const blocker = useBlocker(
    ({ currentLocation, nextLocation }) =>
      isDirty && currentLocation.pathname !== nextLocation.pathname
  )

  const handleUndo = useCallback(() => {
    if (editorMode === 'code') {
      // In Code Mode, use Monaco's native undo (word-level, like VS Code)
      const editor = getMonacoEditor()
      if (editor) {
        editor.trigger('toolbar', 'undo', null)
        editor.focus()
        return
      }
    }
    if (pastStates.length > 0) {
      undo()
      toast.info('Undone')
    }
  }, [editorMode, pastStates.length, undo])

  const handleRedo = useCallback(() => {
    if (editorMode === 'code') {
      // In Code Mode, use Monaco's native redo (word-level, like VS Code)
      const editor = getMonacoEditor()
      if (editor) {
        editor.trigger('toolbar', 'redo', null)
        editor.focus()
        return
      }
    }
    if (futureStates.length > 0) {
      redo()
      toast.info('Redone')
    }
  }, [editorMode, futureStates.length, redo])

  // Keyboard shortcuts for undo/redo/save
  useKeyboardShortcuts([
    {
      key: 'z',
      ctrl: true,
      handler: handleUndo
    },
    {
      key: 'z',
      ctrl: true,
      shift: true,
      handler: handleRedo
    },
    {
      key: 's',
      ctrl: true,
      handler: () => {
        handleSave()
      }
    },
    {
      key: 'm',
      ctrl: true,
      shift: true,
      handler: () => {
        setEditorMode(editorMode === 'form' ? 'code' : 'form')
      }
    }
  ])

  // Permission guard: redirect viewers away from editor
  useEffect(() => {
    if (!canCreateTrees) {
      toast.error("You don't have permission to edit flows")
      navigate('/trees')
    }
  }, [canCreateTrees, navigate])

  // Initialize or load tree
  useEffect(() => {
    if (!canCreateTrees) return

    const initialize = async () => {
      if (isEditMode) {
        setLoading(true)
        try {
          const tree = await treesApi.get(id)
          if (!canEditTree({ author_id: tree.author_id, account_id: tree.account_id })) {
            toast.error("You don't have permission to edit this flow")
            navigate('/trees')
            return
          }
          loadTree(tree)
          setTreeStatus(tree.status) // Load status from existing tree
          if (tree.import_metadata) setImportMetadata(tree.import_metadata)
        } catch (err) {
          console.error('Failed to load tree:', err)
          toast.error('Failed to load flow')
          navigate('/trees')
        }
      } else {
        initNewTree()
        setTreeStatus('draft') // New trees start as draft
        // Check for draft after initializing
        const draftExists = safeGetItem('tree-editor-draft') !== null
        if (draftExists) {
          setShowDraftPrompt(true)
        }
      }
    }

    initialize()

    return () => {
      reset()
    }
  }, [id, isEditMode, canCreateTrees])

  // Handle unsaved changes warning
  useEffect(() => {
    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
      if (isDirty) {
        e.preventDefault()
        e.returnValue = ''
      }
    }

    window.addEventListener('beforeunload', handleBeforeUnload)
    return () => window.removeEventListener('beforeunload', handleBeforeUnload)
  }, [isDirty])

  const handleRestoreDraft = () => {
    loadDraft()
    setShowDraftPrompt(false)
  }

  const handleDiscardDraft = () => {
    discardDraft()
    setShowDraftPrompt(false)
  }

  const handleManualValidate = () => {
    validate()
  }

  const handleSelectNode = (nodeId: string) => {
    selectNode(nodeId)
  }

  const handleFixWithAI = async () => {
    const store = useTreeEditorStore.getState()
    if (!store.treeStructure) return

    const fixableErrors = store.validationErrors
      .filter(e => e.severity === 'error' && e.nodeId)
      .map(e => ({ node_id: e.nodeId!, message: e.message }))

    if (fixableErrors.length === 0) return

    setIsFixing(true)
    try {
      const result = await treesApi.fixTree({
        tree_structure: store.treeStructure as unknown as Record<string, unknown>,
        tree_name: store.name,
        tree_type: 'troubleshooting',
        validation_errors: fixableErrors,
      })
      if (result.fixes.length > 0) {
        setFixProposals(result.fixes)
      } else {
        toast.info('AI could not generate fixes for these errors')
      }
    } catch {
      toast.error('Failed to generate AI fixes. Please try again.')
    } finally {
      setIsFixing(false)
    }
  }

  const handleApplyFix = (fix: AIFixProposal) => {
    updateNode(fix.target_node_id, fix.fixed_node as Partial<TreeStructure>)
  }

  const handleApplyAllFixes = () => {
    if (!fixProposals) return
    for (const fix of fixProposals) {
      handleApplyFix(fix)
    }
    setFixProposals(null)
    setTimeout(() => { validate() }, 100)
  }

  const handleCloseFixModal = () => {
    setFixProposals(null)
    validate()
  }

  const handleNodeSelect = useCallback((nodeId: string | null) => {
    if (nodeId) {
      setIsMetadataOpen(false) // close metadata when opening node editor
    }
    setEditingNodeId(nodeId)
    selectNode(nodeId)
  }, [selectNode])

  const handleSelectAnswerType = useCallback((nodeId: string, type: 'decision' | 'action' | 'solution') => {
    updateNode(nodeId, { type })
    // Keep the panel open on the same node — it will now show the form for the new type
    setEditingNodeId(nodeId)
    selectNode(nodeId)
  }, [updateNode, selectNode])

  const handleSaveDraft = useCallback(async () => {
    setSaving(true)
    try {
      // In Code Mode, run fresh validation on current markdown before saving
      if (editorMode === 'code') {
        const { markdownSource, setMarkdownValidationResult } = useTreeEditorStore.getState()
        if (markdownSource) {
          const result = await treeMarkdownApi.validateMarkdown(markdownSource)
          setMarkdownValidationResult(result) // applies tree_structure + metadata to store
          if (!result.valid) {
            const errorCount = result.errors.filter(e => e.severity === 'error').length
            toast.error(`Cannot save: ${errorCount} markdown error${errorCount !== 1 ? 's' : ''} — fix them in the editor first`)
            setSaving(false)
            return
          }
        }
      }

      // Check tree name is set (metadata may come from Code Mode markdown)
      const currentState = useTreeEditorStore.getState()
      if (!currentState.name.trim()) {
        toast.error('Tree name is required. Add a "name:" field in the metadata block or switch to Flow Mode.')
        setSaving(false)
        return
      }

      const treeData = { ...getTreeForSave(), status: 'draft' as TreeStatus }
      if (isEditMode) {
        await treesApi.update(id!, treeData as TreeUpdate)
        setTreeStatus('draft')
        markSaved()
        toast.success('Draft saved successfully')
      } else {
        const newTree = await treesApi.create(treeData as TreeCreate)
        setTreeStatus('draft')
        markSaved()
        toast.success('Draft created successfully')
        navigate(`/trees/${newTree.id}/edit`, { replace: true })
      }
    } catch (err: unknown) {
      console.error('Failed to save draft:', err)
      if (err && typeof err === 'object' && 'response' in err) {
        const axiosErr = err as { response?: { status?: number; data?: { detail?: string | { message?: string; errors?: string[] } } } }
        if (axiosErr.response?.status === 422) {
          const detail = axiosErr.response.data?.detail
          if (typeof detail === 'object' && detail?.errors) {
            toast.error(`Validation failed: ${detail.errors.join(', ')}`)
          } else if (typeof detail === 'string') {
            toast.error(`Validation failed: ${detail}`)
          } else {
            toast.error('Tree has validation errors. Fix them before saving.')
          }
          return
        }
      }
      toast.error('Failed to save draft. Please try again.')
    } finally {
      setSaving(false)
    }
  }, [isEditMode, id, editorMode, getTreeForSave, markSaved, navigate])

  const handlePublish = useCallback(async () => {
    setSaving(true)
    try {
      // In Code Mode, run fresh validation on current markdown before publishing
      if (editorMode === 'code') {
        const { markdownSource, setMarkdownValidationResult } = useTreeEditorStore.getState()
        if (markdownSource) {
          const result = await treeMarkdownApi.validateMarkdown(markdownSource)
          setMarkdownValidationResult(result)
          if (!result.valid) {
            const errorCount = result.errors.filter(e => e.severity === 'error').length
            toast.error(`Cannot publish: ${errorCount} markdown error${errorCount !== 1 ? 's' : ''} — fix them in the editor first`)
            setSaving(false)
            return
          }
        }
      }

      // Check tree name is set
      const currentState = useTreeEditorStore.getState()
      if (!currentState.name.trim()) {
        toast.error('Tree name is required. Add a "name:" field in the metadata block or switch to Flow Mode.')
        setSaving(false)
        return
      }

      // Block publish if any answer placeholder nodes remain
      const currentStructure = useTreeEditorStore.getState().treeStructure
      if (currentStructure && hasAnswerNodes(currentStructure)) {
        toast.error('Resolve all answer placeholders before publishing. Click each dashed stub card to assign a type.')
        setSaving(false)
        return
      }

      // Validate tree structure
      const errors = validate()
      const hasErrors = errors.some(e => e.severity === 'error')
      if (hasErrors) {
        toast.error('Please fix validation errors before publishing')
        setSaving(false)
        return
      }

      const treeData = { ...getTreeForSave(), status: 'published' as TreeStatus }
      if (isEditMode) {
        await treesApi.update(id!, treeData as TreeUpdate)
        setTreeStatus('published')
        markSaved()
        toast.success('Tree published successfully')
      } else {
        const newTree = await treesApi.create(treeData as TreeCreate)
        setTreeStatus('published')
        markSaved()
        toast.success('Tree published successfully')
        navigate(`/trees/${newTree.id}/edit`, { replace: true })
      }
    } catch (err: unknown) {
      console.error('Failed to publish tree:', err)
      if (err && typeof err === 'object' && 'response' in err) {
        const axiosErr = err as { response?: { status?: number; data?: { detail?: string | { message?: string; errors?: Array<string | { message?: string }> } } } }
        if (axiosErr.response?.status === 422) {
          const detail = axiosErr.response.data?.detail
          if (typeof detail === 'object' && detail?.errors) {
            const messages = detail.errors.map(e => typeof e === 'string' ? e : e.message || 'Unknown error')
            toast.error(`Cannot publish: ${messages.join(', ')}`)
          } else if (typeof detail === 'string') {
            toast.error(`Cannot publish: ${detail}`)
          } else {
            toast.error('Tree has validation errors. Fix them before publishing.')
          }
          return
        }
      }
      toast.error('Failed to publish tree. Please try again.')
    } finally {
      setSaving(false)
    }
  }, [isEditMode, id, editorMode, validate, getTreeForSave, markSaved, navigate])

  // Keep handleSave for backward compatibility (Ctrl+S shortcut)
  const handleSave = useCallback(async () => {
    // If tree is already published or has no errors, publish; otherwise save as draft
    if (treeStatus === 'published' || !hasBlockingErrors) {
      await handlePublish()
    } else {
      await handleSaveDraft()
    }
  }, [treeStatus, hasBlockingErrors, handlePublish, handleSaveDraft])

  // Handle blocker
  const handleBlockerProceed = () => {
    if (blocker.state === 'blocked') {
      blocker.proceed()
    }
  }

  const handleBlockerReset = () => {
    if (blocker.state === 'blocked') {
      blocker.reset()
    }
  }

  if (isLoading) {
    return (
      <div className="flex h-64 items-center justify-center">
        <Spinner />
      </div>
    )
  }

  // Mobile gate: show read-only message
  if (isMobile) {
    return (
      <div className="flex h-full flex-col items-center justify-center px-6 text-center">
        <Monitor className="mb-4 h-12 w-12 text-muted-foreground" />
        <h2 className="mb-2 text-xl font-heading font-semibold text-foreground">Desktop Required</h2>
        <p className="mb-6 max-w-sm text-sm text-muted-foreground">
          The tree editor requires a larger screen for the best experience. Please open this page on a desktop or tablet in landscape mode.
        </p>
        <button
          onClick={() => navigate('/trees')}
          className={cn(
            'rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
            'hover:opacity-90'
          )}
        >
          Back to Library
        </button>
      </div>
    )
  }

  return (
    <div className="flex h-full overflow-hidden">
      {/* Main content column */}
      <div className="flex min-w-0 flex-1 flex-col overflow-hidden">

      {/* Draft Restore Prompt */}
      {showDraftPrompt && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
          <div className="bg-card border border-border rounded-xl w-full max-w-md p-6 shadow-lg">
            <h2 className="mb-2 text-lg font-heading font-semibold text-foreground">Restore Draft?</h2>
            <p className="mb-4 text-sm text-muted-foreground">
              You have an unsaved draft from a previous session. Would you like to restore it?
            </p>
            <div className="flex gap-2">
              <button
                onClick={handleRestoreDraft}
                className={cn(
                  'flex-1 rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
                  'hover:opacity-90'
                )}
              >
                Restore Draft
              </button>
              <button
                onClick={handleDiscardDraft}
                className={cn(
                  'flex-1 rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
                  'hover:bg-accent hover:text-foreground'
                )}
              >
                Start Fresh
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Unsaved Changes Dialog */}
      {blocker.state === 'blocked' && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
          <div className="bg-card border border-border rounded-xl w-full max-w-md p-6 shadow-lg">
            <h2 className="mb-2 text-lg font-heading font-semibold text-foreground">Unsaved Changes</h2>
            <p className="mb-4 text-sm text-muted-foreground">
              You have unsaved changes. Are you sure you want to leave?
            </p>
            <div className="flex gap-2">
              <button
                onClick={handleBlockerReset}
                className={cn(
                  'flex-1 rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
                  'hover:opacity-90'
                )}
              >
                Stay
              </button>
              <button
                onClick={handleBlockerProceed}
                className={cn(
                  'flex-1 rounded-md border border-border px-4 py-2 text-sm font-medium text-red-400',
                  'hover:bg-accent'
                )}
              >
                Leave Without Saving
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Toolbar */}
      <div className="flex items-center justify-between border-b border-border bg-card px-4 py-2">
        <div className="flex items-center gap-4">
          <button
            onClick={() => navigate('/trees')}
            className="text-sm text-muted-foreground hover:text-foreground"
          >
            ← Back to Library
          </button>
          <h1 className="text-lg font-heading font-semibold text-foreground">
            {isEditMode ? 'Edit Tree' : 'Create New Tree'}
            {name && <span className="ml-2 text-muted-foreground">- {name}</span>}
          </h1>
          <div className="flex items-center gap-2">
            {treeStatus === 'draft' && (
              <span className="inline-flex items-center gap-1 rounded-full bg-yellow-900/30 px-2 py-0.5 text-xs font-medium text-yellow-400 border border-yellow-500/20">
                <FileText className="h-3 w-3" />
                Draft
              </span>
            )}
            {isDirty && (
              <span className="rounded-full bg-yellow-500/20 px-2 py-0.5 text-xs text-yellow-400">
                Unsaved
              </span>
            )}
          </div>
        </div>

        <div className="flex items-center gap-2">
          {/* Mode Toggle */}
          <div className="flex items-center rounded-md border border-border">
            <button
              type="button"
              onClick={() => setEditorMode('form')}
              title="Flow Mode — visual canvas editing"
              className={cn(
                'flex items-center gap-1.5 rounded-l-md px-3 py-1.5 text-xs font-medium transition-colors',
                editorMode === 'form'
                  ? 'bg-accent text-foreground'
                  : 'text-muted-foreground hover:bg-accent/50 hover:text-foreground'
              )}
            >
              <LayoutList className="h-3.5 w-3.5" />
              Flow
            </button>
            <div className="h-5 w-px bg-border" />
            <button
              type="button"
              onClick={() => {
                setEditorMode('code')
                setIsMetadataOpen(false)  // Auto-close metadata panel on Code mode
                setEditingNodeId(null)    // Close node editor on Code mode
              }}
              title="Code Mode — markdown editing (Ctrl+Shift+M)"
              className={cn(
                'flex items-center gap-1.5 rounded-r-md px-3 py-1.5 text-xs font-medium transition-colors',
                editorMode === 'code'
                  ? 'bg-accent text-foreground'
                  : 'text-muted-foreground hover:bg-accent/50 hover:text-foreground'
              )}
            >
              <Code2 className="h-3.5 w-3.5" />
              Code
            </button>
          </div>

          <div className="mx-1 h-6 w-px bg-border" />

          {/* Undo/Redo */}
          <div className="flex items-center rounded-md border border-border">
            <button
              type="button"
              onClick={handleUndo}
              disabled={pastStates.length === 0}
              title={pastStates.length > 0 ? `Undo (Ctrl+Z) - ${pastStates.length} step${pastStates.length !== 1 ? 's' : ''} available` : 'Nothing to undo'}
              className={cn(
                'rounded-l-md p-2 transition-colors',
                pastStates.length > 0
                  ? 'text-foreground hover:bg-accent/50 active:bg-accent'
                  : 'text-muted-foreground/50 cursor-not-allowed'
              )}
            >
              <Undo2 className="h-4 w-4" />
            </button>
            <div className="h-6 w-px bg-border" />
            <button
              type="button"
              onClick={handleRedo}
              disabled={futureStates.length === 0}
              title={futureStates.length > 0 ? `Redo (Ctrl+Shift+Z) - ${futureStates.length} step${futureStates.length !== 1 ? 's' : ''} available` : 'Nothing to redo'}
              className={cn(
                'rounded-r-md p-2 transition-colors',
                futureStates.length > 0
                  ? 'text-foreground hover:bg-accent/50 active:bg-accent'
                  : 'text-muted-foreground/50 cursor-not-allowed'
              )}
            >
              <Redo2 className="h-4 w-4" />
            </button>
          </div>

          <div className="mx-2 h-6 w-px bg-border" />

          {/* Metadata panel toggle — Flow mode only */}
          {editorMode === 'form' && (
            <button
              type="button"
              onClick={() => {
                if (!isMetadataOpen) {
                  setEditingNodeId(null) // close node editor when opening metadata
                }
                setIsMetadataOpen(!isMetadataOpen)
              }}
              title="Edit flow metadata (name, description, category, tags)"
              className={cn(
                'flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium transition-colors',
                isMetadataOpen
                  ? 'bg-accent text-foreground'
                  : 'bg-card text-muted-foreground hover:bg-accent hover:text-foreground'
              )}
            >
              <Settings className="h-4 w-4" />
              Metadata
            </button>
          )}

          {/* Analytics toggle (only for existing trees) */}
          {isEditMode && (
            <button
              onClick={() => setShowAnalytics(!showAnalytics)}
              title="Toggle flow analytics panel"
              className={cn(
                'flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium transition-colors',
                showAnalytics
                  ? 'bg-accent text-foreground'
                  : 'bg-card text-muted-foreground hover:bg-accent hover:text-foreground'
              )}
            >
              <BarChart3 className="h-4 w-4" />
              Analytics
            </button>
          )}

          {/* Validate */}
          {isEditMode && (
            <button
              onClick={() => setShowExportModal(true)}
              title="Export flow as .rfflow file"
              className={cn(
                'flex items-center gap-2 rounded-md border border-border bg-card px-3 py-2 text-sm font-medium text-muted-foreground',
                'hover:bg-accent hover:text-foreground'
              )}
            >
              <Download className="h-4 w-4" />
              Export
            </button>
          )}

          {/* AI Assist toggle */}
          <button
            onClick={() => {
              if (editorAI.isOpen) {
                handleAIPanelClose()
              } else {
                if (editingNodeId) {
                  previousEditingNodeRef.current = editingNodeId
                  setEditingNodeId(null)
                }
                editorAI.openPanel()
              }
            }}
            title="Toggle AI Assist panel"
            className={cn(
              'flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium transition-colors',
              editorAI.isOpen
                ? 'bg-primary/10 text-primary border-primary/30'
                : 'bg-card text-muted-foreground hover:bg-accent hover:text-foreground'
            )}
          >
            <Sparkles className="h-4 w-4" />
            AI Assist
          </button>

          <button
            onClick={handleManualValidate}
            disabled={isSaving}
            title="Validate tree structure (checks for errors and warnings)"
            className={cn(
              'flex items-center gap-2 rounded-md border border-border bg-card px-3 py-2 text-sm font-medium text-muted-foreground',
              'hover:bg-accent hover:text-foreground disabled:opacity-50'
            )}
          >
            <CheckCircle2 className="h-4 w-4" />
            Validate
          </button>

          {/* Save Draft */}
          <button
            onClick={handleSaveDraft}
            disabled={isSaving || !isDirty}
            title="Save as draft (Ctrl+S when draft or has errors)"
            className={cn(
              'flex items-center gap-2 rounded-md border border-border bg-card px-3 py-2 text-sm font-medium text-muted-foreground',
              'hover:bg-accent hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed'
            )}
          >
            <Save className="h-4 w-4" />
            Save Draft
          </button>

          {/* Publish */}
          <button
            onClick={handlePublish}
            disabled={isSaving || hasBlockingErrors}
            title={hasBlockingErrors ? 'Fix validation errors before publishing (Ctrl+S when no errors)' : 'Publish tree (Ctrl+S when no errors)'}
            className={cn(
              'flex items-center gap-2 rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
              'hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed'
            )}
          >
            <CheckCircle2 className="h-4 w-4" />
            {isSaving ? 'Publishing...' : 'Publish'}
          </button>
        </div>
      </div>

      {/* Validation Summary */}
      {validationErrors.length > 0 && (
        <div className="px-4 py-3">
          <ValidationSummary
            errors={validationErrors}
            onSelectNode={handleSelectNode}
            onFixWithAI={handleFixWithAI}
            isFixing={isFixing}
          />
        </div>
      )}

      {/* Import provenance */}
      {importMetadata && (
        <div className="mx-4 mb-2 flex items-center gap-2 text-xs font-label text-muted-foreground">
          <FileText className="h-3 w-3" />
          <span>
            Imported{importMetadata.original_author_name ? ` from ${importMetadata.original_author_name}` : ''}
            {importMetadata.imported_at ? ` on ${new Date(importMetadata.imported_at).toLocaleDateString()}` : ''}
          </span>
        </div>
      )}

      {/* Main Editor */}
      <div className="min-h-0 flex-1 overflow-hidden">
        <TreeEditorLayout
          isMobile={isMobile}
          isMetadataOpen={isMetadataOpen}
          onCloseMetadata={() => setIsMetadataOpen(false)}
          editingNodeId={editorAI.isOpen ? null : editingNodeId}
          onNodeSelect={handleNodeSelect}
          onSelectAnswerType={handleSelectAnswerType}
          onNodeContextMenu={editorAI.openContextMenu}
        />
      </div>

      {/* Flow Analytics Panel (collapsible) */}
      {showAnalytics && id && (
        <div className="border-t border-border p-6 overflow-y-auto max-h-[50vh]">
          <FlowAnalyticsPanel treeId={id} />
        </div>
      )}

      {/* AI Fix Review Modal */}
      {fixProposals && (
        <AIFixReviewModal
          fixes={fixProposals}
          onApply={handleApplyFix}
          onApplyAll={handleApplyAllFixes}
          onClose={handleCloseFixModal}
        />
      )}

      {/* Export Modal */}
      {showExportModal && id && (
        <ExportFlowModal
          treeId={id}
          treeName={name || 'flow'}
          onClose={() => setShowExportModal(false)}
        />
      )}

      {/* AI Context Menu */}
      {editorAI.contextMenu && (
        <ContextMenu
          position={editorAI.contextMenu.position}
          items={[
            {
              id: 'generate-branch',
              label: 'Generate Branch',
              icon: <Sparkles className="h-4 w-4" />,
              onClick: () => {
                if (editingNodeId) {
                  previousEditingNodeRef.current = editingNodeId
                  setEditingNodeId(null)
                }
                editorAI.triggerAction(
                  editorAI.contextMenu!.nodeId,
                  'generate_branch',
                  `Generate a branch from this node`
                )
              },
            },
            {
              id: 'explain',
              label: 'Explain Node',
              icon: <Sparkles className="h-4 w-4" />,
              onClick: () => {
                if (editingNodeId) {
                  previousEditingNodeRef.current = editingNodeId
                  setEditingNodeId(null)
                }
                editorAI.triggerAction(
                  editorAI.contextMenu!.nodeId,
                  'quick_action',
                  `Explain what this node does`
                )
              },
            },
            {
              id: 'sep1',
              label: '',
              onClick: () => {},
              separator: true,
            },
            {
              id: 'delete',
              label: 'Delete Node',
              variant: 'danger' as const,
              onClick: () => deleteNode(editorAI.contextMenu!.nodeId),
            },
          ]}
          onClose={editorAI.closeContextMenu}
        />
      )}
      </div>{/* end main content column */}

      <EditorAIPanel
        isOpen={editorAI.isOpen}
        onClose={handleAIPanelClose}
        focalNode={editorAI.focalNodeId && treeStructure
          ? findNodeInTree(editorAI.focalNodeId, treeStructure)
          : null}
        flowName={name}
        flowType="troubleshooting"
        nodeCount={treeStructure ? getAllNodeIds().length : 0}
        messages={editorAI.messages}
        input={editorAI.input}
        onInputChange={editorAI.setInput}
        onSend={editorAI.sendMessage}
        isLoading={editorAI.isLoading}
        suggestions={editorAI.suggestions}
      />
    </div>
  )
}

export default TreeEditorPage