import Image from "next/image";
import Link from "next/link";
import type { Metadata } from "next";
import architectureImage from "@/public/images/graph-attention-topology/model-architecture.png";
import simulationImage from "@/public/images/graph-attention-topology/simulation-dynamics.png";
import resultsImage from "@/public/images/graph-attention-topology/f1-results.png";
import attentionImage from "@/public/images/graph-attention-topology/attention-training.png";

const paperLinks = [
  { href: "https://arxiv.org/abs/2408.15449", label: "arXiv" },
  { href: "https://arxiv.org/pdf/2408.15449", label: "PDF" },
  { href: "https://doi.org/10.48550/arXiv.2408.15449", label: "DOI" },
];

const highlights = [
  {
    value: "No known graph",
    label: "Learns topology without prior adjacency examples.",
  },
  {
    value: "Unknown dynamics",
    label: "Uses observed states instead of hand-specified equations.",
  },
  {
    value: "Attention as edges",
    label: "Interprets learned attention scores as the graph estimate.",
  },
];

const steps = [
  "Embed every agent into a shared latent space.",
  "Project embeddings into key/query vectors and compute pairwise attention.",
  "Translate observed agent states into values.",
  "Predict the next state and read the attention matrix as topology.",
];

export const metadata: Metadata = {
  title: "Graph Attention Topology Inference",
  description:
    "Project page for Graph Attention Inference of Network Topology in Multi-Agent Systems.",
  openGraph: {
    title: "Graph Attention Inference of Network Topology in Multi-Agent Systems",
    description:
      "A graph-attention approach for inferring hidden network topology from multi-agent trajectories.",
    type: "article",
    publishedTime: "2024-10-26",
    images: [
      {
        url: "/images/graph-attention-topology/model-architecture.png",
        width: architectureImage.width,
        height: architectureImage.height,
        alt: "Graph attention model architecture",
      },
    ],
  },
};

function ExternalLink({ href, label }: { href: string; label: string }) {
  return (
    <a
      href={href}
      target="_blank"
      rel="noopener noreferrer"
      className="rounded-full border border-graph-line bg-graph-panel px-4 py-2 text-sm font-medium text-graph-ink transition-colors hover:border-graph-accent hover:text-graph-accent"
    >
      {label}
    </a>
  );
}

function Figure({
  src,
  alt,
  caption,
  className = "",
}: {
  src: typeof architectureImage;
  alt: string;
  caption: string;
  className?: string;
}) {
  return (
    <figure className={`overflow-hidden border border-graph-line bg-graph-panel ${className}`}>
      <div className="bg-white">
        <Image
          src={src}
          alt={alt}
          sizes="(max-width: 768px) 100vw, 58rem"
          className="h-auto w-full"
        />
      </div>
      <figcaption className="border-t border-graph-line px-4 py-3 font-mono text-[0.72rem] leading-5 text-graph-muted">
        {caption}
      </figcaption>
    </figure>
  );
}

export default function GraphAttentionProjectPage() {
  return (
    <div className="graph-project min-h-screen bg-graph-paper text-graph-ink">
      <section className="graph-hero px-5 pb-14 pt-24 sm:px-6 sm:pb-20 sm:pt-28">
        <div className="mx-auto grid max-w-[78rem] gap-10 lg:grid-cols-[minmax(0,1fr)_minmax(23rem,32rem)] lg:items-end">
          <div className="space-y-7">
            <div className="flex flex-wrap items-center gap-3 font-mono text-[0.72rem] uppercase text-graph-muted">
              <Link href="/projects" className="transition-colors hover:text-graph-accent">
                Projects
              </Link>
              <span className="h-px w-8 bg-graph-line" />
              <span>MECC 2024</span>
              <span className="h-px w-8 bg-graph-line" />
              <span>Multi-Agent Systems</span>
            </div>

            <div className="space-y-5">
              <h1 className="max-w-[54rem] text-balance font-sans text-[clamp(3.1rem,8vw,7.6rem)] font-semibold leading-[0.86] tracking-normal text-graph-ink">
                Graph Attention Inference of Network Topology
              </h1>
              <p className="max-w-[43rem] text-[1.12rem] leading-8 text-graph-soft sm:text-[1.25rem]">
                Inferring the hidden graph behind a multi-agent system by training attention to predict what each agent does next.
              </p>
            </div>

            <div className="flex flex-wrap gap-2 text-[0.95rem] text-graph-soft">
              <span>Akshay Kolli</span>
              <span>/</span>
              <span>Reza Azadeh</span>
              <span>/</span>
              <span>Kshitij Jerath</span>
            </div>

            <div className="flex flex-wrap gap-3">
              {paperLinks.map((link) => (
                <ExternalLink key={link.href} {...link} />
              ))}
            </div>
          </div>

          <div className="graph-hero-card">
            <div className="graph-card-top">
              <span>attention matrix</span>
              <span>unknown graph</span>
            </div>
            <div className="grid grid-cols-[1fr_auto] gap-4 p-4">
              <div className="graph-matrix" aria-hidden>
                {Array.from({ length: 36 }).map((_, index) => (
                  <span
                    key={index}
                    className={(index % 7 === 0 || [2, 11, 15, 22, 29, 34].includes(index)) ? "is-hot" : ""}
                  />
                ))}
              </div>
              <div className="flex flex-col justify-between py-1 font-mono text-[0.68rem] uppercase text-graph-muted">
                <span>query</span>
                <span>key</span>
                <span>edge</span>
              </div>
            </div>
            <div className="border-t border-graph-line bg-white p-3">
              <Image
                src={architectureImage}
                alt="Graph attention model architecture"
                priority
                sizes="(max-width: 1024px) 92vw, 32rem"
                className="mx-auto h-auto max-h-[30rem] w-auto"
              />
            </div>
          </div>
        </div>
      </section>

      <section className="border-y border-graph-line bg-graph-panel px-5 py-5 sm:px-6">
        <div className="mx-auto grid max-w-[78rem] gap-4 md:grid-cols-3">
          {highlights.map((item) => (
            <div key={item.value} className="space-y-2 border-l border-graph-line pl-4">
              <p className="text-[1.05rem] font-semibold text-graph-ink">{item.value}</p>
              <p className="text-[0.92rem] leading-6 text-graph-muted">{item.label}</p>
            </div>
          ))}
        </div>
      </section>

      <div className="mx-auto max-w-[78rem] px-5 py-14 sm:px-6 sm:py-20">
        <div className="grid gap-12 lg:grid-cols-[14rem_minmax(0,1fr)] lg:gap-16">
          <aside className="hidden lg:block">
            <nav className="sticky top-24 space-y-3 font-mono text-[0.72rem] uppercase text-graph-muted">
              <a href="#overview" className="block transition-colors hover:text-graph-accent">Overview</a>
              <a href="#method" className="block transition-colors hover:text-graph-accent">Method</a>
              <a href="#results" className="block transition-colors hover:text-graph-accent">Results</a>
              <a href="#citation" className="block transition-colors hover:text-graph-accent">Citation</a>
            </nav>
          </aside>

          <div className="space-y-20">
            <section id="overview" className="grid gap-8 lg:grid-cols-[minmax(0,0.9fr)_minmax(18rem,0.7fr)]">
              <div className="space-y-5">
                <p className="graph-kicker">Overview</p>
                <h2 className="max-w-[42rem] text-balance text-4xl font-semibold leading-tight text-graph-ink sm:text-5xl">
                  Predict the next state, then read the graph from what the model attended to.
                </h2>
                <div className="space-y-5 text-[1.02rem] leading-8 text-graph-soft">
                  <p>
                    The paper studies a practical problem in networked multi-agent systems: the agents move, synchronize, or converge, but the interaction graph behind that behavior is not given.
                  </p>
                  <p>
                    The model is trained on state trajectories from consensus dynamics and Kuramoto oscillators. During prediction, attention scores between agent embeddings become an interpretable approximation of the adjacency matrix.
                  </p>
                </div>
              </div>

              <Figure
                src={simulationImage}
                alt="Consensus and Kuramoto simulation examples with adjacency matrices"
                caption="Simulation examples: consensus dynamics and Kuramoto oscillators paired with their hidden adjacency matrices."
                className="rounded-md"
              />
            </section>

            <section id="method" className="space-y-8">
              <div className="grid gap-8 lg:grid-cols-[minmax(0,0.8fr)_minmax(0,1fr)] lg:items-start">
                <div className="space-y-5">
                  <p className="graph-kicker">Method</p>
                  <h2 className="text-balance text-4xl font-semibold leading-tight text-graph-ink sm:text-5xl">
                    A topology estimate falls out of the attention layer.
                  </h2>
                  <p className="text-[1.02rem] leading-8 text-graph-soft">
                    Instead of supervising the graph directly, the model learns to forecast the system. The attention matrix is then thresholded and compared with the true graph.
                  </p>
                </div>

                <ol className="grid gap-3">
                  {steps.map((step, index) => (
                    <li key={step} className="flex gap-4 border-t border-graph-line py-4">
                      <span className="font-mono text-sm text-graph-accent">
                        {(index + 1).toString().padStart(2, "0")}
                      </span>
                      <span className="text-[1rem] leading-7 text-graph-soft">{step}</span>
                    </li>
                  ))}
                </ol>
              </div>

              <Figure
                src={architectureImage}
                alt="Architecture diagram showing agent embeddings, key-query attention, values, predictions, and loss"
                caption="Architecture: embeddings produce key/query vectors; observed states produce values; the attention matrix approximates adjacency."
                className="rounded-md"
              />
            </section>

            <section id="results" className="space-y-8">
              <div className="max-w-[46rem] space-y-5">
                <p className="graph-kicker">Results</p>
                <h2 className="text-balance text-4xl font-semibold leading-tight text-graph-ink sm:text-5xl">
                  Strongest graph recovery appears with smaller systems, and more simulations help larger systems.
                </h2>
                <p className="text-[1.02rem] leading-8 text-graph-soft">
                  F1 link-prediction scores are above a random baseline for both tested dynamics. Consensus dynamics are easier than Kuramoto oscillators, while additional simulation data improves larger-agent inference.
                </p>
              </div>

              <Figure
                src={resultsImage}
                alt="F1 score results for consensus dynamics and Kuramoto oscillators"
                caption="F1 results across system size and number of simulations for consensus dynamics and Kuramoto oscillators."
                className="rounded-md"
              />

              <div className="grid gap-6 md:grid-cols-[minmax(0,0.78fr)_minmax(0,1fr)] md:items-start">
                <div className="rounded-md border border-graph-line bg-graph-panel p-5">
                  <p className="font-mono text-[0.72rem] uppercase text-graph-muted">training behavior</p>
                  <p className="mt-3 text-[1.02rem] leading-8 text-graph-soft">
                    Attention first learns the obvious self-dependencies, then gradually recovers inter-agent structure as training progresses.
                  </p>
                </div>
                <Figure
                  src={attentionImage}
                  alt="Attention matrices over training epochs and predicted graphs"
                  caption="Attention values through training stages, from true graph to predicted graph."
                  className="rounded-md"
                />
              </div>
            </section>

            <section id="citation" className="space-y-5 border-t border-graph-line pt-10">
              <p className="graph-kicker">Citation</p>
              <h2 className="text-3xl font-semibold leading-tight text-graph-ink">Paper</h2>
              <p className="max-w-[46rem] text-[1.02rem] leading-8 text-graph-soft">
                Graph Attention Inference of Network Topology in Multi-Agent Systems. Akshay Kolli, Reza Azadeh, and Kshitij Jerath. Accepted at the Modeling and Estimation Control Conference, 2024.
              </p>
              <pre className="overflow-x-auto rounded-md border border-graph-line bg-graph-code p-5 text-sm leading-7 text-graph-code-text">
{`@misc{kolli2024graphattentioninference,
  title={Graph Attention Inference of Network Topology in Multi-Agent Systems},
  author={Kolli, Akshay and Azadeh, Reza and Jerath, Kshitij},
  year={2024},
  eprint={2408.15449},
  archivePrefix={arXiv},
  primaryClass={cs.MA}
}`}
              </pre>
            </section>
          </div>
        </div>
      </div>
    </div>
  );
}