brackt/app/components/standings/PointProgressionChart.tsx

import { LineChart, Line, XAxis, YAxis, CartesianGrid, ResponsiveContainer } from 'recharts';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "~/components/ui/card";
import { useState } from "react";

interface LegendPayload {
  value: string;
  color: string;
}

interface CustomLegendProps {
  payload: LegendPayload[];
  onHover: (dataKey: string | null) => void;
  onLeave: () => void;
}

function CustomLegend({ payload, onHover, onLeave }: CustomLegendProps) {
  return (
    <div className="flex flex-wrap md:flex-col gap-3 px-4" role="group" aria-label="Chart legend">
      {payload.map((entry) => (
        <div
          key={entry.value}
          className="flex items-center gap-2 cursor-pointer transition-opacity hover:opacity-80"
          style={{ color: entry.color }}
          onMouseEnter={() => onHover(entry.value)}
          onMouseLeave={onLeave}
          role="button"
          aria-label={`Highlight ${entry.value} line`}
          tabIndex={0}
          onKeyDown={(e) => {
            if (e.key === 'Enter' || e.key === ' ') {
              e.preventDefault();
              onHover(entry.value);
            }
          }}
          onKeyUp={(e) => {
            if (e.key === 'Enter' || e.key === ' ') {
              e.preventDefault();
              onLeave();
            }
          }}
        >
          <span
            className="w-3 h-3 rounded-full"
            style={{ backgroundColor: entry.color }}
            aria-hidden="true"
          />
          <span className="text-sm font-medium">{entry.value}</span>
        </div>
      ))}
    </div>
  );
}

interface Team {
  id: string;
  name: string;
}

export interface ChartDataPoint {
  date: string;
  [teamName: string]: string | number;
}

interface PointProgressionChartProps {
  chartData: ChartDataPoint[];
  teams: Team[];
}

// Color palette for team lines
const COLORS = [
  '#3b82f6', // blue
  '#ef4444', // red
  '#10b981', // green
  '#f59e0b', // amber
  '#8b5cf6', // violet
  '#ec4899', // pink
  '#06b6d4', // cyan
  '#f97316', // orange
  '#84cc16', // lime
  '#6366f1', // indigo
];

function formatDate(dateStr: string) {
  const date = new Date(dateStr);
  return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
}

export function PointProgressionChart({ chartData, teams }: PointProgressionChartProps) {
  const [hoveredLine, setHoveredLine] = useState<string | null>(null);

  if (chartData.length === 0) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>Point Progression</CardTitle>
          <CardDescription>Track how team standings evolved over time</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="text-center py-12 text-muted-foreground">
            <p>No historical data available yet.</p>
            <p className="text-sm mt-2">Point progression will appear once daily snapshots are recorded.</p>
          </div>
        </CardContent>
      </Card>
    );
  }

  const latestData = chartData[chartData.length - 1];
  const teamsByRank = [...teams].toSorted((a, b) => {
    const aPoints = (typeof latestData[a.name] === 'number' ? latestData[a.name] : 0) as number;
    const bPoints = (typeof latestData[b.name] === 'number' ? latestData[b.name] : 0) as number;
    return bPoints - aPoints;
  });

  return (
    <Card>
      <CardHeader>
        <CardTitle>Point Progression</CardTitle>
        <CardDescription>
          Track how team standings evolved over time ({chartData.length} day{chartData.length !== 1 ? 's' : ''} of data)
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="flex flex-col md:flex-row md:items-center gap-6">
          <div className="flex-1 min-w-0">
            <ResponsiveContainer width="100%" height={400}>
              <LineChart data={chartData} margin={{ top: 5, right: 10, left: 0, bottom: 5 }}>
                <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
                <XAxis
                  dataKey="date"
                  tickFormatter={formatDate}
                  className="text-xs"
                  tick={{ fill: 'currentColor' }}
                />
                <YAxis
                  width={40}
                  className="text-xs"
                  tick={{ fill: 'currentColor' }}
                />
                {teams.map((team, index) => (
                  <Line
                    key={team.id}
                    type="monotone"
                    dataKey={team.name}
                    stroke={COLORS[index % COLORS.length]}
                    strokeWidth={2}
                    dot={false}
                    activeDot={false}
                    strokeOpacity={hoveredLine === null || hoveredLine === team.name ? 1 : 0.1}
                    isAnimationActive={false}
                    connectNulls
                  />
                ))}
              </LineChart>
            </ResponsiveContainer>
          </div>
          <CustomLegend
            payload={teamsByRank.map((team) => ({ value: team.name, color: COLORS[teams.findIndex(t => t.id === team.id) % COLORS.length] }))}
            onHover={setHoveredLine}
            onLeave={() => setHoveredLine(null)}
          />
        </div>
      </CardContent>
    </Card>
  );
}