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 } from 'lucide-react'
import { treesApi } from '@/api'
import type { TreeCreate, TreeUpdate } 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 } from '@/lib/utils'

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

  const {
    name,
    isDirty,
    isLoading,
    isSaving,
    validationErrors,
    initNewTree,
    loadTree,
    loadDraft,
    discardDraft,
    reset,
    validate,
    getTreeForSave,
    markSaved,
    setLoading,
    setSaving,
    selectNode
  } = useTreeEditorStore()

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

  const [showDraftPrompt, setShowDraftPrompt] = useState(false)
  const [saveError, setSaveError] = useState<string | 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)
  }, [])

  // 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
  )

  // Keyboard shortcuts for undo/redo/save
  useKeyboardShortcuts([
    {
      key: 'z',
      ctrl: true,
      handler: () => {
        if (pastStates.length > 0) undo()
      }
    },
    {
      key: 'z',
      ctrl: true,
      shift: true,
      handler: () => {
        if (futureStates.length > 0) redo()
      }
    },
    {
      key: 's',
      ctrl: true,
      handler: () => {
        handleSave()
      }
    }
  ])

  // 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)
        } catch (err) {
          console.error('Failed to load tree:', err)
          navigate('/trees')
        }
      } else {
        initNewTree()
        // Check for draft after initializing
        const draftExists = localStorage.getItem('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 handleSave = useCallback(async () => {
    setSaveError(null)

    // Validate first
    const errors = validate()
    const hasErrors = errors.some(e => e.severity === 'error')
    if (hasErrors) {
      setSaveError('Please fix validation errors before saving')
      return
    }

    setSaving(true)
    try {
      const treeData = getTreeForSave()
      if (isEditMode) {
        await treesApi.update(id!, treeData as TreeUpdate)
        markSaved()
      } else {
        const newTree = await treesApi.create(treeData as TreeCreate)
        // Mark saved BEFORE navigating to avoid triggering the blocker
        markSaved()
        // Navigate to edit mode with the new ID
        navigate(`/trees/${newTree.id}/edit`, { replace: true })
      }
    } catch (err) {
      console.error('Failed to save tree:', err)
      setSaveError('Failed to save tree. Please try again.')
    } finally {
      setSaving(false)
    }
  }, [isEditMode, id, validate, getTreeForSave, markSaved, navigate])

  // 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-primary border-t-transparent" />
      </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-muted-foreground" />
        <h2 className="mb-2 text-xl 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-primary px-4 py-2 text-sm font-medium text-primary-foreground',
            'hover:bg-primary/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-background/80 backdrop-blur-sm">
          <div className="w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-lg">
            <h2 className="mb-2 text-lg font-semibold">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-primary px-4 py-2 text-sm font-medium text-primary-foreground',
                  'hover:bg-primary/90'
                )}
              >
                Restore Draft
              </button>
              <button
                onClick={handleDiscardDraft}
                className={cn(
                  'flex-1 rounded-md border border-input bg-background px-4 py-2 text-sm font-medium',
                  'hover:bg-accent'
                )}
              >
                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-background/80 backdrop-blur-sm">
          <div className="w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-lg">
            <h2 className="mb-2 text-lg font-semibold">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-primary px-4 py-2 text-sm font-medium text-primary-foreground',
                  'hover:bg-primary/90'
                )}
              >
                Stay
              </button>
              <button
                onClick={handleBlockerProceed}
                className={cn(
                  'flex-1 rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-destructive',
                  '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-semibold">
            {isEditMode ? 'Edit Tree' : 'Create New Tree'}
            {name && <span className="ml-2 text-muted-foreground">- {name}</span>}
          </h1>
          {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 className="flex items-center gap-2">
          {/* Undo/Redo */}
          <div className="flex items-center rounded-md border border-border">
            <button
              type="button"
              onClick={() => undo()}
              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'
                  : 'text-muted-foreground/40 cursor-not-allowed'
              )}
            >
              <Undo2 className="h-4 w-4" />
            </button>
            <div className="h-6 w-px bg-border" />
            <button
              type="button"
              onClick={() => redo()}
              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'
                  : 'text-muted-foreground/40 cursor-not-allowed'
              )}
            >
              <Redo2 className="h-4 w-4" />
            </button>
          </div>

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

          {/* 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-border bg-background px-3 py-2 text-sm font-medium',
              'hover:bg-accent disabled:opacity-50'
            )}
          >
            <CheckCircle2 className="h-4 w-4" />
            Validate
          </button>

          {/* Save */}
          <button
            onClick={handleSave}
            disabled={isSaving || !isDirty || hasBlockingErrors}
            title={hasBlockingErrors ? 'Fix validation errors before saving' : undefined}
            className={cn(
              'flex items-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground',
              'hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed'
            )}
          >
            <Save className="h-4 w-4" />
            {isSaving ? 'Saving...' : 'Save'}
          </button>
        </div>
      </div>

      {/* Error Display */}
      {saveError && (
        <div className="bg-destructive/10 px-4 py-2 text-sm text-destructive">
          {saveError}
        </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