import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { MobileMenu } from "../MobileMenu";
import { SiteFooter } from "../SiteFooter";
import { GithubIcon, GITHUB_URL, NAV_LINKS, XIcon, X_URL } from "../_brand";

export const metadata: Metadata = {
  title: "Roadmap — Covenant",
  description:
    "Development milestones for Covenant: the next release with live agent visibility, plugin tools, and marketplace foundation; native integration; distributed operation; and the 1.0 stability commitment.",
  alternates: { canonical: "/roadmap" },
  openGraph: {
    type: "website",
    url: "https://opencovenant.org/roadmap",
    title: "Roadmap — Covenant",
    description:
      "Development milestones for Covenant across the local control plane, distributed agent networks, and 1.0 stability commitment.",
  },
};

type Milestone = {
  code: string;
  title: string;
  status: string;
  live?: boolean;
  intro: string;
  bullets: string[];
};

const MILESTONES: Milestone[] = [
  {
    code: "M0",
    title: "Foundation",
    status: "Available",
    intro:
      "Local control plane for engineers and researchers building governed autonomous software systems.",
    bullets: [
      "Daemon, CLI, TUI, local HTTP gateway, identity, permissions, durable memory, append-only activity log, agent-to-agent messaging, model-context-protocol bridge, budget ledger, and local resource receipts",
      "Subprocess runtime with budget enforcement (projection-tick preempt and wall-clock backstop) and an opt-in Linux isolation path",
      "Signed permission lifecycle with grant, scope check, expiry, and revocation",
      "Verifiable workflow records and commit-scoped provenance for every privileged action",
      "Public sandbox at sandbox.opencovenant.org",
      "Apache 2.0 core",
    ],
  },
  {
    code: "M1",
    title: "Production, Tools, and Marketplace Foundation",
    status: "Next",
    intro:
      "The next release. Live agent visibility, the tools agents actually need, and the marketplace foundation — landing as a single push.",
    bullets: [
      "Live progress streaming — watch an agent work in real time across the CLI, console, and HTTP gateway",
      "Unified model provider — plug in Anthropic, OpenAI, DeepSeek, or local Ollama once; Covenant handles fallback, response caching, and cost tracking",
      "Plugin catalog — install vetted tools from a one-click catalog inside the console, starting with filesystem access",
      "Production-grade isolated runtime for untrusted agent code on Linux",
      "Mid-task save and resume when an agent reaches its resource budget",
      "Signed installers: Homebrew, Debian, RPM, and notarized macOS packages",
      "Stable wire formats for SDK and integration compatibility",
      "Browser tool — agents that navigate, click, and read pages",
      "Isolated code execution — agents that write, run, and iterate on real code in a contained environment",
      "Git host integration — read repositories, comment on issues, propose pull requests",
      "Replay and state debugger — pick any moment from the activity log, see full state, re-run from there",
      "On-chain agent registry with slashable identity stakes and a reputation primitive",
      "SDKs published to PyPI, npm, and crates.io",
      "Editor integration for Visual Studio Code",
      "Adapters for existing agent frameworks: LangGraph and CrewAI",
    ],
  },
  {
    code: "M2",
    title: "Native Integration",
    status: "Upcoming",
    intro:
      "Deeper integration with the host operating system and end-user surfaces.",
    bullets: [
      "Compositor v1 with native Wayland integration",
      "Orchestrator agent",
      "Memory compaction across the working, episodic, and long-term tiers",
      "First-run onboarding experience",
      "Read-only mobile companion application",
    ],
  },
  {
    code: "M3",
    title: "Distributed",
    status: "Upcoming",
    intro:
      "Multi-host operation, federated identity, and cross-organization workflows.",
    bullets: [
      "Multi-host operation with name@host.tld resolution — agent teams across machines",
      "Public agent registry with one-line install and signed manifests",
      "Microvm-grade isolation",
      "Multi-device memory synchronization for a single identity",
      "Agent migration across hosts",
      "Trust flows for cross-organization marketplace transactions",
    ],
  },
  {
    code: "M4",
    title: "1.0 Release",
    status: "Upcoming",
    intro: "Long-term API stability and the formal 1.0 commitment.",
    bullets: [
      "Stable v1 wire formats for IPC, permissions, and agent manifests",
      "Long-term support release line",
      "Bug bounty program",
      "Comprehensive documentation across all primitives and public APIs",
      "Conformance suite for third-party covenant-compatible runtimes",
    ],
  },
];

export default function RoadmapPage() {
  return (
    <main className="relative min-h-screen overflow-x-hidden bg-[#030303]">
      <header
        className="pointer-events-none absolute inset-x-0 top-0 z-20 flex justify-center pt-[max(35px,env(safe-area-inset-top))] sm:pt-[max(59px,env(safe-area-inset-top))]"
      >
        <Link href="/" className="pointer-events-auto" aria-label="Covenant home">
          <Image
            src="/logo.svg"
            alt="covenant"
            width={255}
            height={54}
            priority
            className="h-[42px] w-auto opacity-95 sm:h-[60px]"
          />
        </Link>
      </header>

      <div
        className="absolute left-2 z-20 sm:left-8 sm:top-10"
        style={{ top: "max(0.5rem, env(safe-area-inset-top))" }}
      >
        <div className="sm:hidden">
          <MobileMenu items={NAV_LINKS} />
        </div>
        <nav className="hidden items-center gap-3 sm:flex">
          {NAV_LINKS.map((item) =>
            item.external ? (
              <a
                key={item.href}
                href={item.href}
                target="_blank"
                rel="noopener noreferrer"
                className="px-3 py-3 text-[12px] uppercase tracking-[0.2em] text-neutral-400 transition-colors hover:text-neutral-50"
              >
                {item.label}
              </a>
            ) : (
              <Link
                key={item.href}
                href={item.href}
                className="px-3 py-3 text-[12px] uppercase tracking-[0.2em] text-neutral-400 transition-colors hover:text-neutral-50"
              >
                {item.label}
              </Link>
            ),
          )}
        </nav>
      </div>

      <nav
        className="absolute right-2 z-20 flex items-center gap-1 sm:right-8 sm:top-10 sm:gap-3"
        style={{ top: "max(0.5rem, env(safe-area-inset-top))" }}
      >
        <a
          href={X_URL}
          target="_blank"
          rel="noopener noreferrer"
          aria-label="Covenant on X"
          className="p-3 text-neutral-400 transition-colors hover:text-neutral-50"
        >
          <XIcon className="h-5 w-5" />
        </a>
        <a
          href={GITHUB_URL}
          target="_blank"
          rel="noopener noreferrer"
          aria-label="Covenant on GitHub"
          className="p-3 text-neutral-400 transition-colors hover:text-neutral-50"
        >
          <GithubIcon className="h-5 w-5" />
        </a>
      </nav>

      <div className="mx-auto max-w-2xl px-6 pb-32 pt-[180px] sm:max-w-3xl sm:px-8 sm:pt-[220px]">
        <h1 className="mb-16 text-[11px] uppercase tracking-[0.4em] text-neutral-400 sm:mb-24">
          Roadmap
        </h1>

        <ol className="relative">
          {MILESTONES.map((m, i) => {
            const isLast = i === MILESTONES.length - 1;
            return (
              <li
                key={m.code}
                className={`relative border-l border-neutral-800/80 pl-8 sm:pl-12 ${isLast ? "" : "pb-14 sm:pb-16"}`}
              >
                <span
                  aria-hidden="true"
                  className={
                    m.live
                      ? "absolute -left-[5px] top-[7px] h-[9px] w-[9px] rounded-full bg-neutral-100"
                      : "absolute -left-[5px] top-[7px] h-[9px] w-[9px] rounded-full border border-neutral-700 bg-[#030303]"
                  }
                />
                <div className="mb-3 flex flex-wrap items-baseline gap-x-4 gap-y-1">
                  <span className="font-mono text-[11px] uppercase tracking-[0.3em] text-neutral-500">
                    {m.code}
                  </span>
                  <h2 className="text-[13px] uppercase tracking-[0.25em] text-neutral-100 sm:text-[14px]">
                    {m.title}
                  </h2>
                  <span
                    className={
                      m.live
                        ? "ml-auto text-[10px] uppercase tracking-[0.25em] text-neutral-200"
                        : "ml-auto text-[10px] uppercase tracking-[0.25em] text-neutral-600"
                    }
                  >
                    {m.status}
                  </span>
                </div>
                <p className="mb-4 text-[13px] leading-relaxed text-neutral-400 sm:text-[14px]">
                  {m.intro}
                </p>
                <ul className="space-y-2">
                  {m.bullets.map((b) => (
                    <li
                      key={b}
                      className="flex gap-3 text-[13px] leading-relaxed text-neutral-300 sm:text-[14px]"
                    >
                      <span aria-hidden="true" className="select-none text-neutral-600">
                        ·
                      </span>
                      <span>{b}</span>
                    </li>
                  ))}
                </ul>
              </li>
            );
          })}
        </ol>
      </div>

      <SiteFooter className="pb-8" />
    </main>
  );
}
