import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import JSZip from 'jszip';
import Layout from '../components/Layout';
import PageLoader from '../components/PageLoader';
import SortTh from '../components/SortTh';
import { supabase } from '../lib/supabase';
import { useAuth } from '../context/AuthContext';
import { popupMenuStyle } from '../lib/popupStyles';

const CARD = {
  background: 'var(--card-bg)',
  border: '1px solid var(--border)',
  borderRadius: 8,
  backdropFilter: 'blur(12px)',
  WebkitBackdropFilter: 'blur(12px)',
};

const LABEL = {
  fontSize: 11,
  fontWeight: 500,
  color: 'var(--text-secondary)',
  letterSpacing: 0.8,
  textTransform: 'uppercase',
  marginBottom: 14,
};

const TABLE_TH = {
  fontSize: 10,
  fontWeight: 500,
  color: 'var(--text-muted)',
  letterSpacing: 0.6,
  textTransform: 'uppercase',
  padding: '0 0 12px',
  border: 'none',
  background: 'transparent',
  verticalAlign: 'top',
};

const TABLE_TD = {
  padding: '5px',
  fontSize: 13,
  color: 'var(--text-primary)',
  border: 'none',
  background: 'transparent',
};

function formatBytes(value) {
  if (!value) return '—';
  const units = ['B', 'KB', 'MB', 'GB'];
  const index = Math.min(Math.floor(Math.log(value) / Math.log(1024)), 3);
  return `${(value / 1024 ** index).toFixed(index === 0 ? 0 : 1)} ${units[index]}`;
}

function formatDate(value) {
  if (!value) return '—';
  const date = new Date(value);
  const dateLabel = date.toLocaleDateString('en-US', {
    month: 'short',
    day: 'numeric',
    year: 'numeric',
  });
  const timeLabel = date.toLocaleTimeString('en-US', {
    hour: 'numeric',
    minute: '2-digit',
    hour12: true,
  });
  return `${dateLabel} ${timeLabel}`;
}

function extOf(name) {
  const dot = name.lastIndexOf('.');
  return dot > 0 ? name.slice(dot + 1).toUpperCase() : 'FILE';
}

function fileIconStyle(ext) {
  const kind = ext.toLowerCase();
  if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'avif', 'heic'].includes(kind)) return { bg: '#16a34a', color: '#fff' };
  if (['mp4', 'mov', 'avi', 'mkv', 'webm'].includes(kind)) return { bg: '#7c3aed', color: '#fff' };
  if (['mp3', 'wav', 'flac', 'aac'].includes(kind)) return { bg: '#db2777', color: '#fff' };
  if (kind === 'pdf') return { bg: '#dc2626', color: '#fff' };
  if (['doc', 'docx'].includes(kind)) return { bg: '#2563eb', color: '#fff' };
  if (['xls', 'xlsx', 'csv'].includes(kind)) return { bg: '#16a34a', color: '#fff' };
  if (['ppt', 'pptx'].includes(kind)) return { bg: '#ea580c', color: '#fff' };
  if (['zip', 'rar', '7z'].includes(kind)) return { bg: '#92400e', color: '#fff' };
  if (['ai', 'eps'].includes(kind)) return { bg: '#ff6c00', color: '#fff' };
  if (['psd', 'psb'].includes(kind)) return { bg: '#001e36', color: '#31a8ff' };
  if (['fig', 'sketch'].includes(kind)) return { bg: '#7c3aed', color: '#fff' };
  return { bg: '#475569', color: '#fff' };
}

function FileIcon({ name, isDir }) {
  if (isDir) {
    return (
      <div style={{ width: 24, height: 24, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z" />
        </svg>
      </div>
    );
  }

  const ext = extOf(name);
  const { bg, color } = fileIconStyle(ext);
  return (
    <div style={{ width: 24, height: 24, borderRadius: 4, background: bg, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
      <span style={{ color, fontSize: 7, fontWeight: 600, letterSpacing: 0.3, fontFamily: 'monospace' }}>{ext.slice(0, 4)}</span>
    </div>
  );
}

async function getAccessTokenOrThrow() {
  const { data: { session } } = await supabase.auth.getSession();
  if (session?.access_token) return session.access_token;

  const { data: refreshed, error } = await supabase.auth.refreshSession();
  if (error) throw new Error('Session expired. Please sign in again.');
  if (refreshed?.session?.access_token) return refreshed.session.access_token;

  throw new Error('Session expired. Please sign in again.');
}

async function downloadViaLocalFilebrowser(path, session) {
  const accessToken = session?.access_token || await getAccessTokenOrThrow();
  const response = await fetch(`/api/filebrowser?action=download-blob&path=${encodeURIComponent(path)}&sb_access_token=${encodeURIComponent(accessToken)}`, {
    headers: { Authorization: `Bearer ${accessToken}` },
  });
  if (!response.ok) {
    const text = await response.text();
    throw new Error(text || `Error ${response.status}`);
  }
  return response;
}

async function downloadViaApiToken(path, filename) {
  const accessToken = await getAccessTokenOrThrow();
  const metaResponse = await fetch(`/api/filebrowser?action=download&path=${encodeURIComponent(path)}&sb_access_token=${encodeURIComponent(accessToken)}`, {
    headers: { Authorization: `Bearer ${accessToken}` },
  });
  if (!metaResponse.ok) {
    const text = await metaResponse.text();
    throw new Error(text || `Error ${metaResponse.status}`);
  }
  const { url, token } = await metaResponse.json();
  if (!url || !token) throw new Error('Download URL unavailable.');
  const urlObj = new URL(url, window.location.origin);
  urlObj.searchParams.set('auth', token);
  const link = document.createElement('a');
  link.href = urlObj.toString();
  link.download = filename;
  link.target = '_blank';
  link.rel = 'noopener noreferrer';
  link.style.display = 'none';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

async function downloadBlobViaLocalFilebrowser(path) {
  const accessToken = await getAccessTokenOrThrow();
  const response = await downloadViaLocalFilebrowser(path, { access_token: accessToken });
  return response.blob();
}

async function fbqProxy(op, path, extra = {}) {
  const accessToken = await getAccessTokenOrThrow();
  const authHeaders = { Authorization: `Bearer ${accessToken}` };

  if (op === 'list') {
    const response = await fetch(`/api/filebrowser?action=list&path=${encodeURIComponent(path)}&sb_access_token=${encodeURIComponent(accessToken)}`, {
      method: 'GET',
      headers: authHeaders,
    });
    if (!response.ok) {
      const text = await response.text();
      throw new Error(text || `Error ${response.status}`);
    }
    const data = await response.json();
    const entries = Array.isArray(data?.entries) ? data.entries : [];
    const folders = entries
      .filter((entry) => entry.type === 'dir' || entry.type === 'directory' || entry.isDir)
      .map((entry) => ({ name: entry.name, filename: entry.name, path: entry.path, type: 'directory', isDir: true, size: 0, modified: entry.mtime || null }));
    const files = entries
      .filter((entry) => !(entry.type === 'dir' || entry.type === 'directory' || entry.isDir))
      .map((entry) => ({ name: entry.name, filename: entry.name, path: entry.path, type: 'file', isDir: false, size: entry.size || 0, modified: entry.mtime || null }));
    return new Response(JSON.stringify({ folders, files }), { status: 200, headers: { 'Content-Type': 'application/json' } });
  }

  if (op === 'download') {
    return downloadViaLocalFilebrowser(path, { access_token: accessToken });
  }

  if (op === 'mkdir') {
    const normalized = String(path || '/');
    const parts = normalized.split('/').filter(Boolean);
    const name = parts.pop() || '';
    const parentPath = `/${parts.join('/')}`;
    const response = await fetch(`/api/filebrowser?action=mkdir&sb_access_token=${encodeURIComponent(accessToken)}`, {
      method: 'POST',
      headers: { ...authHeaders, 'Content-Type': 'application/json' },
      body: JSON.stringify({ path: parentPath || '/', name }),
    });
    if (!response.ok) {
      const text = await response.text();
      throw new Error(text || `Error ${response.status}`);
    }
    return response;
  }

  if (op === 'upload') {
    const file = extra.body?.get?.('file');
    if (!file) throw new Error('No file provided.');
    const uploadResponse = await fetch(`/api/filebrowser?action=upload&path=${encodeURIComponent(path)}&sb_access_token=${encodeURIComponent(accessToken)}`, {
      method: 'POST',
      headers: { ...authHeaders, 'Content-Type': 'application/octet-stream' },
      body: file,
    });
    if (!uploadResponse.ok) {
      const text = await uploadResponse.text();
      throw new Error(text || `Error ${uploadResponse.status}`);
    }
    return uploadResponse;
  }

  if (op === 'delete') {
    const files = JSON.parse(extra.headers?.['X-Files'] || '[]');
    for (const filePath of files) {
      const response = await fetch(`/api/filebrowser?action=delete&path=${encodeURIComponent(filePath)}&sb_access_token=${encodeURIComponent(accessToken)}`, {
        method: 'DELETE',
        headers: authHeaders,
      });
      if (!response.ok) {
        const text = await response.text();
        throw new Error(text || `Error ${response.status}`);
      }
    }
    return new Response(JSON.stringify({ ok: true }), { status: 200, headers: { 'Content-Type': 'application/json' } });
  }

  if (op === 'move' || op === 'copy') {
    const files = JSON.parse(extra.headers?.['X-Files'] || '[]');
    for (const srcPath of files) {
      const response = await fetch(`/api/filebrowser?action=move&sb_access_token=${encodeURIComponent(accessToken)}`, {
        method: 'POST',
        headers: { ...authHeaders, 'Content-Type': 'application/json' },
        body: JSON.stringify({ srcPath, dstPath: path, mode: op }),
      });
      if (!response.ok) {
        const text = await response.text();
        throw new Error(text || `Error ${response.status}`);
      }
    }
    return new Response(JSON.stringify({ ok: true }), { status: 200, headers: { 'Content-Type': 'application/json' } });
  }

  throw new Error(`Unsupported operation: ${op}`);
}

function safeName(v) {
  return String(v || '').trim().replace(/[\\/:*?"<>|#%{}^~[\]`]+/g, '-').replace(/\s+/g, ' ').replace(/^-+|-+$/g, '');
}

function rootPath(user) {
  if (!user || user.role === 'team' || user.role === 'external') return '/';
  const companies = user.companies?.filter(Boolean) ?? [];
  if (companies.length > 1) return '/';
  const name = companies[0]?.name ?? user.company?.name;
  return name ? `/${safeName(name)}` : '/';
}

function parsePath(path) {
  return path.split('/').filter(Boolean);
}

function buildPath(parts) {
  return `/${parts.join('/')}`;
}

const TREE_TOGGLE_W = 18;

export default function FileSharing() {
  const { currentUser } = useAuth();
  const accessScope = useMemo(() => ({
    home: rootPath(currentUser),
    canManage: currentUser?.role === 'team',
  }), [currentUser]);
  const home = accessScope.home;
  const pinsStorageKey = useMemo(() => `fbq_pins:${currentUser?.id ?? 'anon'}`, [currentUser?.id]);

  const [path, setPath] = useState(home);
  const [entries, setEntries] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [pins, setPins] = useState([]);
  const [selected, setSelected] = useState(new Set());
  const [uploading, setUploading] = useState(false);
  const [uploadProgress, setUploadProgress] = useState(null);
  const [downloadingSelection, setDownloadingSelection] = useState(false);
  const [downloadProgress, setDownloadProgress] = useState(null);
  const [ctxMenu, setCtxMenu] = useState(null);
  const [clipboard, setClipboard] = useState(null);
  const [hoveredNavPath, setHoveredNavPath] = useState(null);
  const [dragActive, setDragActive] = useState(false);
  const [sortKey, setSortKey] = useState('name');
  const [sortDir, setSortDir] = useState('asc');
  const [expanded, setExpanded] = useState(() => new Set([home]));
  const [, setNavVersion] = useState(0);
  const navCache = useRef(new Map());
  const dragDepthRef = useRef(0);
  const rootRef = useRef(null);
  const tableScrollRef = useRef(null);
  const tableHeadRef = useRef(null);
  const firstBodyRowRef = useRef(null);
  const [contentHeight, setContentHeight] = useState(null);
  const [tableHeaderHeight, setTableHeaderHeight] = useState(0);
  const [tableRowHeight, setTableRowHeight] = useState(0);
  const [tableViewportHeight, setTableViewportHeight] = useState(0);

  useEffect(() => {
    if (!ctxMenu) return undefined;
    const close = () => setCtxMenu(null);
    const onKey = (event) => {
      if (event.key === 'Escape') setCtxMenu(null);
    };
    window.addEventListener('click', close);
    window.addEventListener('keydown', onKey);
    return () => {
      window.removeEventListener('click', close);
      window.removeEventListener('keydown', onKey);
    };
  }, [ctxMenu]);

  const load = useCallback(async (nextPath) => {
    setLoading(true);
    setError('');
    setSelected(new Set());
    try {
      const response = await fbqProxy('list', nextPath);
      const data = await response.json();
      setEntries(Array.isArray(data) ? data : [...(data?.folders ?? []), ...(data?.files ?? [])]);
    } catch (err) {
      setError(err?.message || 'Failed to load files.');
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    load(path);
  }, [path, load]);

  useEffect(() => {
    try {
      setPins(JSON.parse(localStorage.getItem(pinsStorageKey) || '[]'));
    } catch {
      setPins([]);
    }
  }, [pinsStorageKey]);

  async function loadNavPath(nextPath) {
    if (navCache.current.has(nextPath)) return;
    navCache.current.set(nextPath, []);
    try {
      const response = await fbqProxy('list', nextPath);
      const data = await response.json();
      const folders = (data?.folders ?? []).map((folder) => folder.name ?? folder.filename ?? '').filter(Boolean);
      navCache.current.set(nextPath, folders);
      setNavVersion((value) => value + 1);
    } catch {
      navCache.current.delete(nextPath);
    }
  }

  useEffect(() => {
    loadNavPath(home);
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  useEffect(() => {
    function measure() {
      const root = rootRef.current;
      if (!root) return;
      const main = root.closest('.main-content');
      const header = main?.querySelector('.site-header');
      if (!main || !header) return;
      const styles = window.getComputedStyle(main);
      const paddingTop = parseFloat(styles.paddingTop || '0');
      const paddingBottom = parseFloat(styles.paddingBottom || '0');
      setContentHeight(Math.max(320, main.clientHeight - paddingTop - paddingBottom - header.offsetHeight));
    }

    measure();
    window.addEventListener('resize', measure);
    return () => window.removeEventListener('resize', measure);
  }, []);

  useEffect(() => {
    function measureTableHeader() {
      setTableHeaderHeight(tableHeadRef.current?.offsetHeight ?? 0);
      setTableRowHeight(firstBodyRowRef.current?.offsetHeight ?? 0);
    }

    measureTableHeader();
    window.addEventListener('resize', measureTableHeader);
    return () => window.removeEventListener('resize', measureTableHeader);
  }, [entries.length, loading, sortDir, sortKey]);

  useEffect(() => {
    const node = tableScrollRef.current;
    if (!node) return undefined;

    const measureViewport = () => setTableViewportHeight(node.clientHeight);
    measureViewport();

    const observer = new ResizeObserver(measureViewport);
    observer.observe(node);
    window.addEventListener('resize', measureViewport);

    return () => {
      observer.disconnect();
      window.removeEventListener('resize', measureViewport);
    };
  }, [contentHeight, entries.length, loading]);

  useEffect(() => {
    const segments = parsePath(path);
    const homeParts = parsePath(home);
    const toExpand = [home];
    for (let index = homeParts.length; index < segments.length; index += 1) {
      toExpand.push(buildPath(segments.slice(0, index + 1)));
    }
    setExpanded((prev) => {
      const next = new Set(prev);
      toExpand.forEach((value) => next.add(value));
      return next;
    });
    toExpand.forEach(loadNavPath);
    loadNavPath(path);
  }, [path]); // eslint-disable-line react-hooks/exhaustive-deps

  function toggleNav(nextPath) {
    setExpanded((prev) => {
      const next = new Set(prev);
      if (next.has(nextPath)) {
        next.delete(nextPath);
      } else {
        next.add(nextPath);
        loadNavPath(nextPath);
      }
      return next;
    });
  }

  function renderNavTree(nodePath, depth) { // eslint-disable-line no-unused-vars
    const folders = navCache.current.get(nodePath) ?? [];
    if (!folders.length) return null;
    return folders.map((folderName) => {
      const childPath = nodePath === '/' ? `/${folderName}` : `${nodePath}/${folderName}`;
      const isExpanded = expanded.has(childPath);
      return (
        <div key={childPath}>
          <div style={{ display: 'flex', alignItems: 'center', position: 'relative' }}>
            <button
              type="button"
              onClick={(event) => {
                event.stopPropagation();
                toggleNav(childPath);
              }}
              style={{ width: 18, height: 28, flexShrink: 0, background: 'none', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-muted)', padding: 0 }}
            >
              <svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor" style={{ transform: isExpanded ? 'rotate(90deg)' : 'none', transition: 'transform 0.15s' }}>
                <path d="M2 1l4 3-4 3V1z" />
              </svg>
            </button>
            <button
              type="button"
              onClick={() => navigate(childPath)}
              onContextMenu={(event) => {
                event.preventDefault();
                event.stopPropagation();
                pin(folderName, childPath);
              }}
              onMouseEnter={() => setHoveredNavPath(childPath)}
              onMouseLeave={() => setHoveredNavPath((prev) => (prev === childPath ? null : prev))}
              style={{
                flex: 1,
                background: 'none',
                border: 'none',
                cursor: 'pointer',
                textAlign: 'left',
                padding: '4px 6px 4px 2px',
                borderRadius: 4,
                fontSize: 13,
                fontWeight: 500,
                color: path === childPath || hoveredNavPath === childPath ? 'var(--accent)' : 'var(--text-primary)',
                display: 'flex',
                alignItems: 'center',
                overflow: 'hidden',
                transition: 'color 140ms ease',
              }}
            >
              <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{folderName}</span>
            </button>
          </div>
          {isExpanded && (
            <div style={{ marginLeft: TREE_TOGGLE_W, position: 'relative' }}>
              <span aria-hidden style={{ position: 'absolute', left: -(TREE_TOGGLE_W / 2), top: 0, bottom: 0, width: 1, background: 'var(--border)' }} />
              {renderNavTree(childPath, depth + 1)}
            </div>
          )}
        </div>
      );
    });
  }

  function navigate(nextPath) {
    setPath(nextPath);
  }

  function breadcrumbs() {
    const segments = parsePath(path);
    const homeParts = parsePath(home);
    const crumbs = [{ label: 'Home', path: home }];
    for (let index = homeParts.length; index < segments.length; index += 1) {
      crumbs.push({ label: segments[index], path: buildPath(segments.slice(0, index + 1)) });
    }
    return crumbs;
  }

  function toggleSelect(name) {
    setSelected((prev) => {
      const next = new Set(prev);
      if (next.has(name)) next.delete(name);
      else next.add(name);
      return next;
    });
  }

  function toggleSort(column) {
    if (sortKey === column) {
      setSortDir((prev) => (prev === 'asc' ? 'desc' : 'asc'));
      return;
    }
    setSortKey(column);
    setSortDir(column === 'modified' ? 'desc' : 'asc');
  }

  function pin(label, nextPath) {
    const next = [...pins.filter((item) => item.path !== nextPath), { label, path: nextPath }];
    setPins(next);
    localStorage.setItem(pinsStorageKey, JSON.stringify(next));
  }

  function unpin(nextPath) {
    const next = pins.filter((item) => item.path !== nextPath);
    setPins(next);
    localStorage.setItem(pinsStorageKey, JSON.stringify(next));
  }

  function triggerDownload(url, filename) {
    const link = document.createElement('a');
    link.href = url;
    link.download = filename;
    link.style.display = 'none';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
  }

  async function handleDownload(entry) {
    const nextPath = entry.path ?? (path === '/' ? `/${entry.name}` : `${path}/${entry.name}`);
    try {
      await downloadViaApiToken(nextPath, entry.name);
    } catch (err) {
      setError(err?.message || 'Download failed.');
    }
  }

  async function addPathToZip(zip, targetPath, zipPath = '') {
    const response = await fbqProxy('list', targetPath);
    const data = await response.json();
    const folders = data?.folders ?? [];
    const files = data?.files ?? [];

    for (const folder of folders) {
      const folderName = folder.name ?? folder.filename ?? '';
      if (!folderName) continue;
      const childPath = targetPath === '/' ? `/${folderName}` : `${targetPath}/${folderName}`;
      const childZipPath = zipPath ? `${zipPath}/${folderName}` : folderName;
      await addPathToZip(zip, childPath, childZipPath);
    }

    for (const file of files) {
      const fileName = file.name ?? file.filename ?? '';
      if (!fileName) continue;
      const filePath = file.path ?? (targetPath === '/' ? `/${fileName}` : `${targetPath}/${fileName}`);
      const blob = await downloadBlobViaLocalFilebrowser(filePath);
      zip.file(zipPath ? `${zipPath}/${fileName}` : fileName, blob);
    }
  }

  async function handleDownloadSelected() {
    if (!selected.size) return;
    setDownloadingSelection(true);
    setDownloadProgress(0);
    setError('');
    try {
      const selectedEntries = [...selected]
        .map((name) => entries.find((entry) => (entry.name ?? entry.filename) === name))
        .filter(Boolean);

      if (selectedEntries.length === 1) {
        const [entry] = selectedEntries;
        const name = entry.name ?? entry.filename ?? '';
        const targetPath = entry.path ?? (path === '/' ? `/${name}` : `${path}/${name}`);
        const isDir = entry.type === 'directory' || entry.isDir;

        if (!isDir) {
          const blob = await downloadBlobViaLocalFilebrowser(targetPath);
          setDownloadProgress(100);
          triggerDownload(URL.createObjectURL(blob), name);
          return;
        }

        const zip = new JSZip();
        setDownloadProgress(50);
        await addPathToZip(zip, targetPath, name);
        setDownloadProgress(100);
        triggerDownload(URL.createObjectURL(await zip.generateAsync({ type: 'blob' })), `${name}.zip`);
        return;
      }

      const zip = new JSZip();

      for (let i = 0; i < selectedEntries.length; i++) {
        const entry = selectedEntries[i];
        const name = entry.name ?? entry.filename ?? '';
        const targetPath = entry.path ?? (path === '/' ? `/${name}` : `${path}/${name}`);
        const isDir = entry.type === 'directory' || entry.isDir;
        if (isDir) {
          await addPathToZip(zip, targetPath, name);
        } else {
          const blob = await downloadBlobViaLocalFilebrowser(targetPath);
          zip.file(name, blob);
        }
        setDownloadProgress(Math.round(((i + 1) / selectedEntries.length) * 100));
      }

      const folderName = parsePath(path).at(-1) || 'files';
      triggerDownload(URL.createObjectURL(await zip.generateAsync({ type: 'blob' })), `${folderName}-selection.zip`);
    } catch (err) {
      setError(err?.message || 'Download failed.');
    } finally {
      setDownloadingSelection(false);
      setDownloadProgress(null);
    }
  }

  async function handlePaste(destPath) {
    if (!clipboard) return;
    try {
      await fbqProxy(clipboard.mode, destPath, {
        headers: { 'X-Files': JSON.stringify(clipboard.items.map((i) => i.path)) },
      });
      if (clipboard.mode === 'move') setClipboard(null);
      load(path);
    } catch {
      setError('Paste failed.');
    }
  }

  async function handleDelete() {
    if (!selected.size) return;
    if (!window.confirm(`Delete ${selected.size} item(s)?`)) return;
    const filePaths = [...selected].map((name) => (
      entries.find((entry) => (entry.name ?? entry.filename) === name)?.path
      ?? (path === '/' ? `/${name}` : `${path}/${name}`)
    ));
    try {
      await fbqProxy('delete', path, { headers: { 'X-Files': JSON.stringify(filePaths) } });
      load(path);
    } catch {
      setError('Delete failed.');
    }
  }

  async function uploadFiles(files) {
    if (!files.length) return;
    setUploading(true);
    setUploadProgress(0);
    try {
      const dirSet = new Set();
      files.forEach(({ relativePath }) => {
        const segments = relativePath.split('/').filter(Boolean);
        for (let index = 1; index < segments.length; index += 1) {
          dirSet.add(segments.slice(0, index).join('/'));
        }
      });

      const dirs = [...dirSet].sort((left, right) => left.split('/').length - right.split('/').length);
      for (const dir of dirs) {
        const dirPath = `${path === '/' ? '' : path}/${dir}/`;
        try {
          await fbqProxy('mkdir', dirPath);
        } catch {}
      }

      for (let index = 0; index < files.length; index += 1) {
        const { file, relativePath } = files[index];
        const formData = new FormData();
        formData.append('file', file);
        await fbqProxy('upload', path === '/' ? `/${relativePath}` : `${path}/${relativePath}`, { body: formData });
        setUploadProgress(Math.round(((index + 1) / files.length) * 100));
      }
      load(path);
    } catch {
      setError('Upload failed.');
    } finally {
      setUploading(false);
      setUploadProgress(null);
    }
  }

  async function collectEntry(entry, parent = '') {
    if (entry.isFile) {
      return [await new Promise((resolve, reject) => entry.file((file) => resolve({ file, relativePath: parent ? `${parent}/${file.name}` : file.name }), reject))];
    }
    if (!entry.isDirectory) return [];
    const nextParent = parent ? `${parent}/${entry.name}` : entry.name;
    const reader = entry.createReader();
    const children = [];
    while (true) {
      const batch = await new Promise((resolve, reject) => reader.readEntries(resolve, reject));
      if (!batch.length) break;
      children.push(...batch);
    }
    return (await Promise.all(children.map((child) => collectEntry(child, nextParent)))).flat();
  }

  async function handleDrop(event) {
    event.preventDefault();
    event.stopPropagation();
    dragDepthRef.current = 0;
    setDragActive(false);

    const entriesToRead = [...(event.dataTransfer?.items ?? [])]
      .filter((item) => item.kind === 'file')
      .map((item) => item.webkitGetAsEntry?.())
      .filter(Boolean);

    if (entriesToRead.length) {
      await uploadFiles((await Promise.all(entriesToRead.map((entry) => collectEntry(entry)))).flat());
      return;
    }

    await uploadFiles(
      [...(event.dataTransfer?.files ?? [])].map((file) => ({
        file,
        relativePath: file.webkitRelativePath || file.name,
      })),
    );
  }

  function handleDragEnter(event) {
    event.preventDefault();
    event.stopPropagation();
    dragDepthRef.current += 1;
    setDragActive(true);
  }

  function handleDragOver(event) {
    event.preventDefault();
    event.stopPropagation();
    event.dataTransfer.dropEffect = 'copy';
  }

  function handleDragLeave(event) {
    event.preventDefault();
    event.stopPropagation();
    dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
    if (dragDepthRef.current === 0) setDragActive(false);
  }

  function openCtxMenu(event, entry, childPath) {
    event.preventDefault();
    event.stopPropagation();
    setCtxMenu({ x: event.clientX, y: event.clientY, entry, childPath });
  }

  const crumbs = breadcrumbs();

  const sortedEntries = useMemo(() => {
    function valueOf(entry, column) {
      if (column === 'name') return (entry.name ?? entry.filename ?? '').toLowerCase();
      if (column === 'size') return Number(entry.size ?? -1);
      if (column === 'modified') return new Date(entry.modified ?? entry.lastModified ?? 0).getTime();
      return '';
    }

    return [...entries].sort((left, right) => {
      const leftIsDir = left.type === 'directory' || left.isDir;
      const rightIsDir = right.type === 'directory' || right.isDir;
      if (leftIsDir !== rightIsDir) return leftIsDir ? -1 : 1;

      let result = 0;
      const leftValue = valueOf(left, sortKey);
      const rightValue = valueOf(right, sortKey);
      if (typeof leftValue === 'string' && typeof rightValue === 'string') {
        result = leftValue.localeCompare(rightValue);
      } else if (leftValue === rightValue) {
        result = 0;
      } else {
        result = leftValue > rightValue ? 1 : -1;
      }

      if (result === 0) {
        const leftName = (left.name ?? left.filename ?? '').toLowerCase();
        const rightName = (right.name ?? right.filename ?? '').toLowerCase();
        result = leftName.localeCompare(rightName);
      }

      return sortDir === 'asc' ? result : -result;
    });
  }, [entries, sortDir, sortKey]);

  const fillerRowCount = useMemo(() => {
    if (!entries.length || !tableRowHeight || !tableViewportHeight) return 0;
    const availableHeight = tableViewportHeight - tableHeaderHeight;
    if (availableHeight <= 0) return 0;
    const visibleRowCount = Math.ceil(availableHeight / tableRowHeight) + 1;
    return Math.max(0, visibleRowCount - sortedEntries.length);
  }, [entries.length, sortedEntries.length, tableHeaderHeight, tableRowHeight, tableViewportHeight]);

  return (
    <Layout>
      <div
        ref={rootRef}
        style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 3fr)',
          gap: 24,
          height: contentHeight ?? 'calc(100vh - 160px)',
          alignItems: 'stretch',
        }}
      >
        <div style={{ display: 'flex', flexDirection: 'column', gap: 24, minHeight: 0 }}>
          <div style={{ ...CARD, padding: '14px 16px', flexShrink: 0 }}>
            <div style={LABEL}>Pinned</div>
            {pins.length === 0 ? (
              <div style={{ fontSize: 13, color: 'var(--text-muted)' }}>Right-click a folder to pin it.</div>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                {pins.map((pinItem) => (
                  <div key={pinItem.path} style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                    <button
                      type="button"
                      onClick={() => navigate(pinItem.path)}
                      onMouseEnter={() => setHoveredNavPath(pinItem.path)}
                      onMouseLeave={() => setHoveredNavPath((prev) => (prev === pinItem.path ? null : prev))}
                      style={{
                        flex: 1,
                        background: 'none',
                        border: 'none',
                        cursor: 'pointer',
                        textAlign: 'left',
                        padding: '4px 6px',
                        borderRadius: 4,
                        fontSize: 13,
                        fontWeight: 500,
                        color: path === pinItem.path || hoveredNavPath === pinItem.path ? 'var(--accent)' : 'var(--text-primary)',
                        display: 'flex',
                        alignItems: 'center',
                        overflow: 'hidden',
                        transition: 'color 140ms ease',
                      }}
                    >
                      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{pinItem.label}</span>
                    </button>
                    <button type="button" onClick={() => unpin(pinItem.path)} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 4, color: 'var(--text-muted)', flexShrink: 0 }}>
                      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                        <line x1="18" y1="6" x2="6" y2="18" />
                        <line x1="6" y1="6" x2="18" y2="18" />
                      </svg>
                    </button>
                  </div>
                ))}
              </div>
            )}
          </div>

          <div style={{ ...CARD, padding: '14px 16px', flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
            <div style={{ ...LABEL, flexShrink: 0 }}>Navigation</div>
            <div className="table-scroll-hidden" style={{ flex: 1, overflowY: 'auto', overflowX: 'hidden' }}>
              <button
                type="button"
                onClick={() => navigate(home)}
                onMouseEnter={() => setHoveredNavPath(home)}
                onMouseLeave={() => setHoveredNavPath((prev) => (prev === home ? null : prev))}
                style={{ width: '100%', background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left', padding: '4px 6px', borderRadius: 4, fontSize: 13, fontWeight: 500, color: path === home || hoveredNavPath === home ? 'var(--accent)' : 'var(--text-primary)', display: 'flex', alignItems: 'center', marginBottom: 2, transition: 'color 140ms ease' }}
              >
                Home
              </button>
              {renderNavTree(home, 0)}
            </div>
          </div>
        </div>

        <div
          style={{
            ...CARD,
            padding: 0,
            position: 'relative',
            display: 'flex',
            flexDirection: 'column',
            overflow: 'hidden',
            borderColor: dragActive ? 'var(--accent)' : 'var(--border)',
            boxShadow: dragActive ? '0 0 0 1px rgba(245,165,35,0.25) inset' : 'none',
            transition: 'border-color 140ms ease, box-shadow 140ms ease',
          }}
          onDragEnter={handleDragEnter}
          onDragOver={handleDragOver}
          onDragLeave={handleDragLeave}
          onDrop={handleDrop}
        >
          <div style={{ padding: '18px 21px', borderBottom: '1px solid var(--border)', flexShrink: 0, position: 'relative' }}>
            {selected.size > 0 && (
              <div style={{ position: 'absolute', top: 18, right: 21, display: 'flex', gap: 8 }}>
                <button
                  type="button"
                  className="btn btn-outline"
                  onClick={handleDownloadSelected}
                  disabled={downloadingSelection}
                >
                  {downloadingSelection ? 'Downloading...' : `Download (${selected.size})`}
                </button>
                <button type="button" className="btn btn-danger" onClick={handleDelete}>
                  Delete ({selected.size})
                </button>
              </div>
            )}

            <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', paddingRight: selected.size > 0 ? 286 : 0 }}>
              <div>
                <div style={LABEL}>File Browser</div>
                <div style={{ fontSize: 12, color: dragActive ? 'var(--accent)' : 'var(--text-muted)', marginTop: -2, marginBottom: 14, transition: 'color 140ms ease' }}>
                  Drag and drop files or folders here.
                </div>
                <div style={{ ...LABEL, marginBottom: 0 }}>
                  {crumbs.map((crumb, index) => (
                    <span key={crumb.path}>
                      {index > 0 && <span style={{ margin: '0 4px', opacity: 0.4 }}>/</span>}
                      <button
                        type="button"
                        className="dashboard-inline-link"
                        onClick={() => navigate(crumb.path)}
                        style={{
                          background: 'none',
                          border: 'none',
                          cursor: index < crumbs.length - 1 ? 'pointer' : 'default',
                          padding: 0,
                          color: index === crumbs.length - 1 ? 'var(--accent)' : 'var(--text-primary)',
                          fontSize: 'inherit',
                          fontWeight: 'inherit',
                          letterSpacing: 'inherit',
                          textTransform: 'inherit',
                          fontFamily: 'inherit',
                          lineHeight: 'inherit',
                        }}
                      >
                        {crumb.label}
                      </button>
                    </span>
                  ))}
                </div>
              </div>
              <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                {uploading && <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>Uploading {uploadProgress}%</div>}
              </div>
            </div>
          </div>

          <div
            className="table-scroll-hidden"
            ref={tableScrollRef}
            style={{
              flex: 1,
              overflowY: 'auto',
              minHeight: 0,
              padding: '18px 21px',
            }}
            onContextMenu={(e) => {
              if (e.target === e.currentTarget || e.target.tagName === 'TABLE' || e.target.closest('table')?.parentElement === e.currentTarget) {
                e.preventDefault();
                if (clipboard) setCtxMenu({ x: e.clientX, y: e.clientY, entry: null, childPath: null });
              }
            }}
          >
            {error && <div style={{ fontSize: 13, color: 'var(--danger)', paddingBottom: 12 }}>{error}</div>}
            {loading ? (
              <div className="card-empty-center">Loading...</div>
            ) : entries.length === 0 ? (
              <div className="card-empty-center">This folder is empty.</div>
            ) : (
              <table className="table-sticky-head" style={{ width: '100%', tableLayout: 'fixed', borderCollapse: 'collapse' }}>
                <thead ref={tableHeadRef}>
                  <tr>
                    <th style={{ ...TABLE_TH, width: 32, textAlign: 'center', padding: '0 5px 12px 5px', cursor: 'default' }}>
                      <input type="checkbox" checked={selected.size === entries.length && entries.length > 0} onChange={(event) => setSelected(event.target.checked ? new Set(entries.map((entry) => entry.name ?? entry.filename)) : new Set())} />
                    </th>
                    <SortTh col="name" sortKey={sortKey} sortDir={sortDir} onSort={toggleSort} style={{ ...TABLE_TH, textAlign: 'left', paddingLeft: 5 }}>
                      Name
                    </SortTh>
                    <SortTh col="size" sortKey={sortKey} sortDir={sortDir} onSort={toggleSort} style={{ ...TABLE_TH, textAlign: 'right', width: 100, padding: '0 5px 12px 5px' }}>
                      Size
                    </SortTh>
                    <SortTh col="modified" sortKey={sortKey} sortDir={sortDir} onSort={toggleSort} style={{ ...TABLE_TH, textAlign: 'right', width: 185, padding: '0 5px 12px 5px' }}>
                      Modified
                    </SortTh>
                  </tr>
                </thead>
                <tbody>
                  {sortedEntries.map((entry, index) => {
                    const name = entry.name ?? entry.filename ?? '';
                    const isDir = entry.type === 'directory' || entry.isDir;
                    const childPath = entry.path ?? (path === '/' ? `/${name}` : `${path}/${name}`);
                    const rowBg = index % 2 === 0 ? 'var(--file-row-alt-bg)' : 'transparent';

                    return (
                      <tr
                        key={name}
                        ref={index === 0 ? firstBodyRowRef : undefined}
                        style={{ cursor: isDir ? 'pointer' : 'default' }}
                        onClick={() => isDir && navigate(childPath)}
                        onContextMenu={(event) => openCtxMenu(event, entry, childPath)}
                      >
                        <td style={{ ...TABLE_TD, width: 32, textAlign: 'center', background: rowBg }} onClick={(event) => { event.stopPropagation(); toggleSelect(name); }}>
                          <input type="checkbox" checked={selected.has(name)} onChange={() => toggleSelect(name)} onClick={(event) => event.stopPropagation()} />
                        </td>
                        <td style={{ ...TABLE_TD, textAlign: 'left', background: rowBg }}>
                          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                            <FileIcon name={name} isDir={isDir} />
                            {isDir ? (
                              <button type="button" className="dashboard-inline-link" onClick={(event) => { event.stopPropagation(); navigate(childPath); }} style={{ fontSize: 13, fontWeight: 400, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'left' }}>
                                {name}
                              </button>
                            ) : (
                              <span style={{ fontSize: 13, color: 'var(--text-primary)', fontWeight: 400, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{name}</span>
                            )}
                          </div>
                        </td>
                        <td style={{ ...TABLE_TD, textAlign: 'right', fontSize: 12, color: 'var(--text-primary)', background: rowBg }}>{isDir ? '—' : formatBytes(entry.size ?? null)}</td>
                        <td style={{ ...TABLE_TD, textAlign: 'right', fontSize: 12, color: 'var(--text-primary)', background: rowBg }}>{formatDate(entry.modified ?? entry.lastModified ?? null)}</td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            )}
          </div>

          {(loading || uploading || downloadingSelection) && (
            <PageLoader
              scope="container"
              label={uploading ? 'Uploading' : downloadingSelection ? 'Downloading' : 'Loading'}
              progress={uploading ? uploadProgress : downloadingSelection ? downloadProgress : null}
            />
          )}
        </div>
      </div>

      {ctxMenu && (() => {
        const { x, y, entry, childPath } = ctxMenu;
        const isDir = entry ? (entry.type === 'directory' || entry.isDir) : false;
        const name = entry ? (entry.name ?? entry.filename ?? '') : '';
        const isPinned = entry ? pins.some((pinItem) => pinItem.path === childPath) : false;
        const clipboardItems = entry
          ? (selected.has(name)
            ? [...selected].map((n) => {
                const e = entries.find((en) => (en.name ?? en.filename) === n);
                return { name: n, path: e?.path ?? (path === '/' ? `/${n}` : `${path}/${n}`) };
              })
            : [{ name, path: childPath }])
          : [];
        const itemStyle = {
          display: 'flex',
          alignItems: 'center',
          gap: 8,
          padding: '7px 14px',
          fontSize: 13,
          cursor: 'pointer',
          color: 'var(--text-primary)',
          background: 'none',
          border: 'none',
          width: '100%',
          textAlign: 'left',
          borderRadius: 4,
          whiteSpace: 'nowrap',
        };
        const separatorStyle = { height: 1, background: 'var(--border)', margin: '4px 0' };

        return (
          <div onClick={(event) => event.stopPropagation()} style={{ ...popupMenuStyle, position: 'fixed', left: x, top: y, zIndex: 1000, padding: '4px 0', minWidth: 160 }}>
            {entry && isDir && (
              <button
                style={itemStyle}
                onMouseEnter={(event) => { event.currentTarget.style.background = 'var(--interactive-row-hover)'; }}
                onMouseLeave={(event) => { event.currentTarget.style.background = 'none'; }}
                onClick={() => {
                  navigate(childPath);
                  setCtxMenu(null);
                }}
              >
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z" />
                </svg>
                Open
              </button>
            )}

            {entry && !isDir && (
              <button
                style={itemStyle}
                onMouseEnter={(event) => { event.currentTarget.style.background = 'var(--interactive-row-hover)'; }}
                onMouseLeave={(event) => { event.currentTarget.style.background = 'none'; }}
                onClick={() => {
                  handleDownload(entry);
                  setCtxMenu(null);
                }}
              >
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
                  <polyline points="7,10 12,15 17,10" />
                  <line x1="12" y1="15" x2="12" y2="3" />
                </svg>
                Download
              </button>
            )}

            {entry && isDir && (
              <>
                <div style={separatorStyle} />
                <button
                  style={itemStyle}
                  onMouseEnter={(event) => { event.currentTarget.style.background = 'var(--interactive-row-hover)'; }}
                  onMouseLeave={(event) => { event.currentTarget.style.background = 'none'; }}
                  onClick={() => {
                    if (isPinned) unpin(childPath);
                    else pin(name, childPath);
                    setCtxMenu(null);
                  }}
                >
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
                  </svg>
                  {isPinned ? 'Unpin' : 'Pin folder'}
                </button>
              </>
            )}

            {entry && (
              <>
                <div style={separatorStyle} />
                <button
                  style={itemStyle}
                  onMouseEnter={(event) => { event.currentTarget.style.background = 'var(--interactive-row-hover)'; }}
                  onMouseLeave={(event) => { event.currentTarget.style.background = 'none'; }}
                  onClick={() => {
                    setClipboard({ items: clipboardItems, mode: 'copy' });
                    setCtxMenu(null);
                  }}
                >
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                    <rect x="9" y="9" width="13" height="13" rx="2" />
                    <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
                  </svg>
                  Copy{clipboardItems.length > 1 ? ` (${clipboardItems.length})` : ''}
                </button>
                <button
                  style={itemStyle}
                  onMouseEnter={(event) => { event.currentTarget.style.background = 'var(--interactive-row-hover)'; }}
                  onMouseLeave={(event) => { event.currentTarget.style.background = 'none'; }}
                  onClick={() => {
                    setClipboard({ items: clipboardItems, mode: 'move' });
                    setCtxMenu(null);
                  }}
                >
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                    <circle cx="6" cy="6" r="3" /><circle cx="6" cy="18" r="3" />
                    <line x1="20" y1="4" x2="8.12" y2="15.88" /><line x1="14.47" y1="14.48" x2="20" y2="20" /><line x1="8.12" y1="8.12" x2="12" y2="12" />
                  </svg>
                  Cut{clipboardItems.length > 1 ? ` (${clipboardItems.length})` : ''}
                </button>
              </>
            )}

            {clipboard && (
              <>
                <div style={separatorStyle} />
                <button
                  style={itemStyle}
                  onMouseEnter={(event) => { event.currentTarget.style.background = 'var(--interactive-row-hover)'; }}
                  onMouseLeave={(event) => { event.currentTarget.style.background = 'none'; }}
                  onClick={() => {
                    handlePaste(path);
                    setCtxMenu(null);
                  }}
                >
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2" />
                    <rect x="8" y="2" width="8" height="4" rx="1" />
                  </svg>
                  Paste here{clipboard.items.length > 1 ? ` (${clipboard.items.length})` : ''}
                </button>
              </>
            )}

            {accessScope.canManage && entry && (
              <>
                <div style={separatorStyle} />
                <button
                  style={{ ...itemStyle, color: 'var(--danger)' }}
                  onMouseEnter={(event) => { event.currentTarget.style.background = 'rgba(255,80,80,0.08)'; }}
                  onMouseLeave={(event) => { event.currentTarget.style.background = 'none'; }}
                  onClick={() => {
                    setCtxMenu(null);
                    if (!window.confirm(`Delete "${name}"?`)) return;
                    fbqProxy('delete', path, { headers: { 'X-Files': JSON.stringify([childPath]) } })
                      .then(() => load(path))
                      .catch(() => setError('Delete failed.'));
                  }}
                >
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                    <polyline points="3,6 5,6 21,6" />
                    <path d="M19 6l-1 14H6L5 6" />
                    <path d="M10 11v6" />
                    <path d="M14 11v6" />
                    <path d="M9 6V4h6v2" />
                  </svg>
                  Delete
                </button>
              </>
            )}
          </div>
        );
      })()}
    </Layout>
  );
}