import type { Metadata } from "next";
import PageHeader from "@/components/PageHeader";
import Reveal from "@/components/Reveal";
import SectionLabel from "@/components/SectionLabel";
import Counter from "@/components/Counter";

export const metadata: Metadata = {
  title: "구성원 (Members)",
  description: "사물인터넷 표준 연구실 지도교수 및 대학원·학부 연구원 소개 (placeholder).",
};

// CUSTOMIZATION HOOK: replace placeholder member data below.
const advisor = {
  ko: "홍길동 교수",
  en: "Prof. Gildong Hong",
  role: "지도교수 · Principal Investigator",
  desc: "사물인터넷 표준, 메타버스 상호운용성, 전송 프로토콜. (이메일 placeholder: pi@example.knu.ac.kr)",
  fields: ["IoT Standardization", "Metaverse Interoperability", "QUIC Transport"],
};

const groups = [
  {
    ko: "박사과정 연구원",
    en: "Ph.D. Students",
    accent: "vermillion" as const,
    members: [
      { name: "연구원 A (placeholder)", topic: "QUIC 기반 멀티에이전트 오케스트레이션" },
      { name: "연구원 B (placeholder)", topic: "메타버스 공통 정보 모델 (MCM)" },
    ],
  },
  {
    ko: "석사과정 연구원",
    en: "M.S. Students",
    accent: "cobalt" as const,
    members: [
      { name: "연구원 C (placeholder)", topic: "oneM2M 적합성 검증" },
      { name: "연구원 D (placeholder)", topic: "QUIC 스트림 다중화 성능 분석" },
      { name: "연구원 E (placeholder)", topic: "W3C WoT Thing Description 매핑" },
    ],
  },
  {
    ko: "학부 연구원",
    en: "Undergraduate Researchers",
    accent: "ink" as const,
    members: [
      { name: "연구원 F (placeholder)", topic: "테스트베드 개발" },
      { name: "연구원 G (placeholder)", topic: "데이터 시각화" },
    ],
  },
];

// CUSTOMIZATION HOOK: headcount figures (animated counters).
const figures = [
  { value: 1, label: "지도교수 · Principal Investigator" },
  { value: 5, label: "대학원 연구원 · Graduate Members" },
  { value: 2, label: "학부 연구원 · Undergraduates" },
];

const accentText: Record<string, string> = {
  vermillion: "text-vermillion",
  cobalt: "text-cobalt",
  ink: "text-ink",
};

export default function MembersPage() {
  return (
    <>
      <PageHeader
        ko="구성원"
        en="Members"
        index={2}
        description="연구실 지도교수와 박사·석사·학부 연구원을 소개합니다. 아래 정보는 예시(placeholder)이며 실제 구성원 정보로 교체할 수 있습니다."
      />

      {/* ============ HEADCOUNT FIGURES ============ */}
      <section className="border-b border-ink">
        <div className="container-content grid gap-px bg-line sm:grid-cols-3">
          {figures.map((f, i) => (
            <Reveal key={f.label} delay={i * 100} className="bg-ivory">
              <div className="px-6 py-10">
                <Counter value={f.value} className="display block text-ink" />
                <p className="kicker mt-3">{f.label}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* ============ PRINCIPAL INVESTIGATOR ============ */}
      <section className="border-b border-ink">
        <div className="container-content py-16 sm:py-24">
          <Reveal>
            <SectionLabel index={1} label="Principal Investigator" />
          </Reveal>

          <div className="mt-10 grid gap-px lg:grid-cols-12">
            <Reveal variant="left" className="lg:col-span-7">
              <article className="group h-full border border-ink p-8 transition-colors duration-500 hover:bg-ink hover:text-ivory sm:p-10">
                <span className="kicker group-hover:text-ivory/70">{advisor.role}</span>
                <h2 className="headline-ko mt-5 text-4xl leading-tight">{advisor.ko}</h2>
                <p className="font-display mt-1 text-2xl italic text-vermillion">
                  {advisor.en}
                </p>
                <p className="mt-6 max-w-prose text-sm leading-relaxed opacity-90">
                  {advisor.desc}
                </p>
              </article>
            </Reveal>

            <Reveal variant="right" delay={120} className="lg:col-span-5">
              <div className="flex h-full flex-col gap-px bg-line">
                {advisor.fields.map((field, i) => (
                  <div
                    key={field}
                    className="group flex items-center gap-5 bg-ivory px-7 py-6 transition-colors duration-500 hover:bg-paper"
                  >
                    <span className="font-display text-3xl text-ink-mute group-hover:text-vermillion">
                      {String(i + 1).padStart(2, "0")}
                    </span>
                    <span className="text-sm uppercase tracking-[0.16em] text-ink-soft">
                      {field}
                    </span>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* ============ RESEARCH GROUPS ============ */}
      <section>
        <div className="container-content py-16 sm:py-24">
          <Reveal>
            <SectionLabel index={2} label="Researchers" />
          </Reveal>

          {groups.map((g, gi) => (
            <div key={g.en} className="mt-14 first:mt-12">
              <Reveal>
                <div className="flex items-baseline justify-between border-b border-ink pb-4">
                  <h3 className="headline-ko text-2xl text-ink sm:text-3xl">{g.ko}</h3>
                  <span
                    className={`font-display text-lg italic ${accentText[g.accent]}`}
                  >
                    {g.en}
                  </span>
                </div>
              </Reveal>

              <div className="mt-px grid gap-px bg-line sm:grid-cols-2">
                {g.members.map((m, mi) => (
                  <Reveal key={m.name} delay={mi * 80} className="bg-ivory">
                    <article className="group flex h-full flex-col justify-between gap-8 p-7 transition-colors duration-500 hover:bg-ink hover:text-ivory">
                      <span className="font-display text-2xl text-ink-mute group-hover:text-vermillion">
                        {String(gi + 1).padStart(2, "0")}.{String(mi + 1).padStart(2, "0")}
                      </span>
                      <div>
                        <h4 className="headline-ko text-lg">{m.name}</h4>
                        <p className="mt-2 text-xs leading-relaxed text-ink-mute group-hover:text-ivory/60">
                          {m.topic}
                        </p>
                      </div>
                    </article>
                  </Reveal>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>
    </>
  );
}