import React, { useState, useEffect, useMemo, useCallback, useRef } from 'react';
import {
    Folder, File, ArrowUp, List, LayoutGrid,
    ArrowUpDown, Clock, FileType, Type,
    ChevronRight, Info, Loader2, Download, ExternalLink, X, ChevronLeft, ZoomIn, ZoomOut,
    Image, Film, Music, FileCode, FileText as FileTextIcon,
    Archive, FileSpreadsheet, Presentation
} from 'lucide-react';
import type { FileBrowserWidgetProps } from '@polymech/shared';
import { useAuth } from '@/hooks/useAuth';

// ── Types ────────────────────────────────────────────────────────

interface INode {
    name: string;
    path: string;
    size: number;
    mtime?: number;
    mime?: string;
    parent: string;
    type: string;
}

type SortKey = 'name' | 'ext' | 'date' | 'type';
type MimeCategory = 'dir' | 'image' | 'video' | 'audio' | 'code' | 'document' | 'archive' | 'spreadsheet' | 'presentation' | 'other';

// ── MIME helpers ─────────────────────────────────────────────────

const IMAGE_EXTS = new Set(['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'avif', 'bmp', 'ico', 'tiff', 'tif']);
const VIDEO_EXTS = new Set(['mp4', 'mov', 'webm', 'mkv', 'avi', 'flv', 'wmv', 'm4v', 'ogv']);
const AUDIO_EXTS = new Set(['mp3', 'wav', 'ogg', 'flac', 'aac', 'm4a', 'wma', 'opus']);
const CODE_EXTS = new Set(['ts', 'tsx', 'js', 'jsx', 'py', 'rb', 'go', 'rs', 'java', 'c', 'cpp', 'h', 'hpp', 'cs', 'swift', 'kt', 'sh', 'bash', 'zsh', 'ps1', 'bat', 'cmd', 'lua', 'php', 'sql', 'r', 'html', 'htm', 'css', 'scss', 'sass', 'less', 'json', 'yaml', 'yml', 'toml', 'xml', 'vue', 'svelte']);
const DOC_EXTS = new Set(['md', 'txt', 'rtf', 'pdf', 'doc', 'docx', 'odt', 'tex', 'log']);
const ARCHIVE_EXTS = new Set(['zip', 'rar', '7z', 'tar', 'gz', 'bz2', 'xz', 'zst', 'tgz']);
const SPREADSHEET_EXTS = new Set(['xls', 'xlsx', 'csv', 'ods', 'tsv']);
const PRESENTATION_EXTS = new Set(['ppt', 'pptx', 'odp', 'key']);

function getExt(name: string): string {
    const i = name.lastIndexOf('.');
    return i > 0 ? name.slice(i + 1).toLowerCase() : '';
}

function getMimeCategory(node: INode): MimeCategory {
    if (node.mime === 'inode/directory' || node.type === 'dir') return 'dir';
    const mime = node.mime || '';
    if (mime.startsWith('image/')) return 'image';
    if (mime.startsWith('video/')) return 'video';
    if (mime.startsWith('audio/')) return 'audio';
    if (mime.startsWith('text/x-') || mime.includes('javascript') || mime.includes('typescript') || mime.includes('json') || mime.includes('xml') || mime.includes('yaml')) return 'code';
    const ext = getExt(node.name);
    if (IMAGE_EXTS.has(ext)) return 'image';
    if (VIDEO_EXTS.has(ext)) return 'video';
    if (AUDIO_EXTS.has(ext)) return 'audio';
    if (CODE_EXTS.has(ext)) return 'code';
    if (SPREADSHEET_EXTS.has(ext)) return 'spreadsheet';
    if (PRESENTATION_EXTS.has(ext)) return 'presentation';
    if (ARCHIVE_EXTS.has(ext)) return 'archive';
    if (DOC_EXTS.has(ext)) return 'document';
    return 'other';
}

const CATEGORY_STYLE: Record<MimeCategory, { icon: React.FC<any>; color: string }> = {
    dir: { icon: Folder, color: '#60a5fa' },
    image: { icon: Image, color: '#22c55e' },
    video: { icon: Film, color: '#ef4444' },
    audio: { icon: Music, color: '#8b5cf6' },
    code: { icon: FileCode, color: '#3b82f6' },
    document: { icon: FileTextIcon, color: '#f59e0b' },
    archive: { icon: Archive, color: '#eab308' },
    spreadsheet: { icon: FileSpreadsheet, color: '#16a34a' },
    presentation: { icon: Presentation, color: '#ec4899' },
    other: { icon: File, color: '#94a3b8' },
};

function NodeIcon({ node, size = 14 }: { node: INode; size?: number }) {
    const cat = getMimeCategory(node);
    const { icon: Icon, color } = CATEGORY_STYLE[cat];
    return <Icon size={size} style={{ color, flexShrink: 0 }} />;
}

// ── Format helpers ───────────────────────────────────────────────

function formatSize(bytes: number): string {
    if (bytes === 0) return '—';
    const units = ['B', 'KB', 'MB', 'GB'];
    const i = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
    const v = bytes / Math.pow(1024, i);
    return `${v < 10 ? v.toFixed(1) : Math.round(v)} ${units[i]}`;
}

function formatDate(ts?: number): string {
    if (!ts) return '—';
    const d = new Date(ts);
    return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
        + ' ' + d.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
}

// ── Sort ─────────────────────────────────────────────────────────

function sortNodes(nodes: INode[], sortBy: SortKey, asc: boolean): INode[] {
    const dirs = nodes.filter(n => n.mime === 'inode/directory' || n.type === 'dir');
    const files = nodes.filter(n => n.mime !== 'inode/directory' && n.type !== 'dir');
    const cmp = (a: INode, b: INode): number => {
        let r = 0;
        switch (sortBy) {
            case 'name': r = a.name.localeCompare(b.name, undefined, { sensitivity: 'base' }); break;
            case 'ext': r = getExt(a.name).localeCompare(getExt(b.name)) || a.name.localeCompare(b.name); break;
            case 'date': r = (a.mtime ?? 0) - (b.mtime ?? 0); break;
            case 'type': r = getMimeCategory(a).localeCompare(getMimeCategory(b)) || a.name.localeCompare(b.name); break;
        }
        return asc ? r : -r;
    };
    dirs.sort(cmp);
    files.sort(cmp);
    return [...dirs, ...files];
}

// ── Thumbnail helper ─────────────────────────────────────────────

function ThumbPreview({ node, mount, height = 64, tokenParam = '' }: { node: INode; mount: string; height?: number; tokenParam?: string }) {
    const cat = getMimeCategory(node);
    const baseUrl = `/api/vfs/get/${encodeURIComponent(mount)}/${node.path}`;
    const fileUrl = tokenParam ? `${baseUrl}?${tokenParam}` : baseUrl;
    if (cat === 'image') {
        return <img src={fileUrl} alt={node.name} loading="lazy" style={{ width: '100%', height, objectFit: 'cover', borderRadius: 4 }} />;
    }
    if (cat === 'video') {
        return (
            <div style={{ position: 'relative', width: '100%', height }}>
                <video src={fileUrl} muted preload="metadata" style={{ width: '100%', height, objectFit: 'cover', borderRadius: 4 }} />
                <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(0,0,0,0.3)', borderRadius: 4 }}>
                    <Film size={20} style={{ color: '#fff', opacity: 0.8 }} />
                </div>
            </div>
        );
    }
    return <NodeIcon node={node} size={28} />;
}

// ── Toolbar button ───────────────────────────────────────────────

const TB_BTN: React.CSSProperties = {
    background: 'none', border: 'none', cursor: 'pointer',
    padding: 4, display: 'flex', alignItems: 'center', justifyContent: 'center',
    color: 'var(--muted-foreground, #94a3b8)', borderRadius: 4,
};
const TB_BTN_ACTIVE: React.CSSProperties = { ...TB_BTN, color: 'var(--foreground, #e2e8f0)' };
const TB_SEP: React.CSSProperties = { width: 1, height: 18, background: 'var(--border, #334155)', flexShrink: 0 };

// ── Main Component ───────────────────────────────────────────────

const FileBrowserWidget: React.FC<FileBrowserWidgetProps & { variables?: any }> = (props) => {
    const {
        mount = 'root',
        path: initialPath = '/',
        glob = '*.*',
        mode = 'simple',
        viewMode: initialViewMode = 'list',
        sortBy: initialSort = 'name',
        showToolbar = true,
    } = props;

    const { session } = useAuth();
    const accessToken = session?.access_token;

    const [currentPath, setCurrentPath] = useState(initialPath);
    const [nodes, setNodes] = useState<INode[]>([]);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);
    const [viewMode, setViewMode] = useState<'list' | 'thumbs'>(initialViewMode);
    const [sortBy, setSortBy] = useState<SortKey>(initialSort);
    const [sortAsc, setSortAsc] = useState(true);
    const [focusIdx, setFocusIdx] = useState(-1);
    const [selected, setSelected] = useState<INode | null>(null);
    const listRef = useRef<HTMLDivElement>(null);
    const containerRef = useRef<HTMLDivElement>(null);

    // ── Zoom (persisted) ─────────────────────────────────────────
    const [thumbSize, setThumbSize] = useState(() => {
        const v = localStorage.getItem('fb-thumb-size');
        return v ? Math.max(60, Math.min(200, Number(v))) : 100;
    });
    const [fontSize, setFontSize] = useState(() => {
        const v = localStorage.getItem('fb-font-size');
        return v ? Math.max(10, Math.min(18, Number(v))) : 14;
    });
    const zoomIn = () => {
        if (viewMode === 'thumbs') setThumbSize(s => { const n = Math.min(200, s + 20); localStorage.setItem('fb-thumb-size', String(n)); return n; });
        else setFontSize(s => { const n = Math.min(18, s + 1); localStorage.setItem('fb-font-size', String(n)); return n; });
    };
    const zoomOut = () => {
        if (viewMode === 'thumbs') setThumbSize(s => { const n = Math.max(60, s - 20); localStorage.setItem('fb-thumb-size', String(n)); return n; });
        else setFontSize(s => { const n = Math.max(10, s - 1); localStorage.setItem('fb-font-size', String(n)); return n; });
    };

    // ── Fetch ───────────────────────────────────────────────────

    const fetchDir = useCallback(async (dirPath: string) => {
        setLoading(true);
        setError(null);
        setSelected(null);
        setFocusIdx(-1);
        try {
            const clean = dirPath.replace(/^\/+/, '');
            const base = clean
                ? `/api/vfs/ls/${encodeURIComponent(mount)}/${clean}`
                : `/api/vfs/ls/${encodeURIComponent(mount)}`;
            const url = glob && glob !== '*.*' ? `${base}?glob=${encodeURIComponent(glob)}` : base;
            const headers: Record<string, string> = {};
            if (accessToken) headers['Authorization'] = `Bearer ${accessToken}`;
            const res = await fetch(url, { headers });
            if (!res.ok) {
                const body = await res.json().catch(() => ({}));
                throw new Error(body.error || `HTTP ${res.status}`);
            }
            setNodes(await res.json());
        } catch (e: any) {
            setError(e.message || 'Failed to load directory');
            setNodes([]);
        } finally {
            setLoading(false);
        }
    }, [mount, glob, accessToken]);

    useEffect(() => { fetchDir(currentPath); }, [currentPath, fetchDir]);
    useEffect(() => { setCurrentPath(initialPath); }, [initialPath]);

    // Build a URL with optional auth token for <img>/<video> src (can't set headers on HTML elements)
    const tokenParam = accessToken ? `token=${encodeURIComponent(accessToken)}` : '';

    // ── Sorted items (with optional ".." at index 0) ────────────

    const canGoUp = currentPath !== '/' && currentPath !== '';
    const sorted = useMemo(() => sortNodes(nodes, sortBy, sortAsc), [nodes, sortBy, sortAsc]);

    // Virtual list: ".." occupies index 0 when canGoUp, real items follow
    const itemCount = sorted.length + (canGoUp ? 1 : 0);
    const getNode = (idx: number): INode | null => {
        if (canGoUp && idx === 0) return null; // ".."
        return sorted[canGoUp ? idx - 1 : idx] ?? null;
    };

    // ── Navigation ──────────────────────────────────────────────

    const openNode = (node: INode) => {
        if (getMimeCategory(node) === 'dir') {
            setCurrentPath(node.path || node.name);
        } else {
            setSelected(prev => prev?.path === node.path ? null : node);
        }
    };

    const goUp = useCallback(() => {
        if (!canGoUp) return;
        const parts = currentPath.replace(/^\/+/, '').split('/').filter(Boolean);
        parts.pop();
        setCurrentPath(parts.length ? parts.join('/') : '/');
    }, [currentPath, canGoUp]);

    const getFileUrl = (node: INode) => {
        const base = `/api/vfs/get/${encodeURIComponent(mount)}/${node.path}`;
        return tokenParam ? `${base}?${tokenParam}` : base;
    };

    const handleView = () => { if (selected) window.open(getFileUrl(selected), '_blank'); };
    const handleDownload = () => {
        if (!selected) return;
        const a = document.createElement('a');
        a.href = getFileUrl(selected);
        a.download = selected.name;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    };

    // ── Sort toggle ─────────────────────────────────────────────

    const cycleSort = () => {
        const keys: SortKey[] = ['name', 'ext', 'date', 'type'];
        const i = keys.indexOf(sortBy);
        if (sortAsc) { setSortAsc(false); } else { setSortBy(keys[(i + 1) % keys.length]); setSortAsc(true); }
    };
    const sortIcons: Record<SortKey, React.ReactNode> = { name: <Type size={16} />, ext: <FileType size={16} />, date: <Clock size={16} />, type: <ArrowUpDown size={16} /> };

    // ── Breadcrumbs ─────────────────────────────────────────────

    const breadcrumbs = useMemo(() => {
        const parts = currentPath.replace(/^\/+/, '').split('/').filter(Boolean);
        const crumbs = [{ label: mount, path: '/' }];
        let acc = '';
        for (const p of parts) { acc += (acc ? '/' : '') + p; crumbs.push({ label: p, path: acc }); }
        return crumbs;
    }, [currentPath, mount]);

    // ── Keyboard navigation ─────────────────────────────────────

    const scrollItemIntoView = useCallback((idx: number) => {
        if (!listRef.current) return;
        const items = listRef.current.querySelectorAll('[data-fb-idx]');
        const el = items[idx] as HTMLElement | undefined;
        el?.scrollIntoView({ block: 'nearest' });
    }, []);

    const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
        if (itemCount === 0) return;

        switch (e.key) {
            case 'ArrowDown':
            case 'ArrowRight':
            case 'j': {
                e.preventDefault();
                const next = focusIdx < itemCount - 1 ? focusIdx + 1 : 0;
                setFocusIdx(next);
                const node = getNode(next);
                if (node) setSelected(node);
                else setSelected(null);
                scrollItemIntoView(next);
                break;
            }
            case 'ArrowUp':
            case 'ArrowLeft':
            case 'k': {
                e.preventDefault();
                const prev = focusIdx > 0 ? focusIdx - 1 : itemCount - 1;
                setFocusIdx(prev);
                const node = getNode(prev);
                if (node) setSelected(node);
                else setSelected(null);
                scrollItemIntoView(prev);
                break;
            }
            case 'Enter':
            case 'l': {
                e.preventDefault();
                if (focusIdx < 0) break;
                const node = getNode(focusIdx);
                if (!node) { goUp(); break; }
                openNode(node);
                break;
            }
            case 'Backspace':
            case 'h': {
                e.preventDefault();
                goUp();
                break;
            }
            case 'Home': {
                e.preventDefault();
                setFocusIdx(0);
                const node = getNode(0);
                if (node) setSelected(node); else setSelected(null);
                scrollItemIntoView(0);
                break;
            }
            case 'End': {
                e.preventDefault();
                const last = itemCount - 1;
                setFocusIdx(last);
                const node = getNode(last);
                if (node) setSelected(node); else setSelected(null);
                scrollItemIntoView(last);
                break;
            }
            case ' ': {
                e.preventDefault();
                if (focusIdx < 0) break;
                const node = getNode(focusIdx);
                const cat = node ? getMimeCategory(node) : null;
                if (node && (cat === 'image' || cat === 'video')) setLightboxNode(node);
                break;
            }
            case 'Escape': {
                e.preventDefault();
                setSelected(null);
                setFocusIdx(-1);
                break;
            }
        }
    }, [focusIdx, itemCount, goUp, scrollItemIntoView, sorted, canGoUp]);

    // Focus container on mount and after nav for keyboard capture
    useEffect(() => { containerRef.current?.focus(); }, [currentPath]);

    const selectedFile = selected && getMimeCategory(selected) !== 'dir' ? selected : null;

    // ── Lightbox state ──────────────────────────────────────────

    const [lightboxNode, setLightboxNode] = useState<INode | null>(null);
    const mediaNodes = useMemo(() => sorted.filter(n => { const c = getMimeCategory(n); return c === 'image' || c === 'video'; }), [sorted]);
    const lightboxIdx = lightboxNode ? mediaNodes.findIndex(n => n.path === lightboxNode.path) : -1;
    const lightboxIsVideo = lightboxNode ? getMimeCategory(lightboxNode) === 'video' : false;

    const lightboxPrev = () => {
        if (lightboxIdx > 0) setLightboxNode(mediaNodes[lightboxIdx - 1]);
    };
    const lightboxNext = () => {
        if (lightboxIdx < mediaNodes.length - 1) setLightboxNode(mediaNodes[lightboxIdx + 1]);
    };
    const closeLightbox = () => {
        setLightboxNode(null);
        setTimeout(() => containerRef.current?.focus(), 0);
    };

    // ── Row click handler ───────────────────────────────────────

    const onItemClick = (idx: number) => {
        setFocusIdx(idx);
        const node = getNode(idx);
        if (!node) return;
        setSelected(prev => prev?.path === node.path ? null : node);
    };
    const onItemDoubleClick = (idx: number) => {
        const node = getNode(idx);
        if (!node) { goUp(); return; }
        const cat = getMimeCategory(node);
        if (cat === 'dir') {
            setCurrentPath(node.path || node.name);
        } else if (cat === 'image' || cat === 'video') {
            setLightboxNode(node);
        } else {
            window.open(getFileUrl(node), '_blank');
        }
    };

    // ── Styles ──────────────────────────────────────────────────

    const focusBg = 'var(--accent, #334155)';
    const selectedBg = 'rgba(59, 130, 246, 0.15)';
    const selectedBorder = 'var(--ring, #3b82f6)';

    // ── Render ──────────────────────────────────────────────────

    return (
        <div
            ref={containerRef}
            tabIndex={0}
            onKeyDown={handleKeyDown}
            style={{
                display: 'flex', flexDirection: 'column', height: '100%',
                border: '1px solid var(--border, #334155)', borderRadius: 6, overflow: 'hidden',
                background: 'var(--background, #0f172a)', color: 'var(--foreground, #e2e8f0)',
                fontFamily: 'var(--font-sans, system-ui, sans-serif)', outline: 'none',
            }}
        >
            <style>{`
        .fb-row:hover { background: var(--accent, #334155) !important; }
        .fb-thumb:hover { border-color: var(--ring, #3b82f6) !important; background: var(--accent, #1e293b) !important; }
        .fb-tb-btn:hover { background: var(--accent, #334155) !important; color: var(--foreground, #e2e8f0) !important; }
        @media (max-width: 767px) { .fb-detail-pane { display: none !important; } }
      `}</style>

            {/* ═══ Toolbar ═══════════════════════════════════ */}
            {showToolbar && (
                <div style={{
                    display: 'flex', alignItems: 'center', gap: 2, padding: '4px 6px',
                    borderBottom: '1px solid var(--border, #334155)',
                    background: 'var(--muted, #1e293b)',
                }}>
                    {/* Navigation */}
                    <button onClick={goUp} disabled={!canGoUp} title="Go up (Backspace)" className="fb-tb-btn"
                        style={{ ...TB_BTN, opacity: canGoUp ? 1 : 0.3, cursor: canGoUp ? 'pointer' : 'default' }}>
                        <ArrowUp size={18} />
                    </button>

                    {/* Breadcrumbs */}
                    <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 1, overflow: 'hidden', padding: '0 4px' }}>
                        {breadcrumbs.map((c, i) => (
                            <React.Fragment key={c.path}>
                                {i > 0 && <ChevronRight size={10} style={{ opacity: 0.3, flexShrink: 0 }} />}
                                <button onClick={() => setCurrentPath(c.path)} style={{
                                    background: 'none', border: 'none', cursor: 'pointer',
                                    color: i === breadcrumbs.length - 1 ? 'var(--foreground, #e2e8f0)' : 'var(--muted-foreground, #94a3b8)',
                                    fontWeight: i === breadcrumbs.length - 1 ? 600 : 400,
                                    padding: '2px 3px', borderRadius: 3, whiteSpace: 'nowrap', fontSize: 11,
                                }}>
                                    {c.label}
                                </button>
                            </React.Fragment>
                        ))}
                    </div>

                    <div style={TB_SEP} />

                    {/* File actions — shown when a file is selected */}
                    {selectedFile && (<>
                        <button onClick={handleView} title="View in browser" className="fb-tb-btn" style={TB_BTN}>
                            <ExternalLink size={18} />
                        </button>
                        <button onClick={handleDownload} title="Download" className="fb-tb-btn" style={TB_BTN}>
                            <Download size={18} />
                        </button>
                        <div style={TB_SEP} />
                    </>)}

                    {/* Sort */}
                    <button onClick={cycleSort} title={`Sort: ${sortBy} (${sortAsc ? 'asc' : 'desc'})`} className="fb-tb-btn"
                        style={{ ...TB_BTN, gap: 2 }}>
                        {sortIcons[sortBy]}
                        <span style={{ fontSize: 9, opacity: 0.6 }}>{sortAsc ? '↑' : '↓'}</span>
                    </button>

                    {/* Zoom */}
                    <button onClick={zoomOut} title="Zoom out" className="fb-tb-btn" style={TB_BTN}>
                        <ZoomOut size={18} />
                    </button>
                    <button onClick={zoomIn} title="Zoom in" className="fb-tb-btn" style={TB_BTN}>
                        <ZoomIn size={18} />
                    </button>

                    {/* View mode */}
                    <button onClick={() => setViewMode(v => v === 'list' ? 'thumbs' : 'list')}
                        title={viewMode === 'list' ? 'Thumbnails' : 'List'} className="fb-tb-btn" style={TB_BTN}>
                        {viewMode === 'list' ? <LayoutGrid size={18} /> : <List size={18} />}
                    </button>
                </div>
            )}

            {/* ═══ Content ═══════════════════════════════════ */}
            {loading ? (
                <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, opacity: 0.6 }}>
                    <Loader2 size={16} className="animate-spin" />
                    <span style={{ fontSize: 14 }}>Loading…</span>
                </div>
            ) : error ? (
                <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20, fontSize: 14, color: '#ef4444' }}>
                    {error}
                </div>
            ) : itemCount === 0 ? (
                <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20, fontSize: 14, opacity: 0.5 }}>
                    Empty directory
                </div>
            ) : (
                <div style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
                    {/* ── List view ──────────────────────── */}
                    {viewMode === 'list' ? (
                        <div ref={listRef} style={{ overflowY: 'auto', flex: 1 }}>
                            {canGoUp && (
                                <div data-fb-idx={0} onClick={() => { setFocusIdx(0); goUp(); }}
                                    className="fb-row" style={{
                                        display: 'flex', alignItems: 'center', gap: 8, padding: '5px 10px',
                                        cursor: 'pointer', fontSize, borderBottom: '1px solid var(--border, #1e293b)',
                                        background: focusIdx === 0 ? focusBg : 'transparent',
                                    }}>
                                    <ArrowUp size={14} style={{ color: CATEGORY_STYLE.dir.color }} />
                                    <span style={{ fontWeight: 500 }}>..</span>
                                </div>
                            )}
                            {sorted.map((node, i) => {
                                const idx = (canGoUp ? i + 1 : i);
                                const isDir = getMimeCategory(node) === 'dir';
                                const isFocused = focusIdx === idx;
                                const isSelected = selected?.path === node.path;
                                return (
                                    <div key={node.path || node.name} data-fb-idx={idx}
                                        onClick={() => onItemClick(idx)}
                                        onDoubleClick={() => onItemDoubleClick(idx)}
                                        className="fb-row" style={{
                                            display: 'flex', alignItems: 'center', gap: 8, padding: '5px 10px',
                                            cursor: 'pointer', fontSize,
                                            borderBottomWidth: 1, borderBottomColor: 'var(--border, #1e293b)', borderBottomStyle: 'solid',
                                            background: isSelected ? selectedBg : isFocused ? focusBg : 'transparent',
                                            borderLeftWidth: 2, borderLeftColor: isSelected ? selectedBorder : 'transparent',
                                            borderLeftStyle: isSelected ? 'outset' : 'solid',
                                        }}>
                                        <NodeIcon node={node} />
                                        <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{node.name}</span>
                                        {!isDir && (
                                            <span style={{ color: 'var(--muted-foreground, #64748b)', fontSize: 10, flexShrink: 0 }}>
                                                {formatSize(node.size)}
                                            </span>
                                        )}
                                        {mode === 'advanced' && node.mtime && (
                                            <span style={{ color: 'var(--muted-foreground, #64748b)', fontSize: 10, flexShrink: 0, width: 120, textAlign: 'right' }}>
                                                {formatDate(node.mtime)}
                                            </span>
                                        )}
                                    </div>
                                );
                            })}
                        </div>
                    ) : (
                        /* ── Thumb view ─────────────────────── */
                        <div ref={listRef} style={{
                            overflowY: 'auto', flex: 1, display: 'grid',
                            gridTemplateColumns: `repeat(auto-fill, minmax(${thumbSize}px, 1fr))`, gap: 6, padding: 8,
                        }}>
                            {canGoUp && (
                                <div data-fb-idx={0} onClick={() => { setFocusIdx(0); goUp(); }} className="fb-thumb" style={{
                                    display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
                                    padding: 8, borderRadius: 6, cursor: 'pointer', gap: 4,
                                    borderWidth: 1, borderColor: focusIdx === 0 ? selectedBorder : 'var(--border, #334155)',
                                    borderStyle: focusIdx === 0 ? 'outset' : 'solid',
                                }}>
                                    <ArrowUp size={24} style={{ color: CATEGORY_STYLE.dir.color }} />
                                    <span style={{ fontSize: 14 }}>..</span>
                                </div>
                            )}
                            {sorted.map((node, i) => {
                                const idx = (canGoUp ? i + 1 : i);
                                const isDir = getMimeCategory(node) === 'dir';
                                const isFocused = focusIdx === idx;
                                const isSelected = selected?.path === node.path;
                                return (
                                    <div key={node.path || node.name} data-fb-idx={idx}
                                        onClick={() => onItemClick(idx)}
                                        onDoubleClick={() => onItemDoubleClick(idx)}
                                        className="fb-thumb" style={{
                                            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
                                            padding: 6, borderRadius: 6, cursor: 'pointer', gap: 4, overflow: 'hidden',
                                            borderWidth: isSelected ? 2 : 1,
                                            borderColor: isSelected ? selectedBorder : isFocused ? selectedBorder : 'transparent',
                                            borderStyle: isSelected ? 'outset' : 'solid',
                                            background: isSelected ? selectedBg : isFocused ? focusBg : 'transparent',
                                        }}>
                                        {isDir ? <NodeIcon node={node} size={28} /> : <ThumbPreview node={node} mount={mount} tokenParam={tokenParam} />}
                                        <span style={{
                                            fontSize: 14, textAlign: 'center', width: '100%',
                                            overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                                        }}>
                                            {node.name}
                                        </span>
                                    </div>
                                );
                            })}
                        </div>
                    )}

                    {/* ── Detail panel (advanced, desktop only) ── */}
                    {mode === 'advanced' && selectedFile && (
                        <div className="fb-detail-pane" style={{
                            width: 200, borderLeft: '1px solid var(--border, #334155)',
                            padding: 10, fontSize: 11, overflowY: 'auto', flexShrink: 0,
                            background: 'var(--muted, #1e293b)',
                        }}>
                            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 10 }}>
                                <Info size={14} />
                                <span style={{ fontWeight: 600 }}>Details</span>
                            </div>

                            {getMimeCategory(selectedFile) === 'image' && (
                                <img src={getFileUrl(selectedFile)} alt={selectedFile.name}
                                    style={{ width: '100%', borderRadius: 4, marginBottom: 8, objectFit: 'contain' }} />
                            )}
                            {getMimeCategory(selectedFile) === 'video' && (
                                <video key={selectedFile.path} src={getFileUrl(selectedFile)} controls muted preload="metadata"
                                    style={{ width: '100%', borderRadius: 4, marginBottom: 8 }} />
                            )}

                            <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                                <tbody>
                                    {([
                                        ['Name', selectedFile.name],
                                        ['Path', selectedFile.path],
                                        ['Size', formatSize(selectedFile.size)],
                                        ['Modified', formatDate(selectedFile.mtime)],
                                        ['MIME', selectedFile.mime || '—'],
                                        ['Type', getMimeCategory(selectedFile)],
                                    ] as [string, string][]).map(([label, val]) => (
                                        <tr key={label}>
                                            <td style={{ padding: '3px 4px 3px 0', color: 'var(--muted-foreground, #94a3b8)', whiteSpace: 'nowrap', verticalAlign: 'top' }}>{label}</td>
                                            <td style={{ padding: '3px 0', wordBreak: 'break-all' }}>{val}</td>
                                        </tr>
                                    ))}
                                </tbody>
                            </table>
                        </div>
                    )}
                </div>
            )}

            {/* ═══ Status bar ════════════════════════════════ */}
            <div style={{
                padding: '3px 10px', fontSize: 10, borderTop: '1px solid var(--border, #334155)',
                color: 'var(--muted-foreground, #64748b)', display: 'flex', justifyContent: 'space-between',
                background: 'var(--muted, #1e293b)',
            }}>
                <span>{sorted.length} item{sorted.length !== 1 ? 's' : ''}{selectedFile ? ` · ${selectedFile.name}` : ''}</span>
                <span>{mount}:{currentPath || '/'}</span>
            </div>

            {/* ═══ Lightbox ═════════════════════════════════ */}
            {lightboxNode && (
                <div onClick={() => closeLightbox()} onKeyDown={(e) => {
                    if (e.key === 'Escape') closeLightbox();
                    if (e.key === 'ArrowLeft') lightboxPrev();
                    if (e.key === 'ArrowRight') lightboxNext();
                    e.stopPropagation();
                }} tabIndex={0} ref={el => el?.focus()} style={{
                    position: 'fixed', inset: 0, zIndex: 9999,
                    background: 'rgba(0,0,0,0.85)', display: 'flex', alignItems: 'center', justifyContent: 'center',
                    cursor: 'zoom-out',
                }}>
                    {/* Close */}
                    <button onClick={() => closeLightbox()} style={{
                        position: 'absolute', top: 16, right: 16, background: 'none', border: 'none',
                        color: '#fff', cursor: 'pointer', opacity: 0.7,
                    }}><X size={24} /></button>

                    {/* Prev */}
                    {lightboxIdx > 0 && (
                        <button onClick={(e) => { e.stopPropagation(); lightboxPrev(); }} style={{
                            position: 'absolute', left: 16, top: '50%', transform: 'translateY(-50%)',
                            background: 'rgba(0,0,0,0.5)', border: 'none', borderRadius: '50%',
                            width: 40, height: 40, display: 'flex', alignItems: 'center', justifyContent: 'center',
                            color: '#fff', cursor: 'pointer',
                        }}><ChevronLeft size={22} /></button>
                    )}

                    {/* Media */}
                    {lightboxIsVideo ? (
                        <video
                            key={lightboxNode.path}
                            onClick={(e) => e.stopPropagation()}
                            src={getFileUrl(lightboxNode)}
                            controls autoPlay
                            style={{ maxWidth: '90vw', maxHeight: '90vh', cursor: 'default', borderRadius: 4, background: '#000' }}
                        />
                    ) : (
                        <img
                            onClick={(e) => e.stopPropagation()}
                            src={getFileUrl(lightboxNode)}
                            alt={lightboxNode.name}
                            style={{ maxWidth: '90vw', maxHeight: '90vh', objectFit: 'contain', cursor: 'default', borderRadius: 4 }}
                        />
                    )}

                    {/* Next */}
                    {lightboxIdx < mediaNodes.length - 1 && (
                        <button onClick={(e) => { e.stopPropagation(); lightboxNext(); }} style={{
                            position: 'absolute', right: 16, top: '50%', transform: 'translateY(-50%)',
                            background: 'rgba(0,0,0,0.5)', border: 'none', borderRadius: '50%',
                            width: 40, height: 40, display: 'flex', alignItems: 'center', justifyContent: 'center',
                            color: '#fff', cursor: 'pointer',
                        }}><ChevronRight size={22} /></button>
                    )}

                    {/* Counter + filename */}
                    <div style={{
                        position: 'absolute', bottom: 16, left: '50%', transform: 'translateX(-50%)',
                        color: '#fff', fontSize: 14, opacity: 0.7, textAlign: 'center',
                    }}>
                        {lightboxNode.name} · {lightboxIdx + 1}/{mediaNodes.length}
                    </div>
                </div>
            )}
        </div>
    );
};

export default FileBrowserWidget;