"use client";

import Image from "next/image";
import { useEffect, useState } from "react";

export default function PageLoader() {
  const [progress, setProgress] = useState(0);
  const [visible, setVisible] = useState(true);

  useEffect(() => {
  const MINIMUM_LOADER_TIME = 1000;

  const startTime = Date.now();

  let progressTimer: ReturnType<typeof setInterval>;
  let hideTimer: ReturnType<typeof setTimeout>;

  const startProgress = () => {
    progressTimer = setInterval(() => {
      setProgress((current) => {
        if (current >= 90) {
          return current;
        }

        const increment = Math.random() * 7 + 2;

        return Math.min(current + increment, 90);
      });
    }, 180);
  };

  const finishLoading = () => {
    clearInterval(progressTimer);

    const elapsedTime = Date.now() - startTime;

    const remainingTime = Math.max(
      MINIMUM_LOADER_TIME - elapsedTime,
      0
    );

    hideTimer = setTimeout(() => {
      setProgress(100);

      setTimeout(() => {
        setVisible(false);
      }, 500);
    }, remainingTime);
  };

  startProgress();

  if (document.readyState === "complete") {
    finishLoading();
  } else {
    window.addEventListener("load", finishLoading);
  }

  return () => {
    clearInterval(progressTimer);
    clearTimeout(hideTimer);
    window.removeEventListener("load", finishLoading);
  };
}, []);

  if (!visible) return null;

  return (
    <div
      className={`
        fixed inset-0 z-[99999]
        flex min-h-[100dvh]
        items-center justify-center
        bg-[#23001f]
        transition-opacity duration-500
        ${progress === 100 ? "opacity-0" : "opacity-100"}
      `}
    >
      <div className="flex w-full flex-col items-center px-5">
        {/* Logo / rotating symbol */}
        <div className="relative flex flex-col items-center">
          <div className="loader-logo-rotation">
            <Image
              src="/images/common/loader-image.png"
              alt=""
              width={92}
              height={92}
              priority
              className="
                h-auto
                w-[70px]
                object-contain
                sm:w-[78px]
                md:w-[86px]
                lg:w-[92px]
              "
            />
          </div>

          {/* ShePays wordmark */}
          <Image
            src="/images/common/shepays-text-white.png"
            alt="ShePays"
            width={150}
            height={50}
            priority
            className="
              mt-[8px]
              h-auto
              w-[112px]
              object-contain
              sm:w-[125px]
              md:w-[138px]
              lg:w-[150px]
            "
          />
        </div>

        {/* Progress Line */}
        <div
          className="
            mt-[20px]
            h-[2px]
            w-[190px]
            overflow-hidden
            bg-[#604258]
            sm:w-[205px]
            md:w-[215px]
          "
        >
          <div
            className="
              h-full
              bg-gradient-to-r
              from-[#bd2cff]
              via-[#e600aa]
              to-[#ff6a23]
              transition-[width]
              duration-300
              ease-out
            "
            style={{ width: `${progress}%` }}
          />
        </div>

        {/* Tagline */}
        <p
          className="
            mt-[24px]
            text-center
            text-[9px]
            font-semibold
            uppercase
            tracking-[0.32em]
            text-[#8f788a]
            sm:text-[10px]
          "
        >
          She leads. She grows. She pays.
        </p>
      </div>
    </div>
  );
}