'use client';

import { format } from 'date-fns';
import { fr } from 'date-fns/locale';
import { TagDisplay } from '@/components/ui/TagDisplay';
import { PriorityBadge } from '@/components/ui/PriorityBadge';
import { Tag } from '@/lib/types';
import { Emoji } from '@/components/ui/Emoji';

export interface AchievementData {
  id: string;
  title: string;
  description?: string;
  impact: 'low' | 'medium' | 'high';
  completedAt: Date;
  updatedAt: Date;
  tags?: string[];
  todosCount?: number;
}

interface AchievementCardProps {
  achievement: AchievementData;
  availableTags: (Tag & { usage: number })[];
  index: number;
  showDescription?: boolean;
  maxTags?: number;
  className?: string;
}

export function AchievementCard({
  achievement,
  availableTags,
  index,
  showDescription = true,
  maxTags = 2,
  className = '',
}: AchievementCardProps) {
  // Détecter si c'est un todo (ID commence par "todo-")
  const isTodo = achievement.id.startsWith('todo-');

  return (
    <div
      className={`relative border border-[var(--border)] rounded-lg p-3 transition-all duration-200 group ${className}`}
      style={{
        backgroundColor: isTodo
          ? 'color-mix(in srgb, var(--accent) 8%, var(--card))'
          : 'color-mix(in srgb, var(--success) 5%, var(--card))',
      }}
    >
      {/* Barre colorée gauche */}
      <div className="absolute left-0 top-0 bottom-0 w-1 bg-green-500 rounded-l-lg"></div>

      {/* Header compact */}
      <div className="flex items-center justify-between mb-2">
        <div className="flex items-center gap-2">
          <span className="w-5 h-5 rounded-full text-xs font-bold flex items-center justify-center text-[var(--success)] bg-[var(--success)]/15 border border-[var(--success)]/25">
            #{index + 1}
          </span>
          <PriorityBadge priority={achievement.impact} />
        </div>
        <div className="text-xs text-[var(--muted-foreground)] text-right">
          <div>
            Terminé: {format(achievement.completedAt, 'dd/MM', { locale: fr })}
          </div>
          {achievement.updatedAt &&
            achievement.updatedAt.getTime() !==
              achievement.completedAt.getTime() && (
              <div>
                Mis à jour:{' '}
                {format(achievement.updatedAt, 'dd/MM', { locale: fr })}
              </div>
            )}
        </div>
      </div>

      {/* Titre */}
      <h4 className="font-semibold text-sm text-[var(--foreground)] mb-2 line-clamp-2">
        {achievement.title}
      </h4>

      {/* Tags */}
      {achievement.tags && achievement.tags.length > 0 && (
        <div className="mb-2">
          <TagDisplay
            tags={achievement.tags}
            availableTags={availableTags as Tag[]}
            size="sm"
            maxTags={maxTags}
          />
        </div>
      )}

      {/* Description si disponible */}
      {showDescription && achievement.description && (
        <p className="text-xs text-[var(--muted-foreground)] line-clamp-2 leading-relaxed mb-2">
          {achievement.description}
        </p>
      )}

      {/* Count de todos - seulement pour les tâches, pas pour les todos standalone */}
      {!isTodo &&
        achievement.todosCount !== undefined &&
        achievement.todosCount > 0 && (
          <div className="flex items-center gap-1 text-xs text-[var(--muted-foreground)]">
            <span>
              <Emoji emoji="📋" />
            </span>
            <span>
              {achievement.todosCount} todo
              {achievement.todosCount > 1 ? 's' : ''}
            </span>
          </div>
        )}
    </div>
  );
}
