import {
	faCheck,
	faChevronLeft,
	faCircleCheck,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useAtomValue } from "jotai";
import {
	Suspense,
	useCallback,
	useEffect,
	useMemo,
	useRef,
	useState,
} from "react";
import { Link, useParams } from "wouter";
import { ApiClientError, apiClient } from "../api";
import { studyDataAtomFamily } from "../atoms";
import { ErrorBoundary } from "../components/ErrorBoundary";
import { LoadingSpinner } from "../components/LoadingSpinner";
import { renderCard } from "../utils/templateRenderer";

type Rating = 1 | 2 | 3 | 4;

const RatingLabels: Record<Rating, string> = {
	1: "Again",
	2: "Hard",
	3: "Good",
	4: "Easy",
};

const RatingStyles: Record<Rating, string> = {
	1: "bg-again hover:bg-again/90 focus:ring-again/30",
	2: "bg-hard hover:bg-hard/90 focus:ring-hard/30",
	3: "bg-good hover:bg-good/90 focus:ring-good/30",
	4: "bg-easy hover:bg-easy/90 focus:ring-easy/30",
};

function StudySession({ deckId }: { deckId: string }) {
	const { deck, cards } = useAtomValue(studyDataAtomFamily(deckId));

	// Session state (kept as useState - transient UI state)
	const [currentIndex, setCurrentIndex] = useState(0);
	const [isFlipped, setIsFlipped] = useState(false);
	const [isSubmitting, setIsSubmitting] = useState(false);
	const [submitError, setSubmitError] = useState<string | null>(null);
	const [completedCount, setCompletedCount] = useState(0);
	const cardStartTimeRef = useRef<number>(Date.now());

	// biome-ignore lint/correctness/useExhaustiveDependencies: Reset timer when card changes
	useEffect(() => {
		cardStartTimeRef.current = Date.now();
	}, [currentIndex]);

	const handleFlip = useCallback(() => {
		setIsFlipped(true);
	}, []);

	const handleRating = useCallback(
		async (rating: Rating) => {
			if (isSubmitting) return;

			const currentCard = cards[currentIndex];
			if (!currentCard) return;

			setIsSubmitting(true);
			setSubmitError(null);

			const durationMs = Date.now() - cardStartTimeRef.current;

			try {
				const res = await apiClient.rpc.api.decks[":deckId"].study[
					":cardId"
				].$post({
					param: { deckId, cardId: currentCard.id },
					json: { rating, durationMs },
				});
				await apiClient.handleResponse(res);

				setCompletedCount((prev) => prev + 1);
				setIsFlipped(false);
				setCurrentIndex((prev) => prev + 1);
			} catch (err) {
				if (err instanceof ApiClientError) {
					setSubmitError(err.message);
				} else {
					setSubmitError("Failed to submit review. Please try again.");
				}
			} finally {
				setIsSubmitting(false);
			}
		},
		[deckId, isSubmitting, cards, currentIndex],
	);

	const handleKeyDown = useCallback(
		(e: KeyboardEvent) => {
			if (isSubmitting) return;

			if (!isFlipped) {
				if (e.key === " " || e.key === "Enter") {
					e.preventDefault();
					handleFlip();
				}
			} else {
				const keyRatingMap: Record<string, Rating> = {
					"1": 1,
					"2": 2,
					"3": 3,
					"4": 4,
				};

				const rating = keyRatingMap[e.key];
				if (rating) {
					e.preventDefault();
					handleRating(rating);
				}
			}
		},
		[isFlipped, isSubmitting, handleFlip, handleRating],
	);

	useEffect(() => {
		window.addEventListener("keydown", handleKeyDown);
		return () => window.removeEventListener("keydown", handleKeyDown);
	}, [handleKeyDown]);

	const currentCard = cards[currentIndex];
	const isSessionComplete = currentIndex >= cards.length && cards.length > 0;
	const hasNoCards = cards.length === 0;
	const remainingCards = cards.length - currentIndex;

	// Compute rendered card content for both legacy and note-based cards
	const cardContent = useMemo(() => {
		if (!currentCard) return null;

		// Note-based card: use template rendering
		if (currentCard.noteType && currentCard.fieldValuesMap) {
			const rendered = renderCard({
				frontTemplate: currentCard.noteType.frontTemplate,
				backTemplate: currentCard.noteType.backTemplate,
				fieldValues: currentCard.fieldValuesMap,
				isReversed: currentCard.isReversed ?? false,
			});
			return { front: rendered.front, back: rendered.back };
		}

		// Legacy card: use front/back directly
		return { front: currentCard.front, back: currentCard.back };
	}, [currentCard]);

	return (
		<div className="flex-1 flex flex-col animate-fade-in">
			{/* Submit Error */}
			{submitError && (
				<div
					role="alert"
					className="bg-error/5 border border-error/20 rounded-xl p-4 flex items-center justify-between mb-4"
				>
					<span className="text-error">{submitError}</span>
					<button
						type="button"
						onClick={() => setSubmitError(null)}
						className="text-error hover:text-error/80 font-medium text-sm"
					>
						Dismiss
					</button>
				</div>
			)}

			{/* Study Header */}
			<div className="flex items-center justify-between mb-6">
				<h1 className="font-display text-xl font-medium text-slate truncate">
					{deck.name}
				</h1>
				{!isSessionComplete && !hasNoCards && (
					<span
						data-testid="remaining-count"
						className="bg-ivory text-slate px-3 py-1 rounded-full text-sm font-medium"
					>
						{remainingCards} remaining
					</span>
				)}
			</div>

			{/* No Cards State */}
			{hasNoCards && (
				<div
					data-testid="no-cards"
					className="flex-1 flex items-center justify-center"
				>
					<div className="text-center py-12 px-6 bg-white rounded-2xl border border-border/50 shadow-card max-w-sm w-full">
						<div className="w-16 h-16 mx-auto mb-4 bg-success/10 rounded-2xl flex items-center justify-center">
							<FontAwesomeIcon
								icon={faCheck}
								className="w-8 h-8 text-success"
								aria-hidden="true"
							/>
						</div>
						<h2 className="font-display text-xl font-medium text-slate mb-2">
							All caught up!
						</h2>
						<p className="text-muted text-sm mb-6">
							No cards due for review right now
						</p>
						<Link
							href={`/decks/${deckId}`}
							className="inline-flex items-center gap-2 bg-primary hover:bg-primary-dark text-white font-medium py-2.5 px-5 rounded-lg transition-all duration-200"
						>
							Back to Deck
						</Link>
					</div>
				</div>
			)}

			{/* Session Complete State */}
			{isSessionComplete && (
				<div
					data-testid="session-complete"
					className="flex-1 flex items-center justify-center"
				>
					<div className="text-center py-12 px-6 bg-white rounded-2xl border border-border/50 shadow-lg max-w-sm w-full animate-scale-in">
						<div className="w-20 h-20 mx-auto mb-6 bg-success/10 rounded-full flex items-center justify-center">
							<FontAwesomeIcon
								icon={faCircleCheck}
								className="w-10 h-10 text-success"
								aria-hidden="true"
							/>
						</div>
						<h2 className="font-display text-2xl font-semibold text-ink mb-2">
							Session Complete!
						</h2>
						<p className="text-muted mb-1">You reviewed</p>
						<p className="text-4xl font-display font-bold text-primary mb-1">
							<span data-testid="completed-count">{completedCount}</span>
						</p>
						<p className="text-muted mb-8">
							card{completedCount !== 1 ? "s" : ""}
						</p>
						<div className="flex flex-col sm:flex-row gap-3 justify-center">
							<Link
								href={`/decks/${deckId}`}
								className="inline-flex items-center justify-center gap-2 bg-primary hover:bg-primary-dark text-white font-medium py-2.5 px-5 rounded-lg transition-all duration-200"
							>
								Back to Deck
							</Link>
							<Link
								href="/"
								className="inline-flex items-center justify-center gap-2 bg-ivory hover:bg-border text-slate font-medium py-2.5 px-5 rounded-lg transition-all duration-200"
							>
								All Decks
							</Link>
						</div>
					</div>
				</div>
			)}

			{/* Active Study Card */}
			{currentCard && cardContent && !isSessionComplete && (
				<div data-testid="study-card" className="flex-1 flex flex-col">
					{/* Card */}
					<button
						type="button"
						data-testid="card-container"
						onClick={!isFlipped ? handleFlip : undefined}
						aria-label={
							isFlipped ? "Card showing answer" : "Click to reveal answer"
						}
						disabled={isFlipped}
						className={`flex-1 min-h-[280px] bg-white rounded-2xl border border-border/50 shadow-card p-8 flex flex-col items-center justify-center text-center transition-all duration-300 ${
							!isFlipped
								? "cursor-pointer hover:shadow-lg hover:border-primary/30 active:scale-[0.99]"
								: "bg-ivory/50"
						}`}
					>
						{!isFlipped ? (
							<>
								<p
									data-testid="card-front"
									className="text-xl md:text-2xl text-ink font-medium whitespace-pre-wrap break-words leading-relaxed"
								>
									{cardContent.front}
								</p>
								<p className="mt-8 text-muted text-sm flex items-center gap-2">
									<kbd className="px-2 py-0.5 bg-ivory rounded text-xs font-mono">
										Space
									</kbd>
									<span>or tap to reveal</span>
								</p>
							</>
						) : (
							<p
								data-testid="card-back"
								className="text-xl md:text-2xl text-ink font-medium whitespace-pre-wrap break-words leading-relaxed animate-fade-in"
							>
								{cardContent.back}
							</p>
						)}
					</button>

					{/* Rating Buttons */}
					{isFlipped && (
						<div
							data-testid="rating-buttons"
							className="mt-6 grid grid-cols-4 gap-2 animate-slide-up"
						>
							{([1, 2, 3, 4] as Rating[]).map((rating) => (
								<button
									key={rating}
									type="button"
									data-testid={`rating-${rating}`}
									onClick={() => handleRating(rating)}
									disabled={isSubmitting}
									className={`py-4 px-2 rounded-xl text-white font-medium transition-all duration-200 focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed active:scale-[0.97] ${RatingStyles[rating]}`}
								>
									<span className="block text-base font-semibold">
										{RatingLabels[rating]}
									</span>
									<span className="block text-xs opacity-80 mt-0.5">
										{rating}
									</span>
								</button>
							))}
						</div>
					)}
				</div>
			)}
		</div>
	);
}

export function StudyPage() {
	const { deckId } = useParams<{ deckId: string }>();

	if (!deckId) {
		return (
			<div className="min-h-screen bg-cream flex items-center justify-center">
				<div className="text-center">
					<p className="text-muted mb-4">Invalid deck ID</p>
					<Link
						href="/"
						className="text-primary hover:text-primary-dark font-medium"
					>
						Back to decks
					</Link>
				</div>
			</div>
		);
	}

	return (
		<div className="min-h-screen bg-cream flex flex-col">
			{/* Header */}
			<header className="bg-white border-b border-border/50 shrink-0">
				<div className="max-w-2xl mx-auto px-4 py-4">
					<Link
						href={`/decks/${deckId}`}
						className="inline-flex items-center gap-2 text-muted hover:text-slate transition-colors text-sm"
					>
						<FontAwesomeIcon
							icon={faChevronLeft}
							className="w-4 h-4"
							aria-hidden="true"
						/>
						Back to Deck
					</Link>
				</div>
			</header>

			{/* Main Content */}
			<main className="flex-1 flex flex-col max-w-2xl mx-auto w-full px-4 py-6">
				<ErrorBoundary>
					<Suspense fallback={<LoadingSpinner className="flex-1" />}>
						<StudySession deckId={deckId} />
					</Suspense>
				</ErrorBoundary>
			</main>
		</div>
	);
}