"use client";

import { ArrowRight, Code2, MessageCircle } from "lucide-react";
import { motion } from "motion/react";

import { Button } from "@/components/ui/button";
import type { UserMode } from "@/lib/use-user-mode";
import { cn } from "@/lib/utils";

interface StepModeProps {
	selected: UserMode | null;
	onSelect: (mode: UserMode) => void;
	onNext: () => void;
	onBack: () => void;
}

const MODE_OPTIONS: {
	id: UserMode;
	label: string;
	icon: typeof Code2;
	tagline: string;
	description: string;
}[] = [
	{
		id: "expert",
		label: "Expert",
		icon: Code2,
		tagline: "Full control",
		description:
			"Dashboard metrics, dual-pane power mode, and direct /sf command access. Built for people who want visibility into every milestone and task.",
	},
	{
		id: "vibe-coder",
		label: "Vibe Coder",
		icon: MessageCircle,
		tagline: "Just chat",
		description:
			"Conversational interface with the AI agent. Describe what you want and let SF handle the structure. Same engine, friendlier surface.",
	},
];

export function StepMode({
	selected,
	onSelect,
	onNext,
	onBack,
}: StepModeProps) {
	return (
		<div className="flex flex-col items-center text-center">
			<motion.h2
				initial={{ opacity: 0, y: 12 }}
				animate={{ opacity: 1, y: 0 }}
				transition={{ duration: 0.4 }}
				className="text-2xl font-bold tracking-tight text-foreground sm:text-3xl"
				style={{ textWrap: "balance" } as React.CSSProperties}
			>
				How do you want to work?
			</motion.h2>

			<motion.p
				initial={{ opacity: 0, y: 12 }}
				animate={{ opacity: 1, y: 0 }}
				transition={{ delay: 0.06, duration: 0.4 }}
				className="mt-2 max-w-sm text-sm leading-relaxed text-muted-foreground"
			>
				You can switch anytime from settings.
			</motion.p>

			<motion.div
				initial={{ opacity: 0, y: 16 }}
				animate={{ opacity: 1, y: 0 }}
				transition={{ delay: 0.12, duration: 0.45 }}
				className="mt-8 grid w-full max-w-lg gap-3 sm:grid-cols-2"
			>
				{MODE_OPTIONS.map((opt) => {
					const isSelected = selected === opt.id;
					const Icon = opt.icon;

					return (
						<button
							key={opt.id}
							type="button"
							onClick={() => onSelect(opt.id)}
							className={cn(
								"group relative flex flex-col rounded-xl border px-5 py-5 text-left transition-all duration-200",
								"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
								"active:scale-[0.98]",
								isSelected
									? "border-foreground/30 bg-foreground/[0.06] shadow-[0_0_0_1px_rgba(255,255,255,0.06)]"
									: "border-border/50 bg-card/50 hover:border-foreground/15 hover:bg-card/50",
							)}
							data-testid={`onboarding-mode-${opt.id}`}
						>
							{/* Selection indicator */}
							<div className="absolute right-3.5 top-3.5">
								<div
									className={cn(
										"flex h-5 w-5 items-center justify-center rounded-full border-[1.5px] transition-all duration-200",
										isSelected
											? "border-foreground bg-foreground"
											: "border-foreground/20",
									)}
								>
									{isSelected && (
										<motion.svg
											initial={{ scale: 0, opacity: 0 }}
											animate={{ scale: 1, opacity: 1 }}
											transition={{ type: "spring", duration: 0.3, bounce: 0 }}
											viewBox="0 0 12 12"
											className="h-2.5 w-2.5 text-background"
											fill="none"
											stroke="currentColor"
											strokeWidth={2.5}
											strokeLinecap="round"
											strokeLinejoin="round"
										>
											<polyline points="2.5 6 5 8.5 9.5 3.5" />
										</motion.svg>
									)}
								</div>
							</div>

							{/* Icon */}
							<div
								className={cn(
									"mb-4 flex h-10 w-10 items-center justify-center rounded-lg transition-colors duration-200",
									isSelected ? "bg-foreground/10" : "bg-foreground/[0.04]",
								)}
							>
								<Icon
									className={cn(
										"h-5 w-5 transition-colors duration-200",
										isSelected ? "text-foreground" : "text-muted-foreground",
									)}
									strokeWidth={1.5}
								/>
							</div>

							{/* Label + tagline */}
							<div className="pr-7">
								<span className="text-[15px] font-semibold text-foreground">
									{opt.label}
								</span>
								<span
									className={cn(
										"ml-2 text-xs font-medium transition-colors duration-200",
										isSelected
											? "text-muted-foreground"
											: "text-muted-foreground",
									)}
								>
									{opt.tagline}
								</span>
							</div>

							{/* Description */}
							<p className="mt-2 text-[13px] leading-relaxed text-muted-foreground">
								{opt.description}
							</p>
						</button>
					);
				})}
			</motion.div>

			{/* Navigation */}
			<motion.div
				initial={{ opacity: 0 }}
				animate={{ opacity: 1 }}
				transition={{ delay: 0.2, duration: 0.3 }}
				className="mt-8 flex w-full max-w-lg items-center justify-between"
			>
				<Button
					variant="ghost"
					onClick={onBack}
					className="text-muted-foreground transition-transform active:scale-[0.96]"
				>
					Back
				</Button>
				<Button
					onClick={onNext}
					disabled={!selected}
					className="group gap-2 transition-transform active:scale-[0.96]"
					data-testid="onboarding-mode-continue"
				>
					Continue
					<ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
				</Button>
			</motion.div>
		</div>
	);
}
