'use client'

import { motion } from 'framer-motion'
import { Language, PitchFunding } from '@/lib/types'
import { t } from '@/lib/i18n'
import GradientText from '../ui/GradientText'
import FadeInView from '../ui/FadeInView'
import AnimatedCounter from '../ui/AnimatedCounter'
import GlassCard from '../ui/GlassCard'
import { Target, Calendar, FileText, Building2, Users, Landmark, TrendingUp } from 'lucide-react'
import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from 'recharts'

interface TheAskSlideProps {
  lang: Language
  funding: PitchFunding
}

const COLORS = ['#6366f1', '#a78bfa', '#60a5fa', '#34d399', '#fbbf24', '#f87171']

const FUNDING_TIMELINE = [
  {
    month: 'Aug 2026',
    amount: 25000,
    icon: Building2,
    color: '#6366f1',
    label_de: 'Stammkapital',
    label_en: 'Share Capital',
    desc_de: 'GmbH-Gruendung',
    desc_en: 'GmbH Founding',
  },
  {
    month: 'Sep 2026',
    amount: 25000,
    icon: Users,
    color: '#a78bfa',
    label_de: 'Angel-Runde',
    label_en: 'Angel Round',
    desc_de: '5% Anteile',
    desc_en: '5% Equity',
  },
  {
    month: 'Okt 2026',
    amount: 200000,
    icon: Landmark,
    color: '#60a5fa',
    label_de: 'Wandeldarlehen',
    label_en: 'Convertible Note',
    desc_de: '40k Investor + 160k L-Bank',
    desc_en: '40k Investor + 160k L-Bank',
  },
  {
    month: 'Jul 2027',
    amount: 1000000,
    icon: TrendingUp,
    color: '#34d399',
    label_de: 'Series A',
    label_en: 'Series A',
    desc_de: 'Skalierungskapital',
    desc_en: 'Growth Capital',
  },
]

export default function TheAskSlide({ lang, funding }: TheAskSlideProps) {
  const i = t(lang)
  const useOfFunds = funding?.use_of_funds || []

  const pieData = useOfFunds.map((item) => ({
    name: lang === 'de' ? item.label_de : item.label_en,
    value: item.percentage,
  }))

  const totalFunding = 1250000

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

      {/* Main Number */}
      <FadeInView delay={0.2} className="text-center mb-8">
        <motion.div
          initial={{ scale: 0.5, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          transition={{ delay: 0.4, type: 'spring', stiffness: 200 }}
        >
          <p className="text-5xl md:text-7xl font-bold text-white mb-1">
            <AnimatedCounter target={1.25} suffix="M" duration={2000} decimals={2} />
            <span className="text-2xl md:text-3xl text-white/50 ml-2">EUR</span>
          </p>
          <p className="text-sm text-white/40">
            {lang === 'de' ? 'Gestaffelte Finanzierung 2026-2027' : 'Staged Funding 2026-2027'}
          </p>
        </motion.div>
      </FadeInView>

      {/* Funding Timeline */}
      <FadeInView delay={0.4} className="mb-8">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
          {FUNDING_TIMELINE.map((event, idx) => {
            const Icon = event.icon
            return (
              <motion.div
                key={idx}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.5 + idx * 0.15 }}
              >
                <GlassCard delay={0} className="p-4 text-center h-full">
                  <Icon className="w-5 h-5 mx-auto mb-2" style={{ color: event.color }} />
                  <p className="text-xs text-white/40 mb-1">{event.month}</p>
                  <p className="text-lg font-bold text-white mb-0.5">
                    {event.amount >= 1000000
                      ? `${(event.amount / 1000000).toFixed(0)}M`
                      : `${(event.amount / 1000).toFixed(0)}k`}
                  </p>
                  <p className="text-xs font-medium text-white/70">
                    {lang === 'de' ? event.label_de : event.label_en}
                  </p>
                  <p className="text-[10px] text-white/30 mt-0.5">
                    {lang === 'de' ? event.desc_de : event.desc_en}
                  </p>
                </GlassCard>
              </motion.div>
            )
          })}
        </div>
      </FadeInView>

      {/* Details Row */}
      <div className="grid md:grid-cols-3 gap-3 mb-6">
        <GlassCard delay={0.8} className="text-center p-4">
          <FileText className="w-5 h-5 text-indigo-400 mx-auto mb-2" />
          <p className="text-xs text-white/40 mb-1">{i.theAsk.instrument}</p>
          <p className="text-sm font-bold text-white">{funding?.instrument || 'Stammkapital + Wandeldarlehen + Equity'}</p>
        </GlassCard>
        <GlassCard delay={0.9} className="text-center p-4">
          <Calendar className="w-5 h-5 text-purple-400 mx-auto mb-2" />
          <p className="text-xs text-white/40 mb-1">{i.theAsk.targetDate}</p>
          <p className="text-sm font-bold text-white">
            {lang === 'de' ? 'Aug 2026 — Jul 2027' : 'Aug 2026 — Jul 2027'}
          </p>
        </GlassCard>
        <GlassCard delay={1.0} className="text-center p-4">
          <Target className="w-5 h-5 text-blue-400 mx-auto mb-2" />
          <p className="text-xs text-white/40 mb-1">{lang === 'de' ? 'Runway' : 'Runway'}</p>
          <p className="text-sm font-bold text-white">36+ {lang === 'de' ? 'Monate' : 'Months'}</p>
        </GlassCard>
      </div>

      {/* Use of Funds */}
      <FadeInView delay={1.1}>
        <GlassCard hover={false} className="p-5">
          <h3 className="text-base font-semibold text-white mb-3 text-center">
            {i.theAsk.useOfFunds} (1,25 Mio. EUR)
          </h3>
          <div className="flex flex-col md:flex-row items-center gap-6">
            {/* Pie Chart */}
            <div className="w-40 h-40">
              <ResponsiveContainer width="100%" height="100%">
                <PieChart>
                  <Pie
                    data={pieData}
                    cx="50%"
                    cy="50%"
                    innerRadius={45}
                    outerRadius={70}
                    dataKey="value"
                    stroke="none"
                  >
                    {pieData.map((_, idx) => (
                      <Cell key={idx} fill={COLORS[idx % COLORS.length]} />
                    ))}
                  </Pie>
                  <Tooltip
                    contentStyle={{
                      background: 'rgba(10, 10, 26, 0.9)',
                      border: '1px solid rgba(255,255,255,0.1)',
                      borderRadius: 8,
                      color: '#fff',
                      fontSize: 12,
                    }}
                    formatter={(value: number) => `${value}%`}
                  />
                </PieChart>
              </ResponsiveContainer>
            </div>

            {/* Legend */}
            <div className="flex-1 space-y-2">
              {useOfFunds.map((item, idx) => (
                <div key={idx} className="flex items-center gap-3">
                  <div className="w-2.5 h-2.5 rounded-full flex-shrink-0" style={{ backgroundColor: COLORS[idx] }} />
                  <span className="flex-1 text-sm text-white/70">
                    {lang === 'de' ? item.label_de : item.label_en}
                  </span>
                  <span className="text-sm font-bold text-white">{item.percentage}%</span>
                  <span className="text-xs text-white/30">
                    {((totalFunding * item.percentage) / 100).toLocaleString('de-DE')} EUR
                  </span>
                </div>
              ))}
            </div>
          </div>
        </GlassCard>
      </FadeInView>
    </div>
  )
}