"use client";

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

interface CommandProps {
  name: string;
  description: string;
  usage: string;
  flags?: { flag: string; description: string }[];
  examples?: { description: string; code: string }[];
}

function CommandSection({ name, description, usage, flags, examples }: CommandProps) {
  return (
    <section className="mt-12">
      <h2 className="text-2xl font-semibold text-white mb-2">
        <code className="text-violet-400">llmhosts {name}</code>
      </h2>
      <p className="text-gray-400 mb-4">{description}</p>
      <CodeBlock code={usage} language="bash" />

      {flags && flags.length > 0 && (
        <div className="mt-6">
          <h3 className="text-lg font-medium text-gray-200 mb-3">Flags</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">
                    Flag
                  </th>
                  <th className="py-2 text-left font-medium text-gray-300">
                    Description
                  </th>
                </tr>
              </thead>
              <tbody className="text-gray-400">
                {flags.map((f) => (
                  <tr key={f.flag} className="border-b border-white/[0.06]">
                    <td className="py-2 pr-4 whitespace-nowrap">
                      <code className="text-violet-400">{f.flag}</code>
                    </td>
                    <td className="py-2">{f.description}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {examples && examples.length > 0 && (
        <div className="mt-6">
          <h3 className="text-lg font-medium text-gray-200 mb-3">Examples</h3>
          <div className="space-y-3">
            {examples.map((ex, i) => (
              <div key={i}>
                <p className="text-sm text-gray-400 mb-2">{ex.description}</p>
                <CodeBlock code={ex.code} language="bash" />
              </div>
            ))}
          </div>
        </div>
      )}
    </section>
  );
}

export default function CliContent() {
  return (
    <div>
      <h1 className="text-4xl font-bold tracking-tight text-white">
        CLI Reference
      </h1>
      <p className="mt-4 text-lg text-gray-400">
        The{" "}
        <code className="rounded bg-white/[0.06] px-1.5 py-0.5 text-sm text-violet-400">
          llmhosts
        </code>{" "}
        CLI is the primary interface for managing your AI infrastructure. Every
        subcommand, flag, and option is documented here.
      </p>

      {/* Global flags */}
      <section className="mt-12">
        <GlassContainer intensity="subtle" className="p-5">
          <h2 className="text-sm font-semibold uppercase tracking-wider text-violet-400 mb-3">
            Global Flags
          </h2>
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <tbody className="text-gray-400">
                <tr className="border-b border-white/[0.06]">
                  <td className="py-2 pr-4">
                    <code className="text-violet-400">--config PATH</code>
                  </td>
                  <td className="py-2">
                    Path to custom config file (default: ~/.llmhosts/config.toml)
                  </td>
                </tr>
                <tr className="border-b border-white/[0.06]">
                  <td className="py-2 pr-4">
                    <code className="text-violet-400">--verbose / -v</code>
                  </td>
                  <td className="py-2">Enable verbose logging output</td>
                </tr>
                <tr>
                  <td className="py-2 pr-4">
                    <code className="text-violet-400">--help / -h</code>
                  </td>
                  <td className="py-2">Show help for any command</td>
                </tr>
              </tbody>
            </table>
          </div>
        </GlassContainer>
      </section>

      <CommandSection
        name="serve"
        description="Start the LLMHosts proxy server. Auto-discovers backends and begins accepting API requests."
        usage="llmhosts serve [OPTIONS]"
        flags={[
          { flag: "--port PORT", description: "Port to listen on (default: 4000)" },
          { flag: "--host HOST", description: "Host to bind to (default: 0.0.0.0)" },
          { flag: "--no-tui", description: "Disable the Textual TUI dashboard" },
          { flag: "--workers N", description: "Number of uvicorn workers (default: 1)" },
          { flag: "--reload", description: "Enable auto-reload for development" },
        ]}
        examples={[
          { description: "Start on a custom port:", code: "llmhosts serve --port 8080" },
          { description: "Headless mode for production:", code: "llmhosts serve --no-tui --workers 4" },
        ]}
      />

      <CommandSection
        name="doctor"
        description="Run diagnostic checks on your LLMHosts installation. Validates GPU detection, backend connectivity, model availability, tunnel status, and key storage."
        usage="llmhosts doctor"
        examples={[
          {
            description: "Run full diagnostics:",
            code: `llmhosts doctor
# Output:
# [PASS] GPU detected: NVIDIA RTX 4090 (24GB VRAM)
# [PASS] Inference engine reachable at localhost:11434
# [PASS] 3 models available: llama3.2, mistral:7b, codellama
# [PASS] Tunnel: Tailscale connected
# [PASS] Key storage initialized`,
          },
        ]}
      />

      <CommandSection
        name="keys"
        description="Manage encrypted API keys for BYOK (Bring Your Own Key) cloud provider access."
        usage="llmhosts keys <SUBCOMMAND>"
        flags={[
          { flag: "add <provider> <key>", description: "Add or update an API key for a provider" },
          { flag: "remove <provider>", description: "Remove an API key" },
          { flag: "list", description: "List all stored providers (keys are masked)" },
        ]}
        examples={[
          { description: "Add an OpenAI key:", code: "llmhosts keys add openai sk-proj-abc123..." },
          { description: "Add an Anthropic key:", code: "llmhosts keys add anthropic sk-ant-..." },
          { description: "List stored keys:", code: "llmhosts keys list" },
        ]}
      />

      <CommandSection
        name="tunnel"
        description="Manage secure remote access tunnels. Auto-detects Tailscale or Cloudflare Tunnel."
        usage="llmhosts tunnel <SUBCOMMAND>"
        flags={[
          { flag: "start", description: "Start the tunnel connection" },
          { flag: "stop", description: "Stop the tunnel" },
          { flag: "status", description: "Show tunnel connection status" },
        ]}
        examples={[
          { description: "Start remote access:", code: "llmhosts tunnel start" },
          { description: "Check tunnel status:", code: "llmhosts tunnel status" },
        ]}
      />

      <CommandSection
        name="suggest-models"
        description="Recommend models based on your hardware capabilities. Analyzes GPU VRAM, RAM, and disk space to suggest the best models for your setup."
        usage="llmhosts suggest-models"
        examples={[
          {
            description: "Get model recommendations:",
            code: `llmhosts suggest-models
# Output:
# Based on your NVIDIA RTX 4090 (24GB VRAM):
# - llama3.2:latest (8B params, ~5GB) -- Recommended
# - mistral:7b (7B params, ~4GB) -- Fast inference
# - llama3.3:70b-q4 (70B params, ~20GB) -- Maximum quality`,
          },
        ]}
      />

      <CommandSection
        name="setup"
        description="Interactive first-run wizard. Walks you through backend discovery, model selection, key configuration, and tunnel setup."
        usage="llmhosts setup"
        examples={[
          { description: "Run the setup wizard:", code: "llmhosts setup" },
        ]}
      />

      <CommandSection
        name="up"
        description="Zero-config auto-setup. Assesses your hardware, provisions optimal models, starts the server, and connects the tunnel -- all in one command."
        usage="llmhosts up [OPTIONS]"
        flags={[
          { flag: "--dry-run", description: "Show what would be done without making changes" },
          { flag: "--skip-tunnel", description: "Start server without tunnel connection" },
        ]}
        examples={[
          { description: "Full auto-setup:", code: "llmhosts up" },
          { description: "Preview what would happen:", code: "llmhosts up --dry-run" },
        ]}
      />
    </div>
  );
}
