breakpilot-pwa/pitch-deck/components/ui/FinancialChart.tsx

'use client'

import { FMResult, FMComputeResponse } from '@/lib/types'
import {
  XAxis,
  YAxis,
  Tooltip,
  ResponsiveContainer,
  Line,
  ComposedChart,
  Area,
  ReferenceLine,
  Brush,
} from 'recharts'

interface FinancialChartProps {
  activeResults: FMComputeResponse | null
  compareResults?: Map<string, FMComputeResponse>
  compareMode?: boolean
  scenarioColors?: Record<string, string>
  lang: 'de' | 'en'
}

export default function FinancialChart({
  activeResults,
  compareResults,
  compareMode = false,
  scenarioColors = {},
  lang,
}: FinancialChartProps) {
  if (!activeResults) {
    return (
      <div className="w-full h-[300px] flex items-center justify-center text-white/30 text-sm">
        {lang === 'de' ? 'Lade Daten...' : 'Loading data...'}
      </div>
    )
  }

  const results = activeResults.results
  const breakEvenMonth = activeResults.summary.break_even_month

  // Build chart data — monthly
  const data = results.map((r) => {
    const entry: Record<string, number | string> = {
      label: `${r.year.toString().slice(2)}/${String(r.month_in_year).padStart(2, '0')}`,
      month: r.month,
      revenue: Math.round(r.revenue_eur),
      costs: Math.round(r.total_costs_eur),
      customers: r.total_customers,
      cashBalance: Math.round(r.cash_balance_eur),
    }

    // Add compare scenario data
    if (compareMode && compareResults) {
      compareResults.forEach((cr, scenarioId) => {
        const crMonth = cr.results.find(m => m.month === r.month)
        if (crMonth) {
          entry[`revenue_${scenarioId}`] = Math.round(crMonth.revenue_eur)
          entry[`customers_${scenarioId}`] = crMonth.total_customers
        }
      })
    }

    return entry
  })

  const formatValue = (value: number) => {
    if (Math.abs(value) >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`
    if (Math.abs(value) >= 1_000) return `${(value / 1_000).toFixed(0)}k`
    return value.toString()
  }

  return (
    <div className="w-full h-[300px]">
      <ResponsiveContainer width="100%" height="100%">
        <ComposedChart data={data} margin={{ top: 10, right: 50, left: 0, bottom: 0 }}>
          <defs>
            <linearGradient id="fmRevenueGradient" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#6366f1" stopOpacity={0.6} />
              <stop offset="100%" stopColor="#6366f1" stopOpacity={0.05} />
            </linearGradient>
            <linearGradient id="fmCostGradient" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#f43f5e" stopOpacity={0.4} />
              <stop offset="100%" stopColor="#f43f5e" stopOpacity={0.05} />
            </linearGradient>
          </defs>

          <XAxis
            dataKey="label"
            stroke="rgba(255,255,255,0.2)"
            tick={{ fill: 'rgba(255,255,255,0.4)', fontSize: 9 }}
            interval={5}
          />
          <YAxis
            yAxisId="left"
            stroke="rgba(255,255,255,0.1)"
            tick={{ fill: 'rgba(255,255,255,0.4)', fontSize: 10 }}
            tickFormatter={formatValue}
          />
          <YAxis
            yAxisId="right"
            orientation="right"
            stroke="rgba(255,255,255,0.1)"
            tick={{ fill: 'rgba(34,197,94,0.5)', fontSize: 10 }}
          />

          <Tooltip
            contentStyle={{
              background: 'rgba(10, 10, 26, 0.95)',
              border: '1px solid rgba(255,255,255,0.1)',
              borderRadius: 12,
              color: '#fff',
              fontSize: 11,
              backdropFilter: 'blur(12px)',
            }}
            formatter={(value: number, name: string) => {
              const label = name === 'revenue' ? (lang === 'de' ? 'Umsatz' : 'Revenue')
                : name === 'costs' ? (lang === 'de' ? 'Kosten' : 'Costs')
                : name === 'customers' ? (lang === 'de' ? 'Kunden' : 'Customers')
                : name === 'cashBalance' ? 'Cash'
                : name
              return [name === 'customers' ? value : formatValue(value) + ' EUR', label]
            }}
          />

          {/* Break-even reference line */}
          {breakEvenMonth && (
            <ReferenceLine
              x={data[breakEvenMonth - 1]?.label}
              yAxisId="left"
              stroke="#22c55e"
              strokeDasharray="5 5"
              label={{
                value: 'Break-Even',
                fill: '#22c55e',
                fontSize: 10,
                position: 'insideTopRight',
              }}
            />
          )}

          {/* Revenue area */}
          <Area
            yAxisId="left"
            type="monotone"
            dataKey="revenue"
            fill="url(#fmRevenueGradient)"
            stroke="#6366f1"
            strokeWidth={2}
          />

          {/* Cost area */}
          <Area
            yAxisId="left"
            type="monotone"
            dataKey="costs"
            fill="url(#fmCostGradient)"
            stroke="#f43f5e"
            strokeWidth={1.5}
            strokeDasharray="4 4"
          />

          {/* Customers line */}
          <Line
            yAxisId="right"
            type="monotone"
            dataKey="customers"
            stroke="#22c55e"
            strokeWidth={2}
            dot={false}
          />

          {/* Compare mode: overlay other scenarios */}
          {compareMode && compareResults && Array.from(compareResults.entries()).map(([scenarioId]) => (
            <Line
              key={`rev_${scenarioId}`}
              yAxisId="left"
              type="monotone"
              dataKey={`revenue_${scenarioId}`}
              stroke={scenarioColors[scenarioId] || '#888'}
              strokeWidth={1.5}
              strokeOpacity={0.5}
              dot={false}
              strokeDasharray="3 3"
            />
          ))}

          {/* Brush for zooming */}
          <Brush
            dataKey="label"
            height={20}
            stroke="rgba(99,102,241,0.4)"
            fill="rgba(0,0,0,0.3)"
            travellerWidth={8}
          />
        </ComposedChart>
      </ResponsiveContainer>
    </div>
  )
}