import Link from 'next/link'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Header } from '@/components/layout/header'
import { Code, Book, Terminal, ExternalLink } from 'lucide-react'

export default function RESTAPIPage() {
  return (
    <>
      <Header />
      <main className="min-h-screen bg-studio-black">
        <div className="container mx-auto py-12 px-4 max-w-6xl">
          <div className="mb-8">
            <h1 className="text-4xl font-bold text-white mb-4">REST API Reference</h1>
            <p className="text-xl text-gray-300">
              Complete reference for the Phoenix Nexus REST API
            </p>
          </div>

          {/* Quick Start */}
          <Card className="mb-8 border-phoenix-fire/50">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Terminal className="h-5 w-5 text-phoenix-fire" />
                Quick Start
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div>
                  <h3 className="text-sm font-semibold text-gray-400 mb-2">Base URL</h3>
                  <code className="block rounded bg-studio-dark px-4 py-2 font-mono text-sm text-white">
                    https://api.sankofa.nexus/v1
                  </code>
                </div>
                <div>
                  <h3 className="text-sm font-semibold text-gray-400 mb-2">Authentication</h3>
                  <code className="block rounded bg-studio-dark px-4 py-2 font-mono text-sm text-white">
                    Authorization: Bearer {'<token>'}
                  </code>
                </div>
                <Button variant="outline" asChild>
                  <Link href="/portal/developers">
                    Get API Key <ExternalLink className="ml-2 h-4 w-4" />
                  </Link>
                </Button>
              </div>
            </CardContent>
          </Card>

          {/* Endpoints */}
          <section className="mb-12">
            <h2 className="text-3xl font-bold text-white mb-6">Endpoints</h2>
            <div className="space-y-6">
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg">Get Resources</CardTitle>
                  <CardDescription>GET /v1/resources</CardDescription>
                </CardHeader>
                <CardContent>
                  <pre className="rounded bg-studio-dark p-4 text-sm text-white overflow-x-auto">
{`GET /v1/resources
Authorization: Bearer <token>

Response:
{
  "data": [
    {
      "id": "uuid",
      "name": "string",
      "type": "VM|CONTAINER|STORAGE|NETWORK",
      "status": "RUNNING|STOPPED|...",
      "createdAt": "2024-01-01T00:00:00Z"
    }
  ]
}`}
                  </pre>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle className="text-lg">Create Resource</CardTitle>
                  <CardDescription>POST /v1/resources</CardDescription>
                </CardHeader>
                <CardContent>
                  <pre className="rounded bg-studio-dark p-4 text-sm text-white overflow-x-auto">
{`POST /v1/resources
Authorization: Bearer <token>
Content-Type: application/json

{
  "name": "My Resource",
  "type": "VM",
  "siteId": "uuid"
}

Response:
{
  "id": "uuid",
  "name": "My Resource",
  "status": "PROVISIONING",
  ...
}`}
                  </pre>
                </CardContent>
              </Card>
            </div>
          </section>

          {/* Related Links */}
          <div className="flex gap-4">
            <Button variant="outline" asChild>
              <Link href="/developers/docs/api/graphql">GraphQL API Reference →</Link>
            </Button>
            <Button variant="outline" asChild>
              <Link href="/developers/docs/guides/authentication">Authentication Guide →</Link>
            </Button>
          </div>
        </div>
      </main>
    </>
  )
}

