"use client";

/**
 * Summary Display
 *
 * COPIED VERBATIM FROM: components/onboarding/steps/summary-step.tsx:99-149
 * Renders summary sections with editable cards
 */

import { Edit2 } from "lucide-react";
import type { ReactNode } from "react";
import {
	ANIMATION_CLASSES,
	getStaggerStyle,
	STAGGER_PRESETS,
} from "../animations";
import { cx } from "../lib/utils";
import { OnboardingCard } from "../primitives/onboarding-card";
import type { SummaryDisplayProps } from "../types/fields";

/**
 * Render value helper
 * COPIED VERBATIM FROM: components/onboarding/steps/summary-step.tsx:70-86
 */
function renderValue(value: string | string[] | ReactNode) {
	if (Array.isArray(value)) {
		return (
			<ul className="space-y-1">
				{value.map((v, i) => (
					<li key={i.toString()} 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;
}

export function SummaryDisplay({ sections }: SummaryDisplayProps) {
	return (
		<div className="space-y-4">
			{sections.map((section, sectionIndex) => (
				<OnboardingCard
					key={section.title}
					className={cx("border-border p-4", ANIMATION_CLASSES.fadeInUp)}
					style={getStaggerStyle(
						sectionIndex,
						STAGGER_PRESETS.formFields.baseDelay,
						STAGGER_PRESETS.formFields.increment,
						STAGGER_PRESETS.formFields.duration,
					)}
				>
					<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.toString()}
								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>
	);
}