import type { ResumeData } from "@reactive-resume/schema/resume/data";
import type { CSSProperties } from "react";
import { Spinner } from "@reactive-resume/ui/components/spinner";
import { cn } from "@reactive-resume/utils/style";
import { DEFAULT_PDF_PAGE_SIZE, getResumePreviewGapValue, getScaledPreviewPageSize } from "./preview.shared.utils";

export type ResumePreviewProps = {
	className?: string;
	data?: ResumeData;
	pageGap?: CSSProperties["gap"];
	pageLayout?: "horizontal" | "vertical";
	pageScale?: number;
	pageClassName?: string;
	showPageNumbers?: boolean;
};

export type ResolvedResumePreviewProps = ResumePreviewProps & {
	pageLayout: "horizontal" | "vertical";
	pageScale: number;
	showPageNumbers: boolean;
};

type ResumePreviewLoaderProps = Pick<ResumePreviewProps, "pageClassName" | "showPageNumbers"> & {
	pageCount?: number;
	pageGap?: CSSProperties["gap"];
	pageLayout?: "horizontal" | "vertical";
	pageScale?: number;
};

// ponytail: normalizeResumePreviewProps deleted — defaults now live in ResumePreview destructuring

export function ResumePreviewLoader({
	pageCount = 1,
	pageClassName,
	pageGap = 16,
	pageLayout = "horizontal",
	pageScale = 1,
	showPageNumbers = false,
}: ResumePreviewLoaderProps) {
	const pageSize = getScaledPreviewPageSize(DEFAULT_PDF_PAGE_SIZE, pageScale);
	const resolvedPageGap = getResumePreviewGapValue(pageGap);

	return (
		<div
			// Chrome-only placeholder: anchor pages left-to-right so page 1 stays on-screen regardless of UI direction.
			dir="ltr"
			style={{ "--resume-preview-page-gap": resolvedPageGap } as CSSProperties}
			className={cn(
				"flex justify-start gap-(--resume-preview-page-gap)",
				pageLayout === "horizontal" ? "flex-row items-start" : "flex-col items-center",
			)}
		>
			{Array.from({ length: pageCount }, (_, index) => {
				const pageNumber = index + 1;

				return (
					<figure key={pageNumber} className="shrink-0">
						{showPageNumbers ? (
							<figcaption className="mb-1 font-medium text-[0.625rem] text-muted-foreground">
								Page {pageNumber} of {pageCount}
							</figcaption>
						) : null}

						<div
							role="img"
							aria-label={`Loading resume page ${pageNumber} of ${pageCount}`}
							style={pageSize}
							className={cn("aspect-page overflow-hidden rounded-md bg-white", pageClassName)}
						>
							<Spinner className="size-10" />
						</div>
					</figure>
				);
			})}
		</div>
	);
}
