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 { Shield, Key, Lock } from 'lucide-react'

export default function AuthenticationGuidePage() {
  return (
    <>
      <Header />
      <main className="min-h-screen bg-studio-black">
        <div className="container mx-auto py-12 px-4 max-w-4xl">
          <div className="mb-12 text-center">
            <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-phoenix-fire/20">
              <Shield className="h-8 w-8 text-phoenix-fire" />
            </div>
            <h1 className="text-5xl font-bold text-white mb-4">Authentication Guide</h1>
            <p className="text-xl text-gray-300">
              Learn how to authenticate with Phoenix Nexus APIs
            </p>
          </div>

          {/* API Keys */}
          <Card className="mb-8">
            <CardHeader>
              <div className="flex items-center gap-3">
                <Key className="h-6 w-6 text-sankofa-gold" />
                <div>
                  <CardTitle>API Key Authentication</CardTitle>
                  <CardDescription>Simple and secure API key-based authentication</CardDescription>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div>
                  <h3 className="font-semibold text-white mb-2">1. Create an API Key</h3>
                  <p className="text-gray-300 mb-4">
                    Navigate to the Developer Portal and create a new API key.
                  </p>
                  <Button variant="outline" asChild>
                    <Link href="/portal/developers/keys">Create API Key →</Link>
                  </Button>
                </div>
                <div>
                  <h3 className="font-semibold text-white mb-2">2. Use the API Key</h3>
                  <p className="text-gray-300 mb-2">Include the API key in the Authorization header:</p>
                  <pre className="rounded bg-studio-dark p-4 text-sm text-white overflow-x-auto">
{`curl -X GET https://api.sankofa.nexus/graphql \\
  -H "Authorization: Bearer sk_live_your_key_here" \\
  -H "Content-Type: application/json"`}
                  </pre>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* JWT Tokens */}
          <Card className="mb-8">
            <CardHeader>
              <div className="flex items-center gap-3">
                <Lock className="h-6 w-6 text-neon-cyan" />
                <div>
                  <CardTitle>JWT Token Authentication</CardTitle>
                  <CardDescription>For user-based authentication</CardDescription>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div>
                  <h3 className="font-semibold text-white mb-2">1. Login</h3>
                  <pre className="rounded bg-studio-dark p-4 text-sm text-white overflow-x-auto">
{`mutation {
  login(email: "user@example.com", password: "password") {
    token
    user {
      id
      email
      name
    }
  }
}`}
                  </pre>
                </div>
                <div>
                  <h3 className="font-semibold text-white mb-2">2. Use the Token</h3>
                  <pre className="rounded bg-studio-dark p-4 text-sm text-white overflow-x-auto">
{`curl -X POST https://api.sankofa.nexus/graphql \\
  -H "Authorization: Bearer <jwt_token>" \\
  -H "Content-Type: application/json" \\
  -d '{"query": "{ me { id email } }"}'`}
                  </pre>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* Security Best Practices */}
          <Card className="mb-8 border-studio-medium">
            <CardHeader>
              <CardTitle>Security Best Practices</CardTitle>
            </CardHeader>
            <CardContent>
              <ul className="space-y-2 text-sm text-gray-300">
                <li>• Never commit API keys or tokens to version control</li>
                <li>• Use environment variables to store credentials</li>
                <li>• Rotate API keys regularly</li>
                <li>• Use HTTPS for all API requests</li>
                <li>• Implement token refresh for long-lived sessions</li>
                <li>• Monitor API key usage for suspicious activity</li>
              </ul>
            </CardContent>
          </Card>

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

