import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Documentation",
  description:
    "AgentLens documentation — instrument, trace, and observe your AI agents with full decision visibility.",
};

const sections = [
  {
    heading: "Getting Started",
    items: [
      {
        title: "Quick Start",
        href: "/docs/getting-started",
        description:
          "Install the SDK, initialize AgentLens, and send your first trace in under five minutes.",
      },
      {
        title: "Core Concepts",
        href: "/docs/concepts",
        description:
          "Understand Traces, Spans, Decision Points, and Events — the four building blocks of AgentLens.",
      },
    ],
  },
  {
    heading: "SDKs",
    items: [
      {
        title: "Python SDK",
        href: "/docs/python-sdk",
        description:
          "Full reference for the Python SDK: init(), @trace decorator, log_decision(), TraceContext, and configuration.",
      },
      {
        title: "TypeScript SDK",
        href: "/docs/typescript-sdk",
        description:
          "Full reference for the TypeScript SDK: init(), TraceBuilder API, createDecision(), and shutdown().",
      },
    ],
  },
  {
    heading: "Integrations",
    items: [
      {
        title: "OpenAI",
        href: "/docs/integrations/openai",
        description:
          "Auto-trace all OpenAI API calls with a single wrapper. Captures model, tokens, cost, and latency.",
      },
      {
        title: "Anthropic",
        href: "/docs/integrations/anthropic",
        description:
          "Wrap the Anthropic client to automatically trace Claude API calls with full metadata capture.",
      },
      {
        title: "LangChain",
        href: "/docs/integrations/langchain",
        description:
          "Use the AgentLensCallbackHandler to trace LangChain chains, agents, and tool invocations.",
      },
    ],
  },
  {
    heading: "Tools & Deployment",
    items: [
      {
        title: "OpenCode Plugin",
        href: "/docs/opencode-plugin",
        description:
          "Capture OpenCode sessions including tool calls, LLM calls, file edits, and git diffs automatically.",
      },
      {
        title: "REST API Reference",
        href: "/docs/api-reference",
        description:
          "Complete contract for POST /api/traces and GET /api/traces including payload shapes and error codes.",
      },
      {
        title: "Self-Hosting",
        href: "/docs/self-hosting",
        description:
          "Deploy AgentLens with Docker or from source. Configure database, API keys, and environment variables.",
      },
    ],
  },
];

export default function DocsPage() {
  return (
    <div>
      <h1 className="text-4xl font-bold tracking-tight mb-4">
        AgentLens Documentation
      </h1>
      <p className="text-lg text-neutral-400 mb-12 leading-relaxed max-w-2xl">
        AgentLens is an open-source agent observability platform that traces
        decisions, not just API calls. These docs cover everything from initial
        setup to advanced self-hosting.
      </p>

      <div className="space-y-12">
        {sections.map((section) => (
          <div key={section.heading}>
            <h2 className="text-xs font-semibold uppercase tracking-wider text-neutral-500 mb-4">
              {section.heading}
            </h2>
            <div className="grid sm:grid-cols-2 gap-4">
              {section.items.map((item) => (
                <a
                  key={item.href}
                  href={item.href}
                  className="group block p-5 rounded-xl border border-neutral-800/50 bg-neutral-900/30 hover:border-emerald-500/30 hover:bg-neutral-900/60 transition-all duration-200"
                >
                  <h3 className="text-base font-semibold text-neutral-100 group-hover:text-emerald-400 transition-colors mb-1.5">
                    {item.title}
                  </h3>
                  <p className="text-sm text-neutral-500 leading-relaxed">
                    {item.description}
                  </p>
                </a>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
