"use client";

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

export default function ConfigurationContent() {
  return (
    <div>
      <h1 className="text-4xl font-bold tracking-tight text-white">
        Configuration
      </h1>
      <p className="mt-4 text-lg text-gray-400">
        LLMHosts uses a layered configuration system. Settings are resolved in
        priority order: defaults, config file, environment variables, then CLI
        flags.
      </p>

      {/* Config file */}
      <section className="mt-12">
        <h2 className="text-2xl font-semibold text-white mb-4">
          Config File
        </h2>
        <p className="text-gray-400 mb-4">
          LLMHosts reads configuration from{" "}
          <code className="rounded bg-white/[0.06] px-1.5 py-0.5 text-sm text-gray-300">
            ~/.llmhosts/config.toml
          </code>{" "}
          by default. Override with{" "}
          <code className="rounded bg-white/[0.06] px-1.5 py-0.5 text-sm text-gray-300">
            --config /path/to/config.toml
          </code>
          .
        </p>
        <CodeBlock
          title="~/.llmhosts/config.toml"
          code={`# Server settings
[server]
host = "0.0.0.0"
port = 4000
workers = 1
log_level = "info"

# Backend discovery
[discovery]
engine_url = "http://localhost:11434"
auto_discover = true
poll_interval = 30  # seconds

# Router configuration
[router]
tier1_threshold = 0.85    # kNN confidence threshold
tier2_threshold = 0.75    # ModernBERT confidence threshold
tier3_enabled = false     # Qwen2.5-0.5B (requires llmhosts[full])
fallback_model = "llama3.2"

# Privacy / IslandRun
[privacy]
enabled = true
pii_detection = true
trust_level = "private"   # "personal" (1.0), "private" (0.7), "external" (0.4)
block_external = false    # Block all external API routing

# Cache
[cache]
enabled = true
exact_ttl = 3600         # seconds for exact-match cache
semantic_ttl = 1800      # seconds for semantic cache
max_size_mb = 512        # maximum cache size
eviction = "lru"         # "lru" or "lfu"

# Tunnel
[tunnel]
provider = "auto"        # "auto", "tailscale", "cloudflare"
auto_connect = false

# Metrics
[metrics]
prometheus_enabled = true
prometheus_port = 9090
cost_tracking = true`}
        />
      </section>

      {/* Environment Variables */}
      <section className="mt-12">
        <h2 className="text-2xl font-semibold text-white mb-4">
          Environment Variables
        </h2>
        <p className="text-gray-400 mb-4">
          All config options can be set via environment variables using the{" "}
          <code className="rounded bg-white/[0.06] px-1.5 py-0.5 text-sm text-violet-400">
            LLMHOSTS_
          </code>{" "}
          prefix. Nested keys use double underscores.
        </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">
                  Config Equivalent
                </th>
                <th className="py-2 text-left font-medium text-gray-300">
                  Example
                </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">server.port</td>
                <td className="py-2">
                  <code className="text-gray-300">8080</code>
                </td>
              </tr>
              <tr className="border-b border-white/[0.06]">
                <td className="py-2 pr-4">
                  <code className="text-violet-400">LLMHOSTS_ROUTER__TIER1_THRESHOLD</code>
                </td>
                <td className="py-2 pr-4">router.tier1_threshold</td>
                <td className="py-2">
                  <code className="text-gray-300">0.90</code>
                </td>
              </tr>
              <tr className="border-b border-white/[0.06]">
                <td className="py-2 pr-4">
                  <code className="text-violet-400">LLMHOSTS_PRIVACY__TRUST_LEVEL</code>
                </td>
                <td className="py-2 pr-4">privacy.trust_level</td>
                <td className="py-2">
                  <code className="text-gray-300">personal</code>
                </td>
              </tr>
              <tr className="border-b border-white/[0.06]">
                <td className="py-2 pr-4">
                  <code className="text-violet-400">LLMHOSTS_CACHE__MAX_SIZE_MB</code>
                </td>
                <td className="py-2 pr-4">cache.max_size_mb</td>
                <td className="py-2">
                  <code className="text-gray-300">1024</code>
                </td>
              </tr>
              <tr className="border-b border-white/[0.06]">
                <td className="py-2 pr-4">
                  <code className="text-violet-400">LLMHOSTS_ENGINE__HOST</code>
                </td>
                <td className="py-2 pr-4">engine.host</td>
                <td className="py-2">
                  <code className="text-gray-300">http://192.168.1.100:11434</code>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>

      {/* Router Tuning */}
      <section className="mt-12">
        <h2 className="text-2xl font-semibold text-white mb-4">
          Router Tuning
        </h2>
        <p className="text-gray-400 mb-4">
          The three-tier router can be tuned for speed vs. accuracy:
        </p>
        <GlassContainer intensity="subtle" className="p-5">
          <div className="space-y-4">
            <div>
              <h3 className="text-sm font-semibold text-gray-200 mb-1">
                Tier 1: Rule-based + kNN (FAISS)
              </h3>
              <p className="text-sm text-gray-400">
                Target: &lt;15ms CPU. Uses pattern matching and k-nearest-neighbor
                embeddings. Set{" "}
                <code className="text-violet-400">tier1_threshold</code> higher
                (e.g. 0.95) to only accept very confident matches, or lower
                (0.70) to resolve more queries at this tier.
              </p>
            </div>
            <div>
              <h3 className="text-sm font-semibold text-gray-200 mb-1">
                Tier 2: ModernBERT Classifier
              </h3>
              <p className="text-sm text-gray-400">
                Target: &lt;50ms. Neural classifier for ambiguous queries. Requires{" "}
                <code className="text-violet-400">llmhosts[smart]</code>. Set{" "}
                <code className="text-violet-400">tier2_threshold</code> to
                control fall-through to Tier 3.
              </p>
            </div>
            <div>
              <h3 className="text-sm font-semibold text-gray-200 mb-1">
                Tier 3: Qwen2.5-0.5B LLM
              </h3>
              <p className="text-sm text-gray-400">
                Target: &lt;500ms. Small language model for complex routing decisions.
                Requires{" "}
                <code className="text-violet-400">llmhosts[full]</code>.
                Disabled by default. Enable with{" "}
                <code className="text-violet-400">tier3_enabled = true</code>.
              </p>
            </div>
          </div>
        </GlassContainer>
      </section>

      {/* Cache Tuning */}
      <section className="mt-12">
        <h2 className="text-2xl font-semibold text-white mb-4">
          Cache Configuration
        </h2>
        <p className="text-gray-400 mb-4">
          LLMHosts uses a three-tier cache: exact hash, entity namespace, and
          vCache semantic matching (ICLR 2026).
        </p>
        <CodeBlock
          title="Cache configuration"
          code={`[cache]
enabled = true

# Tier 1: Exact hash match
exact_ttl = 3600          # 1 hour

# Tier 2: Entity namespace
entity_ttl = 1800         # 30 minutes

# Tier 3: Semantic (vCache)
semantic_ttl = 1800       # 30 minutes
semantic_threshold = 0.92 # Cosine similarity threshold

# Storage limits
max_size_mb = 512
eviction = "lru"          # "lru" (least recently used) or "lfu" (least frequently used)`}
        />
        <GlassContainer intensity="subtle" className="mt-4 p-4">
          <p className="text-sm text-gray-400">
            <span className="font-semibold text-gray-300">Performance tip:</span>{" "}
            For latency-sensitive workloads, increase{" "}
            <code className="text-violet-400">semantic_threshold</code> to 0.95+
            to reduce false-positive cache hits. For cost-sensitive workloads,
            lower it to 0.85 to maximize cache utilization.
          </p>
        </GlassContainer>
      </section>

      {/* Privacy */}
      <section className="mt-12">
        <h2 className="text-2xl font-semibold text-white mb-4">
          Privacy Settings (IslandRun)
        </h2>
        <p className="text-gray-400 mb-4">
          IslandRun automatically detects PII in requests and routes them to
          trusted backends based on your trust level configuration.
        </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">
                  Trust Level
                </th>
                <th className="py-2 pr-4 text-left font-medium text-gray-300">
                  Score
                </th>
                <th className="py-2 text-left font-medium text-gray-300">
                  Behavior
                </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">personal</code>
                </td>
                <td className="py-2 pr-4">1.0</td>
                <td className="py-2">
                  Local only. PII requests never leave your device.
                </td>
              </tr>
              <tr className="border-b border-white/[0.06]">
                <td className="py-2 pr-4">
                  <code className="text-violet-400">private</code>
                </td>
                <td className="py-2 pr-4">0.7</td>
                <td className="py-2">
                  Default. PII requests stay local; non-PII may route to cloud.
                </td>
              </tr>
              <tr className="border-b border-white/[0.06]">
                <td className="py-2 pr-4">
                  <code className="text-violet-400">external</code>
                </td>
                <td className="py-2 pr-4">0.4</td>
                <td className="py-2">
                  Least restrictive. All requests may route to cloud providers.
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>
    </div>
  );
}
