"use client";

import Link from "next/link";
import { useState } from "react";
import { motion, AnimatePresence, useReducedMotion } from "motion/react";

import type { PartSummary } from "@/lib/frcs";

export function PartBrowserCard({
  part,
  index,
}: {
  part: PartSummary;
  index: number;
}) {
  const [open, setOpen] = useState(false);
  const shouldReduceMotion = useReducedMotion();

  return (
    <motion.div
      initial={shouldReduceMotion ? false : { opacity: 0, y: 16 }}
      whileInView={shouldReduceMotion ? undefined : { opacity: 1, y: 0 }}
      viewport={{ once: true, amount: 0.2 }}
      transition={{
        duration: 0.5,
        ease: [0.22, 1, 0.36, 1],
        delay: index * 0.05,
      }}
      className="rounded-xl border border-[var(--color-line)] bg-white p-6 transition-[border-color,box-shadow] hover:border-[var(--color-blue)] hover:shadow-[0_16px_40px_rgba(30,64,255,0.06)]"
    >
      <div className="flex flex-wrap items-start justify-between gap-4">
        <div className="min-w-0">
          <h3 className="font-display text-[22px] font-extrabold tracking-tight text-[var(--color-ink)]">
            {part.title}
          </h3>
          <div className="mt-1 text-[12px] font-semibold uppercase tracking-wider text-[var(--color-blue)]">
            {part.chapterCount} chapters · {part.questionCount} questions
          </div>
        </div>
        <Link
          href={`/products/orthoprep/quiz/session?mode=part&part=${part.slug}`}
          className="inline-flex shrink-0 items-center gap-2 rounded-lg bg-[var(--color-blue)] px-4 py-2 text-[13px] font-semibold text-white transition-colors hover:bg-[var(--color-blue-deep)]"
        >
          Start quiz →
        </Link>
      </div>

      <button
        type="button"
        onClick={() => setOpen((o) => !o)}
        className="mt-5 flex items-center gap-2 text-[13px] font-semibold text-[var(--color-blue)] hover:underline"
        aria-expanded={open}
      >
        <svg
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          className={`h-4 w-4 transition-transform ${open ? "rotate-45" : ""}`}
        >
          <path d="M12 5v14M5 12h14" />
        </svg>
        {open ? "Hide chapters" : `Show ${part.chapterCount} chapters`}
      </button>

      <AnimatePresence initial={false}>
        {open && (
          <motion.ul
            key="chapters"
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: "auto", opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.25, ease: "easeOut" }}
            className="mt-4 overflow-hidden border-t border-[var(--color-line)]"
          >
            {part.chapters.map((ch) => (
              <li
                key={ch.slug}
                className="flex items-center justify-between gap-4 border-b border-[var(--color-line)] py-3 last:border-b-0"
              >
                <div className="min-w-0">
                  <div className="text-[14px] font-semibold text-[var(--color-ink)] truncate">
                    {ch.title}
                  </div>
                  <div className="mt-0.5 text-[11px] text-[var(--color-slate)]">
                    {ch.range} · {ch.questionCount} questions
                  </div>
                </div>
                <a
                  href={`#${ch.slug}`}
                  className="shrink-0 text-[12px] font-semibold text-[var(--color-blue)] hover:underline"
                >
                  Preview →
                </a>
              </li>
            ))}
          </motion.ul>
        )}
      </AnimatePresence>
    </motion.div>
  );
}
