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 { Key, Terminal, FileText, Activity, Code, Settings } from 'lucide-react'

export default function DeveloperPortalPage() {
  return (
    <>
      <Header />
      <main className="min-h-screen bg-studio-black">
        {/* Hero */}
        <section className="relative border-b border-studio-medium bg-gradient-to-br from-phoenix-fire/10 via-transparent to-sankofa-gold/10 py-24 px-4">
          <div className="mx-auto max-w-4xl text-center">
            <h1 className="mb-6 text-5xl font-bold text-white md:text-6xl">
              Developer Portal
            </h1>
            <p className="mb-8 text-xl text-gray-300">
              Manage API keys, test environments, and developer resources
            </p>
            <div className="flex flex-col gap-4 sm:flex-row sm:justify-center">
              <Button variant="phoenix" size="lg" asChild>
                <Link href="/portal/developers/keys">Get API Keys</Link>
              </Button>
              <Button variant="outline" size="lg" asChild>
                <Link href="/developers/docs">View Documentation</Link>
              </Button>
            </div>
          </div>
        </section>

        {/* Developer Tools */}
        <section className="py-24 px-4">
          <div className="mx-auto max-w-6xl">
            <h2 className="mb-12 text-center text-4xl font-bold text-white">
              Developer Tools
            </h2>
            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
              <Card className="hover:border-phoenix-fire transition-colors cursor-pointer" asChild>
                <Link href="/portal/developers/keys">
                  <CardHeader>
                    <Key className="mb-2 h-10 w-10 text-phoenix-fire" />
                    <CardTitle>API Keys</CardTitle>
                    <CardDescription>
                      Create and manage API keys for your applications
                    </CardDescription>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm text-gray-400">
                      Generate keys, set permissions, and monitor usage
                    </p>
                  </CardContent>
                </Link>
              </Card>

              <Card className="hover:border-phoenix-fire transition-colors cursor-pointer" asChild>
                <Link href="/portal/developers/environments">
                  <CardHeader>
                    <Terminal className="mb-2 h-10 w-10 text-sankofa-gold" />
                    <CardTitle>Test Environments</CardTitle>
                    <CardDescription>
                      Provision and manage sandbox environments
                    </CardDescription>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm text-gray-400">
                      Instant provisioning with automatic cleanup
                    </p>
                  </CardContent>
                </Link>
              </Card>

              <Card className="hover:border-phoenix-fire transition-colors cursor-pointer" asChild>
                <Link href="/portal/developers/logs">
                  <CardHeader>
                    <FileText className="mb-2 h-10 w-10 text-neon-cyan" />
                    <CardTitle>API Logs</CardTitle>
                    <CardDescription>
                      View and analyze API request logs
                    </CardDescription>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm text-gray-400">
                      Real-time log streaming and search
                    </p>
                  </CardContent>
                </Link>
              </Card>

              <Card className="hover:border-phoenix-fire transition-colors cursor-pointer" asChild>
                <Link href="/portal/developers/analytics">
                  <CardHeader>
                    <Activity className="mb-2 h-10 w-10 text-phoenix-fire" />
                    <CardTitle>Usage Analytics</CardTitle>
                    <CardDescription>
                      Monitor API usage and performance
                    </CardDescription>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm text-gray-400">
                      Track requests, errors, and quotas
                    </p>
                  </CardContent>
                </Link>
              </Card>

              <Card className="hover:border-phoenix-fire transition-colors cursor-pointer" asChild>
                <Link href="/developers/docs">
                  <CardHeader>
                    <Code className="mb-2 h-10 w-10 text-sankofa-gold" />
                    <CardTitle>Documentation</CardTitle>
                    <CardDescription>
                      API references and integration guides
                    </CardDescription>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm text-gray-400">
                      Comprehensive guides and examples
                    </p>
                  </CardContent>
                </Link>
              </Card>

              <Card className="hover:border-phoenix-fire transition-colors cursor-pointer" asChild>
                <Link href="/portal/developers/settings">
                  <CardHeader>
                    <Settings className="mb-2 h-10 w-10 text-neon-cyan" />
                    <CardTitle>Settings</CardTitle>
                    <CardDescription>
                      Configure developer account settings
                    </CardDescription>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm text-gray-400">
                      Manage preferences and notifications
                    </p>
                  </CardContent>
                </Link>
              </Card>
            </div>
          </div>
        </section>

        {/* Quick Actions */}
        <section className="border-t border-studio-medium bg-studio-dark py-24 px-4">
          <div className="mx-auto max-w-6xl">
            <h2 className="mb-8 text-3xl font-bold text-white">Quick Actions</h2>
            <div className="grid gap-4 md:grid-cols-2">
              <Card>
                <CardHeader>
                  <CardTitle>Get Started</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="mb-4 text-gray-300">
                    New to Phoenix Nexus? Create your first API key and start building.
                  </p>
                  <Button variant="outline" asChild>
                    <Link href="/developers/docs/quickstart">Quick Start Guide →</Link>
                  </Button>
                </CardContent>
              </Card>

              <Card>
                <CardHeader>
                  <CardTitle>Need Help?</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="mb-4 text-gray-300">
                    Check the documentation or contact our developer support team.
                  </p>
                  <Button variant="outline" asChild>
                    <Link href="/support">Contact Support →</Link>
                  </Button>
                </CardContent>
              </Card>
            </div>
          </div>
        </section>
      </main>
    </>
  )
}