"use client";

/**
 * Product Select Field
 *
 * COPIED VERBATIM FROM: components/onboarding/steps/product-selection-step.tsx:47-80
 * Renders product category cards with subcategory badges
 */

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

interface CategoryItemProps {
	category: ProductCategory;
	checked: boolean;
	onCheckedChange: (categoryId: string, checked: boolean) => void;
}

/**
 * COPIED VERBATIM FROM: components/onboarding/steps/product-selection-step.tsx:47-80
 */
function CategoryItem({
	category,
	checked,
	onCheckedChange,
}: CategoryItemProps) {
	return (
		<OnboardingCard
			asChild
			className={cx(
				"cursor-pointer border-border p-5 transition-all active:scale-[99%]",
				"has-checked:border-primary",
				"focus-within:ring-2",
				"focus-within:ring-ring/30",
				"focus-within:border-primary",
			)}
		>
			<OnboardingLabel className="block" htmlFor={category.id}>
				<div className="mb-2 flex items-center gap-2.5">
					<OnboardingCheckbox
						id={category.id}
						name={category.title}
						checked={checked}
						onCheckedChange={(isChecked) =>
							onCheckedChange(category.id, isChecked === true)
						}
					/>
					<span className="text-base font-medium sm:text-sm">
						{category.title}
					</span>
				</div>
				{category.subcategories.length > 0 && (
					<ul className="ml-6 mt-2 flex flex-wrap gap-1.5">
						{category.subcategories.map((subcategory) => (
							<li key={subcategory}>
								<OnboardingBadge variant="neutral">
									{subcategory}
								</OnboardingBadge>
							</li>
						))}
					</ul>
				)}
			</OnboardingLabel>
		</OnboardingCard>
	);
}

export function ProductSelectField({
	categories,
	selectedIds,
	onChange,
	ariaLabel,
	disabled = false,
}: ProductSelectFieldProps) {
	const handleCheckedChange = (categoryId: string, isChecked: boolean) => {
		const newSelectedIds = isChecked
			? [...selectedIds, categoryId]
			: selectedIds.filter((id) => id !== categoryId);
		onChange(newSelectedIds);
	};

	return (
		<fieldset disabled={disabled}>
			<legend className="sr-only">{ariaLabel}</legend>
			<div className="space-y-2">
				{categories.map((category, index) => (
					<div
						className={ANIMATION_CLASSES.fadeInUp}
						key={category.id}
						style={getStaggerStyle(
							index,
							STAGGER_PRESETS.selectOptions.baseDelay,
							STAGGER_PRESETS.selectOptions.increment,
							STAGGER_PRESETS.selectOptions.duration,
						)}
					>
						<CategoryItem
							category={category}
							checked={selectedIds.includes(category.id)}
							onCheckedChange={handleCheckedChange}
						/>
					</div>
				))}
			</div>
		</fieldset>
	);
}