`src/components/charts/MSRPChangeChart.tsx`

88 lines
'use client';

import { ResponsiveContainer, LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ReferenceLine } from 'recharts';
import { formatCurrency, formatDate } from '@/lib/utils';

interface MSRPPoint {
  captured_date: string;
  msrp_amount: number;
  region_code: string;
}

interface MSRPChangeChartProps {
  data: MSRPPoint[];
  title?: string;
}

const REGION_COLORS: Record<string, string> = {
  US: '#c89b3c',
  EU: '#6366f1',
  UK: '#22c55e',
  CH: '#f59e0b',
  JP: '#ec4899',
  HK: '#14b8a6',
};

const CustomTooltip = ({ active, payload, label }: any) => {
  if (!active || !payload?.length) return null;
  return (
    <div className="bg-navy-800 border border-navy-600 rounded-lg p-3 shadow-xl">
      <p className="text-xs text-navy-300 mb-1">{formatDate(label)}</p>
      {payload.map((entry: any, i: number) => (
        <p key={i} className="text-sm" style={{ color: entry.color }}>
          {entry.name}: {formatCurrency(entry.value)}
        </p>
      ))}
    </div>
  );
};

export default function MSRPChangeChart({ data, title }: MSRPChangeChartProps) {
  if (!data?.length) {
    return (
      <div className="bg-navy-800/50 rounded-xl border border-navy-700 p-8 text-center">
        <p className="text-navy-400">No MSRP history available</p>
      </div>
    );
  }

  // Group by region, pivot to { date, US: val, EU: val, ... }
  const dateMap = new Map<string, Record<string, number>>();
  for (const p of data) {
    if (!dateMap.has(p.captured_date)) dateMap.set(p.captured_date, {});
    dateMap.get(p.captured_date)![p.region_code] = p.msrp_amount;
  }

  const chartData = Array.from(dateMap.entries())
    .map(([date, regions]) => ({ date, ...regions }))
    .sort((a, b) => a.date.localeCompare(b.date));

  const regions = [...new Set(data.map((p) => p.region_code))];

  return (
    <div className="bg-navy-800/50 rounded-xl border border-navy-700 p-4">
      {title && <h3 className="text-lg font-semibold text-white mb-4">{title}</h3>}
      <ResponsiveContainer width="100%" height={350}>
        <LineChart data={chartData} margin={{ top: 5, right: 20, bottom: 5, left: 20 }}>
          <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" />
          <XAxis dataKey="date" tickFormatter={(v) => formatDate(v)} stroke="#64748b" fontSize={11} />
          <YAxis tickFormatter={(v) => `$${(v / 1000).toFixed(0)}k`} stroke="#64748b" fontSize={11} />
          <Tooltip content={<CustomTooltip />} />
          {regions.map((region) => (
            <Line
              key={region}
              type="stepAfter"
              dataKey={region}
              name={region}
              stroke={REGION_COLORS[region] || '#64748b'}
              strokeWidth={2}
              dot={false}
              connectNulls
            />
          ))}
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}