"use client";

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

export default function DeploymentContent() {
  return (
    <div>
      <h1 className="text-4xl font-bold tracking-tight text-white">
        Deployment
      </h1>
      <p className="mt-4 text-lg text-gray-400">
        LLMHosts runs in Docker containers for consistent, reproducible
        deployments. This guide covers every deployment scenario from single
        Docker container to Kubernetes.
      </p>

      {/* Docker */}
      <section className="mt-12">
        <h2 className="text-2xl font-semibold text-white mb-4">
          Docker (Single Container)
        </h2>
        <p className="text-gray-400 mb-4">
          Build and run LLMHosts as a single container. Best for development and
          single-device setups.
        </p>
        <CodeBlock
          title="Build and run"
          code={`# Build the image
docker build -f Dockerfile -t llmhosts:latest .

# Run the container
docker run -d \\
  --name llmhosts \\
  --gpus all \\
  -p 4000:4000 \\
  -v ~/.llmhosts:/root/.llmhosts \\
  --restart unless-stopped \\
  llmhosts:latest`}
        />
        <GlassContainer intensity="subtle" className="mt-4 p-4">
          <p className="text-sm text-gray-400">
            <span className="font-semibold text-gray-300">GPU access:</span>{" "}
            The{" "}
            <code className="text-violet-400">--gpus all</code> flag requires
            the{" "}
            <a
              href="https://docs.nvidia.com/datacenter/cloud-native/container-toolkit/install-guide.html"
              className="text-violet-400 hover:text-violet-300 transition-colors underline underline-offset-2"
              target="_blank"
              rel="noopener noreferrer"
            >
              NVIDIA Container Toolkit
            </a>{" "}
            installed on the host.
          </p>
        </GlassContainer>
      </section>

      {/* Docker Compose */}
      <section className="mt-12">
        <h2 className="text-2xl font-semibold text-white mb-4">
          Docker Compose
        </h2>
        <p className="text-gray-400 mb-4">
          The recommended way to run LLMHosts with all supporting services.
        </p>
        <CodeBlock
          title="docker-compose.yml"
          code={`version: "3.8"

services:
  llmhosts:
    build: .
    container_name: llmhosts
    ports:
      - "4000:4000"
      - "9090:9090"  # Prometheus metrics
    volumes:
      - ~/.llmhosts:/root/.llmhosts
      - llmhosts-data:/data
    environment:
      - LLMHOSTS_SERVER__PORT=4000
      - LLMHOSTS_SERVER__LOG_LEVEL=info
      - LLMHOSTS_OLLAMA__HOST=http://inference:11434
    deploy:
      resources:
        reservations:
          devices:
            - driver: nvidia
              count: all
              capabilities: [gpu]
    restart: unless-stopped
    depends_on:
      - inference

  inference:
    image: ollama/ollama:latest  # Managed by LLMHosts
    container_name: llmhosts-engine
    ports:
      - "11434:11434"
    volumes:
      - engine-models:/root/.ollama
    deploy:
      resources:
        reservations:
          devices:
            - driver: nvidia
              count: all
              capabilities: [gpu]
    restart: unless-stopped

volumes:
  llmhosts-data:
  engine-models:`}
        />
        <CodeBlock
          title="Start the stack"
          code={`# Build and start
docker compose up -d

# View logs
docker compose logs -f llmhosts

# Stop
docker compose down`}
          className="mt-3"
        />
      </section>

      {/* Kubernetes */}
      <section className="mt-12">
        <h2 className="text-2xl font-semibold text-white mb-4">
          Kubernetes / K3s
        </h2>
        <p className="text-gray-400 mb-4">
          Deploy LLMHosts on Kubernetes for high availability and horizontal
          scaling. These manifests work with K3s, K8s, and managed K8s services.
        </p>
        <CodeBlock
          title="llmhosts-deployment.yaml"
          code={`apiVersion: apps/v1
kind: Deployment
metadata:
  name: llmhosts
  labels:
    app: llmhosts
spec:
  replicas: 1
  selector:
    matchLabels:
      app: llmhosts
  template:
    metadata:
      labels:
        app: llmhosts
    spec:
      containers:
        - name: llmhosts
          image: llmhosts:latest
          ports:
            - containerPort: 4000
              name: api
            - containerPort: 9090
              name: metrics
          env:
            - name: LLMHOSTS_SERVER__PORT
              value: "4000"
          resources:
            requests:
              memory: "512Mi"
              cpu: "500m"
            limits:
              memory: "2Gi"
              nvidia.com/gpu: "1"
          readinessProbe:
            httpGet:
              path: /ready
              port: 4000
            initialDelaySeconds: 5
            periodSeconds: 10
          livenessProbe:
            httpGet:
              path: /health
              port: 4000
            initialDelaySeconds: 10
            periodSeconds: 30
---
apiVersion: v1
kind: Service
metadata:
  name: llmhosts
spec:
  selector:
    app: llmhosts
  ports:
    - name: api
      port: 4000
      targetPort: 4000
    - name: metrics
      port: 9090
      targetPort: 9090
  type: ClusterIP`}
        />
      </section>

      {/* Reverse Proxy */}
      <section className="mt-12">
        <h2 className="text-2xl font-semibold text-white mb-4">
          Behind a Reverse Proxy
        </h2>

        <h3 className="text-lg font-medium text-gray-200 mt-6 mb-3">
          Traefik
        </h3>
        <p className="text-gray-400 mb-4">
          Add labels to your Docker Compose service for automatic Traefik
          discovery:
        </p>
        <CodeBlock
          title="Traefik labels"
          code={`services:
  llmhosts:
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.llmhosts-api.rule=Host(\`api.yourdomain.com\`)"
      - "traefik.http.routers.llmhosts-api.tls=true"
      - "traefik.http.routers.llmhosts-api.tls.certresolver=letsencrypt"
      - "traefik.http.services.llmhosts-api.loadbalancer.server.port=4000"`}
        />

        <h3 className="text-lg font-medium text-gray-200 mt-8 mb-3">
          Nginx
        </h3>
        <p className="text-gray-400 mb-4">
          Nginx reverse proxy with SSL termination:
        </p>
        <CodeBlock
          title="nginx.conf"
          code={`server {
    listen 443 ssl http2;
    server_name api.yourdomain.com;

    ssl_certificate     /etc/ssl/certs/fullchain.pem;
    ssl_certificate_key /etc/ssl/private/privkey.pem;

    location / {
        proxy_pass http://localhost:4000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # SSE streaming support
        proxy_buffering off;
        proxy_cache off;
        proxy_read_timeout 300s;
    }
}`}
        />
      </section>

      {/* Environment Variables */}
      <section className="mt-12">
        <h2 className="text-2xl font-semibold text-white mb-4">
          Production Environment Variables
        </h2>
        <p className="text-gray-400 mb-4">
          Essential environment variables for production deployments:
        </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">
                  Variable
                </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">LLMHOSTS_SERVER__PORT</code>
                </td>
                <td className="py-2 pr-4">No</td>
                <td className="py-2">Server port (default: 4000)</td>
              </tr>
              <tr className="border-b border-white/[0.06]">
                <td className="py-2 pr-4">
                  <code className="text-violet-400">LLMHOSTS_SERVER__LOG_LEVEL</code>
                </td>
                <td className="py-2 pr-4">No</td>
                <td className="py-2">Log level: debug, info, warning, error (default: info)</td>
              </tr>
              <tr className="border-b border-white/[0.06]">
                <td className="py-2 pr-4">
                  <code className="text-violet-400">LLMHOSTS_OLLAMA__HOST</code>
                </td>
                <td className="py-2 pr-4">No</td>
                <td className="py-2">Inference engine URL (default: http://localhost:11434)</td>
              </tr>
              <tr className="border-b border-white/[0.06]">
                <td className="py-2 pr-4">
                  <code className="text-violet-400">AUTH_SECRET</code>
                </td>
                <td className="py-2 pr-4">Yes</td>
                <td className="py-2">NextAuth secret for session encryption</td>
              </tr>
              <tr className="border-b border-white/[0.06]">
                <td className="py-2 pr-4">
                  <code className="text-violet-400">AUTH_TRUST_HOST</code>
                </td>
                <td className="py-2 pr-4">Yes</td>
                <td className="py-2">Set to &quot;true&quot; when behind a reverse proxy</td>
              </tr>
              <tr className="border-b border-white/[0.06]">
                <td className="py-2 pr-4">
                  <code className="text-violet-400">DATABASE_URL</code>
                </td>
                <td className="py-2 pr-4">Yes</td>
                <td className="py-2">Prisma database URL (SQLite or PostgreSQL)</td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>

      {/* Health checks */}
      <section className="mt-12">
        <h2 className="text-2xl font-semibold text-white mb-4">
          Health Checks
        </h2>
        <p className="text-gray-400 mb-4">
          LLMHosts exposes two health endpoints for orchestrator integration:
        </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">
                  Endpoint
                </th>
                <th className="py-2 text-left font-medium text-gray-300">
                  Purpose
                </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">GET /health</code>
                </td>
                <td className="py-2">
                  Liveness check. Returns 200 if the process is alive.
                </td>
              </tr>
              <tr className="border-b border-white/[0.06]">
                <td className="py-2 pr-4">
                  <code className="text-violet-400">GET /ready</code>
                </td>
                <td className="py-2">
                  Readiness check. Returns 200 only when backends are discovered
                  and the router is initialized.
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>
    </div>
  );
}
