import type { Metadata } from "next";
import { CodeBlock } from "@/components/code-block";

export const metadata: Metadata = {
  title: "Getting Started",
  description:
    "Install AgentLens, initialize the SDK, and send your first trace in under five minutes.",
};

export default function GettingStartedPage() {
  return (
    <div>
      <h1 className="text-4xl font-bold tracking-tight mb-4">
        Getting Started
      </h1>
      <p className="text-lg text-neutral-400 mb-10 leading-relaxed">
        Go from zero to full agent observability in under five minutes. This
        guide walks you through installing the SDK, initializing it, and sending
        your first trace.
      </p>

      <section className="mb-12">
        <h2 className="text-2xl font-semibold mb-4">Prerequisites</h2>
        <ul className="list-disc list-inside text-neutral-400 space-y-2 ml-1">
          <li>Python 3.9+ or Node.js 18+</li>
          <li>
            An AgentLens instance (use{" "}
            <a
              href="https://agentlens.vectry.tech"
              className="text-emerald-400 hover:underline"
            >
              agentlens.vectry.tech
            </a>{" "}
            or{" "}
            <a
              href="/docs/self-hosting"
              className="text-emerald-400 hover:underline"
            >
              self-host
            </a>
            )
          </li>
          <li>
            An AgentLens account —{" "}
            <a
              href="/register"
              className="text-emerald-400 hover:underline"
            >
              sign up here
            </a>{" "}
            if you haven{"'"}t already
          </li>
          <li>
            An API key (create one in{" "}
            <a
              href="/dashboard/keys"
              className="text-emerald-400 hover:underline"
            >
              Dashboard &rarr; API Keys
            </a>
            )
          </li>
        </ul>
      </section>

      <section className="mb-12">
        <h2 className="text-2xl font-semibold mb-4">
          Step 1: Install the SDK
        </h2>

        <h3 className="text-lg font-medium text-neutral-200 mb-2">Python</h3>
        <CodeBlock title="terminal" language="bash">pip install vectry-agentlens</CodeBlock>

        <h3 className="text-lg font-medium text-neutral-200 mb-2 mt-6">
          TypeScript / Node.js
        </h3>
        <CodeBlock title="terminal" language="bash">npm install agentlens-sdk</CodeBlock>
      </section>

      <section className="mb-12">
        <h2 className="text-2xl font-semibold mb-4">
          Step 2: Initialize AgentLens
        </h2>
        <p className="text-neutral-400 leading-relaxed mb-4">
          Sign up at{" "}
          <a
            href="https://agentlens.vectry.tech/register"
            className="text-emerald-400 hover:underline"
          >
            agentlens.vectry.tech
          </a>
          , then go to{" "}
          <a
            href="/dashboard/keys"
            className="text-emerald-400 hover:underline"
          >
            Dashboard &rarr; API Keys
          </a>{" "}
          to create your key. Pass it to the SDK during initialization:
        </p>

        <h3 className="text-lg font-medium text-neutral-200 mb-2">Python</h3>
        <CodeBlock title="main.py" language="python">{`import agentlens

agentlens.init(
    api_key="your-api-key",
    endpoint="https://agentlens.vectry.tech"
)`}</CodeBlock>

        <h3 className="text-lg font-medium text-neutral-200 mb-2 mt-6">
          TypeScript
        </h3>
        <CodeBlock title="index.ts" language="typescript">{`import { init } from "agentlens-sdk";

init({
  apiKey: "your-api-key",
  endpoint: "https://agentlens.vectry.tech",
});`}</CodeBlock>
      </section>

      <section className="mb-12">
        <h2 className="text-2xl font-semibold mb-4">
          Step 3: Trace your first agent
        </h2>

        <h3 className="text-lg font-medium text-neutral-200 mb-2">Python</h3>
        <CodeBlock title="agent.py" language="python">{`import agentlens
from agentlens import trace

agentlens.init(
    api_key="your-api-key",
    endpoint="https://agentlens.vectry.tech"
)

@trace(name="my-first-agent")
def my_agent(prompt: str) -> str:
    # Your agent logic here
    response = call_llm(prompt)
    return response

# Run it — the trace is sent automatically
result = my_agent("What is the capital of France?")`}</CodeBlock>

        <h3 className="text-lg font-medium text-neutral-200 mb-2 mt-6">
          TypeScript
        </h3>
        <CodeBlock title="agent.ts" language="typescript">{`import { init, TraceBuilder } from "agentlens-sdk";

init({
  apiKey: "your-api-key",
  endpoint: "https://agentlens.vectry.tech",
});

const trace = new TraceBuilder("my-first-agent");

trace.addSpan({
  name: "llm-call",
  type: "LLM_CALL",
  input: { prompt: "What is the capital of France?" },
  output: { response: "Paris" },
  status: "COMPLETED",
});

await trace.end();`}</CodeBlock>
      </section>

      <section className="mb-12">
        <h2 className="text-2xl font-semibold mb-4">
          Step 4: View in the dashboard
        </h2>
        <p className="text-neutral-400 leading-relaxed mb-4">
          Open your AgentLens dashboard to see the trace you just sent. You will
          see the trace name, its status, timing information, and any spans or
          decision points you recorded.
        </p>
        <a
          href="/dashboard"
          className="inline-flex items-center gap-2 px-5 py-2.5 bg-emerald-500 hover:bg-emerald-400 text-neutral-950 font-semibold rounded-lg transition-colors text-sm"
        >
          Open Dashboard
          <svg
            className="w-4 h-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            strokeWidth={2}
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M13 7l5 5m0 0l-5 5m5-5H6"
            />
          </svg>
        </a>
      </section>

      <section className="mb-12">
        <h2 className="text-2xl font-semibold mb-4">Next steps</h2>
        <div className="grid sm:grid-cols-2 gap-4">
          <a
            href="/docs/concepts"
            className="group block p-4 rounded-xl border border-neutral-800/50 hover:border-emerald-500/30 transition-colors"
          >
            <h3 className="text-sm font-semibold text-neutral-200 group-hover:text-emerald-400 transition-colors">
              Core Concepts
            </h3>
            <p className="text-xs text-neutral-500 mt-1">
              Learn about Traces, Spans, Decision Points, and Events.
            </p>
          </a>
          <a
            href="/docs/python-sdk"
            className="group block p-4 rounded-xl border border-neutral-800/50 hover:border-emerald-500/30 transition-colors"
          >
            <h3 className="text-sm font-semibold text-neutral-200 group-hover:text-emerald-400 transition-colors">
              Python SDK Reference
            </h3>
            <p className="text-xs text-neutral-500 mt-1">
              Explore the full Python SDK API surface.
            </p>
          </a>
          <a
            href="/docs/integrations/openai"
            className="group block p-4 rounded-xl border border-neutral-800/50 hover:border-emerald-500/30 transition-colors"
          >
            <h3 className="text-sm font-semibold text-neutral-200 group-hover:text-emerald-400 transition-colors">
              OpenAI Integration
            </h3>
            <p className="text-xs text-neutral-500 mt-1">
              Auto-trace OpenAI calls with a single wrapper.
            </p>
          </a>
          <a
            href="/docs/self-hosting"
            className="group block p-4 rounded-xl border border-neutral-800/50 hover:border-emerald-500/30 transition-colors"
          >
            <h3 className="text-sm font-semibold text-neutral-200 group-hover:text-emerald-400 transition-colors">
              Self-Hosting
            </h3>
            <p className="text-xs text-neutral-500 mt-1">
              Deploy your own AgentLens instance with Docker.
            </p>
          </a>
        </div>
      </section>
    </div>
  );
}