'use client';

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

type Star = {
    x: number;
    y: number;
    radius: number;
    opacity: number;
    speed: number;
    twinkleSpeed: number;
    color: string;
};

export default function StarBackground() {
    const canvasRef = useRef<HTMLCanvasElement | null>(null);

    useEffect(() => {
        const canvas = canvasRef.current;
        if (!canvas) return;

        const ctx = canvas.getContext('2d');
        if (!ctx) return;

        let animationFrameId: number;

        const resizeCanvas = () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        };

        resizeCanvas();
        window.addEventListener('resize', resizeCanvas);

        const palette = [
            '#ffffff',
            '#f8c8dc',
            '#e85d9e',
            '#c43d7a',
            '#d8b16a',
        ];

        const stars: Star[] = [];
        const numStars = 180;

        for (let i = 0; i < numStars; i++) {
            stars.push({
                x: Math.random() * canvas.width,
                y: Math.random() * canvas.height,
                radius: Math.random() * 1.8 + 0.4,
                opacity: Math.random() * 0.6 + 0.3,
                speed: Math.random() * 0.35 + 0.08,
                twinkleSpeed: Math.random() * 0.02 + 0.005,
                color: palette[Math.floor(Math.random() * palette.length)],
            });
        }

        const hexToRgb = (hex: string) => {
            const cleanHex = hex.replace('#', '');
            const bigint = parseInt(cleanHex, 16);
            return {
                r: (bigint >> 16) & 255,
                g: (bigint >> 8) & 255,
                b: bigint & 255,
            };
        };

        const animate = () => {
            const bgGradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
            bgGradient.addColorStop(0, '#fff7fb');
            bgGradient.addColorStop(0.45, '#fce7f3');
            bgGradient.addColorStop(0.75, '#f8c8dc');
            bgGradient.addColorStop(1, '#fff0f6');

            ctx.fillStyle = bgGradient;
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            const glow1 = ctx.createRadialGradient(
                canvas.width * 0.2,
                canvas.height * 0.2,
                0,
                canvas.width * 0.2,
                canvas.height * 0.2,
                canvas.width * 0.35
            );
            glow1.addColorStop(0, 'rgba(232, 93, 158, 0.16)');
            glow1.addColorStop(1, 'rgba(232, 93, 158, 0)');

            ctx.fillStyle = glow1;
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            const glow2 = ctx.createRadialGradient(
                canvas.width * 0.8,
                canvas.height * 0.15,
                0,
                canvas.width * 0.8,
                canvas.height * 0.15,
                canvas.width * 0.28
            );
            glow2.addColorStop(0, 'rgba(216, 177, 106, 0.14)');
            glow2.addColorStop(1, 'rgba(216, 177, 106, 0)');

            ctx.fillStyle = glow2;
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            stars.forEach((star) => {
                star.opacity += star.twinkleSpeed;

                if (star.opacity > 1 || star.opacity < 0.25) {
                    star.twinkleSpeed = -star.twinkleSpeed;
                }

                star.y += star.speed;

                if (star.y > canvas.height) {
                    star.y = -10;
                    star.x = Math.random() * canvas.width;
                }

                const { r, g, b } = hexToRgb(star.color);

                const gradient = ctx.createRadialGradient(
                    star.x,
                    star.y,
                    0,
                    star.x,
                    star.y,
                    star.radius * 4
                );

                gradient.addColorStop(0, `rgba(255, 255, 255, ${star.opacity})`);
                gradient.addColorStop(0.35, `rgba(${r}, ${g}, ${b}, ${star.opacity * 0.9})`);
                gradient.addColorStop(0.7, `rgba(${r}, ${g}, ${b}, ${star.opacity * 0.25})`);
                gradient.addColorStop(1, `rgba(${r}, ${g}, ${b}, 0)`);

                ctx.beginPath();
                ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
                ctx.fillStyle = gradient;
                ctx.fill();
            });

            animationFrameId = requestAnimationFrame(animate);
        };

        animate();

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

    return (
        <canvas
            ref={canvasRef}
            className="fixed inset-0 pointer-events-none z-0"
        />
    );
}