"use client";

import React, { useEffect, useState } from "react";
import { getSemesters } from "../../lib/api";
import type { Semester } from "../../content/types";

export default function LecturesPage() {
  const [semesters, setSemesters] = useState<Semester[]>([]);

  useEffect(() => {
    getSemesters().then((s) => {
      if (s) setSemesters(s);
    });
  }, []);

  const recentSemesters = semesters.slice(0, 3);
  const olderSemesters = semesters.slice(3);

  const oldestSem = olderSemesters[olderSemesters.length - 1];
  const newestOlderSem = olderSemesters[0];

  return (
    <div className="container-content py-8 sm:py-12 space-y-10 sm:space-y-14">
      {/* Page Header */}
      <section>
        <h1 className="font-serif text-4xl sm:text-5xl font-normal text-ink tracking-tight">
          LECTURES
        </h1>
      </section>

      {/* Recent 3 Semesters */}
      <section className="space-y-6 pt-6 md:pt-8 border-t border-line">
        <div className="flex justify-between items-center">
          <h2 className="font-serif text-2xl sm:text-3xl font-normal text-cobalt-dark">
            Recent Courses
          </h2>
          <span className="font-mono text-xs text-ink-mute hidden sm:inline">
            Latest 3 Semesters
          </span>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-5 sm:gap-6">
          {recentSemesters.map((sem, idx) => (
            <div
              key={idx}
              className="bg-paper p-5 sm:p-6 rounded-lg border border-line space-y-4 flex flex-col justify-between shadow-sm"
            >
              <div className="space-y-3">
                <div className="flex justify-between items-center border-b border-line pb-2.5">
                  <span className="font-serif text-lg sm:text-xl font-normal text-ink">
                    {sem.term} {sem.year}
                  </span>
                  <span className="font-mono text-[0.7rem] uppercase tracking-wider text-vermillion-dark font-bold px-2 py-0.5 rounded bg-vermillion-dark/10">
                    Latest
                  </span>
                </div>

                <ul className="space-y-2.5 pt-1">
                  {sem.courses.map((c, cIdx) => (
                    <li key={cIdx} className="space-y-0.5">
                      <div className="font-serif text-sm sm:text-base text-ink leading-snug">
                        {c.en}
                      </div>
                      <div className="font-mono text-xs text-ink-mute">
                        Code: {c.code} {c.note && `(${c.note})`}
                      </div>
                    </li>
                  ))}
                </ul>
              </div>

              <div className="pt-3 border-t border-line/60 font-mono text-xs text-ink-mute flex justify-between items-center">
                <span>Total Offerings</span>
                <span className="font-semibold text-ink">{sem.courses.length} Courses</span>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Older Semesters (Native <details>/<summary> progressive disclosure) */}
      <section className="space-y-6 pt-6 md:pt-8 border-t border-line">
        <details className="group border border-line rounded-lg bg-paper p-5 sm:p-6 transition-all duration-200">
          <summary className="flex justify-between items-center cursor-pointer list-none select-none">
            <div className="space-y-1">
              <span className="font-serif text-lg sm:text-xl font-normal text-ink">
                Browse all semesters
              </span>
              <p className="text-xs text-ink-mute font-mono">
                Course history from {oldestSem ? `${oldestSem.year} ${oldestSem.term}` : "2004 Spring"} to {newestOlderSem ? `${newestOlderSem.year} ${newestOlderSem.term}` : "2024 Fall"} ({olderSemesters.length} Semesters)
              </p>
            </div>
            <span className="font-mono text-xs text-vermillion-dark font-bold border border-vermillion-dark px-3.5 py-1.5 rounded group-open:bg-vermillion-dark group-open:text-white dark:group-open:text-ivory transition-colors">
              <span className="group-open:hidden">Open ▾</span>
              <span className="hidden group-open:inline">Close ▴</span>
            </span>
          </summary>

          <div className="mt-6 pt-6 border-t border-line grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 sm:gap-6">
            {olderSemesters.map((sem, idx) => (
              <div
                key={idx}
                className="bg-ivory p-5 rounded-lg border border-line space-y-3 shadow-sm hover:border-cobalt-dark/40 transition-colors"
              >
                <div className="font-serif text-base sm:text-lg font-normal text-ink border-b border-line pb-2 flex justify-between items-center">
                  <span>
                    {sem.term} {sem.year}
                  </span>
                  <span className="font-mono text-xs text-ink-mute">
                    {sem.courses.length} Courses
                  </span>
                </div>

                <ul className="space-y-2">
                  {sem.courses.map((c, cIdx) => (
                    <li key={cIdx} className="space-y-0.5">
                      <div className="font-serif text-sm text-ink leading-snug">
                        {c.en}
                      </div>
                      <div className="font-mono text-[0.7rem] text-ink-mute">
                        Code: {c.code} {c.note && `(${c.note})`}
                      </div>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </details>
      </section>
    </div>
  );
}