'use client';

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

export type BackgroundGradientsProps = {
  count?: number;
};

const BackgroundGradients: React.FC<BackgroundGradientsProps> = ({ count: countProp }) => {
  const [positions, setPositions] = useState<number[]>([]);

  const START_TOP = 995;

  const WIDTH = 357;
  const HEIGHT = 349;

  const GLOW_COLOR = '#053F31';

  const LEFT_GAP = 313;
  const RIGHT_GAP = 588;

  useEffect(() => {
    if (countProp !== undefined && countProp !== null) {
      const manualPositions: number[] = [];
      let currentTop = START_TOP;
      let isLeft = true;

      for (let i = 0; i < countProp; i++) {
        manualPositions.push(currentTop);

        const gap = isLeft ? LEFT_GAP : RIGHT_GAP;
        currentTop = currentTop + HEIGHT + gap;
        isLeft = !isLeft;
      }

      setPositions(manualPositions);
      return;
    }

    const calculateBlobs = () => {
      const fullHeight = document.documentElement.scrollHeight;
      const newPositions: number[] = [];

      let currentTop = START_TOP;
      let isLeft = true;

      while (currentTop < fullHeight) {
        newPositions.push(currentTop);

        const gap = isLeft ? LEFT_GAP : RIGHT_GAP;
        currentTop = currentTop + HEIGHT + gap;
        isLeft = !isLeft;
      }

      setPositions(newPositions);
    };

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

    const resizeObserver = new ResizeObserver(() => calculateBlobs());
    resizeObserver.observe(document.body);

    return () => {
      window.removeEventListener('resize', calculateBlobs);
      resizeObserver.disconnect();
    };
  }, [countProp]);

  return (
    <div className="max-w-[1920px] mx-auto absolute inset-0 pointer-events-none -z-10 overflow-hidden">
      {positions.map((topPosition, index) => {
        const isLeft = index % 2 === 0;

        return (
          <div
            key={index}
            className="absolute rounded-full"
            style={{
              top: `${topPosition}px`,
              left: isLeft ? '-100px' : 'auto',
              right: !isLeft ? '-100px' : 'auto',
              width: `${WIDTH}px`,
              height: `${HEIGHT}px`,
              backgroundColor: GLOW_COLOR,
              filter: 'blur(250px)',
              opacity: 0.5,
            }}
          />
        );
      })}
    </div>
  );
};

export function ZigZagGradientStrip() {
  return (
    <div className="w-full relative overflow-hidden" style={{ height: "32px" }} aria-hidden>
      <svg
        className="absolute inset-0 w-full h-full"
        viewBox="0 0 120 32"
        preserveAspectRatio="none"
      >
        <defs>
          <linearGradient id="zigzag-gradient-home" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor="#F7FAF8" stopOpacity="1" />
            <stop offset="100%" stopColor="#ffffff" stopOpacity="1" />
          </linearGradient>
        </defs>
        <path
          fill="url(#zigzag-gradient-home)"
          d="M0 0h120v32l-15-16 15-16-15-16 15-16-15-16 15-16-15-16 15-16-15-16 15-16-15-16L0 32Z"
        />
      </svg>
    </div>
  );
}

export default BackgroundGradients;