type LoaderVariant = "page" | "card" | "list";

interface Props {
  variant?: LoaderVariant;
}

export default function AppLoader({ variant = "page" }: Props) {
  if (variant === "card") return <CardLoader />;
  if (variant === "list") return <ListLoader />;

  return <PageLoader />;
}

function CardLoader() {
  return (
    <div className="space-y-6">
      {[1, 2].map((i) => (
        <div
          key={i}
          className="bg-white rounded-[18px] p-5 shadow-sm animate-pulse"
        >
          <div className="h-3 w-40 bg-gray-200 rounded mb-2" />
          <div className="h-3 w-32 bg-gray-200 rounded mb-4" />

          <div className="flex justify-between my-5">
            {[1, 2, 3].map((x) => (
              <div key={x} className="flex flex-col items-center w-full">
                <div className="w-3 h-3 bg-gray-200 rounded-full" />
                <div className="h-2 w-10 bg-gray-200 rounded mt-2" />
              </div>
            ))}
          </div>

          <div className="space-y-3">
            {[1, 2].map((x) => (
              <div
                key={x}
                className="flex gap-3 bg-gray-100 p-4 rounded-lg"
              >
                <div className="w-16 h-16 bg-gray-200 rounded-md" />
                <div className="flex-1 space-y-2">
                  <div className="h-3 w-24 bg-gray-200 rounded" />
                  <div className="h-2 w-16 bg-gray-200 rounded" />
                </div>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

function PageLoader() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-white">
      <div className="flex flex-col items-center gap-6">
        {/* Spinner */}
        <div className="relative w-14 h-14">
          {/* outer ring */}
          <div className="absolute inset-0 rounded-full border-4 border-[#FF2B77]/20" />

          {/* animated ring */}
          <div className="absolute inset-0 rounded-full border-4 border-transparent border-t-[#FF2B77] border-r-[#FF2B77] animate-spin" />
        </div>

        {/* Text */}
        <span className="text-sm font-medium text-[#FF2B77] animate-pulse tracking-wide">
          جاري التحميل
        </span>
      </div>
    </div>
  );
}

function ListLoader() {
  return (
    <div className="space-y-3 animate-pulse">
      {[1, 2, 3, 4].map((i) => (
        <div
          key={i}
          className="h-12 bg-gray-200 rounded-md"
        />
      ))}
    </div>
  );
}

export function FullPageOverlay() {
  return (
    <div className="fixed inset-0 z-[9999] bg-white/80 backdrop-blur-sm flex items-center justify-center">
      <div className="flex flex-col items-center gap-4">
        {/* spinner */}
        <div className="relative w-12 h-12">
          <div className="absolute inset-0 rounded-full border-4 border-[#FF2B77]/20" />
          <div className="absolute inset-0 rounded-full border-4 border-transparent border-t-[#FF2B77] border-r-[#FF2B77] animate-spin" />
        </div>

        <span className="text-sm font-medium text-[#FF2B77] animate-pulse">
          جاري التحميل
        </span>
      </div>
    </div>
  );
}