"use client";

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

export default function FleetContent() {
  return (
    <div>
      <h1 className="text-4xl font-bold tracking-tight text-white">
        Fleet Management
      </h1>
      <p className="mt-4 text-lg text-gray-400">
        Connect multiple devices into a unified AI infrastructure mesh. Pool GPU
        resources, load-balance across devices, and operate in the marketplace.
      </p>

      {/* Multi-device setup */}
      <section className="mt-12">
        <h2 className="text-2xl font-semibold text-white mb-4">
          Multi-Device Setup
        </h2>
        <p className="text-gray-400 mb-4">
          Connect multiple LLMHosts instances into a mesh network. Each device
          runs its own server, and requests are automatically routed to the best
          available backend.
        </p>

        <h3 className="text-lg font-medium text-gray-200 mt-6 mb-3">
          1. Install on each device
        </h3>
        <CodeBlock
          code={`# On each device
pip install llmhosts
llmhosts setup`}
          language="bash"
        />

        <h3 className="text-lg font-medium text-gray-200 mt-6 mb-3">
          2. Register devices
        </h3>
        <p className="text-gray-400 mb-4">
          Use the{" "}
          <code className="rounded bg-white/[0.06] px-1.5 py-0.5 text-sm text-violet-400">
            llmhosts up
          </code>{" "}
          command on each device. It automatically authenticates with your
          LLMHosts account and registers the device.
        </p>
        <CodeBlock
          code={`# On device 1 (workstation with RTX 4090)
llmhosts up

# On device 2 (server with A100)
llmhosts up

# On device 3 (laptop with RTX 3060)
llmhosts up`}
          language="bash"
        />

        <h3 className="text-lg font-medium text-gray-200 mt-6 mb-3">
          3. Verify fleet status
        </h3>
        <p className="text-gray-400 mb-4">
          View all connected devices from the web dashboard or API:
        </p>
        <CodeBlock
          code={`# List connected devices
curl https://llmhosts.com/api/devices \\
  -H "Authorization: Bearer your_token"

# Response
{
  "devices": [
    {
      "name": "workstation",
      "gpu": "RTX 4090 (24GB)",
      "models": ["llama3.2", "mistral:7b"],
      "status": "online",
      "latency_ms": 12
    },
    {
      "name": "server",
      "gpu": "A100 (80GB)",
      "models": ["llama3.3:70b", "codellama:34b"],
      "status": "online",
      "latency_ms": 45
    }
  ]
}`}
          title="Devices API"
        />
      </section>

      {/* Hive Mode */}
      <section className="mt-12">
        <h2 className="text-2xl font-semibold text-white mb-4">
          Hive Mode (GPU Pooling)
        </h2>
        <GlassContainer intensity="subtle" className="p-4 mb-6">
          <p className="text-sm text-gray-400">
            <span className="font-semibold text-violet-400">Team plan required.</span>{" "}
            Hive mode pools GPU resources across all connected devices,
            enabling larger models and higher throughput.
          </p>
        </GlassContainer>
        <p className="text-gray-400 mb-4">
          Hive mode enables several powerful features:
        </p>
        <ul className="list-disc list-inside space-y-2 text-gray-300 mb-6">
          <li>
            <span className="font-medium">Model sharding</span> -- Split large
            models across multiple GPUs on different devices
          </li>
          <li>
            <span className="font-medium">Load balancing</span> -- Automatically
            distribute requests based on device load and latency
          </li>
          <li>
            <span className="font-medium">Failover</span> -- If a device goes
            offline, requests are rerouted to remaining devices
          </li>
          <li>
            <span className="font-medium">Aggregate VRAM</span> -- Pool VRAM
            across devices to run models that do not fit on a single GPU
          </li>
        </ul>

        <h3 className="text-lg font-medium text-gray-200 mt-6 mb-3">
          Enable Hive Mode
        </h3>
        <CodeBlock
          title="~/.llmhosts/config.toml"
          code={`[hive]
enabled = true
role = "worker"        # "coordinator" or "worker"
coordinator_url = "https://coordinator.llmhosts.com:4000"
heartbeat_interval = 15  # seconds
max_concurrent = 4       # max concurrent requests this device handles`}
        />

        <h3 className="text-lg font-medium text-gray-200 mt-6 mb-3">
          Architecture
        </h3>
        <p className="text-gray-400 mb-4">
          One device acts as the coordinator (receives all API requests), and
          the rest are workers. The coordinator routes to workers based on model
          availability, load, and latency.
        </p>
        <GlassContainer intensity="subtle" className="p-5">
          <pre className="text-sm text-gray-400 font-mono leading-relaxed">
{`Client Request
    |
    v
[Coordinator] ---> Router Decision
    |                    |
    v                    v
[Worker 1]          [Worker 2]          [Worker 3]
RTX 4090            A100                RTX 3060
llama3.2            llama3.3:70b        mistral:7b
Load: 30%           Load: 65%           Load: 10%`}
          </pre>
        </GlassContainer>
      </section>

      {/* Marketplace */}
      <section className="mt-12">
        <h2 className="text-2xl font-semibold text-white mb-4">
          Marketplace Operator Guide
        </h2>
        <p className="text-gray-400 mb-4">
          Share your GPU capacity with the LLMHosts marketplace and earn revenue.
          Other users can route requests to your device when their local
          hardware is busy or unavailable.
        </p>

        <h3 className="text-lg font-medium text-gray-200 mt-6 mb-3">
          Opt In as an Operator
        </h3>
        <p className="text-gray-400 mb-4">
          Enable marketplace mode from the dashboard or config:
        </p>
        <CodeBlock
          title="~/.llmhosts/config.toml"
          code={`[marketplace]
enabled = true
pricing = "auto"         # "auto" (market rate) or fixed rate per 1k tokens
min_price_per_1k = 0.001 # minimum price you'll accept (USD)
max_concurrent = 2       # max concurrent marketplace requests
models = ["llama3.2", "mistral:7b"]  # models to offer (empty = all)`}
        />

        <h3 className="text-lg font-medium text-gray-200 mt-6 mb-3">
          Reputation System
        </h3>
        <p className="text-gray-400 mb-4">
          Your operator reputation score (0--100) is calculated from:
        </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">
                  Factor
                </th>
                <th className="py-2 pr-4 text-left font-medium text-gray-300">
                  Weight
                </th>
                <th className="py-2 text-left font-medium text-gray-300">
                  Measured By
                </th>
              </tr>
            </thead>
            <tbody className="text-gray-400">
              <tr className="border-b border-white/[0.06]">
                <td className="py-2 pr-4 text-gray-300">Uptime</td>
                <td className="py-2 pr-4">40%</td>
                <td className="py-2">
                  Percentage of time device is online and responding to heartbeats
                </td>
              </tr>
              <tr className="border-b border-white/[0.06]">
                <td className="py-2 pr-4 text-gray-300">Latency P95</td>
                <td className="py-2 pr-4">30%</td>
                <td className="py-2">
                  95th percentile response time over the last 24 hours
                </td>
              </tr>
              <tr className="border-b border-white/[0.06]">
                <td className="py-2 pr-4 text-gray-300">Success Rate</td>
                <td className="py-2 pr-4">30%</td>
                <td className="py-2">
                  Percentage of requests completed without errors
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <h3 className="text-lg font-medium text-gray-200 mt-8 mb-3">
          Earnings
        </h3>
        <p className="text-gray-400 mb-4">
          Earnings are tracked per request and paid out via Stripe Connect. View
          your earnings from the dashboard:
        </p>
        <ul className="list-disc list-inside space-y-1 text-sm text-gray-400">
          <li>Real-time revenue tracking per model and per request</li>
          <li>Automatic daily settlements via Stripe Connect</li>
          <li>Token usage reports with cost breakdowns</li>
          <li>Tax-ready earnings reports (1099 eligible)</li>
        </ul>
      </section>

      {/* Device Management */}
      <section className="mt-12">
        <h2 className="text-2xl font-semibold text-white mb-4">
          Device Management
        </h2>
        <p className="text-gray-400 mb-4">
          Manage your fleet from the web dashboard at{" "}
          <code className="rounded bg-white/[0.06] px-1.5 py-0.5 text-sm text-gray-300">
            /dashboard/devices
          </code>
          :
        </p>
        <ul className="list-disc list-inside space-y-2 text-gray-300">
          <li>
            <span className="font-medium">Status monitoring</span> -- Real-time
            online/offline status with heartbeat tracking
          </li>
          <li>
            <span className="font-medium">Model management</span> -- See which
            models are loaded on each device, pull new models remotely
          </li>
          <li>
            <span className="font-medium">GPU metrics</span> -- VRAM usage,
            temperature, utilization per device
          </li>
          <li>
            <span className="font-medium">Request routing</span> -- Override
            automatic routing, pin models to specific devices
          </li>
          <li>
            <span className="font-medium">Remote control</span> -- Start, stop,
            and restart LLMHosts on any device
          </li>
        </ul>

        <GlassContainer intensity="subtle" className="mt-6 p-4">
          <p className="text-sm text-gray-400">
            <span className="font-semibold text-gray-300">Tip:</span>{" "}
            Use the{" "}
            <a
              href="/docs/guides/configuration"
              className="text-violet-400 hover:text-violet-300 transition-colors"
            >
              configuration guide
            </a>{" "}
            to set up automatic device discovery and optimize your fleet for
            your specific workload.
          </p>
        </GlassContainer>
      </section>
    </div>
  );
}
