"use client"

import type React from "react"

import { useEffect, useRef, useState } from "react"
import Link from "next/link"

// Inline Propagator class (simplified from @folkjs/propagators)
type PropagatorFunction = (source: EventTarget, target: EventTarget, event: Event) => any

interface PropagatorOptions {
  source?: EventTarget | null
  target?: EventTarget | null
  event?: string | null
  handler?: PropagatorFunction | null
}

class Propagator {
  private source: EventTarget | null = null
  private target: EventTarget | null = null
  private eventName: string | null = null
  private handler: PropagatorFunction | null = null

  constructor(options: PropagatorOptions = {}) {
    const { source = null, target = null, event = null, handler = null } = options

    this.source = source
    this.target = target
    this.eventName = event
    this.handler = handler

    // Add listener if we have all necessary parts
    if (this.source && this.eventName) {
      this.source.addEventListener(this.eventName, this.handleEvent)
    }
  }

  private handleEvent = (event: Event) => {
    if (!this.source || !this.target || !this.handler) return

    try {
      this.handler(this.source, this.target, event)
    } catch (error) {
      console.error("Error in propagator handler:", error)
    }
  }

  propagate(event?: Event): void {
    if (!event && this.eventName) {
      event = new Event(this.eventName)
    }
    if (!event) return
    this.handleEvent(event)
  }

  dispose(): void {
    if (this.source && this.eventName) {
      this.source.removeEventListener(this.eventName, this.handleEvent)
    }
    this.source = null
    this.target = null
    this.handler = null
  }
}

type Tool = "select" | "draw" | "erase" | "rectangle" | "text" | "arrow"

// Helper function to calculate distance from point to line segment
function pointToLineDistance(px: number, py: number, x1: number, y1: number, x2: number, y2: number): number {
  const A = px - x1
  const B = py - y1
  const C = x2 - x1
  const D = y2 - y1

  const dot = A * C + B * D
  const lenSq = C * C + D * D
  let param = -1

  if (lenSq !== 0) {
    param = dot / lenSq
  }

  let xx, yy

  if (param < 0) {
    xx = x1
    yy = y1
  } else if (param > 1) {
    xx = x2
    yy = y2
  } else {
    xx = x1 + param * C
    yy = y1 + param * D
  }

  const dx = px - xx
  const dy = py - yy

  return Math.sqrt(dx * dx + dy * dy)
}

// Constants
const HIT_TOLERANCE = 10 // pixels - for line/arrow hit detection

interface Shape {
  id: string
  type: "rectangle" | "ellipse" | "line" | "text" | "arrow"
  x: number
  y: number
  width?: number
  height?: number
  x2?: number
  y2?: number
  text?: string
  color: string
  // For arrows that connect shapes
  sourceShapeId?: string
  targetShapeId?: string
  // Propagator expression for live arrows
  expression?: string
  // Data value for shapes (used in propagation)
  value?: number
}

export default function ItalismPage() {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const [tool, setTool] = useState<Tool>("select")
  const [shapes, setShapes] = useState<Shape[]>([
    {
      id: "1",
      type: "rectangle",
      x: 100,
      y: 100,
      width: 750,
      height: 50,
      color: "#6366f1",
      text: "Digital Liberation",
    },
    { id: "2", type: "rectangle", x: 360, y: 180, width: 480, height: 50, color: "#6366f1", text: "Post-Appitalism" },
    {
      id: "3",
      type: "rectangle",
      x: 50,
      y: 340,
      width: 1110,
      height: 50,
      color: "#10b981",
      text: "Collaborative Economy",
    },
    { id: "4", type: "ellipse", x: 270, y: 430, width: 1020, height: 40, color: "#10b981", text: "Decentralized" },
    { id: "5", type: "ellipse", x: 310, y: 530, width: 1110, height: 40, color: "#10b981", text: "Future" },
    { id: "6", type: "rectangle", x: 80, y: 605, width: 1110, height: 50, color: "#6366f1", text: "Community" },
    { id: "7", type: "rectangle", x: 290, y: 710, width: 630, height: 50, color: "#8b5cf6", text: "Innovation" },
  ])
  const [isDrawing, setIsDrawing] = useState(false)
  const [currentShape, setCurrentShape] = useState<Partial<Shape> | null>(null)
  const [selectedShape, setSelectedShape] = useState<string | null>(null)
  const [isFullscreen, setIsFullscreen] = useState(false)
  const [isDragging, setIsDragging] = useState(false)
  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 })
  const [arrowStartShape, setArrowStartShape] = useState<string | null>(null)
  const [propagators, setPropagators] = useState<Map<string, Propagator>>(new Map())
  const [editingArrow, setEditingArrow] = useState<string | null>(null)
  const [eventTargets, setEventTargets] = useState<Map<string, { source: EventTarget; target: EventTarget }>>(new Map())

  // Undo/Redo state - using useRef to avoid stale closure issues
  const historyRef = useRef<Shape[][]>([])
  const historyIndexRef = useRef(-1)
  const [, forceUpdate] = useState({})
  const isInitialized = useRef(false)

  // Initialize history with current shapes on mount
  useEffect(() => {
    if (!isInitialized.current) {
      historyRef.current = [JSON.parse(JSON.stringify(shapes))]
      historyIndexRef.current = 0
      isInitialized.current = true
    }
  }, [])

  // Save state to history (called after any shape modification)
  const saveToHistory = (newShapes: Shape[]) => {
    if (!isInitialized.current) return

    // Truncate history after current index (discard redo states)
    historyRef.current = historyRef.current.slice(0, historyIndexRef.current + 1)

    // Add new state (deep clone to prevent reference issues)
    historyRef.current.push(JSON.parse(JSON.stringify(newShapes)))

    // Limit to 50 states to prevent memory issues
    if (historyRef.current.length > 50) {
      historyRef.current.shift()
    } else {
      historyIndexRef.current++
    }

    setShapes(newShapes)
  }

  // Undo function - go back one state
  const undo = () => {
    if (historyIndexRef.current > 0) {
      historyIndexRef.current--
      const previousState = historyRef.current[historyIndexRef.current]
      setShapes(previousState)
      forceUpdate({}) // Force re-render to update button states
    }
  }

  // Redo function - go forward one state
  const redo = () => {
    if (historyIndexRef.current < historyRef.current.length - 1) {
      historyIndexRef.current++
      const nextState = historyRef.current[historyIndexRef.current]
      setShapes(nextState)
      forceUpdate({}) // Force re-render to update button states
    }
  }

  // Keyboard shortcuts
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      // Ctrl+Z or Cmd+Z for undo
      if ((e.ctrlKey || e.metaKey) && e.code === 'KeyZ' && !e.shiftKey) {
        e.preventDefault()
        undo()
      }
      // Ctrl+Shift+Z or Cmd+Shift+Z for redo
      else if ((e.ctrlKey || e.metaKey) && e.code === 'KeyZ' && e.shiftKey) {
        e.preventDefault()
        redo()
      }
      // Delete key to delete selected shape
      else if (e.key === 'Delete' && selectedShape) {
        e.preventDefault()
        const clicked = shapes.find(s => s.id === selectedShape)
        if (clicked) {
          // Cleanup propagator if deleting an arrow
          if (clicked.type === "arrow") {
            const propagator = propagators.get(clicked.id)
            if (propagator) {
              propagator.dispose()
              setPropagators((prev) => {
                const next = new Map(prev)
                next.delete(clicked.id)
                return next
              })
            }
            setEventTargets((prev) => {
              const next = new Map(prev)
              next.delete(clicked.id)
              return next
            })
          }
          const newShapes = shapes.filter((shape) => shape.id !== clicked.id)
          saveToHistory(newShapes)
          setSelectedShape(null)
        }
      }
      // Escape to deselect
      else if (e.key === 'Escape') {
        e.preventDefault()
        setSelectedShape(null)
      }
    }

    window.addEventListener('keydown', handleKeyDown)
    return () => window.removeEventListener('keydown', handleKeyDown)
  }, [selectedShape, shapes, propagators])

  // Helper function to get the center of a shape
  const getShapeCenter = (shape: Shape): { x: number; y: number } => {
    if (shape.width && shape.height) {
      return {
        x: shape.x + shape.width / 2,
        y: shape.y + shape.height / 2,
      }
    }
    return { x: shape.x, y: shape.y }
  }

  // Helper function to find shape at coordinates (excludes arrows/lines - used for arrow tool)
  const findShapeAt = (x: number, y: number): Shape | null => {
    return (
      shapes.find((shape) => {
        if (shape.type === "arrow" || shape.type === "line") return false
        if (shape.width && shape.height) {
          return x >= shape.x && x <= shape.x + shape.width && y >= shape.y && y <= shape.y + shape.height
        } else if (shape.type === "text" && shape.text) {
          const textWidth = shape.text.length * 12
          const textHeight = 20
          return x >= shape.x && x <= shape.x + textWidth && y >= shape.y - textHeight && y <= shape.y
        }
        return false
      }) || null
    )
  }

  // Helper function to check if a point is inside/near a shape (includes all shape types)
  const isPointInShape = (x: number, y: number, shape: Shape): boolean => {
    if (shape.width && shape.height) {
      return x >= shape.x && x <= shape.x + shape.width && y >= shape.y && y <= shape.y + shape.height
    } else if (shape.type === "text" && shape.text) {
      const textWidth = shape.text.length * 12
      const textHeight = 20
      return x >= shape.x && x <= shape.x + textWidth && y >= shape.y - textHeight && y <= shape.y
    } else if ((shape.type === "line" || shape.type === "arrow") && shape.x2 && shape.y2) {
      const distance = pointToLineDistance(x, y, shape.x, shape.y, shape.x2, shape.y2)
      return distance < HIT_TOLERANCE
    }
    return false
  }

  // Create a simple propagator for an arrow
  const createPropagatorForArrow = (arrow: Shape) => {
    if (!arrow.sourceShapeId || !arrow.targetShapeId) return

    const sourceShape = shapes.find((s) => s.id === arrow.sourceShapeId)
    const targetShape = shapes.find((s) => s.id === arrow.targetShapeId)

    if (!sourceShape || !targetShape) return

    // Create EventTargets for the connection
    const mockSource = new EventTarget()
    const mockTarget = new EventTarget()

    // Store shape IDs on EventTargets so handler can reference them
    ;(mockSource as any)._shapeId = arrow.sourceShapeId
    ;(mockTarget as any)._shapeId = arrow.targetShapeId

    const expression = arrow.expression || "value: from.value"

    try {
      const propagator = new Propagator({
        source: mockSource,
        target: mockTarget,
        event: "update",
        handler: (from: any, to: any) => {
          // Use setShapes with function to get CURRENT state (avoid stale closure)
          setShapes((currentShapes) => {
            const currentSourceShape = currentShapes.find((s) => s.id === (from as any)._shapeId)
            if (!currentSourceShape || currentSourceShape.value === undefined) {
              console.log("⚠️ No source value to propagate")
              return currentShapes // return unchanged
            }

            const sourceValue = currentSourceShape.value
            const targetId = (to as any)._shapeId

            console.log(`✅ Propagating from ${(from as any)._shapeId} to ${targetId}: ${sourceValue}`)

            // Update target shape with value
            return currentShapes.map((s) =>
              s.id === targetId ? { ...s, value: sourceValue } : s
            )
          })
        },
      })

      // Store both propagator and EventTargets in their respective Maps
      setPropagators((prev) => {
        const next = new Map(prev)
        next.set(arrow.id, propagator)
        return next
      })

      setEventTargets((prev) => {
        const next = new Map(prev)
        next.set(arrow.id, { source: mockSource, target: mockTarget })
        return next
      })
    } catch (error) {
      console.error("Failed to create propagator:", error)
    }
  }

  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

    const ctx = canvas.getContext("2d")
    if (!ctx) return

    // Set canvas size
    canvas.width = canvas.offsetWidth
    canvas.height = canvas.offsetHeight

    // Clear canvas
    ctx.fillStyle = "#0f172a"
    ctx.fillRect(0, 0, canvas.width, canvas.height)

    // Helper function to draw arrowhead
    const drawArrowhead = (x1: number, y1: number, x2: number, y2: number, color: string) => {
      const headLength = 15
      const angle = Math.atan2(y2 - y1, x2 - x1)

      ctx.fillStyle = color
      ctx.beginPath()
      ctx.moveTo(x2, y2)
      ctx.lineTo(
        x2 - headLength * Math.cos(angle - Math.PI / 6),
        y2 - headLength * Math.sin(angle - Math.PI / 6)
      )
      ctx.lineTo(
        x2 - headLength * Math.cos(angle + Math.PI / 6),
        y2 - headLength * Math.sin(angle + Math.PI / 6)
      )
      ctx.closePath()
      ctx.fill()
    }

    // Draw shapes
    shapes.forEach((shape) => {
      ctx.strokeStyle = shape.color
      ctx.lineWidth = 2
      ctx.fillStyle = shape.color
      ctx.font = "16px sans-serif"

      if (shape.type === "rectangle" && shape.width && shape.height) {
        ctx.strokeRect(shape.x, shape.y, shape.width, shape.height)
        if (shape.text) {
          ctx.fillText(shape.text, shape.x + 10, shape.y + shape.height / 2 + 5)
        }
      } else if (shape.type === "ellipse" && shape.width && shape.height) {
        ctx.beginPath()
        ctx.ellipse(
          shape.x + shape.width / 2,
          shape.y + shape.height / 2,
          shape.width / 2,
          shape.height / 2,
          0,
          0,
          2 * Math.PI,
        )
        ctx.stroke()
        if (shape.text) {
          ctx.fillText(shape.text, shape.x + shape.width / 2 - 50, shape.y + shape.height / 2 + 5)
        }
      } else if (shape.type === "line" && shape.x2 && shape.y2) {
        ctx.beginPath()
        ctx.moveTo(shape.x, shape.y)
        ctx.lineTo(shape.x2, shape.y2)
        ctx.stroke()
      } else if (shape.type === "arrow" && shape.x2 && shape.y2) {
        // Draw arrow line with highlight if selected
        const isSelected = selectedShape === shape.id
        ctx.strokeStyle = isSelected ? "#22d3ee" : shape.color
        ctx.lineWidth = isSelected ? 4 : 2
        ctx.beginPath()
        ctx.moveTo(shape.x, shape.y)
        ctx.lineTo(shape.x2, shape.y2)
        ctx.stroke()
        // Draw arrowhead
        drawArrowhead(shape.x, shape.y, shape.x2, shape.y2, isSelected ? "#22d3ee" : shape.color)
        // Reset line width
        ctx.lineWidth = 2
      } else if (shape.type === "text" && shape.text) {
        ctx.font = "20px sans-serif"
        ctx.fillStyle = shape.color
        ctx.fillText(shape.text, shape.x, shape.y)
      }

      // Highlight selected shape
      if (selectedShape === shape.id && shape.width && shape.height) {
        ctx.strokeStyle = "#22d3ee"
        ctx.lineWidth = 3
        ctx.strokeRect(shape.x - 5, shape.y - 5, shape.width + 10, shape.height + 10)
      }

      // Show connection point (center dot) for shapes that can be connected
      if (shape.type !== "arrow" && shape.type !== "line" && (shape.width || shape.height)) {
        const center = getShapeCenter(shape)
        ctx.fillStyle = "#22d3ee"
        ctx.beginPath()
        ctx.arc(center.x, center.y, 3, 0, 2 * Math.PI)
        ctx.fill()
      }

      // Show value label if shape has a value
      if (shape.value !== undefined && shape.type !== "arrow") {
        ctx.fillStyle = "#fbbf24"
        ctx.font = "bold 12px sans-serif"
        ctx.fillText(`${shape.value}`, shape.x + 5, shape.y - 5)
      }
    })

    // Draw current shape being drawn
    if (currentShape && isDrawing) {
      ctx.strokeStyle = currentShape.color || "#6366f1"
      ctx.lineWidth = 2
      ctx.fillStyle = currentShape.color || "#6366f1"
      ctx.setLineDash([5, 5]) // Dashed line for preview

      if (currentShape.type === "rectangle" && currentShape.width && currentShape.height) {
        ctx.strokeRect(currentShape.x || 0, currentShape.y || 0, currentShape.width, currentShape.height)
      } else if (currentShape.type === "line" && currentShape.x2 && currentShape.y2) {
        ctx.beginPath()
        ctx.moveTo(currentShape.x || 0, currentShape.y || 0)
        ctx.lineTo(currentShape.x2, currentShape.y2)
        ctx.stroke()
      } else if (currentShape.type === "arrow" && currentShape.x2 && currentShape.y2) {
        ctx.beginPath()
        ctx.moveTo(currentShape.x || 0, currentShape.y || 0)
        ctx.lineTo(currentShape.x2, currentShape.y2)
        ctx.stroke()
        drawArrowhead(currentShape.x || 0, currentShape.y || 0, currentShape.x2, currentShape.y2, currentShape.color || "#6366f1")
      }

      ctx.setLineDash([]) // Reset to solid line
    }
  }, [shapes, selectedShape, currentShape, isDrawing])

  const handleMouseDown = (e: React.MouseEvent<HTMLCanvasElement>) => {
    const canvas = canvasRef.current
    if (!canvas) return

    const rect = canvas.getBoundingClientRect()
    const x = e.clientX - rect.left
    const y = e.clientY - rect.top

    if (tool === "select") {
      // Find clicked shape (including arrows)
      const clicked = shapes.find((shape) => isPointInShape(x, y, shape))
      setSelectedShape(clicked?.id || null)

      // If a shape was clicked, prepare for dragging (but not for arrows - they're connections)
      if (clicked && clicked.type !== "arrow" && clicked.type !== "line") {
        setIsDragging(true)
        setDragOffset({
          x: x - clicked.x,
          y: y - clicked.y,
        })
      }
    } else if (tool === "erase") {
      // Find and delete clicked shape
      const clicked = shapes.find((shape) => isPointInShape(x, y, shape))

      if (clicked) {
        // Cleanup propagator if deleting an arrow
        if (clicked.type === "arrow") {
          const propagator = propagators.get(clicked.id)
          if (propagator) {
            propagator.dispose()
            setPropagators((prev) => {
              const next = new Map(prev)
              next.delete(clicked.id)
              return next
            })
          }
          setEventTargets((prev) => {
            const next = new Map(prev)
            next.delete(clicked.id)
            return next
          })
        }
        const newShapes = shapes.filter((shape) => shape.id !== clicked.id)
        saveToHistory(newShapes)
        setSelectedShape(null)
      }
    } else if (tool === "text") {
      // Prompt for text input
      const text = prompt("Enter text:")
      if (text) {
        const newShape: Shape = {
          id: Date.now().toString(),
          type: "text",
          x,
          y,
          text,
          color: "#6366f1",
        }
        saveToHistory([...shapes, newShape])
      }
    } else if (tool === "arrow") {
      // Special handling for arrow tool - snap to shapes
      const shapeAtClick = findShapeAt(x, y)

      if (shapeAtClick) {
        // Clicked on a shape - start arrow from its center
        setArrowStartShape(shapeAtClick.id)
        const center = getShapeCenter(shapeAtClick)
        setIsDrawing(true)
        setCurrentShape({
          id: Date.now().toString(),
          type: "arrow",
          x: center.x,
          y: center.y,
          color: "#6366f1",
          sourceShapeId: shapeAtClick.id,
        })
      }
    } else if (tool === "draw" || tool === "rectangle") {
      setIsDrawing(true)
      setCurrentShape({
        id: Date.now().toString(),
        type: tool === "rectangle" ? "rectangle" : "line",
        x,
        y,
        color: "#6366f1",
      })
    }
  }

  const handleMouseMove = (e: React.MouseEvent<HTMLCanvasElement>) => {
    const canvas = canvasRef.current
    if (!canvas) return

    const rect = canvas.getBoundingClientRect()
    const x = e.clientX - rect.left
    const y = e.clientY - rect.top

    // Handle dragging selected shape
    if (isDragging && selectedShape && tool === "select") {
      setShapes(
        shapes.map((shape) => {
          if (shape.id === selectedShape) {
            const newX = x - dragOffset.x
            const newY = y - dragOffset.y

            // For lines and arrows, also update the end points
            if ((shape.type === "line" || shape.type === "arrow") && shape.x2 !== undefined && shape.y2 !== undefined) {
              const dx = newX - shape.x
              const dy = newY - shape.y
              return {
                ...shape,
                x: newX,
                y: newY,
                x2: shape.x2 + dx,
                y2: shape.y2 + dy,
              }
            }

            return {
              ...shape,
              x: newX,
              y: newY,
            }
          }
          return shape
        })
      )
      return
    }

    // Handle drawing new shapes
    if (isDrawing && currentShape) {
      if (currentShape.type === "rectangle") {
        setCurrentShape({
          ...currentShape,
          width: x - (currentShape.x || 0),
          height: y - (currentShape.y || 0),
        })
      } else if (currentShape.type === "arrow") {
        // For arrows, snap to target shape center if hovering over one
        const shapeAtMouse = findShapeAt(x, y)
        if (shapeAtMouse && shapeAtMouse.id !== arrowStartShape) {
          const center = getShapeCenter(shapeAtMouse)
          setCurrentShape({
            ...currentShape,
            x2: center.x,
            y2: center.y,
            targetShapeId: shapeAtMouse.id,
          })
        } else {
          setCurrentShape({
            ...currentShape,
            x2: x,
            y2: y,
            targetShapeId: undefined,
          })
        }
      } else if (currentShape.type === "line") {
        setCurrentShape({
          ...currentShape,
          x2: x,
          y2: y,
        })
      }
    }
  }

  const handleMouseUp = () => {
    if (isDrawing && currentShape) {
      let newShape = currentShape as Shape

      // Normalize rectangles with negative dimensions (drawn upward/leftward)
      if (newShape.type === "rectangle" && newShape.width !== undefined && newShape.height !== undefined) {
        if (newShape.width < 0) {
          newShape.x = newShape.x + newShape.width
          newShape.width = Math.abs(newShape.width)
        }
        if (newShape.height < 0) {
          newShape.y = newShape.y + newShape.height
          newShape.height = Math.abs(newShape.height)
        }
      }

      // If it's an arrow with both source and target, create a propagator
      const newShapesArray = [...shapes, newShape]
      if (newShape.type === "arrow" && newShape.sourceShapeId && newShape.targetShapeId) {
        newShape.expression = "value: from.value"  // Default expression
        saveToHistory(newShapesArray)
        // Create propagator for this arrow
        setTimeout(() => createPropagatorForArrow(newShape), 0)
      } else {
        saveToHistory(newShapesArray)
      }

      setCurrentShape(null)
    } else if (isDragging) {
      // Save to history when dragging stops
      saveToHistory(shapes)
    }
    setIsDrawing(false)
    setIsDragging(false)
    setArrowStartShape(null)
  }

  const toggleFullscreen = () => {
    if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen()
      setIsFullscreen(true)
    } else {
      document.exitFullscreen()
      setIsFullscreen(false)
    }
  }

  return (
    <div className="min-h-screen bg-slate-900 text-white">
      {/* Header */}
      <header className="flex items-center justify-between p-4 border-b border-slate-700">
        <h1 className="text-xl font-semibold text-cyan-400">Interactive Canvas</h1>
        <Link href="/" className="text-cyan-400 hover:text-cyan-300 transition-colors">
          ← Back to Home
        </Link>
      </header>

      {/* Main Content */}
      <div className="flex h-[calc(100vh-73px)]">
        {/* Canvas */}
        <div className="flex-1 relative">
          <canvas
            ref={canvasRef}
            className="w-full h-full cursor-crosshair"
            onMouseDown={handleMouseDown}
            onMouseMove={handleMouseMove}
            onMouseUp={handleMouseUp}
            onMouseLeave={handleMouseUp}
          />
          {currentShape && (
            <div className="absolute top-4 left-4 bg-slate-800 px-4 py-2 rounded-lg text-sm">
              Drawing {currentShape.type}...
            </div>
          )}
        </div>

        {/* Sidebar */}
        <div className="w-80 bg-slate-800 p-6 space-y-6 overflow-y-auto">
          <div>
            <h2 className="text-lg font-semibold text-cyan-400 mb-4">FolkJS Canvas</h2>
            <ul className="space-y-2 text-sm text-slate-300">
              <li>
                • Use toolbar to <span className="text-white font-medium">draw</span> and create shapes
              </li>
              <li>
                • Click and drag to <span className="text-white font-medium">move</span> elements
              </li>
              <li>
                • Double-click text to <span className="text-white font-medium">edit</span>
              </li>
              <li>
                • Use <span className="text-white font-medium">select</span> tool to interact
              </li>
              <li>
                • Press <kbd className="px-2 py-1 bg-slate-700 rounded text-xs">Space</kbd> for{" "}
                <span className="text-white font-medium">fullscreen</span>
              </li>
            </ul>
          </div>

          {/* Toolbar */}
          <div className="space-y-3">
            <h3 className="text-sm font-semibold text-slate-400">Tools</h3>
            <div className="grid grid-cols-3 gap-2">
              {[
                { id: "select", label: "Select" },
                { id: "draw", label: "Draw" },
                { id: "erase", label: "Erase" },
                { id: "rectangle", label: "Rectangle" },
                { id: "text", label: "Text" },
                { id: "arrow", label: "Arrow" },
              ].map((t) => (
                <button
                  key={t.id}
                  onClick={() => setTool(t.id as Tool)}
                  className={`px-3 py-2 rounded text-sm transition-colors ${
                    tool === t.id ? "bg-cyan-500 text-white" : "bg-slate-700 text-slate-300 hover:bg-slate-600"
                  }`}
                >
                  {t.label}
                </button>
              ))}
            </div>
          </div>

          {/* Arrow Expression Editor */}
          {selectedShape && shapes.find((s) => s.id === selectedShape)?.type === "arrow" && (
            <div className="space-y-2 p-4 bg-slate-700 rounded">
              <h3 className="text-sm font-semibold text-cyan-400">Live Arrow Properties</h3>
              {(() => {
                const arrow = shapes.find((s) => s.id === selectedShape)
                if (!arrow) return null

                const sourceShape = arrow.sourceShapeId
                  ? shapes.find((s) => s.id === arrow.sourceShapeId)
                  : null
                const targetShape = arrow.targetShapeId
                  ? shapes.find((s) => s.id === arrow.targetShapeId)
                  : null

                return (
                  <div className="space-y-2 text-xs">
                    <div className="text-slate-300">
                      <span className="text-white font-medium">From:</span>{" "}
                      {sourceShape?.text || sourceShape?.id || "None"}
                    </div>
                    <div className="text-slate-300">
                      <span className="text-white font-medium">To:</span>{" "}
                      {targetShape?.text || targetShape?.id || "None"}
                    </div>
                    {arrow.sourceShapeId && arrow.targetShapeId && (
                      <>
                        <div className="text-slate-300">
                          <label className="text-white font-medium block mb-1">Expression:</label>
                          <input
                            type="text"
                            value={arrow.expression || "value: from.value"}
                            onChange={(e) => {
                              setShapes(
                                shapes.map((s) =>
                                  s.id === arrow.id ? { ...s, expression: e.target.value } : s,
                                ),
                              )
                            }}
                            onBlur={() => {
                              // Save to history when user finishes editing
                              saveToHistory(shapes)
                            }}
                            className="w-full px-2 py-1 bg-slate-800 text-white rounded text-xs"
                            placeholder="value: from.value * 2"
                          />
                        </div>
                        <button
                          onClick={() => {
                            // Get EventTargets from the Map
                            const targets = eventTargets.get(arrow.id)
                            const sourceShape = shapes.find((s) => s.id === arrow.sourceShapeId)

                            if (!targets) {
                              console.warn("⚠️ No EventTarget found. Arrow may need to be re-created.")
                              alert("This arrow needs to be re-drawn. Please delete and create it again.")
                              return
                            }

                            if (!sourceShape || sourceShape.value === undefined) {
                              console.warn("⚠️ Source shape has no value set")
                              alert(`Please set a value on "${sourceShape?.text || "the source shape"}" first.`)
                              return
                            }

                            // Trigger the propagation
                            targets.source.dispatchEvent(new Event("update"))
                          }}
                          className="w-full px-2 py-1 bg-cyan-600 hover:bg-cyan-700 rounded text-xs transition-colors"
                        >
                          Test Propagation
                        </button>
                      </>
                    )}
                  </div>
                )
              })()}
            </div>
          )}

          {/* Shape Value Editor */}
          {selectedShape && shapes.find((s) => s.id === selectedShape)?.type !== "arrow" && (
            <div className="space-y-2 p-4 bg-slate-700 rounded">
              <h3 className="text-sm font-semibold text-cyan-400">Shape Properties</h3>
              {(() => {
                const shape = shapes.find((s) => s.id === selectedShape)
                if (!shape) return null

                return (
                  <div className="space-y-2 text-xs">
                    <div className="text-slate-300">
                      <label className="text-white font-medium block mb-1">Value:</label>
                      <input
                        type="number"
                        value={shape.value || 0}
                        onChange={(e) => {
                          setShapes(
                            shapes.map((s) =>
                              s.id === shape.id ? { ...s, value: parseFloat(e.target.value) || 0 } : s,
                            ),
                          )
                        }}
                        onBlur={() => {
                          // Save to history when user finishes editing
                          saveToHistory(shapes)
                        }}
                        className="w-full px-2 py-1 bg-slate-800 text-white rounded text-xs"
                      />
                    </div>
                    <div className="text-slate-300 text-xs">
                      Arrows connected from this shape will propagate this value.
                    </div>
                  </div>
                )
              })()}
            </div>
          )}

          {/* Actions */}
          <div className="space-y-2">
            <div className="flex gap-2">
              <button
                onClick={undo}
                disabled={historyIndexRef.current <= 0}
                className="flex-1 px-4 py-2 bg-slate-700 hover:bg-slate-600 disabled:bg-slate-800 disabled:text-slate-600 disabled:cursor-not-allowed rounded text-sm transition-colors"
                title="Undo (Ctrl+Z)"
              >
                ↶ Undo
              </button>
              <button
                onClick={redo}
                disabled={historyIndexRef.current >= historyRef.current.length - 1}
                className="flex-1 px-4 py-2 bg-slate-700 hover:bg-slate-600 disabled:bg-slate-800 disabled:text-slate-600 disabled:cursor-not-allowed rounded text-sm transition-colors"
                title="Redo (Ctrl+Shift+Z)"
              >
                ↷ Redo
              </button>
            </div>
            <button
              onClick={toggleFullscreen}
              className="w-full px-4 py-2 bg-slate-700 hover:bg-slate-600 rounded text-sm transition-colors"
            >
              {isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen"}
            </button>
            <button
              onClick={() => saveToHistory([])}
              className="w-full px-4 py-2 bg-red-600 hover:bg-red-700 rounded text-sm transition-colors"
            >
              Clear Canvas
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}