"use client";

import React, { useEffect, useRef } from "react";

import { cn } from "@/lib/utils";

export interface ImageGenerationProps {

className?: string;

}

export function ImageGeneration({ className }: ImageGenerationProps) {

const canvasRef = useRef<HTMLCanvasElement>(null);

const progressRef = useRef<HTMLSpanElement>(null);

useEffect(() => {

const canvas = canvasRef.current;

if (!canvas) return;

const ctx = canvas.getContext("2d", { alpha: false });

if (!ctx) return;

let width = 0;

let height = 0;

let dpr = 1;

const resize = () => {

const rect = canvas.parentElement?.getBoundingClientRect();

if (rect) {

dpr = window.devicePixelRatio || 1;

width = rect.width;

height = rect.height;

canvas.width = width * dpr;

canvas.height = height * dpr;

ctx.scale(dpr, dpr);

}

};

const ro = new ResizeObserver(resize);

if (canvas.parentElement) {

ro.observe(canvas.parentElement);

}

resize();

let frameId: number;

const startTime = Date.now();

const segmentDuration = 4500; // 4.5s per movement segment (much slower)

const totalSegments = 8;

const duration = segmentDuration * totalSegments;

const keyframes = [

{x: -1, y: -1}, // 0: Top-Left

{x: 0, y: 0}, // 1: Center

{x: 1, y: 1}, // 2: Bottom-Right

{x: 0, y: 0}, // 3: Center

{x: 1, y: -1}, // 4: Top-Right

{x: 0, y: 0}, // 5: Center

{x: -1, y: 1}, // 6: Bottom-Left

{x: 0, y: 0} // 7: Center

];

const render = () => {

const now = Date.now();

const elapsed = now - startTime;

const cycleTime = elapsed % duration;

const segment = Math.floor(cycleTime / segmentDuration);

const rawT = (cycleTime % segmentDuration) / segmentDuration;

// Smooth cosine interpolation for the segment

const t = (1 - Math.cos(rawT * Math.PI)) / 2;

const start = keyframes[segment];

const end = keyframes[(segment + 1) % totalSegments];

const kx = start.x + (end.x - start.x) * t;

const ky = start.y + (end.y - start.y) * t;

// Distance from center (1 = corners, 0 = center)

const dist = Math.max(Math.abs(kx), Math.abs(ky));

const p = 1 - dist;

// Update progress text without triggering React re-renders

if (progressRef.current) {

progressRef.current.innerText = `${Math.floor(p * 100)}%`;

}

const isDark = document.documentElement.classList.contains('dark');

// Draw background

ctx.fillStyle = isDark ? '#111111' : '#fafafa';

ctx.fillRect(0, 0, width, height);

const rgb = isDark ? '255, 255, 255' : '0, 0, 0';

const spacing = 12;

const cx = width / 2;

const cy = height / 2;

const dx = cx * kx;

const dy = cy * ky;

// Radius shrinks as they converge in the center

const baseRadius = 50 + dist * 70;

// 2 moving glow points, perfectly opposite each other

const pt1 = { x: cx + dx, y: cy + dy, radius: baseRadius };

const pt2 = { x: cx - dx, y: cy - dy, radius: baseRadius };

// Draw grid

for (let x = spacing / 2; x < width; x += spacing) {

for (let y = spacing / 2; y < height; y += spacing) {

let totalInfluence = 0;

for (const pt of [pt1, pt2]) {

const d = Math.hypot(x - pt.x, y - pt.y);

// Gaussian-like falloff

const influence = Math.exp(- (d * d) / (pt.radius * pt.radius));

totalInfluence += influence;

}

const clampedInfluence = Math.min(1, totalInfluence);

const minSize = 0.5;

const maxSize = 2.5;

const size = minSize + clampedInfluence * (maxSize - minSize);

const minAlpha = isDark ? 0.08 : 0.04;

const maxAlpha = isDark ? 0.95 : 0.8;

const alpha = minAlpha + clampedInfluence * (maxAlpha - minAlpha);

ctx.fillStyle = `rgba(${rgb}, ${alpha})`;

ctx.beginPath();

ctx.arc(x, y, size, 0, Math.PI * 2);

ctx.fill();

}

}

frameId = requestAnimationFrame(render);

};

frameId = requestAnimationFrame(render);

return () => {

cancelAnimationFrame(frameId);

ro.disconnect();

};

}, []);

return (

<div className={cn("relative w-full max-w-[360px] h-[260px] rounded-[18px] overflow-hidden border border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-[#111111] shadow-sm", className)}>

<canvas ref={canvasRef} className="absolute inset-0 w-full h-full" />

{/* Top right resolution badge */}

<div className="absolute top-4 right-4 rounded-full bg-white/80 dark:bg-black/60 border border-zinc-200 dark:border-white/10 px-2.5 py-1 font-mono text-[11px] text-zinc-600 dark:text-white/80 backdrop-blur-md flex items-center justify-center">

1024 &times; 768

</div>

{/* Bottom left progress badge */}

<div className="absolute bottom-4 left-4 rounded-full bg-zinc-900/90 dark:bg-black/80 border border-black/10 dark:border-white/10 px-2.5 py-1 font-mono text-[11px] text-white backdrop-blur-md min-w-[42px] flex items-center justify-center tabular-nums">

<span ref={progressRef}>0%</span>

</div>

</div>

);

}