"use client";

import rawLoadingMain from "@/assets/lottie/loading-main.json";
import { applyLoadingLottieTheme } from "@/lib/lottie-theme";
import { cn } from "@/lib/utils";
import Lottie from "lottie-react";
import { useTheme } from "next-themes";
import { useEffect, useMemo, useState } from "react";

interface IProps {
  className?: string | null;
}

/**
 * Extract of `animations/main.json` from `public/lottie/loading.lottie` (regenerate when
 * the .lottie changes: `unzip -p public/lottie/loading.lottie animations/main.json > src/assets/lottie/loading-main.json`).
 */
const LOTTIE_RAW = rawLoadingMain as object;

/**
 * Route-level loader: SVG Lottie via `lottie-react` (reliable on refresh). Source animation
 * stays in sync with `public/lottie/loading.lottie` via the bundled extract above.
 */
const Loading = ({ className }: IProps) => {
  const { resolvedTheme } = useTheme();
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  const mode = mounted && resolvedTheme === "dark" ? "dark" : "light";

  const animationData = useMemo(
    () => applyLoadingLottieTheme(LOTTIE_RAW, mode),
    [mode],
  );

  return (
    <div
      role="status"
      aria-busy="true"
      aria-live="polite"
      className={cn(
        "relative flex min-h-svh w-full min-w-0 flex-1 flex-col items-center justify-center overflow-hidden",
        "bg-gray-1 dark:bg-dark",
        className,
      )}
    >
      <div
        className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_75%_55%_at_50%_45%,transparent,rgba(17,25,40,0.06))] dark:bg-[radial-gradient(ellipse_75%_55%_at_50%_45%,transparent,rgba(0,0,0,0.45))]"
        aria-hidden
      />

      <div className="pointer-events-none absolute left-6 top-6 h-14 w-14 border-l-2 border-t-2 border-primary/45 dark:border-primary/40 sm:left-10 sm:top-10" />
      <div className="pointer-events-none absolute bottom-6 right-6 h-14 w-14 border-b-2 border-r-2 border-primary/45 dark:border-primary/40 sm:bottom-10 sm:right-10" />

      <div className="relative z-10 flex flex-col items-center gap-6 px-8">
        <div className="relative aspect-square w-[min(200px,55vw)] shrink-0">
          <div className="absolute inset-0 flex items-center justify-center [&_svg]:h-full [&_svg]:w-full [&_svg]:max-h-full [&_svg]:max-w-full">
            <Lottie
              key={mode}
              animationData={animationData}
              loop
              className="h-full w-full"
              aria-hidden
            />
          </div>
        </div>
        <p className="font-mono text-[11px] font-semibold uppercase tracking-[0.45em] text-gray-6 dark:text-dark-6">
          Loading
        </p>
      </div>

      <span className="sr-only">Loading, please wait.</span>
    </div>
  );
};

export default Loading;