"use client";

import { useEffect, useRef } from "react";

export function HeroDataStreamEffect() {
    const svgRef = useRef<SVGSVGElement>(null);

    useEffect(() => {
        const svg = svgRef.current;
        if (!svg) return;

        const resizeSVG = () => {
            const headerElement = document.querySelector(".hero-header");
            if (headerElement) {
                const rect = headerElement.getBoundingClientRect();
                const width = Math.max(rect.width + 200, window.innerWidth);
                const height = Math.max(rect.height + 200, window.innerHeight);
                svg.setAttribute("width", `${width}px`);
                svg.setAttribute("height", `${height}px`);
                svg.style.top = `${Math.min(rect.top - 100, 0)}px`;
                svg.style.left = `${(window.innerWidth - width) / 2}px`;
            }
        };

        resizeSVG();
        window.addEventListener("resize", resizeSVG);

        const createStream = () => {
            const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
            const startX = Math.random() * svg.clientWidth;
            const startY = -50;
            const endX = Math.random() * svg.clientWidth;
            const endY = svg.clientHeight + 50;
            const midX1 = startX + (Math.random() - 0.5) * 200;
            const midY1 = startY + (endY - startY) * 0.33;
            const midX2 = endX + (Math.random() - 0.5) * 200;
            const midY2 = startY + (endY - startY) * 0.66;

            const d = `M ${startX} ${startY} C ${midX1} ${midY1}, ${midX2} ${midY2}, ${endX} ${endY}`;
            path.setAttribute("d", d);
            path.setAttribute("stroke", "rgba(94, 81, 236, 0.4)");
            path.setAttribute("stroke-width", "1.5");
            path.setAttribute("fill", "none");
            path.setAttribute("opacity", "0");

            const length = path.getTotalLength();
            path.setAttribute("stroke-dasharray", length.toString());
            path.setAttribute("stroke-dashoffset", length.toString());

            svg.appendChild(path);

            return { path, length };
        };

        const streams: { path: SVGPathElement; length: number }[] = [];
        for (let i = 0; i < 15; i++) {
            streams.push(createStream());
        }

        let progress = 0;
        const animate = () => {
            progress += 0.003;
            streams.forEach(({ path, length }, index) => {
                const offset = (progress + index * 0.1) % 1;
                const opacity = Math.sin(offset * Math.PI) * 0.7;
                path.setAttribute("stroke-dashoffset", ((1 - offset) * length).toString());
                path.setAttribute("opacity", opacity.toString());
            });

            requestAnimationFrame(animate);
        };

        animate();

        return () => {
            window.removeEventListener("resize", resizeSVG);
        };
    }, []);

    return (
        <svg
            ref={svgRef}
            className="absolute pointer-events-none -z-50 scale-y-150"
            style={{ filter: "drop-shadow(0 0 10px rgba(94, 81, 236, 0.3))" }}
        />
    );
}