"use client";

import { Code, PageHeader } from "@/components/ui";

export default function DocsPage() {
  const origin = typeof location !== "undefined" ? location.origin : "https://www.llm-api.io";
  return (
    <div className="max-w-3xl">
      <PageHeader title="API" sub="OpenAI-compatible. Point any SDK at the base URL below with an API key from the Keys page." />
      <div className="flex flex-col gap-6 text-sm">
        <section className="card p-4">
          <div className="font-medium mb-2">Base URL</div>
          <Code>{`${origin}/v1`}</Code>
          <div className="text-xs text-ink-3 mt-2">Endpoints: <code className="mono">GET /v1/models</code>, <code className="mono">POST /v1/chat/completions</code>, <code className="mono">POST /v1/completions</code>, <code className="mono">POST /v1/embeddings</code>, <code className="mono">POST /v1/rerank</code>. Interactive OpenAPI schema at <a className="text-accent" href="/openapi" target="_blank">/openapi</a>.</div>
        </section>
        <section className="card p-4">
          <div className="font-medium mb-2">Python (openai SDK)</div>
          <Code>{`from openai import OpenAI

client = OpenAI(base_url="${origin}/v1", api_key="llm_live_xxxxx")

# Any installed model id, an alias (fast, coder, reasoning…) or "auto"
r = client.chat.completions.create(
    model="default",
    messages=[{"role": "user", "content": "Explain monetary policy in two sentences."}],
)
print(r.choices[0].message.content)

# Streaming
for chunk in client.chat.completions.create(model="default", messages=[{"role":"user","content":"Count to 10"}], stream=True):
    if chunk.choices and chunk.choices[0].delta.content:
        print(chunk.choices[0].delta.content, end="", flush=True)

# Embeddings (embedding model or alias "embedding")
e = client.embeddings.create(model="embedding", input=["hello world"])`}</Code>
        </section>
        <section className="card p-4">
          <div className="font-medium mb-2">curl</div>
          <Code>{`curl ${origin}/v1/models -H "Authorization: Bearer llm_live_xxxxx"

curl ${origin}/v1/chat/completions \\
  -H "Authorization: Bearer llm_live_xxxxx" \\
  -H "Content-Type: application/json" \\
  -d '{"model": "default", "messages": [{"role": "user", "content": "Hello"}], "stream": true}'`}</Code>
        </section>
        <section className="card p-4">
          <div className="font-medium mb-2">Behaviour</div>
          <ul className="list-disc pl-5 text-ink-2 flex flex-col gap-1">
            <li>If the requested model is not loaded, the request waits while it is loaded from SSD (the previous model is unloaded first if memory requires it). Load times are typically 1–30 s depending on size.</li>
            <li>Model switches are serialized. Concurrent requests for the same model are queued at the worker.</li>
            <li>Reasoning models return <code className="mono">reasoning_content</code> in the message / delta. Disable thinking with <code className="mono">{"\"chat_template_kwargs\": {\"enable_thinking\": false}"}</code>.</li>
            <li>Tool calling: pass <code className="mono">tools</code>; calls come back as <code className="mono">tool_calls</code> for models with a tool-capable chat template.</li>
            <li>Every response includes a <code className="mono">timings</code> object (TTFT, tokens/s, peak memory) in addition to <code className="mono">usage</code>.</li>
            <li>Errors follow the OpenAI shape: <code className="mono">{"{\"error\": {\"message\", \"type\", \"code\"}}"}</code>, e.g. <code className="mono">MODEL_NOT_FOUND</code>, <code className="mono">MODEL_TOO_LARGE</code>, <code className="mono">CONTEXT_TOO_LARGE</code>, <code className="mono">WORKER_CRASHED</code>.</li>
          </ul>
        </section>
        <section className="card p-4">
          <div className="font-medium mb-2">Management API</div>
          <div className="text-ink-2">Same host, prefix <code className="mono">/api</code>, requires the dashboard session or an API key with the <code className="mono">admin</code> scope: <code className="mono">GET /api/models</code>, <code className="mono">POST /api/models/:id/load|unload|benchmark|pin</code>, <code className="mono">POST /api/models/download</code>, <code className="mono">GET /api/system</code>, <code className="mono">GET /api/events</code> (SSE).</div>
        </section>
      </div>
    </div>
  );
}