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

export const metadata: Metadata = {
  title: "Anthropic Integration",
  description:
    "Wrap the Anthropic client to automatically trace Claude API calls with full metadata capture.",
};

export default function AnthropicIntegrationPage() {
  return (
    <div>
      <h1 className="text-4xl font-bold tracking-tight mb-4">
        Anthropic Integration
      </h1>
      <p className="text-lg text-neutral-400 mb-10 leading-relaxed">
        Wrap the Anthropic Python client to automatically trace all Claude API
        calls. AgentLens captures model, token usage, cost, latency, and the
        full message exchange.
      </p>

      <section className="mb-12">
        <h2 className="text-2xl font-semibold mb-4">Installation</h2>
        <CodeBlock title="terminal" language="bash">{`pip install vectry-agentlens anthropic`}</CodeBlock>
      </section>

      <section className="mb-12">
        <h2 className="text-2xl font-semibold mb-4">Quick setup</h2>
        <CodeBlock title="main.py" language="python">{`import agentlens
from agentlens.integrations.anthropic import wrap_anthropic
import anthropic

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

client = wrap_anthropic(anthropic.Anthropic())

response = client.messages.create(
    model="claude-sonnet-4-20250514",
    max_tokens=1024,
    messages=[
        {"role": "user", "content": "Explain the halting problem."},
    ],
)`}</CodeBlock>
      </section>

      <section className="mb-12">
        <h2 className="text-2xl font-semibold mb-4">What gets captured</h2>
        <div className="overflow-x-auto">
          <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">Field</th>
                <th className="text-left py-2 text-neutral-400 font-medium">Description</th>
              </tr>
            </thead>
            <tbody className="text-neutral-300">
              <tr className="border-b border-neutral-800/50">
                <td className="py-2 pr-4 font-mono text-emerald-400 text-xs">input.model</td>
                <td className="py-2">Model name (claude-sonnet-4-20250514, claude-haiku, etc.)</td>
              </tr>
              <tr className="border-b border-neutral-800/50">
                <td className="py-2 pr-4 font-mono text-emerald-400 text-xs">input.messages</td>
                <td className="py-2">Full message array sent to the API</td>
              </tr>
              <tr className="border-b border-neutral-800/50">
                <td className="py-2 pr-4 font-mono text-emerald-400 text-xs">input.system</td>
                <td className="py-2">System prompt if provided</td>
              </tr>
              <tr className="border-b border-neutral-800/50">
                <td className="py-2 pr-4 font-mono text-emerald-400 text-xs">output.content</td>
                <td className="py-2">Response content blocks</td>
              </tr>
              <tr className="border-b border-neutral-800/50">
                <td className="py-2 pr-4 font-mono text-emerald-400 text-xs">tokenCount</td>
                <td className="py-2">Input tokens + output tokens</td>
              </tr>
              <tr className="border-b border-neutral-800/50">
                <td className="py-2 pr-4 font-mono text-emerald-400 text-xs">costUsd</td>
                <td className="py-2">Estimated cost based on model pricing</td>
              </tr>
              <tr className="border-b border-neutral-800/50">
                <td className="py-2 pr-4 font-mono text-emerald-400 text-xs">durationMs</td>
                <td className="py-2">Wall-clock request time</td>
              </tr>
              <tr>
                <td className="py-2 pr-4 font-mono text-emerald-400 text-xs">metadata.stop_reason</td>
                <td className="py-2">How generation ended (end_turn, max_tokens, tool_use)</td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>

      <section className="mb-12">
        <h2 className="text-2xl font-semibold mb-4">Async client</h2>
        <CodeBlock title="async_example.py" language="python">{`from agentlens.integrations.anthropic import wrap_anthropic
import anthropic

async_client = wrap_anthropic(anthropic.AsyncAnthropic())

response = await async_client.messages.create(
    model="claude-sonnet-4-20250514",
    max_tokens=1024,
    messages=[{"role": "user", "content": "Hello!"}],
)`}</CodeBlock>
      </section>

      <section className="mb-12">
        <h2 className="text-2xl font-semibold mb-4">
          Combining with @trace
        </h2>
        <CodeBlock title="combined.py" language="python">{`import agentlens
from agentlens import trace
from agentlens.integrations.anthropic import wrap_anthropic
import anthropic

agentlens.init(api_key="...", endpoint="...")
client = wrap_anthropic(anthropic.Anthropic())

@trace(name="analysis-agent")
async def analyze(document: str) -> str:
    response = client.messages.create(
        model="claude-sonnet-4-20250514",
        max_tokens=2048,
        system="You are a document analysis expert.",
        messages=[{"role": "user", "content": f"Analyze: {document}"}],
    )
    return response.content[0].text`}</CodeBlock>
      </section>

      <section className="mb-12">
        <h2 className="text-2xl font-semibold mb-4">Tool use</h2>
        <p className="text-neutral-400 leading-relaxed mb-4">
          When Claude invokes tools, AgentLens captures each tool use as a
          TOOL_SELECTION decision point automatically:
        </p>
        <CodeBlock title="tools.py" language="python">{`@trace(name="claude-tool-agent")
async def tool_agent(prompt: str):
    response = client.messages.create(
        model="claude-sonnet-4-20250514",
        max_tokens=1024,
        tools=[{
            "name": "get_stock_price",
            "description": "Get the current stock price for a ticker symbol",
            "input_schema": {
                "type": "object",
                "properties": {
                    "ticker": {
                        "type": "string",
                        "description": "Stock ticker symbol"
                    }
                },
                "required": ["ticker"]
            }
        }],
        messages=[{"role": "user", "content": prompt}],
    )
    return response`}</CodeBlock>
      </section>

      <section>
        <h2 className="text-2xl font-semibold mb-4">Supported API methods</h2>
        <ul className="text-sm text-neutral-400 space-y-2 ml-1">
          <li>
            <code className="font-mono text-emerald-400 text-xs">messages.create()</code> — Message creation (including streaming)
          </li>
          <li>
            <code className="font-mono text-emerald-400 text-xs">messages.count_tokens()</code> — Token counting
          </li>
        </ul>
      </section>
    </div>
  );
}
