"use client";

import { useState, useEffect, useCallback, useRef, useMemo } from "react";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import {
  LayoutGrid, List, FolderPlus, Upload, CheckSquare, Users, Search, X, ArrowUpNarrowWide, ArrowDownWideNarrow,
  ArrowUpDown, ChevronDown, Check, FolderOpen, Tag, Loader2, CloudUpload,
} from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";
import toast from "react-hot-toast";
import FileCard from "./FileCard";
import FileUpload, { type FileUploadHandle } from "./FileUpload";
import PreviewEngine from "../preview/PreviewEngine";
import FolderCard from "../folders/FolderCard";
import CreateFolderModal from "../folders/CreateFolderModal";
import CreateSharedFolderModal from "../folders/CreateSharedFolderModal";
import FileActions from "./FileActions";
import Button from "../ui/Button";
import BulkActions from "./BulkActions";
import { EmptyState } from "../ui/PageHeader";
import type { FileData } from "@/types/files";
import { FOLDERS_CHANGED_EVENT, handleInternalDrop, hasInternalDrag, hasNativeFiles, readFileIds, readFolderId } from "./dnd";

interface FolderData {
  id: string;
  name: string;
  parentId: string | null;
  sharedSpaceId?: string | null;
  sharedSpace?: { id: string; name: string } | null;
  createdAt: string;
  _count?: { files: number; children: number };
}

/** À la racine, les dossiers de niveau 1 de chaque espace partagé sont regroupés sous le nom de l'espace. */
function groupFoldersBySpace(folders: FolderData[], enabled: boolean): { key: string; label: string | null; folders: FolderData[] }[] {
  if (!enabled) return [{ key: "all", label: null, folders }];
  const groups = new Map<string, { key: string; label: string | null; folders: FolderData[] }>();
  for (const f of folders) {
    const key = f.sharedSpace?.id ?? "__perso";
    if (!groups.has(key)) groups.set(key, { key, label: f.sharedSpace?.name ?? "Mes dossiers", folders: [] });
    groups.get(key)!.folders.push(f);
  }
  const arr = Array.from(groups.values());
  if (arr.length <= 1) return [{ key: "all", label: null, folders }];
  return arr.sort((a, b) => (a.key === "__perso" ? -1 : b.key === "__perso" ? 1 : (a.label ?? "").localeCompare(b.label ?? "", "fr")));
}

interface FileExplorerProps {
  folderId?: string | null;
  /** Nom du dossier courant (affiché dans la zone d'upload / overlay) */
  folderName?: string;
}

type SortKey = "name" | "date" | "size" | "type";
type SortDir = "asc" | "desc";
type ViewMode = "grid" | "list";

const PAGE_LIMIT = 50;
const SORT_LABELS: Record<SortKey, string> = { name: "Nom", date: "Date", size: "Taille", type: "Type" };

export default function FileExplorer({ folderId, folderName }: FileExplorerProps) {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  const [files, setFiles] = useState<FileData[]>([]);
  const [folders, setFolders] = useState<FolderData[]>([]);
  const [total, setTotal] = useState<number | null>(null);
  const [viewMode, setViewModeState] = useState<ViewMode>("list");
  const [sortKey, setSortKey] = useState<SortKey>("name");
  const [sortDir, setSortDir] = useState<SortDir>("asc");
  const [sortOpen, setSortOpen] = useState(false);
  const [showUpload, setShowUpload] = useState(false);
  const [showCreateFolder, setShowCreateFolder] = useState(false);
  const [showCreateSharedFolder, setShowCreateSharedFolder] = useState(false);
  const [previewFile, setPreviewFile] = useState<FileData | null>(null);
  const [searchInput, setSearchInput] = useState("");
  const [searchQuery, setSearchQuery] = useState("");
  const [loading, setLoading] = useState(true);
  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
  const [selectMode, setSelectMode] = useState(false);
  const [lastClickedId, setLastClickedId] = useState<string | null>(null);
  const [offset, setOffset] = useState(0);
  const [hasMore, setHasMore] = useState(false);
  const [loadingMore, setLoadingMore] = useState(false);
  const [contextMenu, setContextMenu] = useState<{ file: FileData; x: number; y: number } | null>(null);
  const [bgMenu, setBgMenu] = useState<{ x: number; y: number } | null>(null);
  const [nativeDragOver, setNativeDragOver] = useState(false);
  const [tagFilter, setTagFilter] = useState<{ id: string; name?: string; color?: string } | null>(null);

  const containerRef = useRef<HTMLDivElement>(null);
  const listRef = useRef<HTMLDivElement>(null);
  const uploadRef = useRef<FileUploadHandle>(null);
  const sortRef = useRef<HTMLDivElement>(null);
  const sentinelRef = useRef<HTMLDivElement>(null);
  const nativeDragCount = useRef(0);
  const deepLinkHandled = useRef<string | null>(null);

  const effectiveSelectMode = selectMode || selectedIds.size > 0;

  /* ---------- Préférences persistées ---------- */
  const setViewMode = useCallback((v: ViewMode) => {
    setViewModeState(v);
    try { localStorage.setItem("spb-view", v); } catch {}
  }, []);

  useEffect(() => {
    try {
      const v = localStorage.getItem("spb-view");
      if (v === "grid" || v === "list") setViewModeState(v);
      const s = localStorage.getItem("spb-sort");
      if (s) {
        const { key, dir } = JSON.parse(s);
        if (["name", "date", "size", "type"].includes(key)) setSortKey(key);
        if (dir === "asc" || dir === "desc") setSortDir(dir);
      }
    } catch {}
  }, []);

  useEffect(() => {
    try { localStorage.setItem("spb-sort", JSON.stringify({ key: sortKey, dir: sortDir })); } catch {}
  }, [sortKey, sortDir]);

  /* ---------- Recherche (debounce) ---------- */
  useEffect(() => {
    const t = setTimeout(() => setSearchQuery(searchInput.trim()), 220);
    return () => clearTimeout(t);
  }, [searchInput]);

  /* ---------- Filtre par tag (?tagId=) ---------- */
  const tagIdParam = searchParams.get("tagId");
  useEffect(() => {
    if (!tagIdParam) { setTagFilter(null); return; }
    setTagFilter({ id: tagIdParam });
    fetch("/api/tags").then((r) => (r.ok ? r.json() : [])).then((tags) => {
      const t = Array.isArray(tags) ? tags.find((x: { id: string }) => x.id === tagIdParam) : null;
      if (t) setTagFilter({ id: t.id, name: t.name, color: t.color });
    }).catch(() => {});
  }, [tagIdParam]);

  /* ---------- Chargement ---------- */
  const fetchData = useCallback(
    async (loadMore = false) => {
      if (loadMore) setLoadingMore(true);
      else { setLoading(true); setOffset(0); }
      try {
        const currentOffset = loadMore ? offset : 0;
        const params = new URLSearchParams();
        if (tagIdParam) params.set("tagId", tagIdParam);
        else params.set("folderId", folderId || "root");
        if (searchQuery) params.set("search", searchQuery);
        params.set("limit", String(PAGE_LIMIT));
        params.set("offset", String(currentOffset));

        const [filesRes, foldersRes] = await Promise.all([
          fetch(`/api/files?${params}`),
          loadMore || tagIdParam ? Promise.resolve(null) : fetch(`/api/folders?parentId=${folderId || "root"}`),
        ]);

        if (filesRes.ok) {
          const data = await filesRes.json();
          const newFiles: FileData[] = Array.isArray(data) ? data : data.files || [];
          const tot: number | undefined = Array.isArray(data) ? undefined : data.total;
          setFiles((prev) => (loadMore ? [...prev, ...newFiles] : newFiles));
          setTotal(tot ?? null);
          setHasMore(tot !== undefined ? currentOffset + PAGE_LIMIT < tot : newFiles.length >= PAGE_LIMIT);
          setOffset(currentOffset + newFiles.length);
        }
        if (tagIdParam && !loadMore) setFolders([]);
        if (foldersRes && foldersRes.ok) setFolders(await foldersRes.json());
      } catch (err) {
        console.error("Failed to fetch data:", err);
        toast.error("Impossible de charger le dossier");
      } finally {
        setLoading(false);
        setLoadingMore(false);
      }
    },
    [folderId, searchQuery, offset, tagIdParam]
  );

  useEffect(() => {
    fetchData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [folderId, searchQuery, tagIdParam]);

  const handleRefresh = useCallback(() => {
    fetchData(false);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [folderId, searchQuery, tagIdParam]);

  // Rafraîchir quand un dépôt externe (arbre latéral) a déplacé des fichiers
  useEffect(() => {
    const h = () => handleRefresh();
    window.addEventListener("spb:files-changed", h);
    window.addEventListener(FOLDERS_CHANGED_EVENT, h);
    return () => {
      window.removeEventListener("spb:files-changed", h);
      window.removeEventListener(FOLDERS_CHANGED_EVENT, h);
    };
  }, [handleRefresh]);

  // Purger la sélection des fichiers disparus
  useEffect(() => {
    setSelectedIds((prev) => {
      if (prev.size === 0) return prev;
      const ids = new Set(files.map((f) => f.id));
      const next = new Set(Array.from(prev).filter((id) => ids.has(id)));
      return next.size === prev.size ? prev : next;
    });
  }, [files]);

  // Chargement infini
  useEffect(() => {
    const el = sentinelRef.current;
    if (!el || !hasMore || loading) return;
    const io = new IntersectionObserver((entries) => {
      if (entries[0]?.isIntersecting && !loadingMore) fetchData(true);
    }, { rootMargin: "400px" });
    io.observe(el);
    return () => io.disconnect();
  }, [hasMore, loading, loadingMore, fetchData]);

  /* ---------- Deep links : ?file= ?upload=1 ?new=1 ---------- */
  useEffect(() => {
    const fileParam = searchParams.get("file");
    const uploadParam = searchParams.get("upload");
    const newParam = searchParams.get("new");
    if (!fileParam && !uploadParam && !newParam) { deepLinkHandled.current = null; return; }
    const key = `${fileParam}|${uploadParam}|${newParam}`;
    if (deepLinkHandled.current === key) return;
    if (fileParam && loading) return; // attendre la liste pour retrouver le fichier
    deepLinkHandled.current = key;

    if (uploadParam) setShowUpload(true);
    if (newParam) setShowCreateFolder(true);
    if (fileParam) {
      const found = files.find((f) => f.id === fileParam);
      if (found) setPreviewFile(found);
      else {
        fetch(`/api/files/${fileParam}`)
          .then((r) => (r.ok ? r.json() : null))
          .then((f) => { if (f && f.id) setPreviewFile(f as FileData); else toast.error("Fichier introuvable"); })
          .catch(() => toast.error("Fichier introuvable"));
      }
    }
    // Nettoyer l'URL (conserver le filtre tag)
    const keep = new URLSearchParams();
    if (tagIdParam) keep.set("tagId", tagIdParam);
    const qs = keep.toString();
    router.replace(qs ? `${pathname}?${qs}` : pathname, { scroll: false });
  }, [searchParams, files, loading, router, pathname, tagIdParam]);

  /* ---------- Tri ---------- */
  const dirMul = sortDir === "asc" ? 1 : -1;
  const sortedFolders = useMemo(() => [...folders].sort((a, b) => dirMul * a.name.localeCompare(b.name, "fr", { numeric: true })), [folders, dirMul]);
  const folderGroups = useMemo(() => groupFoldersBySpace(sortedFolders, !folderId), [sortedFolders, folderId]);
  const sortedFiles = useMemo(() => [...files].sort((a, b) => {
    let r = 0;
    switch (sortKey) {
      case "date": r = new Date(a.updatedAt || a.createdAt).getTime() - new Date(b.updatedAt || b.createdAt).getTime(); break;
      case "size": r = (a.size || 0) - (b.size || 0); break;
      case "type": r = (a.mimeType || "").localeCompare(b.mimeType || "") || a.name.localeCompare(b.name, "fr", { numeric: true }); break;
      default: r = a.name.localeCompare(b.name, "fr", { numeric: true });
    }
    return dirMul * r;
  }), [files, sortKey, dirMul]);

  const toggleSortColumn = (key: SortKey) => {
    if (sortKey === key) setSortDir((d) => (d === "asc" ? "desc" : "asc"));
    else { setSortKey(key); setSortDir(key === "date" || key === "size" ? "desc" : "asc"); }
  };

  useEffect(() => {
    if (!sortOpen) return;
    const h = (e: MouseEvent) => { if (sortRef.current && !sortRef.current.contains(e.target as Node)) setSortOpen(false); };
    document.addEventListener("mousedown", h);
    return () => document.removeEventListener("mousedown", h);
  }, [sortOpen]);

  /* ---------- Sélection ---------- */
  const toggleSelect = useCallback((file: FileData, e?: { shiftKey?: boolean }) => {
    setSelectedIds((prev) => {
      const next = new Set(prev);
      if (e?.shiftKey && lastClickedId) {
        const ids = sortedFiles.map((f) => f.id);
        const a = ids.indexOf(lastClickedId);
        const b = ids.indexOf(file.id);
        if (a >= 0 && b >= 0) {
          const [lo, hi] = a < b ? [a, b] : [b, a];
          for (let i = lo; i <= hi; i++) next.add(ids[i]);
          return next;
        }
      }
      next.has(file.id) ? next.delete(file.id) : next.add(file.id);
      return next;
    });
    setLastClickedId(file.id);
  }, [lastClickedId, sortedFiles]);

  const selectAll = useCallback(() => {
    setSelectedIds((prev) => (prev.size === files.length ? new Set() : new Set(files.map((f) => f.id))));
  }, [files]);

  const clearSelection = useCallback(() => { setSelectedIds(new Set()); setSelectMode(false); }, []);

  /* ---------- Raccourcis ---------- */
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      const target = e.target as HTMLElement;
      if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) return;
      if (e.key === "Delete" || e.key === "Backspace") {
        if (selectedIds.size > 0) {
          e.preventDefault();
          (document.querySelector("[data-bulk-delete]") as HTMLButtonElement | null)?.click();
        }
      }
      if ((e.ctrlKey || e.metaKey) && e.key === "a") {
        if (files.length > 0) { e.preventDefault(); setSelectMode(true); selectAll(); }
      }
      if (e.key === "Escape") {
        if (contextMenu || bgMenu) { setContextMenu(null); setBgMenu(null); }
        else if (previewFile) setPreviewFile(null);
        else if (selectedIds.size > 0 || selectMode) clearSelection();
        else if (showUpload) setShowUpload(false);
      }
      if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key.toLowerCase() === "n") { e.preventDefault(); setShowCreateFolder(true); }
      if (!e.ctrlKey && !e.metaKey && !e.altKey && e.key.toLowerCase() === "u" && !previewFile) { e.preventDefault(); setShowUpload(true); }
    };
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [selectMode, selectedIds, files, previewFile, contextMenu, bgMenu, showUpload, selectAll, clearSelection]);

  /* ---------- Navigation clavier (roving) ---------- */
  const onListKeyDown = (e: React.KeyboardEvent) => {
    if (!["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight", "Home", "End"].includes(e.key)) return;
    const t = e.target as HTMLElement;
    if (t.tagName === "INPUT" || t.tagName === "TEXTAREA") return;
    const items = Array.from(listRef.current?.querySelectorAll<HTMLElement>('[role="option"]') ?? []);
    if (!items.length) return;
    const cur = items.findIndex((el) => el === document.activeElement || el.contains(document.activeElement));
    let next = cur;
    let cols = 1;
    if (viewMode === "grid" && cur >= 0) {
      const top = items[cur].offsetTop;
      cols = items.filter((el) => el.offsetTop === top && el.parentElement === items[cur].parentElement).length || 1;
    }
    switch (e.key) {
      case "ArrowDown": next = cur < 0 ? 0 : Math.min(items.length - 1, cur + cols); break;
      case "ArrowUp": next = cur < 0 ? 0 : Math.max(0, cur - cols); break;
      case "ArrowRight": next = cur < 0 ? 0 : Math.min(items.length - 1, cur + 1); break;
      case "ArrowLeft": next = cur < 0 ? 0 : Math.max(0, cur - 1); break;
      case "Home": next = 0; break;
      case "End": next = items.length - 1; break;
    }
    if (next !== cur && items[next]) {
      e.preventDefault();
      items[next].focus();
      items[next].scrollIntoView({ block: "nearest" });
    }
  };

  /* ---------- Dépôt natif (fichiers du bureau) : overlay plein écran ---------- */
  useEffect(() => {
    const onEnter = (e: DragEvent) => {
      if (!hasNativeFiles(e.dataTransfer)) return;
      e.preventDefault();
      nativeDragCount.current++;
      setNativeDragOver(true);
    };
    const onOver = (e: DragEvent) => {
      if (!hasNativeFiles(e.dataTransfer)) return;
      e.preventDefault();
      if (e.dataTransfer) e.dataTransfer.dropEffect = "copy";
    };
    const onLeave = (e: DragEvent) => {
      if (!hasNativeFiles(e.dataTransfer)) return;
      nativeDragCount.current = Math.max(0, nativeDragCount.current - 1);
      if (nativeDragCount.current === 0) setNativeDragOver(false);
    };
    const onDrop = (e: DragEvent) => {
      if (!hasNativeFiles(e.dataTransfer)) return;
      e.preventDefault();
      nativeDragCount.current = 0;
      setNativeDragOver(false);
      const dropped = Array.from(e.dataTransfer?.files ?? []);
      if (!dropped.length) return;
      setShowUpload(true);
      // Laisser FileUpload se monter/afficher puis injecter
      requestAnimationFrame(() => uploadRef.current?.addFiles(dropped));
      toast.success(dropped.length > 1 ? `${dropped.length} fichiers ajoutés à l'envoi` : "Fichier ajouté à l'envoi");
    };
    const onEnd = () => { nativeDragCount.current = 0; setNativeDragOver(false); };
    window.addEventListener("dragenter", onEnter);
    window.addEventListener("dragover", onOver);
    window.addEventListener("dragleave", onLeave);
    window.addEventListener("drop", onDrop);
    window.addEventListener("dragend", onEnd);
    return () => {
      window.removeEventListener("dragenter", onEnter);
      window.removeEventListener("dragover", onOver);
      window.removeEventListener("dragleave", onLeave);
      window.removeEventListener("drop", onDrop);
      window.removeEventListener("dragend", onEnd);
    };
  }, []);

  /* ---------- Dépôt interne sur les miettes de la TopBar (délégation) ---------- */
  useEffect(() => {
    const crumbOf = (t: EventTarget | null) => (t instanceof Element ? t.closest<HTMLElement>("[data-crumb-root],[data-crumb-id]") : null);
    const onOver = (e: DragEvent) => {
      const el = crumbOf(e.target);
      if (!el || !hasInternalDrag(e.dataTransfer)) return;
      e.preventDefault();
      if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
      el.classList.add("drop-target");
    };
    const onLeave = (e: DragEvent) => {
      const el = crumbOf(e.target);
      if (el) el.classList.remove("drop-target");
    };
    const onDrop = async (e: DragEvent) => {
      const el = crumbOf(e.target);
      if (!el || !hasInternalDrag(e.dataTransfer)) return;
      e.preventDefault();
      e.stopPropagation();
      el.classList.remove("drop-target");
      const target = el.dataset.crumbId || "root";
      if (target === (folderId || "root")) return;
      const moved = await handleInternalDrop(e.dataTransfer, target);
      if (moved) handleRefresh();
    };
    document.addEventListener("dragover", onOver);
    document.addEventListener("dragleave", onLeave);
    document.addEventListener("drop", onDrop);
    return () => {
      document.removeEventListener("dragover", onOver);
      document.removeEventListener("dragleave", onLeave);
      document.removeEventListener("drop", onDrop);
    };
  }, [folderId, handleRefresh]);

  // Dépôt interne « vers la racine du dossier courant » sur la zone vide de l'explorateur
  const onContentDrop = async (e: React.DragEvent) => {
    if (!hasInternalDrag(e.dataTransfer)) return;
    e.preventDefault();
    const here = new Set(files.map((f) => f.id));
    const ids = readFileIds(e.dataTransfer);
    if (ids.length && ids.every((id) => here.has(id))) return; // déjà dans ce dossier
    if (readFolderId(e.dataTransfer) && folders.some((f) => f.id === readFolderId(e.dataTransfer))) return;
    const moved = await handleInternalDrop(e.dataTransfer, folderId || "root");
    if (moved) handleRefresh();
  };

  /* ---------- Menus contextuels ---------- */
  const openContextMenu = (file: FileData, e: React.MouseEvent) => {
    setBgMenu(null);
    setContextMenu({ file, x: e.clientX, y: e.clientY });
  };
  const onBackgroundContext = (e: React.MouseEvent) => {
    if ((e.target as HTMLElement).closest('[role="option"]')) return;
    e.preventDefault();
    setContextMenu(null);
    setBgMenu({ x: Math.min(e.clientX, window.innerWidth - 220), y: Math.min(e.clientY, window.innerHeight - 120) });
  };
  useEffect(() => {
    if (!bgMenu) return;
    const h = () => setBgMenu(null);
    document.addEventListener("mousedown", h);
    return () => document.removeEventListener("mousedown", h);
  }, [bgMenu]);

  const selectedArr = useMemo(() => Array.from(selectedIds), [selectedIds]);
  const isSearch = searchQuery.length > 0;
  const currentName = folderName || (folderId ? "ce dossier" : "Fichiers");

  /* ---------- Squelettes ---------- */
  const Skeleton = () => (
    <div className="space-y-2" aria-busy>
      {viewMode === "grid" ? (
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8 gap-3">
          {Array.from({ length: 10 }).map((_, i) => (
            <div key={i} className="card overflow-hidden animate-pulse">
              <div className="aspect-square bg-gray-100 dark:bg-white/5" />
              <div className="p-2.5 space-y-1.5"><div className="h-3 bg-gray-200 dark:bg-white/10 rounded w-3/4" /><div className="h-2 bg-gray-200 dark:bg-white/10 rounded w-1/2" /></div>
            </div>
          ))}
        </div>
      ) : (
        <div className="card overflow-hidden divide-y divide-line dark:divide-white/5">
          {Array.from({ length: 8 }).map((_, i) => (
            <div key={i} className="flex items-center gap-3 px-3 py-3 animate-pulse">
              <div className="w-8 h-8 bg-gray-200 dark:bg-white/10 rounded-lg shrink-0" />
              <div className="flex-1 h-3 bg-gray-200 dark:bg-white/10 rounded" style={{ maxWidth: `${35 + ((i * 17) % 40)}%` }} />
              <div className="w-16 h-3 bg-gray-200 dark:bg-white/10 rounded hidden sm:block" />
              <div className="w-20 h-3 bg-gray-200 dark:bg-white/10 rounded hidden md:block" />
            </div>
          ))}
        </div>
      )}
    </div>
  );

  const SortIndicator = ({ k }: { k: SortKey }) =>
    sortKey === k ? (
      sortDir === "asc" ? <ArrowUpNarrowWide className="w-3.5 h-3.5 text-blue-500" /> : <ArrowDownWideNarrow className="w-3.5 h-3.5 text-blue-500" />
    ) : <ArrowUpDown className="w-3 h-3 opacity-0 group-hover/th:opacity-60" />;

  const ListHeader = () => {
    const allSelected = files.length > 0 && selectedIds.size === files.length;
    const Th = ({ k, className, children }: { k: SortKey; className: string; children: React.ReactNode }) => (
      <button onClick={() => toggleSortColumn(k)} className={`group/th flex items-center gap-1 hover:text-gray-800 dark:hover:text-gray-200 transition-colors ${className}`}>
        {children}<SortIndicator k={k} />
      </button>
    );
    return (
      <div className="sticky top-0 z-10 hidden sm:flex items-center gap-3 px-3 h-9 bg-surface/95 backdrop-blur border-b border-line dark:border-white/[0.07] text-[11px] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500 select-none">
        <span className="w-8 shrink-0 flex items-center justify-center">
          {files.length > 0 && (
            <button
              onClick={selectAll}
              aria-label={allSelected ? "Tout désélectionner" : "Tout sélectionner"}
              className={`w-4 h-4 rounded border flex items-center justify-center transition-all ${allSelected ? "bg-blue-500 border-blue-500 text-white" : selectedIds.size > 0 ? "bg-blue-500/40 border-blue-500 text-white" : "border-gray-300 dark:border-white/25 text-transparent hover:border-blue-400"}`}
            >
              <Check className="w-3 h-3" strokeWidth={3} />
            </button>
          )}
        </span>
        <Th k="name" className="flex-1 min-w-0 text-left">Nom</Th>
        <Th k="type" className="hidden lg:flex w-24 shrink-0">Type</Th>
        <Th k="size" className="w-24 shrink-0 justify-end">Taille</Th>
        <Th k="date" className="hidden md:flex w-28 shrink-0 justify-end">Modifié</Th>
        <span className="w-10 shrink-0" />
      </div>
    );
  };

  return (
    <div className="flex flex-col h-full lg:flex-row overflow-x-hidden" ref={containerRef}>
      <div className="flex-1 flex flex-col min-w-0 overflow-x-hidden">
        {/* ===== Barre d'outils ===== */}
        <div className="px-3 sm:px-4 lg:px-6 pt-3 pb-2 flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-3 shrink-0">
          {/* Recherche */}
          <div className="relative flex-1 min-w-0">
            <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" />
            <input
              type="search"
              value={searchInput}
              onChange={(e) => setSearchInput(e.target.value)}
              placeholder={`Rechercher dans ${currentName}…`}
              className="field pl-10 pr-9 h-10"
              aria-label="Rechercher des fichiers"
            />
            {searchInput && (
              <button onClick={() => setSearchInput("")} className="absolute right-1.5 top-1/2 -translate-y-1/2 w-8 h-8 flex items-center justify-center rounded-lg text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-200/60 dark:hover:bg-white/10" aria-label="Effacer">
                <X className="w-4 h-4" />
              </button>
            )}
          </div>

          <div className="flex items-center gap-1.5 sm:gap-2 overflow-x-auto scrollbar-none -mx-3 px-3 sm:mx-0 sm:px-0 sm:overflow-visible">
            {/* Tri */}
            <div className="relative shrink-0" ref={sortRef}>
              <button
                onClick={() => setSortOpen((o) => !o)}
                className="h-10 px-3 flex items-center gap-1.5 rounded-xl bg-gray-100 dark:bg-white/[0.06] hover:bg-gray-200/70 dark:hover:bg-white/10 text-[13px] text-gray-700 dark:text-gray-200 transition-colors"
                aria-haspopup="menu"
                aria-expanded={sortOpen}
              >
                {sortDir === "asc" ? <ArrowUpNarrowWide className="w-4 h-4 text-gray-500" /> : <ArrowDownWideNarrow className="w-4 h-4 text-gray-500" />}
                <span className="hidden md:inline">{SORT_LABELS[sortKey]}</span>
                <ChevronDown className={`w-3.5 h-3.5 text-gray-400 transition-transform ${sortOpen ? "rotate-180" : ""}`} />
              </button>
              <AnimatePresence>
                {sortOpen && (
                  <motion.div
                    initial={{ opacity: 0, y: -4, scale: 0.98 }} animate={{ opacity: 1, y: 0, scale: 1 }} exit={{ opacity: 0, y: -4, scale: 0.98 }} transition={{ duration: 0.14 }}
                    className="absolute right-0 sm:left-0 sm:right-auto top-full mt-1.5 w-52 glass rounded-2xl shadow-pop p-1.5 z-40"
                    role="menu"
                  >
                    <p className="px-3 pt-1.5 pb-1 text-[10.5px] font-semibold uppercase tracking-wider text-gray-400">Trier par</p>
                    {(Object.keys(SORT_LABELS) as SortKey[]).map((k) => (
                      <button key={k} role="menuitemradio" aria-checked={sortKey === k} onClick={() => { setSortKey(k); }} className={`w-full flex items-center gap-2 px-3 h-9 rounded-xl text-[13px] transition-colors ${sortKey === k ? "bg-blue-500/10 text-blue-700 dark:text-blue-300 font-medium" : "text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-white/[0.08]"}`}>
                        <span className="flex-1 text-left">{SORT_LABELS[k]}</span>
                        {sortKey === k && <Check className="w-4 h-4" />}
                      </button>
                    ))}
                    <div className="my-1 border-t border-line dark:border-white/10" />
                    <div className="grid grid-cols-2 gap-1 p-0.5">
                      {(["asc", "desc"] as SortDir[]).map((d) => (
                        <button key={d} onClick={() => setSortDir(d)} className={`h-8 rounded-lg text-[12px] flex items-center justify-center gap-1 transition-colors ${sortDir === d ? "bg-gray-900 text-white dark:bg-white dark:text-gray-900" : "text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-white/10"}`}>
                          {d === "asc" ? <ArrowUpNarrowWide className="w-3.5 h-3.5" /> : <ArrowDownWideNarrow className="w-3.5 h-3.5" />}
                          {d === "asc" ? "Croissant" : "Décroissant"}
                        </button>
                      ))}
                    </div>
                  </motion.div>
                )}
              </AnimatePresence>
            </div>

            {/* Vue */}
            <div className="relative flex items-center h-10 p-1 rounded-xl bg-gray-100 dark:bg-white/[0.06] shrink-0" role="radiogroup" aria-label="Affichage">
              {(["list", "grid"] as ViewMode[]).map((v) => (
                <button
                  key={v}
                  role="radio"
                  aria-checked={viewMode === v}
                  onClick={() => setViewMode(v)}
                  className={`relative w-9 h-8 flex items-center justify-center rounded-lg transition-colors ${viewMode === v ? "text-gray-900 dark:text-white" : "text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"}`}
                  title={v === "list" ? "Liste" : "Grille"}
                >
                  {viewMode === v && <motion.span layoutId="view-seg" className="absolute inset-0 rounded-lg bg-surface dark:bg-white/10 shadow-card dark:shadow-none" transition={{ type: "spring", stiffness: 500, damping: 40 }} />}
                  <span className="relative">{v === "list" ? <List className="w-4 h-4" /> : <LayoutGrid className="w-4 h-4" />}</span>
                </button>
              ))}
            </div>

            <div className="hidden sm:block w-px h-6 bg-line dark:bg-white/10 mx-0.5 shrink-0" />

            <Button variant={effectiveSelectMode ? "secondary" : "ghost"} size="sm" onClick={() => (effectiveSelectMode ? clearSelection() : setSelectMode(true))} className="shrink-0 h-10" title="Mode sélection">
              <CheckSquare className="w-4 h-4" /><span className="hidden lg:inline">Sélection</span>
            </Button>
            <Button variant="ghost" size="sm" onClick={() => setShowCreateFolder(true)} className="shrink-0 h-10" title="Nouveau dossier (⌘⇧N)">
              <FolderPlus className="w-4 h-4" /><span className="hidden lg:inline">Dossier</span>
            </Button>
            <Button variant="ghost" size="sm" onClick={() => setShowCreateSharedFolder(true)} className="shrink-0 h-10 text-blue-600 dark:text-blue-300 hover:text-blue-700" title="Espace partagé">
              <Users className="w-4 h-4" /><span className="hidden lg:inline">Partage</span>
            </Button>
            <Button variant="accent" size="sm" onClick={() => setShowUpload((s) => !s)} className="shrink-0 h-10" title="Envoyer des fichiers (U)">
              <Upload className="w-4 h-4" /><span className="hidden sm:inline">Envoyer</span>
            </Button>
          </div>
        </div>

        {/* Sous-titre : compteurs + filtre tag */}
        <div className="px-3 sm:px-4 lg:px-6 pb-2 flex items-center gap-2 text-[12px] text-gray-400 min-h-[24px] shrink-0">
          {!loading && (
            <span className="tabular-nums">
              {tagIdParam ? null : <>{sortedFolders.length} dossier{sortedFolders.length !== 1 ? "s" : ""} · </>}
              {total ?? files.length} fichier{(total ?? files.length) !== 1 ? "s" : ""}
              {isSearch && <> pour « {searchQuery} »</>}
            </span>
          )}
          {tagFilter && (
            <button
              onClick={() => router.replace(pathname)}
              className="flex items-center gap-1.5 pl-2 pr-1.5 h-6 rounded-full bg-gray-100 dark:bg-white/[0.07] text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-white/10 transition-colors"
              title="Retirer le filtre"
            >
              <Tag className="w-3 h-3 text-gray-400" />
              {tagFilter.color && <span className="w-2 h-2 rounded-full" style={{ backgroundColor: tagFilter.color }} />}
              <span className="font-medium">{tagFilter.name || "Tag"}</span>
              <X className="w-3 h-3" />
            </button>
          )}
          {selectedIds.size > 0 && <span className="ml-auto text-blue-600 dark:text-blue-300 font-medium tabular-nums">{selectedIds.size} sélectionné{selectedIds.size > 1 ? "s" : ""}</span>}
        </div>

        {/* Zone d'upload (montée en permanence pour la file d'attente) */}
        <div className={`px-3 sm:px-4 lg:px-6 shrink-0 ${showUpload ? "pb-3" : ""}`}>
          <FileUpload ref={uploadRef} folderId={folderId} onUploadComplete={handleRefresh} showZone={showUpload} folderName={folderName} />
        </div>

        {/* ===== Contenu ===== */}
        <div
          ref={listRef}
          className="flex-1 overflow-auto overflow-x-hidden px-3 sm:px-4 lg:px-6 pb-6 outline-none"
          onKeyDown={onListKeyDown}
          onContextMenu={onBackgroundContext}
          onDragOver={(e) => { if (hasInternalDrag(e.dataTransfer) && !(e.target as HTMLElement).closest("[data-folder-id]")) e.preventDefault(); }}
          onDrop={onContentDrop}
          role="listbox"
          aria-multiselectable
          aria-label="Contenu du dossier"
        >
          {loading ? (
            <Skeleton />
          ) : folders.length === 0 && files.length === 0 ? (
            isSearch ? (
              <EmptyState icon={Search} title="Aucun résultat" description={`Aucun fichier ne correspond à « ${searchQuery} » dans ${currentName}.`} action={<Button variant="secondary" size="sm" onClick={() => setSearchInput("")}>Effacer la recherche</Button>} />
            ) : tagIdParam ? (
              <EmptyState icon={Tag} title="Aucun fichier avec ce tag" action={<Button variant="secondary" size="sm" onClick={() => router.replace(pathname)}>Retirer le filtre</Button>} />
            ) : (
              <EmptyState
                icon={FolderOpen}
                title="Ce dossier est vide"
                description="Glissez des fichiers ici ou utilisez le bouton Envoyer. Vous pouvez aussi créer un sous-dossier."
                action={
                  <div className="flex items-center gap-2">
                    <Button variant="secondary" size="sm" onClick={() => setShowCreateFolder(true)}><FolderPlus className="w-4 h-4" /> Nouveau dossier</Button>
                    <Button variant="accent" size="sm" onClick={() => { setShowUpload(true); uploadRef.current?.openPicker(); }}><Upload className="w-4 h-4" /> Envoyer</Button>
                  </div>
                }
              />
            )
          ) : viewMode === "list" ? (
            <div className="card overflow-clip">
              <ListHeader />
              <div className="divide-y divide-line/70 dark:divide-white/5">
                {folderGroups.map((g) => (
                  <div key={g.key} className="divide-y divide-line/70 dark:divide-white/5">
                    {g.label && (
                      <div className="flex items-center gap-2 px-4 py-2 bg-gray-50/80 dark:bg-white/[0.03] text-[11px] font-semibold uppercase tracking-[0.12em] text-gray-500 dark:text-gray-400">
                        <Users className="w-3.5 h-3.5 text-blue-500" /> {g.label} <span className="text-gray-400 font-normal normal-case tracking-normal">· {g.folders.length} dossier{g.folders.length > 1 ? "s" : ""}</span>
                      </div>
                    )}
                    {g.folders.map((folder) => (
                      <FolderCard key={folder.id} folder={folder} onRefresh={handleRefresh} viewMode="list" focusable />
                    ))}
                  </div>
                ))}
                {sortedFiles.map((file) => (
                  <FileCard
                    key={file.id}
                    file={file}
                    onPreview={setPreviewFile}
                    onRefresh={handleRefresh}
                    viewMode="list"
                    selected={selectedIds.has(file.id)}
                    selectMode={effectiveSelectMode}
                    onToggleSelect={toggleSelect}
                    dragIds={selectedArr}
                    onContextMenu={openContextMenu}
                    focusable
                  />
                ))}
              </div>
            </div>
          ) : (
            <div className="space-y-6">
              {folderGroups.map((g) => g.folders.length > 0 && (
                <section key={g.key}>
                  <h3 className="text-[11px] font-semibold text-gray-400 uppercase tracking-wider mb-2.5 flex items-center gap-2">
                    {g.label ? <><Users className="w-3.5 h-3.5 text-blue-500" /> {g.label}</> : "Dossiers"}
                  </h3>
                  <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 sm:gap-3 lg:grid-cols-4 xl:grid-cols-5">
                    {g.folders.map((folder) => (
                      <FolderCard key={folder.id} folder={folder} onRefresh={handleRefresh} viewMode="grid" focusable />
                    ))}
                  </div>
                </section>
              ))}
              {sortedFiles.length > 0 && (
                <section>
                  <h3 className="text-[11px] font-semibold text-gray-400 uppercase tracking-wider mb-2.5">Fichiers</h3>
                  <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 sm:gap-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8">
                    {sortedFiles.map((file) => (
                      <FileCard
                        key={file.id}
                        file={file}
                        onPreview={setPreviewFile}
                        onRefresh={handleRefresh}
                        viewMode="grid"
                        selected={selectedIds.has(file.id)}
                        selectMode={effectiveSelectMode}
                        onToggleSelect={toggleSelect}
                        dragIds={selectedArr}
                        onContextMenu={openContextMenu}
                        focusable
                      />
                    ))}
                  </div>
                </section>
              )}
            </div>
          )}

          {/* Chargement infini */}
          {hasMore && !loading && (
            <div ref={sentinelRef} className="mt-6 flex justify-center">
              <button onClick={() => fetchData(true)} disabled={loadingMore} className="px-5 h-10 text-[13px] font-medium text-gray-600 dark:text-gray-300 bg-gray-100 dark:bg-white/[0.06] hover:bg-gray-200 dark:hover:bg-white/10 rounded-xl transition-colors disabled:opacity-60 flex items-center gap-2">
                {loadingMore ? <><Loader2 className="w-4 h-4 animate-spin" /> Chargement…</> : `Charger plus (${Math.max(0, (total ?? 0) - files.length)} restants)`}
              </button>
            </div>
          )}
        </div>
      </div>

      {/* ===== Aperçu (panneau latéral desktop / plein écran mobile) ===== */}
      {previewFile && (
        <div className="fixed inset-0 z-50 lg:relative lg:inset-auto lg:z-auto lg:w-[420px] xl:w-[460px] lg:shrink-0 lg:border-l lg:border-line dark:lg:border-white/[0.07]">
          <PreviewEngine file={previewFile} files={sortedFiles} onClose={() => setPreviewFile(null)} onNavigate={setPreviewFile} onChanged={handleRefresh} />
        </div>
      )}

      {/* ===== Barre d'actions groupées ===== */}
      <BulkActions selectedIds={selectedArr} totalCount={files.length} onClear={clearSelection} onRefresh={handleRefresh} onSelectAll={selectAll} currentFolderId={folderId || "root"} />

      {/* ===== Menu contextuel fichier ===== */}
      {contextMenu && (
        <FileActions
          key={contextMenu.file.id}
          file={contextMenu.file}
          anchor={{ x: contextMenu.x, y: contextMenu.y }}
          onClose={() => setContextMenu(null)}
          onRefresh={handleRefresh}
          onPreview={() => setPreviewFile(contextMenu.file)}
        />
      )}

      {/* ===== Menu contextuel fond ===== */}
      <AnimatePresence>
        {bgMenu && (
          <motion.div
            initial={{ opacity: 0, scale: 0.96 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.96 }} transition={{ duration: 0.12 }}
            className="fixed z-[75] w-52 glass rounded-2xl shadow-pop p-1.5" style={{ left: bgMenu.x, top: bgMenu.y }}
            onMouseDown={(e) => e.stopPropagation()} role="menu"
          >
            {[
              { icon: FolderPlus, label: "Nouveau dossier", hint: "⌘⇧N", run: () => setShowCreateFolder(true) },
              { icon: Upload, label: "Envoyer des fichiers", hint: "U", run: () => { setShowUpload(true); uploadRef.current?.openPicker(); } },
              { icon: CheckSquare, label: "Tout sélectionner", hint: "⌘A", run: () => { setSelectMode(true); selectAll(); } },
            ].map((it) => (
              <button key={it.label} role="menuitem" onClick={() => { it.run(); setBgMenu(null); }} className="w-full flex items-center gap-2.5 px-3 h-9 rounded-xl text-[13px] text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-white/[0.08] transition-colors">
                <it.icon className="w-4 h-4 text-gray-400" /><span className="flex-1 text-left">{it.label}</span><kbd>{it.hint}</kbd>
              </button>
            ))}
          </motion.div>
        )}
      </AnimatePresence>

      {/* ===== Overlay de dépôt natif ===== */}
      <AnimatePresence>
        {nativeDragOver && (
          <motion.div
            initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.15 }}
            className="fixed inset-0 z-[65] flex items-center justify-center bg-canvas/70 dark:bg-canvas/80 backdrop-blur-sm pointer-events-none"
          >
            <motion.div initial={{ scale: 0.94, y: 8 }} animate={{ scale: 1, y: 0 }} className="mx-6 w-full max-w-md rounded-3xl border-2 border-dashed border-blue-500 bg-surface/90 dark:bg-elevated/90 shadow-glow p-10 text-center">
              <div className="mx-auto mb-4 w-16 h-16 rounded-3xl bg-accent-gradient text-white flex items-center justify-center shadow-glow animate-float">
                <CloudUpload className="w-8 h-8" />
              </div>
              <p className="text-lg font-semibold text-gray-900 dark:text-white">Déposer pour envoyer</p>
              <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">dans <span className="font-medium text-gray-800 dark:text-gray-100">{currentName}</span></p>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>

      <CreateFolderModal isOpen={showCreateFolder} onClose={() => setShowCreateFolder(false)} parentId={folderId || null} onCreated={handleRefresh} />
      <CreateSharedFolderModal isOpen={showCreateSharedFolder} onClose={() => setShowCreateSharedFolder(false)} onCreated={handleRefresh} />
    </div>
  );
}