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,
  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>
  );
};