import React from "react";
import Link from "next/link";
import HeroComposition from "./_components/HeroComposition";
import { ProjectPageView } from "./_components/ProjectPageView";
import { getStatsSummary, getResearchAreaNames, getResearchProjects } from "../lib/api";

export const dynamic = "force-dynamic";

const INTERNATIONAL_SDOS = [
  "IEC TC100: Multimedia Systems and Equipment",
  "ISO/IEC JTC1/SC41: Internet-of-Things (IoT) Applications",
  "ITU-T SG20: IoT Services",
  "ITU-T SG13: Mobility Management",
  "ISO/IEC JTC1/SC6: Reliable Multicasting",
];

export default async function HomePage() {
  const stats = (await getStatsSummary()) ?? {
    intlPubsCount: 0,
    patentCount: 0,
    stdDocsCount: 0,
  };

  const researchAreas = (await getResearchAreaNames()) ?? [];
  const researchProjects = (await getResearchProjects()) ?? [];

  return (
    <div className="container-content space-y-16 md:space-y-24 pt-10 md:pt-16 pb-16 md:pb-24">
      {/* Hero Section */}
      <section className="relative">
        <div className="mb-4">
          <span className="font-mono text-xs tracking-widest uppercase text-cobalt-dark font-bold">
            Kyungpook National University · AI Agent Networking Lab (ANL)
          </span>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:items-center">
          <div className="lg:col-span-7 space-y-6 lg:pt-4">
            <h1 className="font-serif text-4xl sm:text-5xl lg:text-6xl font-normal text-ink leading-tight">
              Multi-Agent <br />
              <span className="italic font-serif text-cobalt-dark">Orchestration</span>
            </h1>
            <p className="text-ink-mute text-base sm:text-lg leading-relaxed max-w-2xl">
              The AI Agent Networking Laboratory (ANL) studies agent networking technologies and standard frameworks that enable AI agents to communicate and collaborate with one another for multi-agent orchestration.
            </p>

            {/* Metrics Row (Derived from real content data) */}
            <div className="pt-6 border-t border-line grid grid-cols-3 gap-4">
              <div>
                <div className="font-serif text-3xl text-cobalt-dark font-normal">
                  {stats.intlPubsCount}
                </div>
                <div className="font-mono text-xs text-ink-mute uppercase tracking-wider mt-1 leading-tight">
                  International Journals &amp; Conference
                </div>
              </div>
              <div>
                <div className="font-serif text-3xl text-cobalt-dark font-normal">
                  {stats.stdDocsCount}
                </div>
                <div className="font-mono text-xs text-ink-mute uppercase tracking-wider mt-1 leading-tight">
                  Standardization Contributions
                </div>
              </div>
              <div>
                <div className="font-serif text-3xl text-cobalt-dark font-normal">
                  {stats.patentCount}
                </div>
                <div className="font-mono text-xs text-ink-mute uppercase tracking-wider mt-1 leading-tight">
                  Patent<br />
                  <span className="text-[0.68rem] tracking-normal font-sans normal-case text-ink-mute">
                    (IoT Architecture &amp; Protocols)
                  </span>
                </div>
              </div>
            </div>
          </div>

          <div className="w-full max-w-[500px] mx-auto my-[30px] lg:my-0 lg:max-w-none lg:mx-0 lg:col-span-5 border border-line bg-paper p-4 rounded-lg">
            <HeroComposition />
          </div>
        </div>
      </section>

      {/* Research Project PageView Component */}
      <ProjectPageView projects={researchProjects} />

      {/* 14 Research Areas Grid */}
      <section className="space-y-8 pt-16 md:pt-20 border-t border-line">
        <div className="flex flex-col sm:flex-row sm:items-end justify-between gap-4 border-b border-line pb-4">
          <div>
            <div className="flex items-center gap-3 mb-1">
              <span className="h-px w-8 bg-cobalt-dark"></span>
              <span className="font-mono text-xs tracking-widest uppercase text-cobalt-dark font-bold">
                Core Domains
              </span>
            </div>
            <h2 className="font-serif text-2xl sm:text-3xl font-normal text-ink">
              Research Areas
            </h2>
          </div>
          <p className="text-xs text-ink-mute font-mono">
            {researchAreas.length} fundamental networking protocols and AI system domains
          </p>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          {researchAreas.map((area, idx) => {
            const no = String(idx + 1).padStart(2, "0");
            const isOdd = (idx + 1) % 2 !== 0;

            return (
              <div
                key={no}
                className="bg-paper p-6 rounded-lg border border-line flex flex-col justify-between hover:border-ink transition-colors duration-200 h-full"
              >
                <div className="space-y-3">
                  <div className="flex justify-between items-center">
                    <span
                      className={`font-mono text-xs font-bold ${
                        isOdd ? "text-vermillion-dark" : "text-cobalt-dark"
                      }`}
                    >
                      {no}
                    </span>
                    <span className="font-mono text-[0.68rem] text-ink-mute uppercase tracking-wider">
                      Topic #{no}
                    </span>
                  </div>
                  <h3 className="font-serif text-base font-normal text-ink leading-snug">
                    {area}
                  </h3>
                </div>
              </div>
            );
          })}
        </div>
      </section>

      {/* International Standardizations Section */}
      <section className="space-y-6 pt-16 md:pt-20 border-t border-line">
        <div className="flex flex-col sm:flex-row sm:items-end justify-between gap-4 border-b border-line pb-4">
          <div>
            <div className="flex items-center gap-3 mb-1">
              <span className="h-px w-8 bg-cobalt-dark"></span>
              <span className="font-mono text-xs tracking-widest uppercase text-cobalt-dark font-bold">
                Global Engagement
              </span>
            </div>
            <h2 className="font-serif text-2xl sm:text-3xl font-normal text-ink">
              International Standardizations
            </h2>
          </div>
        </div>

        <div className="bg-paper p-6 sm:p-8 rounded-lg border border-line space-y-6">
          <p className="text-ink/80 text-sm sm:text-base leading-relaxed max-w-3xl">
            Along with the research activities, we are also in pursuit of the International Standardization, from the market deployment perspective, in the following SDOs (Standard-Defining Organizations):
          </p>

          <ul className="grid grid-cols-1 md:grid-cols-2 gap-3 pt-2">
            {INTERNATIONAL_SDOS.map((sdo, idx) => (
              <li key={idx} className="flex items-start gap-2.5 text-sm text-ink font-sans">
                <span className="inline-block w-1.5 h-1.5 rounded-full bg-cobalt-dark mt-2 shrink-0"></span>
                <span>{sdo}</span>
              </li>
            ))}
          </ul>

          <div className="pt-4 border-t border-line/60">
            <Link
              href="/standardization"
              className="inline-flex items-center gap-2 font-mono text-xs font-semibold uppercase tracking-wider text-cobalt-dark hover:text-ink transition-colors draw-underline"
            >
              <span>Please refer to here for details →</span>
            </Link>
          </div>
        </div>
      </section>
    </div>
  );
}