import React, { useEffect, useMemo, useState, useCallback, useRef } from 'react';
import {
  ThemeProvider,
  createTheme,
  useMediaQuery,
  Button,
  List,
  ListItem,
  ListItemText,
  IconButton,
  styled,
  CircularProgress,
  Divider,
  Menu,
  MenuItem,
  Box,
  Typography,
  TextField,
  Select,
  FormControl,
  InputLabel,
  Pagination,
  Stack,
  Chip,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Paper,
  Alert,
  LinearProgress
} from '@mui/material';
import UploadIcon from '@mui/icons-material/Upload';
import FolderIcon from '@mui/icons-material/Folder';
import FolderOpenIcon from '@mui/icons-material/FolderOpen';
import DeleteIcon from '@mui/icons-material/Delete';
import RefreshIcon from '@mui/icons-material/Refresh';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import ImageIcon from '@mui/icons-material/Image';
import DescriptionIcon from '@mui/icons-material/Description';
import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
import { useTLDraw } from '../../../../../contexts/TLDrawContext';
import { useAuth } from '../../../../../contexts/AuthContext';
import { useNavigate } from 'react-router-dom';
import {
  calculateDirectoryStats,
  isDirectoryPickerSupported,
  FileWithPath
} from '../../../../../utils/folderPicker';

const Container = styled('div')(() => ({
  padding: '8px',
  display: 'flex',
  flexDirection: 'column',
  gap: '8px',
  height: '100%'
}));

type Cabinet = { id: string; name: string };
type FileRow = {
  id: string;
  name: string;
  mime_type?: string;
  is_directory?: boolean;
  size_bytes?: number;
  processing_status?: string;
  relative_path?: string;
  created_at?: string;
};
type Artefact = { id: string; type: string; rel_path: string; created_at: string };

interface PaginationInfo {
  page: number;
  per_page: number;
  total_count: number;
  total_pages: number;
  has_next: boolean;
  has_prev: boolean;
  offset: number;
}

interface FileListResponse {
  files: FileRow[];
  pagination: PaginationInfo;
  filters: {
    search?: string;
    sort_by: string;
    sort_order: string;
    include_directories: boolean;
    parent_directory_id?: string;
  };
}

export const CCFilesPanel: React.FC = () => {
  const { tldrawPreferences } = useTLDraw() as { tldrawPreferences?: { colorScheme?: 'light' | 'dark' | 'system' } };
  const { user: authUser, accessToken } = useAuth();
  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
  const [cabinets, setCabinets] = useState<Cabinet[]>([]);
  const [selectedCabinet, setSelectedCabinet] = useState<string>('');
  const [files, setFiles] = useState<FileRow[]>([]);
  const [pagination, setPagination] = useState<PaginationInfo | null>(null);
  const [loading, setLoading] = useState(false);
  const [menuAnchor, setMenuAnchor] = useState<null | { el: HTMLElement; fileId: string }>(null);
  const [artefacts, setArtefacts] = useState<Artefact[]>([]);

  // Pagination and filtering state
  const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage, setItemsPerPage] = useState(15); // Slightly more for main panel
  const [searchTerm, setSearchTerm] = useState('');
  const [sortBy, setSortBy] = useState('created_at');
  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
  const previousSearchTerm = useRef(searchTerm);

  // Directory navigation state
  const [currentDirectoryId, setCurrentDirectoryId] = useState<string | null>(null);
  const [breadcrumbs, setBreadcrumbs] = useState<{ id: string | null; name: string }[]>([
    { id: null, name: 'Root' }
  ]);
  const initialSelectionDone = useRef(false);

  // Directory upload state
  const [selectedFiles, setSelectedFiles] = useState<FileWithPath[]>([]);
  const [showDirectoryDialog, setShowDirectoryDialog] = useState(false);
  const [isDirectoryUploading, setIsDirectoryUploading] = useState(false);
  const [directoryStats, setDirectoryStats] = useState<{
    fileCount: number;
    directoryCount: number;
    totalSize: number;
    formattedSize: string;
  } | null>(null);

  const navigate = useNavigate();

  const theme = useMemo(() => {
    const mode = (tldrawPreferences?.colorScheme === 'system')
      ? (prefersDarkMode ? 'dark' : 'light')
      : (tldrawPreferences?.colorScheme === 'dark' ? 'dark' : 'light');
    return createTheme({ palette: { mode, divider: 'var(--color-divider)' } });
  }, [tldrawPreferences?.colorScheme, prefersDarkMode]);

  type RequestInitLike = { method?: string; body?: FormData | string | Blob | null; headers?: Record<string, string> } | undefined;
  type HeadersInitLike = Record<string, string>;

  const API_BASE: string = import.meta.env.VITE_API_BASE || '/api';

  const apiFetch = useCallback(async (url: string, init?: RequestInitLike) => {
    const headers: HeadersInitLike = {
      'Authorization': `Bearer ${accessToken || ''}`,
      ...(init?.headers || {})
    };
    const fullUrl = url.startsWith('http') ? url : `${API_BASE}${url}`;
    const res = await fetch(fullUrl, { ...(init || {}), headers });
    if (!res.ok) throw new Error(await res.text());
    return res.json();
  }, [accessToken, API_BASE]);

  const loadCabinets = useCallback(async () => {
    setLoading(true);
    try {
      const data = await apiFetch('/database/cabinets');
      const all = [...(data.owned || []), ...(data.shared || [])];
      setCabinets(all);
      if (all.length && !initialSelectionDone.current) {
        initialSelectionDone.current = true;
        setSelectedCabinet(all[0].id);
      }
    } catch (error) {
      console.error('Failed to load cabinets:', error);
    } finally {
      setLoading(false);
    }
  }, [apiFetch]);

  const loadFiles = useCallback(async (cabinetId: string, page: number = currentPage) => {
    if (!cabinetId) return;

    setLoading(true);
    try {
      // Build query parameters for pagination, search, and sorting
      const params = new URLSearchParams({
        cabinet_id: cabinetId,
        page: page.toString(),
        per_page: itemsPerPage.toString(),
        sort_by: sortBy,
        sort_order: sortOrder,
        include_directories: 'true'
      });

      // Add directory filtering
      if (currentDirectoryId) {
        params.append('parent_directory_id', currentDirectoryId);
      }

      if (searchTerm) {
        params.append('search', searchTerm);
      }

      // Use the new simple upload endpoint for listing files with pagination
      const data: FileListResponse = await apiFetch(`/simple-upload/files?${params.toString()}`);

      setFiles(data.files || []);
      setPagination(data.pagination);
    } catch (error) {
      console.error('Failed to load files:', error);
    } finally {
      setLoading(false);
    }
  }, [currentPage, itemsPerPage, sortBy, sortOrder, searchTerm, apiFetch, currentDirectoryId]);

  useEffect(() => {
    if (authUser?.id) {
      initialSelectionDone.current = false;
      loadCabinets();
    }
  }, [loadCabinets, authUser?.id]);

  // Main loading effect - handles pagination, sorting, cabinet changes, directory navigation
  useEffect(() => {
    if (selectedCabinet) {
      loadFiles(selectedCabinet, currentPage);
    }
  }, [selectedCabinet, loadFiles, currentPage, itemsPerPage, sortBy, sortOrder, currentDirectoryId]);

  // Reset to page 1 and root directory when cabinet changes
  useEffect(() => {
    if (selectedCabinet) {
      setCurrentPage(1);
      setCurrentDirectoryId(null);
      setBreadcrumbs([{ id: null, name: 'Root' }]);
    }
  }, [selectedCabinet]);

  // Search with debouncing - only when search term actually changes
  useEffect(() => {
    if (selectedCabinet && searchTerm !== previousSearchTerm.current) {
      previousSearchTerm.current = searchTerm;

      const timeoutId = setTimeout(() => {
        setCurrentPage(1); // Reset to first page when searching
        loadFiles(selectedCabinet, 1);
      }, 500); // 500ms debounce

      return () => clearTimeout(timeoutId);
    }
  }, [searchTerm, selectedCabinet, loadFiles]);

  // Directory navigation handlers
  const navigateToFolder = useCallback((folder: FileRow) => {
    if (!folder.is_directory) return;

    setCurrentDirectoryId(folder.id);
    setCurrentPage(1); // Reset to first page when entering folder

    // Add to breadcrumbs
    setBreadcrumbs(prev => [...prev, { id: folder.id, name: folder.name }]);
  }, []);

  const navigateToBreadcrumb = useCallback((targetBreadcrumb: { id: string | null; name: string }) => {
    setCurrentDirectoryId(targetBreadcrumb.id);
    setCurrentPage(1); // Reset to first page

    // Trim breadcrumbs to the selected one
    setBreadcrumbs(prev => {
      const targetIndex = prev.findIndex(b => b.id === targetBreadcrumb.id && b.name === targetBreadcrumb.name);
      return targetIndex !== -1 ? prev.slice(0, targetIndex + 1) : [{ id: null, name: 'Root' }];
    });
  }, []);

  // Sort files to group directories first, then regular files
  const sortedFiles = useMemo(() => {
    return [...files].sort((a, b) => {
      // Directories come first
      if (a.is_directory && !b.is_directory) return -1;
      if (!a.is_directory && b.is_directory) return 1;

      // Within the same type (both directories or both files), sort alphabetically by name
      return a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: 'base' });
    });
  }, [files]);

  // Check if we need a separator between directories and files
  const needsGroupSeparator = useMemo(() => {
    const hasDirectories = sortedFiles.some(f => f.is_directory);
    const hasFiles = sortedFiles.some(f => !f.is_directory);
    return hasDirectories && hasFiles;
  }, [sortedFiles]);

  const getGroupSeparatorIndex = useMemo(() => {
    if (!needsGroupSeparator) return -1;
    return sortedFiles.findIndex(f => !f.is_directory) - 1;
  }, [sortedFiles, needsGroupSeparator]);

  const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    if (!e.target.files || !selectedCabinet) return;
    const file = e.target.files[0];
    await uploadFile(file);
    (e.target as HTMLInputElement).value = '';
  };

  const handleDirectorySelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (!e.target.files || !selectedCabinet) return;

    // Convert FileList to FileWithPath array with relative paths
    const files: FileWithPath[] = [];
    Array.from(e.target.files).forEach(file => {
      const relativePath = (file as File & { webkitRelativePath?: string }).webkitRelativePath || file.name;
      (file as FileWithPath).relativePath = relativePath;
      files.push(file as FileWithPath);
    });

    if (files.length > 0) {
      prepareDirectoryUpload(files);
    }

    (e.target as HTMLInputElement).value = '';
  };

  const uploadFile = async (file: File) => {
    if (!selectedCabinet) return;
    const form = new FormData();
    form.append('cabinet_id', selectedCabinet);
    form.append('path', file.name);
    form.append('scope', 'teacher');
    form.append('file', file);
    await apiFetch('/database/files/upload', { method: 'POST', body: form });
    await loadFiles(selectedCabinet);
  };


  const prepareDirectoryUpload = (files: FileWithPath[]) => {
    if (files.length === 0) return;

    setSelectedFiles(files);
    setDirectoryStats(calculateDirectoryStats(files));
    setShowDirectoryDialog(true);
  };

  const startDirectoryUpload = async () => {
    if (!selectedCabinet || selectedFiles.length === 0) return;

    setIsDirectoryUploading(true);

    try {
      const firstFilePath = selectedFiles[0].relativePath;
      const directoryName = firstFilePath.split('/')[0] || 'uploaded-folder';

      const formData = new FormData();
      formData.append('cabinet_id', selectedCabinet);
      formData.append('scope', 'teacher');
      formData.append('directory_name', directoryName);

      selectedFiles.forEach(file => {
        formData.append('files', file);
      });

      const relativePaths = selectedFiles.map(f => f.relativePath);
      formData.append('file_paths', JSON.stringify(relativePaths));

      await apiFetch('/simple-upload/files/upload-directory', {
        method: 'POST',
        body: formData
      });

      await loadFiles(selectedCabinet);

      setShowDirectoryDialog(false);
      setSelectedFiles([]);
      setDirectoryStats(null);
    } catch (error) {
      console.error('Directory upload failed:', error);
    } finally {
      setIsDirectoryUploading(false);
    }
  };

  const handleDelete = async (fileId: string) => {
    await apiFetch(`/database/files/${fileId}`, { method: 'DELETE' });
    await loadFiles(selectedCabinet);
  };

  const handleGenerateInitial = async (fileId: string) => {
    await apiFetch(`/database/files/${fileId}/artefacts/initial`, { method: 'POST' });
    const arts = await apiFetch(`/database/files/${fileId}/artefacts`);
    setArtefacts(arts || []);
  };

  const openMenu = (el: HTMLElement, fileId: string) => setMenuAnchor({ el, fileId });
  const closeMenu = () => setMenuAnchor(null);
  const goToAIContent = () => {
    if (!menuAnchor) return;
    const fileId = menuAnchor.fileId;
    closeMenu();
    navigate(`/doc-intelligence/${encodeURIComponent(fileId)}`);
  };

  const iconForMime = (mime?: string, isDirectory?: boolean) => {
    if (isDirectory) return <FolderIcon />;
    if (!mime) return <InsertDriveFileIcon />;
    if (mime.startsWith('image/')) return <ImageIcon />;
    if (mime === 'application/pdf' || mime.startsWith('application/')) return <DescriptionIcon />;
    return <InsertDriveFileIcon />;
  };

  const formatFileSize = (bytes: number): string => {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
  };

  const getStatusColor = (status?: string) => {
    switch (status) {
      case 'uploaded': return 'primary';
      case 'processing': return 'warning';
      case 'completed': return 'success';
      case 'failed': return 'error';
      default: return 'default';
    }
  };

  return (
    <ThemeProvider theme={theme}>
      <Container>
        {/* Cabinet Selection Dropdown */}
        <Box sx={{ display: 'flex', gap: 1, alignItems: 'center', mb: 1 }}>
          <FormControl size="small" fullWidth>
            <InputLabel>Cabinet</InputLabel>
            <Select
              value={selectedCabinet}
              label="Cabinet"
              onChange={(e) => setSelectedCabinet(e.target.value)}
              startAdornment={<FolderIcon sx={{ color: 'action.active', mr: 1, fontSize: '1rem' }} />}
            >
              {cabinets.map(c => (
                <MenuItem key={c.id} value={c.id}>
                  <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
                    <Typography variant="body2">{c.name}</Typography>
                    {pagination && selectedCabinet === c.id && (
                      <Chip label={`${pagination.total_count} files`} size="small" sx={{ ml: 1 }} />
                    )}
                  </Box>
                </MenuItem>
              ))}
            </Select>
          </FormControl>

          <Button
            size="small"
            variant="outlined"
            onClick={() => {
              setCurrentPage(1);
              setSearchTerm('');
              loadCabinets();
            }}
            sx={{
              minWidth: 40,
              width: 40,
              height: 40, // Match the height of Select components
              padding: 0,
              '& .MuiButton-startIcon': {
                margin: 0
              }
            }}
          >
            <RefreshIcon fontSize="small" />
          </Button>
        </Box>

        {/* Search Box - Full Width */}
        <Box sx={{ mb: 1 }}>
          <TextField
            size="small"
            label="Search files"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            fullWidth
            placeholder="Type to search files..."
          />
        </Box>


        {/* Sort and Filter Controls */}
        <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap', alignItems: 'center', py: 1 }}>
          <FormControl size="small" sx={{ minWidth: 80 }}>
            <InputLabel>Sort</InputLabel>
            <Select
              value={sortBy}
              label="Sort"
              onChange={(e) => setSortBy(e.target.value)}
            >
              <MenuItem value="name">Name</MenuItem>
              <MenuItem value="created_at">Date</MenuItem>
              <MenuItem value="size_bytes">Size</MenuItem>
            </Select>
          </FormControl>

          <FormControl size="small" sx={{ minWidth: 60 }}>
            <InputLabel>Order</InputLabel>
            <Select
              value={sortOrder}
              label="Order"
              onChange={(e) => setSortOrder(e.target.value as 'asc' | 'desc')}
            >
              <MenuItem value="asc">↑</MenuItem>
              <MenuItem value="desc">↓</MenuItem>
            </Select>
          </FormControl>

          <FormControl size="small" sx={{ minWidth: 60 }}>
            <InputLabel>Per page</InputLabel>
            <Select
              value={itemsPerPage}
              label="Per page"
              onChange={(e) => {
                setItemsPerPage(Number(e.target.value));
                setCurrentPage(1);
              }}
            >
              <MenuItem value={10}>10</MenuItem>
              <MenuItem value={15}>15</MenuItem>
              <MenuItem value={25}>25</MenuItem>
            </Select>
          </FormControl>
        </Box>

        {/* Breadcrumb Navigation */}
        <Box sx={{
          display: 'flex',
          alignItems: 'center',
          gap: 1,
          py: 1,
          px: 1,
          bgcolor: 'background.paper',
          borderBottom: '1px solid var(--color-divider)'
        }}>
          {breadcrumbs.map((breadcrumb, index) => (
            <React.Fragment key={`${breadcrumb.id}-${breadcrumb.name}`}>
              {index > 0 && (
                <Typography variant="caption" color="textSecondary">
                  /
                </Typography>
              )}
              <Button
                size="small"
                variant="text"
                onClick={() => navigateToBreadcrumb(breadcrumb)}
                sx={{
                  minWidth: 'auto',
                  textTransform: 'none',
                  color: index === breadcrumbs.length - 1 ? 'primary.main' : 'text.secondary',
                  fontWeight: index === breadcrumbs.length - 1 ? 600 : 400
                }}
              >
                {breadcrumb.name}
              </Button>
            </React.Fragment>
          ))}
        </Box>

        {/* File List with Fixed Height */}
        <Box sx={{
          border: '1px solid var(--color-divider)',
          borderRadius: '4px',
          height: 300, // Fixed height for main panel
          overflow: 'auto',
          flex: 1,
          // Hide scrollbar while keeping scroll functionality
          scrollbarWidth: 'none', // Firefox
          '&::-webkit-scrollbar': {
            display: 'none' // WebKit browsers (Chrome, Safari, Edge)
          }
        }}>
          {loading ? (
            <Box sx={{ p: 2, textAlign: 'center' }}>
              <CircularProgress size={20} />
              <Typography variant="caption" display="block" sx={{ mt: 1 }}>
                Loading files...
              </Typography>
            </Box>
          ) : sortedFiles.length === 0 ? (
            <Box sx={{ p: 2, textAlign: 'center' }}>
              <Typography variant="body2" color="textSecondary">
                {searchTerm ? 'No files found matching your search.' : 'No files found. Upload some files!'}
              </Typography>
            </Box>
          ) : (
            <List dense disablePadding>
              {sortedFiles.map((f, index) => (
                <React.Fragment key={f.id}>
                  {f.is_directory ? (
                    <ListItem
                      button
                      onClick={() => navigateToFolder(f)}
                      sx={{
                        cursor: 'pointer',
                        '&:hover': {
                          backgroundColor: 'action.hover'
                        }
                      }}
                      secondaryAction={
                        <>
                          <IconButton size="small" onClick={(e) => openMenu(e.currentTarget, f.id)} title="File actions">
                            <MoreVertIcon />
                          </IconButton>
                          <IconButton edge="end" size="small" onClick={() => handleDelete(f.id)} title="Delete file">
                            <DeleteIcon />
                          </IconButton>
                        </>
                      }
                    >
                      {iconForMime(f.mime_type, f.is_directory)}
                      <ListItemText
                        sx={{ ml: 1 }}
                        primary={
                          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                            <Typography variant="body2" sx={{ wordBreak: 'break-all' }}>
                              {f.name}
                            </Typography>
                            {f.is_directory && <Chip label="Dir" size="small" />}
                            {f.processing_status && f.processing_status !== 'uploaded' && (
                              <Chip
                                label={f.processing_status}
                                size="small"
                                color={getStatusColor(f.processing_status)}
                              />
                            )}
                          </Box>
                        }
                        secondary={
                          <Typography variant="caption" color="textSecondary">
                            {f.size_bytes ? formatFileSize(f.size_bytes) : 'Unknown size'}
                            {f.mime_type && ` • ${f.mime_type.split('/')[1]}`}
                          </Typography>
                        }
                      />
                    </ListItem>
                  ) : (
                    <ListItem
                      secondaryAction={
                        <>
                          <IconButton size="small" onClick={(e) => openMenu(e.currentTarget, f.id)} title="File actions">
                            <MoreVertIcon />
                          </IconButton>
                          <IconButton edge="end" size="small" onClick={() => handleDelete(f.id)} title="Delete file">
                            <DeleteIcon />
                          </IconButton>
                        </>
                      }
                    >
                      {iconForMime(f.mime_type, f.is_directory)}
                      <ListItemText
                        sx={{ ml: 1 }}
                        primary={
                          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                            <Typography variant="body2" sx={{ wordBreak: 'break-all' }}>
                              {f.name}
                            </Typography>
                            {f.is_directory && <Chip label="Dir" size="small" />}
                            {f.processing_status && f.processing_status !== 'uploaded' && (
                              <Chip
                                label={f.processing_status}
                                size="small"
                                color={getStatusColor(f.processing_status)}
                              />
                            )}
                          </Box>
                        }
                        secondary={
                          <Typography variant="caption" color="textSecondary">
                            {f.size_bytes ? formatFileSize(f.size_bytes) : 'Unknown size'}
                            {f.mime_type && ` • ${f.mime_type.split('/')[1]}`}
                          </Typography>
                        }
                      />
                    </ListItem>
                  )}
                  {/* Group separator between directories and files */}
                  {index === getGroupSeparatorIndex && needsGroupSeparator && (
                    <Divider sx={{ my: 1, borderStyle: 'dashed', borderColor: 'divider' }} />
                  )}
                  {/* Regular divider between items */}
                  {index < sortedFiles.length - 1 && index !== getGroupSeparatorIndex && <Divider />}
                </React.Fragment>
              ))}
            </List>
          )}
        </Box>

        {/* Pagination Controls */}
        {pagination && pagination.total_pages > 1 && (
          <Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
            <Stack spacing={1} alignItems="center">
              <Pagination
                count={pagination.total_pages}
                page={pagination.page}
                onChange={(event, value) => setCurrentPage(value)}
                color="primary"
                size="small"
                showFirstButton
                showLastButton
              />
              <Typography variant="caption" color="textSecondary">
                {pagination.offset + 1}-{Math.min(pagination.offset + pagination.per_page, pagination.total_count)} of {pagination.total_count}
              </Typography>
            </Stack>
          </Box>
        )}

        {/* Upload Controls */}
        <Box sx={{ mt: 2, display: 'flex', gap: 1, flexDirection: 'column' }}>
          {/* File Inputs */}
          <input
            id="cc-file-input"
            type="file"
            style={{ display: 'none' }}
            onChange={handleUpload}
            disabled={!selectedCabinet}
          />

          <input
            id="cc-directory-input"
            type="file"
            style={{ display: 'none' }}
            {...({ webkitdirectory: '' } as React.InputHTMLAttributes<HTMLInputElement>)}
            multiple
            onChange={handleDirectorySelect}
            disabled={!selectedCabinet}
          />

          {/* Upload Buttons */}
          <Box sx={{ display: 'flex', gap: 1 }}>
            <Button
              variant="outlined"
              startIcon={<UploadIcon />}
              onClick={() => selectedCabinet && document.getElementById('cc-file-input')?.click()}
              disabled={!selectedCabinet}
              fullWidth
            >
              Upload File
            </Button>

            <Button
              variant="outlined"
              startIcon={<FolderOpenIcon />}
              onClick={() => selectedCabinet && document.getElementById('cc-directory-input')?.click()}
              disabled={!selectedCabinet}
              fullWidth
            >
              Upload Folder
            </Button>
          </Box>

          {!selectedCabinet && (
            <Typography variant="caption" color="text.secondary" sx={{ textAlign: 'center', mt: 0.5 }}>
              Select a cabinet first to enable uploads
            </Typography>
          )}

          {selectedCabinet && !isDirectoryPickerSupported() && (
            <Typography variant="caption" color="warning.main" sx={{ textAlign: 'center', mt: 0.5 }}>
              ⚠️ Folder uploads may have limited support in this browser
            </Typography>
          )}
        </Box>

        <Menu
          anchorEl={menuAnchor?.el ?? null}
          open={!!menuAnchor}
          onClose={closeMenu}
          anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
          transformOrigin={{ vertical: 'top', horizontal: 'right' }}
        >
          <MenuItem onClick={() => { if (menuAnchor) { handleGenerateInitial(menuAnchor.fileId); closeMenu(); } }}>Generate initial artefacts</MenuItem>
          <MenuItem onClick={goToAIContent}>Open AI content</MenuItem>
        </Menu>

        {artefacts.length > 0 && (
          <>
            <Divider />
            <List dense sx={{
              border: '1px solid var(--color-divider)',
              borderRadius: '4px',
              overflow: 'auto',
              maxHeight: 160,
              // Hide scrollbar while keeping scroll functionality
              scrollbarWidth: 'none', // Firefox
              '&::-webkit-scrollbar': {
                display: 'none' // WebKit browsers (Chrome, Safari, Edge)
              }
            }}>
              {artefacts.map(a => (
                <ListItem key={a.id}>
                  <ListItemText primary={a.type} secondary={a.rel_path} />
                </ListItem>
              ))}
            </List>
          </>
        )}

        {/* Directory Upload Dialog */}
        <Dialog
          open={showDirectoryDialog}
          onClose={() => !isDirectoryUploading && setShowDirectoryDialog(false)}
          maxWidth="md"
          fullWidth
        >
          <DialogTitle>
            <Box display="flex" alignItems="center" gap={1}>
              <FolderOpenIcon />
              Directory Upload
              {isDirectoryUploading && <LinearProgress sx={{ flexGrow: 1, ml: 2 }} />}
            </Box>
          </DialogTitle>

          <DialogContent>
            {directoryStats && (
              <Alert severity="info" sx={{ mb: 2 }}>
                <Typography variant="body2">
                  <strong>{directoryStats.fileCount} files</strong> in{' '}
                  <strong>{directoryStats.directoryCount} folders</strong><br />
                  Total size: <strong>{directoryStats.formattedSize}</strong>
                </Typography>
              </Alert>
            )}

            <Paper variant="outlined" sx={{
              p: 2,
              maxHeight: 200,
              overflow: 'auto',
              // Hide scrollbar while keeping scroll functionality
              scrollbarWidth: 'none', // Firefox
              '&::-webkit-scrollbar': {
                display: 'none' // WebKit browsers (Chrome, Safari, Edge)
              }
            }}>
              <Typography variant="body2" color="textSecondary" gutterBottom>
                Files to upload:
              </Typography>
              {selectedFiles.map((file, i) => (
                <Box key={i} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', py: 0.5 }}>
                  <Typography variant="body2" sx={{ flex: 1, mr: 2 }} noWrap>
                    {file.relativePath}
                  </Typography>
                  <Typography variant="caption" color="textSecondary">
                    {formatFileSize(file.size)}
                  </Typography>
                </Box>
              ))}
            </Paper>
          </DialogContent>

          <DialogActions>
            <Button onClick={() => setShowDirectoryDialog(false)} disabled={isDirectoryUploading}>
              Cancel
            </Button>
            <Button
              onClick={startDirectoryUpload}
              variant="contained"
              disabled={isDirectoryUploading || selectedFiles.length === 0}
            >
              {isDirectoryUploading ? 'Uploading...' : 'Upload Directory'}
            </Button>
          </DialogActions>
        </Dialog>
      </Container>
    </ThemeProvider>
  );
};