Sankofa/portal/src/app/developer/page.tsx

'use client';

import { Key, Book, TestTube, BarChart3, Webhook, Download, ArrowRight } from 'lucide-react';
import Link from 'next/link';
import { useSession } from 'next-auth/react';
import { signIn } from 'next-auth/react';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card';

export default function DeveloperPortalPage() {
  const { status } = useSession();

  if (status === 'loading') {
    return (
      <div className="flex min-h-screen items-center justify-center bg-gray-900">
        <div className="text-center">
          <div className="mb-4 h-8 w-8 animate-spin rounded-full border-4 border-gray-300 border-t-blue-600 mx-auto"></div>
          <p className="text-gray-400">Loading...</p>
        </div>
      </div>
    );
  }

  if (status === 'unauthenticated') {
    return (
      <div className="flex min-h-screen items-center justify-center bg-gray-900">
        <div className="text-center max-w-md mx-auto p-8">
          <h1 className="text-2xl font-bold text-white mb-4">Welcome to Developer Portal</h1>
          <p className="text-gray-400 mb-6">Please sign in to continue</p>
          <button
            onClick={() => signIn()}
            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
          >
            Sign In
          </button>
        </div>
      </div>
    );
  }

  const developerSections = [
    {
      title: 'API Key Management',
      description: 'Create, manage, and revoke API keys for your applications',
      icon: Key,
      href: '/developer/api-keys',
      features: ['Create API keys', 'View usage', 'Revoke keys'],
    },
    {
      title: 'API Documentation',
      description: 'Interactive API documentation with examples and code snippets',
      icon: Book,
      href: '/developer/docs',
      features: ['REST API docs', 'GraphQL schema', 'Code examples'],
    },
    {
      title: 'Test Environments',
      description: 'Provision and manage sandbox environments for testing',
      icon: TestTube,
      href: '/developer/environments',
      features: ['Create environments', 'Sandbox access', 'Auto-cleanup'],
    },
    {
      title: 'Usage Analytics',
      description: 'Monitor API usage, quotas, and performance metrics',
      icon: BarChart3,
      href: '/developer/analytics',
      features: ['API usage stats', 'Quota monitoring', 'Performance metrics'],
    },
    {
      title: 'Webhook Configuration',
      description: 'Configure webhooks for real-time event notifications',
      icon: Webhook,
      href: '/developer/webhooks',
      features: ['Create webhooks', 'Event subscriptions', 'Delivery logs'],
    },
    {
      title: 'SDK Downloads',
      description: 'Download SDKs and client libraries for popular languages',
      icon: Download,
      href: '/developer/sdks',
      features: ['TypeScript SDK', 'Python SDK', 'Go SDK'],
    },
  ];

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-white mb-2">Developer Portal</h1>
        <p className="text-gray-400">API keys, documentation, test environments, and developer tools</p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {developerSections.map((section) => {
          const Icon = section.icon;
          return (
            <Card key={section.href} className="bg-gray-800 border-gray-700 hover:border-orange-500 transition-colors">
              <CardHeader>
                <div className="flex items-center gap-3 mb-2">
                  <Icon className="h-6 w-6 text-orange-500" />
                  <CardTitle className="text-white">{section.title}</CardTitle>
                </div>
                <p className="text-sm text-gray-400">{section.description}</p>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 mb-4">
                  {section.features.map((feature) => (
                    <li key={feature} className="flex items-center gap-2 text-sm text-gray-300">
                      <span className="text-orange-500">•</span>
                      <span>{feature}</span>
                    </li>
                  ))}
                </ul>
                <Link
                  href={section.href}
                  className="inline-flex items-center gap-2 text-sm text-orange-500 hover:text-orange-400 transition-colors"
                >
                  Access <ArrowRight className="h-4 w-4" />
                </Link>
              </CardContent>
            </Card>
          );
        })}
      </div>
    </div>
  );
}