import { useState } from 'react';
import { AlertTriangle, ChevronRight } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';

/**
 * Standard error screen: a centered card with a warning icon, a short title
 * in Flavio's voice, one reassuring line, a single primary action and, when it
 * helps, a collapsed "Technical details" section.
 *
 * Purely presentational. For an error object coming from the API use
 * `ApiErrorState`, which derives the copy from the error type.
 *
 * Our users are not technical: `technicalDetails` is for the message that
 * makes a support ticket actionable (WP error code, HTTP status), not for
 * stack traces. Leave it out when it would not help anybody.
 *
 * @param {object}          props
 * @param {string}          props.title
 * @param {React.ReactNode} [props.description]
 * @param {string}          [props.actionLabel]      Defaults to "Try again"
 * @param {() => void}      [props.onAction]         No button without it
 * @param {boolean}         [props.actionPending]
 * @param {React.ReactNode} [props.icon]             Defaults to a warning sign
 * @param {string}          [props.technicalDetails] Collapsed by default
 * @param {string}          [props.className]        Extra classes for the card
 */
const ErrorState = ({
	title,
	description,
	actionLabel = 'Try again',
	onAction,
	actionPending = false,
	icon,
	technicalDetails,
	className,
}) => {
	const [detailsOpen, setDetailsOpen] = useState(false);

	return (
		<div
			role="alert"
			className={cn(
				'mx-auto w-full max-w-xl rounded-xl border border-border bg-card px-8 py-10 text-center shadow-sm',
				className
			)}
		>
			<div className="mx-auto mb-5 flex size-14 items-center justify-center rounded-xl bg-amber-100 text-amber-600 [&_svg]:size-6">
				{icon || <AlertTriangle aria-hidden="true" />}
			</div>

			<h2 className="heading-h3 text-foreground text-balance">{title}</h2>

			{description && (
				<p className="paragraph-regular text-muted-foreground mx-auto mt-3 mb-0! max-w-md text-balance">
					{description}
				</p>
			)}

			{onAction && (
				<Button
					type="button"
					onClick={onAction}
					disabled={actionPending}
					className="mt-6 bg-foreground text-background! hover:bg-foreground/90"
				>
					{actionLabel}
				</Button>
			)}

			{technicalDetails && (
				<div className="mt-8 border-t border-border pt-4">
					<button
						type="button"
						onClick={() => setDetailsOpen((open) => !open)}
						aria-expanded={detailsOpen}
						className="inline-flex cursor-pointer items-center gap-1 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
					>
						<ChevronRight
							aria-hidden="true"
							className={cn(
								'size-4 transition-transform',
								detailsOpen && 'rotate-90'
							)}
						/>
						Technical details
					</button>
					{detailsOpen && (
						<pre className="mt-3 overflow-x-auto rounded-lg bg-accent p-3 text-left text-xs whitespace-pre-wrap break-words text-muted-foreground">
							{technicalDetails}
						</pre>
					)}
				</div>
			)}
		</div>
	);
};

export default ErrorState;