import Link from 'next/link'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { ArrowLeft, Check } from 'lucide-react'
import { notFound } from 'next/navigation'

// Product catalog with details
const products = {
  'phoenixcore-compute': {
    name: 'PhoenixCore Compute',
    category: 'Compute',
    description: 'Core compute engine powered by Phoenix fire',
    longDescription: 'PhoenixCore Compute delivers high-performance virtual machines and container orchestration with enterprise-grade reliability. Built on our global edge infrastructure, it provides low-latency compute resources across 325+ regions worldwide.',
    features: [
      'High-performance CPUs (AMD EPYC / Intel Xeon)',
      'NVMe storage for ultra-fast I/O',
      'Global edge deployment',
      'Auto-scaling capabilities',
      '99.99% uptime SLA',
      'Blockchain-verified resource tracking',
    ],
    pricing: {
      base: 0.05, // per vCPU hour
      memory: 0.01, // per GB hour
      storage: 0.001, // per GB hour
      currency: 'USD',
    },
    tiers: [
      { name: 'Starter', vcpu: 2, memory: 4, price: 50 },
      { name: 'Professional', vcpu: 8, memory: 16, price: 200 },
      { name: 'Enterprise', vcpu: 32, memory: 64, price: 800 },
    ],
  },
  'sankofaedge-nodes': {
    name: 'SankofaEdge Nodes',
    category: 'Compute',
    description: 'Edge nodes that remember and return data',
    longDescription: 'SankofaEdge Nodes provide low-latency compute at the network edge, bringing your applications closer to users worldwide. With 250+ edge locations, reduce latency and improve user experience.',
    features: [
      '250+ global edge locations',
      'Sub-10ms latency',
      'CDN integration',
      'Edge caching',
      'Regional data residency',
    ],
    pricing: {
      base: 0.03,
      currency: 'USD',
    },
  },
  'okravault-storage': {
    name: 'OkraVault Storage',
    category: 'Storage',
    description: 'Storage for the soul of your data',
    longDescription: 'OkraVault provides secure, scalable object and block storage with enterprise-grade durability. Your data is protected with encryption at rest and in transit, with blockchain-verified integrity.',
    features: [
      'S3-compatible API',
      '99.999999999% durability',
      'Encryption at rest and in transit',
      'Multi-region replication',
      'Versioning and lifecycle policies',
    ],
    pricing: {
      storage: 0.023, // per GB/month
      egress: 0.09, // per GB
      currency: 'USD',
    },
  },
  'firebird-ai-engine': {
    name: 'Firebird AI Engine',
    category: 'AI & Machine Learning',
    description: 'AI that transforms like fire',
    longDescription: 'Firebird AI Engine provides scalable machine learning infrastructure with GPU acceleration, model training, and inference capabilities. Built for enterprise AI workloads.',
    features: [
      'GPU acceleration (NVIDIA A100/H100)',
      'Distributed training',
      'Model serving',
      'Auto-scaling inference',
      'MLOps integration',
    ],
    pricing: {
      training: 2.50, // per GPU hour
      inference: 0.50, // per GPU hour
      currency: 'USD',
    },
  },
}

export async function generateStaticParams() {
  return Object.keys(products).map((slug) => ({ slug }))
}

export default function ProductDetailPage({ params }: { params: { slug: string } }) {
  const product = products[params.slug as keyof typeof products]

  if (!product) {
    notFound()
  }

  return (
    <main className="min-h-screen bg-studio-black">
      {/* Header */}
      <header className="border-b border-studio-medium bg-studio-dark">
        <div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-4">
          <Link href="/" className="text-2xl font-bold text-white">
            <span className="text-sankofa-gold">Sankofa's</span> Phoenix <span className="text-phoenix-fire">Nexus</span> Cloud
          </Link>
          <nav className="flex gap-4">
            <Link href="/" className="text-gray-400 hover:text-white">
              Home
            </Link>
            <Link href="/products" className="text-gray-400 hover:text-white">
              Products
            </Link>
            <Link href="/about" className="text-gray-400 hover:text-white">
              About
            </Link>
          </nav>
        </div>
      </header>

      {/* Breadcrumb */}
      <div className="mx-auto max-w-7xl px-4 py-4">
        <Link
          href="/products"
          className="inline-flex items-center gap-2 text-gray-400 hover:text-white"
        >
          <ArrowLeft className="h-4 w-4" />
          Back to Products
        </Link>
      </div>

      {/* Product Detail */}
      <section className="mx-auto max-w-7xl px-4 py-12">
        <div className="grid gap-8 lg:grid-cols-2">
          {/* Product Info */}
          <div>
            <div className="mb-4">
              <span className="rounded-full bg-phoenix-fire/20 px-3 py-1 text-sm text-phoenix-fire">
                {product.category}
              </span>
            </div>
            <h1 className="mb-4 text-4xl font-bold text-white">{product.name}</h1>
            <p className="mb-6 text-xl text-gray-300">{product.description}</p>
            <p className="mb-8 text-gray-400">{product.longDescription}</p>

            {/* Features */}
            <div className="mb-8">
              <h2 className="mb-4 text-2xl font-bold text-white">Features</h2>
              <ul className="space-y-2">
                {product.features.map((feature, index) => (
                  <li key={index} className="flex items-start gap-2 text-gray-300">
                    <Check className="mt-1 h-5 w-5 flex-shrink-0 text-phoenix-fire" />
                    <span>{feature}</span>
                  </li>
                ))}
              </ul>
            </div>

            {/* Pricing */}
            {product.pricing && (
              <div className="mb-8">
                <h2 className="mb-4 text-2xl font-bold text-white">Pricing</h2>
                <Card className="border-studio-medium bg-studio-dark">
                  <CardHeader>
                    <CardTitle className="text-white">Pay-as-you-go</CardTitle>
                  </CardHeader>
                  <CardContent>
                    {product.pricing.base && (
                      <p className="text-gray-300">
                        Base: ${product.pricing.base.toFixed(3)} per hour
                      </p>
                    )}
                    {product.pricing.storage && (
                      <p className="text-gray-300">
                        Storage: ${product.pricing.storage.toFixed(3)} per GB/month
                      </p>
                    )}
                    {product.pricing.training && (
                      <p className="text-gray-300">
                        Training: ${product.pricing.training.toFixed(2)} per GPU hour
                      </p>
                    )}
                    {product.pricing.inference && (
                      <p className="text-gray-300">
                        Inference: ${product.pricing.inference.toFixed(2)} per GPU hour
                      </p>
                    )}
                  </CardContent>
                </Card>
              </div>
            )}

            {/* Tiers */}
            {product.tiers && (
              <div className="mb-8">
                <h2 className="mb-4 text-2xl font-bold text-white">Pricing Tiers</h2>
                <div className="grid gap-4 md:grid-cols-3">
                  {product.tiers.map((tier, index) => (
                    <Card key={index} className="border-studio-medium bg-studio-dark">
                      <CardHeader>
                        <CardTitle className="text-white">{tier.name}</CardTitle>
                      </CardHeader>
                      <CardContent>
                        <p className="mb-2 text-3xl font-bold text-phoenix-fire">
                          ${tier.price}
                          <span className="text-sm text-gray-400">/month</span>
                        </p>
                        <p className="text-sm text-gray-400">
                          {tier.vcpu} vCPU, {tier.memory}GB RAM
                        </p>
                      </CardContent>
                    </Card>
                  ))}
                </div>
              </div>
            )}

            {/* CTA */}
            <div className="flex gap-4">
              <Button variant="phoenix" size="lg">
                Get Started
              </Button>
              <Button variant="outline" size="lg">
                Contact Sales
              </Button>
            </div>
          </div>

          {/* Sidebar */}
          <div>
            <Card className="border-studio-medium bg-studio-dark">
              <CardHeader>
                <CardTitle className="text-white">Ready to Start?</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <p className="text-gray-400">
                  Start building on Sankofa Phoenix today. No credit card required for free tier.
                </p>
                <Button variant="phoenix" className="w-full" size="lg">
                  Create Account
                </Button>
                <Button variant="outline" className="w-full" size="lg">
                  Schedule Demo
                </Button>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>
    </main>
  )
}

