"use client";

/**
 * Boolean Field
 *
 * COPIED VERBATIM FROM: components/onboarding/steps/boolean-step.tsx:116-171
 * Renders a checkbox toggle or yes/no radio buttons
 */

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 {
	OnboardingRadioCardGroup,
	OnboardingRadioCardItem,
} from "../primitives/onboarding-radio-card";
import {
	OnboardingRadioGroup,
	OnboardingRadioGroupItem,
} from "../primitives/onboarding-radio-group";
import type { BooleanFieldProps } from "../types/fields";

export function BooleanField({
	id,
	label,
	description,
	mode = "toggle",
	value,
	onChange,
	requiredTrue = false,
	yesLabel = "Yes",
	noLabel = "No",
	animationIndex = 0,
	disabled = false,
}: BooleanFieldProps) {
	return (
		<div
			className={ANIMATION_CLASSES.fadeInUp}
			style={getStaggerStyle(
				animationIndex,
				STAGGER_PRESETS.booleanFields.baseDelay,
				STAGGER_PRESETS.booleanFields.increment,
				STAGGER_PRESETS.booleanFields.duration,
			)}
		>
			{mode === "yesno" ? (
				<div>
					<OnboardingLabel className="mb-3 block text-base font-medium text-foreground">
						{label}
						{requiredTrue && <span className="ml-1 text-destructive">*</span>}
					</OnboardingLabel>
					{description && (
						<p className="mb-3 text-sm text-muted-foreground">{description}</p>
					)}
					<OnboardingRadioCardGroup
						value={value ? "yes" : "no"}
						onValueChange={(val) => onChange(val === "yes")}
						className="grid grid-cols-2 gap-3"
						disabled={disabled}
					>
						<OnboardingRadioCardItem
							value="yes"
							className="flex items-center justify-center p-4"
						>
							<span className="font-medium">{yesLabel}</span>
						</OnboardingRadioCardItem>
						<OnboardingRadioCardItem
							value="no"
							className="flex items-center justify-center p-4"
						>
							<span className="font-medium">{noLabel}</span>
						</OnboardingRadioCardItem>
					</OnboardingRadioCardGroup>
				</div>
			) : mode === "radio" ? (
				<fieldset disabled={disabled}>
					<legend className="mb-2 text-base font-medium text-foreground">
						{label}
						{requiredTrue && <span className="ml-1 text-destructive">*</span>}
					</legend>
					{description && (
						<p className="mb-3 text-sm text-muted-foreground">{description}</p>
					)}
					<OnboardingRadioGroup
						value={value ? "yes" : "no"}
						onValueChange={(val) => onChange(val === "yes")}
						disabled={disabled}
						className="flex flex-row gap-6"
					>
						<div className="flex items-center gap-2">
							<OnboardingRadioGroupItem id={`${id}-yes`} value="yes" />
							<OnboardingLabel
								htmlFor={`${id}-yes`}
								className="font-normal cursor-pointer"
							>
								{yesLabel}
							</OnboardingLabel>
						</div>
						<div className="flex items-center gap-2">
							<OnboardingRadioGroupItem id={`${id}-no`} value="no" />
							<OnboardingLabel
								htmlFor={`${id}-no`}
								className="font-normal cursor-pointer"
							>
								{noLabel}
							</OnboardingLabel>
						</div>
					</OnboardingRadioGroup>
				</fieldset>
			) : (
				<OnboardingCard
					asChild
					className={cx(
						"cursor-pointer border-border p-4 transition-all",
						value && "border-primary",
						"focus-within:ring-2 focus-within:ring-ring/30 focus-within:border-primary",
					)}
				>
					<OnboardingLabel className="flex items-start gap-4" htmlFor={id}>
						<OnboardingCheckbox
							id={id}
							checked={value}
							onCheckedChange={(checked) => onChange(checked === true)}
							className="mt-0.5"
							disabled={disabled}
						/>
						<div className="flex-1">
							<span className="font-medium text-foreground">
								{label}
								{requiredTrue && (
									<span className="ml-1 text-destructive">*</span>
								)}
							</span>
							{description && (
								<p className="mt-1 text-sm text-muted-foreground">
									{description}
								</p>
							)}
						</div>
					</OnboardingLabel>
				</OnboardingCard>
			)}
		</div>
	);
}