breakpilot-core/pitch-deck/components/slides/AssumptionsSlide.tsx

'use client'

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

interface AssumptionsSlideProps {
  lang: Language
}

interface SensitivityResult {
  label: string
  base: string
  bull: string
  bear: string
}

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

  const baseScenario = fm.scenarios.find(s => s.name === 'Base Case')
  const bullScenario = fm.scenarios.find(s => s.name === 'Bull Case')
  const bearScenario = fm.scenarios.find(s => s.name === 'Bear Case')

  function getVal(scenario: typeof baseScenario, key: string): string {
    if (!scenario) return '-'
    const a = scenario.assumptions.find(a => a.key === key)
    if (!a) return '-'
    const v = a.value
    if (typeof v === 'number') return String(v)
    return String(v)
  }

  const rows: SensitivityResult[] = [
    {
      label: de ? 'Monatliches Wachstum' : 'Monthly Growth Rate',
      base: getVal(baseScenario, 'monthly_growth_rate') + '%',
      bull: getVal(bullScenario, 'monthly_growth_rate') + '%',
      bear: getVal(bearScenario, 'monthly_growth_rate') + '%',
    },
    {
      label: de ? 'Monatliche Churn Rate' : 'Monthly Churn Rate',
      base: getVal(baseScenario, 'churn_rate_monthly') + '%',
      bull: getVal(bullScenario, 'churn_rate_monthly') + '%',
      bear: getVal(bearScenario, 'churn_rate_monthly') + '%',
    },
    {
      label: de ? 'Startkunden' : 'Initial Customers',
      base: getVal(baseScenario, 'initial_customers'),
      bull: getVal(bullScenario, 'initial_customers'),
      bear: getVal(bearScenario, 'initial_customers'),
    },
    {
      label: 'ARPU Mini',
      base: getVal(baseScenario, 'arpu_mini') + ' EUR',
      bull: getVal(bullScenario, 'arpu_mini') + ' EUR',
      bear: getVal(bearScenario, 'arpu_mini') + ' EUR',
    },
    {
      label: 'ARPU Studio',
      base: getVal(baseScenario, 'arpu_studio') + ' EUR',
      bull: getVal(bullScenario, 'arpu_studio') + ' EUR',
      bear: getVal(bearScenario, 'arpu_studio') + ' EUR',
    },
    {
      label: 'ARPU Cloud',
      base: getVal(baseScenario, 'arpu_cloud') + ' EUR',
      bull: getVal(bullScenario, 'arpu_cloud') + ' EUR',
      bear: getVal(bearScenario, 'arpu_cloud') + ' EUR',
    },
    {
      label: 'CAC',
      base: getVal(baseScenario, 'cac') + ' EUR',
      bull: getVal(bullScenario, 'cac') + ' EUR',
      bear: getVal(bearScenario, 'cac') + ' EUR',
    },
    {
      label: de ? 'Produktmix Mini/Studio/Cloud' : 'Product Mix Mini/Studio/Cloud',
      base: `${getVal(baseScenario, 'product_mix_mini')}/${getVal(baseScenario, 'product_mix_studio')}/${getVal(baseScenario, 'product_mix_cloud')}`,
      bull: `${getVal(bullScenario, 'product_mix_mini')}/${getVal(bullScenario, 'product_mix_studio')}/${getVal(bullScenario, 'product_mix_cloud')}`,
      bear: `${getVal(bearScenario, 'product_mix_mini')}/${getVal(bearScenario, 'product_mix_studio')}/${getVal(bearScenario, 'product_mix_cloud')}`,
    },
    {
      label: de ? 'Marketing / Monat' : 'Marketing / Month',
      base: getVal(baseScenario, 'marketing_monthly') + ' EUR',
      bull: getVal(bullScenario, 'marketing_monthly') + ' EUR',
      bear: getVal(bearScenario, 'marketing_monthly') + ' EUR',
    },
  ]

  // Summary KPIs from computed results
  const baseSummary = fm.results.get(baseScenario?.id || '')?.summary
  const bullSummary = fm.results.get(bullScenario?.id || '')?.summary
  const bearSummary = fm.results.get(bearScenario?.id || '')?.summary

  return (
    <div>
      <FadeInView className="text-center mb-8">
        <p className="text-xs font-mono text-indigo-400/60 uppercase tracking-widest mb-2">
          {de ? 'Anhang' : 'Appendix'}
        </p>
        <h2 className="text-4xl md:text-5xl font-bold mb-3">
          <GradientText>{i.annex.assumptions.title}</GradientText>
        </h2>
        <p className="text-lg text-white/50 max-w-2xl mx-auto">{i.annex.assumptions.subtitle}</p>
      </FadeInView>

      {/* Sensitivity Table */}
      <FadeInView delay={0.2}>
        <GlassCard hover={false} className="p-5 mb-6 overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-white/10">
                <th className="text-left py-2 pr-4 text-white/40 font-medium min-w-[200px]">
                  {de ? 'Annahme' : 'Assumption'}
                </th>
                <th className="text-center py-2 px-3 min-w-[100px]">
                  <span className="flex items-center justify-center gap-1 text-red-400 font-medium">
                    <TrendingDown className="w-3 h-3" /> Bear
                  </span>
                </th>
                <th className="text-center py-2 px-3 min-w-[100px]">
                  <span className="flex items-center justify-center gap-1 text-indigo-400 font-medium">
                    <Minus className="w-3 h-3" /> Base
                  </span>
                </th>
                <th className="text-center py-2 px-3 min-w-[100px]">
                  <span className="flex items-center justify-center gap-1 text-emerald-400 font-medium">
                    <TrendingUp className="w-3 h-3" /> Bull
                  </span>
                </th>
              </tr>
            </thead>
            <tbody>
              {rows.map((row, idx) => (
                <tr key={idx} className={idx % 2 === 0 ? 'bg-white/[0.02]' : ''}>
                  <td className="py-2 pr-4 text-white/60">{row.label}</td>
                  <td className="py-2 px-3 text-center font-mono text-red-400/70">{row.bear}</td>
                  <td className="py-2 px-3 text-center font-mono text-white font-semibold">{row.base}</td>
                  <td className="py-2 px-3 text-center font-mono text-emerald-400/70">{row.bull}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </GlassCard>
      </FadeInView>

      {/* Outcome Summary */}
      {baseSummary && (
        <div className="grid md:grid-cols-3 gap-4">
          {[
            { label: 'Bear', summary: bearSummary, color: 'text-red-400', bg: 'bg-red-500/5 border-red-500/10' },
            { label: 'Base', summary: baseSummary, color: 'text-indigo-400', bg: 'bg-indigo-500/5 border-indigo-500/10' },
            { label: 'Bull', summary: bullSummary, color: 'text-emerald-400', bg: 'bg-emerald-500/5 border-emerald-500/10' },
          ].map((s, idx) => (
            <FadeInView key={s.label} delay={0.4 + idx * 0.1}>
              <div className={`border rounded-xl p-4 ${s.bg}`}>
                <p className={`text-sm font-bold ${s.color} mb-3`}>{s.label} Case</p>
                <div className="space-y-2 text-xs">
                  <div className="flex justify-between">
                    <span className="text-white/40">ARR 2030</span>
                    <span className="text-white font-mono">
                      {s.summary ? `${(s.summary.final_arr / 1_000_000).toFixed(1)}M` : '-'}
                    </span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-white/40">{de ? 'Kunden 2030' : 'Customers 2030'}</span>
                    <span className="text-white font-mono">
                      {s.summary?.final_customers?.toLocaleString('de-DE') || '-'}
                    </span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-white/40">Break-Even</span>
                    <span className="text-white font-mono">
                      {s.summary?.break_even_month ? `${de ? 'Monat' : 'Month'} ${s.summary.break_even_month}` : (de ? 'Nicht erreicht' : 'Not reached')}
                    </span>
                  </div>
                  <div className="flex justify-between">
                    <span className="text-white/40">LTV/CAC</span>
                    <span className="text-white font-mono">
                      {s.summary?.final_ltv_cac ? `${s.summary.final_ltv_cac.toFixed(1)}x` : '-'}
                    </span>
                  </div>
                </div>
              </div>
            </FadeInView>
          ))}
        </div>
      )}
    </div>
  )
}