'use client';

import { DailyMetrics } from '@/services/analytics/metrics';
import { parseDate, isToday } from '@/lib/date-utils';

interface WeeklyActivityHeatmapProps {
  data: DailyMetrics[];
  className?: string;
}

export function WeeklyActivityHeatmap({
  data,
  className,
}: WeeklyActivityHeatmapProps) {
  // Calculer l'intensité max pour la normalisation
  const maxActivity = Math.max(
    ...data.map((day) => day.completed + day.newTasks)
  );

  // Obtenir l'intensité relative (0-1)
  const getIntensity = (day: DailyMetrics) => {
    const activity = day.completed + day.newTasks;
    return maxActivity > 0 ? activity / maxActivity : 0;
  };

  // Obtenir la couleur basée sur l'intensité
  const getColorStyle = (intensity: number) => {
    if (intensity === 0) return { backgroundColor: 'var(--gray-light)' };
    if (intensity < 0.2)
      return {
        backgroundColor: 'color-mix(in srgb, var(--green) 20%, transparent)',
      };
    if (intensity < 0.4)
      return {
        backgroundColor: 'color-mix(in srgb, var(--green) 40%, transparent)',
      };
    if (intensity < 0.6)
      return {
        backgroundColor: 'color-mix(in srgb, var(--green) 60%, transparent)',
      };
    if (intensity < 0.8)
      return {
        backgroundColor: 'color-mix(in srgb, var(--green) 80%, transparent)',
      };
    return { backgroundColor: 'var(--green)' };
  };

  return (
    <div className={className}>
      <div className="space-y-4">
        {/* Titre */}
        <div className="text-center">
          <h4 className="text-sm font-medium text-[var(--foreground)] mb-2">
            Heatmap d&apos;activité hebdomadaire
          </h4>
          <p className="text-xs text-[var(--muted-foreground)]">
            Intensité basée sur les tâches complétées + nouvelles tâches
          </p>
        </div>

        {/* Heatmap */}
        <div className="flex justify-center">
          <div className="flex gap-1">
            {data.map((day, index) => {
              const intensity = getIntensity(day);
              const colorStyle = getColorStyle(intensity);
              const totalActivity = day.completed + day.newTasks;

              return (
                <div key={index} className="text-center">
                  {/* Carré de couleur */}
                  <div
                    className="w-8 h-8 rounded border border-[var(--border)] flex items-center justify-center transition-all hover:scale-110 cursor-help group relative"
                    style={colorStyle}
                    title={`${day.dayName}: ${totalActivity} activités (${day.completed} complétées, ${day.newTasks} créées)`}
                  >
                    {/* Tooltip au hover */}
                    <div className="opacity-0 group-hover:opacity-100 absolute bottom-10 left-1/2 transform -translate-x-1/2 bg-[var(--card)] border border-[var(--border)] rounded p-2 text-xs whitespace-nowrap z-10 shadow-lg transition-opacity">
                      <div className="font-medium">{day.dayName}</div>
                      <div className="text-[var(--muted-foreground)]">
                        {day.completed} terminées, {day.newTasks} créées
                      </div>
                      <div className="text-[var(--muted-foreground)]">
                        Taux: {day.completionRate.toFixed(1)}%
                      </div>
                    </div>

                    {/* Indicator si jour actuel */}
                    {isToday(parseDate(day.date)) && (
                      <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
                    )}
                  </div>

                  {/* Label du jour */}
                  <div className="text-xs text-[var(--muted-foreground)] mt-1">
                    {day.dayName.substring(0, 3)}
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        {/* Légende */}
        <div className="flex items-center justify-center gap-2 text-xs text-[var(--muted-foreground)]">
          <span>Moins</span>
          <div className="flex gap-1">
            <div
              className="w-3 h-3 border border-[var(--border)] rounded"
              style={{ backgroundColor: 'var(--gray-light)' }}
            ></div>
            <div
              className="w-3 h-3 border border-[var(--border)] rounded"
              style={{
                backgroundColor:
                  'color-mix(in srgb, var(--green) 20%, transparent)',
              }}
            ></div>
            <div
              className="w-3 h-3 border border-[var(--border)] rounded"
              style={{
                backgroundColor:
                  'color-mix(in srgb, var(--green) 40%, transparent)',
              }}
            ></div>
            <div
              className="w-3 h-3 border border-[var(--border)] rounded"
              style={{
                backgroundColor:
                  'color-mix(in srgb, var(--green) 60%, transparent)',
              }}
            ></div>
            <div
              className="w-3 h-3 border border-[var(--border)] rounded"
              style={{
                backgroundColor:
                  'color-mix(in srgb, var(--green) 80%, transparent)',
              }}
            ></div>
            <div
              className="w-3 h-3 border border-[var(--border)] rounded"
              style={{ backgroundColor: 'var(--green)' }}
            ></div>
          </div>
          <span>Plus</span>
        </div>

        {/* Stats rapides */}
        <div className="grid grid-cols-3 gap-2 text-center text-xs">
          <div className="p-2 bg-[var(--card)] rounded border">
            <div className="font-medium text-green-600">
              {data.reduce((sum, day) => sum + day.completed, 0)}
            </div>
            <div className="text-[var(--muted-foreground)]">Terminées</div>
          </div>
          <div className="p-2 bg-[var(--card)] rounded border">
            <div className="font-medium text-blue-600">
              {data.reduce((sum, day) => sum + day.newTasks, 0)}
            </div>
            <div className="text-[var(--muted-foreground)]">Créées</div>
          </div>
          <div className="p-2 bg-[var(--card)] rounded border">
            <div className="font-medium text-purple-600">
              {(
                data.reduce((sum, day) => sum + day.completionRate, 0) /
                data.length
              ).toFixed(1)}
              %
            </div>
            <div className="text-[var(--muted-foreground)]">Taux moyen</div>
          </div>
        </div>
      </div>
    </div>
  );
}
