import Link from "next/link"
import { ArrowRight, Code2, Lock, Zap, BookOpen } from "lucide-react"

export const metadata = {
  title: "API Docs — Property Management Network",
  description: "Property Management Network REST API documentation for developers.",
}

const ENDPOINTS = [
  { method: "GET", path: "/api/properties", desc: "List all properties for the authenticated landlord" },
  { method: "POST", path: "/api/properties", desc: "Create a new property" },
  { method: "GET", path: "/api/tenants", desc: "List all tenants with lease status" },
  { method: "GET", path: "/api/payments", desc: "List rent payments with filters (status, date range)" },
  { method: "POST", path: "/api/payments", desc: "Record a new payment manually" },
  { method: "GET", path: "/api/maintenance", desc: "List all maintenance requests" },
  { method: "POST", path: "/api/maintenance", desc: "Create a maintenance request" },
  { method: "PATCH", path: "/api/maintenance/:id", desc: "Update request status or assign to contractor" },
]

const METHOD_COLORS: Record<string, string> = {
  GET: "text-emerald-400 bg-emerald-500/10",
  POST: "text-blue-400 bg-blue-500/10",
  PATCH: "text-amber-400 bg-amber-500/10",
  DELETE: "text-red-400 bg-red-500/10",
}

export default function ApiDocsPage() {
  return (
    <div className="bg-[#09090b] text-white min-h-screen">
      {/* Hero */}
      <div className="relative overflow-hidden pt-32 pb-16">
        <div className="absolute top-0 left-1/2 -translate-x-1/2 h-[400px] w-[600px] rounded-full bg-violet-600/12 blur-[100px] -z-10" />
        <div className="mx-auto max-w-4xl px-6">
          <div className="inline-flex items-center gap-2 rounded-full border border-violet-500/30 bg-violet-500/10 px-4 py-1.5 text-xs font-medium text-violet-300 mb-6">
            <Code2 className="h-3.5 w-3.5" />
            REST API · v1
          </div>
          <h1 className="text-4xl font-bold sm:text-5xl mb-4">API Documentation</h1>
          <p className="text-lg text-white/50 max-w-2xl leading-relaxed">
            Build on top of Property Management Network. Automate your workflows, sync with external tools, or build custom dashboards using our REST API.
          </p>
          <div className="mt-6 inline-flex items-center gap-2 rounded-xl border border-white/10 bg-white/[0.04] px-4 py-2.5">
            <span className="text-xs font-mono text-white/40">Base URL:</span>
            <code className="text-xs font-mono text-indigo-300">https://api.propertymanagement.network/v1</code>
          </div>
        </div>
      </div>

      <div className="mx-auto max-w-4xl px-6 pb-24 space-y-12">
        {/* Auth */}
        <div>
          <h2 className="text-xl font-bold text-white mb-4 flex items-center gap-2">
            <Lock className="h-5 w-5 text-indigo-400" /> Authentication
          </h2>
          <div className="rounded-2xl border border-white/[0.06] bg-[#111118] p-6">
            <p className="text-sm text-white/60 mb-4 leading-relaxed">
              All API requests require a Bearer token in the Authorization header. Generate your API key from
              the <Link href="/login" className="text-indigo-400 hover:text-indigo-300 underline underline-offset-2">dashboard settings</Link>.
            </p>
            <div className="rounded-xl bg-[#0a0a12] border border-white/[0.06] p-4 font-mono text-xs text-emerald-300">
              <p className="text-white/30 mb-1"># Example request</p>
              <p>curl https://api.propertymanagement.network/v1/properties \</p>
              <p className="pl-4">-H &quot;Authorization: Bearer YOUR_API_KEY&quot;</p>
            </div>
          </div>
        </div>

        {/* Endpoints */}
        <div>
          <h2 className="text-xl font-bold text-white mb-4 flex items-center gap-2">
            <Zap className="h-5 w-5 text-amber-400" /> Endpoints
          </h2>
          <div className="rounded-2xl border border-white/[0.06] bg-[#111118] overflow-hidden">
            {ENDPOINTS.map((ep, i) => (
              <div key={i} className={`flex items-start gap-4 px-6 py-4 ${i !== ENDPOINTS.length - 1 ? "border-b border-white/[0.04]" : ""}`}>
                <span className={`shrink-0 rounded-md px-2.5 py-1 text-[11px] font-bold font-mono ${METHOD_COLORS[ep.method]}`}>
                  {ep.method}
                </span>
                <div>
                  <code className="text-xs font-mono text-white/80">{ep.path}</code>
                  <p className="text-xs text-white/40 mt-0.5">{ep.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Response format */}
        <div>
          <h2 className="text-xl font-bold text-white mb-4 flex items-center gap-2">
            <BookOpen className="h-5 w-5 text-blue-400" /> Response Format
          </h2>
          <div className="rounded-2xl border border-white/[0.06] bg-[#111118] p-6">
            <p className="text-sm text-white/60 mb-4">All responses are JSON. Successful responses return a <code className="text-indigo-300 font-mono text-xs">data</code> field. Errors return an <code className="text-red-300 font-mono text-xs">error</code> field with a message and code.</p>
            <div className="rounded-xl bg-[#0a0a12] border border-white/[0.06] p-4 font-mono text-xs leading-relaxed">
              <p className="text-white/30">// Success</p>
              <p className="text-emerald-300">{"{"} &quot;data&quot;: [...], &quot;count&quot;: 12 {"}"}</p>
              <br />
              <p className="text-white/30">// Error</p>
              <p className="text-red-300">{"{"} &quot;error&quot;: {"{"} &quot;code&quot;: 401, &quot;message&quot;: &quot;Unauthorized&quot; {"}"} {"}"}</p>
            </div>
          </div>
        </div>

        {/* Coming soon banner */}
        <div className="rounded-2xl border border-indigo-500/20 bg-indigo-500/5 p-6 text-center">
          <p className="text-sm font-semibold text-indigo-300 mb-1">Full SDK coming soon</p>
          <p className="text-xs text-white/40 mb-4">We&apos;re building official JavaScript and Python SDKs. Join the waitlist to be notified.</p>
          <Link
            href="/signup"
            className="inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-5 py-2 text-xs font-semibold text-white hover:bg-indigo-500 transition"
          >
            Join waitlist <ArrowRight className="h-3.5 w-3.5" />
          </Link>
        </div>
      </div>
    </div>
  )
}