'use client'

import { motion } from 'framer-motion'
import { PitchProduct, Language } from '@/lib/types'
import { t } from '@/lib/i18n'
import { Check } from 'lucide-react'
import ProductShowcase from './ProductShowcase'

interface PricingCardProps {
  product: PitchProduct
  lang: Language
  delay?: number
}

export default function PricingCard({ product, lang, delay = 0 }: PricingCardProps) {
  const i = t(lang)
  const productType = product.name.includes('Mini')
    ? 'mini'
    : product.name.includes('Studio')
    ? 'studio'
    : 'cloud'

  const features = lang === 'de' ? product.features_de : product.features_en

  return (
    <motion.div
      initial={{ opacity: 0, y: 40, rotateY: -10 }}
      animate={{ opacity: 1, y: 0, rotateY: 0 }}
      transition={{ duration: 0.6, delay }}
      className={`
        relative bg-white/[0.08] backdrop-blur-xl
        border rounded-3xl p-6
        transition-all duration-300
        ${product.is_popular
          ? 'border-indigo-500/50 shadow-lg shadow-indigo-500/10'
          : 'border-white/10 hover:border-white/20'
        }
      `}
    >
      {product.is_popular && (
        <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-4 py-1 bg-indigo-500 rounded-full text-xs font-semibold">
          {i.product.popular}
        </div>
      )}

      <div className="flex flex-col items-center text-center">
        <ProductShowcase type={productType} className="mb-4" />

        <h3 className="text-xl font-bold mb-1">{product.name}</h3>
        <p className="text-white/50 text-sm mb-4">{product.hardware}</p>

        <div className="mb-1">
          <span className="text-4xl font-bold">{product.monthly_price_eur}</span>
          <span className="text-white/50 text-lg ml-1">EUR</span>
        </div>
        <p className="text-white/40 text-sm mb-6">{i.product.monthly}</p>

        <div className="w-full border-t border-white/10 pt-4 mb-4">
          <div className="flex justify-between text-sm mb-2">
            <span className="text-white/50">{i.product.llm}</span>
            <span className="font-medium">{product.llm_size}</span>
          </div>
          {product.hardware_cost_eur > 0 && (
            <div className="flex justify-between text-sm">
              <span className="text-white/50">{i.product.hardware}</span>
              <span className="font-medium">{product.hardware_cost_eur.toLocaleString('de-DE')} EUR</span>
            </div>
          )}
        </div>

        <ul className="w-full space-y-2">
          {(features || []).map((feature, idx) => (
            <li key={idx} className="flex items-start gap-2 text-sm text-left">
              <Check className="w-4 h-4 text-green-400 shrink-0 mt-0.5" />
              <span className="text-white/70">{feature}</span>
            </li>
          ))}
        </ul>
      </div>
    </motion.div>
  )
}