breakpilot-core/pitch-deck/components/ui/AnnualPLTable.tsx

'use client'

import { useState, useEffect } from 'react'
import { createPortal } from 'react-dom'
import { motion } from 'framer-motion'
import { FMResult } from '@/lib/types'
import { Maximize2, Minimize2, ChevronDown, ChevronRight } from 'lucide-react'

interface AnnualPLTableProps {
  results: FMResult[]
  lang: 'de' | 'en'
}

type AccountingStandard = 'hgb' | 'usgaap'

interface AnnualRow {
  year: number
  revenue: number
  cogs: number
  grossProfit: number
  grossMarginPct: number
  personnel: number
  marketing: number
  infra: number
  totalOpex: number
  ebitda: number
  ebitdaMarginPct: number
  customers: number
  employees: number
}

interface MonthlyRow {
  month: number
  monthInYear: number
  revenue: number
  cogs: number
  grossProfit: number
  grossMarginPct: number
  personnel: number
  marketing: number
  infra: number
  totalCosts: number
  ebitda: number
  ebitdaMarginPct: number
  customers: number
  employees: number
  mrr: number
  cashBalance: number
}

function fmt(v: number): string {
  if (Math.abs(v) >= 1_000_000) return `${(v / 1_000_000).toFixed(1)}M`
  if (Math.abs(v) >= 1_000) return `${(v / 1_000).toFixed(0)}k`
  return Math.round(v).toLocaleString('de-DE')
}

function fmtMonth(v: number): string {
  return Math.round(v).toLocaleString('de-DE')
}

const MONTH_NAMES_DE = ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez']
const MONTH_NAMES_EN = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

function getLineItems(lang: 'de' | 'en', standard: AccountingStandard) {
  const de = lang === 'de'
  const hgb = standard === 'hgb'

  return [
    {
      label: hgb
        ? (de ? 'Umsatzerloese' : 'Revenue (Umsatzerloese)')
        : (de ? 'Revenue' : 'Revenue'),
      key: 'revenue' as keyof AnnualRow,
      monthKey: 'revenue' as keyof MonthlyRow,
      isBold: true,
    },
    {
      label: hgb
        ? (de ? '- Herstellungskosten' : '- Cost of Production')
        : (de ? '- COGS' : '- Cost of Goods Sold'),
      key: 'cogs' as keyof AnnualRow,
      monthKey: 'cogs' as keyof MonthlyRow,
      isNegative: true,
    },
    {
      label: hgb
        ? (de ? '= Rohertrag' : '= Gross Profit')
        : (de ? '= Gross Profit' : '= Gross Profit'),
      key: 'grossProfit' as keyof AnnualRow,
      monthKey: 'grossProfit' as keyof MonthlyRow,
      isBold: true,
      isSeparator: true,
    },
    {
      label: hgb
        ? (de ? '  Rohertragsmarge' : '  Gross Margin')
        : (de ? '  Gross Margin' : '  Gross Margin'),
      key: 'grossMarginPct' as keyof AnnualRow,
      monthKey: 'grossMarginPct' as keyof MonthlyRow,
      isPercent: true,
    },
    {
      label: hgb
        ? (de ? '- Personalaufwand' : '- Personnel Expenses')
        : (de ? '- Personnel' : '- Personnel'),
      key: 'personnel' as keyof AnnualRow,
      monthKey: 'personnel' as keyof MonthlyRow,
      isNegative: true,
    },
    {
      label: hgb
        ? (de ? '- Vertrieb & Marketing' : '- Sales & Marketing')
        : (de ? '- Sales & Marketing' : '- Sales & Marketing'),
      key: 'marketing' as keyof AnnualRow,
      monthKey: 'marketing' as keyof MonthlyRow,
      isNegative: true,
    },
    {
      label: hgb
        ? (de ? '- sonstige betriebl. Aufwendungen' : '- Other Operating Expenses')
        : (de ? '- Infrastructure' : '- Infrastructure'),
      key: 'infra' as keyof AnnualRow,
      monthKey: 'infra' as keyof MonthlyRow,
      isNegative: true,
    },
    {
      label: hgb
        ? (de ? '= Betriebsaufwand gesamt' : '= Total Operating Expenses')
        : (de ? '= Total OpEx' : '= Total OpEx'),
      key: 'totalOpex' as keyof AnnualRow,
      monthKey: 'totalCosts' as keyof MonthlyRow,
      isBold: true,
      isSeparator: true,
      isNegative: true,
    },
    {
      label: hgb
        ? (de ? 'Betriebsergebnis (EBITDA)' : 'Operating Result (EBITDA)')
        : 'EBITDA',
      key: 'ebitda' as keyof AnnualRow,
      monthKey: 'ebitda' as keyof MonthlyRow,
      isBold: true,
      isSeparator: true,
    },
    {
      label: hgb
        ? (de ? '  EBITDA-Marge' : '  EBITDA Margin')
        : (de ? '  EBITDA Margin' : '  EBITDA Margin'),
      key: 'ebitdaMarginPct' as keyof AnnualRow,
      monthKey: 'ebitdaMarginPct' as keyof MonthlyRow,
      isPercent: true,
    },
    {
      label: hgb
        ? (de ? 'Kunden (Stichtag)' : 'Customers (Reporting Date)')
        : (de ? 'Kunden (Jahresende)' : 'Customers (Year End)'),
      key: 'customers' as keyof AnnualRow,
      monthKey: 'customers' as keyof MonthlyRow,
    },
    {
      label: hgb
        ? (de ? 'Mitarbeiter (VZAe)' : 'Employees (FTE)')
        : (de ? 'Mitarbeiter' : 'Employees'),
      key: 'employees' as keyof AnnualRow,
      monthKey: 'employees' as keyof MonthlyRow,
    },
  ]
}

function AnnualTable({
  rows,
  lang,
  expandedYear,
  onToggleYear,
  monthlyData,
  isFullscreen,
  standard,
}: {
  rows: AnnualRow[]
  lang: 'de' | 'en'
  expandedYear: number | null
  onToggleYear: (year: number) => void
  monthlyData: Map<number, MonthlyRow[]>
  isFullscreen: boolean
  standard: AccountingStandard
}) {
  const de = lang === 'de'
  const monthNames = de ? MONTH_NAMES_DE : MONTH_NAMES_EN
  const lineItems = getLineItems(lang, standard)

  const monthlyExtraItems: { label: string; key: keyof MonthlyRow; isBold?: boolean }[] = isFullscreen ? [
    { label: 'MRR', key: 'mrr', isBold: true },
    { label: de ? 'Cash-Bestand' : 'Cash Balance', key: 'cashBalance', isBold: true },
  ] : []

  const textSize = isFullscreen ? 'text-xs' : 'text-[11px]'
  const minColWidth = isFullscreen ? 'min-w-[70px]' : 'min-w-[80px]'

  return (
    <table className={`w-full ${textSize}`}>
      <thead>
        <tr className="border-b border-white/10">
          <th className={`text-left py-2 pr-4 text-white/40 font-medium ${isFullscreen ? 'min-w-[220px]' : 'min-w-[180px]'}`}>
            {standard === 'hgb'
              ? (de ? 'GuV-Position (HGB)' : 'P&L Line Item (HGB)')
              : (de ? 'GuV-Position (US GAAP)' : 'P&L Line Item (US GAAP)')
            }
          </th>
          {rows.map(r => (
            <th
              key={r.year}
              className={`text-right py-2 px-2 text-white/50 font-semibold ${minColWidth} cursor-pointer hover:text-indigo-400 transition-colors`}
              onClick={() => onToggleYear(r.year)}
              title={de ? 'Klicken fuer Monatsdetails' : 'Click for monthly details'}
            >
              <span className="inline-flex items-center gap-1">
                {expandedYear === r.year ? (
                  <ChevronDown className="w-3 h-3" />
                ) : (
                  <ChevronRight className="w-3 h-3 opacity-30" />
                )}
                {r.year}
              </span>
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {lineItems.map((item) => (
          <tr
            key={item.key}
            className={item.isSeparator ? 'border-t border-white/10' : ''}
          >
            <td className={`py-1.5 pr-4 ${item.isBold ? 'text-white font-semibold' : 'text-white/50'} ${item.isPercent ? 'italic text-white/30' : ''}`}>
              {item.label}
            </td>
            {rows.map(r => {
              const val = r[item.key] as number
              return (
                <td
                  key={r.year}
                  className={`text-right py-1.5 px-2 font-mono
                    ${item.isBold ? 'font-semibold' : ''}
                    ${item.isPercent ? 'text-white/30 italic' : ''}
                    ${!item.isPercent && val < 0 ? 'text-red-400/80' : ''}
                    ${!item.isPercent && val > 0 && item.key === 'ebitda' ? 'text-emerald-400' : ''}
                    ${!item.isPercent && !item.isBold ? 'text-white/60' : 'text-white'}
                  `}
                >
                  {item.isPercent
                    ? `${val.toFixed(1)}%`
                    : (item.isNegative && val > 0 ? '-' : '') + fmt(Math.abs(val))
                  }
                </td>
              )
            })}
          </tr>
        ))}
      </tbody>

      {/* Monthly Drill-Down */}
      {expandedYear && monthlyData.has(expandedYear) && (
        <tbody>
          <tr>
            <td colSpan={rows.length + 1} className="pt-4 pb-1">
              <div className="border-t border-indigo-500/30 pt-3">
                <p className="text-xs font-semibold text-indigo-400 mb-2">
                  {de ? `Monatsdetails ${expandedYear}` : `Monthly Details ${expandedYear}`}
                </p>
              </div>
            </td>
          </tr>
          <tr className="border-b border-white/10">
            <td className="text-left py-1 pr-4 text-white/40 font-medium text-[10px]">
              {de ? 'Monat' : 'Month'}
            </td>
            {monthlyData.get(expandedYear)!.map(m => (
              <td key={m.monthInYear} className="text-right py-1 px-1 text-white/40 font-medium text-[10px]">
                {monthNames[m.monthInYear - 1]}
              </td>
            ))}
          </tr>
          {lineItems.map((item) => {
            const mKey = item.monthKey
            if (!mKey) return null
            return (
              <tr key={`monthly-${item.key}`} className={item.isSeparator ? 'border-t border-white/5' : ''}>
                <td className={`py-1 pr-4 text-[10px] ${item.isBold ? 'text-white/70 font-medium' : 'text-white/30'} ${item.isPercent ? 'italic' : ''}`}>
                  {item.label}
                </td>
                {monthlyData.get(expandedYear)!.map(m => {
                  const val = m[mKey] as number
                  return (
                    <td
                      key={m.monthInYear}
                      className={`text-right py-1 px-1 font-mono text-[10px]
                        ${item.isPercent ? 'text-white/20 italic' : ''}
                        ${!item.isPercent && val < 0 ? 'text-red-400/60' : ''}
                        ${!item.isPercent && val > 0 && item.key === 'ebitda' ? 'text-emerald-400/70' : ''}
                        ${!item.isPercent ? 'text-white/40' : ''}
                      `}
                    >
                      {item.isPercent
                        ? `${val.toFixed(0)}%`
                        : (item.isNegative && val > 0 ? '-' : '') + fmtMonth(Math.abs(val))
                      }
                    </td>
                  )
                })}
              </tr>
            )
          })}
          {monthlyExtraItems.map((item) => (
            <tr key={`monthly-extra-${item.key}`} className="border-t border-white/5">
              <td className="py-1 pr-4 text-[10px] text-indigo-300/70 font-medium">{item.label}</td>
              {monthlyData.get(expandedYear)!.map(m => {
                const val = m[item.key] as number
                return (
                  <td key={m.monthInYear} className="text-right py-1 px-1 font-mono text-[10px] text-indigo-300/50">
                    {fmtMonth(Math.round(val))}
                  </td>
                )
              })}
            </tr>
          ))}
        </tbody>
      )}
    </table>
  )
}

function FullscreenOverlay({
  children,
  onClose,
  lang,
  standard,
  onStandardChange,
}: {
  children: React.ReactNode
  onClose: () => void
  lang: 'de' | 'en'
  standard: AccountingStandard
  onStandardChange: (s: AccountingStandard) => void
}) {
  const de = lang === 'de'

  // ESC to close
  useEffect(() => {
    const handler = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose()
    }
    window.addEventListener('keydown', handler)
    return () => window.removeEventListener('keydown', handler)
  }, [onClose])

  return (
    <div className="fixed inset-0 z-[9999] bg-slate-950/98 backdrop-blur-xl overflow-auto p-6">
      <div className="max-w-[1400px] mx-auto">
        <div className="flex items-center justify-between mb-4">
          <div>
            <h2 className="text-xl font-bold text-white">
              {de ? 'Gewinn- und Verlustrechnung' : 'Profit & Loss Statement'}
            </h2>
            <p className="text-xs text-white/40">
              {de
                ? 'Klicke auf ein Jahr um die Monatsdetails zu sehen · ESC zum Schliessen'
                : 'Click on a year to see monthly details · ESC to close'}
            </p>
          </div>
          <div className="flex items-center gap-3">
            {/* HGB / US GAAP Toggle */}
            <div className="flex items-center bg-white/[0.06] border border-white/10 rounded-xl overflow-hidden">
              <button
                onClick={() => onStandardChange('hgb')}
                className={`px-3 py-1.5 text-xs font-medium transition-all ${
                  standard === 'hgb'
                    ? 'bg-indigo-500/20 text-indigo-300'
                    : 'text-white/40 hover:text-white/60'
                }`}
              >
                HGB
              </button>
              <button
                onClick={() => onStandardChange('usgaap')}
                className={`px-3 py-1.5 text-xs font-medium transition-all ${
                  standard === 'usgaap'
                    ? 'bg-indigo-500/20 text-indigo-300'
                    : 'text-white/40 hover:text-white/60'
                }`}
              >
                US GAAP
              </button>
            </div>
            <button
              onClick={onClose}
              className="flex items-center gap-2 px-3 py-2 bg-white/[0.08] hover:bg-white/[0.12] border border-white/10 rounded-xl text-sm text-white/70 hover:text-white transition-all"
            >
              <Minimize2 className="w-4 h-4" />
              {de ? 'Schliessen' : 'Close'}
            </button>
          </div>
        </div>
        <div className="bg-white/[0.03] border border-white/10 rounded-2xl p-6 overflow-x-auto">
          {children}
        </div>
      </div>
    </div>
  )
}

export default function AnnualPLTable({ results, lang }: AnnualPLTableProps) {
  const [isFullscreen, setIsFullscreen] = useState(false)
  const [expandedYear, setExpandedYear] = useState<number | null>(null)
  const [standard, setStandard] = useState<AccountingStandard>('hgb')
  const [portalRoot, setPortalRoot] = useState<HTMLElement | null>(null)
  const de = lang === 'de'

  // Portal mount point
  useEffect(() => {
    setPortalRoot(document.body)
  }, [])

  // Aggregate monthly results into annual
  const annualMap = new Map<number, FMResult[]>()
  for (const r of results) {
    if (!annualMap.has(r.year)) annualMap.set(r.year, [])
    annualMap.get(r.year)!.push(r)
  }

  const rows: AnnualRow[] = Array.from(annualMap.entries()).map(([year, months]) => {
    const revenue = months.reduce((s, m) => s + m.revenue_eur, 0)
    const cogs = months.reduce((s, m) => s + m.cogs_eur, 0)
    const grossProfit = revenue - cogs
    const personnel = months.reduce((s, m) => s + m.personnel_eur, 0)
    const marketing = months.reduce((s, m) => s + m.marketing_eur, 0)
    const infra = months.reduce((s, m) => s + m.infra_eur, 0)
    const totalOpex = personnel + marketing + infra
    const ebitda = grossProfit - totalOpex
    const lastMonth = months[months.length - 1]

    return {
      year,
      revenue,
      cogs,
      grossProfit,
      grossMarginPct: revenue > 0 ? (grossProfit / revenue) * 100 : 0,
      personnel,
      marketing,
      infra,
      totalOpex,
      ebitda,
      ebitdaMarginPct: revenue > 0 ? (ebitda / revenue) * 100 : 0,
      customers: lastMonth.total_customers,
      employees: lastMonth.employees_count,
    }
  })

  // Build monthly data for drill-down
  const monthlyData = new Map<number, MonthlyRow[]>()
  for (const [year, months] of annualMap.entries()) {
    monthlyData.set(year, months.map(m => {
      const grossProfit = m.revenue_eur - m.cogs_eur
      const totalCosts = m.personnel_eur + m.marketing_eur + m.infra_eur
      const ebitda = grossProfit - totalCosts
      return {
        month: m.month,
        monthInYear: m.month_in_year,
        revenue: m.revenue_eur,
        cogs: m.cogs_eur,
        grossProfit,
        grossMarginPct: m.revenue_eur > 0 ? (grossProfit / m.revenue_eur) * 100 : 0,
        personnel: m.personnel_eur,
        marketing: m.marketing_eur,
        infra: m.infra_eur,
        totalCosts,
        ebitda,
        ebitdaMarginPct: m.revenue_eur > 0 ? (ebitda / m.revenue_eur) * 100 : 0,
        customers: m.total_customers,
        employees: m.employees_count,
        mrr: m.mrr_eur,
        cashBalance: m.cash_balance_eur,
      }
    }))
  }

  const handleToggleYear = (year: number) => {
    setExpandedYear(prev => prev === year ? null : year)
  }

  const tableContent = (
    <AnnualTable
      rows={rows}
      lang={lang}
      expandedYear={expandedYear}
      onToggleYear={handleToggleYear}
      monthlyData={monthlyData}
      isFullscreen={isFullscreen}
      standard={standard}
    />
  )

  return (
    <>
      <motion.div
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.4 }}
      >
        <div className="flex items-center justify-between mb-2">
          {/* HGB / US GAAP Toggle (inline) */}
          <div className="flex items-center bg-white/[0.04] border border-white/5 rounded-lg overflow-hidden">
            <button
              onClick={() => setStandard('hgb')}
              className={`px-2 py-0.5 text-[10px] font-medium transition-all ${
                standard === 'hgb'
                  ? 'bg-indigo-500/20 text-indigo-300'
                  : 'text-white/30 hover:text-white/50'
              }`}
            >
              HGB
            </button>
            <button
              onClick={() => setStandard('usgaap')}
              className={`px-2 py-0.5 text-[10px] font-medium transition-all ${
                standard === 'usgaap'
                  ? 'bg-indigo-500/20 text-indigo-300'
                  : 'text-white/30 hover:text-white/50'
              }`}
            >
              US GAAP
            </button>
          </div>
          <button
            onClick={() => setIsFullscreen(true)}
            className="flex items-center gap-1.5 px-2 py-1 bg-white/[0.06] hover:bg-white/[0.1] border border-white/10 rounded-lg text-[10px] text-white/50 hover:text-white/80 transition-all"
            title={de ? 'Vollbild' : 'Fullscreen'}
          >
            <Maximize2 className="w-3 h-3" />
            {de ? 'Vollbild' : 'Fullscreen'}
          </button>
        </div>
        <div className="overflow-x-auto">
          {tableContent}
        </div>
        <p className="text-[9px] text-white/20 mt-2 text-center">
          {de
            ? 'Klicke auf ein Jahr fuer Monatsdetails'
            : 'Click on a year for monthly details'}
        </p>
      </motion.div>

      {/* Fullscreen via Portal — escapes parent stacking context */}
      {isFullscreen && portalRoot && createPortal(
        <FullscreenOverlay
          onClose={() => setIsFullscreen(false)}
          lang={lang}
          standard={standard}
          onStandardChange={setStandard}
        >
          <AnnualTable
            rows={rows}
            lang={lang}
            expandedYear={expandedYear}
            onToggleYear={handleToggleYear}
            monthlyData={monthlyData}
            isFullscreen={true}
            standard={standard}
          />
        </FullscreenOverlay>,
        portalRoot
      )}
    </>
  )
}