'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 ChallengeData {
  id: string;
  title: string;
  description?: string;
  priority: 'low' | 'medium' | 'high';
  deadline?: Date;
  tags?: string[];
  todosCount?: number;
  blockers?: string[];
}

interface ChallengeCardProps {
  challenge: ChallengeData;
  availableTags: (Tag & { usage: number })[];
  index: number;
  showDescription?: boolean;
  maxTags?: number;
  className?: string;
}

export function ChallengeCard({
  challenge,
  availableTags,
  index,
  showDescription = true,
  maxTags = 2,
  className = '',
}: ChallengeCardProps) {
  return (
    <div
      className={`relative border border-[var(--border)] rounded-lg p-3 transition-all duration-200 group ${className}`}
      style={{
        backgroundColor:
          'color-mix(in srgb, var(--destructive) 5%, var(--card))',
      }}
    >
      {/* Barre colorée gauche */}
      <div className="absolute left-0 top-0 bottom-0 w-1 bg-orange-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(--accent)] bg-[var(--accent)]/15 border border-[var(--accent)]/25">
            #{index + 1}
          </span>
          <PriorityBadge priority={challenge.priority} />
        </div>
        {challenge.deadline && (
          <span className="text-xs text-[var(--muted-foreground)]">
            {format(challenge.deadline, 'dd/MM', { locale: fr })}
          </span>
        )}
      </div>

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

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

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

      {/* Count de todos */}
      {challenge.todosCount !== undefined && challenge.todosCount > 0 && (
        <div className="flex items-center gap-1 text-xs text-[var(--muted-foreground)]">
          <span>
            <Emoji emoji="📋" />
          </span>
          <span>
            {challenge.todosCount} todo{challenge.todosCount > 1 ? 's' : ''}
          </span>
        </div>
      )}
    </div>
  );
}
