"use client";

/**
 * Success Display
 *
 * COPIED VERBATIM FROM: components/onboarding/steps/success-step.tsx:53-117
 * Renders success hero and next steps cards
 */

import { CheckCircle2 } from "lucide-react";
import {
	ANIMATION_CLASSES,
	getNextStepsLabelStyle,
	getStaggerStyle,
	getSuccessHeroStyle,
	STAGGER_PRESETS,
} from "../animations";
import { cx } from "../lib/utils";
import { OnboardingButton } from "../primitives/onboarding-button";
import { OnboardingCard } from "../primitives/onboarding-card";
import type { SuccessDisplayProps } from "../types/fields";

export function SuccessDisplay({
	title = "You're all set!",
	message = "Your setup is complete. Here's what you can do next.",
	icon,
	nextSteps = [],
}: SuccessDisplayProps) {
	return (
		<div>
			{/* Hero section */}
			<div
				style={getSuccessHeroStyle()}
				className={cx(ANIMATION_CLASSES.fadeInZoom, "text-center")}
			>
				<div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-primary/10 text-primary">
					{icon || <CheckCircle2 className="h-8 w-8" />}
				</div>

				<h1 className="text-2xl font-semibold text-foreground sm:text-xl">
					{title}
				</h1>
				<p className="mx-auto mt-4 max-w-md text-muted-foreground sm:text-sm">
					{message}
				</p>
			</div>

			{/* Next steps section */}
			{nextSteps.length > 0 && (
				<div className="mt-10 space-y-3">
					<p
						className={cx(
							"text-sm font-medium text-foreground",
							ANIMATION_CLASSES.fadeInUp,
						)}
						style={getNextStepsLabelStyle()}
					>
						Next steps
					</p>
					{nextSteps.map((step, index) => (
						<OnboardingCard
							key={index.toString()}
							className={cx(
								"flex items-start gap-4 border-border p-4",
								ANIMATION_CLASSES.fadeInUp,
							)}
							style={getStaggerStyle(
								index,
								STAGGER_PRESETS.successCards.baseDelay,
								STAGGER_PRESETS.successCards.increment,
								STAGGER_PRESETS.successCards.duration,
							)}
						>
							{step.icon && (
								<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
									{step.icon}
								</div>
							)}
							<div className="flex-1 min-w-0">
								<div className="flex items-center gap-2">
									<span className="font-medium text-foreground">
										{step.title}
									</span>
									{step.optional && (
										<span className="text-xs text-muted-foreground">
											(optional)
										</span>
									)}
								</div>
								{step.description && (
									<p className="mt-1 text-sm text-muted-foreground">
										{step.description}
									</p>
								)}
							</div>
							{step.actionText && step.onAction && (
								<OnboardingButton
									type="button"
									variant="secondary"
									onClick={step.onAction}
									className="shrink-0 text-sm py-1.5"
								>
									{step.actionText}
								</OnboardingButton>
							)}
						</OnboardingCard>
					))}
				</div>
			)}
		</div>
	);
}