'use client'

import { PitchFinancial, Language } from '@/lib/types'
import { t } from '@/lib/i18n'
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  Tooltip,
  ResponsiveContainer,
  Line,
  ComposedChart,
  Area,
} from 'recharts'

interface FinancialChartProps {
  financials: PitchFinancial[]
  lang: Language
  growthMultiplier?: number
}

export default function FinancialChart({ financials, lang, growthMultiplier = 1 }: FinancialChartProps) {
  const i = t(lang)

  const data = financials.map((f) => ({
    year: f.year,
    [i.financials.revenue]: Math.round(f.revenue_eur * growthMultiplier),
    [i.financials.costs]: f.costs_eur,
    [i.financials.customers]: Math.round(f.customers_count * growthMultiplier),
  }))

  const formatValue = (value: number) => {
    if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`
    if (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: 10, left: 0, bottom: 0 }}>
          <defs>
            <linearGradient id="revenueGradient" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#6366f1" stopOpacity={0.8} />
              <stop offset="100%" stopColor="#6366f1" stopOpacity={0.2} />
            </linearGradient>
            <linearGradient id="costGradient" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#f43f5e" stopOpacity={0.6} />
              <stop offset="100%" stopColor="#f43f5e" stopOpacity={0.1} />
            </linearGradient>
          </defs>
          <XAxis dataKey="year" stroke="rgba(255,255,255,0.3)" tick={{ fill: 'rgba(255,255,255,0.5)', fontSize: 12 }} />
          <YAxis stroke="rgba(255,255,255,0.1)" tick={{ fill: 'rgba(255,255,255,0.4)', fontSize: 11 }} tickFormatter={formatValue} />
          <Tooltip
            contentStyle={{
              background: 'rgba(10, 10, 26, 0.9)',
              border: '1px solid rgba(255,255,255,0.1)',
              borderRadius: 12,
              color: '#fff',
              fontSize: 13,
            }}
            formatter={(value: number) => formatValue(value) + ' EUR'}
          />
          <Area type="monotone" dataKey={i.financials.revenue} fill="url(#revenueGradient)" stroke="#6366f1" strokeWidth={2} />
          <Bar dataKey={i.financials.costs} fill="url(#costGradient)" radius={[4, 4, 0, 0]} barSize={30} />
          <Line type="monotone" dataKey={i.financials.customers} stroke="#22c55e" strokeWidth={2} dot={{ r: 4, fill: '#22c55e' }} yAxisId={0} />
        </ComposedChart>
      </ResponsiveContainer>
    </div>
  )
}