'use client'

import { Language } from '@/lib/types'
import ProjectionFooter from '../ui/ProjectionFooter'
import GradientText from '../ui/GradientText'
import FadeInView from '../ui/FadeInView'
import GlassCard from '../ui/GlassCard'
import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from 'recharts'
import { TrendingUp, Users, Briefcase, Target } from 'lucide-react'

interface CapTableSlideProps {
  lang: Language
}

const COLORS = ['#6366f1', '#8b5cf6', '#f59e0b', '#94a3b8']

export default function CapTableSlide({ lang }: CapTableSlideProps) {
  const de = lang === 'de'

  const capTableData = [
    { name: 'Benjamin Bönisch (CEO)', value: 37.5, color: '#6366f1' },
    { name: 'Sharang Parnerkar (CTO)', value: 37.5, color: '#8b5cf6' },
    { name: de ? 'Pre-Seed Investor' : 'Pre-Seed Investor', value: 19.6, color: '#f59e0b' },
    { name: 'ESOP Pool', value: 5.4, color: '#94a3b8' },
  ]

  return (
    <div className="max-w-6xl mx-auto">
      <FadeInView className="text-center mb-6">
        <h2 className="text-3xl md:text-4xl font-bold mb-2">
          <GradientText>{de ? 'Investition & Cap Table' : 'Investment & Cap Table'}</GradientText>
        </h2>
        <p className="text-sm text-white/50 max-w-2xl mx-auto">
          {de ? '4 Mio. EUR Pre-Money Bewertung · 1.000.000 EUR Pre-Seed · Gründung Aug 2026' : 'EUR 4M pre-money valuation · EUR 1,000,000 pre-seed · Founding Aug 2026'}
        </p>
      </FadeInView>

      <div className="grid md:grid-cols-2 gap-6 mb-6">
        {/* Cap Table Pie Chart */}
        <FadeInView delay={0.1}>
          <GlassCard hover={false} className="p-5">
            <h3 className="text-sm font-bold text-indigo-400 uppercase tracking-wider mb-4 text-center">
              {de ? 'Anteilsverteilung nach Pre-Seed' : 'Share Distribution Post Pre-Seed'}
            </h3>
            <div className="flex items-center gap-6">
              <div className="w-48 h-48">
                <ResponsiveContainer width="100%" height="100%">
                  <PieChart>
                    <Pie data={capTableData} cx="50%" cy="50%" innerRadius={45} outerRadius={75} dataKey="value" stroke="none">
                      {capTableData.map((entry, idx) => (
                        <Cell key={idx} fill={entry.color} />
                      ))}
                    </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>
              <div className="flex-1 space-y-2">
                {capTableData.map((entry, idx) => (
                  <div key={idx} className="flex items-center gap-2">
                    <div className="w-3 h-3 rounded-full shrink-0" style={{ backgroundColor: entry.color }} />
                    <span className="text-xs text-white/70 flex-1">{entry.name}</span>
                    <span className="text-xs font-bold text-white/80 font-mono">{entry.value}%</span>
                  </div>
                ))}
              </div>
            </div>
          </GlassCard>
        </FadeInView>

        {/* Investment Details */}
        <FadeInView delay={0.15}>
          <GlassCard hover={false} className="p-5">
            <h3 className="text-sm font-bold text-amber-400 uppercase tracking-wider mb-4">
              {de ? 'Pre-Seed Runde' : 'Pre-Seed Round'}
            </h3>
            <div className="space-y-3">
              {[
                { label: 'Pre-Money Bewertung', value: '4.000.000 EUR', icon: Target },
                { label: 'Investment', value: '1.000.000 EUR', icon: Briefcase },
                { label: 'Post-Money', value: '5.000.000 EUR', icon: TrendingUp },
                { label: de ? 'Investoranteil' : 'Investor Share', value: '19,6%', icon: Users },
              ].map((item, idx) => {
                const Icon = item.icon
                return (
                  <div key={idx} className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <Icon className="w-4 h-4 text-white/30" />
                      <span className="text-xs text-white/60">{item.label}</span>
                    </div>
                    <span className="text-sm font-bold text-white/80 font-mono">{item.value}</span>
                  </div>
                )
              })}
            </div>
          </GlassCard>
        </FadeInView>
      </div>


      {/* ESOP + INVEST + Series A */}
      <div className="grid md:grid-cols-3 gap-4 mb-6">
        <FadeInView delay={0.3}>
          <GlassCard hover={false} className="p-4">
            <h3 className="text-xs font-bold text-cyan-400 uppercase tracking-wider mb-2">
              ESOP {de ? '(Mitarbeiterbeteiligung)' : '(Employee Stock Option Plan)'}
            </h3>
            <p className="text-xs text-white/60 leading-relaxed">
              {de
                ? '5,4% ESOP-Pool für Schlüsselmitarbeiter. Vesting über 4 Jahre mit 1 Jahr Cliff. Besonders wichtig für frühe Hires (Security Engineer, CE-Ingenieur, Channel Manager), die unter Marktgehalt einsteigen. ESOP wird aus Gründeranteilen gestellt.'
                : '5.4% ESOP pool for key employees. 4-year vesting with 1-year cliff. Especially important for early hires (security engineer, CE engineer, channel manager) who join below market salary. ESOP comes from founder shares.'}
            </p>
          </GlassCard>
        </FadeInView>

        <FadeInView delay={0.35}>
          <GlassCard hover={false} className="p-4 border border-emerald-500/20">
            <h3 className="text-xs font-bold text-emerald-400 uppercase tracking-wider mb-2">
              INVEST {de ? '(Staatlicher Zuschuss)' : '(Government Subsidy)'}
            </h3>
            <p className="text-xs text-white/60 leading-relaxed mb-2">
              {de
                ? 'Das BAFA-Programm "INVEST — Zuschuss für Wagniskapital" erstattet Business Angels bis zu 15% ihres Investments als steuerfreien Zuschuss plus 25% Exit-Zuschuss.'
                : 'The BAFA program "INVEST — Venture Capital Grant" reimburses business angels up to 15% of their investment as a tax-free grant plus 25% exit grant.'}
            </p>
            <div className="space-y-1 text-xs">
              <div className="flex justify-between"><span className="text-white/40">{de ? 'Erwerbszuschuss' : 'Acquisition grant'}</span><span className="text-emerald-300 font-bold">15%</span></div>
              <div className="flex justify-between"><span className="text-white/40">{de ? 'Exit-Zuschuss' : 'Exit grant'}</span><span className="text-emerald-300 font-bold">25%</span></div>
              <div className="flex justify-between"><span className="text-white/40">{de ? 'Max. pro Investor/Jahr' : 'Max. per investor/yr'}</span><span className="text-white/60">500.000 EUR</span></div>
              <div className="flex justify-between"><span className="text-white/40">{de ? 'Haltefrist' : 'Holding period'}</span><span className="text-white/60">{de ? '3 Jahre' : '3 years'}</span></div>
            </div>
          </GlassCard>
        </FadeInView>

        <FadeInView delay={0.4}>
          <GlassCard hover={false} className="p-4">
            <h3 className="text-xs font-bold text-blue-400 uppercase tracking-wider mb-2">
              {de ? 'Series A Ausblick (Optional)' : 'Series A Outlook (Optional)'}
            </h3>
            <div className="space-y-1.5 text-xs">
              <div className="flex justify-between"><span className="text-white/40">{de ? 'Bewertung' : 'Valuation'}</span><span className="text-white/70 font-mono">15-25 Mio. EUR</span></div>
              <div className="flex justify-between"><span className="text-white/40">{de ? 'Volumen' : 'Round size'}</span><span className="text-white/70 font-mono">5-15 Mio. EUR</span></div>
              <div className="flex justify-between"><span className="text-white/40">{de ? 'Verwässerung' : 'Dilution'}</span><span className="text-white/70 font-mono">20-25%</span></div>
              <div className="flex justify-between"><span className="text-white/40">{de ? 'Gründer danach' : 'Founders post'}</span><span className="text-white/70 font-mono">~55-60%</span></div>
              <p className="text-[10px] text-white/30 mt-2 italic">
                {de ? 'Bei 3M+ ARR und 100+ Kunden' : 'At EUR 3M+ ARR and 100+ customers'}
              </p>
            </div>
          </GlassCard>
        </FadeInView>
      </div>
      <ProjectionFooter lang={lang} />
    </div>
  )
}