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 GraphQLAPIPage() {
  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">GraphQL API Reference</h1>
            <p className="text-xl text-gray-300">
              Complete reference for the Phoenix Nexus GraphQL 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">Endpoint</h3>
                  <code className="block rounded bg-studio-dark px-4 py-2 font-mono text-sm text-white">
                    https://api.sankofa.nexus/graphql
                  </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>

          {/* Queries */}
          <section className="mb-12">
            <h2 className="text-3xl font-bold text-white mb-6">Queries</h2>
            <div className="space-y-6">
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg">Get Resources</CardTitle>
                  <CardDescription>Retrieve a list of resources</CardDescription>
                </CardHeader>
                <CardContent>
                  <pre className="rounded bg-studio-dark p-4 text-sm text-white overflow-x-auto">
{`query GetResources($filter: ResourceFilter) {
  resources(filter: $filter) {
    id
    name
    type
    status
    site {
      id
      name
    }
  }
}`}
                  </pre>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle className="text-lg">Get Current User</CardTitle>
                  <CardDescription>Get authenticated user information</CardDescription>
                </CardHeader>
                <CardContent>
                  <pre className="rounded bg-studio-dark p-4 text-sm text-white overflow-x-auto">
{`query GetMe {
  me {
    id
    email
    name
    role
    tenant {
      id
      name
    }
  }
}`}
                  </pre>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle className="text-lg">Get Tenants</CardTitle>
                  <CardDescription>List all tenants (admin only)</CardDescription>
                </CardHeader>
                <CardContent>
                  <pre className="rounded bg-studio-dark p-4 text-sm text-white overflow-x-auto">
{`query GetTenants {
  tenants {
    id
    name
    status
    createdAt
    quotas {
      compute
      storage
      network
    }
  }
}`}
                  </pre>
                </CardContent>
              </Card>
            </div>
          </section>

          {/* Mutations */}
          <section className="mb-12">
            <h2 className="text-3xl font-bold text-white mb-6">Mutations</h2>
            <div className="space-y-6">
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg">Create Resource</CardTitle>
                  <CardDescription>Create a new resource</CardDescription>
                </CardHeader>
                <CardContent>
                  <pre className="rounded bg-studio-dark p-4 text-sm text-white overflow-x-auto">
{`mutation CreateResource($input: CreateResourceInput!) {
  createResource(input: $input) {
    id
    name
    type
    status
  }
}`}
                  </pre>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle className="text-lg">Create Tenant</CardTitle>
                  <CardDescription>Create a new tenant (admin only)</CardDescription>
                </CardHeader>
                <CardContent>
                  <pre className="rounded bg-studio-dark p-4 text-sm text-white overflow-x-auto">
{`mutation CreateTenant($input: CreateTenantInput!) {
  createTenant(input: $input) {
    id
    name
    status
  }
}`}
                  </pre>
                </CardContent>
              </Card>
            </div>
          </section>

          {/* Types */}
          <section className="mb-12">
            <h2 className="text-3xl font-bold text-white mb-6">Types</h2>
            <div className="space-y-6">
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg">Resource</CardTitle>
                </CardHeader>
                <CardContent>
                  <pre className="rounded bg-studio-dark p-4 text-sm text-white overflow-x-auto">
{`type Resource {
  id: ID!
  name: String!
  type: ResourceType!
  status: ResourceStatus!
  site: Site
  tenant: Tenant
  createdAt: DateTime!
  updatedAt: DateTime!
}`}
                  </pre>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle className="text-lg">Tenant</CardTitle>
                </CardHeader>
                <CardContent>
                  <pre className="rounded bg-studio-dark p-4 text-sm text-white overflow-x-auto">
{`type Tenant {
  id: ID!
  name: String!
  status: TenantStatus!
  quotas: TenantQuotas!
  usage: TenantQuotaUsage!
  createdAt: DateTime!
  updatedAt: DateTime!
}`}
                  </pre>
                </CardContent>
              </Card>
            </div>
          </section>

          {/* Interactive Explorer */}
          <Card className="mb-8 border-sankofa-gold/50">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Code className="h-5 w-5 text-sankofa-gold" />
                Interactive API Explorer
              </CardTitle>
              <CardDescription>
                Try queries and mutations in the interactive GraphQL playground
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Button variant="outline" asChild>
                <Link href="/portal/developers/explorer">
                  Open API Explorer <ExternalLink className="ml-2 h-4 w-4" />
                </Link>
              </Button>
            </CardContent>
          </Card>

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

