import { Link } from 'react-router-dom'
import { getToken } from '../api/client'
import type { Drink } from '../api/types'
import { RatingStars } from './RatingStars'

const categoryIcons: Record<string, string> = {
  wine: '🍷',
  beer: '🍺',
  spirit: '🥃',
}

const categoryLabels: Record<string, string> = {
  wine: 'Vin',
  beer: 'Bière',
  spirit: 'Spiritueux',
}

function getSubtitle(drink: Drink): string {
  const parts: string[] = []
  if (drink.category === 'wine') {
    if (drink.wine_color) {
      const colors: Record<string, string> = {
        red: 'Rouge',
        white: 'Blanc',
        rose: 'Rosé',
        sparkling: 'Effervescent',
      }
      parts.push(colors[drink.wine_color] || drink.wine_color)
    }
    if (drink.vintage) parts.push(String(drink.vintage))
    if (drink.region) parts.push(drink.region)
  } else if (drink.category === 'beer') {
    if (drink.beer_style) parts.push(drink.beer_style.toUpperCase())
    if (drink.brewery) parts.push(drink.brewery)
  } else if (drink.category === 'spirit') {
    if (drink.spirit_type) parts.push(drink.spirit_type)
    if (drink.age_years) parts.push(`${drink.age_years} ans`)
    if (drink.distillery) parts.push(drink.distillery)
  }
  return parts.join(' · ')
}

export function DrinkCard({ drink }: { drink: Drink }) {
  const subtitle = getSubtitle(drink)

  return (
    <Link to={`/drink/${drink.id}`} className="card group block">
      <div className="aspect-[3/4] relative overflow-hidden bg-cellar-surface">
        {drink.image_path ? (
          <img
            src={`/api/drinks/${drink.id}/image?token=${getToken()}`}
            alt={drink.name}
            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
          />
        ) : (
          <div className="w-full h-full flex items-center justify-center text-6xl opacity-30 group-hover:opacity-50 transition-opacity">
            {categoryIcons[drink.category]}
          </div>
        )}

        <div className="absolute top-2 right-2">
          <span className="bg-cellar-bg/80 backdrop-blur-sm text-xs font-medium px-2 py-1 rounded-full border border-cellar-border/50">
            {categoryIcons[drink.category]} {categoryLabels[drink.category]}
          </span>
        </div>

        {drink.rating && (
          <div className="absolute bottom-2 left-2">
            <span className="bg-cellar-bg/80 backdrop-blur-sm text-cellar-gold text-sm font-semibold px-2 py-0.5 rounded-full">
              ★ {drink.rating.toFixed(1)}
            </span>
          </div>
        )}
      </div>

      <div className="p-3">
        <h3 className="font-semibold text-cellar-cream truncate group-hover:text-cellar-gold transition-colors">
          {drink.name}
        </h3>
        {subtitle && (
          <p className="text-sm text-cellar-muted truncate mt-0.5">
            {subtitle}
          </p>
        )}
        {!drink.rating && (
          <div className="mt-1">
            <RatingStars onRate={() => {}} rating={null} readonly size="sm" />
          </div>
        )}
      </div>
    </Link>
  )
}
