import {
  CartesianGrid,
  Legend,
  Line,
  LineChart,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from 'recharts'
import type { calculateAnnualScenario } from './model'

function RevenueChart({ data }: { data: ReturnType<typeof calculateAnnualScenario> }) {
  return (
    <div className="chart-shell" aria-label="Annual GPU cloud and AI lab revenue chart">
      <ResponsiveContainer width="100%" height="100%">
        <LineChart data={data} margin={{ top: 18, right: 12, left: 0, bottom: 8 }}>
          <CartesianGrid stroke="#d9d9d2" vertical={false} />
          <XAxis dataKey="year" tickLine={false} axisLine={false} tick={{ fill: '#555', fontSize: 12 }} />
          <YAxis
            yAxisId="cloud"
            tickLine={false}
            axisLine={false}
            width={48}
            tickFormatter={(value) => `$${value}B`}
            tick={{ fill: '#555', fontSize: 11 }}
          />
          <YAxis
            yAxisId="lab"
            orientation="right"
            tickLine={false}
            axisLine={false}
            width={54}
            tickFormatter={(value) => `$${value}B`}
            tick={{ fill: '#555', fontSize: 11 }}
          />
          <Tooltip
            contentStyle={{ borderRadius: 4, border: '1px solid #171717', boxShadow: 'none', fontSize: 12 }}
            formatter={(value, name) => [`$${Number(value ?? 0).toFixed(1)}B`, String(name)]}
          />
          <Legend iconType="plainline" wrapperStyle={{ fontSize: 12 }} />
          <Line yAxisId="cloud" type="monotone" dataKey="cloudB" name="GPU cloud revenue" stroke="#2458d3" strokeWidth={3} dot={{ r: 3 }} />
          <Line yAxisId="cloud" type="monotone" dataKey="ebitB" name="GPU cloud EBIT" stroke="#11966b" strokeWidth={2} dot={{ r: 2 }} />
          <Line yAxisId="lab" type="monotone" dataKey="labB" name="AI lab revenue capacity" stroke="#ee6037" strokeWidth={3} dot={{ r: 3 }} />
        </LineChart>
      </ResponsiveContainer>
    </div>
  )
}

export default RevenueChart