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

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

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
];

export function PointProgressionChart({ chartData, teams }: PointProgressionChartProps) {
  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>
    );
  }

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

  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>
        <ResponsiveContainer width="100%" height={400}>
          <LineChart data={chartData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
            <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
            <XAxis
              dataKey="date"
              tickFormatter={formatDate}
              className="text-xs"
              tick={{ fill: 'currentColor' }}
            />
            <YAxis
              label={{ value: 'Points', angle: -90, position: 'insideLeft' }}
              className="text-xs"
              tick={{ fill: 'currentColor' }}
            />
            <Tooltip
              contentStyle={{
                backgroundColor: 'hsl(var(--background))',
                border: '1px solid hsl(var(--border))',
                borderRadius: '6px',
              }}
              labelFormatter={(label) => formatDate(label as string)}
              formatter={(value: number) => [value.toFixed(2), '']}
            />
            <Legend
              wrapperStyle={{ paddingTop: '20px' }}
            />
            {teams.map((team, index) => (
              <Line
                key={team.id}
                type="monotone"
                dataKey={team.name}
                stroke={COLORS[index % COLORS.length]}
                strokeWidth={2}
                dot={{ r: 3 }}
                activeDot={{ r: 5 }}
                connectNulls
              />
            ))}
          </LineChart>
        </ResponsiveContainer>
      </CardContent>
    </Card>
  );
}