"use client";

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

export default function QuickstartContent() {
  return (
    <div>
      <h1 className="text-4xl font-bold tracking-tight text-white">
        Quickstart
      </h1>
      <p className="mt-4 text-lg text-gray-400">
        From zero to production AI inference in 60 seconds. LLMHosts turns your
        GPU into an OpenAI-compatible API endpoint accessible from anywhere.
      </p>

      {/* Prerequisites */}
      <section className="mt-12">
        <h2 className="text-2xl font-semibold text-white mb-4">Prerequisites</h2>
        <ul className="list-disc list-inside space-y-2 text-gray-300">
          <li>
            Python 3.10 or later
          </li>
          <li>
            A local AI backend (LLMHosts auto-installs one if needed)
          </li>
          <li>
            A GPU with at least 4GB VRAM (for local inference)
          </li>
        </ul>
      </section>

      {/* Step 1 */}
      <section className="mt-12">
        <h2 className="text-2xl font-semibold text-white mb-4">
          1. Install LLMHosts
        </h2>
        <p className="text-gray-400 mb-4">
          Install the core package from PyPI. This gives you the CLI, proxy
          server, and intelligent router.
        </p>
        <CodeBlock code="pip install llmhosts" language="bash" />
        <GlassContainer intensity="subtle" className="mt-4 p-4">
          <p className="text-sm text-gray-400">
            <span className="font-semibold text-gray-300">Optional tiers:</span>{" "}
            Install{" "}
            <code className="rounded bg-white/[0.06] px-1.5 py-0.5 text-xs text-violet-400">
              llmhosts[smart]
            </code>{" "}
            for ONNX/FAISS-powered routing (~150MB), or{" "}
            <code className="rounded bg-white/[0.06] px-1.5 py-0.5 text-xs text-violet-400">
              llmhosts[full]
            </code>{" "}
            for PyTorch + all router tiers (~2GB).
          </p>
        </GlassContainer>
      </section>

      {/* Step 2 */}
      <section className="mt-12">
        <h2 className="text-2xl font-semibold text-white mb-4">
          2. Start the Server
        </h2>
        <p className="text-gray-400 mb-4">
          LLMHosts auto-discovers local inference engines, detects available
          models, and starts the proxy.
        </p>
        <CodeBlock code="llmhosts serve" language="bash" />
        <GlassContainer intensity="subtle" className="mt-4 p-4">
          <p className="text-sm text-gray-400">
            <span className="font-semibold text-gray-300">Windows:</span>{" "}
            If{" "}
            <code className="rounded bg-white/[0.06] px-1.5 py-0.5 text-xs text-gray-300">
              llmhosts
            </code>{" "}
            is not recognized, use{" "}
            <code className="rounded bg-white/[0.06] px-1.5 py-0.5 text-xs text-violet-400">
              python -m llmhosts serve
            </code>{" "}
            instead — this always works regardless of PATH.
          </p>
        </GlassContainer>
        <p className="mt-4 text-gray-400">
          The server starts on{" "}
          <code className="rounded bg-white/[0.06] px-1.5 py-0.5 text-xs text-gray-300">
            http://localhost:4000
          </code>{" "}
          by default. Use{" "}
          <code className="rounded bg-white/[0.06] px-1.5 py-0.5 text-xs text-gray-300">
            --port 8080
          </code>{" "}
          to change it, or{" "}
          <code className="rounded bg-white/[0.06] px-1.5 py-0.5 text-xs text-gray-300">
            --no-tui
          </code>{" "}
          to disable the dashboard.
        </p>
      </section>

      {/* Step 3 */}
      <section className="mt-12">
        <h2 className="text-2xl font-semibold text-white mb-4">
          3. Make Your First API Call
        </h2>
        <p className="text-gray-400 mb-4">
          LLMHosts exposes an OpenAI-compatible API. Use any OpenAI client
          library, or call it directly with curl:
        </p>
        <CodeBlock
          title="curl"
          code={`curl http://localhost:4000/v1/chat/completions \\
  -H "Content-Type: application/json" \\
  -d '{
    "model": "llama3.2",
    "messages": [
      {"role": "user", "content": "Explain quantum computing in one sentence."}
    ]
  }'`}
        />

        <div className="mt-6">
          <p className="text-sm font-medium text-gray-300 mb-3">
            Or use the OpenAI Python SDK:
          </p>
          <CodeBlock
            title="Python"
            code={`from openai import OpenAI

client = OpenAI(
    base_url="http://localhost:4000/v1",
    api_key="not-needed"  # Local inference, no key required
)

response = client.chat.completions.create(
    model="llama3.2",
    messages=[{"role": "user", "content": "Hello!"}]
)
print(response.choices[0].message.content)`}
          />
        </div>
      </section>

      {/* Step 4 */}
      <section className="mt-12">
        <h2 className="text-2xl font-semibold text-white mb-4">
          4. Connect from Anywhere
        </h2>
        <p className="text-gray-400 mb-4">
          LLMHosts auto-detects Tailscale or Cloudflare Tunnel to expose your
          server securely. No port forwarding needed.
        </p>
        <CodeBlock code="llmhosts tunnel start" language="bash" />
        <p className="mt-4 text-gray-400">
          Once connected, use your tunnel URL as the{" "}
          <code className="rounded bg-white/[0.06] px-1.5 py-0.5 text-xs text-gray-300">
            base_url
          </code>{" "}
          in any OpenAI client. Your home GPU is now production infrastructure.
        </p>
      </section>

      {/* Step 5 */}
      <section className="mt-12">
        <h2 className="text-2xl font-semibold text-white mb-4">
          5. Run Diagnostics
        </h2>
        <p className="text-gray-400 mb-4">
          Verify everything is working correctly with the built-in doctor
          command:
        </p>
        <CodeBlock code="llmhosts doctor" language="bash" />
        <p className="mt-4 text-gray-400">
          This checks your GPU, inference engine connectivity, model availability,
          tunnel status, and key storage.
        </p>
      </section>

      {/* What's next */}
      <section className="mt-12">
        <GlassContainer className="p-6">
          <h2 className="text-lg font-semibold text-white mb-3">
            What&apos;s next?
          </h2>
          <ul className="space-y-2 text-sm text-gray-400">
            <li>
              <a
                href="/docs/api"
                className="text-violet-400 hover:text-violet-300 transition-colors"
              >
                API Reference
              </a>{" "}
              -- Explore all endpoints, request/response formats, and headers.
            </li>
            <li>
              <a
                href="/docs/cli"
                className="text-violet-400 hover:text-violet-300 transition-colors"
              >
                CLI Commands
              </a>{" "}
              -- Master every command, flag, and option.
            </li>
            <li>
              <a
                href="/docs/guides/configuration"
                className="text-violet-400 hover:text-violet-300 transition-colors"
              >
                Configuration Guide
              </a>{" "}
              -- Tune the router, cache, and privacy settings.
            </li>
          </ul>
        </GlassContainer>
      </section>
    </div>
  );
}
