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

export const metadata: Metadata = {
  title: "Self-Hosting",
  description:
    "Deploy AgentLens with Docker or from source. Configure database, API keys, and environment variables.",
};

export default function SelfHostingPage() {
  return (
    <div>
      <h1 className="text-4xl font-bold tracking-tight mb-4">Self-Hosting</h1>
      <p className="text-lg text-neutral-400 mb-10 leading-relaxed">
        AgentLens is open source and designed to be self-hosted. You can deploy
        it with Docker in minutes, or run from source for development.
        Self-hosted instances do not require registration with the AgentLens
        cloud service and are not subject to any session limits or billing
        tiers.
      </p>

      <section className="mb-12">
        <h2 className="text-2xl font-semibold mb-4">Quick start with Docker</h2>
        <CodeBlock title="terminal" language="bash">{`git clone https://gitea.repi.fun/repi/agentlens
cd agentlens
docker build -t agentlens .
docker run -p 3000:3000 \\
  -e DATABASE_URL="postgresql://user:pass@host:5432/agentlens" \\
  -e AGENTLENS_API_KEY="your-secret-key" \\
  agentlens`}</CodeBlock>
        <p className="text-neutral-400 leading-relaxed mt-4">
          The dashboard will be available at{" "}
          <code className="text-emerald-400 font-mono text-xs bg-emerald-500/5 px-1.5 py-0.5 rounded">
            http://localhost:3000
          </code>{" "}
          and the API at{" "}
          <code className="text-emerald-400 font-mono text-xs bg-emerald-500/5 px-1.5 py-0.5 rounded">
            http://localhost:3000/api/traces
          </code>
          .
        </p>
      </section>

      <section className="mb-12">
        <h2 className="text-2xl font-semibold mb-4">Docker Compose</h2>
        <p className="text-neutral-400 leading-relaxed mb-4">
          For a complete setup with PostgreSQL included:
        </p>
        <CodeBlock title="docker-compose.yml" language="yaml">{`version: "3.8"

services:
  db:
    image: postgres:16-alpine
    environment:
      POSTGRES_USER: agentlens
      POSTGRES_PASSWORD: agentlens
      POSTGRES_DB: agentlens
    volumes:
      - pgdata:/var/lib/postgresql/data
    ports:
      - "5432:5432"

  app:
    build: .
    ports:
      - "3000:3000"
    environment:
      DATABASE_URL: "postgresql://agentlens:agentlens@db:5432/agentlens"
      AGENTLENS_API_KEY: "your-secret-key"
      PORT: "3000"
    depends_on:
      - db

volumes:
  pgdata:`}</CodeBlock>
        <CodeBlock title="terminal" language="bash">{`docker compose up -d`}</CodeBlock>
      </section>

      <section className="mb-12">
        <h2 className="text-2xl font-semibold mb-4">Running from source</h2>
        <p className="text-neutral-400 leading-relaxed mb-4">
          For development or when you need to customize AgentLens:
        </p>
        <CodeBlock title="terminal" language="bash">{`git clone https://gitea.repi.fun/repi/agentlens
cd agentlens

# Install dependencies (uses npm workspaces)
npm install

# Set up the database
cp apps/web/.env.example apps/web/.env
# Edit .env with your DATABASE_URL

# Generate Prisma client and push schema
npm run db:generate --workspace=@agentlens/web
npm run db:push --workspace=@agentlens/web

# Start the development server
npm run dev --workspace=@agentlens/web`}</CodeBlock>
      </section>

      <section className="mb-12">
        <h2 className="text-2xl font-semibold mb-4">Environment variables</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">Variable</th>
                <th className="text-left py-2 pr-4 text-neutral-400 font-medium">Required</th>
                <th className="text-left py-2 pr-4 text-neutral-400 font-medium">Default</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">DATABASE_URL</td>
                <td className="py-2 pr-4 text-neutral-500">Yes</td>
                <td className="py-2 pr-4 text-neutral-500">-</td>
                <td className="py-2">PostgreSQL connection string</td>
              </tr>
              <tr className="border-b border-neutral-800/50">
                <td className="py-2 pr-4 font-mono text-emerald-400 text-xs">AGENTLENS_API_KEY</td>
                <td className="py-2 pr-4 text-neutral-500">Yes</td>
                <td className="py-2 pr-4 text-neutral-500">-</td>
                <td className="py-2">API key that SDKs must present to ingest traces</td>
              </tr>
              <tr className="border-b border-neutral-800/50">
                <td className="py-2 pr-4 font-mono text-emerald-400 text-xs">PORT</td>
                <td className="py-2 pr-4 text-neutral-500">No</td>
                <td className="py-2 pr-4 text-neutral-500">3000</td>
                <td className="py-2">HTTP port the server listens on</td>
              </tr>
              <tr className="border-b border-neutral-800/50">
                <td className="py-2 pr-4 font-mono text-emerald-400 text-xs">NODE_ENV</td>
                <td className="py-2 pr-4 text-neutral-500">No</td>
                <td className="py-2 pr-4 text-neutral-500">production</td>
                <td className="py-2">Set to &quot;development&quot; for dev mode</td>
              </tr>
              <tr>
                <td className="py-2 pr-4 font-mono text-emerald-400 text-xs">NEXTAUTH_SECRET</td>
                <td className="py-2 pr-4 text-neutral-500">No</td>
                <td className="py-2 pr-4 text-neutral-500">-</td>
                <td className="py-2">Secret for session signing (if auth is enabled)</td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>

      <section className="mb-12">
        <h2 className="text-2xl font-semibold mb-4">Database setup</h2>
        <p className="text-neutral-400 leading-relaxed mb-4">
          AgentLens uses PostgreSQL with Prisma ORM. The database schema is
          managed via Prisma migrations.
        </p>
        <h3 className="text-lg font-medium text-neutral-200 mb-2">
          Connection string format
        </h3>
        <CodeBlock>{`postgresql://USER:PASSWORD@HOST:PORT/DATABASE`}</CodeBlock>

        <h3 className="text-lg font-medium text-neutral-200 mb-2 mt-6">
          Running migrations
        </h3>
        <CodeBlock title="terminal" language="bash">{`# Push schema to database (development)
npm run db:push --workspace=@agentlens/web

# Run migrations (production)
npm run db:migrate --workspace=@agentlens/web`}</CodeBlock>
      </section>

      <section className="mb-12">
        <h2 className="text-2xl font-semibold mb-4">Reverse proxy setup</h2>
        <p className="text-neutral-400 leading-relaxed mb-4">
          For production deployments behind nginx or Caddy:
        </p>
        <CodeBlock title="Caddyfile" language="bash">{`agentlens.yourdomain.com {
  reverse_proxy localhost:3000
}`}</CodeBlock>
        <CodeBlock title="nginx.conf" language="bash">{`server {
    listen 443 ssl;
    server_name agentlens.yourdomain.com;

    location / {
        proxy_pass http://localhost:3000;
        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;
    }
}`}</CodeBlock>
      </section>

      <section className="mb-12">
        <h2 className="text-2xl font-semibold mb-4">Updating</h2>
        <CodeBlock title="terminal" language="bash">{`# Pull latest changes
cd agentlens
git pull origin main

# Rebuild
docker build -t agentlens .

# Restart with new image
docker compose up -d`}</CodeBlock>
      </section>

      <section>
        <h2 className="text-2xl font-semibold mb-4">Resource requirements</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">Component</th>
                <th className="text-left py-2 pr-4 text-neutral-400 font-medium">Minimum</th>
                <th className="text-left py-2 text-neutral-400 font-medium">Recommended</th>
              </tr>
            </thead>
            <tbody className="text-neutral-300">
              <tr className="border-b border-neutral-800/50">
                <td className="py-2 pr-4 text-neutral-400">CPU</td>
                <td className="py-2 pr-4">1 core</td>
                <td className="py-2">2+ cores</td>
              </tr>
              <tr className="border-b border-neutral-800/50">
                <td className="py-2 pr-4 text-neutral-400">Memory</td>
                <td className="py-2 pr-4">512 MB</td>
                <td className="py-2">1 GB+</td>
              </tr>
              <tr className="border-b border-neutral-800/50">
                <td className="py-2 pr-4 text-neutral-400">Disk</td>
                <td className="py-2 pr-4">1 GB</td>
                <td className="py-2">10 GB+ (depends on trace volume)</td>
              </tr>
              <tr>
                <td className="py-2 pr-4 text-neutral-400">PostgreSQL</td>
                <td className="py-2 pr-4">14+</td>
                <td className="py-2">16+</td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>
    </div>
  );
}