"use client";

import { GlassContainer } from "@/components/ui/GlassContainer";
import { CodeBlock } from "../components/CodeBlock";

export default function ApiContent() {
  return (
    <div>
      <h1 className="text-4xl font-bold tracking-tight text-white">
        API Reference
      </h1>
      <p className="mt-4 text-lg text-gray-400">
        LLMHosts exposes OpenAI-compatible and Anthropic-compatible API
        endpoints. Use any existing client library -- just change the base URL.
      </p>

      {/* Base URL */}
      <section className="mt-12">
        <h2 className="text-2xl font-semibold text-white mb-4">Base URL</h2>
        <CodeBlock
          code={`# Local
http://localhost:4000

# Remote (via tunnel)
https://your-device.llmhosts.com:4000`}
          language="plaintext"
        />
      </section>

      {/* Authentication */}
      <section className="mt-12">
        <h2 className="text-2xl font-semibold text-white mb-4">
          Authentication
        </h2>
        <p className="text-gray-400 mb-4">
          Local requests require no authentication. For remote access, use a
          Bearer token generated from the dashboard or CLI:
        </p>
        <CodeBlock
          code={`# Generate a key
llmhosts keys add my-app-key

# Use it in requests
curl http://localhost:4000/v1/chat/completions \\
  -H "Authorization: Bearer llmh_your_key_here" \\
  -H "Content-Type: application/json" \\
  -d '{"model": "llama3.2", "messages": [{"role": "user", "content": "Hi"}]}'`}
          language="bash"
        />
        <GlassContainer intensity="subtle" className="mt-4 p-4">
          <p className="text-sm text-gray-400">
            <span className="font-semibold text-gray-300">BYOK mode:</span>{" "}
            LLMHosts can also proxy requests to cloud providers (OpenAI,
            Anthropic) using your own API keys. Add them with{" "}
            <code className="rounded bg-white/[0.06] px-1.5 py-0.5 text-xs text-violet-400">
              llmhosts keys add openai sk-...
            </code>
          </p>
        </GlassContainer>
      </section>

      {/* Chat Completions */}
      <section className="mt-12">
        <h2 className="text-2xl font-semibold text-white mb-4">
          POST /v1/chat/completions
        </h2>
        <p className="text-gray-400 mb-4">
          OpenAI-compatible chat completions endpoint. Supports streaming.
        </p>

        <h3 className="text-lg font-medium text-gray-200 mt-6 mb-3">
          Request Body
        </h3>
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-white/10">
                <th className="py-2 pr-4 text-left font-medium text-gray-300">
                  Field
                </th>
                <th className="py-2 pr-4 text-left font-medium text-gray-300">
                  Type
                </th>
                <th className="py-2 pr-4 text-left font-medium text-gray-300">
                  Required
                </th>
                <th className="py-2 text-left font-medium text-gray-300">
                  Description
                </th>
              </tr>
            </thead>
            <tbody className="text-gray-400">
              <tr className="border-b border-white/[0.06]">
                <td className="py-2 pr-4">
                  <code className="text-violet-400">model</code>
                </td>
                <td className="py-2 pr-4">string</td>
                <td className="py-2 pr-4">Yes</td>
                <td className="py-2">
                  Model name (e.g. &quot;llama3.2&quot;, &quot;gpt-4o&quot;, &quot;claude-sonnet-4-20250514&quot;)
                </td>
              </tr>
              <tr className="border-b border-white/[0.06]">
                <td className="py-2 pr-4">
                  <code className="text-violet-400">messages</code>
                </td>
                <td className="py-2 pr-4">array</td>
                <td className="py-2 pr-4">Yes</td>
                <td className="py-2">
                  Array of message objects with &quot;role&quot; and &quot;content&quot;
                </td>
              </tr>
              <tr className="border-b border-white/[0.06]">
                <td className="py-2 pr-4">
                  <code className="text-violet-400">stream</code>
                </td>
                <td className="py-2 pr-4">boolean</td>
                <td className="py-2 pr-4">No</td>
                <td className="py-2">
                  Enable server-sent events streaming (default: false)
                </td>
              </tr>
              <tr className="border-b border-white/[0.06]">
                <td className="py-2 pr-4">
                  <code className="text-violet-400">temperature</code>
                </td>
                <td className="py-2 pr-4">number</td>
                <td className="py-2 pr-4">No</td>
                <td className="py-2">Sampling temperature (0.0 -- 2.0)</td>
              </tr>
              <tr className="border-b border-white/[0.06]">
                <td className="py-2 pr-4">
                  <code className="text-violet-400">max_tokens</code>
                </td>
                <td className="py-2 pr-4">integer</td>
                <td className="py-2 pr-4">No</td>
                <td className="py-2">Maximum number of tokens to generate</td>
              </tr>
            </tbody>
          </table>
        </div>

        <h3 className="text-lg font-medium text-gray-200 mt-8 mb-3">
          Example Request
        </h3>
        <CodeBlock
          title="curl"
          code={`curl http://localhost:4000/v1/chat/completions \\
  -H "Content-Type: application/json" \\
  -H "Authorization: Bearer llmh_your_key" \\
  -d '{
    "model": "llama3.2",
    "messages": [
      {"role": "system", "content": "You are a helpful assistant."},
      {"role": "user", "content": "What is the capital of France?"}
    ],
    "temperature": 0.7,
    "max_tokens": 256
  }'`}
        />

        <h3 className="text-lg font-medium text-gray-200 mt-8 mb-3">
          Example Response
        </h3>
        <CodeBlock
          title="JSON"
          code={`{
  "id": "chatcmpl-abc123",
  "object": "chat.completion",
  "created": 1709000000,
  "model": "llama3.2",
  "choices": [
    {
      "index": 0,
      "message": {
        "role": "assistant",
        "content": "The capital of France is Paris."
      },
      "finish_reason": "stop"
    }
  ],
  "usage": {
    "prompt_tokens": 25,
    "completion_tokens": 8,
    "total_tokens": 33
  }
}`}
        />
      </section>

      {/* List Models */}
      <section className="mt-12">
        <h2 className="text-2xl font-semibold text-white mb-4">
          GET /v1/models
        </h2>
        <p className="text-gray-400 mb-4">
          List all available models across all connected backends.
        </p>
        <CodeBlock
          title="curl"
          code="curl http://localhost:4000/v1/models"
        />
        <h3 className="text-lg font-medium text-gray-200 mt-6 mb-3">
          Example Response
        </h3>
        <CodeBlock
          title="JSON"
          code={`{
  "object": "list",
  "data": [
    {
      "id": "llama3.2",
      "object": "model",
      "created": 1709000000,
      "owned_by": "local"
    },
    {
      "id": "mistral:7b",
      "object": "model",
      "created": 1709000000,
      "owned_by": "local"
    }
  ]
}`}
        />
      </section>

      {/* Anthropic */}
      <section className="mt-12">
        <h2 className="text-2xl font-semibold text-white mb-4">
          POST /v1/messages
        </h2>
        <p className="text-gray-400 mb-4">
          Anthropic-compatible messages endpoint. Use the same base URL with
          Anthropic client libraries.
        </p>
        <CodeBlock
          title="curl"
          code={`curl http://localhost:4000/v1/messages \\
  -H "Content-Type: application/json" \\
  -H "x-api-key: llmh_your_key" \\
  -H "anthropic-version: 2023-06-01" \\
  -d '{
    "model": "claude-sonnet-4-20250514",
    "max_tokens": 256,
    "messages": [
      {"role": "user", "content": "Hello, Claude!"}
    ]
  }'`}
        />
        <GlassContainer intensity="subtle" className="mt-4 p-4">
          <p className="text-sm text-gray-400">
            <span className="font-semibold text-gray-300">Note:</span> The
            Anthropic endpoint uses{" "}
            <code className="rounded bg-white/[0.06] px-1.5 py-0.5 text-xs text-gray-300">
              x-api-key
            </code>{" "}
            header instead of{" "}
            <code className="rounded bg-white/[0.06] px-1.5 py-0.5 text-xs text-gray-300">
              Authorization: Bearer
            </code>
            . LLMHosts accepts both formats on all endpoints.
          </p>
        </GlassContainer>
      </section>

      {/* Response Headers */}
      <section className="mt-12">
        <h2 className="text-2xl font-semibold text-white mb-4">
          Response Headers
        </h2>
        <p className="text-gray-400 mb-4">
          LLMHosts adds custom headers to every response for observability:
        </p>
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-white/10">
                <th className="py-2 pr-4 text-left font-medium text-gray-300">
                  Header
                </th>
                <th className="py-2 text-left font-medium text-gray-300">
                  Description
                </th>
              </tr>
            </thead>
            <tbody className="text-gray-400">
              <tr className="border-b border-white/[0.06]">
                <td className="py-2 pr-4">
                  <code className="text-violet-400">X-Request-ID</code>
                </td>
                <td className="py-2">
                  Unique request ID for tracing and debugging
                </td>
              </tr>
              <tr className="border-b border-white/[0.06]">
                <td className="py-2 pr-4">
                  <code className="text-violet-400">X-LLMHosts-Cost</code>
                </td>
                <td className="py-2">
                  Estimated cost of the request in USD (e.g. &quot;0.0012&quot;)
                </td>
              </tr>
              <tr className="border-b border-white/[0.06]">
                <td className="py-2 pr-4">
                  <code className="text-violet-400">X-LLMHosts-Model</code>
                </td>
                <td className="py-2">
                  Actual model used (may differ from requested if routed)
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>

      {/* Error Codes */}
      <section className="mt-12">
        <h2 className="text-2xl font-semibold text-white mb-4">
          Error Responses
        </h2>
        <p className="text-gray-400 mb-4">
          Errors follow the OpenAI error format:
        </p>
        <CodeBlock
          title="JSON"
          code={`{
  "error": {
    "message": "Model 'nonexistent' not found",
    "type": "invalid_request_error",
    "code": "model_not_found"
  }
}`}
        />
        <div className="overflow-x-auto mt-6">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-white/10">
                <th className="py-2 pr-4 text-left font-medium text-gray-300">
                  Status
                </th>
                <th className="py-2 text-left font-medium text-gray-300">
                  Meaning
                </th>
              </tr>
            </thead>
            <tbody className="text-gray-400">
              <tr className="border-b border-white/[0.06]">
                <td className="py-2 pr-4">
                  <code className="text-gray-300">400</code>
                </td>
                <td className="py-2">Invalid request (missing fields, bad format)</td>
              </tr>
              <tr className="border-b border-white/[0.06]">
                <td className="py-2 pr-4">
                  <code className="text-gray-300">401</code>
                </td>
                <td className="py-2">Missing or invalid API key</td>
              </tr>
              <tr className="border-b border-white/[0.06]">
                <td className="py-2 pr-4">
                  <code className="text-gray-300">404</code>
                </td>
                <td className="py-2">Model not found</td>
              </tr>
              <tr className="border-b border-white/[0.06]">
                <td className="py-2 pr-4">
                  <code className="text-gray-300">429</code>
                </td>
                <td className="py-2">Rate limit exceeded</td>
              </tr>
              <tr className="border-b border-white/[0.06]">
                <td className="py-2 pr-4">
                  <code className="text-gray-300">502</code>
                </td>
                <td className="py-2">Backend unavailable (inference engine down, cloud provider error)</td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>
    </div>
  );
}
