import { PublicLayout } from '@/components/layout/public-layout'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import Link from 'next/link'
import { Button } from '@/components/ui/button'
import { Globe, Star, TrendingUp } from 'lucide-react'

export default function APIMarketplacePage() {
  const apis = [
    {
      id: '1',
      name: 'Weather API',
      provider: 'WeatherCorp',
      description: 'Real-time weather data and forecasts',
      rating: 4.7,
      requests: '10M+',
      category: 'Data',
      pricing: 'Free tier available',
    },
    {
      id: '2',
      name: 'Payment Gateway',
      provider: 'PayFlow',
      description: 'Secure payment processing API',
      rating: 4.9,
      requests: '50M+',
      category: 'Payment',
      pricing: 'Pay per transaction',
    },
    {
      id: '3',
      name: 'AI Image Processing',
      provider: 'VisionAI',
      description: 'Advanced image recognition and processing',
      rating: 4.6,
      requests: '5M+',
      category: 'AI/ML',
      pricing: 'Usage-based',
    },
  ]

  return (
    <PublicLayout>
      <div className="min-h-screen bg-studio-black py-24 px-4">
        <div className="mx-auto max-w-7xl">
          <div className="mb-12">
            <h1 className="mb-4 text-5xl font-bold text-white">API Marketplace</h1>
            <p className="text-xl text-gray-400">
              Discover and integrate third-party APIs into your applications
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {apis.map((api) => (
              <Card key={api.id} className="hover:border-phoenix-fire transition-colors">
                <CardHeader>
                  <div className="flex items-start justify-between mb-2">
                    <Globe className="h-8 w-8 text-phoenix-fire" />
                    <span className="px-2 py-1 text-xs bg-studio-dark text-gray-400 rounded">
                      {api.category}
                    </span>
                  </div>
                  <CardTitle className="text-white">{api.name}</CardTitle>
                  <CardDescription className="text-gray-400">
                    by {api.provider}
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-gray-300 mb-4">{api.description}</p>
                  
                  <div className="space-y-2 mb-4">
                    <div className="flex items-center gap-2 text-sm text-gray-400">
                      <Star className="h-4 w-4 text-yellow-400 fill-yellow-400" />
                      <span>{api.rating}</span>
                    </div>
                    <div className="flex items-center gap-2 text-sm text-gray-400">
                      <TrendingUp className="h-4 w-4" />
                      <span>{api.requests} requests/month</span>
                    </div>
                    <p className="text-xs text-gray-500">{api.pricing}</p>
                  </div>

                  <div className="flex gap-2">
                    <Button variant="outline" className="flex-1" asChild>
                      <Link href={`/marketplace/api/${api.id}`}>
                        View Docs
                      </Link>
                    </Button>
                    <Button variant="phoenix" asChild>
                      <Link href={`/marketplace/api/${api.id}/subscribe`}>
                        Subscribe
                      </Link>
                    </Button>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>

          <div className="mt-12 text-center">
            <h2 className="mb-4 text-2xl font-bold text-white">Publish Your API</h2>
            <p className="mb-6 text-gray-400">
              Monetize your API and reach developers worldwide
            </p>
            <Button variant="phoenix" size="lg" asChild>
              <Link href="/developers/api/publish">Publish API</Link>
            </Button>
          </div>
        </div>
      </div>
    </PublicLayout>
  )
}

