"use client"

import { useRef } from "react"
import type p5 from "p5"
import type { RefObject, MutableRefObject } from "react"
import { useP5, P5Canvas } from "@/components/special/p5-canvas/component"

// ============================================
// Types (inlined from types.ts)
// ============================================

interface ColorStop {
  color: string
  position: number
}

export type LinesSettings = {
  // Core
  shape: "horizontal" | "vertical" | "circles" | "dots" | "spiral" | "radial" | "lissajous"
  frequency: number
  amplitude: number
  lineCount: number
  spacing: number
  padding: number
  thickness: number
  noise: number
  bgColor: string
  lineColor: string
  blendMode: string

  // Lissajous
  lissFreqA: number
  lissFreqB: number
  lissPhase: number
  lissScale: number
  lissResolution: number
  oscillonMode: boolean
  oscillonLayers: number
  oscillonSpread: number

  // Organic
  weightVar: number
  wobble: number
  taper: number
  lineBreaks: boolean
  breakFrequency: number
  morsePattern: boolean
  morseDensity: number
  dotRatio: number
  spacingVar: number
  rotationJitter: number
  opacityVar: number
  colorDrift: number
  perlinFlow: number
  freqVar: number
  noiseOctaves: number

  // Watercolor
  watercolor: boolean
  wcWetness: number
  wcPigment: number
  wcLayers: number
  wcEdgeDarkening: number

  // Glass/Lens
  blur: number
  refraction: boolean
  refractionType: "barrel" | "pincushion" | "wavyGlass" | "liquid" | "ripple" | "frosted"
  refractionStrength: number
  refractionScale: number
  chromaticAb: boolean
  chromaticAbAmount: number
  pixelate: boolean
  pixelateAmount: number

  // Halftone
  halftone: boolean
  halftoneType: "dots" | "lines" | "crosshatch"
  halftoneSize: number
  halftoneAngle: number
  halftoneSoftness: number
  halftoneCoverage: number

  // CRT/VHS
  crt: boolean
  crtScanlines: number
  crtCurvature: number
  crtVignette: number
  crtPhosphor: number
  vhs: boolean
  vhsDistortion: number
  vhsTracking: number

  // Line gradient
  enableGradient: boolean
  gradientType: "perLine" | "alongLine" | "horizontal" | "vertical" | "radial"
  colorStops: ColorStop[]
  gradAnimSpeed: number
  gradAnimMode: "cycle" | "reverse" | "bounce"

  // Background gradient
  bgGradient: boolean
  bgGradientType: "linear" | "radial"
  bgGradientAngle: number
  bgGradientStops: ColorStop[]

  // Animation
  isPlaying: boolean
  animationSpeed: number
}

const DEFAULTS: LinesSettings = {
  shape: "horizontal",
  frequency: 0.02,
  amplitude: 30,
  lineCount: 20,
  spacing: 1,
  padding: 50,
  thickness: 1.5,
  noise: 0,
  bgColor: "#141414",
  lineColor: "#ffffff",
  blendMode: "normal",

  lissFreqA: 3,
  lissFreqB: 4,
  lissPhase: 0,
  lissScale: 0.8,
  lissResolution: 1000,
  oscillonMode: false,
  oscillonLayers: 5,
  oscillonSpread: 0.3,

  weightVar: 0,
  wobble: 0,
  taper: 0,
  lineBreaks: false,
  breakFrequency: 3,
  morsePattern: false,
  morseDensity: 5,
  dotRatio: 30,
  spacingVar: 0,
  rotationJitter: 0,
  opacityVar: 0,
  colorDrift: 0,
  perlinFlow: 0,
  freqVar: 0,
  noiseOctaves: 1,

  watercolor: false,
  wcWetness: 50,
  wcPigment: 50,
  wcLayers: 3,
  wcEdgeDarkening: 30,

  blur: 0,
  refraction: false,
  refractionType: "liquid",
  refractionStrength: 30,
  refractionScale: 50,
  chromaticAb: false,
  chromaticAbAmount: 5,
  pixelate: false,
  pixelateAmount: 8,

  halftone: false,
  halftoneType: "dots",
  halftoneSize: 6,
  halftoneAngle: 45,
  halftoneSoftness: 30,
  halftoneCoverage: 70,

  crt: false,
  crtScanlines: 50,
  crtCurvature: 20,
  crtVignette: 30,
  crtPhosphor: 20,
  vhs: false,
  vhsDistortion: 30,
  vhsTracking: 20,

  enableGradient: false,
  gradientType: "perLine",
  colorStops: [
    { color: "#ff0000", position: 0 },
    { color: "#0000ff", position: 100 },
  ],
  gradAnimSpeed: 0,
  gradAnimMode: "cycle",

  bgGradient: false,
  bgGradientType: "linear",
  bgGradientAngle: 0,
  bgGradientStops: [
    { color: "#141414", position: 0 },
    { color: "#2a2a2a", position: 100 },
  ],

  isPlaying: false,
  animationSpeed: 50,
}

// ============================================
// Shaders (inlined from shaders.ts)
// ============================================

// p5 v2 compatible vertex shader
const VERT_SHADER = `
attribute vec3 aPosition;
attribute vec2 aTexCoord;
varying vec2 vTexCoord;

void main() {
  vTexCoord = aTexCoord;
  vec4 positionVec4 = vec4(aPosition, 1.0);
  positionVec4.xy = positionVec4.xy * 2.0 - 1.0;
  gl_Position = positionVec4;
}
`

const FRAG_SHADER = `
precision mediump float;
varying vec2 vTexCoord;
uniform sampler2D tex0;
uniform vec2 resolution;
uniform float blurAmount;
uniform float chromaticAb;
uniform float refractionStrength;
uniform float refractionScale;
uniform int refractionType;
uniform float pixelAmount;
uniform bool halftoneEnabled;
uniform int halftoneType;
uniform float halftoneSize;
uniform float halftoneAngle;
uniform float halftoneSoftness;
uniform float halftoneCoverage;
uniform bool crtEnabled;
uniform float crtScanlines;
uniform float crtCurvature;
uniform float crtVignette;
uniform float crtPhosphor;
uniform bool vhsEnabled;
uniform float vhsDistortion;
uniform float vhsTracking;
uniform float time;

#define PI 3.14159265359

float hash(vec2 p) {
  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
}

float noise(vec2 p) {
  vec2 i = floor(p);
  vec2 f = fract(p);
  f = f * f * f * (f * (f * 6.0 - 15.0) + 10.0);

  float a = hash(i);
  float b = hash(i + vec2(1.0, 0.0));
  float c = hash(i + vec2(0.0, 1.0));
  float d = hash(i + vec2(1.0, 1.0));

  return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
}

float fbm(vec2 p, int octaves) {
  float value = 0.0;
  float amplitude = 0.5;
  float frequency = 1.0;
  for (int i = 0; i < 6; i++) {
    if (i >= octaves) break;
    value += amplitude * noise(p * frequency);
    frequency *= 2.0;
    amplitude *= 0.5;
  }
  return value;
}

vec2 applyRefraction(vec2 uv, float strength, float scale, int type) {
  vec2 center = vec2(0.5);
  vec2 dir = uv - center;
  float dist = length(dir);
  vec2 offset = vec2(0.0);

  if (type == 0) {
    float k = strength * 0.5;
    float r2 = dist * dist;
    float factor = 1.0 + k * r2;
    offset = dir * (factor - 1.0);
  }
  else if (type == 1) {
    float k = -strength * 0.5;
    float r2 = dist * dist;
    float factor = 1.0 + k * r2;
    offset = dir * (factor - 1.0);
  }
  else if (type == 2) {
    float wave1 = sin(uv.y * scale * 10.0 + uv.x * scale * 3.0) * 0.5 + 0.5;
    float wave2 = sin(uv.x * scale * 8.0 - uv.y * scale * 4.0) * 0.5 + 0.5;
    offset.x = (wave1 - 0.5) * strength * 0.03;
    offset.y = (wave2 - 0.5) * strength * 0.03;
  }
  else if (type == 3) {
    float n1 = fbm(uv * scale * 3.0, 4);
    float n2 = fbm(uv * scale * 3.0 + vec2(5.2, 1.3), 4);
    offset.x = (n1 - 0.5) * strength * 0.06;
    offset.y = (n2 - 0.5) * strength * 0.06;
  }
  else if (type == 4) {
    float ripple = sin(dist * scale * 30.0) * exp(-dist * 3.0);
    offset = normalize(dir + vec2(0.001)) * ripple * strength * 0.05;
  }
  else if (type == 5) {
    float n1 = fbm(uv * scale * 8.0, 3) - 0.5;
    float n2 = fbm(uv * scale * 8.0 + vec2(10.0), 3) - 0.5;
    float edgeFade = smoothstep(0.0, 0.3, dist) * smoothstep(0.7, 0.4, dist);
    offset.x = n1 * strength * 0.02 * (1.0 - edgeFade * 0.5);
    offset.y = n2 * strength * 0.02 * (1.0 - edgeFade * 0.5);
  }

  return uv + offset;
}

void main() {
  vec2 uv = vTexCoord;
  uv.y = 1.0 - uv.y;

  if (refractionStrength > 0.0) {
    uv = applyRefraction(uv, refractionStrength, refractionScale, refractionType);
  }

  vec4 color;

  if (chromaticAb > 0.0) {
    vec2 dir = uv - vec2(0.5);
    float offset = chromaticAb * 0.003;
    float r = texture2D(tex0, uv + dir * offset).r;
    float g = texture2D(tex0, uv).g;
    float b = texture2D(tex0, uv - dir * offset).b;
    float a = texture2D(tex0, uv).a;
    color = vec4(r, g, b, a);
  } else {
    color = texture2D(tex0, uv);
  }

  if (blurAmount > 0.0) {
    vec4 blurColor = vec4(0.0);
    float total = 0.0;
    float blurSize = blurAmount / resolution.x * 2.0;

    for (float x = -3.0; x <= 3.0; x += 1.0) {
      for (float y = -3.0; y <= 3.0; y += 1.0) {
        float weight = 1.0 - length(vec2(x, y)) / 4.5;
        if (weight > 0.0) {
          vec2 sampleOffset = vec2(x, y) * blurSize;
          if (chromaticAb > 0.0) {
            vec2 sampleUv = uv + sampleOffset;
            vec2 dir = sampleUv - vec2(0.5);
            float chromOffset = chromaticAb * 0.003;
            blurColor.r += texture2D(tex0, sampleUv + dir * chromOffset).r * weight;
            blurColor.g += texture2D(tex0, sampleUv).g * weight;
            blurColor.b += texture2D(tex0, sampleUv - dir * chromOffset).b * weight;
            blurColor.a += texture2D(tex0, sampleUv).a * weight;
          } else {
            blurColor += texture2D(tex0, uv + sampleOffset) * weight;
          }
          total += weight;
        }
      }
    }
    color = blurColor / total;
  }

  if (pixelAmount > 1.0) {
    vec2 pixelSize = vec2(pixelAmount) / resolution;
    vec2 pixelatedUV = floor(vTexCoord / pixelSize) * pixelSize + pixelSize * 0.5;
    pixelatedUV.y = 1.0 - pixelatedUV.y;

    if (refractionStrength > 0.0) {
      pixelatedUV = applyRefraction(pixelatedUV, refractionStrength, refractionScale, refractionType);
    }

    if (chromaticAb > 0.0) {
      vec2 dir = pixelatedUV - vec2(0.5);
      float offset = chromaticAb * 0.003;
      color.r = texture2D(tex0, pixelatedUV + dir * offset).r;
      color.g = texture2D(tex0, pixelatedUV).g;
      color.b = texture2D(tex0, pixelatedUV - dir * offset).b;
    } else {
      color = texture2D(tex0, pixelatedUV);
    }
  }

  if (halftoneEnabled) {
    vec3 originalColor = color.rgb;
    float luminance = dot(color.rgb, vec3(0.299, 0.587, 0.114));

    float angleRad = halftoneAngle * PI / 180.0;
    float cosA = cos(angleRad);
    float sinA = sin(angleRad);
    vec2 centeredUV = vTexCoord - 0.5;
    vec2 rotatedUV = vec2(
      centeredUV.x * cosA - centeredUV.y * sinA,
      centeredUV.x * sinA + centeredUV.y * cosA
    ) + 0.5;

    vec2 pixelCoord = rotatedUV * resolution;
    vec2 gridPos = floor(pixelCoord / halftoneSize);
    vec2 cellUV = (pixelCoord - gridPos * halftoneSize) / halftoneSize;

    float pattern = 0.0;
    float softness = halftoneSoftness / 100.0 * 0.2 + 0.01;
    float coverage = halftoneCoverage / 100.0;

    float inkAmount = (1.0 - luminance) * (0.5 + coverage * 0.8);
    inkAmount = clamp(inkAmount, 0.0, 1.0);

    if (halftoneType == 0) {
      float dist = length(cellUV - 0.5);
      float radius = inkAmount * (0.5 + coverage * 0.3);
      pattern = 1.0 - smoothstep(radius - softness, radius + softness, dist);
    } else if (halftoneType == 1) {
      float linePos = abs(cellUV.y - 0.5);
      float lineWidth = inkAmount * (0.35 + coverage * 0.2);
      pattern = 1.0 - smoothstep(lineWidth - softness, lineWidth + softness, linePos);
    } else if (halftoneType == 2) {
      float line1 = abs(cellUV.y - 0.5);
      float line2 = abs(cellUV.x - 0.5);
      float lineWidth = inkAmount * (0.32 + coverage * 0.2);
      float p1 = 1.0 - smoothstep(lineWidth - softness, lineWidth + softness, line1);
      float p2 = 1.0 - smoothstep(lineWidth - softness, lineWidth + softness, line2);
      pattern = max(p1, p2);
    }

    vec3 paperColor = vec3(1.0);
    vec3 inkColor = originalColor * 0.9;
    color.rgb = mix(paperColor, inkColor, pattern);

    float gray = dot(color.rgb, vec3(0.299, 0.587, 0.114));
    color.rgb = mix(vec3(gray), color.rgb, 1.3);
  }

  if (crtEnabled || vhsEnabled) {
    vec2 crtUV = vTexCoord;
    crtUV.y = 1.0 - crtUV.y;

    if (crtEnabled && crtCurvature > 0.0) {
      vec2 cc = crtUV - 0.5;
      float dist = dot(cc, cc) * crtCurvature * 0.5;
      crtUV = crtUV + cc * dist;
    }

    if (vhsEnabled && vhsDistortion > 0.0) {
      float distortAmount = vhsDistortion / 100.0;
      float wave = sin(crtUV.y * 15.0 + time * 3.0) * distortAmount * 0.02;
      wave += sin(crtUV.y * 40.0 + time * 7.0) * distortAmount * 0.01;
      crtUV.x += wave;
    }

    if (vhsEnabled && vhsTracking > 0.0) {
      float trackAmount = vhsTracking / 100.0;
      float band = floor(crtUV.y * 20.0 + time * 2.0);
      float bandNoise = fract(sin(band * 43.758) * 438.5453);
      if (bandNoise > 0.92) {
        crtUV.x += (bandNoise - 0.92) * trackAmount * 0.5;
      }
    }

    if (crtUV.x >= 0.0 && crtUV.x <= 1.0 && crtUV.y >= 0.0 && crtUV.y <= 1.0) {
      vec2 sampleUV = crtUV;
      sampleUV.y = 1.0 - sampleUV.y;

      if (refractionStrength > 0.0) {
        sampleUV = applyRefraction(sampleUV, refractionStrength, refractionScale, refractionType);
      }

      bool needsResample = (crtEnabled && crtCurvature > 0.0) ||
                           (vhsEnabled && (vhsDistortion > 0.0 || vhsTracking > 0.0));

      if (crtEnabled && crtPhosphor > 0.0) {
        float phosphorOffset = crtPhosphor / 100.0 * 0.003;
        if (chromaticAb > 0.0) {
          vec2 dir = sampleUV - vec2(0.5);
          float chromOffset = chromaticAb * 0.003;
          color.r = texture2D(tex0, sampleUV + vec2(phosphorOffset, 0.0) + dir * chromOffset).r;
          color.g = texture2D(tex0, sampleUV).g;
          color.b = texture2D(tex0, sampleUV - vec2(phosphorOffset, 0.0) - dir * chromOffset).b;
        } else {
          color.r = texture2D(tex0, sampleUV + vec2(phosphorOffset, 0.0)).r;
          color.g = texture2D(tex0, sampleUV).g;
          color.b = texture2D(tex0, sampleUV - vec2(phosphorOffset, 0.0)).b;
        }
      } else if (needsResample) {
        if (chromaticAb > 0.0) {
          vec2 dir = sampleUV - vec2(0.5);
          float offset = chromaticAb * 0.003;
          color.r = texture2D(tex0, sampleUV + dir * offset).r;
          color.g = texture2D(tex0, sampleUV).g;
          color.b = texture2D(tex0, sampleUV - dir * offset).b;
        } else {
          color = texture2D(tex0, sampleUV);
        }
      }

      if (crtEnabled && crtScanlines > 0.0) {
        float scanline = sin(crtUV.y * resolution.y * PI) * 0.5 + 0.5;
        scanline = pow(scanline, 1.5);
        float scanlineIntensity = crtScanlines / 100.0;
        color.rgb *= 1.0 - scanlineIntensity * (1.0 - scanline) * 0.5;
      }

      if (crtEnabled && crtVignette > 0.0) {
        vec2 vignetteUV = crtUV * 2.0 - 1.0;
        float vignette = 1.0 - dot(vignetteUV, vignetteUV) * crtVignette / 100.0 * 0.5;
        vignette = clamp(vignette, 0.0, 1.0);
        color.rgb *= vignette;
      }

      if (vhsEnabled && vhsDistortion > 0.0) {
        float noiseAmount = vhsDistortion / 100.0 * 0.1;
        float staticNoise = fract(sin(dot(crtUV + time, vec2(12.9898, 78.233))) * 43758.5453);
        color.rgb += (staticNoise - 0.5) * noiseAmount;
      }
    } else {
      color.rgb = vec3(0.0);
    }
  }

  gl_FragColor = color;
}
`

// ============================================
// Line Properties (inlined from line-properties.ts)
// ============================================

type LineProperties = {
  frequencies: number[]
  phases: number[]
  opacities: number[]
  rotations: number[]
  hueShifts: number[]
  spacingOffsets: number[]
  breakPositions: { pos: number; width: number }[][]
  morsePatterns: { start: number; end: number; isDot: boolean }[][]
}

function generateLineProperties(
  count: number,
  morseDensity: number,
  dotRatio: number,
  p: p5,
): LineProperties {
  const frequencies: number[] = []
  const phases: number[] = []
  const opacities: number[] = []
  const rotations: number[] = []
  const hueShifts: number[] = []
  const spacingOffsets: number[] = []
  const breakPositions: { pos: number; width: number }[][] = []
  const morsePatterns: { start: number; end: number; isDot: boolean }[][] = []

  const dotRatioNorm = dotRatio / 100
  const densityFactor = p.map(morseDensity, 1, 15, 2, 0.3)

  for (let i = 0; i < count; i++) {
    frequencies.push(p.random(0.5, 1.5))
    phases.push(p.random(p.TWO_PI))
    opacities.push(p.random(-1, 1))
    rotations.push(p.random(-1, 1))
    hueShifts.push(p.random(-1, 1))
    spacingOffsets.push(p.random(-1, 1))

    // Break positions
    const breaks: { pos: number; width: number }[] = []
    const numBreaks = Math.floor(p.random(1, 8))
    for (let j = 0; j < numBreaks; j++) {
      breaks.push({ pos: p.random(0.1, 0.9), width: p.random(0.02, 0.08) })
    }
    breakPositions.push(breaks)

    // Morse patterns
    const morse: { start: number; end: number; isDot: boolean }[] = []
    let pos = 0
    while (pos < 1) {
      const isDot = p.random() < dotRatioNorm
      const elementWidth = isDot
        ? p.random(0.008, 0.02) * densityFactor
        : p.random(0.03, 0.08) * densityFactor
      const gapWidth = p.random(0.015, 0.04) * densityFactor

      if (pos + elementWidth <= 1) {
        morse.push({ start: pos, end: pos + elementWidth, isDot })
      }
      pos += elementWidth + gapWidth
    }
    morsePatterns.push(morse)
  }

  return { frequencies, phases, opacities, rotations, hueShifts, spacingOffsets, breakPositions, morsePatterns }
}

// ============================================
// Shapes helpers (inlined from shapes.ts)
// ============================================

// Pre-parsed gradient stop in HSB space
type HSBStop = { h: number; s: number; b: number; pos: number }

function hexToHsb(hex: string): { h: number; s: number; b: number } {
  const c = hex.replace('#', '')
  const r = parseInt(c.slice(0, 2), 16) / 255
  const g = parseInt(c.slice(2, 4), 16) / 255
  const b = parseInt(c.slice(4, 6), 16) / 255
  const max = Math.max(r, g, b)
  const min = Math.min(r, g, b)
  const delta = max - min
  let h = 0
  if (delta > 0) {
    if (max === r) h = ((g - b) / delta) % 6
    else if (max === g) h = (b - r) / delta + 2
    else h = (r - g) / delta + 4
    h *= 60
    if (h < 0) h += 360
  }
  const s = max === 0 ? 0 : (delta / max) * 100
  return { h, s, b: max * 100 }
}

function parseGradientStops(stops: ColorStop[]): HSBStop[] {
  return [...stops]
    .sort((a, b) => a.position - b.position)
    .map(s => ({ ...hexToHsb(s.color), pos: s.position / 100 }))
}

function getGradientColorAt(
  t: number,
  animOffset: number,
  stops: HSBStop[],
  animMode: string,
): { h: number; s: number; b: number } {
  let adj = t + animOffset
  if (animMode === 'cycle') {
    adj = adj % 1
    if (adj < 0) adj += 1
  } else if (animMode === 'reverse') {
    adj = 1 - (adj % 1)
    if (adj < 0) adj += 1
  } else if (animMode === 'bounce') {
    adj = adj % 2
    if (adj > 1) adj = 2 - adj
    if (adj < 0) adj = -adj
  }
  adj = Math.max(0, Math.min(1, adj))

  if (stops.length === 0) return { h: 0, s: 0, b: 100 }
  if (stops.length === 1) return stops[0]

  let lower = stops[0]
  let upper = stops[stops.length - 1]
  for (let i = 0; i < stops.length - 1; i++) {
    if (adj >= stops[i].pos && adj <= stops[i + 1].pos) {
      lower = stops[i]
      upper = stops[i + 1]
      break
    }
  }

  const range = upper.pos - lower.pos
  const localT = range > 0 ? (adj - lower.pos) / range : 0

  let hDiff = upper.h - lower.h
  if (hDiff > 180) hDiff -= 360
  if (hDiff < -180) hDiff += 360

  return {
    h: (lower.h + hDiff * localT + 360) % 360,
    s: lower.s + (upper.s - lower.s) * localT,
    b: lower.b + (upper.b - lower.b) * localT,
  }
}

function getPerLineColor(
  idx: number, count: number, animOffset: number, stops: HSBStop[], animMode: string,
): { h: number; s: number; b: number } {
  const t = count > 1 ? idx / (count - 1) : 0
  return getGradientColorAt(t, animOffset, stops, animMode)
}

function getAlongLineColor(
  progress: number, animOffset: number, stops: HSBStop[], animMode: string,
): { h: number; s: number; b: number } {
  return getGradientColorAt(progress, animOffset, stops, animMode)
}

function getSpatialColor(
  x: number, y: number, w: number, h: number,
  spatialType: string, animOffset: number, stops: HSBStop[], animMode: string,
): { h: number; s: number; b: number } {
  let t: number
  if (spatialType === 'horizontal') t = x / w
  else if (spatialType === 'vertical') t = y / h
  else if (spatialType === 'radial') {
    const cx = w / 2, cy = h / 2
    const maxDist = Math.sqrt(cx * cx + cy * cy)
    t = Math.sqrt((x - cx) ** 2 + (y - cy) ** 2) / maxDist
  } else t = 0
  return getGradientColorAt(t, animOffset, stops, animMode)
}

// HSB to CSS rgb string (with LRU-1 cache)
let _lastHsbKey = ''
let _lastRgbStr = 'rgb(0,0,0)'

function hsbToRgbStr(h: number, s: number, b: number): string {
  const key = `${h | 0},${(s * 10) | 0},${(b * 10) | 0}`
  if (key === _lastHsbKey) return _lastRgbStr

  const sn = s / 100, bn = b / 100
  const c = bn * sn
  const x = c * (1 - Math.abs(((h / 60) % 2) - 1))
  const m = bn - c
  let r = 0, g = 0, bl = 0
  if (h < 60) { r = c; g = x }
  else if (h < 120) { r = x; g = c }
  else if (h < 180) { g = c; bl = x }
  else if (h < 240) { g = x; bl = c }
  else if (h < 300) { r = x; bl = c }
  else { r = c; bl = x }
  _lastHsbKey = key
  _lastRgbStr = `rgb(${Math.round((r + m) * 255)},${Math.round((g + m) * 255)},${Math.round((bl + m) * 255)})`
  return _lastRgbStr
}

// Multi-octave p5 noise
function getMultiOctaveNoise(p: p5, x: number, y: number, octaves: number): number {
  let total = 0, freq = 1, amp = 1, maxVal = 0
  for (let i = 0; i < octaves; i++) {
    total += p.noise(x * freq, y * freq) * amp
    maxVal += amp
    amp *= 0.5
    freq *= 2
  }
  return total / maxVal
}

// LCM / GCD for Lissajous
function gcd(a: number, b: number): number {
  a = Math.abs(a); b = Math.abs(b)
  while (b) { const t = b; b = a % b; a = t }
  return a
}
function lcm(a: number, b: number): number {
  return Math.abs(a * b) / gcd(a, b)
}

// Vertex type
type Vertex = { x: number; y: number; progress: number }

// Perpendicular calculation
function calcPerp(vertices: Vertex[], i: number): { x: number; y: number } {
  let dx = 0, dy = 1
  if (i < vertices.length - 1) {
    dx = vertices[i + 1].x - vertices[i].x
    dy = vertices[i + 1].y - vertices[i].y
  } else if (i > 0) {
    dx = vertices[i].x - vertices[i - 1].x
    dy = vertices[i].y - vertices[i - 1].y
  }
  const len = Math.sqrt(dx * dx + dy * dy)
  if (len === 0) return { x: 0, y: 1 }
  return { x: -dy / len, y: dx / len }
}

// Check if position is in a gap (break or morse)
function isInGap(
  progress: number,
  lineIndex: number,
  settings: LinesSettings,
  props: LineProperties,
): boolean {
  if (settings.morsePattern && props.morsePatterns[lineIndex]) {
    let inElement = false
    for (const elem of props.morsePatterns[lineIndex]) {
      if (progress >= elem.start && progress <= elem.end) { inElement = true; break }
    }
    return !inElement
  } else if (settings.lineBreaks) {
    const breaks = props.breakPositions[lineIndex]?.slice(0, settings.breakFrequency) ?? []
    for (const brk of breaks) {
      if (progress > brk.pos && progress < brk.pos + brk.width) return true
    }
  }
  return false
}

// ============================================
// Draw segment (core renderer from shapes.ts)
// ============================================

function drawSegment(
  p: p5,
  ctx: CanvasRenderingContext2D,
  vertices: Vertex[],
  settings: LinesSettings,
  _props: LineProperties,
  lineIndex: number,
  canvasW: number,
  canvasH: number,
  baseH: number,
  baseS: number,
  baseB: number,
  baseOpacity: number,
  parsedStops: HSBStop[],
  gradAnimOffset: number,
) {
  if (vertices.length < 2) return

  const { thickness, weightVar: wvRaw, taper: taperRaw, watercolor, wcWetness: wcWRaw, wcPigment: wcPRaw,
    wcLayers, wcEdgeDarkening: wcEdRaw, enableGradient, gradientType, gradAnimMode } = settings
  const weightVar = wvRaw / 100
  const taper = taperRaw / 100
  const wcWetness = wcWRaw / 100
  const wcPigment = wcPRaw / 100
  const wcEdgeDarkening = wcEdRaw / 100

  const needsPerVertexColor = enableGradient &&
    (gradientType === 'alongLine' || gradientType === 'horizontal' || gradientType === 'vertical' || gradientType === 'radial')

  // Calculate weights
  const weights: number[] = []
  for (let i = 0; i < vertices.length; i++) {
    const v = vertices[i]
    let weight = thickness
    if (weightVar > 0) {
      weight *= 1 + (p.noise(v.x * 0.02, lineIndex * 5) - 0.5) * weightVar * 2
    }
    if (taper > 0) {
      const ta = 1 - taper * (1 - Math.sin(v.progress * Math.PI))
      weight *= Math.max(0.1, ta)
    }
    weights.push(Math.max(0.5, weight))
  }

  const needsRibbon = weightVar > 0 || taper > 0
  const alpha = baseOpacity / 255

  // Precompute perpendiculars once if ribbon mode is needed
  let perps: { x: number; y: number }[] | null = null
  if (needsRibbon) {
    perps = new Array(vertices.length)
    for (let i = 0; i < vertices.length; i++) {
      perps[i] = calcPerp(vertices, i)
    }
  }

  if (watercolor) {
    // Watercolor: multiple transparent layers
    for (let layer = 0; layer < wcLayers; layer++) {
      const layerOffset = (layer - wcLayers / 2) * wcWetness * 3
      const layerAlpha = (alpha / wcLayers) * (0.6 + p.noise(lineIndex * 50, layer * 50) * 0.4)

      const layerHueShift = (p.noise(layer * 100, lineIndex) - 0.5) * wcPigment * 20
      const layerSatShift = (p.noise(layer * 200, lineIndex) - 0.5) * wcPigment * 30
      const layerBrightShift = (p.noise(layer * 300, lineIndex) - 0.5) * wcPigment * 20

      const h = (baseH + layerHueShift + 360) % 360
      const s = Math.max(0, Math.min(100, baseS + layerSatShift))
      const b = Math.max(0, Math.min(100, baseB + layerBrightShift))

      const bleedX = (p.noise(lineIndex * 10, layer * 20) - 0.5) * wcWetness * 6
      const bleedY = layerOffset + (p.noise(lineIndex * 20, layer * 30) - 0.5) * wcWetness * 6

      ctx.globalAlpha = layerAlpha
      ctx.lineCap = 'round'
      ctx.lineJoin = 'round'

      if (needsRibbon) {
        ctx.fillStyle = hsbToRgbStr(h, s, b)
        ctx.beginPath()
        for (let i = 0; i < vertices.length; i++) {
          const v = vertices[i]
          const w = weights[i] * (1 + wcWetness)
          const perp = perps![i]
          const px = v.x + bleedX + perp.x * w / 2
          const py = v.y + bleedY + perp.y * w / 2
          if (i === 0) ctx.moveTo(px, py)
          else ctx.lineTo(px, py)
        }
        for (let i = vertices.length - 1; i >= 0; i--) {
          const v = vertices[i]
          const w = weights[i] * (1 + wcWetness)
          const perp = perps![i]
          ctx.lineTo(v.x + bleedX - perp.x * w / 2, v.y + bleedY - perp.y * w / 2)
        }
        ctx.closePath()
        ctx.fill()
      } else {
        ctx.strokeStyle = hsbToRgbStr(h, s, b)
        ctx.lineWidth = thickness * (1 + wcWetness)
        ctx.beginPath()
        for (let i = 0; i < vertices.length; i++) {
          const v = vertices[i]
          if (i === 0) ctx.moveTo(v.x + bleedX, v.y + bleedY)
          else ctx.lineTo(v.x + bleedX, v.y + bleedY)
        }
        ctx.stroke()
      }
    }

    // Edge darkening
    if (wcEdgeDarkening > 0) {
      ctx.globalAlpha = alpha * wcEdgeDarkening * 0.3
      ctx.strokeStyle = hsbToRgbStr(baseH, baseS, baseB * 0.6)
      ctx.lineWidth = thickness * 0.5
      ctx.lineCap = 'round'
      ctx.lineJoin = 'round'

      const edgeLen = Math.min(Math.floor(vertices.length * 0.15), 20)
      ctx.beginPath()
      for (let i = 0; i < edgeLen && i < vertices.length; i++) {
        if (i === 0) ctx.moveTo(vertices[i].x, vertices[i].y)
        else ctx.lineTo(vertices[i].x, vertices[i].y)
      }
      ctx.stroke()
      ctx.beginPath()
      for (let i = Math.max(0, vertices.length - edgeLen); i < vertices.length; i++) {
        if (i === Math.max(0, vertices.length - edgeLen)) ctx.moveTo(vertices[i].x, vertices[i].y)
        else ctx.lineTo(vertices[i].x, vertices[i].y)
      }
      ctx.stroke()
    }
    ctx.globalAlpha = 1
  } else {
    // Normal drawing
    ctx.globalAlpha = alpha
    ctx.lineCap = 'round'
    ctx.lineJoin = 'round'

    if (needsRibbon) {
      ctx.fillStyle = hsbToRgbStr(baseH, baseS, baseB)
      ctx.beginPath()
      for (let i = 0; i < vertices.length; i++) {
        const v = vertices[i]
        const w = weights[i]
        const perp = calcPerp(vertices, i)
        const px = v.x + perp.x * w / 2
        const py = v.y + perp.y * w / 2
        if (i === 0) ctx.moveTo(px, py)
        else ctx.lineTo(px, py)
      }
      for (let i = vertices.length - 1; i >= 0; i--) {
        const v = vertices[i]
        const w = weights[i]
        const perp = calcPerp(vertices, i)
        ctx.lineTo(v.x - perp.x * w / 2, v.y - perp.y * w / 2)
      }
      ctx.closePath()
      ctx.fill()
    } else if (needsPerVertexColor) {
      ctx.lineWidth = thickness
      for (let i = 0; i < vertices.length - 1; i++) {
        const v1 = vertices[i]
        const v2 = vertices[i + 1]
        let gc: { h: number; s: number; b: number }
        if (gradientType === 'alongLine') {
          gc = getAlongLineColor(v1.progress, gradAnimOffset, parsedStops, gradAnimMode)
        } else {
          gc = getSpatialColor(v1.x, v1.y, canvasW, canvasH, gradientType, gradAnimOffset, parsedStops, gradAnimMode)
        }
        ctx.strokeStyle = hsbToRgbStr(gc.h, gc.s, gc.b)
        ctx.beginPath()
        ctx.moveTo(v1.x, v1.y)
        ctx.lineTo(v2.x, v2.y)
        ctx.stroke()
      }
    } else {
      ctx.strokeStyle = hsbToRgbStr(baseH, baseS, baseB)
      ctx.lineWidth = thickness
      ctx.beginPath()
      for (let i = 0; i < vertices.length; i++) {
        if (i === 0) ctx.moveTo(vertices[i].x, vertices[i].y)
        else ctx.lineTo(vertices[i].x, vertices[i].y)
      }
      ctx.stroke()
    }
    ctx.globalAlpha = 1
  }
}

// ============================================
// Shape drawing functions (inlined from shapes.ts)
// ============================================

function drawHorizontalLines(
  p: p5, ctx: CanvasRenderingContext2D, settings: LinesSettings,
  props: LineProperties, canvasSize: number, animTime: number,
  gradAnimOffset: number, parsedStops: HSBStop[],
) {
  const { frequency: freq, amplitude: amp, lineCount, spacing, padding,
    perlinFlow: pfRaw, freqVar: fvRaw, noiseOctaves, spacingVar,
    rotationJitter, opacityVar: ovRaw, colorDrift, enableGradient, gradientType, gradAnimMode } = settings
  const perlinFlow = pfRaw / 100
  const freqVar = fvRaw / 100
  const opacityVar = ovRaw / 100
  const baseHSB = hexToHsb(settings.lineColor)

  const baseSpacing = 20
  const totalHeight = (lineCount - 1) * baseSpacing * spacing
  const startY = (canvasSize - totalHeight) / 2

  for (let i = 0; i < lineCount; i++) {
    const spacingOffset = (props.spacingOffsets[i] ?? 0) * spacingVar
    const baseY = startY + i * baseSpacing * spacing + spacingOffset
    const rotation = (props.rotations[i] ?? 0) * rotationJitter * (Math.PI / 180)
    const opacity = 255 * (1 - opacityVar * Math.abs(props.opacities[i] ?? 0))

    let h: number, s: number, b: number
    if (enableGradient && gradientType === 'perLine') {
      const gc = getPerLineColor(i, lineCount, gradAnimOffset, parsedStops, gradAnimMode)
      h = gc.h; s = gc.s; b = gc.b
    } else {
      h = baseHSB.h; s = baseHSB.s; b = baseHSB.b
    }

    if (colorDrift > 0) {
      h = (h + (props.hueShifts[i] ?? 0) * colorDrift + 360) % 360
    }

    const lineFreq = freq * (props.frequencies[i] ?? 1)
    const phase = props.phases[i] ?? 0

    const hasRotation = rotation !== 0
    if (hasRotation) {
      ctx.save()
      ctx.translate(canvasSize / 2, baseY)
      ctx.rotate(rotation)
      ctx.translate(-canvasSize / 2, -baseY)
    }

    const lineStart = padding
    const lineEnd = canvasSize - padding
    const lineLength = lineEnd - lineStart
    const step = 2

    let vertices: Vertex[] = []

    for (let x = lineStart; x <= lineEnd; x += step) {
      const progress = (x - lineStart) / lineLength

      if (isInGap(progress, i, settings, props)) {
        if (vertices.length > 1) {
          drawSegment(p, ctx, vertices, settings, props, i, canvasSize, canvasSize, h, s, b, opacity, parsedStops, gradAnimOffset)
        }
        vertices = []
        continue
      }

      let y = baseY
      const animPhase = phase + animTime
      const sineY = Math.sin(x * lineFreq + animPhase) * amp

      if (perlinFlow > 0) {
        const perlinY = (getMultiOctaveNoise(p, x * 0.01, i * 0.5 + animTime * 0.1, noiseOctaves) - 0.5) * 2 * amp
        y += sineY + (perlinY - sineY) * perlinFlow
      } else {
        y += sineY
      }

      if (freqVar > 0) {
        const freqMod = 1 + Math.sin(progress * Math.PI * 4) * freqVar
        const modSineY = Math.sin(x * lineFreq * freqMod + animPhase) * amp
        y += (modSineY - sineY) * freqVar
      }

      if (settings.wobble > 0) {
        y += (p.noise(x * 0.1, i * 10) - 0.5) * settings.wobble
      }

      vertices.push({ x, y, progress })
    }

    if (vertices.length > 1) {
      drawSegment(p, ctx, vertices, settings, props, i, canvasSize, canvasSize, h, s, b, opacity, parsedStops, gradAnimOffset)
    }

    if (hasRotation) ctx.restore()
  }
}

function drawVerticalLines(
  p: p5, ctx: CanvasRenderingContext2D, settings: LinesSettings,
  props: LineProperties, canvasSize: number, animTime: number,
  gradAnimOffset: number, parsedStops: HSBStop[],
) {
  const { frequency: freq, amplitude: amp, lineCount, spacing, padding, wobble,
    perlinFlow: pfRaw, freqVar: fvRaw, noiseOctaves, spacingVar,
    rotationJitter, opacityVar: ovRaw, colorDrift, enableGradient, gradientType, gradAnimMode } = settings
  const perlinFlow = pfRaw / 100
  const freqVar = fvRaw / 100
  const opacityVar = ovRaw / 100
  const baseHSB = hexToHsb(settings.lineColor)

  const baseSpacing = 20
  const totalWidth = (lineCount - 1) * baseSpacing * spacing
  const startX = (canvasSize - totalWidth) / 2

  for (let i = 0; i < lineCount; i++) {
    const spacingOffset = (props.spacingOffsets[i] ?? 0) * spacingVar
    const baseX = startX + i * baseSpacing * spacing + spacingOffset
    const rotation = (props.rotations[i] ?? 0) * rotationJitter * (Math.PI / 180)
    const opacity = 255 * (1 - opacityVar * Math.abs(props.opacities[i] ?? 0))

    let h: number, s: number, b: number
    if (enableGradient && gradientType === 'perLine') {
      const gc = getPerLineColor(i, lineCount, gradAnimOffset, parsedStops, gradAnimMode)
      h = gc.h; s = gc.s; b = gc.b
    } else {
      h = baseHSB.h; s = baseHSB.s; b = baseHSB.b
    }

    if (colorDrift > 0) {
      h = (h + (props.hueShifts[i] ?? 0) * colorDrift + 360) % 360
    }

    const lineFreq = freq * (props.frequencies[i] ?? 1)
    const phase = props.phases[i] ?? 0

    const hasRotation = rotation !== 0
    if (hasRotation) {
      ctx.save()
      ctx.translate(baseX, canvasSize / 2)
      ctx.rotate(rotation)
      ctx.translate(-baseX, -canvasSize / 2)
    }

    const lineStart = padding
    const lineEnd = canvasSize - padding
    const lineLength = lineEnd - lineStart
    const step = 2
    let vertices: Vertex[] = []

    for (let y = lineStart; y <= lineEnd; y += step) {
      const progress = (y - lineStart) / lineLength

      if (isInGap(progress, i, settings, props)) {
        if (vertices.length > 1) {
          drawSegment(p, ctx, vertices, settings, props, i, canvasSize, canvasSize, h, s, b, opacity, parsedStops, gradAnimOffset)
        }
        vertices = []
        continue
      }

      let x = baseX
      const animPhase = phase + animTime
      const sineX = Math.sin(y * lineFreq + animPhase) * amp

      if (perlinFlow > 0) {
        const perlinX = (getMultiOctaveNoise(p, y * 0.01, i * 0.5 + animTime * 0.1, noiseOctaves) - 0.5) * 2 * amp
        x += sineX + (perlinX - sineX) * perlinFlow
      } else {
        x += sineX
      }

      if (freqVar > 0) {
        const freqMod = 1 + Math.sin(progress * Math.PI * 4) * freqVar
        const modSineX = Math.sin(y * lineFreq * freqMod + animPhase) * amp
        x += (modSineX - sineX) * freqVar
      }

      if (wobble > 0) {
        x += (p.noise(y * 0.1, i * 10) - 0.5) * wobble
      }

      vertices.push({ x, y, progress })
    }

    if (vertices.length > 1) {
      drawSegment(p, ctx, vertices, settings, props, i, canvasSize, canvasSize, h, s, b, opacity, parsedStops, gradAnimOffset)
    }

    if (hasRotation) ctx.restore()
  }
}

function drawCircles(
  p: p5, ctx: CanvasRenderingContext2D, settings: LinesSettings,
  props: LineProperties, canvasSize: number, animTime: number,
  gradAnimOffset: number, parsedStops: HSBStop[],
) {
  const { frequency: freq, amplitude: amp, lineCount, spacing, padding, wobble,
    perlinFlow: pfRaw, noiseOctaves, opacityVar: ovRaw, colorDrift,
    enableGradient, gradientType, gradAnimMode } = settings
  const perlinFlow = pfRaw / 100
  const opacityVar = ovRaw / 100
  const baseHSB = hexToHsb(settings.lineColor)

  const centerX = canvasSize / 2
  const centerY = canvasSize / 2
  const maxRadius = canvasSize / 2 - padding
  const minRadius = padding
  const radiusStep = (maxRadius - minRadius) / Math.max(1, lineCount - 1)

  for (let i = 0; i < lineCount; i++) {
    const baseRadius = minRadius + i * radiusStep * spacing
    if (baseRadius > maxRadius) continue

    const opacity = 255 * (1 - opacityVar * Math.abs(props.opacities[i] ?? 0))
    let h: number, s: number, b: number
    if (enableGradient && gradientType === 'perLine') {
      const gc = getPerLineColor(i, lineCount, gradAnimOffset, parsedStops, gradAnimMode)
      h = gc.h; s = gc.s; b = gc.b
    } else {
      h = baseHSB.h; s = baseHSB.s; b = baseHSB.b
    }
    if (colorDrift > 0) h = (h + (props.hueShifts[i] ?? 0) * colorDrift + 360) % 360

    const ringFreq = freq * 50 * (props.frequencies[i] ?? 1)
    const phase = props.phases[i] ?? 0
    const steps = Math.floor(Math.PI * 2 * baseRadius / 3)
    const vertices: Vertex[] = []

    for (let j = 0; j <= steps; j++) {
      const angle = (j / steps) * Math.PI * 2
      const progress = j / steps
      const animPhase = phase + animTime
      const sineR = Math.sin(angle * ringFreq + animPhase) * amp * 0.5
      const perlinR = (getMultiOctaveNoise(p, Math.cos(angle) * 2 + i + animTime * 0.1, Math.sin(angle) * 2, noiseOctaves) - 0.5) * amp
      let r = baseRadius + sineR + (perlinR - sineR) * perlinFlow
      if (wobble > 0) r += (p.noise(angle * 3, i * 10) - 0.5) * wobble

      vertices.push({ x: centerX + Math.cos(angle) * r, y: centerY + Math.sin(angle) * r, progress })
    }

    if (vertices.length > 1) {
      drawSegment(p, ctx, vertices, settings, props, i, canvasSize, canvasSize, h, s, b, opacity, parsedStops, gradAnimOffset)
    }
  }
}

function drawDots(
  p: p5, ctx: CanvasRenderingContext2D, settings: LinesSettings,
  props: LineProperties, canvasSize: number, animTime: number,
  gradAnimOffset: number, parsedStops: HSBStop[],
) {
  const { frequency: freq, amplitude: amp, lineCount, spacing, padding, thickness,
    weightVar: wvRaw, perlinFlow: pfRaw, noiseOctaves, opacityVar: ovRaw, colorDrift,
    enableGradient, gradientType, gradAnimMode, watercolor, wcWetness: wcWRaw, wcLayers } = settings
  const perlinFlow = pfRaw / 100
  const opacityVar = ovRaw / 100
  const weightVar = wvRaw / 100
  const wcWetness = wcWRaw / 100
  const baseHSB = hexToHsb(settings.lineColor)

  const baseSpacing = 20
  const totalHeight = (lineCount - 1) * baseSpacing * spacing
  const startY = (canvasSize - totalHeight) / 2
  const dotSpacing = thickness * 8

  for (let i = 0; i < lineCount; i++) {
    const baseY = startY + i * baseSpacing * spacing
    const opacity = 255 * (1 - opacityVar * Math.abs(props.opacities[i] ?? 0))

    let h: number, s: number, b: number
    if (enableGradient && gradientType === 'perLine') {
      const gc = getPerLineColor(i, lineCount, gradAnimOffset, parsedStops, gradAnimMode)
      h = gc.h; s = gc.s; b = gc.b
    } else {
      h = baseHSB.h; s = baseHSB.s; b = baseHSB.b
    }
    if (colorDrift > 0) h = (h + (props.hueShifts[i] ?? 0) * colorDrift + 360) % 360

    const lineFreq = freq * (props.frequencies[i] ?? 1)
    const phase = props.phases[i] ?? 0

    for (let x = padding; x <= canvasSize - padding; x += dotSpacing) {
      const progress = (x - padding) / (canvasSize - 2 * padding)
      const animPhase = phase + animTime
      const sineY = Math.sin(x * lineFreq + animPhase) * amp
      const perlinY = (getMultiOctaveNoise(p, x * 0.01, i * 0.5 + animTime * 0.1, noiseOctaves) - 0.5) * 2 * amp
      const y = baseY + sineY + (perlinY - sineY) * perlinFlow

      const sizeVar = 1 + (p.noise(x * 0.05, i * 5) - 0.5) * weightVar
      const dotSize = thickness * 2 * sizeVar

      let dotH = h, dotS = s, dotB = b
      if (enableGradient && gradientType !== 'perLine') {
        const gc = gradientType === 'alongLine'
          ? getAlongLineColor(progress, gradAnimOffset, parsedStops, gradAnimMode)
          : getSpatialColor(x, y, canvasSize, canvasSize, gradientType, gradAnimOffset, parsedStops, gradAnimMode)
        dotH = gc.h; dotS = gc.s; dotB = gc.b
      }

      if (watercolor) {
        for (let layer = 0; layer < wcLayers; layer++) {
          const layerOpacity = (opacity / 255 / wcLayers) * (0.6 + p.noise(i * 50, layer * 50) * 0.4)
          const offsetX = (p.noise(layer * 100, i) - 0.5) * wcWetness * 4
          const offsetY = (p.noise(layer * 200, i) - 0.5) * wcWetness * 4
          ctx.globalAlpha = layerOpacity
          ctx.fillStyle = hsbToRgbStr(dotH, dotS, dotB)
          ctx.beginPath()
          ctx.arc(x + offsetX, y + offsetY, dotSize * (1 + wcWetness * 0.3) / 2, 0, Math.PI * 2)
          ctx.fill()
        }
        ctx.globalAlpha = 1
      } else {
        ctx.globalAlpha = opacity / 255
        ctx.fillStyle = hsbToRgbStr(dotH, dotS, dotB)
        ctx.beginPath()
        ctx.arc(x, y, dotSize / 2, 0, Math.PI * 2)
        ctx.fill()
        ctx.globalAlpha = 1
      }
    }
  }
}

function drawSpiral(
  p: p5, ctx: CanvasRenderingContext2D, settings: LinesSettings,
  props: LineProperties, canvasSize: number, animTime: number,
  gradAnimOffset: number, parsedStops: HSBStop[],
) {
  const { frequency: freq, amplitude: amp, lineCount, spacing, padding, wobble,
    perlinFlow: pfRaw, noiseOctaves, opacityVar: ovRaw, colorDrift,
    enableGradient, gradientType, gradAnimMode } = settings
  const perlinFlow = pfRaw / 100
  const opacityVar = ovRaw / 100
  const baseHSB = hexToHsb(settings.lineColor)

  const centerX = canvasSize / 2
  const centerY = canvasSize / 2
  const maxRadius = canvasSize / 2 - padding
  const minRadius = padding * 0.5
  const arms = Math.max(1, lineCount)

  for (let arm = 0; arm < arms; arm++) {
    const idx = arm % props.opacities.length
    const opacity = 255 * (1 - opacityVar * Math.abs(props.opacities[idx] ?? 0))

    let h: number, s: number, b: number
    if (enableGradient && gradientType === 'perLine') {
      const gc = getPerLineColor(arm, arms, gradAnimOffset, parsedStops, gradAnimMode)
      h = gc.h; s = gc.s; b = gc.b
    } else {
      h = baseHSB.h; s = baseHSB.s; b = baseHSB.b
    }
    if (colorDrift > 0) h = (h + (props.hueShifts[idx] ?? 0) * colorDrift + 360) % 360

    const armPhase = (arm / arms) * Math.PI * 2
    const spiralFreq = freq * 20 * (props.frequencies[idx] ?? 1)
    const phase = props.phases[idx] ?? 0
    const totalRotations = 3 + spacing * 2
    const steps = Math.floor(totalRotations * 100)
    let vertices: Vertex[] = []

    for (let j = 0; j <= steps; j++) {
      const progress = j / steps
      if (isInGap(progress, idx, settings, props)) {
        if (vertices.length > 1) {
          drawSegment(p, ctx, vertices, settings, props, arm, canvasSize, canvasSize, h, s, b, opacity, parsedStops, gradAnimOffset)
        }
        vertices = []
        continue
      }

      const angle = armPhase + progress * totalRotations * Math.PI * 2 + animTime * 0.5
      const baseRadius = minRadius + progress * (maxRadius - minRadius)
      const animPhase = phase + animTime
      const sineR = Math.sin(angle * spiralFreq + animPhase) * amp * 0.3
      const perlinR = (getMultiOctaveNoise(p, Math.cos(angle) + arm + animTime * 0.1, Math.sin(angle), noiseOctaves) - 0.5) * amp * 0.5
      let r = baseRadius + sineR + (perlinR - sineR) * perlinFlow
      if (wobble > 0) r += (p.noise(angle * 2, arm * 10) - 0.5) * wobble

      vertices.push({ x: centerX + Math.cos(angle) * r, y: centerY + Math.sin(angle) * r, progress })
    }

    if (vertices.length > 1) {
      drawSegment(p, ctx, vertices, settings, props, arm, canvasSize, canvasSize, h, s, b, opacity, parsedStops, gradAnimOffset)
    }
  }
}

function drawRadial(
  p: p5, ctx: CanvasRenderingContext2D, settings: LinesSettings,
  props: LineProperties, canvasSize: number, animTime: number,
  gradAnimOffset: number, parsedStops: HSBStop[],
) {
  const { frequency: freq, amplitude: amp, lineCount, padding, wobble,
    perlinFlow: pfRaw, noiseOctaves, opacityVar: ovRaw, colorDrift,
    enableGradient, gradientType, gradAnimMode } = settings
  const perlinFlow = pfRaw / 100
  const opacityVar = ovRaw / 100
  const baseHSB = hexToHsb(settings.lineColor)

  const centerX = canvasSize / 2
  const centerY = canvasSize / 2
  const maxRadius = canvasSize / 2 - padding
  const minRadius = padding
  const rays = Math.max(1, lineCount)

  for (let i = 0; i < rays; i++) {
    const idx = i % props.opacities.length
    const baseAngle = (i / rays) * Math.PI * 2
    const opacity = 255 * (1 - opacityVar * Math.abs(props.opacities[idx] ?? 0))

    let h: number, s: number, b: number
    if (enableGradient && gradientType === 'perLine') {
      const gc = getPerLineColor(i, rays, gradAnimOffset, parsedStops, gradAnimMode)
      h = gc.h; s = gc.s; b = gc.b
    } else {
      h = baseHSB.h; s = baseHSB.s; b = baseHSB.b
    }
    if (colorDrift > 0) h = (h + (props.hueShifts[idx] ?? 0) * colorDrift + 360) % 360

    const rayFreq = freq * 30 * (props.frequencies[idx] ?? 1)
    const phase = props.phases[idx] ?? 0
    const steps = 50
    let vertices: Vertex[] = []

    for (let j = 0; j <= steps; j++) {
      const progress = j / steps
      if (isInGap(progress, idx, settings, props)) {
        if (vertices.length > 1) {
          drawSegment(p, ctx, vertices, settings, props, i, canvasSize, canvasSize, h, s, b, opacity, parsedStops, gradAnimOffset)
        }
        vertices = []
        continue
      }

      const r = minRadius + progress * (maxRadius - minRadius)
      const animPhase = phase + animTime
      const sineAngle = Math.sin(r * rayFreq * 0.01 + animPhase) * amp * 0.01
      const perlinAngle = (getMultiOctaveNoise(p, r * 0.01, i * 0.5 + animTime * 0.1, noiseOctaves) - 0.5) * amp * 0.02
      const angle = baseAngle + sineAngle + (perlinAngle - sineAngle) * perlinFlow

      let finalR = r
      if (wobble > 0) finalR += (p.noise(r * 0.05, i * 10) - 0.5) * wobble

      vertices.push({ x: centerX + Math.cos(angle) * finalR, y: centerY + Math.sin(angle) * finalR, progress })
    }

    if (vertices.length > 1) {
      drawSegment(p, ctx, vertices, settings, props, i, canvasSize, canvasSize, h, s, b, opacity, parsedStops, gradAnimOffset)
    }
  }
}

function drawLissajous(
  p: p5, ctx: CanvasRenderingContext2D, settings: LinesSettings,
  props: LineProperties, canvasSize: number, animTime: number,
  gradAnimOffset: number, parsedStops: HSBStop[],
) {
  const { lissFreqA: freqA, lissFreqB: freqB, lissPhase: phase, lissScale: scale,
    lissResolution: resolution, oscillonMode, oscillonLayers: layers, oscillonSpread: spread } = settings
  const baseHSB = hexToHsb(settings.lineColor)

  const cx = canvasSize / 2
  const cy = canvasSize / 2
  const scaleAmt = canvasSize * scale * 0.4
  const animPhase = animTime * 0.5

  if (oscillonMode) {
    for (let layer = 0; layer < layers; layer++) {
      const freqOffset = (layer - layers / 2) * spread
      const layerFreqA = freqA + freqOffset * 0.5
      const layerFreqB = freqB + freqOffset
      const layerPhase = phase + layer * 0.2 + animPhase
      const layerOpacity = p.map(layer, 0, layers - 1, 0.3, 1)

      drawSingleLissajous(p, ctx, settings, props, cx, cy, scaleAmt,
        layerFreqA, layerFreqB, layerPhase, resolution, baseHSB,
        layerOpacity, layer, layers, canvasSize,
        parsedStops, gradAnimOffset)
    }
  } else {
    drawSingleLissajous(p, ctx, settings, props, cx, cy, scaleAmt,
      freqA, freqB, phase + animPhase, resolution, baseHSB,
      1, 0, 1, canvasSize, parsedStops, gradAnimOffset)
  }
}

function drawSingleLissajous(
  p: p5, ctx: CanvasRenderingContext2D, settings: LinesSettings,
  props: LineProperties,
  cx: number, cy: number, scale: number,
  freqA: number, freqB: number, phase: number, resolution: number,
  baseHSB: { h: number; s: number; b: number },
  opacity: number, layerIndex: number, totalLayers: number,
  canvasSize: number, parsedStops: HSBStop[], gradAnimOffset: number,
) {
  const { colorDrift, enableGradient, gradientType, gradAnimMode, wobble } = settings
  void gradAnimMode

  const cycles = lcm(Math.round(Math.abs(freqA)) || 1, Math.round(Math.abs(freqB)) || 1) / (Math.round(Math.abs(freqA)) || 1)
  const vertices: Vertex[] = []

  for (let i = 0; i <= resolution; i++) {
    const progress = i / resolution
    const t = progress * Math.PI * 2 * cycles

    let x = cx + Math.sin(freqA * t + phase) * scale
    let y = cy + Math.sin(freqB * t) * scale

    if (wobble > 0) {
      x += (p.noise(t * 0.5, layerIndex * 100) - 0.5) * wobble * 20
      y += (p.noise(t * 0.5, layerIndex * 100 + 50) - 0.5) * wobble * 20
    }

    vertices.push({ x, y, progress })
  }

  let h: number, s: number, b: number
  if (enableGradient && gradientType === 'perLine') {
    const gc = getPerLineColor(layerIndex, totalLayers, gradAnimOffset, parsedStops, gradAnimMode)
    h = gc.h; s = gc.s; b = gc.b
  } else {
    h = baseHSB.h; s = baseHSB.s; b = baseHSB.b
    const idx = layerIndex % (props.hueShifts.length || 1)
    if (colorDrift > 0) h = (h + (props.hueShifts[idx] ?? 0) * colorDrift + 360) % 360
  }

  drawSegment(p, ctx, vertices, settings, props, layerIndex, canvasSize, canvasSize,
    h, s, b, opacity * 255, parsedStops, gradAnimOffset)
}

// ============================================
// Sketch function (inlined from sketch.ts)
// ============================================

interface Recorder {
  addFrame: (canvas: HTMLCanvasElement) => void
}

const CANVAS_SIZE = 1024

// eslint-disable-next-line @typescript-eslint/no-explicit-any
type P5Any = any

const BLEND_MODE_MAP: Record<string, string> = {
  normal: 'source-over',
  add: 'lighter',
  multiply: 'multiply',
  screen: 'screen',
  overlay: 'overlay',
  'hard light': 'hard-light',
  'soft light': 'soft-light',
  dodge: 'color-dodge',
  burn: 'color-burn',
  difference: 'difference',
  exclusion: 'exclusion',
  darken: 'darken',
  lighten: 'lighten',
}

function createLinesSketch(
  p: p5,
  settingsRef: RefObject<LinesSettings>,
  recorderRef: MutableRefObject<Recorder | null>,
) {
  let effectsGraphics: p5.Graphics | null = null
  let postShader: p5.Shader | null = null
  let noiseBuffer: p5.Graphics | null = null
  let noiseGenerated = false

  let animationTime = 0
  let gradAnimOffset = 0
  let wasPlaying = false

  // Cached line properties
  let cachedProps: LineProperties | null = null
  let cachedPropsKey = ''

  // Cached parsed gradient stops
  let cachedStopsKey = ''
  let parsedStops: ReturnType<typeof parseGradientStops> = []

  // Container sizing
  let cachedSize = { w: CANVAS_SIZE, h: CANVAS_SIZE }

  function recomputeContainerSize() {
    const el = (p as P5Any).canvas?.parentElement ?? document.body
    const maxW = el.clientWidth - 40
    const maxH = el.clientHeight - 40
    const scale = Math.min(1, maxW / CANVAS_SIZE, maxH / CANVAS_SIZE)
    cachedSize = { w: Math.floor(CANVAS_SIZE * scale), h: Math.floor(CANVAS_SIZE * scale) }
  }

  function getLineProps(s: LinesSettings): LineProperties {
    const key = `${s.lineCount}|${s.morseDensity}|${s.dotRatio}`
    if (cachedProps && cachedPropsKey === key) return cachedProps
    cachedPropsKey = key
    cachedProps = generateLineProperties(s.lineCount, s.morseDensity, s.dotRatio, p)
    return cachedProps
  }

  function getParsedStops(s: LinesSettings) {
    const key = s.colorStops.map(st => st.color + st.position).join('|')
    if (key !== cachedStopsKey) {
      cachedStopsKey = key
      parsedStops = parseGradientStops(s.colorStops)
    }
    return parsedStops
  }

  function needsShaderEffects(s: LinesSettings): boolean {
    return s.blur > 0 || s.refraction || s.chromaticAb || s.pixelate ||
      s.halftone || s.crt || s.vhs
  }

  let webglFailed = false

  function ensureEffectsBuffer() {
    if (webglFailed) return
    if (!effectsGraphics) {
      try {
        effectsGraphics = p.createGraphics(CANVAS_SIZE, CANVAS_SIZE, p.WEBGL)
        postShader = effectsGraphics.createShader(VERT_SHADER, FRAG_SHADER)
      } catch {
        webglFailed = true
        effectsGraphics = null
        postShader = null
      }
    }
  }

  function generateNoiseBuffer() {
    const canvas = document.createElement('canvas')
    canvas.width = CANVAS_SIZE
    canvas.height = CANVAS_SIZE
    const ctx2 = canvas.getContext('2d')!
    const imageData = ctx2.createImageData(CANVAS_SIZE, CANVAS_SIZE)
    const data = imageData.data

    let seed = (Math.random() * 0xffffffff) >>> 0
    const rand = () => {
      seed ^= seed << 13
      seed ^= seed >> 17
      seed ^= seed << 5
      return (seed >>> 0) / 0xffffffff
    }

    for (let i = 0; i < data.length; i += 4) {
      const grain = (rand() - 0.5) * 0.5
      const modulation = rand() * 0.4 + 0.6
      const speck = rand() < 0.06 ? (rand() - 0.5) * 0.3 : 0
      const dust = rand() < 0.004 ? -rand() * 0.15 : 0

      let v = grain * modulation + speck + dust
      v = 128 + v * 255 * 0.5

      data[i] = v
      data[i + 1] = v
      data[i + 2] = v
      data[i + 3] = 255
    }

    ctx2.putImageData(imageData, 0, 0)

    noiseBuffer = p.createGraphics(CANVAS_SIZE, CANVAS_SIZE)
    ;(noiseBuffer.drawingContext as CanvasRenderingContext2D).drawImage(canvas, 0, 0)
    noiseGenerated = true
  }

  function applyShaderEffects(s: LinesSettings) {
    ensureEffectsBuffer()
    if (!effectsGraphics || !postShader) return

    const currentFrame = p.get()
    effectsGraphics.clear()
    effectsGraphics.resetMatrix()
    effectsGraphics.noStroke()
    effectsGraphics.shader(postShader)

    postShader.setUniform('tex0', currentFrame)
    postShader.setUniform('resolution', [CANVAS_SIZE, CANVAS_SIZE])
    postShader.setUniform('blurAmount', s.blur)
    postShader.setUniform('chromaticAb', s.chromaticAb ? s.chromaticAbAmount : 0.0)

    postShader.setUniform('refractionStrength', s.refraction ? s.refractionStrength / 100.0 : 0.0)
    postShader.setUniform('refractionScale', s.refractionScale / 100.0)
    const refractionTypeMap: Record<string, number> = {
      barrel: 0, pincushion: 1, wavyGlass: 2, liquid: 3, ripple: 4, frosted: 5,
    }
    postShader.setUniform('refractionType', refractionTypeMap[s.refractionType] ?? 3)

    postShader.setUniform('pixelAmount', s.pixelate ? s.pixelateAmount : 0.0)

    postShader.setUniform('halftoneEnabled', s.halftone)
    if (s.halftone) {
      const halftoneTypeMap: Record<string, number> = { dots: 0, lines: 1, crosshatch: 2 }
      postShader.setUniform('halftoneType', halftoneTypeMap[s.halftoneType] ?? 0)
      postShader.setUniform('halftoneSize', s.halftoneSize)
      postShader.setUniform('halftoneAngle', s.halftoneAngle)
      postShader.setUniform('halftoneSoftness', s.halftoneSoftness)
      postShader.setUniform('halftoneCoverage', s.halftoneCoverage)
    }

    postShader.setUniform('time', animationTime * 0.01)
    postShader.setUniform('crtEnabled', s.crt)
    if (s.crt) {
      postShader.setUniform('crtScanlines', s.crtScanlines)
      postShader.setUniform('crtCurvature', s.crtCurvature / 100.0)
      postShader.setUniform('crtVignette', s.crtVignette)
      postShader.setUniform('crtPhosphor', s.crtPhosphor)
    }
    postShader.setUniform('vhsEnabled', s.vhs)
    if (s.vhs) {
      postShader.setUniform('vhsDistortion', s.vhsDistortion)
      postShader.setUniform('vhsTracking', s.vhsTracking)
    }

    effectsGraphics.rect(0, 0, CANVAS_SIZE, CANVAS_SIZE)

    p.image(effectsGraphics, 0, 0, CANVAS_SIZE, CANVAS_SIZE)
  }

  p.setup = () => {
    recomputeContainerSize()
    p.createCanvas(cachedSize.w, cachedSize.h)
    p.pixelDensity(1)
    p.noLoop()
    p.redraw()
  }

  p.windowResized = () => {
    recomputeContainerSize()
    p.resizeCanvas(cachedSize.w, cachedSize.h)
  }

  p.draw = () => {
    const s = settingsRef.current

    if (s.isPlaying && !wasPlaying) {
      p.loop()
      wasPlaying = true
    } else if (!s.isPlaying && wasPlaying) {
      wasPlaying = false
    }

    if (s.isPlaying) {
      animationTime += p.deltaTime * 0.001 * (s.animationSpeed / 50)
      if (s.gradAnimSpeed > 0) {
        gradAnimOffset += s.gradAnimSpeed / 5000
        if (gradAnimOffset > 1) gradAnimOffset -= 1
      }
    }

    if (p.width !== cachedSize.w || p.height !== cachedSize.h) {
      p.resizeCanvas(cachedSize.w, cachedSize.h)
    }

    const canvasSize = Math.min(p.width, p.height)
    const ctx = (p.drawingContext as CanvasRenderingContext2D)

    // Background
    if (s.bgGradient) {
      const sortedStops = [...s.bgGradientStops].sort((a, b) => a.position - b.position)
      const w = p.width, h = p.height
      let gradient: CanvasGradient
      if (s.bgGradientType === 'linear') {
        const angle = (s.bgGradientAngle - 90) * Math.PI / 180
        const cx = w / 2, cy = h / 2
        const diag = Math.sqrt(w * w + h * h) / 2
        gradient = ctx.createLinearGradient(
          cx - Math.cos(angle) * diag, cy - Math.sin(angle) * diag,
          cx + Math.cos(angle) * diag, cy + Math.sin(angle) * diag,
        )
      } else {
        const cx = w / 2, cy = h / 2
        const radius = Math.max(w, h) / 2 * 1.42
        gradient = ctx.createRadialGradient(cx, cy, 0, cx, cy, radius)
      }
      for (const stop of sortedStops) {
        gradient.addColorStop(stop.position / 100, stop.color)
      }
      ctx.fillStyle = gradient
      ctx.fillRect(0, 0, w, h)
    } else {
      p.background(s.bgColor)
    }

    // Blend mode
    ctx.globalCompositeOperation = (BLEND_MODE_MAP[s.blendMode] ?? 'source-over') as GlobalCompositeOperation

    // Line properties
    const props = getLineProps(s)
    const stops = getParsedStops(s)

    ctx.lineCap = 'round'

    // Draw shape
    const sz = canvasSize
    switch (s.shape) {
      case 'horizontal':
        drawHorizontalLines(p, ctx, s, props, sz, animationTime, gradAnimOffset, stops)
        break
      case 'vertical':
        drawVerticalLines(p, ctx, s, props, sz, animationTime, gradAnimOffset, stops)
        break
      case 'circles':
        drawCircles(p, ctx, s, props, sz, animationTime, gradAnimOffset, stops)
        break
      case 'dots':
        drawDots(p, ctx, s, props, sz, animationTime, gradAnimOffset, stops)
        break
      case 'spiral':
        drawSpiral(p, ctx, s, props, sz, animationTime, gradAnimOffset, stops)
        break
      case 'radial':
        drawRadial(p, ctx, s, props, sz, animationTime, gradAnimOffset, stops)
        break
      case 'lissajous':
        drawLissajous(p, ctx, s, props, sz, animationTime, gradAnimOffset, stops)
        break
      default:
        drawHorizontalLines(p, ctx, s, props, sz, animationTime, gradAnimOffset, stops)
    }

    // Reset blend mode
    ctx.globalCompositeOperation = 'source-over'

    // Shader post-processing
    if (needsShaderEffects(s)) {
      applyShaderEffects(s)
    }

    // Noise/grain overlay
    if (s.noise > 0) {
      if (!noiseGenerated) generateNoiseBuffer()
      if (noiseBuffer) {
        p.push()
        p.blendMode(p.OVERLAY)
        p.tint(255, s.noise * 2.55)
        p.image(noiseBuffer, 0, 0, p.width, p.height)
        p.pop()
      }
    }

    // Record frame
    if (recorderRef.current) {
      const canvas = (p as P5Any).canvas
      if (canvas) recorderRef.current.addFrame(canvas)
    }

    // Stop looping if not playing
    if (!s.isPlaying) {
      p.noLoop()
    }
  }
}

// ============================================
// Exported Component
// ============================================

export function Lines(props: Partial<LinesSettings>) {
  const settings = { ...DEFAULTS, ...props }
  const containerRef = useRef<HTMLDivElement>(null)
  const recorderRef = useRef(null)
  useP5(containerRef, (p: p5, settingsRef: RefObject<LinesSettings>) => createLinesSketch(p, settingsRef, recorderRef), settings, { animated: true })
  return <P5Canvas ref={containerRef} />
}
Lines

Installation

Dependencies
