'use client';

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts';
import { VelocityTrend } from '@/services/metrics';

interface VelocityTrendChartProps {
  data: VelocityTrend[];
  className?: string;
}

export function VelocityTrendChart({ data, className }: VelocityTrendChartProps) {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const CustomTooltip = ({ active, payload, label }: { active?: boolean; payload?: any[]; label?: string }) => {
    if (active && payload && payload.length) {
      const data = payload[0].payload;
      return (
        <div className="bg-[var(--card)] border border-[var(--border)] rounded-lg p-3 shadow-lg">
          <p className="font-medium mb-2">{`Semaine du ${label}`}</p>
          <p className="text-sm text-green-600">
            Terminées: {data.completed}
          </p>
          <p className="text-sm text-blue-600">
            Créées: {data.created}
          </p>
          <p className="text-sm text-purple-600">
            Vélocité: {data.velocity.toFixed(1)}%
          </p>
        </div>
      );
    }
    return null;
  };

  return (
    <div className={className}>
      <ResponsiveContainer width="100%" height={300}>
        <LineChart
          data={data}
          margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
        >
          <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
          <XAxis 
            dataKey="date" 
            stroke="var(--muted-foreground)"
            fontSize={12}
          />
          <YAxis 
            yAxisId="count"
            stroke="var(--muted-foreground)"
            fontSize={12}
            orientation="left"
          />
          <YAxis 
            yAxisId="velocity"
            stroke="var(--muted-foreground)"
            fontSize={12}
            orientation="right"
            domain={[0, 100]}
            tickFormatter={(value) => `${value}%`}
          />
          <Tooltip content={<CustomTooltip />} />
          <Legend />
          <Line 
            yAxisId="count"
            type="monotone" 
            dataKey="completed" 
            stroke="#10b981" 
            strokeWidth={2}
            dot={{ fill: "#10b981", strokeWidth: 2, r: 4 }}
            name="Terminées"
          />
          <Line 
            yAxisId="count"
            type="monotone" 
            dataKey="created" 
            stroke="#3b82f6" 
            strokeWidth={2}
            dot={{ fill: "#3b82f6", strokeWidth: 2, r: 4 }}
            name="Créées"
          />
          <Line 
            yAxisId="velocity"
            type="monotone" 
            dataKey="velocity" 
            stroke="#8b5cf6" 
            strokeWidth={3}
            dot={{ fill: "#8b5cf6", strokeWidth: 2, r: 5 }}
            name="Vélocité (%)"
            strokeDasharray="5 5"
          />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}