"use client";

import React, { useEffect, useState } from "react";
import Link from "next/link";
import Reveal from "@/components/Reveal";
import Counter from "@/components/Counter";
import HeroComposition from "./_components/HeroComposition";
import { ProjectPageView } from "./_components/ProjectPageView";
import { getStatsSummary, getResearchAreaNames, getResearchProjects } from "../lib/api";
import type { ResearchProject } from "../content/types";

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 function HomePage() {
  const [stats, setStats] = useState({
    intlPubsCount: 0,
    patentCount: 0,
    stdDocsCount: 0,
  });
  const [researchAreas, setResearchAreas] = useState<string[]>([]);
  const [researchProjects, setResearchProjects] = useState<ResearchProject[]>([]);

  useEffect(() => {
    getStatsSummary().then((s) => {
      if (s) setStats(s);
    });
    getResearchAreaNames().then((areas) => {
      if (areas) setResearchAreas(areas);
    });
    getResearchProjects().then((projs) => {
      if (projs) setResearchProjects(projs);
    });
  }, []);

  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">
        <Reveal variant="up">
          <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>
        </Reveal>

        <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">
            <Reveal variant="up">
              <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 mt-4">
                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>
            </Reveal>

            {/* Metrics Row (Derived from real content data) */}
            <div className="pt-6 border-t border-line grid grid-cols-3 gap-4">
              <Reveal variant="up" delay={80}>
                <div>
                  <div className="font-serif text-3xl text-cobalt-dark font-normal">
                    <Counter value={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>
              </Reveal>
              <Reveal variant="up" delay={160}>
                <div>
                  <div className="font-serif text-3xl text-cobalt-dark font-normal">
                    <Counter value={stats.stdDocsCount} />
                  </div>
                  <div className="font-mono text-xs text-ink-mute uppercase tracking-wider mt-1 leading-tight">
                    Standardization Contributions
                  </div>
                </div>
              </Reveal>
              <Reveal variant="up" delay={240}>
                <div>
                  <div className="font-serif text-3xl text-cobalt-dark font-normal">
                    <Counter value={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>
              </Reveal>
            </div>
          </div>

          <Reveal variant="scale" delay={120} 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 />
          </Reveal>
        </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">
        <Reveal variant="up">
          <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>
        </Reveal>

        <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 (
              <Reveal
                key={no}
                variant="up"
                delay={Math.min(idx, 6) * 60}
                className="h-full"
              >
                <div
                  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>
              </Reveal>
            );
          })}
        </div>
      </section>

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

        <Reveal variant="up">
          <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>
        </Reveal>
      </section>
    </div>
  );
}