"use client";

/**
 * Icon Select Field
 *
 * Renders selectable cards with icons, images, or logos.
 * Supports both boxed (icons) and plain (logos/images) display styles.
 */

import {
	ANIMATION_CLASSES,
	getStaggerStyle,
	STAGGER_PRESETS,
} from "../animations";
import { cx } from "../lib/utils";
import { OnboardingCard } from "../primitives/onboarding-card";
import { OnboardingCheckbox } from "../primitives/onboarding-checkbox";
import { OnboardingLabel } from "../primitives/onboarding-label";
import type { IconSelectFieldProps } from "../types/fields";

const iconSizeClasses = {
	sm: "h-8 w-8 text-xl",
	md: "h-10 w-10 text-2xl",
	lg: "h-12 w-12 text-3xl",
};

export function IconSelectField({
	options,
	selectedIds,
	onChange,
	selectionMode = "multiple",
	iconStyle = "boxed",
	iconSize = "md",
	ariaLabel,
	disabled = false,
}: IconSelectFieldProps) {
	const handleToggle = (id: string, checked: boolean) => {
		let newSelected: string[];

		if (selectionMode === "single") {
			newSelected = checked ? [id] : [];
		} else {
			newSelected = checked
				? [...selectedIds, id]
				: selectedIds.filter((selectedId) => selectedId !== id);
		}

		onChange(newSelected);
	};

	return (
		<fieldset disabled={disabled}>
			<legend className="sr-only">{ariaLabel}</legend>
			<div className="space-y-3">
				{options.map((option, index) => {
					const isSelected = selectedIds.includes(option.id);

					return (
						<div
							key={option.id}
							className={ANIMATION_CLASSES.fadeInUp}
							style={getStaggerStyle(
								index,
								STAGGER_PRESETS.selectOptions.baseDelay,
								STAGGER_PRESETS.selectOptions.increment,
								STAGGER_PRESETS.selectOptions.duration,
							)}
						>
							<OnboardingCard
								asChild
								className={cx(
									"cursor-pointer border-border p-4 transition-all active:scale-[99%]",
									isSelected && "border-primary",
									"focus-within:ring-2",
									"focus-within:ring-ring/30",
									"focus-within:border-primary",
								)}
							>
								<OnboardingLabel
									className="flex items-center gap-4"
									htmlFor={option.id}
								>
									<OnboardingCheckbox
										id={option.id}
										checked={isSelected}
										onCheckedChange={(checked) =>
											handleToggle(option.id, checked === true)
										}
									/>
									{option.icon &&
										(iconStyle === "boxed" ? (
											<div
												className={cx(
													"flex shrink-0 items-center justify-center rounded-md bg-muted p-1.5 ring-1 ring-border",
													iconSizeClasses[iconSize],
												)}
											>
												{option.icon}
											</div>
										) : (
											<div
												className={cx(
													"flex shrink-0 items-center justify-center",
													iconSizeClasses[iconSize],
												)}
											>
												{option.icon}
											</div>
										))}
									<div className="flex-1 min-w-0">
										<span className="font-medium text-foreground">
											{option.name}
										</span>
										{option.description && (
											<p className="text-sm text-muted-foreground mt-0.5">
												{option.description}
											</p>
										)}
									</div>
								</OnboardingLabel>
							</OnboardingCard>
						</div>
					);
				})}
			</div>
		</fieldset>
	);
}