import { useTranslation } from 'react-i18next';
import { Folder } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { trpc } from '@/lib/trpc';
import { useNotify } from '@/hooks/useNotify';
import { formatDistanceToNow } from 'date-fns';

interface FolderLinkCardProps {
  projectId: string;
  folderPath: string;
  totalFiles: number;
  lastScannedAt: number | null;
  scanStatus: 'idle' | 'scanning' | 'error' | null;
  onUnlinkRequested: () => void;
}

export function FolderLinkCard({
  projectId,
  folderPath,
  totalFiles,
  lastScannedAt,
  scanStatus,
  onUnlinkRequested,
}: FolderLinkCardProps) {
  const { t } = useTranslation();
  const { notifyError } = useNotify();
  const utils = trpc.useUtils();
  const startScan = trpc.projectFolders.startScan.useMutation({
    onSuccess: () => utils.projects.get.invalidate({ id: projectId }),
    onError: (err) => notifyError('errors.error', err),
  });

  return (
    <div className="flex items-center gap-3">
      <Folder className="h-4 w-4 text-muted-foreground shrink-0" />
      <div className="flex-1 min-w-0">
        <div className="font-mono text-xs text-muted-foreground truncate">{folderPath}</div>
        <div className="text-xs text-muted-foreground/70 mt-0.5">
          {t('projects.folder.filesCount', { count: totalFiles })}
          {lastScannedAt && (
            <>
              {' · '}
              {t('projects.folder.lastScanned', {
                relative: formatDistanceToNow(new Date(lastScannedAt), { addSuffix: true }),
              })}
            </>
          )}
        </div>
      </div>
      <div className="flex gap-2 shrink-0">
        <Button
          variant="outline"
          size="sm"
          disabled={scanStatus === 'scanning' || startScan.isPending}
          onClick={() => startScan.mutate({ projectId })}
        >
          {t('projects.folder.rescan')}
        </Button>
        <Button variant="ghost" size="sm" onClick={onUnlinkRequested}>
          {t('projects.folder.unlink')}
        </Button>
      </div>
    </div>
  );
}
