import { useState, useMemo } from 'react';
import { trpc } from '@/lib/trpc';
import { Skeleton } from '@/components/ui/skeleton';
import { cn } from '@/lib/utils';

interface FolderFileListProps {
  projectId: string;
}

type Filter = 'all' | 'text' | 'image' | 'pdf' | 'docx';

const FILTERS: Filter[] = ['all', 'text', 'image', 'pdf', 'docx'];

export function FolderFileList({ projectId }: FolderFileListProps) {
  const [filter, setFilter] = useState<Filter>('all');
  const { data, isLoading } = trpc.projectFolders.listFiles.useQuery({ projectId });

  const items = useMemo(() => {
    if (!data) return [];
    if (filter === 'all') return data;
    return data.filter((f) => f.kind === filter);
  }, [data, filter]);

  if (isLoading) {
    return (
      <div className="space-y-2">
        {[0, 1, 2].map((i) => (
          <Skeleton key={i} className="h-12" />
        ))}
      </div>
    );
  }

  return (
    <div>
      <div className="flex gap-2 mb-3 text-xs">
        {FILTERS.map((f) => (
          <button
            key={f}
            onClick={() => setFilter(f)}
            className={cn(
              'px-2.5 py-1 rounded-full border border-border',
              filter === f
                ? 'bg-foreground text-background'
                : 'text-muted-foreground hover:text-foreground',
            )}
          >
            {f}
          </button>
        ))}
      </div>
      <ul className="space-y-1.5">
        {items.map((f) => (
          <li
            key={f.id}
            className={cn(
              'rounded-md px-3 py-2 border border-border bg-background/50',
              f.kind === 'skipped' && 'opacity-50',
            )}
          >
            <div className="font-mono text-xs">{f.relativePath}</div>
            {f.summary && (
              <div className="text-xs text-muted-foreground mt-0.5 line-clamp-2">{f.summary}</div>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}
