'use client'

import GlassCard from '../ui/GlassCard'
import { formatCell } from './FinanzplanSlide.helpers'

interface ChartsTabProps {
  fpKPIs: Record<string, Record<string, number>>
  de: boolean
  chartDetail: string | null
  setChartDetail: (v: string | null) => void
}

const YEARS = ['y2026', 'y2027', 'y2028', 'y2029', 'y2030']

function fmtK(v: number) {
  return Math.abs(v) >= 1000000 ? `${(v / 1000000).toFixed(1)}M` : `${Math.round(v / 1000)}k`
}

function fmtV(v: number) {
  return v.toLocaleString('de-DE')
}

function getChartDetails(de: boolean): Record<string, { title: string; desc: string }> {
  return {
    mrr: { title: 'MRR (Monthly Recurring Revenue)', desc: de ? 'Monatlich wiederkehrender Umsatz im Dezember des jeweiligen Jahres — der wichtigste KPI für SaaS-Unternehmen. Zeigt den tatsächlichen monatlichen Run-Rate, nicht den Jahresdurchschnitt. ARR = MRR × 12.' : 'Monthly recurring revenue in December of each year — the most important SaaS KPI. Shows the actual monthly run rate, not the annual average. ARR = MRR × 12.' },
    ebit: { title: 'EBIT (Earnings Before Interest & Taxes)', desc: de ? 'Operatives Ergebnis vor Zinsen und Steuern — zeigt die tatsächliche Profitabilität des Geschäftsbetriebs. Positiver EBIT = das Geschäftsmodell funktioniert.' : 'Operating profit before interest and taxes — shows actual profitability of operations. Positive EBIT = the business model works.' },
    headcount: { title: de ? 'Personalaufbau' : 'Headcount', desc: de ? 'Geplanter Teamaufbau über 5 Jahre. Wir starten lean mit 2 Gründern und wachsen bedarfsorientiert. Jede Einstellung ist an einen konkreten Meilenstein geknüpft.' : 'Planned team growth over 5 years. We start lean with 2 founders and grow based on demand. Each hire is tied to a concrete milestone.' },
    cash: { title: de ? 'Liquidität (Jahresende)' : 'Cash Position (Year-End)', desc: de ? 'Kontostand am Ende jedes Jahres. Zeigt ob genug Geld für den laufenden Betrieb vorhanden ist. Die Liquiditätskurve berücksichtigt alle Einnahmen, Ausgaben, Investitionen und Finanzierungen.' : 'Bank balance at end of each year. Shows if enough cash is available for operations. The liquidity curve accounts for all revenue, expenses, investments and financing.' },
    revcost: { title: de ? 'Umsatz vs. Gesamtkosten' : 'Revenue vs. Total Costs', desc: de ? 'Vergleich zwischen Einnahmen und Ausgaben. Der Schnittpunkt zeigt den Break-Even — ab dann verdient das Unternehmen mehr als es ausgibt.' : 'Comparison between income and expenses. The intersection shows break-even — from then on, the company earns more than it spends.' },
    acv: { title: 'ACV (Average Contract Value)', desc: de ? 'Durchschnittlicher Vertragswert pro Kunde und Jahr. Steigender ACV bedeutet: Kunden kaufen mehr Module oder wechseln in höhere Tiers.' : 'Average contract value per customer per year. Rising ACV means: customers buy more modules or upgrade to higher tiers.' },
    grossMargin: { title: 'Gross Margin', desc: de ? 'Rohertragsmarge — wieviel Prozent vom Umsatz nach Abzug der direkten Kosten (Cloud-Infrastruktur, Lizenzen) übrig bleibt. Bei SaaS typisch 70-90%.' : 'How much revenue remains after direct costs (cloud infrastructure, licenses). Typical for SaaS: 70-90%.' },
    nrr: { title: de ? 'Umsatzwachstum (YoY)' : 'Revenue Growth (YoY)', desc: de ? 'Jahresvergleich des Gesamtumsatzes — zeigt die Wachstumsgeschwindigkeit. In der Frühphase primär durch Neukundengewinnung getrieben, später zunehmend durch Expansion bestehender Kunden (Upselling in höhere Tiers).' : 'Year-over-year total revenue comparison — shows growth velocity. In early stages driven primarily by new customer acquisition, later increasingly by expansion of existing customers (upselling to higher tiers).' },
    ebitMargin: { title: 'EBIT Margin', desc: de ? 'Operatives Ergebnis in Prozent vom Umsatz. Zeigt die Effizienz des Geschäftsmodells. Ziel für SaaS: 20-30% in der Reifephase.' : 'Operating result as percentage of revenue. Shows business model efficiency. Target for SaaS: 20-30% at maturity.' },
  }
}

function ChartDetailOverlay({ chartDetail, fpKPIs, de, onClose }: {
  chartDetail: string; fpKPIs: Record<string, Record<string, number>>; de: boolean; onClose: () => void
}) {
  const chartDetails = getChartDetails(de)
  const detailInfo = chartDetails[chartDetail]
  if (!detailInfo) return null

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4" onClick={onClose}>
      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
      <div className="relative bg-slate-900/95 border border-white/10 rounded-2xl p-6 max-w-lg w-full" onClick={e => e.stopPropagation()}>
        <button onClick={onClose} className="absolute top-4 right-4 text-white/40 hover:text-white/80 text-lg">✕</button>
        <h3 className="text-xl font-bold text-white mb-3">{detailInfo.title}</h3>
        <p className="text-sm text-white/60 leading-relaxed">{detailInfo.desc}</p>
        {fpKPIs.y2026 && (
          <div className="mt-4 pt-4 border-t border-white/10">
            <div className="grid grid-cols-5 gap-2 text-center">
              {[2026, 2027, 2028, 2029, 2030].map(y => {
                const keyMap: Record<string, string> = { cash: 'liquiditaet', revcost: 'revenue', acv: 'arpu' }
                const key = keyMap[chartDetail] || chartDetail
                const v = fpKPIs[`y${y}`]?.[key as keyof typeof fpKPIs['y2026']] as number || 0
                return (
                  <div key={y}>
                    <div className="text-[10px] text-white/40">{y}</div>
                    <div className="text-sm font-bold text-white">{typeof v === 'number' && Math.abs(v) >= 1000 ? fmtK(v) : `${v}`}</div>
                  </div>
                )
              })}
            </div>
          </div>
        )}
      </div>
    </div>
  )
}

export default function ChartsTab({ fpKPIs, de, chartDetail, setChartDetail }: ChartsTabProps) {
  const detailInfo = chartDetail ? getChartDetails(de)[chartDetail] : null

  return (
    <div className="space-y-4">
      {/* Detail overlay */}
      {detailInfo && chartDetail && (
        <ChartDetailOverlay chartDetail={chartDetail} fpKPIs={fpKPIs} de={de} onClose={() => setChartDetail(null)} />
      )}

      {/* MRR + Kunden Chart */}
      <GlassCard hover={false} className="p-4 cursor-pointer" onClick={() => setChartDetail('mrr')}>
        <div className="flex items-center justify-between mb-3">
          <h3 className="text-xs font-bold text-indigo-400 uppercase tracking-wider">{de ? 'MRR & Kundenentwicklung' : 'MRR & Customer Growth'}</h3>
          <span className="text-[9px] text-white/30">{de ? 'Klicken für Details' : 'Click for details'}</span>
        </div>
        <div className="flex">
          <div className="flex flex-col justify-between h-40 pr-2 text-[9px] text-white/30 text-right" style={{ width: 45 }}>
            {(() => { const m = Math.max(...YEARS.map(y => fpKPIs[y]?.mrr || 0), 1); return [m, Math.round(m / 2), 0].map((v, i) => <span key={i}>{fmtK(v)} €</span>) })()}
          </div>
          <div className="flex-1 grid grid-cols-5 gap-1 items-end h-40 border-l border-b border-white/10 pl-2 pb-1">
            {YEARS.map((y, idx) => {
              const d = { mrr: fpKPIs[y]?.mrr || 0, cust: fpKPIs[y]?.customers || 0 }
              const maxMrr = Math.max(...YEARS.map(k => fpKPIs[k]?.mrr || 0), 1)
              const maxCust = Math.max(...YEARS.map(k => fpKPIs[k]?.customers || 0), 1)
              return (
                <div key={idx} className="flex flex-col items-center gap-1">
                  <div className="flex items-end gap-1 w-full justify-center" style={{ height: '130px' }}>
                    <div className="w-8 bg-indigo-500/60 rounded-t transition-all" style={{ height: `${(d.mrr / maxMrr) * 120}px` }}>
                      <div className="text-[10px] text-white/80 text-center -mt-3.5 whitespace-nowrap font-semibold">{fmtK(d.mrr)}</div>
                    </div>
                    <div className="w-8 bg-emerald-500/60 rounded-t transition-all" style={{ height: `${(d.cust / maxCust) * 120}px` }}>
                      <div className="text-[10px] text-white/80 text-center -mt-3.5 whitespace-nowrap font-semibold">{d.cust}</div>
                    </div>
                  </div>
                  <span className="text-[10px] text-white/50 font-medium">{y.slice(1)}</span>
                </div>
              )
            })}
          </div>
        </div>
        <div className="flex justify-center gap-6 mt-2 text-[10px]">
          <span className="flex items-center gap-1.5"><span className="w-3 h-2 bg-indigo-500/60 rounded inline-block" /> MRR (€/Mon)</span>
          <span className="flex items-center gap-1.5"><span className="w-3 h-2 bg-emerald-500/60 rounded inline-block" /> {de ? 'Bestandskunden (Dez)' : 'Customers (Dec)'}</span>
        </div>
      </GlassCard>

      {/* EBIT + Headcount */}
      <div className="grid md:grid-cols-2 gap-4">
        <GlassCard hover={false} className="p-4 cursor-pointer" onClick={() => setChartDetail('ebit')}>
          <div className="flex items-center justify-between mb-3">
            <h3 className="text-xs font-bold text-purple-400 uppercase tracking-wider">EBIT</h3>
            <span className="text-[9px] text-white/30">€/Jahr</span>
          </div>
          <div className="flex">
            <div className="flex flex-col justify-between h-28 pr-2 text-[9px] text-white/30 text-right" style={{ width: 40 }}>
              {(() => { const vals = YEARS.map(y => fpKPIs[y]?.ebit || 0); const mx = Math.max(...vals.map(Math.abs), 1); return [fmtK(mx), '0', fmtK(-mx)].map((v, i) => <span key={i}>{v}</span>) })()}
            </div>
            <div className="flex-1 grid grid-cols-5 gap-1 items-end h-28 border-l border-white/10 pl-2">
              {YEARS.map((y, idx) => {
                const v = fpKPIs[y]?.ebit || 0
                const maxAbs = Math.max(...YEARS.map(k => Math.abs(fpKPIs[k]?.ebit || 0)), 1)
                const h = Math.abs(v) / maxAbs * 90
                return (
                  <div key={idx} className="flex flex-col items-center">
                    <div className="w-10 flex flex-col justify-end" style={{ height: '100px' }}>
                      <div className={`${v >= 0 ? 'bg-emerald-500/60 rounded-t' : 'bg-red-500/60 rounded-b'} w-full`} style={{ height: `${h}px` }}>
                        <div className={`text-[10px] ${v >= 0 ? 'text-emerald-300' : 'text-red-300'} text-center -mt-3.5 whitespace-nowrap font-semibold`}>{fmtK(v)}</div>
                      </div>
                    </div>
                    <span className="text-[10px] text-white/50 mt-1 font-medium">{y.slice(1)}</span>
                  </div>
                )
              })}
            </div>
          </div>
        </GlassCard>

        <GlassCard hover={false} className="p-4 cursor-pointer" onClick={() => setChartDetail('headcount')}>
          <div className="flex items-center justify-between mb-3">
            <h3 className="text-xs font-bold text-amber-400 uppercase tracking-wider">{de ? 'Personalaufbau' : 'Headcount'}</h3>
            <span className="text-[9px] text-white/30">{de ? 'Mitarbeiter (Dez)' : 'Employees (Dec)'}</span>
          </div>
          <div className="flex">
            <div className="flex flex-col justify-between h-28 pr-2 text-[9px] text-white/30 text-right" style={{ width: 25 }}>
              {(() => { const m = Math.max(...YEARS.map(y => fpKPIs[y]?.headcount || 0), 1); return [m, Math.round(m / 2), 0].map((v, i) => <span key={i}>{v}</span>) })()}
            </div>
            <div className="flex-1 grid grid-cols-5 gap-1 items-end h-28 border-l border-b border-white/10 pl-2 pb-1">
              {YEARS.map((y, idx) => {
                const v = fpKPIs[y]?.headcount || 0
                const mx = Math.max(...YEARS.map(k => fpKPIs[k]?.headcount || 0), 1)
                return (
                  <div key={idx} className="flex flex-col items-center">
                    <div className="w-10 flex flex-col justify-end" style={{ height: '90px' }}>
                      <div className="bg-amber-500/60 rounded-t w-full" style={{ height: `${(v / mx) * 80}px` }}>
                        <div className="text-[11px] text-amber-300 text-center -mt-3.5 font-bold">{v}</div>
                      </div>
                    </div>
                    <span className="text-[10px] text-white/50 mt-1 font-medium">{y.slice(1)}</span>
                  </div>
                )
              })}
            </div>
          </div>
        </GlassCard>
      </div>

      {/* Liquiditat + Revenue vs Costs */}
      <div className="grid md:grid-cols-2 gap-4">
        <GlassCard hover={false} className="p-4 cursor-pointer" onClick={() => setChartDetail('cash')}>
          <div className="flex items-center justify-between mb-3">
            <h3 className="text-xs font-bold text-cyan-400 uppercase tracking-wider">{de ? 'Liquidität' : 'Cash Position'}</h3>
            <span className="text-[9px] text-white/30">{de ? 'Jahresende' : 'Year-End'}</span>
          </div>
          <div className="flex">
            <div className="flex flex-col justify-between h-28 pr-2 text-[9px] text-white/30 text-right" style={{ width: 40 }}>
              {(() => { const m = Math.max(...YEARS.map(y => Math.abs(fpKPIs[y]?.liquiditaet || 0)), 1); return [fmtK(m), fmtK(m / 2), '0'].map((v, i) => <span key={i}>{v}</span>) })()}
            </div>
            <div className="flex-1 grid grid-cols-5 gap-1 items-end h-28 border-l border-b border-white/10 pl-2 pb-1">
              {YEARS.map((y, idx) => {
                const v = fpKPIs[y]?.liquiditaet || 0
                const mx = Math.max(...YEARS.map(k => Math.abs(fpKPIs[k]?.liquiditaet || 0)), 1)
                const h = Math.abs(v) / mx * 90
                return (
                  <div key={idx} className="flex flex-col items-center">
                    <div className="w-10 flex flex-col justify-end" style={{ height: '90px' }}>
                      <div className={`${v >= 0 ? 'bg-cyan-500/60 rounded-t' : 'bg-red-500/60 rounded-b'} w-full`} style={{ height: `${Math.max(h, 4)}px` }}>
                        <div className={`text-[10px] ${v >= 0 ? 'text-cyan-300' : 'text-red-300'} text-center -mt-3.5 whitespace-nowrap font-semibold`}>{fmtK(v)}</div>
                      </div>
                    </div>
                    <span className="text-[10px] text-white/50 mt-1 font-medium">{y.slice(1)}</span>
                  </div>
                )
              })}
            </div>
          </div>
        </GlassCard>

        <GlassCard hover={false} className="p-4 cursor-pointer" onClick={() => setChartDetail('revcost')}>
          <div className="flex items-center justify-between mb-3">
            <h3 className="text-xs font-bold text-indigo-400 uppercase tracking-wider">{de ? 'Umsatz vs. Kosten' : 'Revenue vs. Costs'}</h3>
            <span className="text-[9px] text-white/30">€/Jahr</span>
          </div>
          <div className="flex">
            <div className="flex flex-col justify-between h-28 pr-2 text-[9px] text-white/30 text-right" style={{ width: 40 }}>
              {(() => {
                const d = YEARS.map(y => ({ rev: fpKPIs[y]?.revenue || 0, costs: (fpKPIs[y]?.revenue || 0) - (fpKPIs[y]?.ebit || 0) }))
                const mx = Math.max(...d.map(x => Math.max(x.rev, x.costs)), 1)
                return [fmtK(mx), fmtK(mx / 2), '0'].map((v, i) => <span key={i}>{v}</span>)
              })()}
            </div>
            <div className="flex-1 grid grid-cols-5 gap-1 items-end h-28 border-l border-b border-white/10 pl-2 pb-1">
              {(() => {
                const data = YEARS.map(y => ({ year: y.slice(1), rev: fpKPIs[y]?.revenue || 0, costs: (fpKPIs[y]?.revenue || 0) - (fpKPIs[y]?.ebit || 0) }))
                const mx = Math.max(...data.map(d => Math.max(d.rev, d.costs)), 1)
                return data.map((d, idx) => (
                  <div key={idx} className="flex flex-col items-center gap-1">
                    <div className="flex items-end gap-1 w-full justify-center" style={{ height: '90px' }}>
                      <div className="w-6 bg-indigo-500/60 rounded-t" style={{ height: `${(d.rev / mx) * 80}px` }}>
                        <div className="text-[9px] text-indigo-300 text-center -mt-3 whitespace-nowrap font-semibold">{fmtK(d.rev)}</div>
                      </div>
                      <div className="w-6 bg-red-500/40 rounded-t" style={{ height: `${(d.costs / mx) * 80}px` }}>
                        <div className="text-[9px] text-red-300 text-center -mt-3 whitespace-nowrap font-semibold">{fmtK(d.costs)}</div>
                      </div>
                    </div>
                    <span className="text-[10px] text-white/50 font-medium">{d.year}</span>
                  </div>
                ))
              })()}
            </div>
          </div>
          <div className="flex justify-center gap-4 mt-2 text-[9px]">
            <span className="flex items-center gap-1"><span className="w-3 h-1.5 bg-indigo-500/60 rounded inline-block" /> {de ? 'Umsatz' : 'Revenue'}</span>
            <span className="flex items-center gap-1"><span className="w-3 h-1.5 bg-red-500/40 rounded inline-block" /> {de ? 'Kosten' : 'Costs'}</span>
          </div>
        </GlassCard>
      </div>

      {/* Unit Economics */}
      <GlassCard hover={false} className="p-4">
        <h3 className="text-xs font-bold text-purple-400 uppercase tracking-wider mb-3">Unit Economics (2026–2030)</h3>
        <div className="grid md:grid-cols-4 gap-3">
          {[
            { label: 'ACV', key: 'arpu', unit: '€', color: 'text-indigo-300', bg: 'bg-indigo-500/60', detail: 'acv' },
            { label: 'Gross Margin', key: 'grossMargin', unit: '%', color: 'text-emerald-300', bg: 'bg-emerald-500/60', detail: 'grossMargin' },
            { label: de ? 'Wachstum' : 'Growth', key: 'nrr', unit: '%', color: 'text-purple-300', bg: 'bg-purple-500/60', detail: 'nrr' },
            { label: 'EBIT Margin', key: 'ebitMargin', unit: '%', color: 'text-amber-300', bg: 'bg-amber-500/60', detail: 'ebitMargin' },
          ].map((metric, mIdx) => (
            <div key={mIdx} className="text-center cursor-pointer hover:bg-white/[0.03] rounded-lg p-2 transition-colors" onClick={() => setChartDetail(metric.detail)}>
              <p className={`text-[10px] font-bold ${metric.color} uppercase tracking-wider mb-2`}>{metric.label}</p>
              <div className="flex items-end justify-center gap-1 h-16">
                {[2026, 2027, 2028, 2029, 2030].map((y, idx) => {
                  const val = fpKPIs[`y${y}`]?.[metric.key as keyof typeof fpKPIs['y2026']] as number || 0
                  const maxVal = Math.max(...[2026, 2027, 2028, 2029, 2030].map(yr => Math.abs(fpKPIs[`y${yr}`]?.[metric.key as keyof typeof fpKPIs['y2026']] as number || 0)), 1)
                  const h = Math.abs(val) / maxVal * 50
                  return (
                    <div key={idx} className="flex flex-col items-center">
                      <div className={`w-4 ${val >= 0 ? metric.bg + ' rounded-t' : 'bg-red-500/60 rounded-b'}`} style={{ height: `${Math.max(h, 2)}px` }} />
                      <span className="text-[8px] text-white/30 mt-0.5">{String(y).slice(2)}</span>
                    </div>
                  )
                })}
              </div>
              <p className={`text-sm font-bold ${metric.color} mt-1`}>
                {(() => {
                  const v = fpKPIs.y2030?.[metric.key as keyof typeof fpKPIs['y2026']] as number || 0
                  return metric.unit === '€' ? `${fmtV(v)}${metric.unit}` : `${v}${metric.unit}`
                })()}
              </p>
              <p className="text-[8px] text-white/25">2030</p>
            </div>
          ))}
        </div>
      </GlassCard>
    </div>
  )
}
