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";
import Marquee from "@/components/Marquee";

export const metadata: Metadata = {
  title: "논문 (Publications)",
  description: "사물인터넷 표준 연구실의 대표 논문 목록 (placeholder).",
};

// CUSTOMIZATION HOOK: replace placeholder publications below.
const publications = [
  {
    year: "2025",
    type: "Journal",
    title:
      "메타버스 상호운용을 위한 공통 정보 모델 설계 및 oneM2M 매핑 (Design of a Common Information Model for Metaverse Interoperability over oneM2M)",
    authors: "Hong G., Researcher A., et al.",
    venue: "한국통신학회논문지 (J-KICS), Vol. 50, No. 3",
  },
  {
    year: "2025",
    type: "Conference",
    title:
      "QUIC-based Orchestration Architecture for Low-Latency Multi-Agent Communication",
    authors: "Researcher B., Hong G.",
    venue: "IEEE International Conference on Communications (ICC)",
  },
  {
    year: "2024",
    type: "Journal",
    title:
      "W3C WoT Thing Description를 활용한 이종 메타버스 자산의 의미 보존 변환 (Semantic-Preserving Mapping of Cross-Platform Metaverse Assets Using W3C WoT)",
    authors: "Researcher C., Hong G., et al.",
    venue: "정보과학회논문지 (KIISE Transactions), Vol. 51, No. 11",
  },
  {
    year: "2024",
    type: "Conference",
    title:
      "Stream Multiplexing Strategies for Agent Message Routing over QUIC",
    authors: "Researcher D., Researcher B., Hong G.",
    venue: "ACM/IEEE Symposium on Edge Computing (SEC)",
  },
  {
    year: "2023",
    type: "Conference",
    title:
      "oneM2M 기반 IoT 디바이스 상호운용성 적합성 검증 프레임워크 (A Conformance Testing Framework for oneM2M-based IoT Interoperability)",
    authors: "Researcher E., Hong G.",
    venue: "한국정보과학회 학술발표회 (KSC)",
  },
];

// CUSTOMIZATION HOOK: venue ticker.
const venueTicker = [
  "J-KICS",
  "IEEE ICC",
  "KIISE TRANSACTIONS",
  "ACM/IEEE SEC",
  "KSC",
  "oneM2M",
  "W3C WoT",
  "IETF QUIC",
];

// Accent per publication type, drawn from the editorial palette.
const typeAccent: Record<string, { text: string; rule: string }> = {
  Journal: { text: "text-vermillion", rule: "bg-vermillion" },
  Conference: { text: "text-cobalt", rule: "bg-cobalt" },
};

// Derived figures.
const journalCount = publications.filter((p) => p.type === "Journal").length;
const confCount = publications.filter((p) => p.type === "Conference").length;
const figures = [
  { value: publications.length, label: "전체 논문 · Total Publications" },
  { value: journalCount, label: "저널 · Journal" },
  { value: confCount, label: "학회 · Conference" },
];

export default function PublicationsPage() {
  return (
    <>
      <PageHeader
        ko="논문"
        en="Publications"
        index={3}
        description="메타버스 상호운용성(MCM)과 QUIC 기반 멀티에이전트 통신 분야의 대표 논문입니다. 아래 목록은 예시(placeholder)입니다."
      />

      {/* Venue marquee band */}
      <Reveal>
        <Marquee
          items={venueTicker}
          reverse
          className="border-b border-ink bg-ink py-3 font-display text-xl tracking-wide text-ivory"
        />
      </Reveal>

      {/* ============ 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>

      {/* ============ PUBLICATION LIST ============ */}
      <section>
        <div className="container-content py-16 sm:py-24">
          <Reveal>
            <SectionLabel index={1} label="Selected Works" />
          </Reveal>

          <ol className="mt-12 border-t border-ink">
            {publications.map((p, i) => {
              const accent = typeAccent[p.type] ?? {
                text: "text-ink",
                rule: "bg-ink",
              };
              // Reveal `as="li"` keeps the <ol> direct-child contract (HTML spec:
              // <ol> may only contain <li>/<script>/<template>). See REVIEW.md §3 #1.
              return (
                <Reveal
                  as="li"
                  key={p.title}
                  delay={(i % 3) * 80}
                  className="group grid gap-6 border-b border-ink py-8 transition-colors duration-500 hover:bg-paper sm:grid-cols-12 sm:py-10"
                >
                  {/* Index + year rail */}
                  <div className="flex items-baseline gap-4 sm:col-span-3 sm:flex-col sm:gap-3">
                    <span className="font-display text-5xl leading-none text-ink-mute">
                      {String(i + 1).padStart(2, "0")}
                    </span>
                    <span className="font-display text-2xl italic text-ink">
                      {p.year}
                    </span>
                    <span
                      className={`inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.16em] ${accent.text}`}
                    >
                      <span className={`h-1.5 w-1.5 rounded-full ${accent.rule}`} />
                      {p.type}
                    </span>
                  </div>

                  {/* Title + meta */}
                  <div className="sm:col-span-9">
                    <h3 className="headline-ko text-xl leading-snug text-ink sm:text-2xl">
                      {p.title}
                    </h3>
                    <p className="mt-3 text-sm text-ink-soft">{p.authors}</p>
                    <p className="font-display text-sm italic text-ink-mute">
                      {p.venue}
                    </p>
                  </div>
                </Reveal>
              );
            })}
          </ol>
        </div>
      </section>
    </>
  );
}