"use client";

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

export interface SummarySection {
	/** Section title */
	title: string;
	/** Icon for the section */
	icon?: ReactNode;
	/** Items in this section */
	items: SummaryItem[];
	/** Optional edit action */
	onEdit?: () => void;
}

export interface SummaryItem {
	/** Label for the item */
	label: string;
	/** Value to display */
	value: string | string[] | ReactNode;
	/** Optional icon */
	icon?: ReactNode;
}

export interface SummaryStepProps {
	/** Title displayed at the top of the step */
	title?: string;
	/** Description text below the title */
	description?: string;
	/** Sections to display */
	sections: SummarySection[];
	/** Called when the user submits the form */
	onSubmit: () => void | Promise<void>;
	/** Text for the submit button */
	submitText?: string;
	/** Text shown while submitting */
	loadingText?: string;
	/** Optional back button config */
	backButton?: {
		text: string;
		onClick: () => void;
	};
}

export function SummaryStep({
	title = "Review your selections",
	description = "Please review your choices before continuing.",
	sections,
	onSubmit,
	submitText = "Confirm & Continue",
	loadingText = "Submitting...",
	backButton,
}: SummaryStepProps) {
	const [loading, setLoading] = useState(false);

	const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
		e.preventDefault();
		setLoading(true);
		try {
			await onSubmit();
		} finally {
			setLoading(false);
		}
	};

	const renderValue = (value: string | string[] | ReactNode) => {
		if (Array.isArray(value)) {
			return (
				<ul className="space-y-1">
					{value.map((v, i) => (
						<li key={i} className="text-sm text-foreground">
							{v}
						</li>
					))}
				</ul>
			);
		}
		if (typeof value === "string") {
			return (
				<span className="text-sm font-medium text-foreground">{value}</span>
			);
		}
		return value;
	};

	return (
		<main className="mx-auto p-4">
			<div
				style={{ animationDuration: "500ms" }}
				className="motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-4"
			>
				<h1 className="text-2xl font-semibold text-foreground sm:text-xl">
					{title}
				</h1>
				<p className="mt-6 text-muted-foreground sm:text-sm">{description}</p>
			</div>

			<form onSubmit={handleSubmit} className="mt-8">
				<div className="space-y-4">
					{sections.map((section, sectionIndex) => (
						<OnboardingCard
							key={section.title}
							className={cx(
								"border-border p-4",
								"motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-4",
							)}
							style={{
								animationDuration: "500ms",
								animationDelay: `${100 + sectionIndex * 100}ms`,
								animationFillMode: "backwards",
							}}
						>
							<div className="flex items-start justify-between">
								<div className="flex items-center gap-3">
									{section.icon && (
										<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
											{section.icon}
										</div>
									)}
									<h3 className="font-medium text-foreground">
										{section.title}
									</h3>
								</div>
								{section.onEdit && (
									<button
										type="button"
										onClick={section.onEdit}
										className="flex items-center gap-1 rounded px-2 py-1 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
									>
										<Edit2 className="h-3 w-3" />
										Edit
									</button>
								)}
							</div>

							<div className="mt-4 space-y-3">
								{section.items.map((item, itemIndex) => (
									<div
										key={itemIndex}
										className="flex items-start justify-between gap-4 border-t border-border pt-3 first:border-0 first:pt-0"
									>
										<div className="flex items-center gap-2 text-sm text-muted-foreground">
											{item.icon}
											<span>{item.label}</span>
										</div>
										<div className="text-right">{renderValue(item.value)}</div>
									</div>
								))}
							</div>
						</OnboardingCard>
					))}
				</div>

				<div
					className={cx(
						"mt-8 flex",
						backButton ? "justify-between" : "justify-end",
					)}
				>
					{backButton && (
						<OnboardingButton
							type="button"
							variant="ghost"
							onClick={backButton.onClick}
						>
							{backButton.text}
						</OnboardingButton>
					)}
					<OnboardingButton
						className="disabled:bg-muted disabled:text-muted-foreground"
						type="submit"
						disabled={loading}
						aria-disabled={loading}
						isLoading={loading}
					>
						{loading ? loadingText : submitText}
					</OnboardingButton>
				</div>
			</form>
		</main>
	);
}