import { LoadingSkeleton } from "./loading-skeleton";
import { PageBackground } from "./page-background";

type PageLoadingSkeletonProps = {
  compact?: boolean;
  variant?: "profile" | "questions" | "test";
};

/** Shared full-page loading state for the mobile frontend. */
export function PageLoadingSkeleton({
  compact = false,
  variant = "profile",
}: PageLoadingSkeletonProps) {
  if (variant === "questions" || variant === "test") {
    return (
      <>
        <PageBackground disabled />
        <main
          aria-busy="true"
          className="-mx-[17px] flex min-h-svh flex-col px-[17px] pt-[max(12px,calc(var(--safe-top)+4px))] pb-[calc(24px+var(--safe-bottom))] bg-[#F7F1F0]"
        >
          {/* Header */}
          <header className="flex h-11 items-center justify-between shrink-0 mb-4">
            <LoadingSkeleton className="size-10 rounded-[15px]" />
            <LoadingSkeleton className="h-5 w-28 rounded-lg" />
            <LoadingSkeleton className="size-10 rounded-[15px]" />
          </header>

          <div className="mx-auto flex w-full max-w-md flex-1 flex-col pt-3 min-h-0">
            {/* Progress Section */}
            <div className="w-full shrink-0 pt-2 pb-[24px]">
              <div className="mb-[7px] flex items-center justify-between">
                <LoadingSkeleton className="h-3.5 w-24" />
                <LoadingSkeleton className="h-3.5 w-12" />
              </div>
              <LoadingSkeleton className="h-[6px] w-full rounded-full" />
            </div>

            {/* Question Section */}
            {variant === "questions" ? (
              <section className="flex flex-1 flex-col pt-6">
                <LoadingSkeleton className="h-6 w-3/4 mb-8" />
                <LoadingSkeleton className="h-14 w-full rounded-[18px]" />
              </section>
            ) : (
              <section className="flex flex-1 flex-col pt-6">
                <div className="flex justify-center mb-8">
                  <LoadingSkeleton className="h-6 w-4/5" />
                </div>
                <div className="space-y-3">
                  {[1, 2, 3].map((i) => (
                    <LoadingSkeleton
                      key={i}
                      className="w-full h-14 rounded-[16px]"
                    />
                  ))}
                </div>
              </section>
            )}
          </div>
        </main>
      </>
    );
  }

  return (
    <>
      <PageBackground disabled />
      <main
        aria-busy="true"
        className="-mx-[17px] flex min-h-svh flex-col px-[23px] pt-[max(12px,calc(var(--safe-top)+4px))] pb-[calc(24px+var(--safe-bottom))]"
      >
        <header className="flex h-11 items-center justify-between">
          <LoadingSkeleton className="size-10 rounded-full" />
          <LoadingSkeleton className="h-5 w-28 rounded-lg" />
          <LoadingSkeleton className="size-10 rounded-full" />
        </header>
        <section className="flex flex-1 flex-col items-center pt-16 text-center">
          <LoadingSkeleton className="size-28 rounded-full" />
          <LoadingSkeleton className="mt-8 h-6 w-48 rounded-lg" />
          <LoadingSkeleton className="mt-4 h-4 w-full max-w-[300px]" />
          <LoadingSkeleton className="mt-2 h-4 w-4/5 max-w-[250px]" />
          {!compact && (
            <div className="mt-12 w-full space-y-3 rounded-[18px] border border-neutral-200/70 p-4 dark:border-neutral-800/70">
              <LoadingSkeleton className="h-5 w-32" />
              <LoadingSkeleton className="h-3.5 w-full" />
              <LoadingSkeleton className="h-3.5 w-3/4" />
              <div className="flex items-center justify-between pt-3">
                <div className="flex -space-x-2">
                  <LoadingSkeleton className="size-8 rounded-full" />
                  <LoadingSkeleton className="size-8 rounded-full" />
                  <LoadingSkeleton className="size-8 rounded-full" />
                </div>
                <LoadingSkeleton className="h-10 w-28 rounded-xl" />
              </div>
            </div>
          )}
        </section>
        <LoadingSkeleton className="mt-8 h-[52px] w-full rounded-xl" />
      </main>
    </>
  );
}