'use client'

import { useState } from 'react'
import { Language, PitchFinancial } from '@/lib/types'
import { t, formatEur } from '@/lib/i18n'
import GradientText from '../ui/GradientText'
import FadeInView from '../ui/FadeInView'
import FinancialChart from '../ui/FinancialChart'
import FinancialSliders from '../ui/FinancialSliders'
import GlassCard from '../ui/GlassCard'
import AnimatedCounter from '../ui/AnimatedCounter'

interface FinancialsSlideProps {
  lang: Language
  financials: PitchFinancial[]
}

export default function FinancialsSlide({ lang, financials }: FinancialsSlideProps) {
  const i = t(lang)
  const [growthRate, setGrowthRate] = useState(100)
  const [churnRate, setChurnRate] = useState(5)
  const [arpu, setArpu] = useState(500)

  const growthMultiplier = growthRate / 100
  const lastYear = financials[financials.length - 1]

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

      {/* Key Numbers */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
        <GlassCard delay={0.2} className="p-4 text-center">
          <p className="text-xs text-white/40 mb-1">{i.financials.arr} 2030</p>
          <p className="text-xl font-bold text-white">
            <AnimatedCounter
              target={Math.round((lastYear?.arr_eur || 0) * growthMultiplier / 1_000_000)}
              suffix={lang === 'de' ? ' Mio.' : 'M'}
              duration={1200}
            />
          </p>
        </GlassCard>
        <GlassCard delay={0.25} className="p-4 text-center">
          <p className="text-xs text-white/40 mb-1">{i.financials.customers} 2030</p>
          <p className="text-xl font-bold text-white">
            <AnimatedCounter target={Math.round((lastYear?.customers_count || 0) * growthMultiplier)} duration={1200} />
          </p>
        </GlassCard>
        <GlassCard delay={0.3} className="p-4 text-center">
          <p className="text-xs text-white/40 mb-1">{i.financials.employees} 2030</p>
          <p className="text-xl font-bold text-white">{lastYear?.employees_count || 0}</p>
        </GlassCard>
        <GlassCard delay={0.35} className="p-4 text-center">
          <p className="text-xs text-white/40 mb-1">{i.financials.mrr} 2030</p>
          <p className="text-xl font-bold text-white">
            <AnimatedCounter
              target={Math.round((lastYear?.mrr_eur || 0) * growthMultiplier / 1_000)}
              suffix="k"
              duration={1200}
            />
          </p>
        </GlassCard>
      </div>

      <div className="grid md:grid-cols-3 gap-6">
        {/* Chart */}
        <FadeInView delay={0.4} className="md:col-span-2">
          <GlassCard hover={false} className="p-4">
            <FinancialChart financials={financials} lang={lang} growthMultiplier={growthMultiplier} />
          </GlassCard>
        </FadeInView>

        {/* Sliders */}
        <FadeInView delay={0.5}>
          <FinancialSliders
            growthRate={growthRate}
            churnRate={churnRate}
            arpu={arpu}
            onGrowthChange={setGrowthRate}
            onChurnChange={setChurnRate}
            onArpuChange={setArpu}
            lang={lang}
          />
        </FadeInView>
      </div>
    </div>
  )
}