landing_page/refer_landing_page/app/members/page.tsx

"use client";

import React, { useEffect, useState } from "react";
import Image from "next/image";
import { getMembers, getAlumni } from "../../lib/api";
import { ProfessorDetailsDialog } from "./_components/ProfessorDetailsDialog";
import type { Member, Alumnus } from "../../content/types";

const DEGREE_LABEL: Record<string, string> = {
  Professor: "Professor",
  PhD: "Ph. D.",
  PhDCandidate: "Ph. D. Candidate",
  PhDStudent: "Ph. D. Student",
  MSCandidate: "M. S. Candidate",
  MSStudent: "M. S. Student",
  MS: "M. S.",
};

export default function MembersPage() {
  const [activeMembers, setActiveMembers] = useState<Member[]>([]);
  const [alumni, setAlumni] = useState<Alumnus[]>([]);

  useEffect(() => {
    getMembers().then((m) => {
      if (m) setActiveMembers(m);
    });
    getAlumni().then((a) => {
      if (a) setAlumni(a);
    });
  }, []);

  const phdStudents = activeMembers.filter(
    (m) =>
      m.degree === "PhD" ||
      m.degree === "PhDCandidate" ||
      m.degree === "PhDStudent"
  );
  const msStudents = activeMembers.filter(
    (m) => m.degree === "MSCandidate" || m.degree === "MSStudent"
  );

  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">
          LAB MEMBERS
        </h1>
      </section>

      {/* Professor Section */}
      <section className="space-y-6 pt-6 md:pt-8 border-t border-line">
        <div className="bg-paper p-8 rounded-lg border border-line grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
          <div className="lg:col-span-8 space-y-4">
            <h2 className="font-serif text-3xl font-normal text-ink">
              Prof. Seok-Joo Koh
            </h2>
            <div className="text-sm text-ink-mute leading-relaxed space-y-2">
              <p>
                Professor at the School of Computer Science and Engineering, Kyungpook National University, and Dean of the College of IT Engineering. He directs the AI Agent Networking Laboratory (ANL), leading research on QUIC/gRPC transport, A2A/ACP protocols, MCP &amp; SKILL architectures, and multi-agent orchestration, and serves as Project Editor in ISO/IEC JTC1, ITU-T, and IEC TC100.
              </p>
              <div>
                <ProfessorDetailsDialog />
              </div>
            </div>
            <div className="pt-4 border-t border-line/60 flex flex-wrap gap-4 text-xs font-mono">
              <a
                href="mailto:sjkoh@knu.ac.kr"
                className="text-cobalt-dark hover:underline font-bold"
              >
                sjkoh@knu.ac.kr
              </a>
              <span className="text-ink-mute">|</span>
              <a
                href="https://github.com/sjkoh12"
                target="_blank"
                rel="noopener noreferrer"
                className="text-ink hover:text-cobalt-dark hover:underline"
              >
                GitHub Profile ↗
              </a>
            </div>
          </div>
          <div className="lg:col-span-4 flex justify-center items-center">
            <div className="relative w-48 h-48 sm:w-56 sm:h-56 md:w-60 md:h-60 rounded-xl overflow-hidden border border-line shadow-sm bg-ivory">
              <Image
                src="/images/prof_profile.png"
                alt="Prof. Seok-Joo Koh"
                fill
                sizes="(max-width: 1024px) 224px, 240px"
                className="object-cover object-top"
                priority
              />
            </div>
          </div>
        </div>
      </section>

      {/* Active Researchers Section */}
      <section className="space-y-8 pt-6 md:pt-8 border-t border-line">
        <div className="flex justify-between items-end">
          <div>
            <h2 className="font-serif text-2xl sm:text-3xl font-normal text-cobalt-dark">
              Active Researchers
            </h2>
          </div>
        </div>

        {/* Ph.D. Candidates / Students */}
        <div className="space-y-4">
          <h3 className="font-mono text-xs uppercase tracking-wider text-ink-mute border-b border-line pb-2">
            Ph.D. Course ({phdStudents.length})
          </h3>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {phdStudents.map((mem, idx) => (
              <div
                key={idx}
                className="bg-paper p-5 rounded border border-line space-y-2 hover:border-cobalt transition-colors"
              >
                <div className="flex justify-between items-baseline">
                  <span className="font-serif text-lg font-normal text-ink">
                    {mem.ko}
                  </span>
                  <span className="font-mono text-xs text-cobalt-dark">
                    {DEGREE_LABEL[mem.degree] || mem.degree}
                  </span>
                </div>
                <div className="font-mono text-xs text-ink-mute">{mem.en}</div>
                {mem.affiliation && (
                  <div className="text-xs text-vermillion-dark pt-1 border-t border-line/40">
                    with {mem.affiliation}
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>

        {/* M.S. Candidates / Students */}
        <div className="space-y-4 pt-4">
          <h3 className="font-mono text-xs uppercase tracking-wider text-ink-mute border-b border-line pb-2">
            M.S. Course ({msStudents.length})
          </h3>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {msStudents.map((mem, idx) => (
              <div
                key={idx}
                className="bg-paper p-5 rounded border border-line space-y-2 hover:border-cobalt transition-colors"
              >
                <div className="flex justify-between items-baseline">
                  <span className="font-serif text-lg font-normal text-ink">
                    {mem.ko}
                  </span>
                  <span className="font-mono text-xs text-cobalt-dark">
                    {DEGREE_LABEL[mem.degree] || mem.degree}
                  </span>
                </div>
                <div className="font-mono text-xs text-ink-mute">{mem.en}</div>
                {mem.affiliation && (
                  <div className="text-xs text-vermillion-dark pt-1 border-t border-line/40">
                    with {mem.affiliation}
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Alumni Section (Native <details>/<summary> progressive disclosure) */}
      <section className="space-y-6 pt-6 md:pt-8 border-t border-line">
        <div className="flex justify-between items-end">
          <div>
            <h2 className="font-serif text-2xl sm:text-3xl font-normal text-ink">
              Graduates
            </h2>
          </div>
        </div>

        <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">
                Browse all graduates
              </span>
              <p className="text-xs text-ink-mute font-mono">
                Ph. D. and M. S. graduates conferred from 2007 to 2026
              </p>
            </div>
            <span className="font-mono text-xs text-vermillion-dark font-bold border border-vermillion-dark px-3 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-4">
            {alumni.map((alum, idx) => (
              <div
                key={idx}
                className="bg-ivory p-4 rounded border border-line space-y-1.5"
              >
                <div className="flex justify-between items-baseline">
                  <span className="font-serif text-base font-normal text-ink">
                    {alum.ko} ({alum.en})
                  </span>
                  <span className="font-mono text-xs text-ink-mute">
                    {DEGREE_LABEL[alum.degree] || alum.degree}
                  </span>
                </div>
                <div className="font-mono text-xs text-ink-mute flex justify-between">
                  <span>{alum.graduatedAt}</span>
                  {alum.major && <span>{alum.major}</span>}
                </div>
                {alum.currentPosition && (
                  <div className="text-xs text-cobalt-dark pt-1 border-t border-line/40">
                    {alum.currentPosition}
                  </div>
                )}
              </div>
            ))}
          </div>
        </details>
      </section>
    </div>
  );
}