"use client";

import Link from "next/link";
import {
  Rocket,
  Code2,
  Terminal,
  CreditCard,
  Settings,
  Server,
  Wrench,
  Network,
  ArrowRight,
} from "lucide-react";
import { GlassContainer } from "@/components/ui/GlassContainer";
import { CodeBlock } from "./components/CodeBlock";

const quickLinks = [
  {
    title: "Quickstart",
    description: "Install, run, and make your first API call in 60 seconds.",
    href: "/docs/quickstart",
    icon: <Rocket className="h-5 w-5" />,
  },
  {
    title: "API Reference",
    description: "OpenAI and Anthropic compatible endpoints, auth, and headers.",
    href: "/docs/api",
    icon: <Code2 className="h-5 w-5" />,
  },
  {
    title: "CLI Commands",
    description: "Every command, flag, and option for the llmhosts CLI.",
    href: "/docs/cli",
    icon: <Terminal className="h-5 w-5" />,
  },
  {
    title: "Pricing",
    description: "Free, Pro, and Team plans compared side by side.",
    href: "/docs/pricing",
    icon: <CreditCard className="h-5 w-5" />,
  },
];

const advancedLinks = [
  {
    title: "Configuration",
    description: "TOML config, env vars, router tuning, cache settings.",
    href: "/docs/guides/configuration",
    icon: <Settings className="h-5 w-5" />,
  },
  {
    title: "Deployment",
    description: "Docker, Compose, K8s, and reverse proxy setup.",
    href: "/docs/guides/deployment",
    icon: <Server className="h-5 w-5" />,
  },
  {
    title: "Troubleshooting",
    description: "Common errors, diagnostics, and performance tuning.",
    href: "/docs/guides/troubleshooting",
    icon: <Wrench className="h-5 w-5" />,
  },
  {
    title: "Fleet Management",
    description: "Multi-device mesh, GPU pooling, and marketplace.",
    href: "/docs/guides/fleet",
    icon: <Network className="h-5 w-5" />,
  },
];

export default function DocsPageClient() {
  return (
    <div>
      {/* Hero */}
      <div className="mb-12">
        <h1 className="text-4xl font-bold tracking-tight text-white">
          LLMHosts Documentation
        </h1>
        <p className="mt-4 text-lg text-gray-400 max-w-2xl">
          Turn your home GPU into production AI infrastructure accessible from
          anywhere. Get started in 60 seconds.
        </p>
      </div>

      {/* Quick install */}
      <GlassContainer className="p-6 mb-12">
        <h2 className="text-sm font-semibold uppercase tracking-wider text-violet-400 mb-4">
          Get started in 60 seconds
        </h2>
        <div className="space-y-3">
          <CodeBlock code="pip install llmhosts" language="bash" />
          <CodeBlock code="llmhosts serve" language="bash" />
          <CodeBlock
            code={`curl http://localhost:4000/v1/chat/completions \\
  -H "Content-Type: application/json" \\
  -d '{"model": "llama3.2", "messages": [{"role": "user", "content": "Hello!"}]}'`}
            language="bash"
          />
        </div>
        <Link
          href="/docs/quickstart"
          className="mt-4 inline-flex items-center gap-2 text-sm font-medium text-violet-400 hover:text-violet-300 transition-colors"
        >
          Full quickstart guide <ArrowRight className="h-4 w-4" />
        </Link>
      </GlassContainer>

      {/* Public docs */}
      <section className="mb-12">
        <h2 className="text-xl font-semibold text-white mb-6">
          Documentation
        </h2>
        <div className="grid gap-4 sm:grid-cols-2">
          {quickLinks.map((link) => (
            <Link key={link.href} href={link.href}>
              <GlassContainer
                intensity="subtle"
                className="p-5 h-full transition-all hover:border-violet-500/20 hover:bg-white/[0.04] group"
              >
                <div className="flex items-start gap-4">
                  <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-violet-600/10 text-violet-400 border border-violet-500/20">
                    {link.icon}
                  </div>
                  <div>
                    <h3 className="font-semibold text-white group-hover:text-violet-300 transition-colors">
                      {link.title}
                    </h3>
                    <p className="mt-1 text-sm text-gray-400">
                      {link.description}
                    </p>
                  </div>
                </div>
              </GlassContainer>
            </Link>
          ))}
        </div>
      </section>

      {/* Advanced guides */}
      <section>
        <h2 className="text-xl font-semibold text-white mb-2">
          Advanced Guides
        </h2>
        <p className="text-sm text-gray-400 mb-6">
          Sign in to access in-depth configuration, deployment, and fleet management guides.
        </p>
        <div className="grid gap-4 sm:grid-cols-2">
          {advancedLinks.map((link) => (
            <Link key={link.href} href={link.href}>
              <GlassContainer
                intensity="subtle"
                className="p-5 h-full transition-all hover:border-violet-500/20 hover:bg-white/[0.04] group"
              >
                <div className="flex items-start gap-4">
                  <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-white/[0.04] text-gray-400 border border-white/10">
                    {link.icon}
                  </div>
                  <div>
                    <h3 className="font-semibold text-white group-hover:text-violet-300 transition-colors">
                      {link.title}
                    </h3>
                    <p className="mt-1 text-sm text-gray-400">
                      {link.description}
                    </p>
                  </div>
                </div>
              </GlassContainer>
            </Link>
          ))}
        </div>
      </section>
    </div>
  );
}
