'use client';

import { Button } from '@/components/ui/Button';
import { Card } from '@/components/ui/Card';
import { Tag } from '@/lib/types';
import { Edit, Trash2, Loader2 } from 'lucide-react';

interface TagsGridProps {
  tags: (Tag & { usage?: number })[];
  onEditTag: (tag: Tag) => void;
  onDeleteTag: (tag: Tag) => void;
  deletingTagId: string | null;
  searchQuery: string;
  showOnlyUnused: boolean;
  totalTags: number;
}

export function TagsGrid({
  tags,
  onEditTag,
  onDeleteTag,
  deletingTagId,
  searchQuery,
  showOnlyUnused,
  totalTags,
}: TagsGridProps) {
  if (tags.length === 0) {
    return (
      <div className="text-center py-8 text-[var(--muted-foreground)]">
        {searchQuery && showOnlyUnused
          ? 'Aucun tag non utilisé trouvé avec cette recherche'
          : searchQuery
            ? 'Aucun tag trouvé pour cette recherche'
            : showOnlyUnused
              ? '🎉 Aucun tag non utilisé ! Tous vos tags sont actifs.'
              : 'Aucun tag créé'}
      </div>
    );
  }

  return (
    <div className="space-y-4">
      {/* Grid des tags */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
        {tags.map((tag) => {
          const usage = tag.usage || 0;
          const isUnused = usage === 0;
          return (
            <Card
              key={tag.id}
              className={`transition-all hover:shadow-sm ${
                isUnused
                  ? 'border-[var(--destructive)]/30 bg-[var(--destructive)]/5 hover:border-[var(--destructive)]/50'
                  : 'hover:border-[var(--primary)]/50'
              }`}
            >
              <div className="p-3">
                {/* Header du tag */}
                <div className="flex items-center justify-between mb-2">
                  <div className="flex items-center gap-2 flex-1 min-w-0">
                    <div
                      className="w-3 h-3 rounded-full flex-shrink-0"
                      style={{ backgroundColor: tag.color }}
                    />
                    <span className="font-medium text-sm truncate">
                      {tag.name}
                    </span>
                    {tag.isPinned && (
                      <span className="text-xs px-1.5 py-0.5 bg-[var(--primary)]/20 text-[var(--primary)] rounded flex-shrink-0">
                        📌
                      </span>
                    )}
                  </div>

                  {/* Actions */}
                  <div className="flex items-center gap-1 flex-shrink-0">
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => onEditTag(tag)}
                      className="h-7 w-7 p-0 text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
                    >
                      <Edit className="w-3 h-3" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => onDeleteTag(tag)}
                      disabled={deletingTagId === tag.id}
                      className={`h-7 w-7 p-0 ${
                        isUnused
                          ? 'text-[var(--destructive)] hover:text-[var(--destructive)] hover:bg-[var(--destructive)]/20'
                          : 'text-[var(--muted-foreground)] hover:text-[var(--destructive)] hover:bg-[var(--destructive)]/10'
                      }`}
                    >
                      {deletingTagId === tag.id ? (
                        <Loader2 className="w-3 h-3 animate-spin" />
                      ) : (
                        <Trash2 className="w-3 h-3" />
                      )}
                    </Button>
                  </div>
                </div>

                {/* Stats et warning */}
                <div className="space-y-1">
                  <div
                    className={`text-xs flex items-center justify-between ${
                      isUnused
                        ? 'text-[var(--destructive)]'
                        : 'text-[var(--muted-foreground)]'
                    }`}
                  >
                    <span>
                      {usage} utilisation{usage !== 1 ? 's' : ''}
                    </span>
                    {isUnused && (
                      <span className="text-xs px-1.5 py-0.5 bg-[var(--destructive)]/20 text-[var(--destructive)] rounded">
                        ⚠️ Non utilisé
                      </span>
                    )}
                  </div>
                  {'createdAt' in tag &&
                    (tag as Tag & { createdAt: Date }).createdAt && (
                      <div className="text-xs text-[var(--muted-foreground)]">
                        Créé le{' '}
                        {new Date(
                          (tag as Tag & { createdAt: Date }).createdAt
                        ).toLocaleDateString('fr-FR')}
                      </div>
                    )}
                </div>
              </div>
            </Card>
          );
        })}
      </div>

      {/* Message si plus de tags */}
      {totalTags > 12 && !searchQuery && !showOnlyUnused && (
        <div className="text-center pt-2 text-sm text-[var(--muted-foreground)]">
          Et {totalTags - 12} autres tags... (utilisez la recherche ou les
          filtres pour les voir)
        </div>
      )}
    </div>
  );
}
