'use client';

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

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

export function VelocityTrendChart({
  data,
  className,
}: VelocityTrendChartProps) {
  const CustomTooltip = ({
    active,
    payload,
    label,
  }: {
    active?: boolean;
    payload?: Array<{
      payload: {
        date: string;
        completed: number;
        created: number;
        velocity: number;
      };
    }>;
    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>
  );
}
