'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';

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) {
  return (
    <div className={`relative bg-[var(--card)] border border-[var(--border)] rounded-lg p-3 transition-all duration-200 group ${className}`}>
      {/* 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 */}
      {achievement.todosCount !== undefined && achievement.todosCount > 0 && (
        <div className="flex items-center gap-1 text-xs text-[var(--muted-foreground)]">
          <span>📋</span>
          <span>{achievement.todosCount} todo{achievement.todosCount > 1 ? 's' : ''}</span>
        </div>
      )}
    </div>
  );
}