"use client";

import React, { useEffect, useState } from "react";
import Image from "next/image";
import Reveal from "@/components/Reveal";
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>
        <Reveal variant="up">
          <h1 className="font-serif text-4xl sm:text-5xl font-normal text-ink tracking-tight">
            LAB MEMBERS
          </h1>
        </Reveal>
      </section>

      {/* Professor Section */}
      <section className="space-y-6 pt-6 md:pt-8 border-t border-line">
        <Reveal variant="up">
          <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>
                  He received B.S. and M.S. degrees in Management Science from KAIST, Korea in 1992 and 1994, respectively. He also received Ph.D. degree in Industrial Engineering from KAIST, Korea in 1998. From August 1998 to February 2004, he worked for Protocol Engineering Center in ETRI. Since March 2004, he has been with the school of Computer Science and Engineering in the Kyungpook National University as a professor. 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 IEC TC100, ISO/IEC JTC1 and ITU-T.
                </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>
              </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 bg-transparent">
                <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>
        </Reveal>
      </section>

      {/* Active Researchers Section */}
      <section className="space-y-8 pt-6 md:pt-8 border-t border-line">
        <Reveal variant="up">
          <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>
        </Reveal>

        {/* Ph.D. Candidates / Students */}
        <div className="space-y-4">
          <Reveal variant="up">
            <h3 className="font-mono text-xs uppercase tracking-wider text-ink-mute border-b border-line pb-2">
              Ph.D. Course ({phdStudents.length})
            </h3>
          </Reveal>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {phdStudents.map((mem, idx) => (
              <Reveal
                key={idx}
                variant="up"
                delay={Math.min(idx, 6) * 60}
                className="h-full"
              >
                <div
                  className="bg-paper p-5 rounded border border-line space-y-2 hover:border-cobalt transition-colors h-full"
                >
                  <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>
              </Reveal>
            ))}
          </div>
        </div>

        {/* M.S. Candidates / Students */}
        <div className="space-y-4 pt-4">
          <Reveal variant="up">
            <h3 className="font-mono text-xs uppercase tracking-wider text-ink-mute border-b border-line pb-2">
              M.S. Course ({msStudents.length})
            </h3>
          </Reveal>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {msStudents.map((mem, idx) => (
              <Reveal
                key={idx}
                variant="up"
                delay={Math.min(idx, 6) * 60}
                className="h-full"
              >
                <div
                  className="bg-paper p-5 rounded border border-line space-y-2 hover:border-cobalt transition-colors h-full"
                >
                  <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>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Alumni Section (Native <details>/<summary> progressive disclosure) */}
      <section className="space-y-6 pt-6 md:pt-8 border-t border-line">
        <Reveal variant="up">
          <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>
        </Reveal>

        <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>
  );
}