'use client'

import Link from 'next/link'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Star, Verified } from 'lucide-react'

interface ProductCardProps {
  product: {
    id: string
    name: string
    slug: string
    category: string
    shortDescription?: string
    featured?: boolean
    iconUrl?: string
    publisher?: {
      displayName: string
      verified?: boolean
    }
    averageRating?: number
    reviewCount?: number
  }
}

const CATEGORY_LABELS: Record<string, string> = {
  COMPUTE: 'Compute',
  NETWORK_INFRA: 'Network',
  BLOCKCHAIN_STACK: 'Blockchain',
  BLOCKCHAIN_TOOLS: 'Tools',
  FINANCIAL_MESSAGING: 'Financial',
  INTERNET_REGISTRY: 'Registry',
  AI_LLM_AGENT: 'AI',
}

export function ProductCard({ product }: ProductCardProps) {
  return (
    <Card className="hover:shadow-lg transition-shadow">
      <CardHeader>
        <div className="flex items-start justify-between mb-2">
          <div className="flex-1">
            <CardTitle className="text-xl mb-1">
              <Link
                href={`/marketplace/products/${product.slug}`}
                className="hover:underline"
              >
                {product.name}
              </Link>
            </CardTitle>
            <div className="flex items-center gap-2 text-sm text-muted-foreground">
              {product.publisher && (
                <>
                  <span>{product.publisher.displayName}</span>
                  {product.publisher.verified && (
                    <Verified className="h-3 w-3 text-blue-500" />
                  )}
                </>
              )}
            </div>
          </div>
          {product.iconUrl && (
            <img
              src={product.iconUrl}
              alt={product.name}
              className="w-12 h-12 rounded-lg object-cover"
            />
          )}
        </div>
        <div className="flex items-center gap-2 flex-wrap">
          <Badge variant="secondary">
            {CATEGORY_LABELS[product.category] || product.category}
          </Badge>
          {product.featured && <Badge variant="default">Featured</Badge>}
        </div>
      </CardHeader>
      <CardContent>
        <CardDescription className="mb-4 min-h-[3rem]">
          {product.shortDescription || 'No description available'}
        </CardDescription>
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-1">
            {product.averageRating !== undefined && product.averageRating > 0 && (
              <>
                <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                <span className="text-sm font-medium">
                  {product.averageRating.toFixed(1)}
                </span>
                {product.reviewCount !== undefined && product.reviewCount > 0 && (
                  <span className="text-sm text-muted-foreground">
                    ({product.reviewCount})
                  </span>
                )}
              </>
            )}
          </div>
          <Link href={`/marketplace/products/${product.slug}`}>
            <Button size="sm">View Details</Button>
          </Link>
        </div>
      </CardContent>
    </Card>
  )
}

