'use client';

import {
  LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer, Legend
} from 'recharts';

const initialInvestment = 3500;
const years = 10;

function generateGrowthData() {
  const rates = [
    { rate: 0.05, label: '5% p.a.' },
    { rate: 0.08, label: '8% p.a.' },
    { rate: 0.12, label: '12% p.a.' },
  ];

  const data = [];
  for (let y = 0; y <= years; y++) {
    const entry: any = { year: `Year ${y}` };
    rates.forEach((r: any) => {
      entry[r?.label ?? ''] = Math.round(initialInvestment * Math.pow(1 + (r?.rate ?? 0), y));
    });
    data.push(entry);
  }
  return data;
}

const chartData = generateGrowthData();
const colors = ['#60B5FF', '#C9940A', '#80D8C3'];

export function GrowthChart() {
  return (
    <div className="w-full h-[350px]">
      <ResponsiveContainer width="100%" height="100%">
        <LineChart data={chartData} margin={{ top: 10, right: 20, left: 10, bottom: 25 }}>
          <XAxis
            dataKey="year"
            tickLine={false}
            tick={{ fontSize: 10 }}
            interval="preserveStartEnd"
            label={{ value: 'Timeline', position: 'insideBottom', offset: -15, style: { textAnchor: 'middle', fontSize: 11 } }}
          />
          <YAxis
            tickLine={false}
            tick={{ fontSize: 10 }}
            tickFormatter={(v: number) => `£${((v ?? 0) / 1000)?.toFixed?.(1) ?? '0'}k`}
            label={{ value: 'Value (£)', angle: -90, position: 'insideLeft', style: { textAnchor: 'middle', fontSize: 11 } }}
          />
          <Tooltip
            contentStyle={{ fontSize: 11, borderRadius: 8 }}
            formatter={(value: any) => [`£${(value ?? 0)?.toLocaleString?.('en-GB') ?? '0'}`, '']}
          />
          <Legend verticalAlign="top" wrapperStyle={{ fontSize: 11 }} />
          {['5% p.a.', '8% p.a.', '12% p.a.']?.map?.((key: string, i: number) => (
            <Line
              key={key}
              type="monotone"
              dataKey={key}
              stroke={colors?.[i] ?? '#C9940A'}
              strokeWidth={2.5}
              dot={false}
              activeDot={{ r: 5 }}
            />
          )) ?? []}
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}