import { createFileRoute, Link } from "@tanstack/react-router";
import { useState } from "react";
import { SiteLayout } from "@/components/site/SiteLayout";
import { Search, Book, Code2, Zap, ShieldCheck, Webhook, Download, ChevronRight } from "lucide-react";

export const Route = createFileRoute("/docs")({
  head: () => ({
    meta: [
      { title: "Documentation — AxiomPlay" },
      { name: "description", content: "Guides, API reference, SDKs and downloads for the AxiomPlay platform." },
      { property: "og:url", content: "/docs" },
    ],
    links: [{ rel: "canonical", href: "/docs" }],
  }),
  component: DocsPage,
});

const sections = [
  {
    title: "Get started",
    icon: Zap,
    items: ["Quickstart", "Authentication", "Sandbox & test players", "Environments"],
  },
  {
    title: "Core APIs",
    icon: Code2,
    items: ["Sessions", "Wallet", "Aggregation", "Sportsbook", "Bonuses"],
  },
  {
    title: "Webhooks",
    icon: Webhook,
    items: ["Signing & verification", "Event catalog", "Retries & idempotency"],
  },
  {
    title: "Compliance",
    icon: ShieldCheck,
    items: ["Responsible gaming", "KYC integration", "Jurisdictional rules"],
  },
];

const codeExample = `curl https://api.axiomplay.io/v3/sessions \\
  -H "Authorization: Bearer $AXIOM_KEY" \\
  -H "Content-Type: application/json" \\
  -d '{
    "player_id": "p_8s2v",
    "game_id":   "pragmatic:sweet-bonanza",
    "currency":  "USD"
  }'`;

const downloads = [
  { name: "TypeScript SDK v3.2.1", size: "284 KB" },
  { name: "Go SDK v2.4.0", size: "1.1 MB" },
  { name: "Python SDK v1.9.3", size: "412 KB" },
  { name: "Postman Collection", size: "96 KB" },
  { name: "OpenAPI 3.1 Spec", size: "320 KB" },
];

function DocsPage() {
  const [q, setQ] = useState("");

  return (
    <SiteLayout>
      <section className="relative overflow-hidden border-b border-border">
        <div className="absolute inset-0 bg-grid pointer-events-none" />
        <div className="absolute inset-0 pointer-events-none" style={{ background: "var(--gradient-hero)" }} />
        <div className="container-page relative py-20">
          <span className="chip mb-4"><Book className="h-3 w-3" /> Documentation</span>
          <h1 className="font-display text-4xl sm:text-5xl font-semibold max-w-3xl leading-[1.05]">
            Build with <span className="text-gradient">AxiomPlay</span>.
          </h1>
          <p className="mt-4 max-w-2xl text-muted-foreground">
            Everything you need to integrate, certify and operate — from a 5-minute
            quickstart to deep architectural references.
          </p>
          <div className="relative mt-7 max-w-xl">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
            <input
              value={q}
              onChange={(e) => setQ(e.target.value)}
              placeholder="Search docs, endpoints, error codes…"
              className="w-full bg-background/60 border border-border-strong rounded-md pl-9 pr-3 py-3 text-sm outline-none focus:border-primary"
            />
          </div>
        </div>
      </section>

      <section className="container-page py-16 grid gap-10 lg:grid-cols-[1fr_1.2fr]">
        <div className="space-y-5">
          {sections
            .filter((s) =>
              !q ||
              s.title.toLowerCase().includes(q.toLowerCase()) ||
              s.items.some((i) => i.toLowerCase().includes(q.toLowerCase())),
            )
            .map(({ title, icon: Icon, items }) => (
              <div key={title} className="surface-card p-5">
                <div className="flex items-center gap-2.5">
                  <Icon className="h-4 w-4 text-primary" />
                  <h3 className="font-display font-semibold">{title}</h3>
                </div>
                <ul className="mt-4 space-y-1">
                  {items.map((i) => (
                    <li key={i}>
                      <a href="#" className="flex items-center justify-between py-1.5 px-2 -mx-2 rounded text-sm text-muted-foreground hover:text-foreground hover:bg-surface transition">
                        {i}
                        <ChevronRight className="h-3.5 w-3.5 opacity-50" />
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
        </div>

        <div className="space-y-6">
          <div className="surface-card overflow-hidden">
            <div className="px-4 py-3 border-b border-border text-xs font-mono text-muted-foreground">
              POST /v3/sessions
            </div>
            <pre className="p-5 text-[12.5px] leading-relaxed font-mono overflow-x-auto"><code>{codeExample}</code></pre>
          </div>

          <div className="surface-card p-5">
            <div className="flex items-center justify-between mb-4">
              <div className="flex items-center gap-2.5">
                <Download className="h-4 w-4 text-primary" />
                <h3 className="font-display font-semibold">Download Center</h3>
              </div>
              <Link to="/support" className="text-xs text-primary hover:underline">Need help?</Link>
            </div>
            <ul className="divide-y divide-border">
              {downloads.map((d) => (
                <li key={d.name} className="flex items-center justify-between py-3">
                  <div>
                    <p className="text-sm">{d.name}</p>
                    <p className="text-xs text-muted-foreground">{d.size}</p>
                  </div>
                  <button className="btn-ghost-bordered !text-xs !py-1.5 !px-3">Download</button>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>
    </SiteLayout>
  );
}