type CommitsByDate = { date: string; count: number };
type CommitsByDayOfWeek = { day: number; count: number };
type CommitsByMonth = { month: number; count: number };
type CommitsByHourOfDay = { hour: number; count: number };
type FilesByType = { type: string; count: number };

function formatDateFr(dateStr: string): string {
  const d = new Date(dateStr);
  return d.toLocaleDateString("fr-FR", { day: "numeric", month: "short" });
}

function formatHourFr(hour: number): string {
  return `${hour.toString().padStart(2, "0")}h00`;
}
  
  interface CommitsByDateProps {
    commits: CommitsByDate[];
    className?: string;
  }
  
  export function CommitsByDateChart({ commits, className }: CommitsByDateProps) {
    const sortedCommits = [...commits].sort(
      (a, b) =>
        new Date(a.date).getTime() - new Date(b.date).getTime()
    );
  
    const maxValue = Math.max(...sortedCommits.map(c => c.count), 1);
    const labels = sortedCommits.map((c) => formatDateFr(c.date));
  
    return { commits };
  }
  
  interface CommitsByDayOfWeekProps {
    commits: CommitsByDayOfWeek[];
    className?: string;
  }
  
  export function CommitsByDayOfWeekChart({ commits, className }: CommitsByDayOfWeekProps) {
    const maxValue = Math.max(...commits.map(p => p.count), 1);
    const days = [
      'Dimanche',
      'Lundi',
      'Mardi',
      'Mercredi',
      'Jeudi',
      'Vendredi',
      'Samedi'
    ];
  
    const data = days.map((day, idx) => {
      const found = commits.find(p => p.day === idx);
      return {
        day: day,
        count: found ? found.count : 0,
        percentage: found ? Math.round((found.count / maxValue) * 100) : 0
      };
    }).sort((a, b) => b.count - a.count);
  
    return (
      <div className={className}>
        <h4 className="text-sm font-semibold mb-4">Jours de la semaine</h4>
        <div className="space-y-2">
          {data.map((item, idx) => (
            <div key={item.day} className="flex items-center gap-3">
              <div
                className="w-3 h-3 rounded-sm"
                style={{ backgroundColor: getDayColor(idx) }}
              />
              <span className="text-xs w-12">{item.day.substring(0, 3)}</span>
              <div className="flex-1 bg-muted rounded-full h-2">
                <div
                  className="h-full rounded-full"
                  style={{
                    width: `${item.percentage}%`,
                    backgroundColor: getDayColor(idx)
                  }}
                />
              </div>
              <span className="text-xs w-8 text-right text-muted-foreground">{item.count}</span>
            </div>
          ))}
        </div>
      </div>
    );
  }
  
  function getDayColor(idx: number) {
    const colors = ['#8b5cf6', '#3b82f6', '#06b6d4', '#10b981', '#f59e0b', '#f97316', '#ef4444'];
    return colors[idx];
  }
  
  interface CommitsByMonthProps {
    commits: CommitsByMonth[];
    className?: string;
  }
  
  export function CommitsByMonthChart({ commits, className }: CommitsByMonthProps) {
    const months = [
      'Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Juin',
      'Juil', 'Aou', 'Sep', 'Oct', 'Nov', 'Dec'
    ];
  
    const data = months.map((month, idx) => {
      const found = commits.find(p => p.month === idx);
      return {
        month,
        count: found ? found.count : 0
      };
    });
  
    return (
      <div className={className}>
        <h4 className="text-sm font-semibold mb-4">Mois de l'année</h4>
        <div className="flex items-end gap-2 h-40">
          {data.map((item, idx) => {
            const maxValue = Math.max(...data.map(d => d.count), 1);
            const height = (item.count / maxValue) * 100;
            return (
              <div key={item.month} className="flex-1 flex flex-col items-center gap-1">
                <span className="text-xs text-muted-foreground">
                  {item.count > 0 ? item.count : ''}
                </span>
                <div
                  className="w-full bg-blue-500 rounded-t-sm"
                  style={{ height: `${height}%`, minHeight: item.count > 0 ? '24px' : '0' }}
                />
                <span className="text-xs text-muted-foreground">{item.month}</span>
              </div>
            );
          })}
        </div>
      </div>
    );
  }
  
  interface CommitsByHourOfDayProps {
    commits: CommitsByHourOfDay[];
    className?: string;
  }
  
  export function CommitsByHourOfDayChart({ commits, className }: CommitsByHourOfDayProps) {
    const maxValue = Math.max(...commits.map(p => p.count), 1);
    const hours = Array.from({ length: 24 }, (_, i) => {
      const found = commits.find(p => p.hour === i);
      return {
        hour: i,
        label: formatHourFr(i),
        count: found ? found.count : 0,
        percentage: found ? (found.count / maxValue) * 100 : 0
      };
    });
  
    return (
      <div className={className}>
        <h4 className="text-sm font-semibold mb-4">Heures de la journée</h4>
        <div className="flex items-end h-40 gap-1">
          {hours.map((item) => (
            <div key={item.hour} className="flex-1 flex flex-col items-center gap-1 min-w-[2px]">
              <div
                className="w-full bg-purple-500 rounded-t-sm"
                style={{ height: `${item.percentage > 0 ? Math.max(item.percentage * 0.8, 5) : 0}%` }}
              />
            </div>
          ))}
        </div>
        <div className="flex items-center justify-between mt-2 text-xs text-muted-foreground">
          <span>00h00</span>
          <span>12h00</span>
          <span>23h59</span>
        </div>
      </div>
    );
  }
  
  interface FilesByTypeProps {
    files: FilesByType[];
    className?: string;
  }
  
  export function FilesByTypeChart({ files, className }: FilesByTypeProps) {
    const colors = {
      src: '#3b82f6',
      css: '#8b5cf6',
      html: '#f59e0b',
      json: '#64748b',
      md: '#10b981',
      ts: '#06b6d4',
      test: '#ec4899',
      config: '#92400e',
      git: '#6b7280',
      asset: '#f97316',
      other: '#a3a3a3',
    };
  
    const sorted = [...files].sort((a, b) => b.count - a.count);
    const maxCount = sorted[0]?.count || 1;
  
    return (
      <div className={className}>
        <h4 className="text-sm font-semibold mb-4">Types de fichiers modifiés</h4>
        <div className="space-y-2">
          {sorted.map((file, idx) => {
            const percentage = (file.count / maxCount) * 100;
            const ext = file.type.toLowerCase();
            const color = colors[ext as keyof typeof colors] || '#a3a3a3';
  
            return (
              <div key={ext} className="flex items-center gap-3">
                <div
                  className="w-3 h-3 rounded-sm"
                  style={{ backgroundColor: color }}
                />
                <span className="text-xs uppercase w-12 font-mono">.{ext}</span>
                <div className="flex-1 bg-muted rounded-full h-2">
                  <div
                    className="h-full rounded-full"
                    style={{ width: `${percentage}%` }}
                  />
                </div>
                <span className="text-xs w-8 text-right text-muted-foreground">{file.count}</span>
              </div>
            );
          })}
        </div>
      </div>
    );
  }
  
  interface ActiveDaysProps {
    activeDays: number;
    totalDays: number;
    className?: string;
  }
  
  export function ActiveDaysChart({ activeDays, totalDays, className }: ActiveDaysProps) {
    const percentage = totalDays > 0 ? Math.round((activeDays / totalDays) * 100) : 0;
    const color =
      percentage > 60 ? 'text-green-500' :
      percentage > 30 ? 'text-yellow-500' :
      'text-red-500';
  
    return (
      <div className={className}>
        <h4 className="text-sm font-semibold mb-4">Jours actifs</h4>
        <div className="flex items-center gap-4">
          <div className="text-center">
            <div className={`text-3xl font-bold ${color}`}>{activeDays}</div>
            <div className="text-xs text-muted-foreground mt-1">jours actifs</div>
          </div>
          <div className="flex-1">
            <div className="text-sm text-muted-foreground mb-1">
              {percentage}% des {totalDays} jours
            </div>
            <div className="w-full bg-muted rounded-full h-3">
              <div
                className={`h-full rounded-full transition-all ${
                  percentage > 60 ? 'bg-green-500' :
                  percentage > 30 ? 'bg-yellow-500' :
                  'bg-red-500'
                }`}
                style={{ width: `${percentage}%` }}
              />
            </div>
            <div className="text-xs text-muted-foreground mt-1">
              taux d'activité
            </div>
          </div>
        </div>
      </div>
    );
  }
