"use client";

import type React from "react";
import { useState } from "react";
import { cx } from "../lib/utils";
import { OnboardingButton } from "../primitives/onboarding-button";
import {
	OnboardingRadioCardGroup,
	OnboardingRadioCardIndicator,
	OnboardingRadioCardItem,
} from "../primitives/onboarding-radio-card";

export interface SelectOption {
	value: string;
	label: string;
}

export interface SingleSelectStepProps {
	/** Title displayed at the top of the step */
	title?: string;
	/** Description text below the title */
	description?: string;
	/** Array of options to display */
	options: SelectOption[];
	/** Initially selected value */
	defaultValue?: string;
	/** Called when selection changes */
	onValueChange?: (value: string) => void;
	/** Called when the user submits the form */
	onSubmit: (selectedValue: string) => void | Promise<void>;
	/** Text for the submit button */
	submitText?: string;
	/** Text shown while submitting */
	loadingText?: string;
	/** Optional back button config */
	backButton?: {
		text: string;
		onClick: () => void;
	};
	/** Accessible label for the radio group */
	ariaLabel?: string;
}

export function SingleSelectStep({
	title = "Select an option",
	description = "This will help us customize the experience to you.",
	options,
	defaultValue = "",
	onValueChange,
	onSubmit,
	submitText = "Continue",
	loadingText = "Submitting...",
	backButton,
	ariaLabel,
}: SingleSelectStepProps) {
	const [selectedValue, setSelectedValue] = useState(defaultValue);
	const [loading, setLoading] = useState(false);

	const handleValueChange = (value: string) => {
		setSelectedValue(value);
		onValueChange?.(value);
	};

	const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
		e.preventDefault();
		setLoading(true);
		try {
			await onSubmit(selectedValue);
		} finally {
			setLoading(false);
		}
	};

	return (
		<main className="mx-auto p-4">
			<div
				className="motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-4"
				style={{ animationDuration: "500ms" }}
			>
				<h1 className="text-2xl font-semibold text-foreground sm:text-xl">
					{title}
				</h1>
				<p className="mt-6 text-muted-foreground sm:text-sm">{description}</p>
			</div>
			<form onSubmit={handleSubmit} className="mt-4">
				<fieldset>
					<legend className="sr-only">{title}</legend>
					<OnboardingRadioCardGroup
						value={selectedValue}
						onValueChange={handleValueChange}
						required
						aria-label={ariaLabel || title}
					>
						{options.map((option, index) => (
							<div
								className="motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-4"
								key={option.value}
								style={{
									animationDuration: "600ms",
									animationDelay: `${100 + index * 50}ms`,
									animationFillMode: "backwards",
								}}
							>
								<OnboardingRadioCardItem
									className="active:scale-[99%]"
									value={option.value}
								>
									<div className="flex items-center gap-2.5">
										<OnboardingRadioCardIndicator />
										<span className="block sm:text-sm">{option.label}</span>
									</div>
								</OnboardingRadioCardItem>
							</div>
						))}
					</OnboardingRadioCardGroup>
				</fieldset>
				<div
					className={cx(
						"mt-6 flex",
						backButton ? "justify-between" : "justify-end",
					)}
				>
					{backButton && (
						<OnboardingButton
							type="button"
							variant="ghost"
							onClick={backButton.onClick}
						>
							{backButton.text}
						</OnboardingButton>
					)}
					<OnboardingButton
						className="disabled:bg-muted disabled:text-muted-foreground"
						type="submit"
						disabled={!selectedValue || loading}
						aria-disabled={!selectedValue || loading}
						isLoading={loading}
					>
						{loading ? loadingText : submitText}
					</OnboardingButton>
				</div>
			</form>
		</main>
	);
}