import { cn } from "@/shared/lib/utils";

interface LoaderProps {
  mode?: "page" | "inline";
  label?: string;
  className?: string;
  showLabel?: boolean;
}

const Loader = ({
  mode = "page",
  label = "Loading...",
  className,
  showLabel,
}: LoaderProps) => {
  const isInline = mode === "inline";
  const shouldShowLabel = showLabel ?? !isInline;

  return (
    <div
      className={cn(
        isInline
          ? "inline-flex items-center justify-center"
          : "w-full min-h-[60vh] flex flex-col items-center justify-center gap-5 rounded-2xl border border-primary-100/80 bg-gradient-to-br from-white via-primary-50/70 to-primary-100/60 dark:border-primary-900/40 dark:from-slate-900 dark:via-slate-900 dark:to-primary-950/40 shadow-sm backdrop-blur-[1px] select-none",
        className,
      )}
      role="status"
      aria-live="polite"
      aria-label={label}
      aria-busy="true"
    >
      <div className={cn("relative", isInline ? "h-8 w-8" : "h-32 w-32")}>
        {/* OUTER FADE RING */}
        <span
          className={cn(
            "absolute inset-0 rounded-full border-primary-100/70 dark:border-primary-950/80",
            isInline ? "border-2" : "border-[3px]",
          )}
        />

        {/* MAIN SPINNER */}
        <span
          className={cn(
            "absolute inset-0 rounded-full border-transparent border-t-primary-600 border-r-primary-500 dark:border-t-primary-400 dark:border-r-primary-500 motion-safe:animate-spin motion-reduce:animate-none",
            isInline ? "border-2" : "border-[3px]",
          )}
        />

        {/* SECONDARY COUNTER SPINNER */}
        <span
          className={cn(
            "absolute rounded-full border-transparent border-b-primary-500 border-l-primary-400 dark:border-b-primary-300 dark:border-l-primary-400 motion-safe:animate-spin motion-reduce:animate-none",
            isInline ? "inset-1 border-2" : "inset-2 border-[3px]",
          )}
          style={{ animationDirection: "reverse", animationDuration: "1.3s" }}
        />

        {/* INNER CORE GLOW */}
        <span
          className={cn(
            "absolute rounded-full bg-primary-500/80 dark:bg-primary-400/85 motion-safe:animate-pulse motion-reduce:animate-none",
            isInline
              ? "inset-3 shadow-[0_0_10px_rgba(34,197,94,0.5)]"
              : "inset-8 shadow-[0_0_34px_rgba(34,197,94,0.5)]",
          )}
        />

        {/* DOCUMENT ICON */}
        <div className="absolute inset-0 z-10 flex items-center justify-center">
          <div
            className={cn(
              "relative rounded-[4px] shadow-md border border-primary-200/80 dark:border-primary-900/70 bg-gradient-to-b from-white to-primary-50 dark:from-slate-800 dark:to-slate-900",
              isInline ? "w-[0.9rem] h-[1.1rem]" : "w-9 h-11",
            )}
          >
            {/* Fold */}
            <div
              className={cn(
                "absolute top-0 right-0 border-l-transparent border-b-primary-200 dark:border-b-primary-500/90",
                isInline
                  ? "border-l-[5px] border-b-[5px]"
                  : "border-l-[8px] border-b-[8px]",
              )}
            />

            {/* Lines */}
            <div className="absolute left-1 right-1 top-[24%] h-[2px] rounded bg-primary-400/70 dark:bg-primary-300/70" />
            <div className="absolute left-1 right-1 top-[44%] h-[2px] rounded bg-primary-400/50 dark:bg-primary-300/50" />
            <div className="absolute left-1 right-1 top-[64%] h-[2px] rounded bg-primary-400/30 dark:bg-primary-300/35" />

            {/* Seal */}
            <span
              className={cn(
                "absolute rounded-full border border-primary-400/70 bg-primary-100/80 dark:bg-primary-500/20 dark:border-primary-300/70",
                isInline
                  ? "h-1.5 w-1.5 right-0.5 bottom-0.5"
                  : "h-2.5 w-2.5 right-1 bottom-1",
              )}
            />
          </div>
        </div>
      </div>

      {shouldShowLabel && (
        <p className="text-sm font-semibold tracking-wide text-primary-700 dark:text-primary-300">
          {label}
        </p>
      )}

      {!isInline && (
        <div className="flex items-center gap-1.5" aria-hidden="true">
          <span className="h-1.5 w-1.5 rounded-full bg-primary-500/70 motion-safe:animate-pulse" />
          <span className="h-1.5 w-1.5 rounded-full bg-primary-500/70 motion-safe:animate-pulse [animation-delay:180ms]" />
          <span className="h-1.5 w-1.5 rounded-full bg-primary-500/70 motion-safe:animate-pulse [animation-delay:360ms]" />
        </div>
      )}
    </div>
  );
};

export default Loader;
