"use client"

import { useEffect, useRef, forwardRef, type RefObject } from "react"
import p5 from "p5"

// ============================================
// Canvas Size Utilities
// ============================================

export interface CanvasSize {
  width: number
  height: number
  label: string
}

export const CANVAS_SIZES: Record<string, CanvasSize> = {
  square: { width: 800, height: 800, label: "Square (800×800)" },
  "landscape-43": { width: 1024, height: 768, label: "Landscape 4:3" },
  "landscape-169": { width: 1280, height: 720, label: "Landscape 16:9" },
  "portrait-43": { width: 768, height: 1024, label: "Portrait 3:4" },
  "portrait-916": { width: 720, height: 1280, label: "Portrait 9:16" },
}

export type CanvasSizeKey = keyof typeof CANVAS_SIZES

export function getCanvasDimensions(key: string): [number, number] {
  const size = CANVAS_SIZES[key]
  if (!size) return [800, 800]
  return [size.width, size.height]
}

// ============================================
// Color Utilities
// ============================================

export function hexToRgb(
  hex: string
): { r: number; g: number; b: number } | null {
  const clean = hex.replace(/^#/, "")
  if (!/^[0-9a-fA-F]{6}$/.test(clean)) return null
  return {
    r: parseInt(clean.slice(0, 2), 16),
    g: parseInt(clean.slice(2, 4), 16),
    b: parseInt(clean.slice(4, 6), 16),
  }
}

export function rgbToHex(r: number, g: number, b: number): string {
  const clamp = (v: number) => Math.max(0, Math.min(255, Math.round(v)))
  return (
    "#" +
    [r, g, b]
      .map((v) => clamp(v).toString(16).padStart(2, "0"))
      .join("")
  )
}

export function lerpColor(c1: string, c2: string, t: number): string {
  const a = hexToRgb(c1)
  const b = hexToRgb(c2)
  if (!a || !b) return c1
  return rgbToHex(
    a.r + (b.r - a.r) * t,
    a.g + (b.g - a.g) * t,
    a.b + (b.b - a.b) * t
  )
}

// ============================================
// Math Utilities
// ============================================

export function seededRandom(seed: number): () => number {
  let s = seed | 0
  return () => {
    s = (s + 0x6d2b79f5) | 0
    let t = Math.imul(s ^ (s >>> 15), 1 | s)
    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296
  }
}

// ============================================
// useP5 Hook
// ============================================

interface UseP5Options {
  animated?: boolean
}

export function useP5<T>(
  containerRef: RefObject<HTMLDivElement | null>,
  sketchFn: (p: p5, settingsRef: RefObject<T>) => void,
  settings: T,
  options?: UseP5Options
): RefObject<p5 | null> {
  const instanceRef = useRef<p5 | null>(null)
  const settingsRef = useRef<T>(settings)

  settingsRef.current = settings

  useEffect(() => {
    const container = containerRef.current
    if (!container) return

    container.querySelectorAll("canvas").forEach((c) => c.remove())

    const instance = new p5((p: p5) => {
      sketchFn(p, settingsRef)
    }, container)

    instanceRef.current = instance

    return () => {
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      ;(instance as any).hitCriticalError = true
      instance.remove()
      container.querySelectorAll("canvas").forEach((c) => c.remove())
      instanceRef.current = null
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [containerRef])

  useEffect(() => {
    if (!options?.animated && instanceRef.current) {
      instanceRef.current.redraw()
    }
  }, [settings, options?.animated])

  return instanceRef
}

// ============================================
// P5Canvas Component
// ============================================

export const P5Canvas = forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div">
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={`flex w-full h-full items-center justify-center overflow-hidden [&_canvas]:max-w-full [&_canvas]:max-h-full ${className ?? ""}`}
    {...props}
  />
))
P5Canvas.displayName = "P5Canvas"
P5 Canvas

Installation

Dependencies
