import type { Metadata } from "next";
import Link from "next/link";

import { Container } from "@/components/Container";
import { PageHeader } from "@/components/PageHeader";
import { MotionReveal } from "@/components/MotionReveal";
import { RecentHistoryPanel } from "@/components/orthoprep/RecentHistoryPanel";
import { getAllPartsWithCounts, getFrcsBank } from "@/lib/frcs";

export const metadata: Metadata = {
  title: "OrthoPrep quiz — FRCS Basic Sciences",
  description:
    "Run an interactive quiz against the OrthoPrep FRCS Basic Sciences SBA question bank. Random sets or by part, with score history saved locally in your browser.",
};

const RANDOM_OPTIONS = [
  {
    count: 10,
    label: "Quick 10",
    blurb: "A short warm-up — one coffee's worth of revision.",
    time: "~8 minutes",
  },
  {
    count: 25,
    label: "Focused 25",
    blurb: "A medium session to stretch your recall across topics.",
    time: "~20 minutes",
  },
  {
    count: 50,
    label: "Mock 50",
    blurb: "A longer block to simulate exam pressure and pacing.",
    time: "~45 minutes",
  },
];

export const dynamic = "force-dynamic";

export default async function QuizHubPage() {
  const bank = await getFrcsBank();
  const parts = await getAllPartsWithCounts();
  const totalQuestions = parts.reduce((s, p) => s + p.questionCount, 0);

  return (
    <>
      <PageHeader
        eyebrow="OrthoPrep · Quiz"
        title="Train against the FRCS bank"
        lede="Pick a random set or drill a single part. Answers are graded instantly with a written explanation, and every attempt is saved locally so you can track progress without an account."
      />

      <Container className="pb-14 md:pb-16">
        <div className="mx-auto max-w-6xl">
          <div className="mb-10 flex flex-wrap items-center gap-3 text-[13px] text-[var(--color-slate)]">
            <Link
              href="/products/orthoprep"
              className="font-semibold text-[var(--color-blue)] underline underline-offset-2"
            >
              ← Back to OrthoPrep
            </Link>
            <span className="text-[var(--color-line)]">•</span>
            <Link
              href="/products/orthoprep/question-bank"
              className="font-semibold text-[var(--color-blue)] underline underline-offset-2"
            >
              Browse the bank →
            </Link>
            <span className="text-[var(--color-line)]">•</span>
            <span>
              {bank.parts.length} parts · {totalQuestions} questions · Author:{" "}
              {bank.author}
            </span>
          </div>

          <div className="grid gap-10 lg:grid-cols-[1fr_320px]">
            <div className="min-w-0">
              <section>
                <div className="text-[11px] font-bold uppercase tracking-wider text-[var(--color-blue)]">
                  Random quick-start
                </div>
                <h2 className="mt-2 font-display text-[28px] md:text-[32px] font-extrabold leading-tight tracking-[-0.02em] text-[var(--color-ink)]">
                  Mixed questions from across the bank
                </h2>
                <p className="mt-3 max-w-2xl text-[15px] leading-relaxed text-[var(--color-slate)]">
                  Random mode draws questions from every part — a strong way to
                  spot gaps you wouldn&apos;t otherwise notice.
                </p>

                <div className="mt-8 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
                  {RANDOM_OPTIONS.map((opt, i) => (
                    <MotionReveal
                      key={opt.count}
                      index={i}
                      className="group relative rounded-xl border border-[var(--color-line)] bg-white p-6 transition-[border-color,transform,box-shadow] hover:-translate-y-1 hover:border-[var(--color-blue)] hover:shadow-[0_16px_40px_rgba(30,64,255,0.08)]"
                    >
                      <Link
                        href={`/products/orthoprep/quiz/session?mode=random&count=${opt.count}`}
                        className="absolute inset-0"
                        aria-label={`Start ${opt.label}`}
                      />
                      <div className="font-display text-[40px] font-extrabold leading-none text-[var(--color-blue)]">
                        {opt.count}
                      </div>
                      <div className="mt-4 font-display text-[18px] font-bold tracking-tight text-[var(--color-ink)]">
                        {opt.label}
                      </div>
                      <p className="mt-2 text-[14px] leading-relaxed text-[var(--color-slate)]">
                        {opt.blurb}
                      </p>
                      <div className="mt-5 flex items-center justify-between text-[12px] font-semibold text-[var(--color-blue)]">
                        <span>{opt.time}</span>
                        <span className="transition-transform group-hover:translate-x-1">
                          Start →
                        </span>
                      </div>
                    </MotionReveal>
                  ))}
                </div>
              </section>

              <section className="mt-16">
                <div className="text-[11px] font-bold uppercase tracking-wider text-[var(--color-blue)]">
                  Drill by part
                </div>
                <h2 className="mt-2 font-display text-[28px] md:text-[32px] font-extrabold leading-tight tracking-[-0.02em] text-[var(--color-ink)]">
                  Pick a single topic area
                </h2>
                <p className="mt-3 max-w-2xl text-[15px] leading-relaxed text-[var(--color-slate)]">
                  Each part covers a block of the FRCS Basic Sciences
                  curriculum. All questions in the selected part are served in
                  order.
                </p>

                <div className="mt-8 grid gap-4 sm:grid-cols-2">
                  {parts.map((part, i) => (
                    <MotionReveal
                      key={part.slug}
                      index={i}
                      className="group relative rounded-xl border border-[var(--color-line)] bg-white p-6 transition-[border-color,transform] hover:-translate-y-[2px] hover:border-[var(--color-blue)]"
                    >
                      <Link
                        href={`/products/orthoprep/quiz/session?mode=part&part=${part.slug}`}
                        className="absolute inset-0"
                        aria-label={`Start quiz for ${part.title}`}
                      />
                      <div className="font-display text-[18px] font-bold tracking-tight text-[var(--color-ink)]">
                        {part.title}
                      </div>
                      <div className="mt-2 text-[13px] text-[var(--color-slate)]">
                        {part.chapterCount} chapters · {part.questionCount}{" "}
                        questions
                      </div>
                      <div className="mt-4 text-[12px] font-semibold text-[var(--color-blue)] transition-transform group-hover:translate-x-1">
                        Start quiz →
                      </div>
                    </MotionReveal>
                  ))}
                </div>
              </section>
            </div>

            <aside className="lg:sticky lg:top-24 lg:self-start">
              <RecentHistoryPanel limit={5} />
              <div className="mt-5 rounded-xl border border-dashed border-[var(--color-line)] bg-white p-5 text-[13px] leading-relaxed text-[var(--color-slate)]">
                History is stored <strong>in your browser only</strong> — no
                account needed. Clearing site data will erase it.
              </div>
            </aside>
          </div>
        </div>
      </Container>
    </>
  );
}
