'use client'

import { useEffect, useRef } from 'react'

/* ─── Animated data stream (Track 1) ─── */
/* Compact flowing waveform + particles, self-contained */

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

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

    const dpr = window.devicePixelRatio || 1
    let w = 0, h = 0

    const resize = () => {
      const rect = canvas.getBoundingClientRect()
      w = rect.width
      h = rect.height
      canvas.width = w * dpr
      canvas.height = h * dpr
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
    }
    resize()

    const particles: { x: number; y: number; vy: number; size: number; alpha: number }[] = []
    for (let i = 0; i < 30; i++) {
      particles.push({
        x: Math.random() * 250,
        y: Math.random() * 300,
        vy: -0.2 - Math.random() * 0.5,
        size: 1 + Math.random() * 2,
        alpha: 0.15 + Math.random() * 0.35,
      })
    }

    let t = 0
    let animId: number

    const draw = () => {
      ctx.clearRect(0, 0, w, h)
      t += 0.02

      // Flowing wave lines
      for (let line = 0; line < 4; line++) {
        ctx.beginPath()
        const baseY = h * 0.25 + line * (h * 0.15)
        for (let x = 0; x <= w; x += 2) {
          const y = baseY + Math.sin(x * 0.03 + t + line * 1.5) * 12 + Math.sin(x * 0.015 + t * 0.7) * 8
          if (x === 0) ctx.moveTo(x, y)
          else ctx.lineTo(x, y)
        }
        ctx.strokeStyle = `rgba(217, 94, 42, ${0.06 + line * 0.03})`
        ctx.lineWidth = 1
        ctx.stroke()
      }

      // Particles
      particles.forEach((p) => {
        ctx.beginPath()
        ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2)
        ctx.fillStyle = `rgba(217, 94, 42, ${p.alpha})`
        ctx.fill()

        p.y += p.vy
        if (p.y < -5) { p.y = h + 5; p.x = Math.random() * w }
      })

      // Connections between close particles
      for (let i = 0; i < particles.length; i++) {
        for (let j = i + 1; j < particles.length; j++) {
          const dx = particles[i].x - particles[j].x
          const dy = particles[i].y - particles[j].y
          const dist = Math.sqrt(dx * dx + dy * dy)
          if (dist < 60) {
            ctx.beginPath()
            ctx.moveTo(particles[i].x, particles[i].y)
            ctx.lineTo(particles[j].x, particles[j].y)
            ctx.strokeStyle = `rgba(217, 94, 42, ${0.06 * (1 - dist / 60)})`
            ctx.lineWidth = 0.5
            ctx.stroke()
          }
        }
      }

      animId = requestAnimationFrame(draw)
    }
    draw()

    window.addEventListener('resize', resize)
    return () => { cancelAnimationFrame(animId); window.removeEventListener('resize', resize) }
  }, [])

  return <canvas ref={canvasRef} className="absolute inset-0 w-full h-full" style={{ display: 'block' }} />
}

/* ─── Pulsing lock with rings (Track 2) ─── */

export function SecureViz() {
  return (
    <div className="absolute inset-0 flex items-center justify-center">
      {/* Pulsing rings */}
      <div className="absolute w-20 h-20 rounded-full border border-emerald-500/15 animate-ping [animation-duration:3s]" />
      <div className="absolute w-32 h-32 rounded-full border border-emerald-500/8 animate-ping [animation-duration:4s] [animation-delay:0.5s]" />
      <div className="absolute w-44 h-44 rounded-full border border-emerald-500/[0.04] animate-ping [animation-duration:5s] [animation-delay:1s]" />

      {/* Rotating orbit */}
      <svg className="absolute w-28 h-28 animate-[spin_15s_linear_infinite]" viewBox="0 0 100 100" fill="none">
        <circle cx="50" cy="50" r="45" stroke="rgba(16,185,129,0.12)" strokeWidth="0.8" strokeDasharray="4 6" />
      </svg>
      <svg className="absolute w-40 h-40 animate-[spin_25s_linear_infinite_reverse]" viewBox="0 0 100 100" fill="none">
        <circle cx="50" cy="50" r="45" stroke="rgba(16,185,129,0.07)" strokeWidth="0.5" strokeDasharray="2 8" />
      </svg>

      {/* Orbiting dots */}
      <div className="absolute w-24 h-24 animate-[spin_6s_linear_infinite]">
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-1.5 h-1.5 rounded-full bg-emerald-400/50" />
      </div>
      <div className="absolute w-36 h-36 animate-[spin_10s_linear_infinite_reverse]">
        <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-1 h-1 rounded-full bg-emerald-400/30" />
      </div>

      {/* Center lock */}
      <div className="relative z-10 w-14 h-14 rounded-xl bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center">
        <svg className="w-6 h-6 text-emerald-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <rect width="18" height="11" x="3" y="11" rx="2" ry="2" />
          <path d="M7 11V7a5 5 0 0 1 10 0v4" />
          <circle cx="12" cy="16" r="1" fill="currentColor" />
        </svg>
      </div>
    </div>
  )
}

/* ─── Radar sweep (Track 3 — Derail Detection) ─── */

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

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

    const dpr = window.devicePixelRatio || 1
    let w = 0, h = 0

    const resize = () => {
      const rect = canvas.getBoundingClientRect()
      w = rect.width
      h = rect.height
      canvas.width = w * dpr
      canvas.height = h * dpr
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
    }
    resize()

    let t = 0
    let animId: number

    const blips = Array.from({ length: 6 }, () => ({
      angle: Math.random() * Math.PI * 2,
      dist: 0.3 + Math.random() * 0.55,
      flash: 0,
    }))

    const draw = () => {
      ctx.clearRect(0, 0, w, h)
      t += 0.012

      const cx = w / 2, cy = h / 2
      const maxR = Math.min(w, h) * 0.42

      // Concentric rings
      for (let i = 1; i <= 3; i++) {
        ctx.beginPath()
        ctx.arc(cx, cy, maxR * (i / 3), 0, Math.PI * 2)
        ctx.strokeStyle = `rgba(245, 158, 11, ${0.06 + i * 0.02})`
        ctx.lineWidth = 0.5
        ctx.stroke()
      }

      // Cross lines
      ctx.strokeStyle = 'rgba(245, 158, 11, 0.06)'
      ctx.lineWidth = 0.5
      ctx.beginPath(); ctx.moveTo(cx - maxR, cy); ctx.lineTo(cx + maxR, cy); ctx.stroke()
      ctx.beginPath(); ctx.moveTo(cx, cy - maxR); ctx.lineTo(cx, cy + maxR); ctx.stroke()

      // Sweep line
      const sweepAngle = t * 1.5
      const sx = cx + Math.cos(sweepAngle) * maxR
      const sy = cy + Math.sin(sweepAngle) * maxR
      ctx.beginPath()
      ctx.moveTo(cx, cy)
      ctx.lineTo(sx, sy)
      ctx.strokeStyle = 'rgba(245, 158, 11, 0.3)'
      ctx.lineWidth = 1
      ctx.stroke()

      // Sweep trail (fading arc segments)
      const trailLength = 0.6
      const segments = 12
      for (let s = 0; s < segments; s++) {
        const frac = s / segments
        const a0 = sweepAngle - trailLength * (1 - frac)
        const a1 = sweepAngle - trailLength * (1 - (s + 1) / segments)
        ctx.beginPath()
        ctx.moveTo(cx, cy)
        ctx.arc(cx, cy, maxR, a0, a1)
        ctx.closePath()
        ctx.fillStyle = `rgba(245, 158, 11, ${frac * 0.08})`
        ctx.fill()
      }

      // Blips
      blips.forEach((b) => {
        const angleDiff = ((sweepAngle % (Math.PI * 2)) - b.angle + Math.PI * 4) % (Math.PI * 2)
        if (angleDiff < 0.15) b.flash = 1
        b.flash *= 0.96
        if (b.flash > 0.01) {
          const bx = cx + Math.cos(b.angle) * maxR * b.dist
          const by = cy + Math.sin(b.angle) * maxR * b.dist
          ctx.beginPath()
          ctx.arc(bx, by, 2 + b.flash * 2, 0, Math.PI * 2)
          ctx.fillStyle = `rgba(245, 158, 11, ${b.flash * 0.6})`
          ctx.fill()
        }
      })

      // Center dot
      ctx.beginPath()
      ctx.arc(cx, cy, 2.5, 0, Math.PI * 2)
      ctx.fillStyle = 'rgba(245, 158, 11, 0.5)'
      ctx.fill()

      animId = requestAnimationFrame(draw)
    }
    draw()

    window.addEventListener('resize', resize)
    return () => { cancelAnimationFrame(animId); window.removeEventListener('resize', resize) }
  }, [])

  return <canvas ref={canvasRef} className="absolute inset-0 w-full h-full" style={{ display: 'block' }} />
}

/* ─── Scanning grid (Track 4 — Malicious Request Detection) ─── */

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

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

    const dpr = window.devicePixelRatio || 1
    let w = 0, h = 0

    const resize = () => {
      const rect = canvas.getBoundingClientRect()
      w = rect.width
      h = rect.height
      canvas.width = w * dpr
      canvas.height = h * dpr
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
    }
    resize()

    let t = 0
    let animId: number

    const cells = Array.from({ length: 40 }, () => ({
      col: Math.floor(Math.random() * 8),
      row: Math.floor(Math.random() * 10),
      threat: Math.random() < 0.25,
      flash: 0,
    }))

    const draw = () => {
      ctx.clearRect(0, 0, w, h)
      t += 0.015

      const cellW = w / 8, cellH = h / 10

      // Grid lines
      for (let i = 0; i <= 8; i++) {
        ctx.beginPath()
        ctx.moveTo(i * cellW, 0); ctx.lineTo(i * cellW, h)
        ctx.strokeStyle = 'rgba(6, 182, 212, 0.06)'
        ctx.lineWidth = 0.5
        ctx.stroke()
      }
      for (let i = 0; i <= 10; i++) {
        ctx.beginPath()
        ctx.moveTo(0, i * cellH); ctx.lineTo(w, i * cellH)
        ctx.strokeStyle = 'rgba(6, 182, 212, 0.06)'
        ctx.lineWidth = 0.5
        ctx.stroke()
      }

      // Scan line (horizontal, sweeping down)
      const scanY = (t * 0.5 % 1) * h
      ctx.beginPath()
      ctx.moveTo(0, scanY); ctx.lineTo(w, scanY)
      ctx.strokeStyle = 'rgba(6, 182, 212, 0.4)'
      ctx.lineWidth = 1.5
      ctx.stroke()

      // Scan line glow
      const scanGrad = ctx.createLinearGradient(0, scanY - 30, 0, scanY)
      scanGrad.addColorStop(0, 'rgba(6, 182, 212, 0)')
      scanGrad.addColorStop(1, 'rgba(6, 182, 212, 0.06)')
      ctx.fillStyle = scanGrad
      ctx.fillRect(0, scanY - 30, w, 30)

      // Cells
      cells.forEach((c) => {
        const cellY = c.row * cellH + cellH / 2
        if (Math.abs(scanY - cellY) < cellH * 0.7) c.flash = 1
        c.flash *= 0.97

        if (c.flash > 0.01) {
          const x = c.col * cellW + cellW * 0.15
          const y = c.row * cellH + cellH * 0.15
          const cw = cellW * 0.7, ch = cellH * 0.7
          ctx.fillStyle = c.threat
            ? `rgba(239, 68, 68, ${c.flash * 0.15})`
            : `rgba(6, 182, 212, ${c.flash * 0.08})`
          ctx.fillRect(x, y, cw, ch)

          if (c.threat && c.flash > 0.3) {
            ctx.strokeStyle = `rgba(239, 68, 68, ${c.flash * 0.3})`
            ctx.lineWidth = 0.8
            ctx.strokeRect(x, y, cw, ch)
          }
        }
      })

      animId = requestAnimationFrame(draw)
    }
    draw()

    window.addEventListener('resize', resize)
    return () => { cancelAnimationFrame(animId); window.removeEventListener('resize', resize) }
  }, [])

  return <canvas ref={canvasRef} className="absolute inset-0 w-full h-full" style={{ display: 'block' }} />
}

/* ─── Floating code snippets (Track 5 — Response Rewriting) ─── */

export function ExtendViz() {
  const snippets = [
    { x: '10%', y: '12%', text: 'fn extend()', delay: '0s' },
    { x: '45%', y: '8%', text: '<Plugin />', delay: '0.8s' },
    { x: '20%', y: '45%', text: '.hook()', delay: '1.2s' },
    { x: '55%', y: '42%', text: 'export', delay: '0.4s' },
    { x: '15%', y: '75%', text: 'pipe()', delay: '1.6s' },
    { x: '50%', y: '78%', text: 'import', delay: '0.6s' },
  ]

  return (
    <div className="absolute inset-0 flex items-center justify-center">
      {/* Radiating lines */}
      <svg className="absolute inset-0 w-full h-full opacity-40" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet">
        {[0, 45, 90, 135, 180, 225, 270, 315].map((angle) => {
          const rad = (angle * Math.PI) / 180
          return (
            <line
              key={angle}
              x1="100" y1="100"
              x2={100 + Math.cos(rad) * 90} y2={100 + Math.sin(rad) * 90}
              stroke="rgba(139, 92, 246, 0.08)"
              strokeWidth="0.5"
              strokeDasharray="2 4"
            />
          )
        })}
      </svg>

      {/* Floating snippets */}
      {snippets.map((s, i) => (
        <div
          key={i}
          className="absolute font-mono text-[9px] px-1.5 py-1 rounded bg-violet-500/8 border border-violet-500/15 text-violet-300/40 animate-pulse whitespace-nowrap"
          style={{ left: s.x, top: s.y, animationDelay: s.delay, animationDuration: '3s' }}
        >
          {s.text}
        </div>
      ))}

      {/* Center node */}
      <div className="relative z-10 w-14 h-14 rounded-xl bg-violet-500/10 border border-violet-500/20 flex items-center justify-center">
        <svg className="w-6 h-6 text-violet-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <polyline points="16 18 22 12 16 6" /><polyline points="8 6 2 12 8 18" />
        </svg>
      </div>
    </div>
  )
}

/* ─── Benchmark grid (Track 6 — Control Evaluation Benchmark) ─── */

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

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

    const dpr = window.devicePixelRatio || 1
    let w = 0, h = 0

    const resize = () => {
      const rect = canvas.getBoundingClientRect()
      w = rect.width
      h = rect.height
      canvas.width = w * dpr
      canvas.height = h * dpr
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
    }
    resize()

    let t = 0
    let animId: number

    const cols = 6, rows = 8
    const cells = Array.from({ length: cols * rows }, (_, i) => ({
      pass: Math.random() > 0.25,
      revealAt: Math.random() * 4 + (Math.floor(i / cols)) * 0.3,
      pulsePhase: Math.random() * Math.PI * 2,
    }))

    const draw = () => {
      ctx.clearRect(0, 0, w, h)
      t += 0.016

      const padX = w * 0.08, padY = h * 0.06
      const cellW = (w - padX * 2) / cols
      const cellH = (h - padY * 2) / rows
      const gap = 2.5
      const loopT = t % 6

      cells.forEach((cell, i) => {
        const col = i % cols
        const row = Math.floor(i / cols)
        const x = padX + col * cellW + gap
        const y = padY + row * cellH + gap
        const cw = cellW - gap * 2
        const ch = cellH - gap * 2
        const r = Math.min(cw, ch) * 0.15

        if (loopT < cell.revealAt) {
          // Not yet revealed — dim outline
          ctx.strokeStyle = 'rgba(244, 63, 94, 0.06)'
          ctx.lineWidth = 0.5
          ctx.beginPath()
          ctx.roundRect(x, y, cw, ch, r)
          ctx.stroke()
          return
        }

        // Reveal animation
        const revealProgress = Math.min((loopT - cell.revealAt) * 2, 1)
        const pulse = Math.sin(t * 2 + cell.pulsePhase) * 0.15 + 0.85

        if (cell.pass) {
          // Pass — rose/green tint
          ctx.fillStyle = `rgba(74, 222, 128, ${0.12 * revealProgress * pulse})`
          ctx.beginPath()
          ctx.roundRect(x, y, cw, ch, r)
          ctx.fill()

          ctx.strokeStyle = `rgba(74, 222, 128, ${0.25 * revealProgress})`
          ctx.lineWidth = 0.5
          ctx.beginPath()
          ctx.roundRect(x, y, cw, ch, r)
          ctx.stroke()

          // Checkmark
          if (revealProgress > 0.5) {
            const alpha = (revealProgress - 0.5) * 2
            const cx = x + cw / 2, cy = y + ch / 2
            const s = Math.min(cw, ch) * 0.2
            ctx.strokeStyle = `rgba(74, 222, 128, ${0.5 * alpha})`
            ctx.lineWidth = 1.2
            ctx.beginPath()
            ctx.moveTo(cx - s * 0.6, cy)
            ctx.lineTo(cx - s * 0.1, cy + s * 0.5)
            ctx.lineTo(cx + s * 0.6, cy - s * 0.4)
            ctx.stroke()
          }
        } else {
          // Fail — red tint
          ctx.fillStyle = `rgba(244, 63, 94, ${0.15 * revealProgress * pulse})`
          ctx.beginPath()
          ctx.roundRect(x, y, cw, ch, r)
          ctx.fill()

          ctx.strokeStyle = `rgba(244, 63, 94, ${0.3 * revealProgress})`
          ctx.lineWidth = 0.5
          ctx.beginPath()
          ctx.roundRect(x, y, cw, ch, r)
          ctx.stroke()

          // X mark
          if (revealProgress > 0.5) {
            const alpha = (revealProgress - 0.5) * 2
            const cx = x + cw / 2, cy = y + ch / 2
            const s = Math.min(cw, ch) * 0.18
            ctx.strokeStyle = `rgba(244, 63, 94, ${0.5 * alpha})`
            ctx.lineWidth = 1.2
            ctx.beginPath()
            ctx.moveTo(cx - s, cy - s)
            ctx.lineTo(cx + s, cy + s)
            ctx.moveTo(cx + s, cy - s)
            ctx.lineTo(cx - s, cy + s)
            ctx.stroke()
          }
        }
      })

      // Progress bar at bottom
      const barY = h - padY * 0.6
      const barH = 2
      const progress = Math.min(loopT / 5, 1)
      ctx.fillStyle = 'rgba(244, 63, 94, 0.08)'
      ctx.fillRect(padX, barY, w - padX * 2, barH)
      ctx.fillStyle = 'rgba(244, 63, 94, 0.3)'
      ctx.fillRect(padX, barY, (w - padX * 2) * progress, barH)

      animId = requestAnimationFrame(draw)
    }
    draw()

    window.addEventListener('resize', resize)
    return () => { cancelAnimationFrame(animId); window.removeEventListener('resize', resize) }
  }, [])

  return <canvas ref={canvasRef} className="absolute inset-0 w-full h-full" style={{ display: 'block' }} />
}