import React from 'react';
import { TagSuggestion } from '@/lib/ai/types';
import { Loader2, Sparkles, X, CheckCircle, Plus } from 'lucide-react';
import { cn, getHashColor } from '@/lib/utils';
import { LABEL_COLORS } from '@/lib/types';
import { useLanguage } from '@/lib/i18n';

interface GhostTagsProps {
  suggestions: TagSuggestion[];
  addedTags: string[]; // Nouveauté : tags déjà présents sur la note
  isAnalyzing: boolean;
  onSelectTag: (tag: string) => void;
  onDismissTag: (tag: string) => void;
  className?: string;
}

export function GhostTags({ suggestions, addedTags, isAnalyzing, onSelectTag, onDismissTag, className }: GhostTagsProps) {
  const { t } = useLanguage()

  
  // On filtre pour l'affichage conditionnel global, mais on garde les tags ajoutés pour l'affichage visuel "validé"
  const visibleSuggestions = suggestions;

  // Show help message if not analyzing and no suggestions (but don't return null)
  const isEmpty = !isAnalyzing && visibleSuggestions.length === 0;

  // FIX: Never return null, always show something (either tags, analyzer, or help message)
  // This ensures the help message "Tapez du contenu..." is always shown when needed

  return (
    <div className={cn("flex flex-wrap items-center gap-2 mt-2 min-h-[24px] transition-all duration-500", className)}>

      {isAnalyzing && (
        <div className="flex items-center text-purple-500 animate-pulse" title={t('ai.analyzing')}>
          <Sparkles className="w-4 h-4" />
        </div>
      )}

      {/* Show message when no labels suggested */}
      {!isAnalyzing && visibleSuggestions.length === 0 && (
        <div className="text-xs text-gray-500 italic">
          {t('ai.autoLabels.typeForSuggestions')}
        </div>
      )}

      {!isAnalyzing && visibleSuggestions.map((suggestion) => {
        const isAdded = addedTags.some(t => t.toLowerCase() === suggestion.tag.toLowerCase());
        const colorName = getHashColor(suggestion.tag);
        const colorClasses = LABEL_COLORS[colorName];
        const isNewLabel = (suggestion as any).isNewLabel; // Check if this is a new label suggestion

        if (isAdded) {
            // Tag déjà ajouté : on l'affiche en mode "confirmé" statique pour ne pas perdre le focus
            return (
                <div key={suggestion.tag} className={cn("flex items-center px-3 py-1 text-xs font-medium border rounded-full opacity-50 cursor-default", colorClasses.bg, colorClasses.text, colorClasses.border)}>
                    <CheckCircle className="w-3 h-3 mr-1.5" />
                    {suggestion.tag}
                </div>
            )
        }

        return (
          <div
            key={suggestion.tag}
            className={cn(
              "group flex items-center border border-dashed rounded-full transition-all cursor-pointer animate-in fade-in zoom-in duration-300 opacity-80 hover:opacity-100",
              colorClasses.bg,
              colorClasses.border
            )}
          >
                                {/* Zone de validation (Clic principal) */}
                                <button
                                  type="button"
                                  onClick={(e) => {
                                    e.preventDefault();
                                    e.stopPropagation();
                                    onSelectTag(suggestion.tag);
                                  }}
                                  className={cn("flex items-center px-3 py-1 text-xs font-medium", colorClasses.text)}
                                  title={isNewLabel ? t('ai.autoLabels.createNewLabel') : t('ai.clickToAddTag')}
                                >
                                  {isNewLabel && <Plus className="w-3 h-3 mr-1" />}
                                  {!isNewLabel && <Sparkles className="w-3 h-3 mr-1.5 opacity-50" />}
                                  {suggestion.tag}
                                  {isNewLabel && <span className="ml-1 opacity-60">{t('ai.autoLabels.new')}</span>}
                                </button>

                                {/* Zone de refus (Croix) */}
                                <button
                                  type="button"
                                  onClick={(e) => {
                                    e.preventDefault();
                                    e.stopPropagation();
                                    onDismissTag(suggestion.tag);
                                  }}
                                  className={cn("pr-2 pl-1 hover:text-red-500 transition-colors", colorClasses.text)}
                                  title={t('ai.ignoreSuggestion')}
                                >

              <X className="w-3 h-3" />
            </button>
          </div>
        );
      })}
    </div>
  );
}