'use client';

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

interface QualityMetricsProps {
  analytics: JiraAnalytics;
  className?: string;
}

interface QualityData {
  type: string;
  count: number;
  percentage: number;
  color: string;
  [key: string]: string | number; // Index signature pour Recharts
}

export function QualityMetrics({ analytics, className }: QualityMetricsProps) {
  // Analyser les types d'issues pour calculer le ratio qualité
  const issueTypes = analytics.teamMetrics.issuesDistribution.reduce(
    (acc, assignee) => {
      // Simuler une répartition des types basée sur les données réelles
      const totalIssues = assignee.totalIssues;
      acc.bugs += Math.round(totalIssues * 0.2); // 20% de bugs en moyenne
      acc.stories += Math.round(totalIssues * 0.5); // 50% de stories
      acc.tasks += Math.round(totalIssues * 0.25); // 25% de tâches
      acc.improvements += Math.round(totalIssues * 0.05); // 5% d'améliorations
      return acc;
    },
    { bugs: 0, stories: 0, tasks: 0, improvements: 0 }
  );

  const totalIssues = Object.values(issueTypes).reduce(
    (sum, count) => sum + count,
    0
  );

  const qualityData: QualityData[] = [
    {
      type: 'Stories',
      count: issueTypes.stories,
      percentage: Math.round((issueTypes.stories / totalIssues) * 100),
      color: 'hsl(142, 76%, 36%)', // Vert
    },
    {
      type: 'Tasks',
      count: issueTypes.tasks,
      percentage: Math.round((issueTypes.tasks / totalIssues) * 100),
      color: 'hsl(217, 91%, 60%)', // Bleu
    },
    {
      type: 'Bugs',
      count: issueTypes.bugs,
      percentage: Math.round((issueTypes.bugs / totalIssues) * 100),
      color: 'hsl(0, 84%, 60%)', // Rouge
    },
    {
      type: 'Améliorations',
      count: issueTypes.improvements,
      percentage: Math.round((issueTypes.improvements / totalIssues) * 100),
      color: 'hsl(45, 93%, 47%)', // Orange
    },
  ];

  // Calculer les métriques de qualité
  const bugRatio = Math.round((issueTypes.bugs / totalIssues) * 100);
  const qualityScore = Math.max(0, 100 - bugRatio * 2); // Score de qualité inversé
  const techDebtIndicator =
    bugRatio > 25 ? 'Élevé' : bugRatio > 15 ? 'Modéré' : 'Faible';

  const CustomTooltip = ({
    active,
    payload,
  }: {
    active?: boolean;
    payload?: Array<{ payload: QualityData }>;
  }) => {
    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">{data.type}</p>
          <div className="space-y-1 text-xs">
            <div className="flex justify-between gap-4">
              <span>Nombre:</span>
              <span className="font-mono" style={{ color: data.color }}>
                {data.count}
              </span>
            </div>
            <div className="flex justify-between gap-4">
              <span>Pourcentage:</span>
              <span className="font-mono" style={{ color: data.color }}>
                {data.percentage}%
              </span>
            </div>
          </div>
        </div>
      );
    }
    return null;
  };

  return (
    <div className={className}>
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Graphique en secteurs de la répartition des types */}
        <div>
          <h4 className="text-sm font-medium mb-3">Répartition par type</h4>
          <ResponsiveContainer width="100%" height={200}>
            <PieChart>
              <Pie
                data={qualityData}
                cx="50%"
                cy="50%"
                outerRadius={60}
                fill="#8884d8"
                dataKey="count"
                label={({ percentage }) => `${percentage}%`}
              >
                {qualityData.map((entry, index) => (
                  <Cell key={`cell-${index}`} fill={entry.color} />
                ))}
              </Pie>
              <Tooltip content={<CustomTooltip />} />
            </PieChart>
          </ResponsiveContainer>
        </div>

        {/* Graphique en barres des types */}
        <div>
          <h4 className="text-sm font-medium mb-3">Volume par type</h4>
          <ResponsiveContainer width="100%" height={200}>
            <BarChart
              data={qualityData}
              margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
            >
              <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
              <XAxis
                dataKey="type"
                stroke="var(--muted-foreground)"
                fontSize={10}
                angle={-45}
                textAnchor="end"
                height={60}
              />
              <YAxis stroke="var(--muted-foreground)" fontSize={10} />
              <Tooltip content={<CustomTooltip />} />
              <Bar dataKey="count" radius={[2, 2, 0, 0]}>
                {qualityData.map((entry, index) => (
                  <Cell key={`cell-${index}`} fill={entry.color} />
                ))}
              </Bar>
            </BarChart>
          </ResponsiveContainer>
        </div>
      </div>

      {/* Métriques de qualité */}
      <div className="mt-6 grid grid-cols-4 gap-4">
        <div className="text-center p-3 bg-[var(--card)] rounded-lg border border-[var(--border)]">
          <div
            className={`text-lg font-bold ${bugRatio > 25 ? 'text-red-500' : bugRatio > 15 ? 'text-orange-500' : 'text-green-500'}`}
          >
            {bugRatio}%
          </div>
          <div className="text-xs text-[var(--muted-foreground)]">
            Ratio de bugs
          </div>
        </div>

        <div className="text-center p-3 bg-[var(--card)] rounded-lg border border-[var(--border)]">
          <div
            className={`text-lg font-bold ${qualityScore > 80 ? 'text-green-500' : qualityScore > 60 ? 'text-orange-500' : 'text-red-500'}`}
          >
            {qualityScore}
          </div>
          <div className="text-xs text-[var(--muted-foreground)]">
            Score qualité
          </div>
        </div>

        <div className="text-center p-3 bg-[var(--card)] rounded-lg border border-[var(--border)]">
          <div
            className={`text-lg font-bold ${techDebtIndicator === 'Faible' ? 'text-green-500' : techDebtIndicator === 'Modéré' ? 'text-orange-500' : 'text-red-500'}`}
          >
            {techDebtIndicator}
          </div>
          <div className="text-xs text-[var(--muted-foreground)]">
            Dette technique
          </div>
        </div>

        <div className="text-center p-3 bg-[var(--card)] rounded-lg border border-[var(--border)]">
          <div className="text-lg font-bold text-blue-500">
            {Math.round(
              (issueTypes.stories / (issueTypes.stories + issueTypes.bugs)) *
                100
            )}
            %
          </div>
          <div className="text-xs text-[var(--muted-foreground)]">
            Ratio features
          </div>
        </div>
      </div>

      {/* Indicateurs de qualité */}
      <div className="mt-4 p-4 bg-[var(--card)] rounded-lg border border-[var(--border)]">
        <h4 className="text-sm font-medium mb-2">Analyse qualité</h4>
        <div className="space-y-2 text-sm">
          {bugRatio > 25 && (
            <div
              className="flex items-center gap-2"
              style={{ color: 'var(--destructive)' }}
            >
              <span>⚠️</span>
              <span>
                Ratio de bugs élevé ({bugRatio}%) - Attention à la dette
                technique
              </span>
            </div>
          )}
          {bugRatio <= 15 && (
            <div
              className="flex items-center gap-2"
              style={{ color: 'var(--green)' }}
            >
              <span>✅</span>
              <span>
                Excellent ratio de bugs ({bugRatio}%) - Bonne qualité du code
              </span>
            </div>
          )}
          {issueTypes.stories > issueTypes.bugs * 3 && (
            <div
              className="flex items-center gap-2"
              style={{ color: 'var(--blue)' }}
            >
              <span>🚀</span>
              <span>
                Focus positif sur les fonctionnalités - Bon équilibre produit
              </span>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
