'use client'

import { motion } from 'framer-motion'
import { Language, PitchProduct } from '@/lib/types'
import { t } from '@/lib/i18n'
import GradientText from '../ui/GradientText'
import FadeInView from '../ui/FadeInView'
import GlassCard from '../ui/GlassCard'
import { DollarSign, Repeat, TrendingUp } from 'lucide-react'

interface BusinessModelSlideProps {
  lang: Language
  products: PitchProduct[]
}

export default function BusinessModelSlide({ lang, products }: BusinessModelSlideProps) {
  const i = t(lang)

  return (
    <div>
      <FadeInView className="text-center mb-12">
        <h2 className="text-4xl md:text-5xl font-bold mb-3">
          <GradientText>{i.businessModel.title}</GradientText>
        </h2>
        <p className="text-lg text-white/50 max-w-2xl mx-auto">{i.businessModel.subtitle}</p>
      </FadeInView>

      {/* Key Metrics */}
      <div className="grid md:grid-cols-3 gap-4 mb-8">
        <GlassCard delay={0.2} className="text-center">
          <Repeat className="w-6 h-6 text-indigo-400 mx-auto mb-2" />
          <p className="text-sm text-white/50 mb-1">{i.businessModel.recurringRevenue}</p>
          <p className="text-2xl font-bold text-white">100%</p>
          <p className="text-xs text-white/30">SaaS / Subscription</p>
        </GlassCard>
        <GlassCard delay={0.3} className="text-center">
          <DollarSign className="w-6 h-6 text-green-400 mx-auto mb-2" />
          <p className="text-sm text-white/50 mb-1">{i.businessModel.margin}</p>
          <p className="text-2xl font-bold text-white">&gt;70%</p>
          <p className="text-xs text-white/30">{lang === 'de' ? 'nach Amortisation' : 'post amortization'}</p>
        </GlassCard>
        <GlassCard delay={0.4} className="text-center">
          <TrendingUp className="w-6 h-6 text-purple-400 mx-auto mb-2" />
          <p className="text-sm text-white/50 mb-1">{i.businessModel.amortization}</p>
          <p className="text-2xl font-bold text-white">24 {i.businessModel.months}</p>
          <p className="text-xs text-white/30">{lang === 'de' ? 'Hardware-Amortisation' : 'Hardware Amortization'}</p>
        </GlassCard>
      </div>

      {/* Unit Economics per Product */}
      <FadeInView delay={0.5}>
        <h3 className="text-lg font-semibold mb-4 text-white/70">{i.businessModel.unitEconomics}</h3>
        <div className="grid md:grid-cols-3 gap-4">
          {products.map((p, idx) => {
            const amort = p.hardware_cost_eur > 0 ? Math.round(p.hardware_cost_eur / 24) : 0
            const monthlyMargin = p.monthly_price_eur - amort - (p.operating_cost_eur > 0 ? p.operating_cost_eur : 0)
            const marginPct = Math.round((monthlyMargin / p.monthly_price_eur) * 100)

            return (
              <motion.div
                key={p.id}
                initial={{ opacity: 0, rotateY: -15 }}
                animate={{ opacity: 1, rotateY: 0 }}
                transition={{ delay: 0.6 + idx * 0.15 }}
                className="bg-white/[0.05] border border-white/10 rounded-2xl p-5"
              >
                <h4 className="font-bold text-white mb-3">{p.name}</h4>
                <div className="space-y-2 text-sm">
                  <div className="flex justify-between">
                    <span className="text-white/50">{lang === 'de' ? 'Monatspreis' : 'Monthly Price'}</span>
                    <span className="text-white font-medium">{p.monthly_price_eur} EUR</span>
                  </div>
                  {p.hardware_cost_eur > 0 && (
                    <div className="flex justify-between">
                      <span className="text-white/50">{i.businessModel.hardwareCost}</span>
                      <span className="text-white/70">-{amort} EUR/Mo</span>
                    </div>
                  )}
                  {p.operating_cost_eur > 0 && (
                    <div className="flex justify-between">
                      <span className="text-white/50">{i.businessModel.operatingCost}</span>
                      <span className="text-white/70">-{p.operating_cost_eur.toLocaleString('de-DE')} EUR/Mo</span>
                    </div>
                  )}
                  <div className="border-t border-white/10 pt-2 flex justify-between">
                    <span className="text-white/50">{i.businessModel.margin}</span>
                    <span className={`font-bold ${marginPct > 0 ? 'text-green-400' : 'text-red-400'}`}>
                      {marginPct > 0 ? '+' : ''}{monthlyMargin} EUR ({marginPct}%)
                    </span>
                  </div>
                </div>
              </motion.div>
            )
          })}
        </div>
      </FadeInView>
    </div>
  )
}