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 0: Create your account
        </h2>
        <p className="text-neutral-400 leading-relaxed mb-4">
          Before you can send traces, you need an AgentLens account. Register
          with your email and password at{" "}
          <a
            href="https://agentlens.vectry.tech/register"
            className="text-emerald-400 hover:underline"
          >
            agentlens.vectry.tech/register
          </a>
          . Once registered, log in to the dashboard and navigate to{" "}
          <strong className="text-neutral-200">Settings &rarr; API Keys</strong>{" "}
          to generate your first API key.
        </p>
        <div className="px-4 py-3 rounded-lg bg-neutral-900/50 border border-neutral-800/50 mb-4">
          <p className="text-sm text-neutral-400">
            <strong className="text-neutral-300">Self-hosting?</strong>{" "}
            If you are running your own AgentLens instance, you do not need to
            register with the hosted service. See the{" "}
            <a
              href="/docs/self-hosting"
              className="text-emerald-400 hover:underline"
            >
              Self-Hosting guide
            </a>{" "}
            instead.
          </p>
        </div>
      </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">
          Billing and session limits
        </h2>
        <p className="text-neutral-400 leading-relaxed mb-4">
          Each trace you send counts as one session for billing purposes.
          AgentLens cloud offers three tiers:
        </p>
        <div className="overflow-x-auto mb-4">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-neutral-800">
                <th className="text-left py-2 pr-4 text-neutral-400 font-medium">Plan</th>
                <th className="text-left py-2 pr-4 text-neutral-400 font-medium">Price</th>
                <th className="text-left py-2 text-neutral-400 font-medium">Sessions</th>
              </tr>
            </thead>
            <tbody className="text-neutral-300">
              <tr className="border-b border-neutral-800/50">
                <td className="py-2 pr-4">Free</td>
                <td className="py-2 pr-4">$0</td>
                <td className="py-2">20 sessions/day</td>
              </tr>
              <tr className="border-b border-neutral-800/50">
                <td className="py-2 pr-4">Starter</td>
                <td className="py-2 pr-4">$5/month</td>
                <td className="py-2">1,000 sessions/month</td>
              </tr>
              <tr>
                <td className="py-2 pr-4">Pro</td>
                <td className="py-2 pr-4">$20/month</td>
                <td className="py-2">100,000 sessions/month</td>
              </tr>
            </tbody>
          </table>
        </div>
        <p className="text-neutral-400 leading-relaxed">
          Manage your subscription in{" "}
          <strong className="text-neutral-200">Settings &rarr; Billing</strong>{" "}
          in the dashboard. Self-hosted instances are not subject to these
          limits. See{" "}
          <a
            href="/docs/authentication-billing"
            className="text-emerald-400 hover:underline"
          >
            Authentication &amp; Billing
          </a>{" "}
          for full details.
        </p>
      </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>
  );
}
