"use client";

import { CheckCircle2 } from "lucide-react";
import { type ReactNode } from "react";
import { cx } from "../lib/utils";
import { OnboardingButton } from "../primitives/onboarding-button";
import { OnboardingCard } from "../primitives/onboarding-card";

export interface NextStep {
	/** Title of the next step */
	title: string;
	/** Description of what this step involves */
	description?: string;
	/** Icon to display (ReactNode) */
	icon?: ReactNode;
	/** Action button text */
	actionText?: string;
	/** Action to perform when clicked */
	onAction?: () => void;
	/** Whether this step is optional */
	optional?: boolean;
}

export interface SuccessStepProps {
	/** Title displayed at the top */
	title?: string;
	/** Main success message */
	message?: string;
	/** Optional icon to display (defaults to CheckCircle2) */
	icon?: ReactNode;
	/** Array of next steps to display */
	nextSteps?: NextStep[];
	/** Primary action button */
	primaryAction?: {
		text: string;
		onClick: () => void;
	};
	/** Secondary action button */
	secondaryAction?: {
		text: string;
		onClick: () => void;
	};
}

export function SuccessStep({
	title = "You're all set!",
	message = "Your setup is complete. Here's what you can do next.",
	icon,
	nextSteps = [],
	primaryAction,
	secondaryAction,
}: SuccessStepProps) {
	return (
		<main className="mx-auto p-4">
			<div
				style={{ animationDuration: "600ms" }}
				className="motion-safe:animate-in motion-safe:fade-in motion-safe:zoom-in-95 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>

			{nextSteps.length > 0 && (
				<div className="mt-10 space-y-3">
					<p
						className="text-sm font-medium text-foreground motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-4"
						style={{
							animationDuration: "500ms",
							animationDelay: "200ms",
							animationFillMode: "backwards",
						}}
					>
						Next steps
					</p>
					{nextSteps.map((step, index) => (
						<OnboardingCard
							key={index.toString()}
							className={cx(
								"flex items-start gap-4 border-border p-4",
								"motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-4",
							)}
							style={{
								animationDuration: "500ms",
								animationDelay: `${300 + index * 100}ms`,
								animationFillMode: "backwards",
							}}
						>
							{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>
			)}

			{(primaryAction || secondaryAction) && (
				<div
					className={cx(
						"mt-10 flex flex-col gap-3 sm:flex-row",
						primaryAction && secondaryAction
							? "sm:justify-center"
							: "sm:justify-center",
						"motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-4",
					)}
					style={{
						animationDuration: "500ms",
						animationDelay: `${300 + nextSteps.length * 100}ms`,
						animationFillMode: "backwards",
					}}
				>
					{secondaryAction && (
						<OnboardingButton
							type="button"
							variant="secondary"
							onClick={secondaryAction.onClick}
						>
							{secondaryAction.text}
						</OnboardingButton>
					)}
					{primaryAction && (
						<OnboardingButton type="button" onClick={primaryAction.onClick}>
							{primaryAction.text}
						</OnboardingButton>
					)}
				</div>
			)}
		</main>
	);
}