"use client";

import { useEffect, useRef } from "react";
import { useAnimationFrame } from "motion/react";

// ─── Constants ───────────────────────────────────────────────────────────────
const W = 400;
const H = 533;
const N = 800;
const LOOP_MS = 10_000;
const CX = W / 2;
const CY = H / 2;

// Concentric rings for the vortex phase
const RINGS = [28, 56, 84, 112, 140, 168];   // radii
const RING_OMEGA = [1.1, 0.85, 0.65, 0.5, 0.38, 0.28]; // rad/s (inner faster)

// ─── Seeded RNG ───────────────────────────────────────────────────────────────
function mkRng(seed: number) {
  let s = seed | 0;
  return (): number => {
    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;
  };
}

// ─── Math ─────────────────────────────────────────────────────────────────────
const eio = (t: number): number =>
  t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
const lerp = (a: number, b: number, t: number): number => a + (b - a) * t;
const clamp = (v: number, lo: number, hi: number): number =>
  v < lo ? lo : v > hi ? hi : v;

type KF = { x: number; y: number; rot: number; sc: number; op: number };

function lerpKF(a: KF, b: KF, t: number): KF {
  const e = eio(clamp(t, 0, 1));
  return {
    x: lerp(a.x, b.x, e),
    y: lerp(a.y, b.y, e),
    rot: lerp(a.rot, b.rot, e),
    sc: lerp(a.sc, b.sc, e),
    op: lerp(a.op, b.op, e),
  };
}

// ─── Particle ─────────────────────────────────────────────────────────────────
type Particle = {
  scatter: KF;
  // Vortex ring membership
  ringIdx: number;     // which concentric ring (0 = innermost)
  ringAngle: number;   // position within that ring (radians)
  // P-letter target
  pTarget: KF;
  pFlow: KF;
  end: KF;
  delay: number;
  nFreq: number;
  nPhase: number;
  nAmp: number;
  bright: number;
};

// ─── Sample P shape ───────────────────────────────────────────────────────────
function samplePShape(count: number, rand: () => number): KF[] {
  const ow = 300, oh = 400;
  const c = document.createElement("canvas");
  c.width = ow;
  c.height = oh;
  const ctx = c.getContext("2d")!;
  ctx.fillStyle = "#fff";
  ctx.font = `900 ${Math.round(oh * 0.72)}px Arial,Helvetica,sans-serif`;
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillText("P", ow / 2, oh / 2);
  const d = ctx.getImageData(0, 0, ow, oh).data;
  const pts: { x: number; y: number }[] = [];
  for (let y = 0; y < oh; y++) {
    for (let x = 0; x < ow; x++) {
      if (d[(y * ow + x) * 4 + 3] > 100) {
        pts.push({
          x: CX + (x / ow - 0.5) * W * 0.58,
          y: CY + (y / oh - 0.5) * H * 0.58,
        });
      }
    }
  }
  return Array.from({ length: count }, () => {
    const pt = pts[Math.floor(rand() * pts.length)];
    return {
      x: pt.x + (rand() - 0.5) * 2,
      y: pt.y + (rand() - 0.5) * 2,
      rot: (rand() - 0.5) * 0.3,
      sc: 0.45 + rand() * 0.3,
      op: 0.75 + rand() * 0.25,
    } satisfies KF;
  });
}

// ─── Build particles ──────────────────────────────────────────────────────────
function buildParticles(pKFs: KF[], rand: () => number): Particle[] {
  // Distribute particles across rings roughly by ring area proportion
  const ringAreas = RINGS.map((r) => r * r);
  const totalArea = ringAreas.reduce((a, b) => a + b, 0);
  const ringCounts = ringAreas.map((a) => Math.round((a / totalArea) * N));

  const assignments: { ringIdx: number; ringAngle: number }[] = [];
  for (let r = 0; r < RINGS.length; r++) {
    const count = ringCounts[r];
    for (let k = 0; k < count; k++) {
      // Evenly space + small random jitter
      const baseAngle = (k / count) * 2 * Math.PI;
      const jitter = (rand() - 0.5) * (2 * Math.PI) / count;
      assignments.push({ ringIdx: r, ringAngle: baseAngle + jitter });
    }
  }
  // Pad/trim to exactly N
  while (assignments.length < N) {
    const r = Math.floor(rand() * RINGS.length);
    assignments.push({ ringIdx: r, ringAngle: rand() * Math.PI * 2 });
  }

  return Array.from({ length: N }, (_, i) => {
    const asgn = assignments[i % assignments.length];
    const sx = rand() * W;
    const sy = rand() * H;
    const pt = pKFs[i % pKFs.length];

    const scatter: KF = {
      x: sx,
      y: sy,
      rot: (rand() - 0.5) * 1.6,
      sc: 0.5 + rand() * 1.1,
      op: 0.35 + rand() * 0.55,
    };

    return {
      scatter,
      ringIdx: asgn.ringIdx,
      ringAngle: asgn.ringAngle,
      pTarget: pt,
      pFlow: {
        x: pt.x + (rand() - 0.5) * 7,
        y: pt.y + (rand() - 0.5) * 7,
        rot: (rand() - 0.5) * 0.4,
        sc: pt.sc,
        op: 0.65 + rand() * 0.35,
      },
      end: { ...scatter },
      delay: rand() * 0.4,
      nFreq: 0.3 + rand() * 1.2,
      nPhase: rand() * Math.PI * 2,
      nAmp: 0.6 + rand() * 2.8,
      bright: 0.5 + rand() * 0.5,
    };
  });
}

// ─── Component ────────────────────────────────────────────────────────────────
export default function AnimatedP() {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const dataRef = useRef<Particle[]>([]);
  const readyRef = useRef(false);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const dpr = window.devicePixelRatio || 1;
    canvas.width = W * dpr;
    canvas.height = H * dpr;
    const rand = mkRng(42);
    const pKFs = samplePShape(N, rand);
    dataRef.current = buildParticles(pKFs, rand);
    readyRef.current = true;
  }, []);

  useAnimationFrame((ms) => {
    const canvas = canvasRef.current;
    if (!canvas || !readyRef.current) return;
    const ctx = canvas.getContext("2d");
    if (!ctx) return;

    const dpr = window.devicePixelRatio || 1;
    const t = (ms % LOOP_MS) / 1000; // 0–10 s
    const elapsed = ms / 1000;       // absolute seconds

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

    ctx.font = `${8 * dpr}px 'Courier New',Courier,monospace`;
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";

    for (const p of dataRef.current) {
      const pt = Math.max(0, t - p.delay);

      // ── Vortex ring position (rotates over time) ─────────────────────────
      const omega = RING_OMEGA[p.ringIdx];
      const liveAngle = p.ringAngle + elapsed * omega;
      const r = RINGS[p.ringIdx];
      const ringScale = lerp(1.6, 0.7, p.ringIdx / (RINGS.length - 1)); // inner = bigger
      const vortexKF: KF = {
        x: CX + Math.cos(liveAngle) * r,
        y: CY + Math.sin(liveAngle) * r,
        rot: liveAngle * 0.3,    // particles tilt as they orbit
        sc: ringScale,
        op: lerp(0.9, 0.65, p.ringIdx / (RINGS.length - 1)),
      };

      let kf: KF;

      if (pt < 0.8) {
        // Scatter — idle with noise
        kf = { ...p.scatter };
      } else if (pt < 2.5) {
        // Scatter → vortex rings (curved arc paths)
        const lt = (pt - 0.8) / 1.7;
        // Tangential force creates orbital arc rather than straight line
        const dx = vortexKF.x - p.scatter.x;
        const dy = vortexKF.y - p.scatter.y;
        const dist = Math.sqrt(dx * dx + dy * dy) || 1;
        const tx = -dy / dist;
        const ty = dx / dist;
        const arc = Math.sin(lt * Math.PI) * dist * 0.4;
        const base = lerpKF(p.scatter, vortexKF, lt);
        kf = { ...base, x: base.x + tx * arc, y: base.y + ty * arc };
      } else if (pt < 4.5) {
        // Vortex → P formation
        kf = lerpKF(vortexKF, p.pTarget, (pt - 2.5) / 2.0);
      } else if (pt < 6.5) {
        // P flowing
        kf = lerpKF(p.pTarget, p.pFlow, (pt - 4.5) / 2.0);
      } else if (pt < 8.5) {
        // Dissolve back to scatter
        kf = lerpKF(p.pFlow, p.scatter, (pt - 6.5) / 2.0);
      } else {
        // Settle
        kf = lerpKF(p.scatter, p.end, (pt - 8.5) / 1.5);
      }

      // Continuous positional noise
      const nx = Math.sin(ms * 0.001 * p.nFreq + p.nPhase) * p.nAmp;
      const ny = Math.cos(ms * 0.001 * p.nFreq * 0.73 + p.nPhase) * p.nAmp;

      ctx.save();
      ctx.translate((kf.x + nx) * dpr, (kf.y + ny) * dpr);
      ctx.rotate(kf.rot);
      ctx.scale(kf.sc, kf.sc);
      ctx.globalAlpha = clamp(kf.op, 0, 1);
      ctx.strokeStyle = `rgba(255,255,255,${p.bright.toFixed(2)})`;
      ctx.lineWidth = 0.6 * dpr;
      ctx.strokeText("p", 0, 0);
      ctx.restore();
    }
  });

  return (
    <div
      className="flex size-full min-h-[420px] items-center justify-center"

    >
      <canvas
        ref={canvasRef}
        style={{
          display: "block",
          width: `${W}px`,
          height: `${H}px`,
          maxWidth: "100%",
        }}
      />
    </div>
  );
}
Animated P
