veza/apps/web/src/features/studio/components/cloud-file-browser/FileTableRow.tsx

import React from 'react';
import { Button } from '@/components/ui/button';
import {
  CheckSquare,
  Square,
  Folder,
  Music,
  Image as ImageIcon,
  File,
  Share2,
  MoreVertical,
  Wand2,
} from 'lucide-react';
import { cn } from '@/lib/utils';
import type { CloudFileNode } from './types';

export interface FileTableRowProps {
  file: CloudFileNode;
  selected: boolean;
  onToggleSelect: (id: string) => void;
  onFileClick: (file: CloudFileNode) => void;
  onAction?: (action: string, file: CloudFileNode) => void;
  isLoading?: boolean;
}

function FileTypeIcon({ type }: { type: CloudFileNode['type'] }) {
  if (type === 'folder') return <Folder className="w-5 h-5 text-kodo-gold" />;
  if (type === 'audio') return <Music className="w-5 h-5 text-kodo-steel" />;
  if (type === 'image') return <ImageIcon className="w-5 h-5 text-kodo-magenta" />;
  if (['document', 'archive', 'project'].includes(type)) {
    return <File className="w-5 h-5 text-kodo-content-dim" />;
  }
  return <File className="w-5 h-5 text-kodo-content-dim" />;
}

export function FileTableRow({
  file,
  selected,
  onToggleSelect,
  onFileClick,
  onAction,
  isLoading = false,
}: FileTableRowProps) {
  if (isLoading) {
    return (
      <tr className="animate-pulse">
        <td className="p-4 w-10">
          <div className="h-4 w-4 rounded bg-kodo-steel/50" />
        </td>
        <td className="p-4">
          <div className="flex items-center gap-4">
            <div className="h-5 w-5 rounded bg-kodo-steel/50 shrink-0" />
            <div className="h-4 w-32 rounded bg-kodo-steel/50" />
          </div>
        </td>
        <td className="p-4">
          <div className="flex gap-1">
            <div className="h-4 w-12 rounded bg-kodo-steel/50" />
            <div className="h-4 w-10 rounded bg-kodo-steel/50" />
          </div>
        </td>
        <td className="p-4">
          <div className="h-4 w-12 rounded bg-kodo-steel/50 font-mono text-xs" />
        </td>
        <td className="p-4">
          <div className="h-4 w-20 rounded bg-kodo-steel/50 text-xs" />
        </td>
        <td className="p-4 text-right">
          <div className="h-8 w-8 rounded bg-kodo-steel/50 ml-auto" />
        </td>
      </tr>
    );
  }

  return (
    <tr
      className={cn(
        'group hover:bg-white/5 transition-colors',
        selected && 'bg-kodo-cyan/5'
      )}
    >
      <td className="p-4">
        <button
          type="button"
          onClick={() => onToggleSelect(file.id)}
          className="cursor-pointer text-kodo-content-dim hover:text-white"
          aria-label={selected ? 'Désélectionner' : 'Sélectionner'}
        >
          {selected ? (
            <CheckSquare className="w-4 h-4 text-kodo-cyan" />
          ) : (
            <Square className="w-4 h-4" />
          )}
        </button>
      </td>
      <td className="p-4">
        <button
          type="button"
          className="flex items-center gap-4 cursor-pointer text-left w-full"
          onClick={() => onFileClick(file)}
        >
          <FileTypeIcon type={file.type} />
          <span className="font-medium text-kodo-text-main group-hover:text-white transition-colors">
            {file.name}
          </span>
        </button>
      </td>
      <td className="p-4">
        <div className="flex gap-1 flex-wrap">
          {file.tags?.map((t) => (
            <span
              key={t}
              className="text-xs bg-kodo-slate px-1.5 py-0.5 rounded text-kodo-content-dim border border-kodo-steel"
            >
              {t}
            </span>
          ))}
        </div>
      </td>
      <td className="p-4 text-kodo-content-dim font-mono text-xs">{file.size}</td>
      <td className="p-4 text-kodo-content-dim text-xs">{file.modified}</td>
      <td className="p-4 text-right">
        <div className="flex justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
          {file.type === 'audio' && (
            <Button
              variant="ghost"
              size="icon"
              className="p-1.5 text-kodo-steel"
              title="Process with AI"
              onClick={() => onAction?.('ai', file)}
            >
              <Wand2 className="w-4 h-4" />
            </Button>
          )}
          <Button
            variant="ghost"
            size="icon"
            className="p-1.5"
            onClick={() => onAction?.('share', file)}
          >
            <Share2 className="w-4 h-4" />
          </Button>
          <Button
            variant="ghost"
            size="icon"
            className="p-1.5"
            onClick={() => onAction?.('more', file)}
          >
            <MoreVertical className="w-4 h-4" />
          </Button>
        </div>
      </td>
    </tr>
  );
}