import { useTranslation } from 'react-i18next';
import { Folder, Sparkles } from 'lucide-react';
import { cn } from '@/lib/utils';
import { formatDistanceToNow } from 'date-fns';

interface FolderChipProps {
  projectId: string;
  folderPath: string | null;
  totalFiles: number;
  lastScannedAt: number | null;
  scanStatus: 'idle' | 'scanning' | 'error' | null;
  scanProgress?: { processed: number; total: number } | null;
  onClick: () => void;
}

export function FolderChip({
  folderPath,
  totalFiles,
  lastScannedAt,
  scanStatus,
  scanProgress,
  onClick,
}: FolderChipProps) {
  const { t } = useTranslation();

  if (!folderPath) {
    return (
      <button
        onClick={onClick}
        className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium border border-dashed border-border text-muted-foreground hover:text-foreground transition-colors"
      >
        <Sparkles className="h-3 w-3" />
        {t('projects.folder.linkCta')}
      </button>
    );
  }

  if (scanStatus === 'scanning' && scanProgress) {
    return (
      <button
        onClick={onClick}
        className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-amber-100 dark:bg-amber-900/30 text-amber-900 dark:text-amber-100"
      >
        <Folder className="h-3 w-3 animate-pulse" />
        {t('projects.folder.scanning', {
          processed: scanProgress.processed,
          total: scanProgress.total,
        })}
      </button>
    );
  }

  if (scanStatus === 'error') {
    return (
      <button
        onClick={onClick}
        className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-200"
      >
        <Folder className="h-3 w-3" />
        {t('projects.folder.scanFailed')}
      </button>
    );
  }

  const relative = lastScannedAt
    ? formatDistanceToNow(new Date(lastScannedAt), { addSuffix: true })
    : '—';

  return (
    <button
      onClick={onClick}
      className={cn(
        'inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium',
        'bg-[#fbc881]/20 hover:bg-[#fbc881]/30 transition-colors',
      )}
    >
      <Folder className="h-3 w-3" />
      <span>{t('projects.folder.filesCount', { count: totalFiles })}</span>
      <span className="opacity-60">·</span>
      <span className="opacity-70">{relative}</span>
    </button>
  );
}
