import { formatFileSize } from '../lib/fileUtils';

export interface FileListItem {
  id: string;
  file: File;
  autoTitle: string;
}

interface MultiUploadFileListProps {
  files: FileListItem[];
  onRemove: (id: string) => void;
  onClearAll: () => void;
  disabled?: boolean;
}

export function MultiUploadFileList({
  files,
  onRemove,
  onClearAll,
  disabled = false
}: MultiUploadFileListProps) {
  const totalSize = files.reduce((sum, f) => sum + f.file.size, 0);

  return (
    <div className="mt-4">
      <div className="flex items-center justify-between mb-2">
        <span className="text-sm font-medium text-gray-700">
          Selected Files ({files.length})
        </span>
        <button
          type="button"
          onClick={onClearAll}
          disabled={disabled}
          className="text-sm text-gray-500 hover:text-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
        >
          Clear All
        </button>
      </div>

      <div className="border border-gray-200 rounded-lg divide-y divide-gray-200">
        {files.map((item) => (
          <div
            key={item.id}
            className="flex items-center justify-between px-4 py-3 hover:bg-gray-50"
          >
            <div className="flex-1 min-w-0">
              <p className="text-sm font-medium text-gray-900 truncate">
                {item.file.name}
              </p>
              <p className="text-xs text-gray-500">
                {formatFileSize(item.file.size)} &middot; Title: "{item.autoTitle}"
              </p>
            </div>
            <button
              type="button"
              onClick={() => onRemove(item.id)}
              disabled={disabled}
              className="ml-4 text-gray-400 hover:text-red-500 disabled:opacity-50 disabled:cursor-not-allowed"
              aria-label={`Remove ${item.file.name}`}
            >
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
        ))}
      </div>

      <p className="mt-2 text-sm text-gray-500">
        Total: {formatFileSize(totalSize)}
      </p>
    </div>
  );
}
