"use client"

import { useState, useRef, useCallback, useEffect } from "react"
import { getStroke } from "perfect-freehand"
import { speak } from "@/lib/speech"

interface TrazoLetraProps {
  letra: string
  fonema: string
  color?: string
  onComplete?: () => void
  promptLevel?: number
}

export default function TrazoLetra({
  letra,
  fonema,
  color = "#8CB8A0",
  onComplete,
  promptLevel = 0,
}: TrazoLetraProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const [isDrawing, setIsDrawing] = useState(false)
  const points = useRef<number[][]>([])
  const [showLetter, setShowLetter] = useState(promptLevel < 2)

  useEffect(() => {
    if (promptLevel < 2) {
      drawLetterGuide(letra)
    }
  }, [letra, promptLevel])

  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return
    canvas.style.touchAction = "none"
  }, [])

  const drawLetterGuide = (l: string) => {
    const canvas = canvasRef.current
    if (!canvas) return
    const ctx = canvas.getContext("2d")
    if (!ctx) return
    const w = canvas.width
    const h = canvas.height
    ctx.clearRect(0, 0, w, h)

    ctx.font = `${h * 0.6}px "Fredoka", sans-serif`
    ctx.textAlign = "center"
    ctx.textBaseline = "middle"
    ctx.globalAlpha = 0.15
    ctx.fillStyle = "#2D3436"
    ctx.fillText(l.toUpperCase(), w / 2, h / 2)
    ctx.globalAlpha = 1
  }

  const startDrawing = useCallback((e: React.PointerEvent) => {
    setIsDrawing(true)
    points.current = [[e.clientX, e.clientY, e.pressure || 0.5]]
    const canvas = canvasRef.current
    if (canvas) canvas.setPointerCapture(e.pointerId)
  }, [])

  const draw = useCallback((e: React.PointerEvent) => {
    if (!isDrawing) return
    points.current.push([e.clientX, e.clientY, e.pressure || 0.5])
    renderStroke()
  }, [isDrawing])

  const endDrawing = useCallback(() => {
    setIsDrawing(false)
    if (points.current.length > 5 && onComplete) {
      onComplete()
    }
    points.current = []
  }, [onComplete])

  const renderStroke = () => {
    const canvas = canvasRef.current
    if (!canvas) return
    const ctx = canvas.getContext("2d")
    if (!ctx) return

    const stroke = getStroke(points.current, {
      size: 12,
      thinning: 0.5,
      smoothing: 0.5,
      streamline: 0.5,
    })

    if (stroke.length < 2) return

    ctx.clearRect(0, 0, canvas.width, canvas.height)
    if (showLetter) drawLetterGuide(letra)

    ctx.beginPath()
    ctx.moveTo(stroke[0][0], stroke[0][1])
    for (let i = 1; i < stroke.length; i++) {
      ctx.lineTo(stroke[i][0], stroke[i][1])
    }
    ctx.strokeStyle = color
    ctx.lineWidth = 3
    ctx.lineCap = "round"
    ctx.lineJoin = "round"
    ctx.fillStyle = color
    ctx.fill()

    if (promptLevel < 3) {
      // draw direction arrow if early prompt level
    }
  }

  return (
    <canvas
      ref={canvasRef}
      width={300}
      height={300}
      className="w-[250px] h-[250px] touch-none rounded-2xl bg-white shadow-md"
      onPointerDown={startDrawing}
      onPointerMove={draw}
      onPointerUp={endDrawing}
      onPointerCancel={endDrawing}
    />
  )
}