import React from "react";
import { semesters } from "../../content/lectures";

export default function LecturesPage() {
  const recentSemesters = semesters.slice(0, 3);
  const olderSemesters = semesters.slice(3);

  return (
    <div className="container-content space-y-12 md:space-y-16 pt-10 md:pt-16 pb-16 md:pb-24">
      {/* Header */}
      <section className="space-y-3">
        <div className="flex items-center gap-3">
          <span className="h-px w-8 bg-cobalt-dark dark:bg-cobalt"></span>
          <span className="font-mono text-xs tracking-widest uppercase text-cobalt-dark dark:text-cobalt font-bold">
            Academic Courses
          </span>
        </div>
        <h1 className="font-serif text-4xl sm:text-5xl font-normal text-ink">
          강의 이력
        </h1>
        <p className="text-ink-mute text-base max-w-2xl">
          2016년 가을학기부터 2026년 봄학기까지 개설된 네트워크 및 소프트웨어 분야 약 20개 학기의 학부/대학원 강의 목록입니다.
        </p>
      </section>

      {/* Recent 3 Semesters */}
      <section className="space-y-6 pt-6 md:pt-10 border-t border-line">
        <div className="flex justify-between items-end">
          <div>
            <div className="font-mono text-xs text-cobalt-dark dark:text-cobalt uppercase tracking-widest font-bold">
              Recent Courses ({recentSemesters.length} Semesters)
            </div>
            <h2 className="font-serif text-3xl font-normal text-ink mt-1">
              최근 개설 강의
            </h2>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {recentSemesters.map((sem, idx) => (
            <div
              key={idx}
              className="bg-paper p-6 rounded-lg border border-line space-y-4 flex flex-col justify-between"
            >
              <div className="space-y-3">
                <div className="flex justify-between items-center border-b border-line pb-2">
                  <span className="font-serif text-xl font-normal text-ink">
                    {sem.term} {sem.year}
                  </span>
                  <span className="font-mono text-xs text-vermillion font-bold">
                    Latest
                  </span>
                </div>

                <ul className="space-y-2 pt-1">
                  {sem.courses.map((c, cIdx) => (
                    <li key={cIdx} className="space-y-0.5">
                      <div className="font-serif text-base text-ink">
                        {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">
                Course Count: {sem.courses.length}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Older Semesters (Native <details>/<summary> progressive disclosure) */}
      <section className="space-y-6 pt-6 border-t border-line">
        <details className="group border border-line rounded-lg bg-paper 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-xl font-normal text-ink">
                이전 전체 강의 이력 ({olderSemesters.length}개 학기) 열람하기
              </span>
              <p className="text-xs text-ink-mute font-mono">
                2016 Fall ~ 2024 Spring 학기별 개설 교과목 이력
              </p>
            </div>
            <span className="font-mono text-xs text-vermillion font-bold border border-vermillion px-3 py-1.5 rounded group-open:bg-vermillion group-open:text-ivory transition-colors">
              <span className="group-open:hidden">전체 보기 ▾</span>
              <span className="hidden group-open:inline">접기 ▴</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-6">
            {olderSemesters.map((sem, idx) => (
              <div
                key={idx}
                className="bg-ivory p-5 rounded border border-line space-y-3"
              >
                <div className="font-serif text-lg font-normal text-ink border-b border-line pb-1.5 flex justify-between">
                  <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">
                        {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>
  );
}