'use client';

import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Cell } from 'recharts';
import { SprintVelocity } from '@/lib/types';

interface VelocityChartProps {
  sprintHistory: SprintVelocity[];
  className?: string;
  onSprintClick?: (sprint: SprintVelocity) => void;
}

export function VelocityChart({ sprintHistory, className, onSprintClick }: VelocityChartProps) {
  // Préparer les données pour le graphique
  const chartData = sprintHistory.map(sprint => ({
    name: sprint.sprintName,
    completed: sprint.completedPoints,
    planned: sprint.plannedPoints,
    completionRate: sprint.completionRate,
    sprintData: sprint // Garder la référence au sprint original
  }));

  const handleBarClick = (data: unknown) => {
    if (onSprintClick && data && typeof data === 'object' && data !== null && 'sprintData' in data) {
      const typedData = data as { sprintData: SprintVelocity };
      onSprintClick(typedData.sprintData);
    }
  };

  const CustomTooltip = ({ active, payload, label }: { 
    active?: boolean; 
    payload?: Array<{ payload: { completed: number; planned: number; completionRate: 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 text-sm mb-2">{label}</p>
          <div className="space-y-1 text-xs">
            <div className="flex justify-between gap-4">
              <span>Complétés:</span>
              <span className="font-mono text-green-500">{data.completed} pts</span>
            </div>
            <div className="flex justify-between gap-4">
              <span>Planifiés:</span>
              <span className="font-mono text-blue-500">{data.planned} pts</span>
            </div>
            <div className="flex justify-between gap-4">
              <span>Taux de réussite:</span>
              <span className="font-mono text-orange-500">{data.completionRate}%</span>
            </div>
            {onSprintClick && (
              <div className="border-t border-[var(--border)] pt-2 mt-2">
                <p className="text-xs text-[var(--muted-foreground)]">
                  🖱️ Cliquez pour voir les détails
                </p>
              </div>
            )}
          </div>
        </div>
      );
    }
    return null;
  };

  return (
    <div className={className}>
      <ResponsiveContainer width="100%" height="100%">
        <BarChart 
          data={chartData} 
          margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
        >
          <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
          <XAxis 
            dataKey="name" 
            stroke="var(--muted-foreground)"
            fontSize={12}
          />
          <YAxis 
            stroke="var(--muted-foreground)"
            fontSize={12}
          />
          <Tooltip content={<CustomTooltip />} />
          <Bar dataKey="planned" fill="var(--muted)" opacity={0.6} radius={[4, 4, 0, 0]} />
          <Bar 
            dataKey="completed" 
            fill="hsl(142, 76%, 36%)" 
            radius={[4, 4, 0, 0]}
            style={{ cursor: onSprintClick ? 'pointer' : 'default' }}
            onClick={handleBarClick}
          >
            {chartData.map((entry, index) => (
              <Cell 
                key={`cell-${index}`} 
                fill={entry.completionRate >= 80 ? 'hsl(142, 76%, 36%)' : 
                      entry.completionRate >= 60 ? 'hsl(45, 93%, 47%)' : 
                      'hsl(0, 84%, 60%)'} 
                style={{ cursor: onSprintClick ? 'pointer' : 'default' }}
              />
            ))}
          </Bar>
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}