import { useEffect, useState } from "react";
import { ApiError } from "@/lib/api";
import { focusRing } from "@/ui/classes";

/**
 * Inline mutation error per ruling 17: 400/409 messages verbatim, 429 with
 * countdown. Pass `onRetry` to append a retry button for a failed query.
 */
export default function InlineError({ error, onRetry }: { error: unknown; onRetry?: () => void }) {
	const retryAfter = error instanceof ApiError && error.status === 429 ? (error.retryAfter ?? null) : null;
	const [remaining, setRemaining] = useState<number | null>(retryAfter);

	useEffect(() => {
		setRemaining(retryAfter);
		if (retryAfter === null) return;
		const timer = setInterval(() => setRemaining((s) => (s === null || s <= 1 ? 0 : s - 1)), 1000);
		return () => clearInterval(timer);
	}, [error, retryAfter]);

	if (error === null || error === undefined) return null;

	let message: string;
	if (error instanceof ApiError) {
		if (error.status === 429) {
			message =
				remaining !== null && remaining > 0
					? `Rate limited. Try again in ${remaining}s.`
					: "Rate limited. Try again.";
		} else if (error.status === 503) {
			message = "The server is starting or degraded. Try again shortly.";
		} else {
			message = error.message;
		}
	} else {
		message = "Could not reach the server.";
	}

	return (
		<p role="alert" className="mt-2 text-sm text-red-600 dark:text-red-400">
			{message}
			{onRetry !== undefined && (
				<>
					{" "}
					<button type="button" onClick={onRetry} className={`font-medium underline ${focusRing}`}>
						Retry
					</button>
				</>
			)}
		</p>
	);
}
