"use client";

import { useEffect, useMemo, useState } from "react";

function clamp(value: number, minimum = 0, maximum = 1) {
  return Math.min(Math.max(value, minimum), maximum);
}

export default function CleaningOverlay() {
  const [progress, setProgress] = useState(0);

  const sparkles = useMemo(
    () =>
      Array.from({ length: 10 }, (_, index) => ({
        left: 6 + ((index * 13) % 82),
        top: 18 + ((index * 19) % 58),
        delay: (index % 5) * 0.08,
        size: 5 + (index % 3) * 3,
      })),
    [],
  );

  const droplets = useMemo(
    () =>
      Array.from({ length: 8 }, (_, index) => ({
        left: 8 + ((index * 17) % 78),
        top: 28 + ((index * 23) % 48),
        delay: (index % 4) * 0.1,
        size: 4 + (index % 3) * 2,
      })),
    [],
  );

  useEffect(() => {
    let frame = 0;

    const update = () => {
      cancelAnimationFrame(frame);

      frame = requestAnimationFrame(() => {
        const hero = document.getElementById("home");

        if (!hero) return;

        const rect = hero.getBoundingClientRect();
        const distance = Math.max(hero.offsetHeight * 0.85, 1);
        const next = clamp(-rect.top / distance);

        setProgress(next);
      });
    };

    update();

    window.addEventListener("scroll", update, { passive: true });
    window.addEventListener("resize", update);

    return () => {
      cancelAnimationFrame(frame);
      window.removeEventListener("scroll", update);
      window.removeEventListener("resize", update);
    };
  }, []);

  const active = progress > 0.025 && progress < 0.93;

  /*
   * One deliberate movement:
   * start at dock -> sweep left across hero -> exit.
   */
  const mopX =
    progress < 0.1
      ? 82
      : progress < 0.78
        ? 82 - ((progress - 0.1) / 0.68) * 112
        : -30 - ((progress - 0.78) / 0.22) * 18;

  const mopY =
    progress < 0.1
      ? 78
      : 70 - Math.sin(((progress - 0.1) / 0.68) * Math.PI) * 28;

  const mopRotation =
    progress < 0.1
      ? -8
      : -8 + Math.sin(((progress - 0.1) / 0.68) * Math.PI) * 13;

  const trailOpacity = active
    ? clamp(
        Math.min(
          (progress - 0.025) / 0.09,
          (0.93 - progress) / 0.12,
        ),
      )
    : 0;

  return (
    <div
      aria-hidden="true"
      className="pointer-events-none fixed inset-0 z-[90] overflow-hidden"
    >
      <div
        className="cleaning-trail"
        style={{
          left: `${mopX + 2}%`,
          top: `${mopY + 8}%`,
          opacity: trailOpacity,
        }}
      >
        {sparkles.map((sparkle, index) => (
          <span
            className="cleaning-sparkle"
            key={`sparkle-${index}`}
            style={{
              left: `${sparkle.left}%`,
              top: `${sparkle.top}%`,
              width: sparkle.size,
              height: sparkle.size,
              animationDelay: `${sparkle.delay}s`,
            }}
          />
        ))}

        {droplets.map((droplet, index) => (
          <span
            className="cleaning-droplet"
            key={`droplet-${index}`}
            style={{
              left: `${droplet.left}%`,
              top: `${droplet.top}%`,
              width: droplet.size,
              height: droplet.size * 1.45,
              animationDelay: `${droplet.delay}s`,
            }}
          />
        ))}
      </div>

      <div
        className="cleaning-mop"
        style={{
          left: `${mopX}%`,
          top: `${mopY}%`,
          transform: `translate(-50%, -72%) rotate(${mopRotation}deg)`,
          opacity: progress > 0.96 ? 0 : 1,
        }}
      >
        <div className="mop-handle">
          <span className="mop-grip" />
        </div>

        <div className="mop-joint" />

        <div className="mop-head">
          <span className="mop-pad" />
        </div>
      </div>

      <div className="cleaning-dock">
        <div className="dock-opening">
          <span />
        </div>

        <div className="dock-body">
          <span className="dock-water" />
          <span className="dock-light" />
        </div>
      </div>

      <style jsx>{`
        .cleaning-dock {
          position: absolute;
          right: clamp(18px, 3vw, 48px);
          bottom: clamp(18px, 3vw, 38px);
          width: clamp(88px, 9vw, 132px);
          height: clamp(78px, 8vw, 116px);
          filter: drop-shadow(0 18px 26px rgba(20, 78, 104, 0.2));
          animation: dockIdle 3.2s ease-in-out infinite;
          transform-origin: bottom center;
        }

        .dock-body {
          position: absolute;
          inset: 22% 0 0;
          overflow: hidden;
          border: 1px solid rgba(17, 124, 177, 0.18);
          border-radius: 22px 22px 28px 28px;
          background:
            linear-gradient(
              180deg,
              rgba(255, 255, 255, 0.98),
              rgba(228, 245, 251, 0.96)
            );
          box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.9),
            inset 0 -12px 28px rgba(27, 157, 213, 0.08);
        }

        .dock-opening {
          position: absolute;
          left: 50%;
          top: 4%;
          z-index: 3;
          width: 66%;
          height: 34%;
          transform: translateX(-50%);
          border-radius: 50%;
          border: 7px solid rgba(241, 250, 253, 0.98);
          background: rgba(33, 175, 224, 0.36);
          box-shadow:
            0 5px 12px rgba(21, 114, 154, 0.17),
            inset 0 3px 12px rgba(0, 115, 168, 0.22);
        }

        .dock-opening span {
          position: absolute;
          inset: 18%;
          border-radius: inherit;
          background:
            radial-gradient(
              circle at 50% 35%,
              rgba(255, 255, 255, 0.72),
              rgba(53, 186, 232, 0.48) 55%,
              rgba(8, 124, 177, 0.7)
            );
          animation: waterPulse 2.2s ease-in-out infinite;
        }

        .dock-water {
          position: absolute;
          left: 8%;
          right: 8%;
          bottom: 7%;
          height: 29%;
          border-radius: 13px 13px 20px 20px;
          background:
            linear-gradient(
              180deg,
              rgba(56, 193, 239, 0.52),
              rgba(10, 132, 190, 0.74)
            );
        }

        .dock-light {
          position: absolute;
          left: 50%;
          top: 51%;
          width: 23%;
          height: 4px;
          transform: translateX(-50%);
          border-radius: 999px;
          background: #79e4ff;
          box-shadow: 0 0 10px rgba(64, 211, 250, 0.9);
          animation: lightPulse 1.8s ease-in-out infinite;
        }

        .cleaning-mop {
          position: absolute;
          z-index: 4;
          width: clamp(108px, 11vw, 162px);
          height: clamp(210px, 25vw, 330px);
          transition:
            left 80ms linear,
            top 80ms linear,
            transform 80ms linear,
            opacity 200ms ease;
          transform-origin: 50% 90%;
          filter: drop-shadow(0 16px 17px rgba(22, 74, 99, 0.2));
        }

        .mop-handle {
          position: absolute;
          left: 49%;
          bottom: 18%;
          width: 9px;
          height: 78%;
          transform: translateX(-50%);
          border-radius: 999px;
          background:
            linear-gradient(
              90deg,
              #9fb5c0,
              #f9fdff 43%,
              #b9cad2 72%,
              #7f9ba8
            );
          box-shadow: inset 1px 0 2px rgba(255, 255, 255, 0.9);
        }

        .mop-grip {
          position: absolute;
          left: 50%;
          bottom: 17%;
          width: 17px;
          height: 27%;
          transform: translateX(-50%);
          border-radius: 999px;
          background:
            linear-gradient(
              90deg,
              #0878b1,
              #21a9e1 48%,
              #0878b1
            );
        }

        .mop-joint {
          position: absolute;
          left: 50%;
          bottom: 13%;
          width: 27px;
          height: 30px;
          transform: translateX(-50%);
          border-radius: 9px 9px 13px 13px;
          background:
            linear-gradient(
              135deg,
              #1fb2e7,
              #087eb9
            );
        }

        .mop-head {
          position: absolute;
          left: 50%;
          bottom: 4%;
          width: 100%;
          height: 18%;
          transform: translateX(-50%);
          border-radius: 48% 48% 36% 36%;
          border: 1px solid rgba(27, 128, 176, 0.22);
          background:
            linear-gradient(
              180deg,
              #ffffff,
              #dff3f9 64%,
              #1498d2 66%,
              #087cb7
            );
          box-shadow:
            inset 0 3px 8px rgba(255, 255, 255, 0.9),
            0 6px 12px rgba(11, 99, 139, 0.16);
        }

        .mop-pad {
          position: absolute;
          left: 4%;
          right: 4%;
          bottom: -19%;
          height: 38%;
          border-radius: 0 0 18px 18px;
          background:
            repeating-linear-gradient(
              90deg,
              #eafaff 0 4px,
              #cdeff7 4px 8px
            );
          opacity: 0.98;
        }

        .cleaning-trail {
          position: absolute;
          z-index: 3;
          width: clamp(160px, 18vw, 270px);
          height: clamp(90px, 12vw, 170px);
          transform: translate(-2%, -50%);
          transition:
            left 80ms linear,
            top 80ms linear,
            opacity 160ms ease;
        }

        .cleaning-sparkle {
          position: absolute;
          display: block;
          transform: rotate(45deg);
          border-radius: 2px;
          background: white;
          box-shadow:
            0 0 7px rgba(255, 255, 255, 0.95),
            0 0 15px rgba(80, 207, 255, 0.9);
          animation: sparkle 0.72s ease-in-out infinite alternate;
        }

        .cleaning-sparkle::before,
        .cleaning-sparkle::after {
          content: "";
          position: absolute;
          left: 50%;
          top: 50%;
          background: inherit;
          border-radius: inherit;
          transform: translate(-50%, -50%);
        }

        .cleaning-sparkle::before {
          width: 28%;
          height: 220%;
        }

        .cleaning-sparkle::after {
          width: 220%;
          height: 28%;
        }

        .cleaning-droplet {
          position: absolute;
          display: block;
          border-radius: 55% 55% 58% 58%;
          background:
            radial-gradient(
              circle at 35% 24%,
              rgba(255, 255, 255, 0.96),
              rgba(94, 211, 249, 0.72) 45%,
              rgba(11, 135, 190, 0.8)
            );
          box-shadow: 0 3px 7px rgba(11, 112, 159, 0.18);
          animation: dropletFall 0.9s ease-in infinite;
        }

        @keyframes dockIdle {
          0%,
          100% {
            transform: translateY(0);
          }

          50% {
            transform: translateY(-3px);
          }
        }

        @keyframes waterPulse {
          0%,
          100% {
            transform: scale(0.96);
            opacity: 0.75;
          }

          50% {
            transform: scale(1.04);
            opacity: 1;
          }
        }

        @keyframes lightPulse {
          0%,
          100% {
            opacity: 0.45;
          }

          50% {
            opacity: 1;
          }
        }

        @keyframes sparkle {
          from {
            opacity: 0.22;
            transform: scale(0.5) rotate(45deg);
          }

          to {
            opacity: 1;
            transform: scale(1.15) rotate(45deg);
          }
        }

        @keyframes dropletFall {
          from {
            opacity: 0;
            transform: translateY(-10px) scale(0.7);
          }

          32% {
            opacity: 0.8;
          }

          to {
            opacity: 0;
            transform: translateY(24px) scale(1);
          }
        }

        @media (max-width: 700px) {
          .cleaning-dock {
            right: 12px;
            bottom: 12px;
            transform: scale(0.82);
            transform-origin: bottom right;
          }

          .cleaning-mop {
            transform-origin: 50% 92%;
          }
        }

        @media (prefers-reduced-motion: reduce) {
          .cleaning-dock,
          .dock-opening span,
          .dock-light,
          .cleaning-sparkle,
          .cleaning-droplet {
            animation: none;
          }
        }
      `}</style>
    </div>
  );
}