interface CommitInfo {
  date: string;
  count: number;
}

interface CommitTimelineProps {
  commits: CommitInfo[];
  title?: string;
  className?: string;
}

export function CommitTimeline({ commits, title, className }: CommitTimelineProps) {
  const maxValue = Math.max(...commits.map(c => c.count), 1);
  const minDate = new Date(Math.min(...commits.map(c => new Date(c.date).getTime())));
  const maxDate = new Date(Math.max(...commits.map(c => new Date(c.date).getTime())));
  
  const datesUsed = new Set(commits.map(c => c.date));
  const today = new Date();
  const daysInRange = Math.ceil((today.getTime() - minDate.getTime()) / (1000 * 60 * 60 * 24));

  // Create the grid of days
  const calendarDays: { date: Date; hasCommits?: boolean }[] = [];
  const start = new Date(minDate);
  start.setDate(start.getDate() - (start.getDay() || 7)); // Start at previous Sunday
  
  for (let i = 0; i < daysInRange + start.getDay(); i++) {
    const date = new Date(start.getTime() + i * 24 * 60 * 60 * 1000);
    const dateStr = date.toISOString().split('T')[0];
    calendarDays.push({
      date,
      hasCommits: datesUsed.has(dateStr),
    });
  }

  const weeks = Math.ceil(calendarDays.length / 7);
  const dayLabels = ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'];

  return (
    <div className={className}>
      <h4 className="text-sm font-semibold mb-4">{title || "Historique des commits"}</h4>
      <div className="flex gap-1 overflow-x-auto pb-2">
        <div className="flex flex-col gap-1 mr-2">
          {Array.from({ length: 7 }).map((_, i) => (
            <div key={i} className="w-4 h-4 flex items-center justify-center">
              <span className="text-[10px] text-muted-foreground">{dayLabels[i]}</span>
            </div>
          ))}
        </div>
        <div className="flex gap-1">
          {Array.from({ length: weeks }).map((_, weekIndex) => (
            <div key={weekIndex} className="flex flex-col gap-1">
              {Array.from({ length: 7 }).map((_, dayIndex) => {
                const cellIndex = weekIndex * 7 + dayIndex;
                const cell = calendarDays[cellIndex];
                
                if (!cell) return <div key={cellIndex} className="w-3 h-3" />;
                
                return (
                  <div
                    key={cellIndex}
                    className={`w-3 h-3 rounded-sm ${
                      cell.hasCommits
                        ? 'bg-[#39d353]'
                        : 'bg-[#ebedf0]'
                    }`}
                    title={`${cell.date.toISOString().split("T")[0]}: ${cell.hasCommits ? commits.find((c) => c.date === cell.date.toISOString().split("T")[0])?.count || 0 : 0} commits`}
                  />
                );
              })}
            </div>
          ))}
        </div>
      </div>
      
      <div className="flex items-center justify-end mt-2 text-xs text-muted-foreground gap-1">
        <span>Moins</span>
        <div className="w-3 h-3 rounded-sm bg-[#ebedf0]" />
        <div className="w-3 h-3 rounded-sm bg-[#9be9a8]" />
        <div className="w-3 h-3 rounded-sm bg-[#40c463]" />
        <div className="w-3 h-3 rounded-sm bg-[#30a14e]" />
        <div className="w-3 h-3 rounded-sm bg-[#216e3a]" />
        <span>Plus</span>
      </div>
    </div>
  );
}
