import React from 'react';
import { RemoteFile } from '../types';
import { File, Eye, Download, Loader2, Database } from 'lucide-react';

interface RemoteFileListProps {
    files: RemoteFile[];
    isLoading: boolean;
    onPreview: (file: RemoteFile) => void;
}

export const RemoteFileList: React.FC<RemoteFileListProps> = ({ files, isLoading, onPreview }) => {
    if (isLoading) {
        return (
            <div className="flex flex-col items-center justify-center p-8 bg-white rounded-xl shadow-sm border border-gray-100 h-64">
                <Loader2 className="w-8 h-8 text-blue-500 animate-spin mb-3" />
                <p className="text-gray-500 font-medium">Fetching dataset from Hugging Face...</p>
            </div>
        );
    }

    if (files.length === 0) {
        return (
            <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-8 text-center">
                <div className="bg-gray-100 p-3 rounded-full w-fit mx-auto mb-3">
                    <Database className="w-6 h-6 text-gray-400" />
                </div>
                <h3 className="text-gray-900 font-medium">No files found</h3>
                <p className="text-gray-500 text-sm mt-1">The repository seems empty or files are loading.</p>
            </div>
        );
    }

    return (
        <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
            <div className="px-6 py-4 border-b border-gray-100 bg-gray-50 flex justify-between items-center">
                <h3 className="font-semibold text-gray-800 flex items-center gap-2">
                    <Database className="w-4 h-4 text-blue-500" />
                    Server Files ({files.length})
                </h3>
            </div>
            <div className="max-h-[400px] overflow-y-auto divide-y divide-gray-100">
                {files.map((file) => (
                    <div key={file.path} className="px-6 py-3 hover:bg-blue-50/50 transition-colors flex items-center justify-between group">
                        <div className="flex items-center gap-3 min-w-0">
                            <File className="w-4 h-4 text-gray-400" />
                            <div className="min-w-0">
                                <p className="text-sm font-medium text-gray-700 truncate" title={file.path}>
                                    {file.path}
                                </p>
                                <p className="text-xs text-gray-400">
                                    {(file.size / 1024).toFixed(1)} KB
                                </p>
                            </div>
                        </div>
                        <div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
                            <button 
                                onClick={() => onPreview(file)}
                                className="p-2 text-gray-500 hover:text-blue-600 hover:bg-blue-100 rounded-lg transition-colors"
                                title="Preview File"
                            >
                                <Eye className="w-4 h-4" />
                            </button>
                            <a 
                                href={file.url} 
                                target="_blank" 
                                rel="noopener noreferrer"
                                className="p-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
                                title="Open on Hugging Face"
                            >
                                <Download className="w-4 h-4" />
                            </a>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
};