veza/apps/web/src/components/studio/CloudFileBrowser.tsx

import React, { useState, useEffect } from 'react';
import { Card } from '../ui/card';
import { Button } from '../ui/button';
import { SearchInput } from '../ui/input';
import { FileNode } from '../../types';
import { 
  LayoutGrid, List, Filter, MoreVertical, Download, 
  Trash2, Folder, Music, Image as ImageIcon, File, 
  CheckSquare, Square, Tag, ArrowUp, ArrowDown, Share2, 
  Wand2, Loader2, Stamp
} from 'lucide-react';
import { useToast } from '../../context/ToastContext';
import { storageService } from '../../services/storageService';
import { AutoMetadataDetectionModal } from '../library/AutoMetadataDetectionModal';
import { WatermarkSettingsModal } from '../library/WatermarkSettingsModal';
import { FileDetailsView } from '../views/FileDetailsView';
import { LoadingState } from '../ui/LoadingState';
import { logger } from '@/utils/logger';

type SortField = 'name' | 'size' | 'modified' | 'type';
type SortOrder = 'asc' | 'desc';

export const CloudFileBrowser: React.FC = () => {
  const { addToast } = useToast();
  const [viewMode, setViewMode] = useState<'list' | 'grid'>('list');
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
  const [_currentFolder, setCurrentFolder] = useState('Root');
  const [files, setFiles] = useState<(FileNode & { tags?: string[] })[]>([]);
  const [loading, setLoading] = useState(true);
  
  // Navigation State
  const [selectedFileId, setSelectedFileId] = useState<string | null>(null);

  // Sorting & Filtering
  const [sortField, setSortField] = useState<SortField>('modified');
  const [sortOrder, setSortOrder] = useState<SortOrder>('desc');
  const [activeTags, setActiveTags] = useState<string[]>([]);
  const [availableTags] = useState(['Vocals', 'Bass', 'Drums', 'Project', 'Art', 'Legal', 'Reference', 'Stem', 'Raw']);

  // Modals
  const [showMetadataModal, setShowMetadataModal] = useState(false);
  const [showWatermarkModal, setShowWatermarkModal] = useState(false);

  useEffect(() => {
      const loadFiles = async () => {
          setLoading(true);
          try {
              const data = await storageService.listFiles();
              setFiles(data);
          } catch (e) {
              logger.error('Error loading files', {
                  error: e instanceof Error ? e.message : String(e),
                  stack: e instanceof Error ? e.stack : undefined,
              });
          } finally {
              setLoading(false);
          }
      };
      loadFiles();
  }, []);

  const handleSort = (field: SortField) => {
      if (sortField === field) {
          setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
      } else {
          setSortField(field);
          setSortOrder('asc');
      }
  };

  const toggleTag = (tag: string) => {
      setActiveTags(prev => prev.includes(tag) ? prev.filter(t => t !== tag) : [...prev, tag]);
  };

  const toggleSelection = (id: string) => {
      setSelectedFiles(prev => prev.includes(id) ? prev.filter(fid => fid !== id) : [...prev, id]);
  };

  const selectAll = () => {
      if (selectedFiles.length === files.length) setSelectedFiles([]);
      else setSelectedFiles(files.map(f => f.id));
  };

  const handleFileClick = (file: FileNode) => {
      if (file.type === 'folder') {
          setCurrentFolder(file.name);
          addToast(`Navigated to ${file.name}`, 'info');
      } else {
          setSelectedFileId(file.id);
      }
  };

  const filteredFiles = files
    .filter(f => f.name.toLowerCase().includes(searchQuery.toLowerCase()))
    .filter(f => activeTags.length === 0 || f.tags?.some(t => activeTags.includes(t)))
    .sort((a, b) => {
        let valA: string | number = a[sortField] || '';
        let valB: string | number = b[sortField] || '';
        if (sortField === 'size') {
             // Mock size parsing for sort
             valA = parseInt(a.size || '0') || 0;
             valB = parseInt(b.size || '0') || 0;
        }
        if (valA < valB) return sortOrder === 'asc' ? -1 : 1;
        if (valA > valB) return sortOrder === 'asc' ? 1 : -1;
        return 0;
    });

  const handleAction = (action: string) => {
      if (selectedFiles.length === 0) return;
      addToast(`${action} ${selectedFiles.length} items`, "success");
      setSelectedFiles([]);
  };

  if (selectedFileId) {
      return <FileDetailsView fileId={selectedFileId} onBack={() => setSelectedFileId(null)} />;
  }

  // CRITIQUE FIX #20: Utiliser LoadingState standardisé pour cohérence UX
  if (loading) {
    return (
      <LoadingState 
        isLoading={true} 
        variant="spinner" 
        text="Chargement des fichiers..." 
        className="py-20"
      />
    );
  }

  return (
    <div className="space-y-6 h-full flex flex-col">
        
        {/* Controls Bar */}
        <div className="flex flex-col xl:flex-row gap-4 justify-between items-start xl:items-center bg-kodo-ink/50 p-4 rounded-xl border border-kodo-steel/50">
            <div className="flex flex-col sm:flex-row gap-4 w-full xl:w-auto">
                <div className="w-full sm:w-64">
                    <SearchInput placeholder="Search files..." value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} />
                </div>
                
                {/* Tag Filter */}
                <div className="flex items-center gap-2 overflow-x-auto no-scrollbar pb-2 sm:pb-0">
                    <Filter className="w-4 h-4 text-gray-500 shrink-0" />
                    {availableTags.slice(0, 5).map(tag => (
                        <button
                            key={tag}
                            onClick={() => toggleTag(tag)}
                            className={`px-2 py-1 rounded text-xs border transition-colors whitespace-nowrap ${activeTags.includes(tag) ? 'bg-kodo-cyan/20 border-kodo-cyan text-kodo-cyan' : 'border-kodo-steel text-gray-400 hover:border-gray-400'}`}
                        >
                            {tag}
                        </button>
                    ))}
                </div>
            </div>

            <div className="flex gap-2 w-full xl:w-auto justify-between xl:justify-end">
                {selectedFiles.length > 0 && (
                    <div className="flex gap-2 mr-2 animate-fadeIn">
                        <Button variant="ghost" size="icon" onClick={() => handleAction("Downloaded")} title="Download" aria-label="Télécharger"><Download className="w-4 h-4" /></Button>
                        <Button variant="ghost" size="icon" onClick={() => handleAction("Tagged")} title="Add Tag" aria-label="Ajouter un tag"><Tag className="w-4 h-4" /></Button>
                        <Button variant="ghost" size="icon" onClick={() => handleAction("Deleted")} className="text-kodo-red hover:bg-kodo-red/10" aria-label="Supprimer"><Trash2 className="w-4 h-4" /></Button>
                    </div>
                )}
                
                <div className="flex gap-2">
                    <Button variant="ghost" onClick={() => setShowMetadataModal(true)} title="AI Auto-Tag" aria-label="AI Auto-Tag">
                        <Wand2 className="w-4 h-4" />
                    </Button>
                    <Button variant="ghost" onClick={() => setShowWatermarkModal(true)} title="Watermark Settings" aria-label="Paramètres de filigrane">
                        <Stamp className="w-4 h-4" />
                    </Button>
                    <div className="bg-kodo-void rounded-lg p-1 border border-kodo-steel flex items-center">
                        <span className="text-xs text-gray-500 px-2 uppercase font-bold">Sort:</span>
                        <select 
                            className="bg-transparent text-xs text-white outline-none"
                            value={sortField}
                            onChange={(e) => setSortField(e.target.value as SortField)}
                        >
                            <option value="modified">Date</option>
                            <option value="name">Name</option>
                            <option value="size">Size</option>
                            <option value="type">Type</option>
                        </select>
                        <button onClick={() => setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc')} className="ml-2 p-1 hover:text-white text-gray-400">
                            {sortOrder === 'asc' ? <ArrowUp className="w-3 h-3" /> : <ArrowDown className="w-3 h-3" />}
                        </button>
                    </div>

                    <div className="bg-kodo-void p-1 rounded-lg border border-kodo-steel flex">
                        <button 
                            onClick={() => setViewMode('list')} 
                            className={`p-2 rounded ${viewMode === 'list' ? 'bg-kodo-slate text-white' : 'text-gray-400 hover:text-white'}`}
                        >
                            <List className="w-4 h-4" />
                        </button>
                        <button 
                            onClick={() => setViewMode('grid')} 
                            className={`p-2 rounded ${viewMode === 'grid' ? 'bg-kodo-slate text-white' : 'text-gray-400 hover:text-white'}`}
                        >
                            <LayoutGrid className="w-4 h-4" />
                        </button>
                    </div>
                </div>
            </div>
        </div>

        {/* File Content */}
        <div className="flex-1 overflow-y-auto custom-scrollbar min-h-[400px]">
            {viewMode === 'list' ? (
                <div className="bg-kodo-graphite border border-kodo-steel rounded-xl overflow-hidden">
                    <table className="w-full text-left border-collapse">
                        <thead className="bg-kodo-ink text-xs font-mono text-gray-500 uppercase tracking-wider sticky top-0 z-10">
                            <tr>
                                <th className="p-4 w-10">
                                    <div onClick={selectAll} className="cursor-pointer hover:text-white">
                                        {selectedFiles.length === files.length && files.length > 0 ? <CheckSquare className="w-4 h-4 text-kodo-cyan" /> : <Square className="w-4 h-4" />}
                                    </div>
                                </th>
                                <th className="p-4 cursor-pointer hover:text-white" onClick={() => handleSort('name')}>Name</th>
                                <th className="p-4">Tags</th>
                                <th className="p-4 cursor-pointer hover:text-white" onClick={() => handleSort('size')}>Size</th>
                                <th className="p-4 cursor-pointer hover:text-white" onClick={() => handleSort('modified')}>Modified</th>
                                <th className="p-4 text-right">Actions</th>
                            </tr>
                        </thead>
                        <tbody className="divide-y divide-kodo-steel/30 text-sm">
                            {filteredFiles.map((file) => (
                                <tr key={file.id} className={`group hover:bg-white/5 transition-colors ${selectedFiles.includes(file.id) ? 'bg-kodo-cyan/5' : ''}`}>
                                    <td className="p-4">
                                        <div onClick={() => toggleSelection(file.id)} className="cursor-pointer text-gray-500 hover:text-white">
                                            {selectedFiles.includes(file.id) ? <CheckSquare className="w-4 h-4 text-kodo-cyan" /> : <Square className="w-4 h-4" />}
                                        </div>
                                    </td>
                                    <td className="p-4">
                                        <div className="flex items-center gap-3 cursor-pointer" onClick={() => handleFileClick(file)}>
                                            {file.type === 'folder' && <Folder className="w-5 h-5 text-kodo-gold" />}
                                            {file.type === 'audio' && <Music className="w-5 h-5 text-kodo-cyan" />}
                                            {file.type === 'image' && <ImageIcon className="w-5 h-5 text-kodo-magenta" />}
                                            {['document', 'archive', 'project'].includes(file.type) && <File className="w-5 h-5 text-gray-400" />}
                                            <span className="font-medium text-gray-200 group-hover:text-white transition-colors">{file.name}</span>
                                        </div>
                                    </td>
                                    <td className="p-4">
                                        <div className="flex gap-1">
                                            {file.tags?.map(t => (
                                                <span key={t} className="text-[10px] bg-kodo-slate px-1.5 py-0.5 rounded text-gray-400 border border-kodo-steel">{t}</span>
                                            ))}
                                        </div>
                                    </td>
                                    <td className="p-4 text-gray-400 font-mono text-xs">{file.size}</td>
                                    <td className="p-4 text-gray-400 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 className="p-1.5 hover:bg-white/10 rounded text-kodo-cyan" title="Process with AI" onClick={() => addToast("Sent to AI Tools")}>
                                                    <Wand2 className="w-4 h-4" />
                                                </button>
                                            )}
                                            <button className="p-1.5 hover:bg-white/10 rounded text-gray-400 hover:text-white"><Share2 className="w-4 h-4" /></button>
                                            <button className="p-1.5 hover:bg-white/10 rounded text-gray-400 hover:text-white"><MoreVertical className="w-4 h-4" /></button>
                                        </div>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            ) : (
                <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
                    {filteredFiles.map((file) => (
                        <Card 
                            key={file.id} 
                            variant="default" 
                            className={`p-4 flex flex-col items-center text-center gap-3 cursor-pointer hover:border-kodo-cyan/50 transition-all group relative ${selectedFiles.includes(file.id) ? 'border-kodo-cyan bg-kodo-cyan/5' : ''}`}
                            onClick={() => handleFileClick(file)}
                        >
                            <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity" onClick={(e) => { e.stopPropagation(); toggleSelection(file.id); }}>
                                {selectedFiles.includes(file.id) ? <CheckSquare className="w-4 h-4 text-kodo-cyan" /> : <Square className="w-4 h-4 text-gray-400 hover:text-white" />}
                            </div>
                            
                            <div className="w-16 h-16 rounded-2xl bg-kodo-ink flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-300">
                                {file.type === 'folder' && <Folder className="w-8 h-8 text-kodo-gold" />}
                                {file.type === 'audio' && <Music className="w-8 h-8 text-kodo-cyan" />}
                                {file.type === 'image' && <ImageIcon className="w-8 h-8 text-kodo-magenta" />}
                                {['document', 'archive', 'project'].includes(file.type) && <File className="w-8 h-8 text-gray-400" />}
                            </div>
                            <div className="w-full">
                                <h4 className="font-bold text-white text-sm truncate w-full" title={file.name}>{file.name}</h4>
                                <div className="flex justify-center gap-1 mt-1 flex-wrap">
                                    {file.tags?.slice(0,2).map(t => <span key={t} className="text-[8px] bg-white/10 px-1 rounded text-gray-400">{t}</span>)}
                                </div>
                            </div>
                        </Card>
                    ))}
                </div>
            )}
        </div>

        {/* Modals */}
        {showMetadataModal && (
            <AutoMetadataDetectionModal 
                fileName={selectedFileId ? files.find(f => f.id === selectedFileId)?.name || 'Selected File' : 'Scan Library'}
                onClose={() => setShowMetadataModal(false)}
                onApply={(data) => { addToast(`Applied: ${data.genre} - ${data.bpm}BPM`, 'success'); setShowMetadataModal(false); }}
            />
        )}
        {showWatermarkModal && (
            <WatermarkSettingsModal 
                onClose={() => setShowWatermarkModal(false)}
                onSave={() => addToast("Watermark settings updated", 'success')}
            />
        )}
    </div>
  );
};