"use client";

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

import { Upload } from "lucide-react";

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

const svgRocket = `data:image/svg+xml;utf8,${encodeURIComponent(`

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">

<defs>

<linearGradient id="g1" x1="0" y1="0" x2="0" y2="1">

<stop offset="0%" stop-color="#ec4899" />

<stop offset="100%" stop-color="#8b5cf6" />

</linearGradient>

</defs>

<path d="M100 20 C100 20, 130 60, 130 110 L150 150 L130 150 L130 170 L70 170 L70 150 L50 150 L70 110 C70 60, 100 20, 100 20 Z" fill="url(#g1)"/>

<circle cx="100" cy="80" r="15" fill="#fff" />

</svg>

`)}`;

const svgServers = `data:image/svg+xml;utf8,${encodeURIComponent(`

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">

<defs>

<linearGradient id="g2" x1="0" y1="0" x2="0" y2="1">

<stop offset="0%" stop-color="#06b6d4" />

<stop offset="100%" stop-color="#3b82f6" />

</linearGradient>

</defs>

<rect x="30" y="40" width="140" height="32" rx="6" fill="url(#g2)"/>

<rect x="30" y="85" width="140" height="32" rx="6" fill="url(#g2)"/>

<rect x="30" y="130" width="140" height="32" rx="6" fill="url(#g2)"/>

<circle cx="50" cy="56" r="5" fill="#fff" />

<circle cx="50" cy="101" r="5" fill="#fff" />

<circle cx="50" cy="146" r="5" fill="#fff" />

</svg>

`)}`;

const svgBridge = `data:image/svg+xml;utf8,${encodeURIComponent(`

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">

<defs>

<linearGradient id="g3" x1="0" y1="0" x2="0" y2="1">

<stop offset="0%" stop-color="#f97316" />

<stop offset="100%" stop-color="#b91c1c" />

</linearGradient>

</defs>

<path d="M0 140 Q 100 60, 200 140 L 200 160 L 0 160 Z" fill="url(#g3)"/>

<rect x="50" y="40" width="12" height="120" fill="url(#g3)"/>

<rect x="138" y="40" width="12" height="120" fill="url(#g3)"/>

<path d="M0 160 L 200 160 L 200 170 L 0 170 Z" fill="url(#g3)" opacity="0.8"/>

</svg>

`)}`;

const TABS = [

{ id: "rocket", label: "Rocket", src: svgRocket },

{ id: "servers", label: "Servers", src: svgServers },

{ id: "bridge", label: "Bridge", src: svgBridge },

];

class Dot {

origX: number;

origY: number;

x: number;

y: number;

color: string;

baseRadius: number;

radius: number;

isBg: boolean;

vx: number;

vy: number;

isFalling: boolean;

constructor(x: number, y: number, color: string, radius: number, isBg: boolean) {

this.origX = x;

this.origY = y;

this.x = x;

this.y = y;

this.color = color;

this.baseRadius = radius;

this.radius = radius;

this.isBg = isBg;

this.vx = 0;

this.vy = 0;

this.isFalling = false;

}

update(time: number, ripples: { x: number; y: number; startTime: number }[], isBurst: boolean, width: number, height: number) {

if (this.isFalling) {

this.vy += 0.5; // gravity

this.x += this.vx;

this.y += this.vy;

return;

}

if (isBurst && !this.isBg) {

this.isFalling = true;

this.vx = (Math.random() - 0.5) * 15;

this.vy = (Math.random() - 0.5) * 15 - (Math.random() * 10);

return;

} else if (isBurst && this.isBg) {

// Background dots just fade or fall slightly

this.isFalling = true;

this.vx = (Math.random() - 0.5) * 2;

this.vy = Math.random() * 5;

}

let dx = 0;

let dy = 0;

let dr = 0;

for (const r of ripples) {

const dist = Math.hypot(this.origX - r.x, this.origY - r.y);

// Wave equation

const elapsed = time - r.startTime;

const wavePhase = (elapsed * 0.015) - (dist * 0.05);

if (wavePhase > 0 && wavePhase < Math.PI * 2) {

const amplitude = Math.sin(wavePhase) * (150 / (dist + 10));

dx += ((this.origX - r.x) / dist) * amplitude;

dy += ((this.origY - r.y) / dist) * amplitude;

dr += (amplitude * 0.05);

}

}

this.x += (this.origX + dx - this.x) * 0.15;

this.y += (this.origY + dy - this.y) * 0.15;

this.radius = Math.max(0.1, this.baseRadius + dr);

}

draw(ctx: CanvasRenderingContext2D) {

ctx.beginPath();

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

ctx.fillStyle = this.color;

ctx.fill();

}

}

const Tracker = ({ className }: { className?: string }) => (

<div className={cn("absolute w-2.5 h-2.5 grid grid-cols-2 grid-rows-2 gap-[2px]", className)}>

<div className="w-1 h-1 bg-[#007AFF] dark:bg-[#3B82F6] rounded-full shadow-[0_0_6px_rgba(59,130,246,0.6)]" />

<div className="w-1 h-1 bg-[#007AFF] dark:bg-[#3B82F6] rounded-full shadow-[0_0_6px_rgba(59,130,246,0.6)]" />

<div className="w-1 h-1 bg-[#007AFF] dark:bg-[#3B82F6] rounded-full shadow-[0_0_6px_rgba(59,130,246,0.6)]" />

<div className="w-1 h-1" />

</div>

);

export function HalftoneDots() {

const [activeTab, setActiveTab] = useState(TABS[0].id);

const canvasRef = useRef<HTMLCanvasElement>(null);

const dotsRef = useRef<Dot[]>([]);

const ripplesRef = useRef<{ x: number; y: number; startTime: number }[]>([]);

const clickCountRef = useRef(0);

const lastClickRef = useRef(0);

const burstRef = useRef(false);

const currentSrcRef = useRef(TABS[0].src);

const fileInputRef = useRef<HTMLInputElement>(null);

const animationFrameRef = useRef<number>(0);

const loadImageToDots = (src: string) => {

const img = new Image();

img.crossOrigin = "anonymous";

img.onload = () => {

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

const bgColor = isDark ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.08)";

const gridCanvas = document.createElement("canvas");

const GRID_SIZE = 50;

gridCanvas.width = GRID_SIZE;

gridCanvas.height = GRID_SIZE;

const ctx = gridCanvas.getContext("2d", { willReadFrequently: true });

if (!ctx) return;

ctx.clearRect(0, 0, GRID_SIZE, GRID_SIZE);

const scale = Math.min(GRID_SIZE / img.width, GRID_SIZE / img.height) * 0.8; // 80% to leave padding

const w = img.width * scale;

const h = img.height * scale;

const dx = (GRID_SIZE - w) / 2;

const dy = (GRID_SIZE - h) / 2;

ctx.drawImage(img, dx, dy, w, h);

const imageData = ctx.getImageData(0, 0, GRID_SIZE, GRID_SIZE);

const data = imageData.data;

const newDots: Dot[] = [];

const SPACING = 400 / GRID_SIZE; // 8px

for(let y = 0; y < GRID_SIZE; y++) {

for(let x = 0; x < GRID_SIZE; x++) {

const i = (y * GRID_SIZE + x) * 4;

const a = data[i+3];

let color = bgColor;

let radius = 1;

let isBg = true;

if (a > 20) {

const r = data[i];

const g = data[i+1];

const b = data[i+2];

// Filter out pure white backgrounds from JPEGs

if (r > 240 && g > 240 && b > 240) {

color = bgColor;

} else {

color = `rgba(${r},${g},${b},${a/255})`;

radius = 2.8;

isBg = false;

}

}

// Add some random jitter to origin for organic feel

const jitterX = (Math.random() - 0.5) * 0.5;

const jitterY = (Math.random() - 0.5) * 0.5;

newDots.push(new Dot(x * SPACING + 4 + jitterX, y * SPACING + 4 + jitterY, color, radius, isBg));

}

}

dotsRef.current = newDots;

};

img.src = src;

};

useEffect(() => {

loadImageToDots(currentSrcRef.current);

// Setup render loop

const render = (time: number) => {

const canvas = canvasRef.current;

if (!canvas) return;

const ctx = canvas.getContext("2d");

if (!ctx) return;

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

// Clean old ripples

ripplesRef.current = ripplesRef.current.filter(r => time - r.startTime < 2000);

dotsRef.current.forEach(dot => {

dot.update(time, ripplesRef.current, burstRef.current, canvas.width, canvas.height);

dot.draw(ctx);

});

animationFrameRef.current = requestAnimationFrame(render);

};

animationFrameRef.current = requestAnimationFrame(render);

return () => {

if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current);

};

}, []);

// Watch theme changes to re-render background dots colors correctly

useEffect(() => {

const observer = new MutationObserver((mutations) => {

mutations.forEach((m) => {

if (m.attributeName === 'class') {

loadImageToDots(currentSrcRef.current);

}

});

});

observer.observe(document.documentElement, { attributes: true });

return () => observer.disconnect();

}, []);

const handleCanvasClick = (e: React.MouseEvent<HTMLCanvasElement>) => {

const canvas = canvasRef.current;

if (!canvas) return;

const rect = canvas.getBoundingClientRect();

// Calculate click pos relative to actual canvas resolution

const scaleX = canvas.width / rect.width;

const scaleY = canvas.height / rect.height;

const cx = (e.clientX - rect.left) * scaleX;

const cy = (e.clientY - rect.top) * scaleY;

ripplesRef.current.push({ x: cx, y: cy, startTime: performance.now() });

const now = Date.now();

if (now - lastClickRef.current < 400) {

clickCountRef.current += 1;

} else {

clickCountRef.current = 1;

}

lastClickRef.current = now;

if (clickCountRef.current >= 4) {

burstRef.current = true;

setTimeout(() => {

burstRef.current = false;

clickCountRef.current = 0;

loadImageToDots(currentSrcRef.current); // Reset

}, 2500);

}

};

const handleTabClick = (tab: typeof TABS[0]) => {

setActiveTab(tab.id);

currentSrcRef.current = tab.src;

loadImageToDots(tab.src);

burstRef.current = false;

};

const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {

const file = e.target.files?.[0];

if (!file) return;

const url = URL.createObjectURL(file);

setActiveTab("upload");

currentSrcRef.current = url;

loadImageToDots(url);

burstRef.current = false;

};

return (

<div className="flex flex-col items-center justify-center w-full min-h-[500px] gap-10 font-matter">

<div className="relative p-6">

<Tracker className="top-0 left-0" />

<Tracker className="top-0 right-0 rotate-90" />

<Tracker className="bottom-0 right-0 rotate-180" />

<Tracker className="bottom-0 left-0 -rotate-90" />

<canvas

ref={canvasRef}

width={400}

height={400}

onClick={handleCanvasClick}

className="cursor-pointer w-full max-w-[320px] sm:max-w-[400px] h-auto aspect-square active:scale-[0.99] transition-transform select-none"

/>

{/* Click me hint */}

<div className="absolute top-[-30px] left-[-20px] -rotate-12 select-none pointer-events-none">

<span className="text-[18px] font-season italic text-zinc-600 dark:text-[#86868B]">click me</span>

<svg className="w-8 h-8 ml-4 mt-1 text-zinc-400 dark:text-[#86868B]" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">

<path d="M10 2 Q 5 15, 20 20" strokeLinecap="round" />

<path d="M15 22 L 21 21 L 18 15" strokeLinecap="round" strokeLinejoin="round" />

</svg>

</div>

</div>

<div className="flex items-center gap-1.5 p-1.5 bg-white/80 dark:bg-gradient-to-b dark:from-[#1C1C1E] dark:to-[#0A0A0C] border border-black/10 dark:border-white/10 dark:border-t-white/20 rounded-full shadow-lg dark:shadow-[0_12px_32px_rgba(0,0,0,0.6),inset_0_1px_0_rgba(255,255,255,0.12)] backdrop-blur-xl">

{TABS.map((tab) => (

<button

key={tab.id}

onClick={() => handleTabClick(tab)}

className={cn(

"px-4 py-1.5 rounded-full text-[13px] font-medium transition-all",

activeTab === tab.id

? "bg-black text-white dark:bg-white dark:text-black font-semibold shadow-sm"

: "text-zinc-600 dark:text-[#86868B] hover:text-zinc-900 dark:hover:text-[#F5F5F7] hover:bg-black/5 dark:hover:bg-white/5"

)}

>

{tab.label}

</button>

))}

<div className="w-[1px] h-4 bg-black/10 dark:bg-white/10 mx-0.5" />

<button

onClick={() => fileInputRef.current?.click()}

className="p-2 rounded-full text-zinc-600 dark:text-[#86868B] hover:text-zinc-900 dark:hover:text-[#F5F5F7] hover:bg-black/5 dark:hover:bg-white/5 transition-colors"

title="Upload custom image"

>

<Upload size={16} />

</button>

<input

type="file"

ref={fileInputRef}

onChange={handleFileUpload}

accept="image/*"

className="hidden"

/>

</div>

</div>

);

}