import React from "react";
import { activeMembers, alumni } from "../../content/members";

export default function MembersPage() {
  const professor = activeMembers.find((m) => m.degree === "Professor");
  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 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">
            People &amp; Researchers
          </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">
          지도교수와 재학 연구원 16명, 그리고 IT 산업체 및 학계에서 활약하고 있는 60명의 졸업생 인벤토리입니다.
        </p>
      </section>

      {/* Professor Section */}
      <section className="space-y-6 pt-6 md:pt-10 border-t border-line">
        <div className="font-mono text-xs text-cobalt-dark dark:text-cobalt uppercase tracking-widest font-bold">
          Faculty
        </div>

        <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">
            <div className="flex items-baseline gap-3">
              <h2 className="font-serif text-3xl font-normal text-ink">
                {professor?.ko || "고석주"} 교수
              </h2>
              <span className="font-mono text-sm text-ink-mute">
                {professor?.en || "Seok-Joo Koh"}, Professor
              </span>
            </div>
            <p className="text-sm text-ink-mute leading-relaxed">
              경북대학교 컴퓨터학부 교수 · AI 에이전트 네트워크 연구실 (ANL) 지도교수. 
              QUIC/gRPC 통신, A2A/ACP 프로토콜, MCP &amp; SKILL 아키텍처 및 에이전트 오케스트레이션 연구를 총괄하고 있습니다.
            </p>
            <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 dark:text-cobalt hover:underline"
              >
                sjkoh@knu.ac.kr
              </a>
              <span className="text-ink-mute">•</span>
              <a
                href="https://github.com/sjkoh12"
                target="_blank"
                rel="noreferrer"
                className="text-cobalt-dark dark:text-cobalt hover:underline"
              >
                GitHub @sjkoh12 ↗
              </a>
            </div>
          </div>
          <div className="lg:col-span-4 bg-ivory p-6 rounded border border-line text-xs space-y-2 font-mono">
            <div className="text-ink font-bold border-b border-line pb-1">
              Affiliation & Office
            </div>
            <p className="text-ink-mute">Kyungpook National University</p>
            <p className="text-ink-mute">IT Building #5 Room 527</p>
            <p className="text-ink-mute">Daegu, Republic of Korea</p>
          </div>
        </div>
      </section>

      {/* Active Researchers Section */}
      <section className="space-y-8 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">
              Active Researchers ({activeMembers.length} Members)
            </div>
            <h2 className="font-serif text-3xl font-normal text-ink mt-1">
              재학 연구원
            </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 dark:text-cobalt">
                    {mem.degree}
                  </span>
                </div>
                <div className="font-mono text-xs text-ink-mute">{mem.en}</div>
                {mem.affiliation && (
                  <div className="text-xs text-vermillion 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 dark:text-cobalt">
                    {mem.degree}
                  </span>
                </div>
                <div className="font-mono text-xs text-ink-mute">{mem.en}</div>
                {mem.affiliation && (
                  <div className="text-xs text-vermillion 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-10 border-t border-line">
        <div className="flex justify-between items-end">
          <div>
            <div className="font-mono text-xs text-ink-mute uppercase tracking-widest font-bold">
              Alumni Inventory ({alumni.length} Graduates)
            </div>
            <h2 className="font-serif text-3xl font-normal text-ink mt-1">
              졸업생 목록
            </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">
                전체 졸업생 {alumni.length}명 열람하기
              </span>
              <p className="text-xs text-ink-mute font-mono">
                2007년부터 2026년까지 수여된 박사(Ph.D.) 및 석사(M.S.) 졸업생 이력
              </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-white dark: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-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">
                    {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 dark:text-cobalt pt-1 border-t border-line/40">
                    {alum.currentPosition}
                  </div>
                )}
              </div>
            ))}
          </div>
        </details>
      </section>
    </div>
  );
}