8c:I[903690,["/chat-static/_next/static/chunks/3ah_b7sgoipvc.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/109qigkn2go2u.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/2zuy3mi6swzd2.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/12xjkahhh-flb.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/277-2pgminvk3.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/2zxr7__v9jbmq.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/2az9qvalzkc-h.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/0dg1s4h1zugkb.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/1fjm7jhtcd3_d.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/0uemni69gye0e.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/1e4rtmd7_bk3e.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/2dcwmvur1eqog.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/1w5qhnrur50pp.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/2womqu661fmr2.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/0rf4-4t-z-dk8.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/0_y1nz2l1pdax.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/1zzmzwg32p90g.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/25hap-z1u4fz2.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/0h7t4vk9gyu0g.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/404ox74idm0zu.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/230og-18jxvx8.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/3-jr784t9xit_.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/2a9fqtcgu0gcq.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/1m_h06jid1ekf.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/34kx6djl8qij7.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/3hwyfh3v3lizg.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/3y2nzgu33897a.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/3xglz55o5ygjf.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/3vtvee1raa1hh.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/2jzufglp27as5.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/1rkolbl8ut46o.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/1pah66qsxfoxs.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/1bwztsx5002fv.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/36o5ic4mld6jz.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/3z2ph51dwih45.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/0wgjauoj2w5sk.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/42de-szroxqmg.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/3rzhunjcfpndn.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/27g_hcux1dt9w.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/1nxdmf-lf66m7.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU"],"ExplicitChatIdProvider"] 8d:I[838238,["/chat-static/_next/static/chunks/3ah_b7sgoipvc.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/109qigkn2go2u.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/2zuy3mi6swzd2.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/12xjkahhh-flb.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/277-2pgminvk3.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/2zxr7__v9jbmq.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/2az9qvalzkc-h.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/0dg1s4h1zugkb.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/1fjm7jhtcd3_d.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/0uemni69gye0e.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/1e4rtmd7_bk3e.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/2dcwmvur1eqog.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/1w5qhnrur50pp.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/2womqu661fmr2.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/0rf4-4t-z-dk8.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/0_y1nz2l1pdax.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/1zzmzwg32p90g.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/25hap-z1u4fz2.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/0h7t4vk9gyu0g.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/404ox74idm0zu.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/230og-18jxvx8.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/3-jr784t9xit_.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/2a9fqtcgu0gcq.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/1m_h06jid1ekf.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/34kx6djl8qij7.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/3hwyfh3v3lizg.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/3y2nzgu33897a.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/3xglz55o5ygjf.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/3vtvee1raa1hh.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/2jzufglp27as5.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/1rkolbl8ut46o.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/1pah66qsxfoxs.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/1bwztsx5002fv.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/36o5ic4mld6jz.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/3z2ph51dwih45.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/0wgjauoj2w5sk.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/42de-szroxqmg.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/3rzhunjcfpndn.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/27g_hcux1dt9w.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU","/chat-static/_next/static/chunks/1nxdmf-lf66m7.js?dpl=dpl_9aPPJWdCvUHboHFNuiHm91gfd5uU"],"SWRDataProvider"] 8e:T34cec,[V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" export interface TextareaProps extends React.TextareaHTMLAttributes {} const Textarea = React.forwardRef(({ className, ...props }, ref) => { return (

)
})
Textarea.displayName = "Textarea"

export { Textarea }
[V0_FILE]typescriptreact:file="components/ui/slider.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as SliderPrimitive from "@radix-ui/react-slider"

import { cn } from "@/lib/utils"

const Slider = React.forwardRef<
  React.ElementRef<typeof SliderPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
>(({ className, ...props }, ref) => (
  <SliderPrimitive.Root
    ref={ref}
    className={cn("relative flex w-full touch-none select-none items-center", className)}
    {...props}
  >
    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
      <SliderPrimitive.Range className="absolute h-full bg-primary" />
    </SliderPrimitive.Track>
    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
  </SliderPrimitive.Root>
))
Slider.displayName = SliderPrimitive.Root.displayName

export { Slider }
[V0_FILE]typescriptreact:file="app/whiteboard/[class]/[subject]/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/whiteboard/[class]/[subject]/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect, useRef, useCallback } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Slider } from "@/components/ui/slider"
import {
  ArrowLeft,
  Pen,
  Eraser,
  Highlighter,
  Undo,
  Redo,
  Trash2,
  Save,
  Calendar,
  Maximize2,
  Minimize2,
  Palette,
  Settings,
} from "lucide-react"
import Link from "next/link"
import { useParams, useSearchParams } from "next/navigation"

interface DrawingAction {
  type: "draw" | "erase"
  points: { x: number; y: number }[]
  color: string
  thickness: number
  tool: "pen" | "highlighter" | "eraser"
}

export default function ModernWhiteboardPage() {
  const params = useParams()
  const searchParams = useSearchParams()
  const className = (params.class as string)?.replace("-", " ")
  const subject = params.subject as string
  const initialDate = searchParams.get("date") || new Date().toISOString().split("T")[0]

const [currentTool, setCurrentTool] = useState<"pen" | "highlighter" | "eraser">("pen")
  const [penColor, setPenColor] = useState("#2563eb")
  const [highlighterColor, setHighlighterColor] = useState("#fbbf24")
  const [thickness, setThickness] = useState([3])
  const [actions, setActions] = useState<DrawingAction[]>([])
  const [redoStack, setRedoStack] = useState<DrawingAction[]>([])
  const [lastSaved, setLastSaved] = useState<Date | null>(null)
  const [isDrawing, setIsDrawing] = useState(false)
  const [currentAction, setCurrentAction] = useState<DrawingAction | null>(null)
  const [canvasHeight, setCanvasHeight] = useState(800)
  const [isToolsPanelOpen, setIsToolsPanelOpen] = useState(true)
  const [isFullscreen, setIsFullscreen] = useState(false)

const canvasRef = useRef<HTMLCanvasElement>(null)
  const containerRef = useRef<HTMLDivElement>(null)
  const scrollContainerRef = useRef<HTMLDivElement>(null)

const penColors = ["#2563eb", "#dc2626", "#16a34a", "#7c3aed", "#ea580c", "#0891b2", "#000000", "#6b7280"]
  const highlighterColors = ["#fbbf24", "#fb7185", "#34d399", "#a78bfa", "#60a5fa", "#fde047", "#f97316", "#ec4899"]

// Storage key for this specific class-subject-date combination
  const storageKey = `whiteboard-${className}-${subject}-${initialDate}`

// Load saved drawing
  useEffect(() => {
    const savedActions = localStorage.getItem(storageKey)
    if (savedActions) {
      const parsedActions = JSON.parse(savedActions)
      setActions(parsedActions)
    }
  }, [storageKey])

// Auto-save functionality
  useEffect(() => {
    if (actions.length === 0) return

const saveTimer = setTimeout(() => {
      localStorage.setItem(storageKey, JSON.stringify(actions))
      setLastSaved(new Date())
    }, 1000)

return () => clearTimeout(saveTimer)
  }, [actions, storageKey])

// Handle scroll to expand canvas
  useEffect(() => {
    const handleScroll = () => {
      const container = scrollContainerRef.current
      if (!container) return

const scrollTop = container.scrollTop
      const scrollHeight = container.scrollHeight
      const clientHeight = container.clientHeight

// Expand canvas as user scrolls down
      const scrollPercentage = scrollTop / (scrollHeight - clientHeight)
      const minHeight = 800
      const maxHeight = 3000
      const newHeight = Math.max(minHeight, minHeight + (maxHeight - minHeight) * scrollPercentage * 2)

setCanvasHeight(Math.min(newHeight, maxHeight))
    }

const container = scrollContainerRef.current
    if (container) {
      container.addEventListener("scroll", handleScroll)
      return () => container.removeEventListener("scroll", handleScroll)
    }
  }, [])

// Redraw canvas
  const redrawCanvas = useCallback(() => {
    const canvas = canvasRef.current
    if (!canvas) return

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

ctx.clearRect(0, 0, canvas.width, canvas.height)

actions.forEach((action) => {
      if (action.points.length < 2) return

ctx.beginPath()
      ctx.moveTo(action.points[0].x, action.points[0].y)

for (let i = 1; i < action.points.length; i++) {
        ctx.lineTo(action.points[i].x, action.points[i].y)
      }

if (action.tool === "eraser") {
        ctx.globalCompositeOperation = "destination-out"
        ctx.lineWidth = action.thickness
      } else {
        ctx.globalCompositeOperation = "source-over"
        ctx.strokeStyle = action.color
        ctx.lineWidth = action.thickness

if (action.tool === "highlighter") {
          ctx.globalAlpha = 0.4
        } else {
          ctx.globalAlpha = 1
        }
      }

ctx.lineCap = "round"
      ctx.lineJoin = "round"
      ctx.stroke()
    })

ctx.globalAlpha = 1
    ctx.globalCompositeOperation = "source-over"
  }, [actions])

// Update canvas height and redraw
  useEffect(() => {
    const canvas = canvasRef.current
    if (canvas) {
      canvas.height = canvasHeight
      setTimeout(() => redrawCanvas(), 50)
    }
  }, [canvasHeight, redrawCanvas])

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

const rect = canvas.getBoundingClientRect()
    const scaleX = canvas.width / rect.width
    const scaleY = canvas.height / rect.height

const getEventPos = (e: MouseEvent | TouchEvent) => {
      const clientX = "touches" in e ? e.touches[0].clientX : e.clientX
      const clientY = "touches" in e ? e.touches[0].clientY : e.clientY
      return {
        x: (clientX - rect.left) * scaleX,
        y: (clientY - rect.top) * scaleY,
      }
    }

const startDrawing = (e: MouseEvent | TouchEvent) => {
      e.preventDefault()
      setIsDrawing(true)
      const pos = getEventPos(e)

const newAction: DrawingAction = {
        type: currentTool === "eraser" ? "erase" : "draw",
        points: [pos],
        color: currentTool === "highlighter" ? highlighterColor : penColor,
        thickness: thickness[0],
        tool: currentTool,
      }

setCurrentAction(newAction)
      setRedoStack([]) // Clear redo stack when starting new action
    }

const draw = (e: MouseEvent | TouchEvent) => {
      if (!isDrawing || !currentAction) return

e.preventDefault()
      const pos = getEventPos(e)

const updatedAction = {
        ...currentAction,
        points: [...currentAction.points, pos],
      }

setCurrentAction(updatedAction)

// Draw current stroke
      const ctx = canvas.getContext("2d")
      if (!ctx) return

const points = updatedAction.points
      if (points.length < 2) return

const lastPoint = points[points.length - 2]
      const currentPoint = points[points.length - 1]

ctx.beginPath()
      ctx.moveTo(lastPoint.x, lastPoint.y)
      ctx.lineTo(currentPoint.x, currentPoint.y)

if (currentTool === "eraser") {
        ctx.globalCompositeOperation = "destination-out"
        ctx.lineWidth = thickness[0]
      } else {
        ctx.globalCompositeOperation = "source-over"
        ctx.strokeStyle = currentTool === "highlighter" ? highlighterColor : penColor
        ctx.lineWidth = thickness[0]

if (currentTool === "highlighter") {
          ctx.globalAlpha = 0.4
        } else {
          ctx.globalAlpha = 1
        }
      }

ctx.lineCap = "round"
      ctx.lineJoin = "round"
      ctx.stroke()

ctx.globalAlpha = 1
      ctx.globalCompositeOperation = "source-over"
    }

const stopDrawing = () => {
      if (isDrawing && currentAction) {
        setActions((prev) => [...prev, currentAction])
        setCurrentAction(null)
      }
      setIsDrawing(false)
    }

canvas.addEventListener("mousedown", startDrawing)
    canvas.addEventListener("mousemove", draw)
    canvas.addEventListener("mouseup", stopDrawing)
    canvas.addEventListener("touchstart", startDrawing, { passive: false })
    canvas.addEventListener("touchmove", draw, { passive: false })
    canvas.addEventListener("touchend", stopDrawing)

return () => {
      canvas.removeEventListener("mousedown", startDrawing)
      canvas.removeEventListener("mousemove", draw)
      canvas.removeEventListener("mouseup", stopDrawing)
      canvas.removeEventListener("touchstart", startDrawing)
      canvas.removeEventListener("touchmove", draw)
      canvas.removeEventListener("touchend", stopDrawing)
    }
  }, [isDrawing, currentAction, currentTool, penColor, highlighterColor, thickness])

const undo = () => {
    if (actions.length > 0) {
      const lastAction = actions[actions.length - 1]
      setRedoStack((prev) => [...prev, lastAction])
      const newActions = actions.slice(0, -1)
      setActions(newActions)
    }
  }

const redo = () => {
    if (redoStack.length > 0) {
      const actionToRedo = redoStack[redoStack.length - 1]
      setRedoStack((prev) => prev.slice(0, -1))
      const newActions = [...actions, actionToRedo]
      setActions(newActions)
    }
  }

const clearCanvas = () => {
    setActions([])
    setRedoStack([])
    const canvas = canvasRef.current
    if (canvas) {
      const ctx = canvas.getContext("2d")
      ctx?.clearRect(0, 0, canvas.width, canvas.height)
    }
  }

const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    const today = new Date()

if (dateString === today.toISOString().split("T")[0]) {
      return "Today"
    } else {
      return date.toLocaleDateString("en-US", {
        weekday: "long",
        month: "long",
        day: "numeric",
        year: "numeric",
      })
    }
  }

const getSubjectInfo = (subjectName: string) => {
    const subjects = {
      physics: { icon: "⚛️", color: "from-blue-500 to-cyan-500", bgColor: "bg-blue-50" },
      chemistry: { icon: "🧪", color: "from-green-500 to-emerald-500", bgColor: "bg-green-50" },
      zoology: { icon: "🦋", color: "from-purple-500 to-violet-500", bgColor: "bg-purple-50" },
      botany: { icon: "🌱", color: "from-orange-500 to-amber-500", bgColor: "bg-orange-50" },
    }
    return (
      subjects[subjectName as keyof typeof subjects] || {
        icon: "📚",
        color: "from-gray-500 to-gray-600",
        bgColor: "bg-gray-50",
      }
    )
  }

const subjectInfo = getSubjectInfo(subject)

return (
    <div
      className={`min-h-screen transition-all duration-300 ${isFullscreen ? "bg-white" : "bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100"}`}
    >
      {/* Header */}
      {!isFullscreen && (
        <div className="sticky top-0 z-50 bg-white/95 backdrop-blur-sm border-b border-gray-200 shadow-sm">
          <div className="max-w-7xl mx-auto px-6 py-4">
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-4">
                <Link href="/">
                  <Button variant="outline" className="bg-transparent border-gray-300 hover:bg-gray-50">
                    <ArrowLeft className="w-4 h-4 mr-2" />
                    Back
                  </Button>
                </Link>

<div className="flex items-center space-x-3">
                  <div className="text-2xl">{subjectInfo.icon}</div>
                  <div>
                    <h1 className="text-xl font-bold text-gray-800">{className?.toUpperCase()}</h1>
                    <h2
                      className={`text-lg font-semibold bg-gradient-to-r ${subjectInfo.color} bg-clip-text text-transparent`}
                    >
                      {subject?.charAt(0).toUpperCase() + subject?.slice(1)}
                    </h2>
                  </div>
                </div>

<div className="flex items-center space-x-2 text-sm text-gray-600 bg-gray-100 px-3 py-1 rounded-full">
                  <Calendar className="w-4 h-4" />
                  <span>{formatDate(initialDate)}</span>
                </div>
              </div>

<div className="flex items-center space-x-3">
                {lastSaved && (
                  <div className="flex items-center space-x-2 text-sm text-green-600 bg-green-50 px-3 py-1 rounded-full">
                    <Save className="w-4 h-4" />
                    <span>Saved {lastSaved.toLocaleTimeString()}</span>
                  </div>
                )}

<Button
                  variant="outline"
                  onClick={() => setIsToolsPanelOpen(!isToolsPanelOpen)}
                  className="bg-transparent"
                >
                  <Settings className="w-4 h-4 mr-2" />
                  Tools
                </Button>

<Button variant="outline" onClick={() => setIsFullscreen(!isFullscreen)} className="bg-transparent">
                  {isFullscreen ? <Minimize2 className="w-4 h-4" /> : <Maximize2 className="w-4 h-4" />}
                </Button>
              </div>
            </div>
          </div>
        </div>
      )}

<div className="flex h-screen">
        {/* Floating Tools Panel */}
        {isToolsPanelOpen && (
          <div className={`${isFullscreen ? "fixed left-4 top-4 z-50" : "relative"} transition-all duration-300`}>
            <Card className="w-80 bg-white/95 backdrop-blur-sm shadow-2xl border-0 overflow-hidden">
              <CardContent className="p-6 space-y-6">
                {/* Tool Selection */}
                <div>
                  <h4 className="font-semibold mb-4 text-gray-800 flex items-center">
                    <Palette className="w-4 h-4 mr-2" />
                    Drawing Tools
                  </h4>
                  <div className="grid grid-cols-3 gap-3">
                    <Button
                      variant={currentTool === "pen" ? "default" : "outline"}
                      onClick={() => setCurrentTool("pen")}
                      className="flex flex-col items-center p-4 h-auto transition-all hover:scale-105"
                    >
                      <Pen className="w-6 h-6 mb-2" />
                      <span className="text-xs font-medium">Pen</span>
                    </Button>
                    <Button
                      variant={currentTool === "highlighter" ? "default" : "outline"}
                      onClick={() => setCurrentTool("highlighter")}
                      className="flex flex-col items-center p-4 h-auto transition-all hover:scale-105"
                    >
                      <Highlighter className="w-6 h-6 mb-2" />
                      <span className="text-xs font-medium">Highlight</span>
                    </Button>
                    <Button
                      variant={currentTool === "eraser" ? "default" : "outline"}
                      onClick={() => setCurrentTool("eraser")}
                      className="flex flex-col items-center p-4 h-auto transition-all hover:scale-105"
                    >
                      <Eraser className="w-6 h-6 mb-2" />
                      <span className="text-xs font-medium">Eraser</span>
                    </Button>
                  </div>
                </div>

{/* Color Selection */}
                {currentTool !== "eraser" && (
                  <div>
                    <h4 className="font-semibold mb-4 text-gray-800">
                      {currentTool === "pen" ? "Pen Colors" : "Highlighter Colors"}
                    </h4>
                    <div className="grid grid-cols-4 gap-3">
                      {(currentTool === "pen" ? penColors : highlighterColors).map((color) => (
                        <button
                          key={color}
                          onClick={() => (currentTool === "pen" ? setPenColor(color) : setHighlighterColor(color))}
                          className={`w-12 h-12 rounded-xl border-3 transition-all hover:scale-110 ${
                            (currentTool === "pen" ? penColor : highlighterColor) === color
                              ? "border-gray-800 scale-110 shadow-lg ring-2 ring-gray-300"
                              : "border-gray-200 hover:border-gray-400"
                          }`}
                          style={{ backgroundColor: color }}
                        />
                      ))}
                    </div>
                  </div>
                )}

{/* Thickness Control */}
                <div>
                  <h4 className="font-semibold mb-4 text-gray-800">Thickness: {thickness[0]}px</h4>
                  <div className="space-y-3">
                    <Slider
                      value={thickness}
                      onValueChange={setThickness}
                      max={currentTool === "eraser" ? 50 : 20}
                      min={1}
                      step={1}
                      className="w-full"
                    />
                    <div className="flex justify-between text-xs text-gray-500">
                      <span>1px</span>
                      <span>{currentTool === "eraser" ? "50px" : "20px"}</span>
                    </div>
                  </div>
                </div>

{/* Action Buttons */}
                <div className="space-y-3">
                  <div className="grid grid-cols-2 gap-3">
                    <Button
                      variant="outline"
                      onClick={undo}
                      disabled={actions.length === 0}
                      className="flex items-center justify-center transition-all hover:scale-105 bg-transparent"
                    >
                      <Undo className="w-4 h-4 mr-2" />
                      Undo
                    </Button>
                    <Button
                      variant="outline"
                      onClick={redo}
                      disabled={redoStack.length === 0}
                      className="flex items-center justify-center transition-all hover:scale-105 bg-transparent"
                    >
                      <Redo className="w-4 h-4 mr-2" />
                      Redo
                    </Button>
                  </div>
                  <Button variant="destructive" onClick={clearCanvas} className="w-full transition-all hover:scale-105">
                    <Trash2 className="w-4 h-4 mr-2" />
                    Clear Canvas
                  </Button>
                </div>

{/* Canvas Info */}
                <div className="text-center p-4 bg-gray-50 rounded-lg">
                  <p className="text-sm text-gray-600 mb-2">Canvas Height: {Math.round(canvasHeight)}px</p>
                  <p className="text-xs text-gray-500">Scroll down to expand the canvas</p>
                </div>
              </CardContent>
            </Card>
          </div>
        )}

{/* Canvas Area */}
        <div
          className="flex-1 overflow-y-auto"
          ref={scrollContainerRef}
          style={{ height: isFullscreen ? "100vh" : "calc(100vh - 80px)" }}
        >
          <div className={`${isFullscreen ? "p-4" : "p-8"} transition-all duration-300`}>
            <Card className="bg-white shadow-2xl border-0 overflow-hidden">
              <CardContent className="p-0">
                <div className="relative">
                  {/* Canvas */}
                  <canvas
                    ref={canvasRef}
                    width={1400}
                    height={canvasHeight}
                    className="w-full cursor-crosshair bg-white transition-all duration-300"
                    style={{
                      touchAction: "none",
                      minHeight: "800px",
                      maxHeight: "3000px",
                    }}
                  />

{/* Canvas Overlay Info */}
                  {actions.length === 0 && (
                    <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
                      <div className="text-center p-8 bg-white/90 rounded-2xl shadow-lg">
                        <div className="text-4xl mb-4">{subjectInfo.icon}</div>
                        <h3 className="text-2xl font-bold text-gray-800 mb-2">Start Drawing!</h3>
                        <p className="text-gray-600 mb-4">Use the tools on the left to begin taking notes</p>
                        <div className="flex items-center justify-center space-x-4 text-sm text-gray-500">
                          <span className="flex items-center">
                            <Pen className="w-4 h-4 mr-1" />
                            Draw
                          </span>
                          <span className="flex items-center">
                            <Highlighter className="w-4 h-4 mr-1" />
                            Highlight
                          </span>
                          <span className="flex items-center">
                            <Eraser className="w-4 h-4 mr-1" />
                            Erase
                          </span>
                        </div>
                      </div>
                    </div>
                  )}

{/* Scroll Indicator */}
                  {canvasHeight < 3000 && (
                    <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 pointer-events-none">
                      <div className="bg-blue-600 text-white px-4 py-2 rounded-full text-sm font-medium shadow-lg animate-bounce">
                        Scroll down for more space ↓
                      </div>
                    </div>
                  )}
                </div>
              </CardContent>
            </Card>

{/* Expansion Info */}
            <div className="mt-6 text-center">
              <Card className="inline-block bg-white/80 backdrop-blur-sm border-0 shadow-lg">
                <CardContent className="p-4">
                  <p className="text-sm text-gray-600">
                    Canvas expands as you scroll • Current height: {Math.round(canvasHeight)}px
                  </p>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </div>

{/* Fullscreen Exit Button */}
      {isFullscreen && (
        <Button
          variant="outline"
          onClick={() => setIsFullscreen(false)}
          className="fixed top-4 right-4 z-50 bg-white/90 backdrop-blur-sm"
        >
          <Minimize2 className="w-4 h-4 mr-2" />
          Exit Fullscreen
        </Button>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/supabase-client.ts" isMerged="true"
import { createClient } from "@supabase/supabase-js"

// Singleton pattern for client-side Supabase client
let supabaseClient: ReturnType<typeof createClient> | null = null

export function getSupabaseClient() {
  if (!supabaseClient) {
    supabaseClient = createClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, {
      auth: {
        persistSession: false,
      },
      realtime: {
        params: {
          eventsPerSecond: 10,
        },
      },
    })
  }

return supabaseClient
}
[V0_FILE]typescriptreact:file="components/ui/dialog.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { X } from "lucide-react"

import { cn } from "@/lib/utils"

const Dialog = DialogPrimitive.Root

const DialogTrigger = DialogPrimitive.Trigger

const DialogPortal = DialogPrimitive.Portal

const DialogClose = DialogPrimitive.Close

const DialogOverlay = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Overlay
    ref={ref}
    className={cn(
      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className,
    )}
    {...props}
  />
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName

const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DialogPortal>
    <DialogOverlay />
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
        className,
      )}
      {...props}
    >
      {children}
      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </DialogPrimitive.Close>
    </DialogPrimitive.Content>
  </DialogPortal>
))
DialogContent.displayName = DialogPrimitive.Content.displayName

const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
)
DialogHeader.displayName = "DialogHeader"

const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
)
DialogFooter.displayName = "DialogFooter"

const DialogTitle = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Title
    ref={ref}
    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
    {...props}
  />
))
DialogTitle.displayName = DialogPrimitive.Title.displayName

const DialogDescription = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
))
DialogDescription.displayName = DialogPrimitive.Description.displayName

export {
  Dialog,
  DialogPortal,
  DialogOverlay,
  DialogClose,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
}
[V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true"
import * as React from "react"

import { cn } from "@/lib/utils"

export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}

const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
  return (
    <input
      type={type}
      className={cn(
        "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      ref={ref}
      {...props}
    />
  )
})
Input.displayName = "Input"

export { Input }
[V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true"
import type * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const badgeVariants = cva(
  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
        outline: "text-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
)

export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {
  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
}

export { Badge, badgeVariants }
[V0_FILE]typescriptreact:file="scripts/create-tables.sql" isEdit="true" isQuickEdit="true" isMerged="true"
-- Create the whiteboard_data table with proper indexing and constraints
CREATE TABLE IF NOT EXISTS whiteboard_data (
    id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
    class_name VARCHAR(10) NOT NULL,
    subject VARCHAR(20) NOT NULL,
    date DATE NOT NULL,
    drawing_data JSONB NOT NULL DEFAULT '[]'::jsonb,
    stroke_count INTEGER DEFAULT 0,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    
    -- Ensure unique combination of class, subject, and date
    CONSTRAINT unique_class_subject_date UNIQUE (class_name, subject, date)
);

-- Create indexes for better query performance
CREATE INDEX IF NOT EXISTS idx_whiteboard_class_subject_date 
ON whiteboard_data (class_name, subject, date);

CREATE INDEX IF NOT EXISTS idx_whiteboard_date 
ON whiteboard_data (date);

CREATE INDEX IF NOT EXISTS idx_whiteboard_updated_at 
ON whiteboard_data (updated_at);

-- Create function to automatically update the updated_at timestamp
CREATE OR REPLACE FUNCTION update_updated_at_column()
RETURNS TRIGGER AS $$
BEGIN
    NEW.updated_at = NOW();
    RETURN NEW;
END;
$$ language 'plpgsql';

-- Create trigger to automatically update updated_at
DROP TRIGGER IF EXISTS update_whiteboard_data_updated_at ON whiteboard_data;
CREATE TRIGGER update_whiteboard_data_updated_at
    BEFORE UPDATE ON whiteboard_data
    FOR EACH ROW
    EXECUTE FUNCTION update_updated_at_column();

-- Create function to get or create whiteboard entry
CREATE OR REPLACE FUNCTION get_or_create_whiteboard(
    p_class_name VARCHAR(10),
    p_subject VARCHAR(20),
    p_date DATE
)
RETURNS TABLE (
    id UUID,
    class_name VARCHAR(10),
    subject VARCHAR(20),
    date DATE,
    drawing_data JSONB,
    stroke_count INTEGER,
    created_at TIMESTAMP WITH TIME ZONE,
    updated_at TIMESTAMP WITH TIME ZONE
) AS $$
BEGIN
    -- Try to get existing record
    RETURN QUERY
    SELECT w.id, w.class_name, w.subject, w.date, w.drawing_data, w.stroke_count, w.created_at, w.updated_at
    FROM whiteboard_data w
    WHERE w.class_name = p_class_name 
    AND w.subject = p_subject 
    AND w.date = p_date;
    
    -- If no record found, create one
    IF NOT FOUND THEN
        INSERT INTO whiteboard_data (class_name, subject, date, drawing_data, stroke_count)
        VALUES (p_class_name, p_subject, p_date, '[]'::jsonb, 0);
        
        RETURN QUERY
        SELECT w.id, w.class_name, w.subject, w.date, w.drawing_data, w.stroke_count, w.created_at, w.updated_at
        FROM whiteboard_data w
        WHERE w.class_name = p_class_name 
        AND w.subject = p_subject 
        AND w.date = p_date;
    END IF;
END;
$$ LANGUAGE plpgsql;

-- Create function to update whiteboard data
CREATE OR REPLACE FUNCTION update_whiteboard_data(
    p_class_name VARCHAR(10),
    p_subject VARCHAR(20),
    p_date DATE,
    p_drawing_data JSONB
)
RETURNS BOOLEAN AS $$
DECLARE
    stroke_count_val INTEGER;
BEGIN
    -- Calculate stroke count from drawing data
    SELECT jsonb_array_length(p_drawing_data) INTO stroke_count_val;
    
    -- Update or insert the record
    INSERT INTO whiteboard_data (class_name, subject, date, drawing_data, stroke_count)
    VALUES (p_class_name, p_subject, p_date, p_drawing_data, stroke_count_val)
    ON CONFLICT (class_name, subject, date)
    DO UPDATE SET 
        drawing_data = EXCLUDED.drawing_data,
        stroke_count = EXCLUDED.stroke_count,
        updated_at = NOW();
    
    RETURN TRUE;
EXCEPTION
    WHEN OTHERS THEN
        RETURN FALSE;
END;
$$ LANGUAGE plpgsql;

-- Create function to get whiteboard statistics
CREATE OR REPLACE FUNCTION get_whiteboard_stats(
    p_class_name VARCHAR(10),
    p_subject VARCHAR(20) DEFAULT NULL
)
RETURNS TABLE (
    total_entries BIGINT,
    total_strokes BIGINT,
    last_updated TIMESTAMP WITH TIME ZONE,
    subjects_count BIGINT
) AS $$
BEGIN
    IF p_subject IS NOT NULL THEN
        RETURN QUERY
        SELECT 
            COUNT(*) as total_entries,
            COALESCE(SUM(stroke_count), 0) as total_strokes,
            MAX(updated_at) as last_updated,
            1::BIGINT as subjects_count
        FROM whiteboard_data
        WHERE class_name = p_class_name AND subject = p_subject;
    ELSE
        RETURN QUERY
        SELECT 
            COUNT(*) as total_entries,
            COALESCE(SUM(stroke_count), 0) as total_strokes,
            MAX(updated_at) as last_updated,
            COUNT(DISTINCT subject) as subjects_count
        FROM whiteboard_data
        WHERE class_name = p_class_name;
    END IF;
END;
$$ LANGUAGE plpgsql;

-- Create the whiteboard_tags table (simplified version without foreign key constraints)
CREATE TABLE IF NOT EXISTS whiteboard_tags (
    id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
    class_name VARCHAR(10) NOT NULL,
    subject VARCHAR(20) NOT NULL,
    date DATE NOT NULL,
    tag VARCHAR(100) NOT NULL,
    color VARCHAR(7) DEFAULT '#3b82f6',
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    
    -- Ensure unique combination of class, subject, date, and tag
    CONSTRAINT unique_class_subject_date_tag UNIQUE (class_name, subject, date, tag)
);

-- Create indexes for better query performance
CREATE INDEX IF NOT EXISTS idx_whiteboard_tags_class_subject 
ON whiteboard_tags (class_name, subject);

CREATE INDEX IF NOT EXISTS idx_whiteboard_tags_tag 
ON whiteboard_tags (tag);

CREATE INDEX IF NOT EXISTS idx_whiteboard_tags_date 
ON whiteboard_tags (date);

-- Create function to add a tag
CREATE OR REPLACE FUNCTION add_whiteboard_tag(
    p_class_name VARCHAR(10),
    p_subject VARCHAR(20),
    p_date DATE,
    p_tag VARCHAR(100),
    p_color VARCHAR(7) DEFAULT '#3b82f6'
)
RETURNS BOOLEAN AS $$
BEGIN
    -- First ensure the whiteboard entry exists
    INSERT INTO whiteboard_data (class_name, subject, date, drawing_data, stroke_count)
    VALUES (p_class_name, p_subject, p_date, '[]'::jsonb, 0)
    ON CONFLICT (class_name, subject, date) DO NOTHING;
    
    -- Add the tag
    INSERT INTO whiteboard_tags (class_name, subject, date, tag, color)
    VALUES (p_class_name, p_subject, p_date, p_tag, p_color)
    ON CONFLICT (class_name, subject, date, tag) DO NOTHING;
    
    RETURN TRUE;
EXCEPTION
    WHEN OTHERS THEN
        RETURN FALSE;
END;
$$ LANGUAGE plpgsql;

-- Create function to remove a tag
CREATE OR REPLACE FUNCTION remove_whiteboard_tag(
    p_class_name VARCHAR(10),
    p_subject VARCHAR(20),
    p_date DATE,
    p_tag VARCHAR(100)
)
RETURNS BOOLEAN AS $$
BEGIN
    DELETE FROM whiteboard_tags
    WHERE class_name = p_class_name 
    AND subject = p_subject 
    AND date = p_date 
    AND tag = p_tag;
    
    RETURN TRUE;
EXCEPTION
    WHEN OTHERS THEN
        RETURN FALSE;
END;
$$ LANGUAGE plpgsql;

-- Create function to get tags for a specific whiteboard
CREATE OR REPLACE FUNCTION get_whiteboard_tags(
    p_class_name VARCHAR(10),
    p_subject VARCHAR(20),
    p_date DATE
)
RETURNS TABLE (
    tag VARCHAR(100),
    color VARCHAR(7),
    created_at TIMESTAMP WITH TIME ZONE
) AS $$
BEGIN
    RETURN QUERY
    SELECT t.tag, t.color, t.created_at
    FROM whiteboard_tags t
    WHERE t.class_name = p_class_name 
    AND t.subject = p_subject 
    AND t.date = p_date
    ORDER BY t.created_at;
END;
$$ LANGUAGE plpgsql;

-- Create function to get all unique tags for a class and subject
CREATE OR REPLACE FUNCTION get_all_tags_for_subject(
    p_class_name VARCHAR(10),
    p_subject VARCHAR(20)
)
RETURNS TABLE (
    tag VARCHAR(100),
    color VARCHAR(7),
    usage_count BIGINT,
    latest_date DATE
) AS $$
BEGIN
    RETURN QUERY
    SELECT 
        t.tag, 
        t.color,
        COUNT(*) as usage_count,
        MAX(t.date) as latest_date
    FROM whiteboard_tags t
    WHERE t.class_name = p_class_name 
    AND t.subject = p_subject
    GROUP BY t.tag, t.color
    ORDER BY usage_count DESC, latest_date DESC;
END;
$$ LANGUAGE plpgsql;

-- Create function to get whiteboards by tag
CREATE OR REPLACE FUNCTION get_whiteboards_by_tag(
    p_class_name VARCHAR(10),
    p_subject VARCHAR(20),
    p_tag VARCHAR(100)
)
RETURNS TABLE (
    date DATE,
    stroke_count INTEGER,
    updated_at TIMESTAMP WITH TIME ZONE
) AS $$
BEGIN
    RETURN QUERY
    SELECT w.date, w.stroke_count, w.updated_at
    FROM whiteboard_data w
    INNER JOIN whiteboard_tags t ON 
        w.class_name = t.class_name AND 
        w.subject = t.subject AND 
        w.date = t.date
    WHERE w.class_name = p_class_name 
    AND w.subject = p_subject 
    AND t.tag = p_tag
    ORDER BY w.date DESC;
END;
$$ LANGUAGE plpgsql;
[V0_FILE]sql:file="scripts/create-tags-table-v2.sql" isMerged="true"
-- Simplified whiteboard_tags table creation script
-- Run this if the previous script didn't work

DROP TABLE IF EXISTS whiteboard_tags CASCADE;

CREATE TABLE whiteboard_tags (
    id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
    class_name VARCHAR(10) NOT NULL,
    subject VARCHAR(20) NOT NULL,
    date DATE NOT NULL,
    tag VARCHAR(100) NOT NULL,
    color VARCHAR(7) DEFAULT '#3b82f6',
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    
    -- Ensure unique combination of class, subject, date, and tag
    UNIQUE (class_name, subject, date, tag)
);

-- Create indexes for better query performance
CREATE INDEX idx_whiteboard_tags_class_subject ON whiteboard_tags (class_name, subject);
CREATE INDEX idx_whiteboard_tags_tag ON whiteboard_tags (tag);
CREATE INDEX idx_whiteboard_tags_date ON whiteboard_tags (date);

-- Insert some sample data for testing
INSERT INTO whiteboard_tags (class_name, subject, date, tag, color) VALUES
('MR 01', 'physics', '2025-01-08', 'Chapter 1', '#3b82f6'),
('MR 01', 'physics', '2025-01-08', 'Mechanics', '#ef4444'),
('MR 01', 'chemistry', '2025-01-08', 'Organic Chemistry', '#10b981'),
('MR 01', 'zoology', '2025-01-08', 'Cell Biology', '#8b5cf6')
ON CONFLICT (class_name, subject, date, tag) DO NOTHING;
[V0_FILE]sql:file="scripts/fix-tags-table.sql" isMerged="true"
-- Ensure the whiteboard_tags table exists with correct structure
CREATE TABLE IF NOT EXISTS whiteboard_tags (
    id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
    class_name VARCHAR(10) NOT NULL,
    subject VARCHAR(20) NOT NULL,
    date DATE NOT NULL,
    tag VARCHAR(100) NOT NULL,
    color VARCHAR(7) DEFAULT '#3b82f6',
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
    
    -- Ensure unique combination of class, subject, date, and tag
    CONSTRAINT unique_class_subject_date_tag UNIQUE (class_name, subject, date, tag)
);

-- Create indexes for better query performance
CREATE INDEX IF NOT EXISTS idx_whiteboard_tags_class_subject ON whiteboard_tags (class_name, subject);
CREATE INDEX IF NOT EXISTS idx_whiteboard_tags_tag ON whiteboard_tags (tag);
CREATE INDEX IF NOT EXISTS idx_whiteboard_tags_date ON whiteboard_tags (date);

-- Test insert to verify table works
DO $$
BEGIN
    -- Try to insert a test record
    INSERT INTO whiteboard_tags (class_name, subject, date, tag, color) 
    VALUES ('TEST', 'test', CURRENT_DATE, 'test-tag', '#3b82f6')
    ON CONFLICT (class_name, subject, date, tag) DO NOTHING;
    
    -- Clean up test record
    DELETE FROM whiteboard_tags WHERE class_name = 'TEST' AND subject = 'test';
    
    RAISE NOTICE 'whiteboard_tags table is working correctly';
EXCEPTION
    WHEN OTHERS THEN
        RAISE NOTICE 'Error with whiteboard_tags table: %', SQLERRM;
END $$;
[V0_FILE]typescriptreact:file="components/debug-panel.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { WhiteboardDB } from "@/lib/supabase"

interface DebugPanelProps {
  className: string
  subject: string
  date: string
}

export function DebugPanel({ className, subject, date }: DebugPanelProps) {
  const [debugInfo, setDebugInfo] = useState<any>(null)
  const [isLoading, setIsLoading] = useState(false)

const runDebug = async () => {
    setIsLoading(true)
    try {
      const info = {
        params: { className, subject, date },
        whiteboardData: await WhiteboardDB.getWhiteboardData(className, subject, date),
        tags: await WhiteboardDB.getTags(className, subject, date),
        allTags: await WhiteboardDB.getAllTagsForSubject(className, subject),
        timestamp: new Date().toISOString(),
      }
      setDebugInfo(info)
    } catch (error) {
      setDebugInfo({ error: error.message })
    } finally {
      setIsLoading(false)
    }
  }

const testTagCreation = async () => {
    setIsLoading(true)
    try {
      const testTag = `test-${Date.now()}`
      const result = await WhiteboardDB.addTag(className, subject, date, testTag, "#ff0000")

const info = {
        testResult: result,
        testTag,
        updatedTags: await WhiteboardDB.getTags(className, subject, date),
      }
      setDebugInfo(info)
    } catch (error) {
      setDebugInfo({ error: error.message })
    } finally {
      setIsLoading(false)
    }
  }

if (process.env.NODE_ENV !== "development") {
    return null
  }

return (
    <Card className="fixed bottom-20 right-4 w-80 z-50 bg-yellow-50 border-yellow-200">
      <CardHeader className="pb-2">
        <CardTitle className="text-sm">Debug Panel</CardTitle>
      </CardHeader>
      <CardContent className="space-y-2">
        <div className="flex space-x-2">
          <Button size="sm" onClick={runDebug} disabled={isLoading}>
            Debug Info
          </Button>
          <Button size="sm" onClick={testTagCreation} disabled={isLoading}>
            Test Tag
          </Button>
        </div>

{debugInfo && (
          <div className="text-xs bg-white p-2 rounded border max-h-40 overflow-y-auto">
            <pre>{JSON.stringify(debugInfo, null, 2)}</pre>
          </div>
        )}
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/ui/tabs.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as TabsPrimitive from "@radix-ui/react-tabs"

import { cn } from "@/lib/utils"

const Tabs = TabsPrimitive.Root

const TabsList = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.List
    ref={ref}
    className={cn(
      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
      className,
    )}
    {...props}
  />
))
TabsList.displayName = TabsPrimitive.List.displayName

const TabsTrigger = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Trigger
    ref={ref}
    className={cn(
      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
      className,
    )}
    {...props}
  />
))
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName

const TabsContent = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Content
    ref={ref}
    className={cn(
      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
      className,
    )}
    {...props}
  />
))
TabsContent.displayName = TabsPrimitive.Content.displayName

export { Tabs, TabsList, TabsTrigger, TabsContent }
[V0_FILE]typescriptreact:file="components/ui/scroll-area.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"

import { cn } from "@/lib/utils"

const ScrollArea = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
>(({ className, children, ...props }, ref) => (
  <ScrollAreaPrimitive.Root ref={ref} className={cn("relative overflow-hidden", className)} {...props}>
    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport>
    <ScrollBar />
    <ScrollAreaPrimitive.Corner />
  </ScrollAreaPrimitive.Root>
))
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName

const ScrollBar = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
>(({ className, orientation = "vertical", ...props }, ref) => (
  <ScrollAreaPrimitive.ScrollAreaScrollbar
    ref={ref}
    orientation={orientation}
    className={cn(
      "flex touch-none select-none transition-colors",
      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
      className,
    )}
    {...props}
  >
    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
  </ScrollAreaPrimitive.ScrollAreaScrollbar>
))
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName

export { ScrollArea, ScrollBar }
[V0_FILE]typescriptreact:file="components/ui/separator.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as SeparatorPrimitive from "@radix-ui/react-separator"

import { cn } from "@/lib/utils"

const Separator = React.forwardRef<
  React.ElementRef<typeof SeparatorPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
  <SeparatorPrimitive.Root
    ref={ref}
    decorative={decorative}
    orientation={orientation}
    className={cn("shrink-0 bg-border", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className)}
    {...props}
  />
))
Separator.displayName = SeparatorPrimitive.Root.displayName

export { Separator }
[V0_FILE]typescriptreact:file="app/api/save-whiteboard/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { WhiteboardDB } from "@/lib/supabase"

export async function POST(request: NextRequest) {
  try {
    const { className, subject, selectedDate, actions } = await request.json()

if (!className || !subject || !selectedDate || !actions) {
      return NextResponse.json({ error: "Missing required fields" }, { status: 400 })
    }

const success = await WhiteboardDB.saveWhiteboardData(className, subject, selectedDate, actions)

if (success) {
      return NextResponse.json({ success: true })
    } else {
      return NextResponse.json({ error: "Failed to save" }, { status: 500 })
    }
  } catch (error) {
    console.error("Save API error:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]sql:file="scripts/create-tags-simple.sql" isMerged="true"
-- Simple whiteboard_tags table creation
-- Run this script to ensure the tags table exists

-- Drop and recreate the table to ensure clean state
DROP TABLE IF EXISTS whiteboard_tags;

-- Create the whiteboard_tags table
CREATE TABLE whiteboard_tags (
    id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
    class_name TEXT NOT NULL,
    subject TEXT NOT NULL,
    date DATE NOT NULL,
    tag TEXT NOT NULL,
    color TEXT DEFAULT '#3b82f6',
    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create unique constraint to prevent duplicate tags
CREATE UNIQUE INDEX idx_unique_whiteboard_tag 
ON whiteboard_tags (class_name, subject, date, tag);

-- Create indexes for better performance
CREATE INDEX idx_whiteboard_tags_lookup 
ON whiteboard_tags (class_name, subject, date);

CREATE INDEX idx_whiteboard_tags_subject 
ON whiteboard_tags (class_name, subject);

-- Test the table by inserting and removing a test record
INSERT INTO whiteboard_tags (class_name, subject, date, tag, color) 
VALUES ('TEST', 'test', CURRENT_DATE, 'test-tag', '#ff0000');

DELETE FROM whiteboard_tags 
WHERE class_name = 'TEST' AND subject = 'test';

-- Verify table is working
SELECT 'whiteboard_tags table created successfully' as status;
[V0_FILE]typescriptreact:file="components/drawing-debug.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

interface DrawingDebugProps {
  isDrawing: boolean
  currentTool: string
  currentAction: any
  actions: any[]
  canvasRef: React.RefObject<HTMLCanvasElement>
}

export function DrawingDebug({ isDrawing, currentTool, currentAction, actions, canvasRef }: DrawingDebugProps) {
  const [showDebug, setShowDebug] = useState(false)

if (process.env.NODE_ENV !== "development") {
    return null
  }

const testCanvas = () => {
    const canvas = canvasRef.current
    if (!canvas) {
      alert("Canvas not found!")
      return
    }

const ctx = canvas.getContext("2d")
    if (!ctx) {
      alert("Canvas context not found!")
      return
    }

// Clear and draw a test pattern
    ctx.clearRect(0, 0, canvas.width, canvas.height)

// Draw test lines
    ctx.beginPath()
    ctx.moveTo(100, 100)
    ctx.lineTo(300, 100)
    ctx.lineTo(300, 200)
    ctx.lineTo(100, 200)
    ctx.closePath()
    ctx.strokeStyle = "#ff0000"
    ctx.lineWidth = 5
    ctx.stroke()

// Draw test circle
    ctx.beginPath()
    ctx.arc(200, 150, 30, 0, 2 * Math.PI)
    ctx.fillStyle = "#00ff00"
    ctx.fill()

alert("Test pattern drawn! Canvas is working.")
  }

const checkCanvasEvents = () => {
    const canvas = canvasRef.current
    if (!canvas) {
      alert("Canvas not found!")
      return
    }

// Test event listener
    const testHandler = (e: MouseEvent) => {
      console.log("Mouse event detected:", e.type, e.clientX, e.clientY)
      alert(`Mouse ${e.type} detected at ${e.clientX}, ${e.clientY}`)
      canvas.removeEventListener("click", testHandler)
    }

canvas.addEventListener("click", testHandler)
    alert("Click on the canvas to test event handling...")
  }

return (
    <div className="fixed bottom-32 right-4 z-50">
      <Button onClick={() => setShowDebug(!showDebug)} variant="outline" size="sm" className="mb-2">
        {showDebug ? "Hide" : "Show"} Debug
      </Button>

{showDebug && (
        <Card className="w-80 bg-yellow-50 border-yellow-200">
          <CardHeader className="pb-2">
            <CardTitle className="text-sm">Drawing Debug</CardTitle>
          </CardHeader>
          <CardContent className="space-y-2 text-xs">
            <div>
              <strong>Drawing State:</strong> {isDrawing ? "✅ Drawing" : "❌ Not Drawing"}
            </div>
            <div>
              <strong>Current Tool:</strong> {currentTool}
            </div>
            <div>
              <strong>Current Action:</strong>{" "}
              {currentAction ? `✅ Active (${currentAction.points?.length || 0} points)` : "❌ None"}
            </div>
            <div>
              <strong>Total Actions:</strong> {actions.length}
            </div>
            <div>
              <strong>Canvas:</strong> {canvasRef.current ? "✅ Ready" : "❌ Not Ready"}
            </div>
            <div>
              <strong>Canvas Size:</strong>{" "}
              {canvasRef.current ? `${canvasRef.current.width}x${canvasRef.current.height}` : "N/A"}
            </div>

<div className="space-y-1">
              <Button onClick={testCanvas} size="sm" className="w-full">
                Test Canvas Drawing
              </Button>
              <Button onClick={checkCanvasEvents} size="sm" className="w-full">
                Test Canvas Events
              </Button>
            </div>

{actions.length > 0 && (
              <div className="mt-2 p-2 bg-white rounded text-xs">
                <strong>Last Action:</strong>
                <pre>{JSON.stringify(actions[actions.length - 1], null, 2).slice(0, 200)}...</pre>
              </div>
            )}
          </CardContent>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/simple-canvas-test.tsx" isMerged="true"
"use client"

import { useRef, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export function SimpleCanvasTest() {
  const canvasRef = useRef<HTMLCanvasElement>(null)

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

let isDrawing = false

const startDraw = (e: MouseEvent) => {
      isDrawing = true
      const rect = canvas.getBoundingClientRect()
      const x = e.clientX - rect.left
      const y = e.clientY - rect.top

const ctx = canvas.getContext("2d")
      if (ctx) {
        ctx.beginPath()
        ctx.moveTo(x, y)
      }
      console.log("Start drawing at:", x, y)
    }

const draw = (e: MouseEvent) => {
      if (!isDrawing) return

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

const ctx = canvas.getContext("2d")
      if (ctx) {
        ctx.lineTo(x, y)
        ctx.strokeStyle = "#ff0000"
        ctx.lineWidth = 3
        ctx.stroke()
      }
      console.log("Drawing to:", x, y)
    }

const stopDraw = () => {
      isDrawing = false
      console.log("Stop drawing")
    }

canvas.addEventListener("mousedown", startDraw)
    canvas.addEventListener("mousemove", draw)
    canvas.addEventListener("mouseup", stopDraw)
    canvas.addEventListener("mouseleave", stopDraw)

return () => {
      canvas.removeEventListener("mousedown", startDraw)
      canvas.removeEventListener("mousemove", draw)
      canvas.removeEventListener("mouseup", stopDraw)
      canvas.removeEventListener("mouseleave", stopDraw)
    }
  }, [])

if (process.env.NODE_ENV !== "development") {
    return null
  }

return (
    <div className="fixed top-4 left-4 z-50">
      <Card className="w-80 bg-green-50 border-green-200">
        <CardHeader className="pb-2">
          <CardTitle className="text-sm">Simple Canvas Test</CardTitle>
        </CardHeader>
        <CardContent>
          <canvas
            ref={canvasRef}
            width={300}
            height={200}
            className="border-2 border-red-500 bg-white cursor-crosshair w-full"
          />
          <p className="text-xs mt-2 text-green-700">
            This should work! If you can draw here, the main canvas should work too.
          </p>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescript:file="lib/supabase-server.ts" isEdit="true" isMerged="true"
import { createClient } from "@supabase/supabase-js"

let serverClient: ReturnType<typeof createClient> | null = null

export function getSupabaseServer() {
  if (!serverClient) {
    const url = process.env.SUPABASE_URL
    const serviceKey = process.env.SUPABASE_SERVICE_ROLE_KEY

if (!url || !serviceKey) {
      throw new Error("Missing SUPABASE_URL or SUPABASE_SERVICE_ROLE_KEY. Set them in your environment (server-only).")
    }

serverClient = createClient(url, serviceKey, {
      auth: { persistSession: false },
      global: { headers: { "x-client-info": "whiteboard-server" } },
    })
  }
  return serverClient
}
[V0_FILE]typescriptreact:file="components/drawing-test.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useRef } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export function DrawingTest() {
  const ref = useRef<HTMLCanvasElement>(null)

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

let isDrawing = false

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

const start = (e: MouseEvent) => {
      isDrawing = true
      const rect = canvas.getBoundingClientRect()
      const x = e.clientX - rect.left
      const y = e.clientY - rect.top
      ctx.beginPath()
      ctx.moveTo(x, y)
    }
    const move = (e: MouseEvent) => {
      if (!isDrawing) return
      const rect = canvas.getBoundingClientRect()
      const x = e.clientX - rect.left
      const y = e.clientY - rect.top
      ctx.lineTo(x, y)
      ctx.strokeStyle = "#2563eb"
      ctx.lineWidth = 3
      ctx.lineCap = "round"
      ctx.stroke()
    }
    const end = () => {
      isDrawing = false
    }

canvas.addEventListener("mousedown", start)
    canvas.addEventListener("mousemove", move)
    canvas.addEventListener("mouseup", end)
    canvas.addEventListener("mouseleave", end)
    return () => {
      canvas.removeEventListener("mousedown", start)
      canvas.removeEventListener("mousemove", move)
      canvas.removeEventListener("mouseup", end)
      canvas.removeEventListener("mouseleave", end)
    }
  }, [])

if (process.env.NODE_ENV !== "development") return null

return (
    <div className="fixed top-4 left-4 z-50">
      <Card className="w-80 bg-blue-50 border-blue-200">
        <CardHeader className="pb-2">
          <CardTitle className="text-sm">Drawing Test (dev only)</CardTitle>
        </CardHeader>
        <CardContent>
          <canvas ref={ref} width={300} height={180} className="bg-white border rounded w-full cursor-crosshair" />
          <p className="text-xs text-blue-700 mt-2">If this draws, your browser can draw on canvas.</p>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]sql:file="scripts/create-whiteboard-tables.sql" isMerged="true"
-- Create whiteboard_data table
create table if not exists public.whiteboard_data (
  id uuid primary key default gen_random_uuid(),
  class_name text not null,
  subject text not null,
  date date not null,
  drawing_data jsonb not null default '[]'::jsonb,
  stroke_count integer not null default 0,
  created_at timestamptz not null default now(),
  updated_at timestamptz not null default now()
);

-- Ensure uniqueness per class/subject/date for upsert
create unique index if not exists whiteboard_data_unique_idx
  on public.whiteboard_data (class_name, subject, date);

-- Trigger to keep updated_at current
create or replace function public.set_updated_at()
returns trigger language plpgsql as $$
begin
  new.updated_at = now();
  return new;
end;
$$;

drop trigger if exists trg_set_updated_at on public.whiteboard_data;
create trigger trg_set_updated_at
  before update on public.whiteboard_data
  for each row execute function public.set_updated_at();

-- Create whiteboard_tags table
create table if not exists public.whiteboard_tags (
  id uuid primary key default gen_random_uuid(),
  class_name text not null,
  subject text not null,
  date date not null,
  tag text not null,
  color text not null default '#3b82f6',
  created_at timestamptz not null default now()
);

-- Unique constraint so same tag is not duplicated on the same whiteboard
create unique index if not exists whiteboard_tags_unique_idx
  on public.whiteboard_tags (class_name, subject, date, tag);
[V0_FILE]typescriptreact:file="app/api/tags/[class]/[subject]/[date]/route.ts" isEdit="true" isMerged="true"
import { NextResponse, type NextRequest } from "next/server"
import { getSql, ensureSchema } from "@/lib/neon"

function normalizeClassSlugToName(raw: string) {
  try {
    return decodeURIComponent(raw).replace(/-/g, " ")
  } catch {
    return raw.replace(/-/g, " ")
  }
}

export async function GET(_req: NextRequest, { params }: { params: { class: string; subject: string; date: string } }) {
  try {
    await ensureSchema()
    const sql = getSql()

const className = normalizeClassSlugToName(params.class)
    const subject = params.subject
    const date = params.date

export async function POST(req: NextRequest, { params }: { params: { class: string; subject: string; date: string } }) {
  try {
    await ensureSchema()
    const sql = getSql()

const className = normalizeClassSlugToName(params.class)
    const subject = params.subject
    const date = params.date

let body: any = {}
    try {
      body = await req.json()
    } catch {
      body = {}
    }

const tag = typeof body?.tag === "string" ? body.tag.trim() : ""
    const color = typeof body?.color === "string" && body.color ? body.color : "#3b82f6"
    if (!tag) {
      return NextResponse.json({ error: "Tag is required" }, { status: 400 })
    }

// Ensure board exists (no-op if present)
    await sql`
      INSERT INTO public.whiteboard_data (class_name, subject, date, drawing_data, stroke_count)
      VALUES (${className}, ${subject}, ${date}::date, '[]'::jsonb, 0)
      ON CONFLICT (class_name, subject, date) DO NOTHING;
    `

const inserted = await sql`
      INSERT INTO public.whiteboard_tags (class_name, subject, date, tag, color)
      VALUES (${className}, ${subject}, ${date}::date, ${tag}, ${color})
      ON CONFLICT (class_name, subject, date, tag) DO NOTHING
      RETURNING tag, color, created_at::text;
    `
    return NextResponse.json({ success: true, duplicate: (inserted as any[]).length === 0, data: inserted[0] ?? null })
  } catch (err) {
    console.error("POST /api/tags error:", err)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

export async function DELETE(
  req: NextRequest,
  { params }: { params: { class: string; subject: string; date: string } },
) {
  try {
    await ensureSchema()
    const sql = getSql()

const className = normalizeClassSlugToName(params.class)
    const subject = params.subject
    const date = params.date

let body: any = {}
    try {
      body = await req.json()
    } catch {
      body = {}
    }
    const tag = typeof body?.tag === "string" ? body.tag.trim() : ""
    if (!tag) {
      return NextResponse.json({ error: "Tag is required" }, { status: 400 })
    }

await sql`
      DELETE FROM public.whiteboard_tags
      WHERE class_name = ${className} AND subject = ${subject} AND date = ${date}::date AND tag = ${tag};
    `
    return NextResponse.json({ success: true })
  } catch (err) {
    console.error("DELETE /api/tags error:", err)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="lib/neon.ts" isEdit="true" isMerged="true"
import { neon } from "@neondatabase/serverless"

let cached: ReturnType<typeof neon> | null = null

function pickConnectionString() {
  const candidates = [
    process.env.NEON_POSTGRES_URL_NON_POOLING,
    process.env.NEON_POSTGRES_URL,
    process.env.NEON_NEON_NEON_DATABASE_URL,
    process.env.POSTGRES_URL_NON_POOLING,
    process.env.POSTGRES_URL,
    process.env.POSTGRES_PRISMA_URL,
  ].filter(Boolean) as string[]

const url = candidates[0]
  if (!url) {
    throw new Error(
      "No Postgres connection string found. Set NEON_POSTGRES_URL_NON_POOLING or NEON_POSTGRES_URL (or POSTGRES_URL*).",
    )
  }
  return url
}

export function getSql() {
  if (cached) return cached
  const url = pickConnectionString()
  cached = neon(url)
  return cached
}

// Lightweight in-memory cache (per runtime)
type CacheEntry<T> = { data: T; expires: number }
const cache = new Map<string, CacheEntry<any>>()

export function getFromCache<T>(key: string): T | null {
  const hit = cache.get(key)
  if (!hit) return null
  if (Date.now() > hit.expires) {
    cache.delete(key)
    return null
  }
  return hit.data as T
}
export function setInCache<T>(key: string, data: T, ttlMs: number) {
  cache.set(key, { data, expires: Date.now() + ttlMs })
}

// Retry wrapper for transient HTTP errors (e.g., 429 Too Many Requests)
export async function withRetry<T>(fn: () => Promise<T>, label: string, maxRetries = 3): Promise<T> {
  let attempt = 0
  let lastErr: any
  while (attempt < maxRetries) {
    try {
      return await fn()
    } catch (err: any) {
      lastErr = err
      const msg = (err?.message || "").toLowerCase()
      const isRate = msg.includes("too many") || msg.includes("rate") || msg.includes("429")
      if (!isRate) break
      const backoff = 300 * Math.pow(2, attempt) + Math.floor(Math.random() * 200)
      console.warn(`[withRetry] ${label} attempt ${attempt + 1} failed: ${err?.message}. Backing off ${backoff}ms`)
      await new Promise((r) => setTimeout(r, backoff))
    }
    attempt++
  }
  throw lastErr
}

// Ensure DB schema exists where possible (safe no-ops if perms limited)
let initialized = false
export async function ensureSchema() {
  if (initialized) return
  const sql = getSql()

async function safe(stmt: TemplateStringsArray, ...params: any[]) {
    try {
      // @ts-ignore neon tagged template passthrough
      await sql(stmt, ...params)
    } catch (e) {
      console.warn("ensureSchema skipped:", (e as Error).message)
    }
  }

await safe`CREATE EXTENSION IF NOT EXISTS pgcrypto;`
  await safe`
    CREATE TABLE IF NOT EXISTS public.whiteboard_data (
      id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
      class_name varchar NOT NULL,
      subject varchar NOT NULL,
      date date NOT NULL,
      drawing_data jsonb NOT NULL DEFAULT '[]'::jsonb,
      stroke_count integer NOT NULL DEFAULT 0,
      created_at timestamptz NOT NULL DEFAULT now(),
      updated_at timestamptz NOT NULL DEFAULT now()
    );
  `
  await safe`
    CREATE UNIQUE INDEX IF NOT EXISTS whiteboard_data_unique_idx
    ON public.whiteboard_data (class_name, subject, date);
  `
  await safe`
    CREATE OR REPLACE FUNCTION public.set_updated_at()
    RETURNS trigger LANGUAGE plpgsql AS $$
    BEGIN
      NEW.updated_at = now();
      RETURN NEW;
    END;
    $$;
  `
  await safe`DROP TRIGGER IF EXISTS trg_set_updated_at ON public.whiteboard_data;`
  await safe`
    CREATE TRIGGER trg_set_updated_at
    BEFORE UPDATE ON public.whiteboard_data
    FOR EACH ROW EXECUTE FUNCTION public.set_updated_at();
  `

await safe`
    CREATE TABLE IF NOT EXISTS public.whiteboard_tags (
      id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
      class_name text NOT NULL,
      subject text NOT NULL,
      date date NOT NULL,
      tag text NOT NULL,
      color text NOT NULL DEFAULT '#3b82f6',
      created_at timestamptz NOT NULL DEFAULT now()
    );
  `
  await safe`
    CREATE UNIQUE INDEX IF NOT EXISTS whiteboard_tags_unique_idx
    ON public.whiteboard_tags (class_name, subject, date, tag);
  `
  await safe`
    CREATE INDEX IF NOT EXISTS idx_whiteboard_tags_lookup
    ON public.whiteboard_tags (class_name, subject, date);
  `
  await safe`
    CREATE INDEX IF NOT EXISTS idx_whiteboard_tags_subject
    ON public.whiteboard_tags (class_name, subject);
  `

initialized = true
}

// Shared types
export type DrawingPoint = { x: number; y: number }
export type DrawingAction = {
  type: "draw" | "erase"
  points: DrawingPoint[]
  color: string
  thickness: number
  tool: "pen" | "highlighter" | "eraser"
}
export type WhiteboardRow = {
  id: string
  class_name: string
  subject: string
  date: string
  drawing_data: DrawingAction[]
  stroke_count: number
  created_at: string
  updated_at: string
}
[V0_FILE]typescript:file="app/api/tags/[class]/[subject]/all/route.ts" isEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { getSql, ensureSchema, getFromCache, setInCache, withRetry } from "@/lib/neon"

function normalizeClassSlug(raw: string) {
  try {
    return decodeURIComponent(raw).replace(/-/g, " ")
  } catch {
    return raw.replace(/-/g, " ")
  }
}

export async function GET(_req: NextRequest, { params }: { params: { class: string; subject: string } }) {
  await ensureSchema()
  const sql = getSql()
  const className = normalizeClassSlug(params.class)
  const subject = params.subject

const cacheKey = `tags:agg:${className}:${subject}`
  const cached = getFromCache<any[]>(cacheKey)
  if (cached) return NextResponse.json(cached)

try {
    const rows = await withRetry(
      () =>
        sql<{ tag: string; color: string; usage_count: number; latest_date: string }[]>`
        SELECT
          tag,
          color,
          COUNT(*)::int AS usage_count,
          MAX(date)::text AS latest_date
        FROM public.whiteboard_tags
        WHERE class_name = ${className} AND subject = ${subject}
        GROUP BY tag, color
        ORDER BY usage_count DESC, latest_date DESC;
      `,
      "tags-aggregate",
    )

// cache 30s
    setInCache(cacheKey, rows, 30_000)
    return NextResponse.json(rows)
  } catch (err: any) {
    console.error("GET /api/tags/[class]/[subject]/all error:", err?.message || err)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/tags/[class]/all-subjects/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { getSql, ensureSchema, getFromCache, setInCache, withRetry } from "@/lib/neon"

function normalizeClassSlug(raw: string) {
  try {
    return decodeURIComponent(raw).replace(/-/g, " ")
  } catch {
    return raw.replace(/-/g, " ")
  }
}

export async function GET(_req: NextRequest, { params }: { params: { class: string } }) {
  await ensureSchema()
  const sql = getSql()
  const className = normalizeClassSlug(params.class)

const cacheKey = `tags:agg-all:${className}`
  const cached = getFromCache<Record<string, any[]>>(cacheKey)
  if (cached) return NextResponse.json(cached)

try {
    const rows = await withRetry(
      () =>
        sql<{ subject: string; tag: string; color: string; usage_count: number; latest_date: string }[]>`
        SELECT
          subject,
          tag,
          color,
          COUNT(*)::int AS usage_count,
          MAX(date)::text AS latest_date
        FROM public.whiteboard_tags
        WHERE class_name = ${className}
        GROUP BY subject, tag, color
        ORDER BY subject ASC, usage_count DESC, latest_date DESC;
      `,
      "tags-aggregate-all-subjects",
    )

// Transform into { subject: TagUsage[] }
    const map: Record<string, any[]> = {}
    for (const r of rows) {
      const key = r.subject
      if (!map[key]) map[key] = []
      map[key].push({ tag: r.tag, color: r.color, usage_count: r.usage_count, latest_date: r.latest_date })
    }

// cache 30s
    setInCache(cacheKey, map, 30_000)
    return NextResponse.json(map)
  } catch (err: any) {
    console.error("GET /api/tags/[class]/all-subjects error:", err?.message || err)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/tags/[class]/[subject]/bundle/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { getSql, ensureSchema, getFromCache, setInCache, withRetry } from "@/lib/neon"

function normalizeClassSlug(raw: string) {
  try {
    return decodeURIComponent(raw).replace(/-/g, " ")
  } catch {
    return raw.replace(/-/g, " ")
  }
}

export async function GET(req: NextRequest, { params }: { params: { class: string; subject: string } }) {
  await ensureSchema()
  const sql = getSql()
  const className = normalizeClassSlug(params.class)
  const subject = params.subject
  const date = req.nextUrl.searchParams.get("date")

if (!date) return NextResponse.json({ error: "date required" }, { status: 400 })

const cacheKey = `tags:bundle:${className}:${subject}:${date}`
  const cached = getFromCache<any>(cacheKey)
  if (cached) return NextResponse.json(cached)

try {
    // two queries in parallel, wrapped with retry
    const [current, aggregated] = await Promise.all([
      withRetry(
        () =>
          sql<{ tag: string; color: string; created_at: string }[]>`
          SELECT tag, color, created_at::text
          FROM public.whiteboard_tags
          WHERE class_name = ${className} AND subject = ${subject} AND date = ${date}::date
          ORDER BY created_at ASC;
        `,
        "tags-current",
      ),
      withRetry(
        () =>
          sql<{ tag: string; color: string; usage_count: number; latest_date: string }[]>`
          SELECT
            tag,
            color,
            COUNT(*)::int AS usage_count,
            MAX(date)::text AS latest_date
          FROM public.whiteboard_tags
          WHERE class_name = ${className} AND subject = ${subject}
          GROUP BY tag, color
          ORDER BY usage_count DESC, latest_date DESC;
        `,
        "tags-aggregate-subject",
      ),
    ])

const payload = { current, aggregated }
    // cache 20s (slightly shorter to reflect rapid changes when tagging)
    setInCache(cacheKey, payload, 20_000)
    return NextResponse.json(payload)
  } catch (err: any) {
    console.error("GET /api/tags/bundle error:", err?.message || err)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="lib/supabase.ts" isEdit="true" isMerged="true"
import { createClient } from "@supabase/supabase-js"

// Keep a client available if needed in the future (not used for CRUD now)
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
  auth: { persistSession: false },
  realtime: { params: { eventsPerSecond: 10 } },
})

// Shared types
export interface DrawingAction {
  type: "draw" | "erase"
  points: { x: number; y: number }[]
  color: string
  thickness: number
  tool: "pen" | "highlighter" | "eraser"
}
export interface WhiteboardData {
  id: string
  class_name: string
  subject: string
  date: string
  drawing_data: DrawingAction[]
  stroke_count: number
  created_at: string
  updated_at: string
}
export interface WhiteboardTag {
  tag: string
  color: string
  created_at: string
}
export interface TagUsage {
  tag: string
  color: string
  usage_count: number
  latest_date: string
}
export type TagsBySubject = Record<string, TagUsage[]>

// Helper to safely encode path segments
const enc = (s: string) => encodeURIComponent(s)

// API helpers
export class WhiteboardDB {
  static async getWhiteboardData(className: string, subject: string, date: string): Promise<WhiteboardData | null> {
    try {
      const classSlug = className.replace(/ /g, "-")
      const res = await fetch(`/api/whiteboard/${enc(classSlug)}/${enc(subject)}/${enc(date)}`, {
        method: "GET",
        headers: { "Content-Type": "application/json" },
      })
      if (!res.ok) {
        console.error("getWhiteboardData API failed:", res.status, await res.text())
        return null
      }
      return (await res.json()) as WhiteboardData
    } catch (err) {
      console.error("Error in getWhiteboardData:", err)
      return null
    }
  }

static async saveWhiteboardData(
    className: string,
    subject: string,
    date: string,
    drawingData: DrawingAction[],
  ): Promise<boolean> {
    try {
      const classSlug = className.replace(/ /g, "-")
      const res = await fetch(`/api/whiteboard/${enc(classSlug)}/${enc(subject)}/${enc(date)}`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ actions: drawingData }),
      })
      if (!res.ok) {
        console.error("saveWhiteboardData API failed:", res.status, await res.text())
        return false
      }
      return true
    } catch (err) {
      console.error("Error in saveWhiteboardData:", err)
      return false
    }
  }

// Tags - current day
  static async getTags(className: string, subject: string, date: string): Promise<WhiteboardTag[]> {
    try {
      const classSlug = className.replace(/ /g, "-")
      const res = await fetch(`/api/tags/${enc(classSlug)}/${enc(subject)}/${enc(date)}`, {
        method: "GET",
        headers: { "Content-Type": "application/json" },
      })
      if (!res.ok) {
        console.error("getTags API failed:", res.status, await res.text())
        return []
      }
      return ((await res.json()) as WhiteboardTag[]) ?? []
    } catch (err) {
      console.error("Error in getTags:", err)
      return []
    }
  }

static async addTag(
    className: string,
    subject: string,
    date: string,
    tag: string,
    color = "#3b82f6",
  ): Promise<boolean> {
    try {
      const classSlug = className.replace(/ /g, "-")
      const res = await fetch(`/api/tags/${enc(classSlug)}/${enc(subject)}/${enc(date)}`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ tag, color }),
      })
      if (!res.ok) {
        console.error("addTag API failed:", res.status, await res.text())
        return false
      }
      return true
    } catch (err) {
      console.error("Error in addTag:", err)
      return false
    }
  }

static async removeTag(className: string, subject: string, date: string, tag: string): Promise<boolean> {
    try {
      const classSlug = className.replace(/ /g, "-")
      const res = await fetch(`/api/tags/${enc(classSlug)}/${enc(subject)}/${enc(date)}`, {
        method: "DELETE",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ tag }),
      })
      if (!res.ok) {
        console.error("removeTag API failed:", res.status, await res.text())
        return false
      }
      return true
    } catch (err) {
      console.error("Error in removeTag:", err)
      return false
    }
  }

// Aggregated tags for a subject
  static async getAllTagsForSubject(className: string, subject: string): Promise<TagUsage[]> {
    try {
      const classSlug = className.replace(/ /g, "-")
      const res = await fetch(`/api/tags/${enc(classSlug)}/${enc(subject)}/all`, {
        method: "GET",
        headers: { "Content-Type": "application/json" },
      })
      if (!res.ok) {
        console.error("getAllTagsForSubject API failed:", res.status, await res.text())
        return []
      }
      return ((await res.json()) as TagUsage[]) ?? []
    } catch (err) {
      console.error("Error in getAllTagsForSubject:", err)
      return []
    }
  }

// New: aggregated tags for the whole class (all subjects) in one request
  static async getAllTagsForClass(className: string): Promise<TagsBySubject> {
    try {
      const classSlug = className.replace(/ /g, "-")
      const res = await fetch(`/api/tags/${enc(classSlug)}/all-subjects`, {
        method: "GET",
        headers: { "Content-Type": "application/json" },
      })
      if (!res.ok) {
        console.error("getAllTagsForClass API failed:", res.status, await res.text())
        return {}
      }
      return ((await res.json()) as TagsBySubject) ?? {}
    } catch (err) {
      console.error("Error in getAllTagsForClass:", err)
      return {}
    }
  }

// New: Bundle for a specific page — current date tags + aggregated for subject
  static async getTagsBundle(
    className: string,
    subject: string,
    date: string,
  ): Promise<{ current: WhiteboardTag[]; aggregated: TagUsage[] } | null> {
    try {
      const classSlug = className.replace(/ /g, "-")
      const res = await fetch(`/api/tags/${enc(classSlug)}/${enc(subject)}/bundle?date=${encodeURIComponent(date)}`, {
        method: "GET",
        headers: { "Content-Type": "application/json" },
      })
      if (!res.ok) {
        console.error("getTagsBundle API failed:", res.status, await res.text())
        return null
      }
      return (await res.json()) as { current: WhiteboardTag[]; aggregated: TagUsage[] }
    } catch (err) {
      console.error("Error in getTagsBundle:", err)
      return null
    }
  }
}
[V0_FILE]typescriptreact:file="app/whiteboard/[class]/[subject]/[date]/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/date-select/[class]/[date]/loading.tsx" isMerged="true"
export default function LoadingDateSelect() {
  return (
    <div className="min-h-screen bg-gray-50 flex items-center justify-center p-8">
      <div className="flex flex-col items-center">
        <div className="h-10 w-10 rounded-full border-2 border-blue-600 border-b-transparent animate-spin mb-4" />
        <p className="text-sm text-gray-600">Loading date…</p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/date-select/[class]/[date]/page.tsx" isEdit="true" isMerged="true"
"use client"

import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { ArrowLeft, Calendar, ArrowRight, ChevronLeft, CalendarDays } from "lucide-react"
import Link from "next/link"
import { useParams } from "next/navigation"
import { useMemo } from "react"

function iso(date: Date) {
  return date.toISOString().split("T")[0]
}

export default function DateSelectPage() {
  const params = useParams()
  const classSlug = params.class as string
  const className = (params.class as string)?.replace("-", " ")
  const selectedDate = params.date as string

const todayIso = useMemo(() => iso(new Date()), [])
  const yesterdayIso = useMemo(() => {
    const d = new Date()
    d.setDate(d.getDate() - 1)
    return iso(d)
  }, [])

const subjects = [
    {
      name: "Physics",
      color: "bg-blue-500",
      lightColor: "bg-blue-50",
      icon: "⚛️",
      description: "Mechanics, Thermodynamics & More",
    },
    {
      name: "Chemistry",
      color: "bg-emerald-500",
      lightColor: "bg-emerald-50",
      icon: "🧪",
      description: "Organic, Inorganic & Physical",
    },
    {
      name: "Zoology",
      color: "bg-purple-500",
      lightColor: "bg-purple-50",
      icon: "🦋",
      description: "Animal Biology & Physiology",
    },
    {
      name: "Botany",
      color: "bg-orange-500",
      lightColor: "bg-orange-50",
      icon: "🌱",
      description: "Plant Sciences & Ecology",
    },
  ]

const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    const today = new Date()
    const yesterday = new Date(today)
    yesterday.setDate(today.getDate() - 1)
    const tomorrow = new Date(today)
    tomorrow.setDate(today.getDate() + 1)

if (dateString === today.toISOString().split("T")[0]) {
      return "Today"
    } else if (dateString === yesterday.toISOString().split("T")[0]) {
      return "Yesterday"
    } else if (dateString === tomorrow.toISOString().split("T")[0]) {
      return "Tomorrow"
    } else {
      return date.toLocaleDateString("en-US", {
        weekday: "long",
        month: "long",
        day: "numeric",
        year: "numeric",
      })
    }
  }

return (
    <div className="min-h-screen bg-gray-50">
      <div className="max-w-6xl mx-auto px-4 py-8">
        {/* Header */}
        <div className="mb-8">
          <div className="flex items-center justify-between flex-wrap gap-3">
            <Link href="/">
              <Button variant="ghost" className="text-gray-600 hover:text-gray-900">
                <ArrowLeft className="w-4 h-4 mr-2" />
                Back to Home
              </Button>
            </Link>

{/* Quick Day Navigation */}
            <div className="flex items-center gap-2">
              <Link href={`/date-select/${classSlug}/${yesterdayIso}`}>
                <Button variant={selectedDate === yesterdayIso ? "default" : "outline"} className="gap-2">
                  <ChevronLeft className="w-4 h-4" />
                  Yesterday
                </Button>
              </Link>
              <Link href={`/date-select/${classSlug}/${todayIso}`}>
                <Button variant={selectedDate === todayIso ? "default" : "outline"} className="gap-2">
                  <CalendarDays className="w-4 h-4" />
                  Today
                </Button>
              </Link>
            </div>
          </div>

<div className="text-center mb-8 mt-6">
            <h1 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">{className?.toUpperCase()}</h1>
            <div className="flex items-center justify-center space-x-3 text-xl text-gray-600 bg-white px-6 py-3 rounded-lg shadow-sm border inline-flex">
              <Calendar className="w-5 h-5" />
              <span>{formatDate(selectedDate)}</span>
            </div>
            <p className="text-gray-600 mt-4">Select a subject to view notes for this date</p>
          </div>
        </div>

{/* Subjects Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {subjects.map((subject) => (
            <Link
              key={subject.name}
              href={`/whiteboard/${className?.replace(" ", "-")}/${subject.name.toLowerCase()}/${selectedDate}`}
            >
              <Card className="group hover:shadow-lg transition-all duration-300 hover:-translate-y-1 border-0 shadow-sm">
                <CardContent className="p-6">
                  <div
                    className={`w-12 h-12 ${subject.color} rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300`}
                  >
                    <span className="text-2xl">{subject.icon}</span>
                  </div>
                  <h3 className="text-xl font-semibold text-gray-900 mb-2">{subject.name}</h3>
                  <p className="text-gray-600 text-sm mb-4">{subject.description}</p>
                  <div className="flex items-center text-blue-600 text-sm font-medium group-hover:text-blue-700">
                    Open Whiteboard
                    <ArrowRight className="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform" />
                  </div>
                </CardContent>
              </Card>
            </Link>
          ))}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import {
  BookOpen,
  Users,
  Calendar,
  PenTool,
  ChevronLeft,
  ChevronRight,
  Tag,
  ArrowRight,
  CalendarDays,
} from "lucide-react"
import Link from "next/link"
import { WhiteboardDB, type TagUsage, type TagsBySubject } from "@/lib/supabase"

function iso(date: Date) {
  return date.toISOString().split("T")[0]
}

export default function HomePage() {
  const [selectedClass, setSelectedClass] = useState<string | null>(null)
  const [currentDate, setCurrentDate] = useState(new Date())
  const [currentView, setCurrentView] = useState<"subjects" | "calendar" | "tags">("subjects")
  const [tagsBySubject, setTagsBySubject] = useState<Record<string, TagUsage[]>>({})
  const [isLoadingTags, setIsLoadingTags] = useState(false)

// Generate class options
  const mrClasses = Array.from({ length: 10 }, (_, i) => `MR ${String(i + 1).padStart(2, "0")}`)
  const rmClasses = Array.from({ length: 10 }, (_, i) => `RM ${String(i + 1).padStart(2, "0")}`)
  const orClasses = Array.from({ length: 10 }, (_, i) => `OR ${String(i + 1).padStart(2, "0")}`)

// Calendar helpers
  const getDaysInMonth = (date: Date) => new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate()
  const getFirstDayOfMonth = (date: Date) => new Date(date.getFullYear(), date.getMonth(), 1).getDay()
  const formatDate = (year: number, month: number, day: number) =>
    `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`

const navigateMonth = (direction: "prev" | "next") => {
    setCurrentDate((prev) => {
      const newDate = new Date(prev)
      newDate.setMonth(prev.getMonth() + (direction === "prev" ? -1 : 1))
      return newDate
    })
  }

const loadTags = async () => {
    if (!selectedClass) return
    setIsLoadingTags(true)
    try {
      // Single request for all subjects to reduce DB load and rate limits
      const all: TagsBySubject = await WhiteboardDB.getAllTagsForClass(selectedClass)
      setTagsBySubject(all || {})
    } finally {
      setIsLoadingTags(false)
    }
  }

useEffect(() => {
    if (currentView === "tags" && selectedClass) {
      loadTags()
    }
  }, [currentView, selectedClass])

const renderCalendar = () => {
    const daysInMonth = getDaysInMonth(currentDate)
    const firstDay = getFirstDayOfMonth(currentDate)
    const days = []
    const today = new Date()
    const isCurrentMonth =
      today.getMonth() === currentDate.getMonth() && today.getFullYear() === currentDate.getFullYear()

for (let i = 0; i < firstDay; i++) days.push(<div key={`empty-${i}`} className="h-12 md:h-16"></div>)

for (let day = 1; day <= daysInMonth; day++) {
      const isToday = isCurrentMonth && today.getDate() === day
      const dateString = formatDate(currentDate.getFullYear(), currentDate.getMonth(), day)
      days.push(
        <div key={day} className="h-12 md:h-16 flex items-center justify-center">
          <Link
            href={`/date-select/${selectedClass?.replace(" ", "-")}/${dateString}`}
            className={`w-8 h-8 md:w-12 md:h-12 rounded-lg flex items-center justify-center text-sm md:text-lg font-medium transition-all duration-200 hover:scale-105 ${
              isToday ? "bg-blue-600 text-white shadow-lg" : "hover:bg-gray-100 text-gray-700 hover:text-blue-600"
            }`}
          >
            {day}
          </Link>
        </div>,
      )
    }
    return days
  }

if (selectedClass) {
    const todayIso = iso(new Date())
    const y = new Date()
    y.setDate(y.getDate() - 1)
    const yesterdayIso = iso(y)

return (
      <div className="min-h-screen bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 py-6">
          <div className="mb-8">
            <Button
              variant="ghost"
              onClick={() => setSelectedClass(null)}
              className="mb-6 text-gray-600 hover:text-gray-900"
            >
              ← Back to Classes
            </Button>

<div className="text-center mb-8">
              <h1 className="text-3xl md:text-5xl font-bold text-gray-900 mb-2">{selectedClass}</h1>
              <p className="text-gray-600 text-lg">Select your learning path</p>
            </div>

{/* View Switcher */}
            <div className="flex flex-col items-center gap-4 mb-8">
              <div className="bg-white rounded-lg p-1 shadow-sm border">
                <Button
                  variant={currentView === "subjects" ? "default" : "ghost"}
                  onClick={() => setCurrentView("subjects")}
                  className="rounded-md"
                  size="sm"
                >
                  <BookOpen className="w-4 h-4 mr-2" />
                  Subjects
                </Button>
                <Button
                  variant={currentView === "calendar" ? "default" : "ghost"}
                  onClick={() => setCurrentView("calendar")}
                  className="rounded-md"
                  size="sm"
                >
                  <Calendar className="w-4 h-4 mr-2" />
                  Calendar
                </Button>
                <Button
                  variant={currentView === "tags" ? "default" : "ghost"}
                  onClick={() => setCurrentView("tags")}
                  className="rounded-md"
                  size="sm"
                >
                  <Tag className="w-4 h-4 mr-2" />
                  Tags
                </Button>
              </div>

{/* Quick jump to Yesterday/Today for the selected class */}
              <div className="flex items-center gap-2">
                <Link href={`/date-select/${selectedClass.replace(" ", "-")}/${yesterdayIso}`}>
                  <Button variant="outline" size="sm" className="gap-2 bg-transparent">
                    <ChevronLeft className="w-4 h-4" />
                    Yesterday
                  </Button>
                </Link>
                <Link href={`/date-select/${selectedClass.replace(" ", "-")}/${todayIso}`}>
                  <Button variant="outline" size="sm" className="gap-2 bg-transparent">
                    <CalendarDays className="w-4 h-4" />
                    Today
                  </Button>
                </Link>
              </div>
            </div>
          </div>

{currentView === "subjects" && (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              {subjects.map((subject) => (
                <Link
                  key={subject.name}
                  href={`/whiteboard/${selectedClass.replace(" ", "-")}/${subject.name.toLowerCase()}/${new Date().toISOString().split("T")[0]}`}
                >
                  <Card className="group hover:shadow-lg transition-all duration-300 hover:-translate-y-1 border-0 shadow-sm">
                    <CardContent className="p-6">
                      <div
                        className={`w-12 h-12 ${subject.color} rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300`}
                      >
                        <span className="text-2xl">{subject.icon}</span>
                      </div>
                      <h3 className="text-xl font-semibold text-gray-900 mb-2">{subject.name}</h3>
                      <p className="text-gray-600 text-sm mb-4">{subject.description}</p>
                      <div className="flex items-center text-blue-600 text-sm font-medium group-hover:text-blue-700">
                        Start Learning
                        <ArrowRight className="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform" />
                      </div>
                    </CardContent>
                  </Card>
                </Link>
              ))}
            </div>
          )}

{currentView === "calendar" && (
            <Card className="shadow-sm border-0">
              <CardHeader className="border-b border-gray-100">
                <div className="flex items-center justify-between">
                  <CardTitle className="text-2xl font-semibold text-gray-900">Select Date</CardTitle>
                  <div className="flex items-center space-x-4">
                    <Button variant="outline" size="sm" onClick={() => navigateMonth("prev")}>
                      <ChevronLeft className="w-4 h-4" />
                    </Button>
                    <span className="text-lg font-medium text-gray-700 min-w-[180px] text-center">
                      {currentDate.toLocaleDateString("en-US", { month: "long", year: "numeric" })}
                    </span>
                    <Button variant="outline" size="sm" onClick={() => navigateMonth("next")}>
                      <ChevronRight className="w-4 h-4" />
                    </Button>
                  </div>
                </div>
              </CardHeader>
              <CardContent className="p-6">
                {/* Quick jump row inside calendar as well */}
                <div className="flex items-center justify-end gap-2 mb-4">
                  <Link href={`/date-select/${selectedClass.replace(" ", "-")}/${yesterdayIso}`}>
                    <Button variant="outline" size="sm" className="gap-2 bg-transparent">
                      <ChevronLeft className="w-4 h-4" />
                      Yesterday
                    </Button>
                  </Link>
                  <Link href={`/date-select/${selectedClass.replace(" ", "-")}/${todayIso}`}>
                    <Button variant="outline" size="sm" className="gap-2 bg-transparent">
                      <CalendarDays className="w-4 h-4" />
                      Today
                    </Button>
                  </Link>
                </div>

<div className="grid grid-cols-7 gap-2 mb-4">
                  {["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((day) => (
                    <div key={day} className="h-8 flex items-center justify-center text-sm font-medium text-gray-500">
                      {day}
                    </div>
                  ))}
                </div>
                <div className="grid grid-cols-7 gap-2">{renderCalendar()}</div>
              </CardContent>
            </Card>
          )}

{currentView === "tags" && (
            <Card className="shadow-sm border-0">
              <CardHeader className="border-b border-gray-100">
                <CardTitle className="text-2xl font-semibold text-gray-900">Tags Overview</CardTitle>
                <p className="text-gray-600">Organize your notes by topics and chapters</p>
              </CardHeader>
              <CardContent className="p-6">
                {isLoadingTags ? (
                  <div className="text-center py-12">
                    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-4"></div>
                    <p className="text-gray-600">Loading tags...</p>
                  </div>
                ) : (
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                    {subjects.map((subject) => {
                      const list = tagsBySubject[subject.name.toLowerCase()] || []
                      return (
                        <Card key={subject.name} className={`${subject.lightColor} border-0`}>
                          <CardHeader className="pb-3">
                            <div className="flex items-center space-x-3">
                              <div className={`w-8 h-8 ${subject.color} rounded-lg flex items-center justify-center`}>
                                <span className="text-lg">{subject.icon}</span>
                              </div>
                              <div>
                                <h3 className="font-semibold text-gray-900">{subject.name}</h3>
                                <p className="text-xs text-gray-600">{list.length} tags</p>
                              </div>
                            </div>
                          </CardHeader>
                          <CardContent className="pt-0">
                            <div className="space-y-2 max-h-48 overflow-y-auto">
                              {list.length > 0 ? (
                                list.map((tag) => (
                                  <Link
                                    key={`${tag.tag}-${tag.color}`}
                                    href={`/whiteboard/${selectedClass.replace(" ", "-")}/${subject.name.toLowerCase()}/${tag.latest_date}`}
                                  >
                                    <div className="flex items-center justify-between p-2 rounded-lg hover:bg-white/60 transition-colors cursor-pointer">
                                      <div className="flex items-center space-x-2">
                                        <div className="w-2 h-2 rounded-full" style={{ backgroundColor: tag.color }} />
                                        <span className="text-sm font-medium text-gray-800">{tag.tag}</span>
                                      </div>
                                      <span className="text-xs text-gray-500">{tag.usage_count}</span>
                                    </div>
                                  </Link>
                                ))
                              ) : (
                                <div className="text-center py-6">
                                  <Tag className="w-6 h-6 mx-auto mb-2 text-gray-400" />
                                  <p className="text-sm text-gray-500 mb-3">No tags yet</p>
                                  <Link
                                    href={`/whiteboard/${selectedClass.replace(" ", "-")}/${subject.name.toLowerCase()}/${new Date().toISOString().split("T")[0]}`}
                                  >
                                    <Button variant="outline" size="sm">
                                      Create First Tag
                                    </Button>
                                  </Link>
                                </div>
                              )}
                            </div>
                          </CardContent>
                        </Card>
                      )
                    })}
                  </div>
                )}
              </CardContent>
            </Card>
          )}
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gray-50">
      <div className="max-w-7xl mx-auto px-4 py-12">
        {/* Hero */}
        <div className="text-center mb-16">
          <h1 className="text-4xl md:text-6xl font-bold text-gray-900 mb-6">
            Digital Learning
            <span className="block text-blue-600">Made Simple</span>
          </h1>
          <p className="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
            Your unlimited canvas for learning and creativity. Take notes, draw diagrams, and organize your studies.
          </p>
          <div className="flex flex-wrap justify-center gap-6 text-gray-500">
            <div className="flex items-center space-x-2">
              <Users className="w-5 h-5" />
              <span>Multi-Class Support</span>
            </div>
            <div className="flex items-center space-x-2">
              <BookOpen className="w-5 h-5" />
              <span>Subject Organization</span>
            </div>
            <div className="flex items-center space-x-2">
              <PenTool className="w-5 h-5" />
              <span>Digital Whiteboard</span>
            </div>
          </div>
        </div>

{/* Class Selection */}
        <div className="mb-12">
          <h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">Choose Your Class</h2>
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
            {/* MR Classes */}
            <Card className="shadow-sm border-0 overflow-hidden">
              <div className="bg-blue-600 p-6">
                <h3 className="text-2xl font-bold text-white text-center">MR Classes</h3>
              </div>
              <CardContent className="p-6">
                <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
                  {mrClasses.map((className) => (
                    <Button
                      key={className}
                      variant="outline"
                      className="h-16 hover:bg-blue-50 hover:border-blue-200 transition-colors bg-transparent"
                      onClick={() => setSelectedClass(className)}
                    >
                      <div className="text-center">
                        <Users className="w-5 h-5 mx-auto mb-1 text-blue-600" />
                        <span className="font-semibold">{className}</span>
                      </div>
                    </Button>
                  ))}
                </div>
              </CardContent>
            </Card>

{/* RM Classes */}
            <Card className="shadow-sm border-0 overflow-hidden">
              <div className="bg-purple-600 p-6">
                <h3 className="text-2xl font-bold text-white text-center">RM Classes</h3>
              </div>
              <CardContent className="p-6">
                <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
                  {rmClasses.map((className) => (
                    <Button
                      key={className}
                      variant="outline"
                      className="h-16 hover:bg-purple-50 hover:border-purple-200 transition-colors bg-transparent"
                      onClick={() => setSelectedClass(className)}
                    >
                      <div className="text-center">
                        <Users className="w-5 h-5 mx-auto mb-1 text-purple-600" />
                        <span className="font-semibold">{className}</span>
                      </div>
                    </Button>
                  ))}
                </div>
              </CardContent>
            </Card>

{/* OR Classes */}
            <Card className="shadow-sm border-0 overflow-hidden">
              <div className="bg-teal-600 p-6">
                <h3 className="text-2xl font-bold text-white text-center">OR Classes</h3>
              </div>
              <CardContent className="p-6">
                <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
                  {orClasses.map((className) => (
                    <Button
                      key={className}
                      variant="outline"
                      className="h-16 hover:bg-teal-50 hover:border-teal-200 transition-colors bg-transparent"
                      onClick={() => setSelectedClass(className)}
                    >
                      <div className="text-center">
                        <Users className="w-5 h-5 mx-auto mb-1 text-teal-600" />
                        <span className="font-semibold">{className}</span>
                      </div>
                    </Button>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/whiteboard/[class]/[subject]/[date]/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState, useEffect, useRef, useCallback, useMemo } from "react"
import Link from "next/link"
import { useParams } from "next/navigation"
import {
  ArrowLeft,
  Pen,
  Eraser,
  Highlighter,
  Undo,
  Redo,
  Trash2,
  Save,
  Calendar,
  Hand,
  Wifi,
  WifiOff,
  Cloud,
  TagIcon,
  X,
  Maximize2,
  Minimize2,
  Plus,
  Hash,
  AlertCircle,
  Search,
  MoreVertical,
  Square,
  CircleIcon,
  Minus,
  LineChart,
  ArrowRightIcon,
  TriangleIcon,
  Check,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Slider } from "@/components/ui/slider"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Separator } from "@/components/ui/separator"
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubTrigger,
  DropdownMenuSubContent,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuCheckboxItem,
  DropdownMenuItem,
} from "@/components/ui/dropdown-menu"
import { DrawingDebug } from "@/components/drawing-debug"
import { DrawingTest } from "@/components/drawing-test"
import { WhiteboardDB, type DrawingAction, type WhiteboardTag, type TagUsage } from "@/lib/supabase"

type ActiveShapeType = "rect" | "circle" | "triangle" | "line" | "arrow" | "graph"
type HandleId = "nw" | "n" | "ne" | "e" | "se" | "s" | "sw" | "w" | "start" | "end" | "move"

type ActiveShape =
  | {
      type: "rect" | "circle" | "triangle" | "graph"
      x: number
      y: number
      w: number
      h: number
      color: string
      thickness: number
    }
  | {
      type: "line" | "arrow"
      x1: number
      y1: number
      x2: number
      y2: number
      color: string
      thickness: number
    }

export default function ModernWhiteboardPage() {
  const params = useParams()
  const classSlug = params.class as string
  const className = classSlug.replace("-", " ")
  const subject = params.subject as string
  const selectedDate = params.date as string

const prevDateStr = useMemo(() => {
    const d = new Date(selectedDate)
    d.setDate(d.getDate() - 1)
    return d.toISOString().split("T")[0]
  }, [selectedDate])

const todayStr = useMemo(() => {
    const t = new Date()
    return t.toISOString().split("T")[0]
  }, [])

const [currentTool, setCurrentTool] = useState<"pen" | "highlighter" | "eraser" | "pointer">("pen")
  const [penColor, setPenColor] = useState("#2563eb")
  const [highlighterColor, setHighlighterColor] = useState("#fbbf24")
  const [thickness, setThickness] = useState([3])
  const [actions, setActions] = useState<DrawingAction[]>([])
  const [redoStack, setRedoStack] = useState<DrawingAction[]>([])
  const [lastSaved, setLastSaved] = useState<Date | null>(null)
  const [isDrawing, setIsDrawing] = useState(false)
  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false)
  const [isOnline, setIsOnline] = useState(true)
  const [isSaving, setIsSaving] = useState(false)
  const [saveError, setSaveError] = useState<string | null>(null)

const [tags, setTags] = useState<WhiteboardTag[]>([])
  const [allTags, setAllTags] = useState<TagUsage[]>([])
  const [isTagDialogOpen, setIsTagDialogOpen] = useState(false)
  const [newTag, setNewTag] = useState("")
  const [selectedColor, setSelectedColor] = useState("#3b82f6")
  const [isLoadingTags, setIsLoadingTags] = useState(false)
  const [isFullscreen, setIsFullscreen] = useState(false)
  const [tagSearch, setTagSearch] = useState("")

// Background + overlays
  const [pageColor, setPageColor] = useState<string>("#ffffff")
  const [overlayType, setOverlayType] = useState<OverlayType>("none")
  const [ruleColor, setRuleColor] = useState<string>("#e5e7eb")
  const [rememberDefault, setRememberDefault] = useState<boolean>(false)

// Shape insertion + editing
  const [pendingInsert, setPendingInsert] = useState<ActiveShapeType | null>(null)
  const [activeShape, setActiveShape] = useState<ActiveShape | null>(null)
  const [dragState, setDragState] = useState<{
    handle: HandleId
    startX: number
    startY: number
    origin: ActiveShape
  } | null>(null)
  const [insertHover, setInsertHover] = useState<{ x: number; y: number } | null>(null)

const canvasRef = useRef<HTMLCanvasElement>(null)
  const overlayRef = useRef<HTMLDivElement>(null)
  const animationFrameRef = useRef<number>()
  const lastSaveRef = useRef<DrawingAction[]>([])
  const canvasHeight = 4000

// Palettes
  const pageColors = [
    "#ffffff",
    "#f8fafc",
    "#f0f9ff",
    "#f0fdf4",
    "#fff1f2",
    "#f5f3ff",
    "#fffbeb",
    "#fefce8",
    "#ecfeff",
    "#000000",
  ]
  const ruleColors = ["#e5e7eb", "#d1d5db", "#9ca3af", "#94a3b8", "#60a5fa", "#f87171", "#34d399", "#f59e0b", "#8b5cf6"]

const tagColors = [
    "#3b82f6",
    "#ef4444",
    "#10b981",
    "#f59e0b",
    "#8b5cf6",
    "#ec4899",
    "#06b6d4",
    "#84cc16",
    "#f97316",
    "#6366f1",
  ]
  const tagSuggestions = {
    physics: [
      "Mechanics",
      "Thermodynamics",
      "Electromagnetism",
      "Optics",
      "Quantum Physics",
      "Waves",
      "Motion",
      "Energy",
      "Forces",
      "Circuits",
    ],
    chemistry: [
      "Organic Chemistry",
      "Inorganic Chemistry",
      "Physical Chemistry",
      "Reactions",
      "Bonding",
      "Acids & Bases",
      "Equilibrium",
      "Kinetics",
      "Thermochemistry",
      "Electrochemistry",
    ],
    zoology: [
      "Cell Biology",
      "Genetics",
      "Evolution",
      "Anatomy",
      "Physiology",
      "Ecology",
      "Animal Behavior",
      "Reproduction",
      "Development",
      "Classification",
    ],
    botany: [
      "Plant Anatomy",
      "Photosynthesis",
      "Plant Physiology",
      "Taxonomy",
      "Ecology",
      "Reproduction",
      "Growth",
      "Metabolism",
      "Genetics",
      "Evolution",
    ],
  } as const

// Network status
  useEffect(() => {
    const onOnline = () => {
      setIsOnline(true)
      setSaveError(null)
    }
    const onOffline = () => {
      setIsOnline(false)
      setSaveError("No internet connection")
    }
    window.addEventListener("online", onOnline)
    window.addEventListener("offline", onOffline)
    return () => {
      window.removeEventListener("online", onOnline)
      window.removeEventListener("offline", onOffline)
    }
  }, [])

// ESC to cancel insert
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        setPendingInsert(null)
        if (activeShape && !dragState) {
          setActiveShape(null)
        }
      }
    }
    window.addEventListener("keydown", onKey)
    return () => window.removeEventListener("keydown", onKey)
  }, [activeShape, dragState])

// Preferences per subject
  const prefsKey = useMemo(() => `wb-prefs:${className}:${subject}`, [className, subject])
  useEffect(() => {
    try {
      const raw = localStorage.getItem(prefsKey)
      if (raw) {
        const p = JSON.parse(raw)
        if (typeof p?.overlayType === "string") setOverlayType(p.overlayType)
        if (typeof p?.pageColor === "string") setPageColor(p.pageColor)
        if (typeof p?.ruleColor === "string") setRuleColor(p.ruleColor)
        if (typeof p?.rememberDefault === "boolean") setRememberDefault(p.rememberDefault)
      }
    } catch {}
  }, [prefsKey])
  const persistPrefs = useCallback(
    (next?: Partial<{ overlayType: OverlayType; pageColor: string; ruleColor: string; rememberDefault: boolean }>) => {
      if (!rememberDefault && !next?.rememberDefault) return
      const obj = { overlayType, pageColor, ruleColor, rememberDefault, ...next }
      try {
        localStorage.setItem(prefsKey, JSON.stringify(obj))
      } catch {}
    },
    [overlayType, pageColor, ruleColor, rememberDefault, prefsKey],
  )

// Load whiteboard
  useEffect(() => {
    const load = async () => {
      const data = await WhiteboardDB.getWhiteboardData(className, subject, selectedDate)
      if (data?.drawing_data) {
        setActions(data.drawing_data)
        lastSaveRef.current = [...data.drawing_data]
        setLastSaved(data.updated_at ? new Date(data.updated_at) : new Date())
        setHasUnsavedChanges(false)
      }
    }
    load()
  }, [className, subject, selectedDate])

// Save helper
  const saveToDatabase = useCallback(
    async (payload: DrawingAction[]) => {
      if (!isOnline) {
        setSaveError("Cannot save: Offline")
        return false
      }
      if (JSON.stringify(payload) === JSON.stringify(lastSaveRef.current)) return true

setIsSaving(true)
      setSaveError(null)
      let attempt = 0
      while (attempt < 3) {
        try {
          const ok = await WhiteboardDB.saveWhiteboardData(className, subject, selectedDate, payload)
          if (ok) {
            setLastSaved(new Date())
            lastSaveRef.current = [...payload]
            setHasUnsavedChanges(false)
            setIsSaving(false)
            return true
          }
        } catch (e: any) {
          setSaveError(e?.message || "Unknown save error")
        }
        attempt++
        if (attempt < 3) await new Promise((r) => setTimeout(r, 400 * Math.pow(2, attempt)))
      }
      setIsSaving(false)
      setSaveError("Failed to save after multiple attempts")
      return false
    },
    [className, subject, selectedDate, isOnline],
  )

// Unsaved changes tracker
  useEffect(() => {
    if (JSON.stringify(actions) !== JSON.stringify(lastSaveRef.current)) setHasUnsavedChanges(true)
  }, [actions])

// Drawing re-render
  const redraw = useCallback(() => {
    const canvas = canvasRef.current
    if (!canvas) return
    const ctx = canvas.getContext("2d")
    if (!ctx) return

if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current)
    animationFrameRef.current = requestAnimationFrame(() => {
      ctx.clearRect(0, 0, canvas.width, canvas.height)

const groups = new Map<string, DrawingAction[]>()
      actions.forEach((a) => {
        const key = `${a.tool}-${a.color}-${a.thickness}`
        if (!groups.has(key)) groups.set(key, [])
        groups.get(key)!.push(a)
      })

groups.forEach((group) => {
        if (group.length === 0) return
        const first = group[0]
        if (first.tool === "eraser") {
          ctx.globalCompositeOperation = "destination-out"
        } else {
          ctx.globalCompositeOperation = "source-over"
          ctx.strokeStyle = first.color
          ctx.globalAlpha = first.tool === "highlighter" ? 0.4 : 1
        }
        ctx.lineCap = "round"
        ctx.lineJoin = "round"

group.forEach((a) => {
          if (a.points.length < 2) return
          ctx.lineWidth = a.thickness
          ctx.beginPath()
          ctx.moveTo(a.points[0].x, a.points[0].y)
          for (let i = 1; i < a.points.length - 1; i++) {
            const p = a.points[i],
              n = a.points[i + 1]
            const cx = (p.x + n.x) / 2
            const cy = (p.y + n.y) / 2
            ctx.quadraticCurveTo(p.x, p.y, cx, cy)
          }
          const last = a.points[a.points.length - 1]
          ctx.lineTo(last.x, last.y)
          ctx.stroke()
        })
      })

ctx.globalAlpha = 1
      ctx.globalCompositeOperation = "source-over"
    })
  }, [actions])
  useEffect(() => {
    redraw()
  }, [actions, redraw])

// Freehand drawing (disabled when editing/inserting shape)
  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return
    if (activeShape || pendingInsert) return // disable while inserting/editing

let drawing = false
    let path: { x: number; y: number }[] = []

const pos = (e: MouseEvent | TouchEvent) => {
      const rect = canvas.getBoundingClientRect()
      const clientX = "touches" in e ? e.touches[0].clientX : e.clientX
      const clientY = "touches" in e ? e.touches[0].clientY : e.clientY
      return {
        x: ((clientX - rect.left) / rect.width) * canvas.width,
        y: ((clientY - rect.top) / rect.height) * canvas.height,
      }
    }

const start = (e: MouseEvent | TouchEvent) => {
      if (currentTool === "pointer") return
      e.preventDefault()
      drawing = true
      setIsDrawing(true)
      path = [pos(e)]
    }

const move = (e: MouseEvent | TouchEvent) => {
      if (!drawing || currentTool === "pointer") return
      e.preventDefault()
      const p = pos(e)
      path.push(p)

const ctx = canvas.getContext("2d")
      if (!ctx || path.length < 2) return
      const prev = path[path.length - 2]
      ctx.beginPath()
      ctx.moveTo(prev.x, prev.y)
      ctx.lineTo(p.x, p.y)
      if (currentTool === "eraser") {
        ctx.globalCompositeOperation = "destination-out"
        ctx.lineWidth = thickness[0]
      } else {
        ctx.globalCompositeOperation = "source-over"
        ctx.strokeStyle = currentTool === "highlighter" ? highlighterColor : penColor
        ctx.lineWidth = thickness[0]
        ctx.globalAlpha = currentTool === "highlighter" ? 0.4 : 1
      }
      ctx.lineCap = "round"
      ctx.stroke()
      ctx.globalAlpha = 1
      ctx.globalCompositeOperation = "source-over"
    }

const end = () => {
      if (!drawing) return
      drawing = false
      setIsDrawing(false)
      if (path.length > 0) {
        const action: DrawingAction = {
          type: currentTool === "eraser" ? "erase" : "draw",
          points: [...path],
          color: currentTool === "highlighter" ? highlighterColor : penColor,
          thickness: thickness[0],
          tool: currentTool,
        }
        setActions((prev) => [...prev, action])
        setRedoStack([])
      }
      path = []
    }

canvas.addEventListener("mousedown", start)
    canvas.addEventListener("mousemove", move)
    canvas.addEventListener("mouseup", end)
    canvas.addEventListener("mouseleave", end)
    canvas.addEventListener("touchstart", start, { passive: false })
    canvas.addEventListener("touchmove", move, { passive: false })
    canvas.addEventListener("touchend", end)

return () => {
      canvas.removeEventListener("mousedown", start)
      canvas.removeEventListener("mousemove", move)
      canvas.removeEventListener("mouseup", end)
      canvas.removeEventListener("mouseleave", end)
      canvas.removeEventListener("touchstart", start)
      canvas.removeEventListener("touchmove", move)
      canvas.removeEventListener("touchend", end)
    }
  }, [currentTool, penColor, highlighterColor, thickness, activeShape, pendingInsert])

// Tool helpers
  const undo = () => {
    if (actions.length === 0) return
    const last = actions[actions.length - 1]
    setRedoStack((prev) => [...prev, last])
    setActions((prev) => prev.slice(0, -1))
  }
  const redo = () => {
    if (redoStack.length === 0) return
    const a = redoStack[redoStack.length - 1]
    setRedoStack((prev) => prev.slice(0, -1))
    setActions((prev) => [...prev, a])
  }
  const clearCanvas = () => {
    setActions([])
    setRedoStack([])
    const canvas = canvasRef.current
    if (canvas) canvas.getContext("2d")?.clearRect(0, 0, canvas.width, canvas.height)
  }
  const handleManualSave = async () => {
    if (!hasUnsavedChanges) return
    await saveToDatabase(actions)
  }

// Tags
  const loadTags = async () => {
    setIsLoadingTags(true)
    try {
      const bundle = await WhiteboardDB.getTagsBundle(className, subject, selectedDate)
      if (bundle) {
        setTags(bundle.current || [])
        setAllTags(bundle.aggregated || [])
      } else {
        setTags([])
        setAllTags([])
      }
    } finally {
      setIsLoadingTags(false)
    }
  }
  useEffect(() => {
    loadTags()
  }, [className, subject, selectedDate])

const addNewTag = async () => {
    if (!newTag.trim()) return
    const ok = await WhiteboardDB.addTag(className, subject, selectedDate, newTag.trim(), selectedColor)
    if (ok) {
      setNewTag("")
      setSelectedColor("#3b82f6")
      await loadTags()
    }
  }
  const addExistingTag = async (tag: string, color: string) => {
    const ok = await WhiteboardDB.addTag(className, subject, selectedDate, tag, color)
    if (ok) await loadTags()
  }
  const addSuggestedTag = async (tag: string) => {
    const palette = tagColors
    const color = palette[Math.floor(Math.random() * palette.length)]
    const ok = await WhiteboardDB.addTag(className, subject, selectedDate, tag, color)
    if (ok) await loadTags()
  }
  const removeTag = async (tag: string) => {
    const ok = await WhiteboardDB.removeTag(className, subject, selectedDate, tag)
    if (ok) await loadTags()
  }

const formatDate = (dateString: string) => {
    const d = new Date(dateString)
    const today = new Date()
    if (dateString === today.toISOString().split("T")[0]) return "Today"
    return d.toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric" })
  }
  const suggestions = (tagSuggestions as any)[subject] || []
  const subjectInfo = {
    physics: { icon: "⚛️", color: "text-blue-600" },
    chemistry: { icon: "🧪", color: "text-emerald-600" },
    zoology: { icon: "🦋", color: "text-purple-600" },
    botany: { icon: "🌱", color: "text-orange-600" },
  }[subject as keyof typeof tagSuggestions] || { icon: "📚", color: "text-gray-600" }

// Overlay helpers
  function hexToRgba(hex: string, alpha = 1) {
    const h = hex.replace("#", "")
    const n = Number.parseInt(
      h.length === 3
        ? h
            .split("")
            .map((c) => c + c)
            .join("")
        : h,
      16,
    )
    const r = (n >> 16) & 255
    const g = (n >> 8) & 255
    const b = n & 255
    return `rgba(${r}, ${g}, ${b}, ${alpha})`
  }
  const overlayStyle = useMemo<React.CSSProperties>(() => {
    if (overlayType === "none") return { backgroundImage: "none" }
    const color = hexToRgba(ruleColor, 0.45)
    const colorBold = hexToRgba(ruleColor, 0.75)
    const ruled = (gap: number, withMargin = false) => {
      const horiz = `repeating-linear-gradient(to bottom, ${color} 0, ${color} 1px, transparent 1px, transparent ${gap}px)`
      if (withMargin) {
        const margin = `linear-gradient(to right, transparent 72px, ${colorBold} 72px, ${colorBold} 74px, transparent 74px)`
        return { backgroundImage: `${margin}, ${horiz}` }
      }
      return { backgroundImage: horiz }
    }
    const grid = (gap: number) => {
      const v = `repeating-linear-gradient(to right, ${color} 0, ${color} 1px, transparent 1px, transparent ${gap}px)`
      const h = `repeating-linear-gradient(to bottom, ${color} 0, ${color} 1px, transparent 1px, transparent ${gap}px)`
      return { backgroundImage: `${v}, ${h}` }
    }
    switch (overlayType) {
      case "ruled-narrow":
        return ruled(24)
      case "ruled-medium":
        return ruled(32)
      case "ruled-wide":
        return ruled(44)
      case "ruled-medium-margin":
        return ruled(32, true)
      case "grid-small":
        return grid(20)
      case "grid-medium":
        return grid(32)
      case "grid-large":
        return grid(48)
      default:
        return { backgroundImage: "none" }
    }
  }, [overlayType, ruleColor])

const onPickOverlay = (v: OverlayType) => {
    setOverlayType(v)
    persistPrefs({ overlayType: v })
  }
  const onPickRuleColor = (c: string) => {
    setRuleColor(c)
    persistPrefs({ ruleColor: c })
  }
  const onPickPageColor = (c: string) => {
    setPageColor(c)
    if (c.toLowerCase() === "#000000" && penColor.toLowerCase() !== "#ffffff") setPenColor("#ffffff")
    persistPrefs({ pageColor: c })
  }
  const onToggleRemember = (checked: boolean) => {
    setRememberDefault(checked)
    persistPrefs({ rememberDefault: checked })
  }

// Shape point generators
  function linePoints(x1: number, y1: number, x2: number, y2: number, segments = 80) {
    const pts: { x: number; y: number }[] = []
    for (let i = 0; i <= segments; i++) {
      const t = i / segments
      pts.push({ x: x1 + (x2 - x1) * t, y: y1 + (y2 - y1) * t })
    }
    return pts
  }
  function rectPoints(x: number, y: number, w: number, h: number, step = 6) {
    const pts: { x: number; y: number }[] = []
    for (let i = 0; i <= w; i += step) pts.push({ x: x + i, y })
    for (let i = 0; i <= h; i += step) pts.push({ x: x + w, y: y + i })
    for (let i = w; i >= 0; i -= step) pts.push({ x: x + i, y: y + h })
    for (let i = h; i >= 0; i -= step) pts.push({ x, y: y + i })
    return pts
  }
  function circlePoints(cx: number, cy: number, r: number, segments = 120) {
    const pts: { x: number; y: number }[] = []
    for (let i = 0; i <= segments; i++) {
      const a = (i / segments) * Math.PI * 2
      pts.push({ x: cx + Math.cos(a) * r, y: cy + Math.sin(a) * r })
    }
    return pts
  }
  function trianglePointsFromBox(x: number, y: number, w: number, h: number) {
    const size = Math.min(w, h)
    const cx = x + w / 2
    const cy = y + h / 2
    const hh = (Math.sqrt(3) / 2) * size
    const p1 = { x: cx, y: cy - (2 / 3) * hh }
    const p2 = { x: cx - size / 2, y: cy + hh / 3 }
    const p3 = { x: cx + size / 2, y: cy + hh / 3 }
    return [
      ...linePoints(p1.x, p1.y, p2.x, p2.y, 60),
      ...linePoints(p2.x, p2.y, p3.x, p3.y, 60),
      ...linePoints(p3.x, p3.y, p1.x, p1.y, 60),
    ]
  }
  function arrowRightPoints(x1: number, y1: number, x2: number, y2: number) {
    const main = linePoints(x1, y1, x2, y2, 100)
    const dx = x2 - x1
    const dy = y2 - y1
    const len = Math.hypot(dx, dy) || 1
    const ux = dx / len
    const uy = dy / len
    const headLen = 24
    const perpX = -uy
    const perpY = ux
    const hx = x2 - ux * headLen
    const hy = y2 - uy * headLen
    const left = linePoints(x2, y2, hx + perpX * headLen * 0.6, hy + perpY * headLen * 0.6, 20)
    const right = linePoints(x2, y2, hx - perpX * headLen * 0.6, hy - perpY * headLen * 0.6, 20)
    return [...main, ...left, ...right]
  }
  function graphPoints(x: number, y: number, w: number, h: number) {
    const cx = Math.round(x + w / 2)
    const cy = Math.round(y + h / 2)
    const pts: { x: number; y: number }[] = []
    // axes
    pts.push(...linePoints(x, cy, x + w, cy, Math.max(60, Math.floor(w / 4))))
    pts.push(...linePoints(cx, y, cx, y + h, Math.max(60, Math.floor(h / 4))))
    // ticks
    const tick = 10
    const step = Math.max(30, Math.min(w, h) / 10)
    for (let tx = cx + step; tx <= x + w; tx += step) pts.push(...linePoints(tx, cy - tick, tx, cy + tick, 6))
    for (let tx = cx - step; tx >= x; tx -= step) pts.push(...linePoints(tx, cy - tick, tx, cy + tick, 6))
    for (let ty = cy + step; ty <= y + h; ty += step) pts.push(...linePoints(cx - tick, ty, cx + tick, ty, 6))
    for (let ty = cy - step; ty >= y; ty -= step) pts.push(...linePoints(cx - tick, ty, cx + tick, ty, 6))
    return pts
  }
  function pushShapePoints(points: { x: number; y: number }[], color: string, stroke: number) {
    if (!points.length) return
    const action: DrawingAction = { type: "draw", points, color, thickness: stroke, tool: "pen" }
    setActions((prev) => [...prev, action])
    setRedoStack([])
  }

// Insert mode: select shape type
  function beginInsert(type: ActiveShapeType) {
    setPendingInsert(type)
  }

// Coordinate map
  function clientToCanvas(e: React.PointerEvent | PointerEvent) {
    const c = canvasRef.current
    const overlay = overlayRef.current
    if (!c || !overlay) return { x: 0, y: 0 }
    const rect = overlay.getBoundingClientRect()
    const x = ((e.clientX - rect.left) / rect.width) * c.width
    const y = ((e.clientY - rect.top) / rect.height) * c.height
    return { x, y }
  }

// Insert placement and editing handlers on overlay wrapper
  function onOverlayPointerDown(e: React.PointerEvent) {
    // If handles/body consume the event, they will call onPointerDownHandle instead
    if (!pendingInsert) return
    e.preventDefault()
    ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)

const { x, y } = clientToCanvas(e)
    setInsertHover(null) // clear ghost on click start
    const color = penColor
    const stroke = thickness[0]

if (pendingInsert === "line" || pendingInsert === "arrow") {
      const initial: ActiveShape = { type: pendingInsert, x1: x, y1: y, x2: x, y2: y, color, thickness: stroke }
      setActiveShape(initial)
      // Engage rubber-banding by pretending we grabbed the "end" handle
      setDragState({ handle: "end", startX: x, startY: y, origin: initial })
      setPendingInsert(null)
      return
    }

// Box-based shapes: start at cursor and resize from SE
    const initialW = 1
    const initialH = 1
    const initial: ActiveShape = {
      type: pendingInsert,
      x,
      y,
      w: initialW,
      h: initialH,
      color,
      thickness: stroke,
    } as any
    setActiveShape(initial)
    setDragState({ handle: "se", startX: x, startY: y, origin: initial })
    setPendingInsert(null)
  }

function onPointerDownHandle(e: React.PointerEvent, handle: HandleId) {
    if (!activeShape) return
    e.preventDefault()
    ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
    const { x, y } = clientToCanvas(e)
    setDragState({ handle, startX: x, startY: y, origin: JSON.parse(JSON.stringify(activeShape)) })
  }

function onOverlayPointerMove(e: React.PointerEvent) {
    // If dragging/editing active shape, keep existing behavior
    if (activeShape && dragState) {
      const { x, y } = clientToCanvas(e)
      const dx = x - dragState.startX
      const dy = y - dragState.startY
      const minSize = 24

const origin = dragState.origin
      let next: ActiveShape = JSON.parse(JSON.stringify(activeShape))

if ("x" in origin) {
        const { x: ox, y: oy, w: ow, h: oh } = origin
        const applyRect = (nx: number, ny: number, nw: number, nh: number) => {
          nw = Math.max(minSize, nw)
          nh = Math.max(minSize, nh)
          next = { ...(activeShape as any), x: nx, y: ny, w: nw, h: nh }
        }
        switch (dragState.handle) {
          case "move":
            applyRect(ox + dx, oy + dy, ow, oh)
            break
          case "e":
            applyRect(ox, oy, ow + dx, oh)
            break
          case "s":
            applyRect(ox, oy, ow, oh + dy)
            break
          case "w":
            applyRect(ox + dx, oy, ow - dx, oh)
            break
          case "n":
            applyRect(ox, oy + dy, ow, oh - dy)
            break
          case "se":
            applyRect(ox, oy, ow + dx, oh + dy)
            break
          case "ne":
            applyRect(ox, oy + dy, ow + dx, oh - dy)
            break
          case "sw":
            applyRect(ox + dx, oy, ow - dx, oh + dy)
            break
          case "nw":
            applyRect(ox + dx, oy + dy, ow - dx, oh - dy)
            break
        }
      } else {
        const { x1, y1, x2, y2 } = origin
        if (dragState.handle === "start") {
          next = { ...(activeShape as any), x1: x1 + dx, y1: y1 + dy, x2, y2 }
        } else if (dragState.handle === "end") {
          next = { ...(activeShape as any), x1, y1, x2: x2 + dx, y2: y2 + dy }
        } else if (dragState.handle === "move") {
          next = { ...(activeShape as any), x1: x1 + dx, y1: y1 + dy, x2: x2 + dx, y2: y2 + dy }
        }
      }

setActiveShape(next)
      return
    }

// Ghost preview while in Insert Mode (no active shape yet)
    if (pendingInsert) {
      const { x, y } = clientToCanvas(e)
      setInsertHover({ x, y })
    }
  }

function onOverlayPointerLeave() {
    if (insertHover) setInsertHover(null)
  }

function onOverlayPointerUp(e: React.PointerEvent) {
    if (dragState) {
      try {
        ;(e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId)
      } catch {}
    }
    setDragState(null)
  }

// Place or cancel shape
  function placeActiveShape() {
    if (!activeShape) return
    if ("x" in activeShape) {
      const { x, y, w, h, color, thickness } = activeShape
      if (activeShape.type === "rect") pushShapePoints(rectPoints(x, y, w, h), color, thickness)
      else if (activeShape.type === "circle") {
        const r = Math.min(w, h) / 2
        pushShapePoints(circlePoints(x + w / 2, y + h / 2, r), color, thickness)
      } else if (activeShape.type === "triangle") {
        pushShapePoints(trianglePointsFromBox(x, y, w, h), color, thickness)
      } else if (activeShape.type === "graph") {
        pushShapePoints(graphPoints(x, y, w, h), color, thickness)
      }
    } else {
      const { x1, y1, x2, y2, color, thickness, type } = activeShape
      if (type === "line") pushShapePoints(linePoints(x1, y1, x2, y2, 120), color, thickness)
      if (type === "arrow") pushShapePoints(arrowRightPoints(x1, y1, x2, y2), color, thickness)
    }
    setActiveShape(null)
  }
  function cancelActiveShape() {
    setActiveShape(null)
    setDragState(null)
  }

// Render active shape overlay (SVG with handles)
  function renderActiveShape() {
    if (!activeShape) return null
    const c = canvasRef.current
    if (!c) return null

const stroke = activeShape.thickness
    const color = activeShape.color

const handleSize = 8
    const handle = (cx: number, cy: number, id: HandleId, cursor = "nwse-resize") => (
      <rect
        key={`h-${id}-${cx}-${cy}`}
        x={cx - handleSize / 2}
        y={cy - handleSize / 2}
        width={handleSize}
        height={handleSize}
        fill="#ffffff"
        stroke="#111827"
        strokeWidth={1}
        style={{ cursor }}
        onPointerDown={(e) => onPointerDownHandle(e, id)}
      />
    )

const bodyMoveArea = (x: number, y: number, w: number, h: number) => (
      <rect
        x={x}
        y={y}
        width={w}
        height={h}
        fill="transparent"
        style={{ cursor: "move" }}
        onPointerDown={(e) => onPointerDownHandle(e, "move")}
      />
    )

if ("x" in activeShape) {
      const { x, y, w, h } = activeShape
      const x2 = x + w
      const y2 = y + h
      const strokeProps = { stroke: color, strokeWidth: stroke, fill: "none" as const }

let shapeEl: React.ReactNode = null
      if (activeShape.type === "rect") shapeEl = <rect x={x} y={y} width={w} height={h} {...strokeProps} />
      if (activeShape.type === "circle") {
        const r = Math.min(w, h) / 2
        shapeEl = <circle cx={x + w / 2} cy={y + h / 2} r={r} {...strokeProps} />
      }
      if (activeShape.type === "triangle") {
        const size = Math.min(w, h)
        const cx = x + w / 2
        const cy = y + h / 2
        const hh = (Math.sqrt(3) / 2) * size
        const p1 = `${cx},${cy - (2 / 3) * hh}`
        const p2 = `${cx - size / 2},${cy + hh / 3}`
        const p3 = `${cx + size / 2},${cy + hh / 3}`
        shapeEl = <polyline points={`${p1} ${p2} ${p3} ${p1}`} {...strokeProps} />
      }
      if (activeShape.type === "graph") {
        const cx = x + w / 2
        const cy = y + h / 2
        shapeEl = (
          <g {...strokeProps}>
            <line x1={x} y1={cy} x2={x + w} y2={cy} />
            <line x1={cx} y1={y} x2={cx} y2={y + h} />
          </g>
        )
      }

return (
        <svg className="absolute inset-0" style={{ pointerEvents: "auto", touchAction: "none" }}>
          {/* Body for drag */}
          {bodyMoveArea(x, y, w, h)}
          {/* Shape */}
          {shapeEl}
          {/* Selection box */}
          <rect x={x} y={y} width={w} height={h} stroke="#3b82f6" strokeDasharray="4 4" fill="none" />
          {/* Handles with directional cursors */}
          {handle(x, y, "nw", "nwse-resize")}
          {handle(x + w / 2, y, "n", "ns-resize")}
          {handle(x2, y, "ne", "nesw-resize")}
          {handle(x2, y + h / 2, "e", "ew-resize")}
          {handle(x2, y2, "se", "nwse-resize")}
          {handle(x + w / 2, y2, "s", "ns-resize")}
          {handle(x, y2, "sw", "nesw-resize")}
          {handle(x, y + h / 2, "w", "ew-resize")}
        </svg>
      )
    } else {
      // line/arrow
      const { x1, y1, x2, y2 } = activeShape

const arrowHead = (() => {
        if (activeShape.type !== "arrow") return null
        const dx = x2 - x1
        const dy = y2 - y1
        const len = Math.hypot(dx, dy) || 1
        const ux = dx / len
        const uy = dy / len
        const headLen = 16
        const perpX = -uy
        const perpY = ux
        const hx = x2 - ux * headLen
        const hy = y2 - uy * headLen
        return (
          <>
            <line
              x1={x2}
              y1={y2}
              x2={hx + perpX * headLen * 0.6}
              y2={hy + perpY * headLen * 0.6}
              stroke={color}
              strokeWidth={stroke}
            />
            <line
              x1={x2}
              y1={y2}
              x2={hx - perpX * headLen * 0.6}
              y2={hy - perpY * headLen * 0.6}
              stroke={color}
              strokeWidth={stroke}
            />
          </>
        )
      })()

const handleCircle = (cx: number, cy: number, id: HandleId) => (
        <circle
          key={`l-${id}`}
          cx={cx}
          cy={cy}
          r={6}
          fill="#ffffff"
          stroke="#111827"
          strokeWidth={1}
          style={{ cursor: id === "move" ? "move" : "pointer" }}
          onPointerDown={(e) => onPointerDownHandle(e, id)}
        />
      )

// Bounding rect for move visualization
      const minX = Math.min(x1, x2)
      const minY = Math.min(y1, y2)
      const w = Math.abs(x2 - x1)
      const h = Math.abs(y2 - y1)

return (
        <svg className="absolute inset-0" style={{ pointerEvents: "auto", touchAction: "none" }}>
          {/* Move area */}
          <rect
            x={minX - 8}
            y={minY - 8}
            width={Math.max(16, w + 16)}
            height={Math.max(16, h + 16)}
            fill="transparent"
            style={{ cursor: "move" }}
            onPointerDown={(e) => onPointerDownHandle(e, "move")}
          />
          <line x1={x1} y1={y1} x2={x2} y2={y2} stroke={color} strokeWidth={stroke} />
          {arrowHead}
          {/* selection bounding */}
          <rect x={minX} y={minY} width={w} height={h} stroke="#3b82f6" strokeDasharray="4 4" fill="none" />
          {handleCircle(x1, y1, "start")}
          {handleCircle(x2, y2, "end")}
        </svg>
      )
    }
  }

function renderInsertPreview() {
    if (!pendingInsert || !insertHover) return null
    const c = canvasRef.current
    if (!c) return null

const color = penColor
    const stroke = Math.max(1, thickness[0])
    const alpha = 0.55
    const dash = "6 6"

// Default preview size for box-based shapes (centered at cursor)
    const W = 220
    const H = 160
    const x = insertHover.x - W / 2
    const y = insertHover.y - H / 2

if (
      pendingInsert === "rect" ||
      pendingInsert === "graph" ||
      pendingInsert === "triangle" ||
      pendingInsert === "circle"
    ) {
      return (
        <svg className="absolute inset-0 pointer-events-none">
          {pendingInsert === "rect" && (
            <>
              <rect
                x={x}
                y={y}
                width={W}
                height={H}
                stroke={color}
                strokeWidth={stroke}
                fill="none"
                strokeDasharray={dash}
                opacity={alpha}
              />
              <rect x={x} y={y} width={W} height={H} fill={color} opacity={0.08} />
            </>
          )}
          {pendingInsert === "circle" && (
            <>
              <circle
                cx={x + W / 2}
                cy={y + H / 2}
                r={Math.min(W, H) / 2}
                stroke={color}
                strokeWidth={stroke}
                fill="none"
                strokeDasharray={dash}
                opacity={alpha}
              />
              <circle cx={x + W / 2} cy={y + H / 2} r={Math.min(W, H) / 2} fill={color} opacity={0.08} />
            </>
          )}
          {pendingInsert === "triangle" && (
            <>
              {(() => {
                const size = Math.min(W, H)
                const cx = x + W / 2
                const cy = y + H / 2
                const hh = (Math.sqrt(3) / 2) * size
                const p1 = `${cx},${cy - (2 / 3) * hh}`
                const p2 = `${cx - size / 2},${cy + hh / 3}`
                const p3 = `${cx + size / 2},${cy + hh / 3}`
                return (
                  <>
                    <polyline
                      points={`${p1} ${p2} ${p3} ${p1}`}
                      stroke={color}
                      strokeWidth={stroke}
                      fill="none"
                      strokeDasharray={dash}
                      opacity={alpha}
                    />
                    <polygon points={`${p1} ${p2} ${p3}`} fill={color} opacity={0.08} />
                  </>
                )
              })()}
            </>
          )}
          {pendingInsert === "graph" && (
            <>
              <line
                x1={x}
                y1={y + H / 2}
                x2={x + W}
                y2={y + H / 2}
                stroke={color}
                strokeWidth={stroke}
                strokeDasharray={dash}
                opacity={alpha}
              />
              <line
                x1={x + W / 2}
                y1={y}
                x2={x + W / 2}
                y2={y + H}
                stroke={color}
                strokeWidth={stroke}
                strokeDasharray={dash}
                opacity={alpha}
              />
            </>
          )}
        </svg>
      )
    }

// Lines and arrows: show a short rubber-band example centered at cursor
    if (pendingInsert === "line" || pendingInsert === "arrow") {
      const len = 120
      const x1 = insertHover.x - len / 2
      const y1 = insertHover.y
      const x2 = insertHover.x + len / 2
      const y2 = insertHover.y
      const dx = x2 - x1
      const dy = y2 - y1
      const L = Math.hypot(dx, dy) || 1
      const ux = dx / L
      const uy = dy / L
      const head = 14
      const hx = x2 - ux * head
      const hy = y2 - uy * head
      const perpX = -uy
      const perpY = ux

return (
        <svg className="absolute inset-0 pointer-events-none">
          <line
            x1={x1}
            y1={y1}
            x2={x2}
            y2={y2}
            stroke={color}
            strokeWidth={stroke}
            strokeDasharray={dash}
            opacity={alpha}
          />
          {pendingInsert === "arrow" && (
            <>
              <line
                x1={x2}
                y1={y2}
                x2={hx + perpX * head * 0.6}
                y2={hy + perpY * head * 0.6}
                stroke={color}
                strokeWidth={stroke}
                strokeDasharray={dash}
                opacity={alpha}
              />
              <line
                x1={x2}
                y1={y2}
                x2={hx - perpX * head * 0.6}
                y2={hy - perpY * head * 0.6}
                stroke={color}
                strokeWidth={stroke}
                strokeDasharray={dash}
                opacity={alpha}
              />
            </>
          )}
        </svg>
      )
    }

return null
  }

// Place/cancel bar for active shape
  const ShapeActionBar = activeShape ? (
    <div className="fixed bottom-20 left-1/2 -translate-x-1/2 z-50">
      <div className="flex gap-2 bg-white/95 backdrop-blur-sm border rounded-full shadow-lg p-2">
        <Button size="sm" className="bg-blue-600 hover:bg-blue-700 text-white" onClick={placeActiveShape}>
          <Check className="w-4 h-4 mr-2" />
          Place Shape
        </Button>
        <Button size="sm" variant="outline" onClick={cancelActiveShape}>
          <X className="w-4 h-4 mr-2" />
          Cancel
        </Button>
      </div>
    </div>
  ) : null

// Insert hint banner
  const InsertHint = pendingInsert ? (
    <div className="fixed bottom-20 left-1/2 -translate-x-1/2 z-50">
      <div className="bg-gray-900 text-white text-sm px-4 py-2 rounded-full shadow-lg">
        {`Insert ${pendingInsert.toUpperCase()}: `}
        <span className="opacity-80">
          {pendingInsert === "line" || pendingInsert === "arrow"
            ? "Click to set start, drag to set end. ESC to cancel."
            : "Click and drag to size from cursor. ESC to cancel."}
        </span>
      </div>
    </div>
  ) : null

return (
    <div className={`min-h-screen ${isFullscreen ? "bg-white" : "bg-gray-50"}`}>
      {!isFullscreen && (
        <div className="sticky top-0 z-50 bg-white border-b border-gray-200 shadow-sm">
          <div className="px-4 py-3">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-4">
                <Link href="/">
                  <Button variant="ghost" size="sm">
                    <ArrowLeft className="w-4 h-4 mr-2" />
                    Back
                  </Button>
                </Link>
                <div className="flex items-center gap-3">
                  <span className="text-2xl">
                    {(
                      {
                        physics: "⚛️",
                        chemistry: "🧪",
                        zoology: "🦋",
                        botany: "🌱",
                      } as any
                    )[subject] || "📚"}
                  </span>
                  <div>
                    <h1 className="font-bold text-gray-900">{className.toUpperCase()}</h1>
                    <h2 className="text-sm font-semibold text-gray-700">
                      {subject.charAt(0).toUpperCase() + subject.slice(1)}
                    </h2>
                  </div>
                </div>
                <div className="flex items-center gap-2 text-sm text-gray-600 bg-gray-100 px-3 py-1 rounded-full">
                  <Calendar className="w-4 h-4" />
                  <span>{formatDate(selectedDate)}</span>
                </div>
              </div>

<div className="flex items-center gap-3">
                {tags.length > 0 && (
                  <div className="hidden md:flex items-center gap-2">
                    {tags.slice(0, 3).map((t) => (
                      <Badge
                        key={t.tag}
                        variant="secondary"
                        className="cursor-pointer"
                        style={{ backgroundColor: t.color + "20", color: t.color, borderColor: t.color }}
                        onClick={() => removeTag(t.tag)}
                      >
                        {t.tag}
                        <X className="w-3 h-3 ml-1" />
                      </Badge>
                    ))}
                    {tags.length > 3 && (
                      <Badge variant="outline" className="text-xs">
                        +{tags.length - 3} more
                      </Badge>
                    )}
                  </div>
                )}

<Dialog open={isTagDialogOpen} onOpenChange={setIsTagDialogOpen}>
                  <DialogTrigger asChild>
                    <Button variant="outline" size="sm" className="bg-transparent">
                      <TagIcon className="w-4 h-4 mr-2" />
                      Manage Tags
                      {tags.length > 0 && (
                        <Badge variant="secondary" className="ml-2 h-5 w-5 p-0 text-xs">
                          {tags.length}
                        </Badge>
                      )}
                    </Button>
                  </DialogTrigger>
                  <DialogContent className="max-w-2xl max-h-[80vh] overflow-hidden">
                    <DialogHeader>
                      <DialogTitle className="flex items-center gap-2">
                        <Hash className="w-5 h-5" />
                        <span>Tag Management</span>
                      </DialogTitle>
                      <DialogDescription>
                        Organize for{" "}
                        <span className="font-semibold">
                          {className} - {subject.charAt(0).toUpperCase() + subject.slice(1)}
                        </span>{" "}
                        on {formatDate(selectedDate)}
                      </DialogDescription>
                    </DialogHeader>

<div className="flex items-center gap-2 mb-3">
                      <Search className="w-4 h-4 text-gray-500" />
                      <Input
                        placeholder="Search tags..."
                        value={tagSearch}
                        onChange={(e) => setTagSearch(e.target.value)}
                      />
                    </div>

<Tabs defaultValue="current" className="w-full">
                      <TabsList className="grid w-full grid-cols-4">
                        <TabsTrigger value="current">Current ({tags.length})</TabsTrigger>
                        <TabsTrigger value="create">Create New</TabsTrigger>
                        <TabsTrigger value="existing">From Subject ({allTags.length})</TabsTrigger>
                        <TabsTrigger value="suggestions">Suggestions</TabsTrigger>
                      </TabsList>

<TabsContent value="current">
                        <div className="flex items-center justify-between mb-2">
                          <h4 className="font-medium">Tags on this whiteboard</h4>
                          {isLoadingTags && <div className="text-sm text-gray-500">Loading...</div>}
                        </div>
                        <ScrollArea className="h-48">
                          {tags.length ? (
                            <div className="flex flex-wrap gap-2">
                              {tags
                                .filter((t) => t.tag.toLowerCase().includes(tagSearch.toLowerCase()))
                                .map((t) => (
                                  <Badge
                                    key={t.tag}
                                    variant="secondary"
                                    className="cursor-pointer text-sm py-1 px-3"
                                    style={{ backgroundColor: t.color + "20", color: t.color, borderColor: t.color }}
                                    onClick={() => removeTag(t.tag)}
                                  >
                                    {t.tag}
                                    <X className="w-3 h-3 ml-2" />
                                  </Badge>
                                ))}
                            </div>
                          ) : (
                            <div className="text-center py-8 text-gray-500">
                              <TagIcon className="w-8 h-8 mx-auto mb-2 opacity-50" />
                              <p>No tags added yet</p>
                            </div>
                          )}
                        </ScrollArea>
                      </TabsContent>

<TabsContent value="create">
                        <div className="space-y-4">
                          <div>
                            <label className="text-sm font-medium text-gray-700 mb-2 block">Tag Name</label>
                            <Input
                              placeholder="Enter tag name"
                              value={newTag}
                              onChange={(e) => setNewTag(e.target.value)}
                              onKeyDown={(e) => e.key === "Enter" && addNewTag()}
                            />
                          </div>
                          <div>
                            <label className="text-sm font-medium text-gray-700 mb-2 block">Choose Color</label>
                            <div className="flex flex-wrap gap-2">
                              {tagColors.map((c) => (
                                <button
                                  key={c}
                                  onClick={() => setSelectedColor(c)}
                                  className={`w-8 h-8 rounded-full border-2 transition-all hover:scale-110 ${selectedColor === c ? "border-gray-800 scale-110 shadow-lg" : "border-gray-300 hover:border-gray-400"}`}
                                  style={{ backgroundColor: c }}
                                  title={c}
                                />
                              ))}
                            </div>
                          </div>
                          <Button onClick={addNewTag} disabled={!newTag.trim()} className="w-full">
                            <Plus className="w-4 h-4 mr-2" />
                            Create & Add Tag
                          </Button>
                        </div>
                      </TabsContent>

<TabsContent value="existing">
                        <ScrollArea className="h-48">
                          {allTags.length ? (
                            <div className="space-y-2">
                              {allTags
                                .filter((t) => t.tag.toLowerCase().includes(tagSearch.toLowerCase()))
                                .filter((t) => !tags.some((ct) => ct.tag === t.tag))
                                .map((t) => (
                                  <div
                                    key={`${t.tag}-${t.color}`}
                                    className="flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 border"
                                  >
                                    <div className="flex items-center gap-3">
                                      <div className="w-3 h-3 rounded-full" style={{ backgroundColor: t.color }} />
                                      <span className="font-medium">{t.tag}</span>
                                      <div className="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded">
                                        Used {t.usage_count} times
                                      </div>
                                    </div>
                                    <Button size="sm" variant="outline" onClick={() => addExistingTag(t.tag, t.color)}>
                                      <Plus className="w-3 h-3 mr-1" />
                                      Add
                                    </Button>
                                  </div>
                                ))}
                            </div>
                          ) : (
                            <div className="text-center py-8 text-gray-500">
                              <TagIcon className="w-8 h-8 mx-auto mb-2 opacity-50" />
                              <p>No existing tags for this subject</p>
                            </div>
                          )}
                        </ScrollArea>
                      </TabsContent>

<TabsContent value="suggestions">
                        <ScrollArea className="h-48">
                          <div className="grid grid-cols-2 gap-2">
                            {suggestions
                              .filter((s: string) => s.toLowerCase().includes(tagSearch.toLowerCase()))
                              .filter((s: string) => !tags.some((t) => t.tag === s))
                              .map((s: string) => (
                                <Button
                                  key={s}
                                  variant="outline"
                                  size="sm"
                                  onClick={() => addSuggestedTag(s)}
                                  className="justify-start h-auto py-2"
                                >
                                  <Plus className="w-3 h-3 mr-2" />
                                  <span className="truncate">{s}</span>
                                </Button>
                              ))}
                          </div>
                        </ScrollArea>
                      </TabsContent>
                    </Tabs>

<Separator />
                    <DialogFooter className="flex items-center justify-between">
                      <div className="text-sm text-gray-500">{tags.length} tag(s) on this whiteboard</div>
                      <Button onClick={() => setIsTagDialogOpen(false)}>Done</Button>
                    </DialogFooter>
                  </DialogContent>
                </Dialog>

<Link href={`/whiteboard/${classSlug}/${subject}/${prevDateStr}`} prefetch>
                  <Button variant="outline" size="sm" className="bg-transparent">
                    Yesterday
                  </Button>
                </Link>

<Link href={`/whiteboard/${classSlug}/${subject}/${todayStr}`} prefetch>
                  <Button variant="default" size="sm" className="shadow-sm">
                    Today
                  </Button>
                </Link>

<Button
                  onClick={handleManualSave}
                  disabled={!hasUnsavedChanges || isSaving || !isOnline}
                  className={`${hasUnsavedChanges ? "bg-blue-600 hover:bg-blue-700 text-white shadow-lg" : "bg-gray-100 text-gray-400"} transition-all duration-200`}
                  size="sm"
                >
                  {isSaving ? (
                    <>
                      <Cloud className="w-4 h-4 mr-2 animate-spin" />
                      Saving...
                    </>
                  ) : hasUnsavedChanges ? (
                    <>
                      <Save className="w-4 h-4 mr-2" />
                      Save Changes
                    </>
                  ) : (
                    <>
                      <Save className="w-4 h-4 mr-2" />
                      Saved
                    </>
                  )}
                </Button>

<div className="flex items-center gap-2">
                  <div
                    className={`flex items-center gap-1 text-xs px-2 py-1 rounded-full ${isOnline ? "text-green-600 bg-green-50" : "text-red-600 bg-red-50"}`}
                  >
                    {isOnline ? <Wifi className="w-3 h-3" /> : <WifiOff className="w-3 h-3" />}
                  </div>
                  {lastSaved && !hasUnsavedChanges && (
                    <div className="flex items-center gap-1 text-xs text-green-600 bg-green-50 px-2 py-1 rounded-full">
                      <Save className="w-3 h-3" />
                      <span className="hidden sm:inline">
                        Saved {lastSaved.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
                      </span>
                    </div>
                  )}
                </div>

<Button variant="outline" size="sm" onClick={() => setIsFullscreen(!isFullscreen)}>
                  {isFullscreen ? <Minimize2 className="w-4 h-4" /> : <Maximize2 className="w-4 h-4" />}
                </Button>
              </div>
            </div>
          </div>
        </div>
      )}

<div className="w-full overflow-auto" style={{ height: isFullscreen ? "100vh" : "calc(100vh - 140px)" }}>
        <Card className="m-4 shadow-sm border-0">
          <CardContent className="p-0">
            <div className="relative">
              {/* overlayRef: used for coordinate mapping and pointer capture */}
              <div
                ref={overlayRef}
                className="absolute inset-0"
                aria-hidden
                style={{
                  pointerEvents: activeShape || pendingInsert ? "auto" : "none",
                  touchAction: "none",
                  cursor: pendingInsert ? "crosshair" : "default",
                }}
                onPointerDown={onOverlayPointerDown}
                onPointerMove={onOverlayPointerMove}
                onPointerUp={onOverlayPointerUp}
                onPointerLeave={onOverlayPointerLeave}
              />
              {/* Insert ghost preview (follows cursor) */}
              {renderInsertPreview()}
              <canvas
                ref={canvasRef}
                width={1400}
                height={canvasHeight}
                className={`w-full touch-none ${currentTool === "pointer" ? "cursor-grab" : "cursor-crosshair"}`}
                style={{ minHeight: "calc(100vh - 200px)", touchAction: "none", backgroundColor: pageColor }}
              />
              {overlayType !== "none" && (
                <div
                  aria-hidden="true"
                  className="pointer-events-none absolute inset-0"
                  style={{ ...overlayStyle, backgroundSize: "auto", backgroundPosition: "left top" }}
                />
              )}
              {/* Active shape overlay with handles (SVG) */}
              <div className="absolute inset-0" style={{ pointerEvents: activeShape ? "auto" : "none" }}>
                {renderActiveShape()}
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Bottom Toolbar */}
      <div className="fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-gray-200 shadow-lg">
        <div className="px-4 py-3">
          <div className="flex items-center justify-between">
            {/* Tools */}
            <div className="flex items-center gap-2">
              <div className="flex items-center bg-gray-100 rounded-lg p-1">
                {[
                  { tool: "pointer", icon: Hand, label: "Move" },
                  { tool: "pen", icon: Pen, label: "Pen" },
                  { tool: "highlighter", icon: Highlighter, label: "Highlight" },
                  { tool: "eraser", icon: Eraser, label: "Eraser" },
                ].map(({ tool, icon: Icon, label }) => (
                  <Button
                    key={tool}
                    variant={currentTool === (tool as any) ? "default" : "ghost"}
                    size="sm"
                    onClick={() => setCurrentTool(tool as any)}
                    className="px-3"
                    disabled={!!activeShape || !!pendingInsert}
                  >
                    <Icon className="w-4 h-4" />
                    <span className="hidden sm:inline ml-2 text-xs">{label}</span>
                  </Button>
                ))}
              </div>

{currentTool !== "eraser" && currentTool !== "pointer" && (
                <div className="flex items-center gap-3 bg-gray-100 rounded-lg px-3 py-2">
                  <div className="flex gap-1">
                    {(currentTool === "pen" ? penColors : highlighterColors).slice(0, 4).map((c) => (
                      <button
                        key={c}
                        onClick={() => (currentTool === "pen" ? setPenColor(c) : setHighlighterColor(c))}
                        className={`w-6 h-6 rounded-full border-2 transition-all hover:scale-110 ${(currentTool === "pen" ? penColor : highlighterColor) === c ? "border-gray-800 scale-110" : "border-gray-300"}`}
                        style={{ backgroundColor: c }}
                        title={c}
                        disabled={!!activeShape || !!pendingInsert}
                      />
                    ))}
                  </div>
                  <div className="flex items-center gap-2">
                    <span className="text-xs font-medium">{thickness[0]}px</span>
                    <Slider
                      value={thickness}
                      onValueChange={setThickness}
                      max={currentTool === "eraser" ? 50 : 20}
                      min={1}
                      step={1}
                      className="w-16"
                      disabled={!!activeShape || !!pendingInsert}
                    />
                  </div>
                </div>
              )}
            </div>

{/* Actions + Insert + More */}
            <div className="flex items-center gap-2">
              {/* Insert shapes/graph */}
              {!activeShape && (
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button variant="outline" size="sm" className="px-2 bg-transparent" disabled={!!pendingInsert}>
                      <Plus className="w-4 h-4 mr-2" />
                      <span className="hidden sm:inline">Insert</span>
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end" className="w-56">
                    <DropdownMenuLabel>Insert Shape (click to place)</DropdownMenuLabel>
                    <DropdownMenuItem onSelect={() => beginInsert("rect")}>
                      <Square className="w-4 h-4 mr-2" />
                      Rectangle
                    </DropdownMenuItem>
                    <DropdownMenuItem onSelect={() => beginInsert("circle")}>
                      <CircleIcon className="w-4 h-4 mr-2" />
                      Circle
                    </DropdownMenuItem>
                    <DropdownMenuItem onSelect={() => beginInsert("line")}>
                      <Minus className="w-4 h-4 mr-2" />
                      Line
                    </DropdownMenuItem>
                    <DropdownMenuItem onSelect={() => beginInsert("triangle")}>
                      <TriangleIcon className="w-4 h-4 mr-2" />
                      Triangle
                    </DropdownMenuItem>
                    <DropdownMenuItem onSelect={() => beginInsert("arrow")}>
                      <ArrowRightIcon className="w-4 h-4 mr-2" />
                      Arrow
                    </DropdownMenuItem>
                    <DropdownMenuSeparator />
                    <DropdownMenuLabel>Graph</DropdownMenuLabel>
                    <DropdownMenuItem onSelect={() => beginInsert("graph")}>
                      <LineChart className="w-4 h-4 mr-2" />
                      Axes (click and drag to size)
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              )}

{/* Shape editing controls */}
              {activeShape && (
                <div className="flex items-center gap-2">
                  <Button size="sm" className="bg-blue-600 hover:bg-blue-700 text-white" onClick={placeActiveShape}>
                    <Check className="w-4 h-4 mr-2" />
                    Place Shape
                  </Button>
                  <Button size="sm" variant="outline" onClick={cancelActiveShape}>
                    <X className="w-4 h-4 mr-2" />
                    Cancel
                  </Button>
                </div>
              )}

<Button variant="outline" size="sm" onClick={undo} disabled={actions.length === 0 || !!activeShape}>
                <Undo className="w-4 h-4" />
                <span className="hidden sm:inline ml-2">Undo</span>
              </Button>
              <Button variant="outline" size="sm" onClick={redo} disabled={redoStack.length === 0 || !!activeShape}>
                <Redo className="w-4 h-4" />
                <span className="hidden sm:inline ml-2">Redo</span>
              </Button>
              <Button variant="destructive" size="sm" onClick={clearCanvas} disabled={!!activeShape}>
                <Trash2 className="w-4 h-4" />
                <span className="hidden sm:inline ml-2">Clear</span>
              </Button>

{/* Three-dot: background format */}
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="outline" size="sm" className="px-2 bg-transparent">
                    <MoreVertical className="w-4 h-4" />
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end" className="w-80">
                  <DropdownMenuLabel>Format Background</DropdownMenuLabel>
                  <DropdownMenuSeparator />

<DropdownMenuSub>
                    <DropdownMenuSubTrigger>Rule Lines</DropdownMenuSubTrigger>
                    <DropdownMenuSubContent className="w-80">
                      <DropdownMenuRadioGroup
                        value={overlayType}
                        onValueChange={(v) => onPickOverlay(v as OverlayType)}
                      >
                        <DropdownMenuRadioItem value="none">None</DropdownMenuRadioItem>
                        <DropdownMenuRadioItem value="ruled-narrow">Narrow</DropdownMenuRadioItem>
                        <DropdownMenuRadioItem value="ruled-medium">Medium</DropdownMenuRadioItem>
                        <DropdownMenuRadioItem value="ruled-wide">Wide</DropdownMenuRadioItem>
                        <DropdownMenuRadioItem value="ruled-medium-margin">Medium + Margin</DropdownMenuRadioItem>
                      </DropdownMenuRadioGroup>
                    </DropdownMenuSubContent>
                  </DropdownMenuSub>

<DropdownMenuSub>
                    <DropdownMenuSubTrigger>Grid Lines</DropdownMenuSubTrigger>
                    <DropdownMenuSubContent className="w-80">
                      <DropdownMenuRadioGroup
                        value={overlayType}
                        onValueChange={(v) => onPickOverlay(v as OverlayType)}
                      >
                        <DropdownMenuRadioItem value="none">None</DropdownMenuRadioItem>
                        <DropdownMenuRadioItem value="grid-small">Small</DropdownMenuRadioItem>
                        <DropdownMenuRadioItem value="grid-medium">Medium</DropdownMenuRadioItem>
                        <DropdownMenuRadioItem value="grid-large">Large</DropdownMenuRadioItem>
                      </DropdownMenuRadioGroup>
                    </DropdownMenuSubContent>
                  </DropdownMenuSub>

<DropdownMenuSub>
                    <DropdownMenuSubTrigger>Rule Line Color</DropdownMenuSubTrigger>
                    <DropdownMenuSubContent className="w-72">
                      <div className="p-2 grid grid-cols-9 gap-2">
                        {ruleColors.map((c) => (
                          <button
                            key={c}
                            onClick={() => onPickRuleColor(c)}
                            className={`h-6 w-6 rounded border ${ruleColor === c ? "ring-2 ring-offset-2 ring-gray-400" : "border-gray-300"}`}
                            style={{ backgroundColor: c }}
                            title={c}
                          />
                        ))}
                      </div>
                    </DropdownMenuSubContent>
                  </DropdownMenuSub>

<DropdownMenuSub>
                    <DropdownMenuSubTrigger>Page Color</DropdownMenuSubTrigger>
                    <DropdownMenuSubContent className="w-72">
                      <div className="p-2 grid grid-cols-9 gap-2">
                        {pageColors.map((c) => (
                          <button
                            key={c}
                            onClick={() => onPickPageColor(c)}
                            className={`h-6 w-6 rounded border ${pageColor === c ? "ring-2 ring-offset-2 ring-gray-400" : "border-gray-300"}`}
                            style={{ backgroundColor: c }}
                            title={c === "#ffffff" ? "No Color" : c === "#000000" ? "Black" : c}
                          />
                        ))}
                      </div>
                      <div className="px-2 pb-2 text-xs text-gray-500">
                        {pageColor === "#ffffff"
                          ? "No Color"
                          : pageColor.toLowerCase() === "#000000"
                            ? "Black"
                            : pageColor}
                      </div>
                    </DropdownMenuSubContent>
                  </DropdownMenuSub>

<DropdownMenuSeparator />
                  <DropdownMenuCheckboxItem
                    checked={rememberDefault}
                    onCheckedChange={(v) => onToggleRemember(Boolean(v))}
                  >
                    Remember as default for this subject
                  </DropdownMenuCheckboxItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </div>
          </div>
        </div>
      </div>

{/* Action and hint overlays */}
      {ShapeActionBar}
      {InsertHint}

{isFullscreen && (
        <Button variant="outline" onClick={() => setIsFullscreen(false)} className="fixed top-4 right-4 z-50">
          <Minimize2 className="w-4 h-4 mr-2" />
          Exit Fullscreen
        </Button>
      )}

{saveError && (
        <div className="fixed top-20 right-4 z-50 bg-red-50 border border-red-200 rounded-lg p-4 shadow-lg max-w-sm">
          <div className="flex items-start gap-3">
            <AlertCircle className="w-5 h-5 text-red-600 mt-0.5" />
            <div>
              <h4 className="text-sm font-medium text-red-800">Save Failed</h4>
              <p className="text-sm text-red-600 mt-1">{saveError}</p>
              <Button
                size="sm"
                variant="outline"
                onClick={() => setSaveError(null)}
                className="mt-2 text-red-600 border-red-200 hover:bg-red-50"
              >
                Dismiss
              </Button>
            </div>
          </div>
        </div>
      )}

<DrawingDebug
        isDrawing={isDrawing}
        currentTool={currentTool}
        currentAction={null}
        actions={actions}
        canvasRef={canvasRef}
      />
      <DrawingTest />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/api/whiteboard/[class]/[subject]/[date]/route.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { NextResponse, type NextRequest } from "next/server"
import { getSql, ensureSchema, withRetry, type WhiteboardRow, type DrawingAction } from "@/lib/neon"

function normalizeClassSlugToName(raw: string) {
  try {
    return decodeURIComponent(raw).replace(/-/g, " ")
  } catch {
    return raw.replace(/-/g, " ")
  }
}

export async function GET(_req: NextRequest, { params }: { params: { class: string; subject: string; date: string } }) {
  try {
    await ensureSchema()
    const sql = getSql()

const className = normalizeClassSlugToName(params.class)
    const subject = params.subject
    const date = params.date

// Try existing
    const existing = await withRetry(
      () => sql<WhiteboardRow[]>`
        SELECT id, class_name, subject, date::text, drawing_data, stroke_count, created_at::text, updated_at::text
        FROM public.whiteboard_data
        WHERE class_name = ${className} AND subject = ${subject} AND date = ${date}::date
        LIMIT 1;
      `,
      "whiteboard.selectExisting",
      4,
    )
    if (existing.length > 0) {
      return NextResponse.json(existing[0])
    }

// Create if not exists
    const inserted = await withRetry(
      () => sql<WhiteboardRow[]>`
        INSERT INTO public.whiteboard_data (class_name, subject, date, drawing_data, stroke_count)
        VALUES (${className}, ${subject}, ${date}::date, '[]'::jsonb, 0)
        ON CONFLICT (class_name, subject, date) DO NOTHING
        RETURNING id, class_name, subject, date::text, drawing_data, stroke_count, created_at::text, updated_at::text;
      `,
      "whiteboard.insertIfMissing",
      4,
    )
    if (inserted.length > 0) {
      return NextResponse.json(inserted[0])
    }

// Race: fetch again
    const again = await withRetry(
      () => sql<WhiteboardRow[]>`
        SELECT id, class_name, subject, date::text, drawing_data, stroke_count, created_at::text, updated_at::text
        FROM public.whiteboard_data
        WHERE class_name = ${className} AND subject = ${subject} AND date = ${date}::date
        LIMIT 1;
      `,
      "whiteboard.selectAfterInsert",
      4,
    )
    if (again.length > 0) {
      return NextResponse.json(again[0])
    }

return NextResponse.json({ error: "Not found" }, { status: 404 })
  } catch (err: any) {
    const msg = String(err?.message || err || "")
    // Return a proper JSON response for rate limits instead of throwing
    if (msg.toLowerCase().includes("too many") || msg.includes("429")) {
      console.warn("GET /api/whiteboard rate-limited:", msg)
      return NextResponse.json({ error: "rate_limited", message: msg }, { status: 429 })
    }
    console.error("GET /api/whiteboard error:", err)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

export async function POST(req: NextRequest, { params }: { params: { class: string; subject: string; date: string } }) {
  try {
    await ensureSchema()
    const sql = getSql()

const className = normalizeClassSlugToName(params.class)
    const subject = params.subject
    const date = params.date

// Safely parse body
    let body: any = {}
    try {
      body = await req.json()
    } catch {
      // Fallback for non-JSON bodies
      body = {}
    }
    const actions: DrawingAction[] = Array.isArray(body?.actions) ? body.actions : []
    const strokeCount = actions.length

const upserted = await withRetry(
      () => sql<WhiteboardRow[]>`
        INSERT INTO public.whiteboard_data (class_name, subject, date, drawing_data, stroke_count, updated_at)
        VALUES (${className}, ${subject}, ${date}::date, ${JSON.stringify(actions)}::jsonb, ${strokeCount}, now())
        ON CONFLICT (class_name, subject, date)
        DO UPDATE SET
          drawing_data = EXCLUDED.drawing_data,
          stroke_count = EXCLUDED.stroke_count,
          updated_at = now()
        RETURNING id, class_name, subject, date::text, drawing_data, stroke_count, created_at::text, updated_at::text;
      `,
      "whiteboard.upsert",
      4,
    )

if (upserted.length === 0) {
      return NextResponse.json({ error: "Failed to save" }, { status: 500 })
    }

return NextResponse.json({ success: true, data: upserted[0] })
  } catch (err: any) {
    const msg = String(err?.message || err || "")
    if (msg.toLowerCase().includes("too many") || msg.includes("429")) {
      console.warn("POST /api/whiteboard rate-limited:", msg)
      return NextResponse.json({ error: "rate_limited", message: msg }, { status: 429 })
    }
    console.error("POST /api/whiteboard error:", err)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/notes/[class]/[subject]/page.tsx" isDeleted="true" isEdit="true"
...deleted...
[V0_FILE]typescriptreact:file="app/notes/[class]/[date]/page.tsx" isDeleted="true" isEdit="true"
...deleted...
[V0_FILE]typescriptreact:file="app/notes/[class]/subject/[subject]/page.tsx" isEdit="true"
"use client"

import { useState, useEffect, useRef } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Textarea } from "@/components/ui/textarea"
import { Calendar, PenTool, Type, Save, ArrowLeft, CalendarDays } from "lucide-react"
import Link from "next/link"
import { useParams } from "next/navigation"

interface Note {
  id: string
  date: string
  content: string
  drawings: string
  type: "text" | "drawing"
}

export default function NotesPage() {
  const params = useParams()
  const className = (params.class as string)?.replace("-", " ")
  const subject = params.subject as string

const [currentView, setCurrentView] = useState<"notes" | "calendar">("notes")
  const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split("T")[0])
  const [notes, setNotes] = useState<Note[]>([])
  const [currentNote, setCurrentNote] = useState("")
  const [isDrawing, setIsDrawing] = useState(false)
  const [lastSaved, setLastSaved] = useState<Date | null>(null)

const canvasRef = useRef<HTMLCanvasElement>(null)
  const [isDrawingMode, setIsDrawingMode] = useState(false)

// Storage key for this specific class-subject combination
  const storageKey = `notes-${className}-${subject}`

// Load notes from localStorage
  useEffect(() => {
    const savedNotes = localStorage.getItem(storageKey)
    if (savedNotes) {
      setNotes(JSON.parse(savedNotes))
    }
  }, [storageKey])

// Auto-save functionality
  useEffect(() => {
    const saveTimer = setTimeout(() => {
      if (notes.length > 0) {
        localStorage.setItem(storageKey, JSON.stringify(notes))
        setLastSaved(new Date())
      }
    }, 1000)

return () => clearTimeout(saveTimer)
  }, [notes, storageKey])

// Canvas drawing functionality
  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

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

let isDrawing = false
    let lastX = 0
    let lastY = 0

const startDrawing = (e: MouseEvent | TouchEvent) => {
      isDrawing = true
      const rect = canvas.getBoundingClientRect()
      const clientX = "touches" in e ? e.touches[0].clientX : e.clientX
      const clientY = "touches" in e ? e.touches[0].clientY : e.clientY
      lastX = clientX - rect.left
      lastY = clientY - rect.top
    }

const draw = (e: MouseEvent | TouchEvent) => {
      if (!isDrawing) return

const rect = canvas.getBoundingClientRect()
      const clientX = "touches" in e ? e.touches[0].clientX : e.clientX
      const clientY = "touches" in e ? e.touches[0].clientY : e.clientY
      const currentX = clientX - rect.left
      const currentY = clientY - rect.top

ctx.beginPath()
      ctx.moveTo(lastX, lastY)
      ctx.lineTo(currentX, currentY)
      ctx.strokeStyle = "#2563eb"
      ctx.lineWidth = 2
      ctx.lineCap = "round"
      ctx.stroke()

lastX = currentX
      lastY = currentY
    }

const stopDrawing = () => {
      if (isDrawing) {
        isDrawing = false
        saveDrawing()
      }
    }

const saveDrawing = () => {
      const drawingData = canvas.toDataURL()
      const existingNoteIndex = notes.findIndex((note) => note.date === selectedDate && note.type === "drawing")

if (existingNoteIndex >= 0) {
        const updatedNotes = [...notes]
        updatedNotes[existingNoteIndex].drawings = drawingData
        setNotes(updatedNotes)
      } else {
        const newNote: Note = {
          id: Date.now().toString(),
          date: selectedDate,
          content: "",
          drawings: drawingData,
          type: "drawing",
        }
        setNotes((prev) => [...prev, newNote])
      }
    }

if (isDrawingMode) {
      canvas.addEventListener("mousedown", startDrawing)
      canvas.addEventListener("mousemove", draw)
      canvas.addEventListener("mouseup", stopDrawing)
      canvas.addEventListener("touchstart", startDrawing)
      canvas.addEventListener("touchmove", draw)
      canvas.addEventListener("touchend", stopDrawing)
    }

const saveTextNote = () => {
    if (!currentNote.trim()) return

const existingNoteIndex = notes.findIndex((note) => note.date === selectedDate && note.type === "text")

if (existingNoteIndex >= 0) {
      const updatedNotes = [...notes]
      updatedNotes[existingNoteIndex].content = currentNote
      setNotes(updatedNotes)
    } else {
      const newNote: Note = {
        id: Date.now().toString(),
        date: selectedDate,
        content: currentNote,
        drawings: "",
        type: "text",
      }
      setNotes((prev) => [...prev, newNote])
    }
    setCurrentNote("")
  }

const clearCanvas = () => {
    const canvas = canvasRef.current
    if (canvas) {
      const ctx = canvas.getContext("2d")
      ctx?.clearRect(0, 0, canvas.width, canvas.height)
    }
  }

// Get notes for selected date
  const getNotesForDate = (date: string) => {
    return notes.filter((note) => note.date === date)
  }

// Get unique dates with notes
  const getDatesWithNotes = () => {
    const dates = [...new Set(notes.map((note) => note.date))]
    return dates.sort().reverse()
  }

const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString("en-US", {
      weekday: "long",
      year: "numeric",
      month: "long",
      day: "numeric",
    })
  }

return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-4">
      <div className="max-w-7xl mx-auto">
        {/* Header */}
        <div className="mb-6">
          <div className="flex items-center justify-between mb-4">
            <Link href="/">
              <Button variant="outline" className="flex items-center space-x-2 bg-transparent">
                <ArrowLeft className="w-4 h-4" />
                <span>Back to Home</span>
              </Button>
            </Link>
            <div className="flex items-center space-x-4">
              <Button
                variant={currentView === "notes" ? "default" : "outline"}
                onClick={() => setCurrentView("notes")}
                className="flex items-center space-x-2"
              >
                <PenTool className="w-4 h-4" />
                <span>Notes</span>
              </Button>
              <Button
                variant={currentView === "calendar" ? "default" : "outline"}
                onClick={() => setCurrentView("calendar")}
                className="flex items-center space-x-2"
              >
                <CalendarDays className="w-4 h-4" />
                <span>Calendar</span>
              </Button>
            </div>
          </div>

<div className="text-center">
            <h1 className="text-3xl font-bold text-gray-800 mb-2">
              {className?.toUpperCase()} - {subject?.charAt(0).toUpperCase() + subject?.slice(1)}
            </h1>
            <p className="text-gray-600">{formatDate(selectedDate)}</p>
            {lastSaved && <p className="text-sm text-green-600 mt-1">Last saved: {lastSaved.toLocaleTimeString()}</p>}
          </div>
        </div>

{currentView === "calendar" ? (
          /* Calendar View */
          <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
            <Card className="lg:col-span-1">
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <Calendar className="w-5 h-5" />
                  <span>Select Date</span>
                </CardTitle>
              </CardHeader>
              <CardContent>
                <input
                  type="date"
                  value={selectedDate}
                  onChange={(e) => setSelectedDate(e.target.value)}
                  className="w-full p-2 border rounded-md"
                />
                <div className="mt-4">
                  <h4 className="font-semibold mb-2">Dates with Notes:</h4>
                  <div className="space-y-1 max-h-40 overflow-y-auto">
                    {getDatesWithNotes().map((date) => (
                      <button
                        key={date}
                        onClick={() => setSelectedDate(date)}
                        className={`w-full text-left p-2 rounded text-sm transition-colors ${
                          date === selectedDate ? "bg-blue-100 text-blue-800" : "hover:bg-gray-100"
                        }`}
                      >
                        {new Date(date).toLocaleDateString()}
                      </button>
                    ))}
                  </div>
                </div>
              </CardContent>
            </Card>

<div className="lg:col-span-3 space-y-4">
              {getNotesForDate(selectedDate).map((note) => (
                <Card key={note.id}>
                  <CardHeader>
                    <CardTitle className="text-lg">{note.type === "text" ? "Text Note" : "Drawing"}</CardTitle>
                  </CardHeader>
                  <CardContent>
                    {note.type === "text" ? (
                      <div className="whitespace-pre-wrap bg-gray-50 p-4 rounded-md">{note.content}</div>
                    ) : (
                      <img src={note.drawings || "/placeholder.svg"} alt="Drawing" className="max-w-full h-auto" />
                    )}
                  </CardContent>
                </Card>
              ))}
              {getNotesForDate(selectedDate).length === 0 && (
                <Card>
                  <CardContent className="text-center py-8 text-gray-500">
                    No notes for this date. Switch to Notes view to create some!
                  </CardContent>
                </Card>
              )}
            </div>
          </div>
        ) : (
          /* Notes View */
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {/* Text Notes */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <Type className="w-5 h-5" />
                  <span>Text Notes</span>
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <Textarea
                  placeholder="Type your notes here..."
                  value={currentNote}
                  onChange={(e) => setCurrentNote(e.target.value)}
                  className="min-h-[200px] resize-none"
                />
                <Button onClick={saveTextNote} className="w-full">
                  <Save className="w-4 h-4 mr-2" />
                  Save Note
                </Button>
              </CardContent>
            </Card>

{/* Drawing Canvas */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <PenTool className="w-5 h-5" />
                  <span>Digital Whiteboard</span>
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex space-x-2">
                  <Button
                    variant={isDrawingMode ? "default" : "outline"}
                    onClick={() => setIsDrawingMode(!isDrawingMode)}
                  >
                    {isDrawingMode ? "Drawing Mode ON" : "Enable Drawing"}
                  </Button>
                  <Button variant="outline" onClick={clearCanvas}>
                    Clear Canvas
                  </Button>
                </div>
                <canvas
                  ref={canvasRef}
                  width={400}
                  height={300}
                  className="border border-gray-300 rounded-md w-full cursor-crosshair bg-white"
                  style={{ touchAction: "none" }}
                />
              </CardContent>
            </Card>
          </div>
        )}

{/* Previous Notes for Current Date */}
        {currentView === "notes" && getNotesForDate(selectedDate).length > 0 && (
          <Card className="mt-6">
            <CardHeader>
              <CardTitle>Notes for {formatDate(selectedDate)}</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              {getNotesForDate(selectedDate).map((note) => (
                <div key={note.id} className="border-l-4 border-blue-500 pl-4">
                  <h4 className="font-semibold mb-2">{note.type === "text" ? "Text Note" : "Drawing"}</h4>
                  {note.type === "text" ? (
                    <div className="whitespace-pre-wrap bg-gray-50 p-3 rounded-md">{note.content}</div>
                  ) : (
                    <img
                      src={note.drawings || "/placeholder.svg"}
                      alt="Drawing"
                      className="max-w-full h-auto border rounded-md"
                    />
                  )}
                </div>
              ))}
            </CardContent>
          </Card>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/notes/[class]/date/[date]/page.tsx" isEdit="true"
"use client"

import { useState, useEffect, useRef } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Slider } from "@/components/ui/slider"
import { ArrowLeft, Pen, Eraser, Highlighter, Undo, Redo, Trash2, Save, BookOpen } from "lucide-react"
import Link from "next/link"
import { useParams } from "next/navigation"

interface DrawingAction {
  type: "draw" | "erase"
  points: { x: number; y: number }[]
  color: string
  thickness: number
  tool: "pen" | "highlighter" | "eraser"
}

export default function WhiteboardPage() {
  const params = useParams()
  const className = (params.class as string)?.replace("-", " ")
  const selectedDate = params.date as string

const [currentTool, setCurrentTool] = useState<"pen" | "highlighter" | "eraser">("pen")
  const [penColor, setPenColor] = useState("#2563eb")
  const [highlighterColor, setHighlighterColor] = useState("#fbbf24")
  const [thickness, setThickness] = useState([3])
  const [actions, setActions] = useState<DrawingAction[]>([])
  const [redoStack, setRedoStack] = useState<DrawingAction[]>([])
  const [isDrawing, setIsDrawing] = useState(false)
  const [currentAction, setCurrentAction] = useState<DrawingAction | null>(null)
  const [lastSaved, setLastSaved] = useState<Date | null>(null)

const canvasRef = useRef<HTMLCanvasElement>(null)
  const [selectedSubject, setSelectedSubject] = useState<string | null>(null)

const subjects = [
    { name: "Physics", color: "from-blue-500 to-blue-600", bgColor: "bg-blue-50" },
    { name: "Chemistry", color: "from-green-500 to-green-600", bgColor: "bg-green-50" },
    { name: "Zoology", color: "from-purple-500 to-purple-600", bgColor: "bg-purple-50" },
    { name: "Botany", color: "from-orange-500 to-orange-600", bgColor: "bg-orange-50" },
  ]

const penColors = ["#2563eb", "#dc2626", "#16a34a", "#7c3aed", "#ea580c", "#0891b2"]
  const highlighterColors = ["#fbbf24", "#fb7185", "#34d399", "#a78bfa", "#fbbf24", "#60a5fa"]

// Storage key for this specific class-date-subject combination
  const storageKey = `whiteboard-${className}-${selectedDate}-${selectedSubject}`

// Load saved drawing
  useEffect(() => {
    if (!selectedSubject) return

const savedActions = localStorage.getItem(storageKey)
    if (savedActions) {
      const parsedActions = JSON.parse(savedActions)
      setActions(parsedActions)
      redrawCanvas(parsedActions)
    }
  }, [storageKey, selectedSubject])

// Auto-save functionality
  useEffect(() => {
    if (!selectedSubject || actions.length === 0) return

const saveTimer = setTimeout(() => {
      localStorage.setItem(storageKey, JSON.stringify(actions))
      setLastSaved(new Date())
    }, 1000)

return () => clearTimeout(saveTimer)
  }, [actions, storageKey, selectedSubject])

const redrawCanvas = (actionsToRedraw: DrawingAction[]) => {
    const canvas = canvasRef.current
    if (!canvas) return

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

ctx.clearRect(0, 0, canvas.width, canvas.height)

actionsToRedraw.forEach((action) => {
      if (action.points.length < 2) return

ctx.beginPath()
      ctx.moveTo(action.points[0].x, action.points[0].y)

for (let i = 1; i < action.points.length; i++) {
        ctx.lineTo(action.points[i].x, action.points[i].y)
      }

if (action.tool === "highlighter") {
          ctx.globalAlpha = 0.4
        } else {
          ctx.globalAlpha = 1
        }
      }

ctx.lineCap = "round"
      ctx.lineJoin = "round"
      ctx.stroke()
    })

ctx.globalAlpha = 1
    ctx.globalCompositeOperation = "source-over"
  }

// Drawing functionality
  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas || !selectedSubject) return

About

Tags

Share

About

Tags

Share

More Templates Like This