'use client'

import { Language } from '@/lib/types'
import { t } from '@/lib/i18n'
import GradientText from '../ui/GradientText'
import FadeInView from '../ui/FadeInView'
import GlassCard from '../ui/GlassCard'
import { TrendingUp, TrendingDown, Minus } from 'lucide-react'
import { useFinancialModel } from '@/lib/hooks/useFinancialModel'

interface AssumptionsSlideProps {
  lang: Language
  investorId?: string | null
}

function fmtArr(v: number, de: boolean): string {
  if (v >= 1_000_000) {
    const m = (v / 1_000_000).toFixed(1)
    return de ? `~${m.replace('.', ',')} Mio. EUR` : `~EUR ${m}M`
  }
  return de ? `~${Math.round(v / 1000)}k EUR` : `~EUR ${Math.round(v / 1000)}k`
}

function fmtCash(v: number, de: boolean): string {
  if (Math.abs(v) >= 1_000_000) {
    const m = (v / 1_000_000).toFixed(1)
    return de ? `~${m.replace('.', ',')} Mio. EUR` : `~EUR ${m}M`
  }
  return de ? `~${Math.round(v / 1000)}k EUR` : `~EUR ${Math.round(v / 1000)}k`
}

function breakEvenYear(month: number | null): string {
  if (!month || month <= 0) return '—'
  const year = 2026 + Math.floor((month - 1) / 12)
  return String(year)
}

export default function AssumptionsSlide({ lang, investorId }: AssumptionsSlideProps) {
  const i = t(lang)
  const de = lang === 'de'

  // Load computed financial data for Base Case
  const fm = useFinancialModel(investorId || null)
  const summary = fm.activeResults?.summary
  const results = fm.activeResults?.results || []
  const lastResult = results.length > 0 ? results[results.length - 1] : null

  // Base case from compute engine
  const baseCustomers = summary?.final_customers || 0
  const baseArr = summary?.final_arr || 0
  const baseEmployees = lastResult?.employees_count || 0
  const baseCash = lastResult?.cash_balance_eur || 0
  const baseBreakEven = breakEvenYear(summary?.break_even_month || null)

  // Bear/Bull derived from Base (scaling factors)
  const bearCustomers = Math.round(baseCustomers * 0.5)
  const bearArr = baseArr * 0.42
  const bearEmployees = Math.round(baseEmployees * 0.7)
  const bearCash = baseCash * 0.08
  const bearBreakEvenMonth = summary?.break_even_month ? Math.round(summary.break_even_month * 1.3) : null
  const bearBreakEven = breakEvenYear(bearBreakEvenMonth)

  const bullCustomers = Math.round(baseCustomers * 1.7)
  const bullArr = baseArr * 1.8
  const bullEmployees = Math.round(baseEmployees * 1.4)
  const bullCash = baseCash * 2.3
  const bullBreakEvenMonth = summary?.break_even_month ? Math.round(summary.break_even_month * 0.75) : null
  const bullBreakEven = breakEvenYear(bullBreakEvenMonth)

  // 3 Cases abgeleitet aus dem Finanzplan (Base Case = aktuelle DB-Daten)
  const cases = [
    {
      name: 'Bear Case',
      icon: TrendingDown,
      color: 'text-red-400',
      bg: 'bg-red-500/10 border-red-500/20',
      desc: de ? 'Langsames Wachstum, höhere Churn' : 'Slow growth, higher churn',
      assumptions: de ? [
        'Kundenwachstum 50% langsamer als Base',
        'Churn Rate 8% pro Monat (Startups)',
        'Durchschnittspreis 20% niedriger',
        'Personalaufbau verzögert um 6 Monate',
        'Serverkosten 150€ pro Kunde',
      ] : [
        'Customer growth 50% slower than base',
        'Churn rate 8% per month (startups)',
        'Average price 20% lower',
        'Hiring delayed by 6 months',
        'Server costs €150 per customer',
      ],
      kpis: {
        kunden2030: `~${bearCustomers.toLocaleString('de-DE')}`,
        arr2030: fmtArr(bearArr, de),
        ma2030: String(bearEmployees),
        breakEven: bearBreakEven,
        cash2030: fmtCash(bearCash, de),
      },
    },
    {
      name: 'Base Case',
      icon: Minus,
      color: 'text-indigo-400',
      bg: 'bg-indigo-500/10 border-indigo-500/20',
      desc: de ? 'Aktueller Finanzplan' : 'Current financial plan',
      assumptions: de ? [
        'Kundenwachstum wie geplant (14→1.200)',
        'Mix: 75% Startup, 15% KMU, 7% Mittel, 3% Enterprise',
        'Personalaufbau 5→10→17→25→35',
        'Serverkosten 100€ pro Kunde + 2.000€ Basis',
        'Break-Even Mitte 2029',
      ] : [
        'Customer growth as planned (14→1,200)',
        'Mix: 75% startup, 15% SME, 7% mid, 3% enterprise',
        'Hiring 5→10→17→25→35',
        'Server costs €100 per customer + €2,000 base',
        'Break-even mid 2029',
      ],
      kpis: {
        kunden2030: `~${baseCustomers.toLocaleString('de-DE')}`,
        arr2030: fmtArr(baseArr, de),
        ma2030: String(baseEmployees),
        breakEven: baseBreakEven,
        cash2030: fmtCash(baseCash, de),
      },
    },
    {
      name: 'Bull Case',
      icon: TrendingUp,
      color: 'text-emerald-400',
      bg: 'bg-emerald-500/10 border-emerald-500/20',
      desc: de ? 'Beschleunigtes Wachstum' : 'Accelerated growth',
      assumptions: de ? [
        'Kundenwachstum 50% schneller (Regulierungsdruck)',
        'Enterprise-Anteil steigt auf 8%',
        'Durchschnittspreis 15% höher (Upselling)',
        'Channel-Partner ab Q1/2027',
        'EU-Expansion ab 2028',
      ] : [
        'Customer growth 50% faster (regulation pressure)',
        'Enterprise share rises to 8%',
        'Average price 15% higher (upselling)',
        'Channel partners from Q1/2027',
        'EU expansion from 2028',
      ],
      kpis: {
        kunden2030: `~${bullCustomers.toLocaleString('de-DE')}`,
        arr2030: fmtArr(bullArr, de),
        ma2030: String(bullEmployees),
        breakEven: bullBreakEven,
        cash2030: fmtCash(bullCash, de),
      },
    },
  ]

  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>{i.annex.assumptions.title}</GradientText>
        </h2>
        <p className="text-sm text-white/50 max-w-2xl mx-auto">{i.annex.assumptions.subtitle}</p>
      </FadeInView>

      {/* 3 Cases nebeneinander */}
      <div className="grid md:grid-cols-3 gap-4 mb-6">
        {cases.map((c, idx) => {
          const Icon = c.icon
          return (
            <GlassCard key={idx} delay={0.1 + idx * 0.1} hover={false} className={`p-4 border-t-2 ${c.bg}`}>
              <div className="flex items-center gap-2 mb-2">
                <Icon className={`w-5 h-5 ${c.color}`} />
                <h3 className={`text-sm font-bold ${c.color}`}>{c.name}</h3>
              </div>
              <p className="text-[10px] text-white/40 mb-3">{c.desc}</p>

              {/* Annahmen */}
              <div className="space-y-1.5 mb-4">
                {c.assumptions.map((a, i) => (
                  <p key={i} className="text-xs text-white/60 pl-3 relative">
                    <span className={`absolute left-0 top-1 w-1.5 h-1.5 rounded-full ${c.color.replace('text-', 'bg-')}/60`} />
                    {a}
                  </p>
                ))}
              </div>

              {/* KPIs */}
              <div className="border-t border-white/10 pt-3 space-y-1.5">
                {[
                  { label: de ? 'Kunden 2030' : 'Customers 2030', value: c.kpis.kunden2030 },
                  { label: 'ARR 2030', value: c.kpis.arr2030 },
                  { label: de ? 'Mitarbeiter 2030' : 'Employees 2030', value: c.kpis.ma2030 },
                  { label: 'Break-Even', value: c.kpis.breakEven },
                  { label: 'Cash 2030', value: c.kpis.cash2030 },
                ].map((kpi, i) => (
                  <div key={i} className="flex justify-between text-xs">
                    <span className="text-white/40">{kpi.label}</span>
                    <span className={`font-mono font-bold ${c.color}`}>{kpi.value}</span>
                  </div>
                ))}
              </div>
            </GlassCard>
          )
        })}
      </div>

      {/* Vergleichstabelle */}
      <FadeInView delay={0.5}>
        <GlassCard hover={false} className="p-4">
          <h3 className="text-xs font-bold text-white/40 uppercase tracking-wider mb-3">
            {de ? 'Szenario-Vergleich 2030' : 'Scenario Comparison 2030'}
          </h3>
          <table className="w-full text-xs">
            <thead>
              <tr className="border-b border-white/10">
                <th className="text-left py-2 text-white/40"></th>
                <th className="text-right py-2 text-red-400">Bear</th>
                <th className="text-right py-2 text-indigo-400 font-bold">Base</th>
                <th className="text-right py-2 text-emerald-400">Bull</th>
              </tr>
            </thead>
            <tbody>
              {[
                { label: de ? 'Kunden' : 'Customers', bear: `~${bearCustomers.toLocaleString('de-DE')}`, base: `~${baseCustomers.toLocaleString('de-DE')}`, bull: `~${bullCustomers.toLocaleString('de-DE')}` },
                { label: 'ARR', bear: fmtArr(bearArr, de), base: fmtArr(baseArr, de), bull: fmtArr(bullArr, de) },
                { label: de ? 'Mitarbeiter' : 'Employees', bear: String(bearEmployees), base: String(baseEmployees), bull: String(bullEmployees) },
                { label: 'Break-Even', bear: bearBreakEven, base: baseBreakEven, bull: bullBreakEven },
                { label: 'Cash', bear: fmtCash(bearCash, de), base: fmtCash(baseCash, de), bull: fmtCash(bullCash, de) },
              ].map((row, idx) => (
                <tr key={idx} className="border-b border-white/[0.03]">
                  <td className="py-1.5 text-white/60">{row.label}</td>
                  <td className="py-1.5 text-right text-red-400/70 font-mono">{row.bear}</td>
                  <td className="py-1.5 text-right text-indigo-300 font-mono font-bold">{row.base}</td>
                  <td className="py-1.5 text-right text-emerald-400/70 font-mono">{row.bull}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </GlassCard>
      </FadeInView>
    </div>
  )
}