"use client";

import Link from "next/link";
import { useEffect, useMemo, useState } from "react";

import { QuizRunner } from "@/components/orthoprep/QuizRunner";
import { getWrongQuestions } from "@/components/orthoprep/quiz-storage";
import type { FrcsQuestionWithContext } from "@/lib/frcs";

const REVIEW_CAP = 20;

type Props = {
  /** Full bank of published questions, supplied by the server component. */
  bank: FrcsQuestionWithContext[];
};

export function ReviewClient({ bank }: Props) {
  const [ready, setReady] = useState(false);
  const [wrongIds, setWrongIds] = useState<number[]>([]);

  useEffect(() => {
    setWrongIds(getWrongQuestions().slice(0, REVIEW_CAP));
    setReady(true);
  }, []);

  const questions = useMemo(() => {
    if (wrongIds.length === 0) return [];
    const byNumber = new Map<number, FrcsQuestionWithContext>();
    for (const q of bank) byNumber.set(q.number, q);
    const picked: FrcsQuestionWithContext[] = [];
    for (const id of wrongIds) {
      const q = byNumber.get(id);
      if (q) picked.push(q);
    }
    return picked;
  }, [bank, wrongIds]);

  if (!ready) {
    return (
      <div className="rounded-xl border border-[var(--color-line)] bg-white p-8 text-center text-[14px] text-[var(--color-slate)]">
        Loading your review session&hellip;
      </div>
    );
  }

  if (questions.length === 0) {
    return (
      <div className="rounded-xl border border-[var(--color-line)] bg-white p-10 text-center shadow-[0_1px_0_var(--color-line)]">
        <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-emerald-50 text-emerald-600 ring-1 ring-emerald-200">
          <svg
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2.5"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="h-7 w-7"
          >
            <path d="M5 12l5 5L20 7" />
          </svg>
        </div>
        <h1 className="mt-5 font-display text-[24px] font-extrabold tracking-tight text-[var(--color-ink)]">
          Nothing to review yet
        </h1>
        <p className="mt-3 text-[15px] leading-relaxed text-[var(--color-slate)]">
          Answer a few quiz questions first. Any that you get wrong will show
          up here so you can drill them until they stick.
        </p>
        <div className="mt-6 flex flex-wrap items-center justify-center gap-3">
          <Link
            href="/products/orthoprep/quiz/session?mode=random&count=10"
            className="inline-flex items-center gap-2 rounded-lg bg-[var(--color-blue)] px-5 py-2.5 text-[14px] font-semibold text-white hover:bg-[var(--color-blue-deep)]"
          >
            Take a random quiz
          </Link>
          <Link
            href="/products/orthoprep/quiz"
            className="inline-flex items-center gap-2 rounded-lg border border-[var(--color-line)] bg-white px-5 py-2.5 text-[14px] font-semibold text-[var(--color-ink)] hover:border-[var(--color-blue)] hover:text-[var(--color-blue)]"
          >
            Quiz hub
          </Link>
        </div>
      </div>
    );
  }

  return (
    <>
      <div className="mb-4 rounded-lg border border-[var(--color-line)] bg-white p-4 text-[13px] text-[var(--color-slate)]">
        Reviewing{" "}
        <strong className="text-[var(--color-ink)]">{questions.length}</strong>{" "}
        question{questions.length === 1 ? "" : "s"} you previously answered
        incorrectly.
      </div>
      <QuizRunner
        questions={questions}
        mode="review"
        retryHref="/products/orthoprep/quiz/review"
      />
    </>
  );
}
