resolutionflow/frontend/src/pages/TreeEditorPage.tsx

import { useEffect, useState, useCallback } from 'react'
import { useParams, useNavigate, useBlocker } from 'react-router-dom'
import { useStore } from 'zustand'
import { Undo2, Redo2, Save, CheckCircle2, Monitor, FileText, Code2, LayoutList } 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 } from '@/types'
import { useTreeEditorStore, useTreeEditorTemporal } from '@/store/treeEditorStore'
import { TreeEditorLayout } from '@/components/tree-editor/TreeEditorLayout'
import { ValidationSummary } from '@/components/tree-editor/ValidationSummary'
import { useKeyboardShortcuts } from '@/hooks/useKeyboardShortcuts'
import { usePermissions } from '@/hooks/usePermissions'
import { cn, safeGetItem } from '@/lib/utils'
import { toast } from '@/lib/toast'

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

  const {
    name,
    isDirty,
    isLoading,
    isSaving,
    validationErrors,
    editorMode,
    initNewTree,
    loadTree,
    loadDraft,
    discardDraft,
    reset,
    validate,
    getTreeForSave,
    markSaved,
    setLoading,
    setSaving,
    selectNode,
    setEditorMode,
  } = 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')

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

  // 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) {
      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 })) {
            navigate('/trees')
            return
          }
          loadTree(tree)
          setTreeStatus(tree.status) // Load status from existing tree
        } catch (err) {
          console.error('Failed to load tree:', err)
          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 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
      }

      // 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) {
      console.error('Failed to publish tree:', err)
      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">
        <div className="h-8 w-8 animate-spin rounded-full border-4 border-white/20 border-t-white" />
      </div>
    )
  }

  // Mobile gate: show read-only message
  if (isMobile) {
    return (
      <div className="flex h-[calc(100vh-4rem)] flex-col items-center justify-center px-6 text-center">
        <Monitor className="mb-4 h-12 w-12 text-white/50" />
        <h2 className="mb-2 text-xl font-semibold text-white">Desktop Required</h2>
        <p className="mb-6 max-w-sm text-sm text-white/40">
          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-white px-4 py-2 text-sm font-medium text-black',
            'hover:bg-white/90'
          )}
        >
          Back to Library
        </button>
      </div>
    )
  }

  return (
    <div className="flex h-[calc(100vh-4rem)] flex-col">

      {/* Draft Restore Prompt */}
      {showDraftPrompt && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
          <div className="glass-card rounded-2xl w-full max-w-md p-6 shadow-lg">
            <h2 className="mb-2 text-lg font-semibold text-white">Restore Draft?</h2>
            <p className="mb-4 text-sm text-white/40">
              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-white px-4 py-2 text-sm font-medium text-black',
                  'hover:bg-white/90'
                )}
              >
                Restore Draft
              </button>
              <button
                onClick={handleDiscardDraft}
                className={cn(
                  'flex-1 rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60',
                  'hover:bg-white/10 hover:text-white'
                )}
              >
                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="glass-card rounded-2xl w-full max-w-md p-6 shadow-lg">
            <h2 className="mb-2 text-lg font-semibold text-white">Unsaved Changes</h2>
            <p className="mb-4 text-sm text-white/40">
              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-white px-4 py-2 text-sm font-medium text-black',
                  'hover:bg-white/90'
                )}
              >
                Stay
              </button>
              <button
                onClick={handleBlockerProceed}
                className={cn(
                  'flex-1 rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-red-400',
                  'hover:bg-white/10'
                )}
              >
                Leave Without Saving
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Toolbar */}
      <div className="flex items-center justify-between border-b border-white/[0.06] bg-black px-4 py-2">
        <div className="flex items-center gap-4">
          <button
            onClick={() => navigate('/trees')}
            className="text-sm text-white/50 hover:text-white"
          >
            ← Back to Library
          </button>
          <h1 className="text-lg font-semibold text-white">
            {isEditMode ? 'Edit Tree' : 'Create New Tree'}
            {name && <span className="ml-2 text-white/40">- {name}</span>}
          </h1>
          <div className="flex items-center gap-2">
            {treeStatus === 'draft' && (
              <span className="inline-flex items-center gap-1 rounded-full bg-yellow-100 px-2 py-0.5 text-xs font-medium text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400">
                <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-600 dark: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-white/[0.06]">
            <button
              type="button"
              onClick={() => setEditorMode('form')}
              title="Flow Mode — form-based 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-white/10 text-white'
                  : 'text-white/40 hover:bg-white/[0.06] hover:text-white/60'
              )}
            >
              <LayoutList className="h-3.5 w-3.5" />
              Flow
            </button>
            <div className="h-5 w-px bg-white/[0.06]" />
            <button
              type="button"
              onClick={() => setEditorMode('code')}
              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-white/10 text-white'
                  : 'text-white/40 hover:bg-white/[0.06] hover:text-white/60'
              )}
            >
              <Code2 className="h-3.5 w-3.5" />
              Code
            </button>
          </div>

          <div className="mx-1 h-6 w-px bg-white/[0.06]" />

          {/* Undo/Redo */}
          <div className="flex items-center rounded-md border border-white/[0.06]">
            <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-white hover:bg-white/[0.06] active:bg-white/[0.12]'
                  : 'text-white/20 cursor-not-allowed'
              )}
            >
              <Undo2 className="h-4 w-4" />
            </button>
            <div className="h-6 w-px bg-white/[0.06]" />
            <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-white hover:bg-white/[0.06] active:bg-white/[0.12]'
                  : 'text-white/20 cursor-not-allowed'
              )}
            >
              <Redo2 className="h-4 w-4" />
            </button>
          </div>

          <div className="mx-2 h-6 w-px bg-white/[0.06]" />

          {/* Validate */}
          <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-white/10 bg-black/50 px-3 py-2 text-sm font-medium text-white/60',
              'hover:bg-white/10 hover:text-white 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-white/10 bg-black/50 px-3 py-2 text-sm font-medium text-white/60',
              'hover:bg-white/10 hover:text-white disabled:opacity-50 disabled:cursor-not-allowed'
            )}
          >
            <Save className="h-4 w-4" />
            Save Draft
          </button>

          {/* Publish */}
          <button
            onClick={handlePublish}
            disabled={isSaving || !isDirty || 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-white px-4 py-2 text-sm font-medium text-black',
              'hover:bg-white/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}
          />
        </div>
      )}

      {/* Main Editor */}
      <TreeEditorLayout isMobile={isMobile} />
    </div>
  )
}

export default TreeEditorPage