'use client'

import { Language } from '@/lib/types'
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 · 975.000 EUR Pre-Seed · Gründung Jul/Aug 2026' : 'EUR 4M pre-money valuation · EUR 975,000 pre-seed · Founding Jul/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: '975.000 EUR', icon: Briefcase },
                { label: 'Post-Money', value: '4.975.000 EUR', icon: TrendingUp },
                { label: de ? 'Investoranteil' : 'Investor Share', value: '19,6%', icon: Users },
                { label: 'Instrument', value: de ? 'Stammkapital + Wandeldarlehen' : 'Equity + Convertible', icon: Briefcase },
              ].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>

      {/* Gründergehälter + Gewinnverwendung */}
      <div className="grid md:grid-cols-2 gap-6 mb-6">
        <FadeInView delay={0.2}>
          <GlassCard hover={false} className="p-5">
            <h3 className="text-sm font-bold text-emerald-400 uppercase tracking-wider mb-3">
              {de ? 'Gründergehälter' : 'Founder Salaries'}
            </h3>
            <p className="text-xs text-white/50 mb-3">
              {de
                ? 'Bewusst unter Markt — zeigt Investoren Skin in the Game und Kapitaldisziplin.'
                : 'Deliberately below market — shows investors skin in the game and capital discipline.'}
            </p>
            <div className="space-y-2">
              {[
                { period: '2026 (Aug–Dez)', salary: de ? '0 EUR (unbezahlt)' : 'EUR 0 (unpaid)', note: de ? 'Gründungsphase' : 'Founding phase' },
                { period: '2027', salary: '7.000 EUR/Mo', note: de ? 'Unter Marktniveau' : 'Below market' },
                { period: '2028', salary: '~8.000 EUR/Mo', note: de ? 'Product-Market Fit' : 'Product-market fit' },
                { period: '2029+', salary: '~9.100 EUR/Mo', note: de ? 'Break-Even erreicht' : 'Break-even reached' },
              ].map((item, idx) => (
                <div key={idx} className="flex items-center justify-between text-xs">
                  <span className="text-white/40 min-w-[100px]">{item.period}</span>
                  <span className="text-white/70 font-mono">{item.salary}</span>
                  <span className="text-white/30 text-[10px]">{item.note}</span>
                </div>
              ))}
            </div>
          </GlassCard>
        </FadeInView>

        <FadeInView delay={0.25}>
          <GlassCard hover={false} className="p-5">
            <h3 className="text-sm font-bold text-purple-400 uppercase tracking-wider mb-3">
              {de ? 'Gewinnverwendung' : 'Use of Profits'}
            </h3>
            <p className="text-xs text-white/50 mb-3">
              {de
                ? '100% Reinvestition in Wachstum — Standard bei schnell wachsenden SaaS-Startups.'
                : '100% reinvestment in growth — standard for fast-growing SaaS startups.'}
            </p>
            <div className="space-y-2">
              {(de ? [
                'Keine Gewinnausschüttung bis mindestens Series A',
                'Jeder Euro in Wachstum bringt 3-5x Return in 2-3 Jahren',
                'Investition in: Engineering, Vertrieb, EU-Expansion',
                'Gründer partizipieren über Equity-Wertsteigerung, nicht Gehalt',
              ] : [
                'No profit distribution until at least Series A',
                'Every euro in growth returns 3-5x in 2-3 years',
                'Investment in: engineering, sales, EU expansion',
                'Founders participate through equity appreciation, not salary',
              ]).map((item, idx) => (
                <p key={idx} className="text-xs text-white/60 pl-3 relative">
                  <span className="absolute left-0 top-1 w-1.5 h-1.5 rounded-full bg-purple-400/60" />
                  {item}
                </p>
              ))}
            </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 20% ihres Investments als nicht rückzahlbaren Zuschuss.'
                : 'The BAFA program "INVEST — Venture Capital Grant" reimburses business angels 20% of their investment as a non-repayable grant.'}
            </p>
            <div className="space-y-1 text-xs">
              <div className="flex justify-between"><span className="text-white/40">{de ? 'Zuschuss' : 'Grant'}</span><span className="text-emerald-300 font-bold">20%</span></div>
              <div className="flex justify-between"><span className="text-white/40">{de ? 'Bei 975k Investment' : 'On EUR 975k'}</span><span className="text-emerald-300 font-bold">195.000 EUR</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 (Q1/Q2 2028)' : 'Series A Outlook (Q1/Q2 2028)'}
            </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>
    </div>
  )
}