"use client";

/**
 * Card Grid Field
 *
 * COPIED VERBATIM FROM: components/onboarding/steps/card-grid-step.tsx:136-226
 * Renders a grid of selectable cards with optional dropdowns
 */

import {
	ANIMATION_CLASSES,
	CONDITIONAL_DROPDOWN,
	getStaggerStyle,
	STAGGER_PRESETS,
} from "../animations";
import { cx } from "../lib/utils";
import { OnboardingLabel } from "../primitives/onboarding-label";
import {
	OnboardingRadioCardGroup,
	OnboardingRadioCardItem,
} from "../primitives/onboarding-radio-card";
import {
	OnboardingSelect,
	OnboardingSelectContent,
	OnboardingSelectItem,
	OnboardingSelectTrigger,
	OnboardingSelectValue,
} from "../primitives/onboarding-select";
import type { CardGridFieldProps } from "../types/fields";

const columnClasses = {
	1: "",
	2: "md:grid-cols-2",
	3: "md:grid-cols-3",
	4: "md:grid-cols-4",
};

export function CardGridField({
	options,
	selectedId,
	dropdownValues,
	onChange,
	columns = 2,
	layout = "vertical",
	ariaLabel,
	disabled = false,
}: CardGridFieldProps) {
	const handleSelectionChange = (id: string) => {
		onChange({ selectedId: id, dropdownValues });
	};

	const handleDropdownChange = (optionId: string, value: string) => {
		const newValues = { ...dropdownValues, [optionId]: value };
		onChange({ selectedId, dropdownValues: newValues });
	};

	return (
		<fieldset disabled={disabled}>
			<legend className="sr-only">{ariaLabel}</legend>
			<OnboardingRadioCardGroup
				value={selectedId}
				onValueChange={handleSelectionChange}
				className={cx("grid grid-cols-1 gap-4", columnClasses[columns])}
				aria-label={ariaLabel}
			>
				{options.map((option, index) => (
					<div
						key={option.id}
						className={ANIMATION_CLASSES.fadeInUp}
						style={getStaggerStyle(
							index,
							STAGGER_PRESETS.cardGrid.baseDelay,
							STAGGER_PRESETS.cardGrid.increment,
							STAGGER_PRESETS.cardGrid.duration,
						)}
					>
						<OnboardingRadioCardItem
							value={option.id}
							className={cx(
								"relative p-4",
								layout === "horizontal"
									? "flex flex-row items-center gap-4 text-left"
									: "flex flex-col items-center p-6 text-center",
							)}
						>
							{option.badge && (
								<span className="absolute right-2 top-2 rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
									{option.badge}
								</span>
							)}
							{option.icon && (
								<div
									className={cx(
										"flex items-center justify-center shrink-0",
										layout === "horizontal"
											? "h-10 w-10 text-3xl"
											: "mb-3 h-12 w-12 text-4xl",
									)}
								>
									{option.icon}
								</div>
							)}
							<div className={layout === "horizontal" ? "flex-1 min-w-0" : ""}>
								<span className="font-semibold text-foreground">
									{option.name}
								</span>
								{option.description && (
									<p
										className={cx(
											"text-muted-foreground",
											layout === "horizontal"
												? "text-sm mt-0.5"
												: "mt-1 text-xs",
										)}
									>
										{option.description}
									</p>
								)}
							</div>
						</OnboardingRadioCardItem>

						{/* Dropdown appears below the card when selected */}
						{option.dropdown && selectedId === option.id && (
							<div
								className={cx("mt-3", CONDITIONAL_DROPDOWN.className)}
								style={CONDITIONAL_DROPDOWN.style}
							>
								<OnboardingLabel
									className="mb-2 block text-sm font-medium text-foreground"
									htmlFor={`dropdown-${option.id}`}
								>
									{option.dropdown.label}
								</OnboardingLabel>
								<OnboardingSelect
									value={dropdownValues[option.id] || ""}
									onValueChange={(value) =>
										handleDropdownChange(option.id, value)
									}
								>
									<OnboardingSelectTrigger
										id={`dropdown-${option.id}`}
										className="w-full"
									>
										<OnboardingSelectValue
											placeholder={option.dropdown.placeholder || "Select..."}
										/>
									</OnboardingSelectTrigger>
									<OnboardingSelectContent>
										{option.dropdown.options.map((opt) => (
											<OnboardingSelectItem key={opt.value} value={opt.value}>
												{opt.label}
											</OnboardingSelectItem>
										))}
									</OnboardingSelectContent>
								</OnboardingSelect>
							</div>
						)}
					</div>
				))}
			</OnboardingRadioCardGroup>
		</fieldset>
	);
}