import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import {
  Box,
  Typography,
  Card,
  CardContent,
  CardActions,
  Button,
  Chip,
  IconButton,
  ToggleButton,
  ToggleButtonGroup,
  TextField,
  InputAdornment,
  Stack,
  Menu,
  MenuItem,
  ListItemIcon,
  ListItemText,
  Divider,
  CircularProgress,
  Alert,
  Pagination,
  FormControl,
  InputLabel,
  Select,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Checkbox,
  Fab,
  Tooltip,
} from '@mui/material';
import Grid from '@mui/material/GridLegacy';
import {
  GridView as GridViewIcon,
  ViewList as ListViewIcon,
  Search as SearchIcon,
  FilterList as FilterIcon,
  Sort as SortIcon,
  Download as DownloadIcon,
  PictureAsPdf as PdfIcon,
  Image as ImageIcon,
  Description as DocIcon,
  TextSnippet as TextIcon,
  MoreVert as MoreIcon,
  CalendarToday as DateIcon,
  Storage as SizeIcon,
  Visibility as ViewIcon,
  ChevronLeft as ChevronLeftIcon,
  ChevronRight as ChevronRightIcon,
  Edit as EditIcon,
  Delete as DeleteIcon,
  CheckBoxOutlineBlank as CheckBoxOutlineBlankIcon,
  CheckBox as CheckBoxIcon,
  SelectAll as SelectAllIcon,
  Close as CloseIcon,
  Refresh as RefreshIcon,
  History as HistoryIcon,
} from '@mui/icons-material';
import { documentService } from '../services/api';
import DocumentThumbnail from '../components/DocumentThumbnail';
import Label, { type LabelData } from '../components/Labels/Label';
import LabelSelector from '../components/Labels/LabelSelector';
import { useApi } from '../hooks/useApi';
import { RetryHistoryModal } from '../components/RetryHistoryModal';

interface Document {
  id: string;
  original_filename: string;
  filename?: string;
  file_size: number;
  mime_type: string;
  created_at: string;
  has_ocr_text?: boolean;
  ocr_status?: string;
  ocr_confidence?: number;
  tags: string[];
  labels?: LabelData[];
}

interface PaginationInfo {
  total: number;
  limit: number;
  offset: number;
  has_more: boolean;
}

interface DocumentsResponse {
  documents: Document[];
  pagination: PaginationInfo;
}

type ViewMode = 'grid' | 'list';
type SortField = 'created_at' | 'original_filename' | 'file_size';
type SortOrder = 'asc' | 'desc';

const DocumentsPage: React.FC = () => {
  const navigate = useNavigate();
  const api = useApi();
  const [documents, setDocuments] = useState<Document[]>([]);
  const [pagination, setPagination] = useState<PaginationInfo>({ total: 0, limit: 20, offset: 0, has_more: false });
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);
  const [viewMode, setViewMode] = useState<ViewMode>('grid');
  const [searchQuery, setSearchQuery] = useState<string>('');
  const [sortBy, setSortBy] = useState<SortField>('created_at');
  const [sortOrder, setSortOrder] = useState<SortOrder>('desc');
  const [ocrFilter, setOcrFilter] = useState<string>('');
  
  // Labels state
  const [availableLabels, setAvailableLabels] = useState<LabelData[]>([]);
  const [labelsLoading, setLabelsLoading] = useState<boolean>(false);
  const [labelEditDialogOpen, setLabelEditDialogOpen] = useState<boolean>(false);
  const [editingDocumentId, setEditingDocumentId] = useState<string | null>(null);
  const [editingDocumentLabels, setEditingDocumentLabels] = useState<LabelData[]>([]);
  
  // Menu states
  const [sortMenuAnchor, setSortMenuAnchor] = useState<null | HTMLElement>(null);
  const [docMenuAnchor, setDocMenuAnchor] = useState<null | HTMLElement>(null);
  const [selectedDoc, setSelectedDoc] = useState<Document | null>(null);
  
  // Delete confirmation dialog state
  const [deleteDialogOpen, setDeleteDialogOpen] = useState<boolean>(false);
  const [documentToDelete, setDocumentToDelete] = useState<Document | null>(null);
  const [deleteLoading, setDeleteLoading] = useState<boolean>(false);

  // Mass selection state
  const [selectionMode, setSelectionMode] = useState<boolean>(false);
  const [selectedDocuments, setSelectedDocuments] = useState<Set<string>>(new Set());
  const [bulkDeleteDialogOpen, setBulkDeleteDialogOpen] = useState<boolean>(false);
  const [bulkDeleteLoading, setBulkDeleteLoading] = useState<boolean>(false);

  // Retry functionality state
  const [retryingDocument, setRetryingDocument] = useState<string | null>(null);
  const [retryHistoryModalOpen, setRetryHistoryModalOpen] = useState<boolean>(false);
  const [selectedDocumentForHistory, setSelectedDocumentForHistory] = useState<string | null>(null);

  useEffect(() => {
    fetchDocuments();
    fetchLabels();
  }, [pagination?.limit, pagination?.offset, ocrFilter]);

  const fetchDocuments = async (): Promise<void> => {
    if (!pagination) return;
    
    try {
      setLoading(true);
      const response = await documentService.listWithPagination(
        pagination.limit, 
        pagination.offset, 
        ocrFilter || undefined
      );
      setDocuments(response.data.documents || []);
      setPagination(response.data.pagination || { total: 0, limit: 20, offset: 0, has_more: false });
    } catch (err) {
      setError('Failed to load documents');
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  const fetchLabels = async (): Promise<void> => {
    try {
      setLabelsLoading(true);
      const response = await api.get('/labels?include_counts=false');
      
      if (response.status === 200 && Array.isArray(response.data)) {
        setAvailableLabels(response.data);
      } else {
        console.error('Failed to fetch labels:', response);
      }
    } catch (error) {
      console.error('Failed to fetch labels:', error);
    } finally {
      setLabelsLoading(false);
    }
  };

  const handleCreateLabel = async (labelData: Omit<LabelData, 'id' | 'is_system' | 'created_at' | 'updated_at' | 'document_count' | 'source_count'>) => {
    try {
      const response = await api.post('/labels', labelData);
      const newLabel = response.data;
      setAvailableLabels(prev => [...prev, newLabel]);
      return newLabel;
    } catch (error) {
      console.error('Failed to create label:', error);
      throw error;
    }
  };

  const handleEditDocumentLabels = (doc: Document) => {
    setEditingDocumentId(doc.id);
    setEditingDocumentLabels(doc.labels || []);
    setLabelEditDialogOpen(true);
  };

  const handleSaveDocumentLabels = async () => {
    if (!editingDocumentId) return;

    try {
      const labelIds = editingDocumentLabels.map(label => label.id);
      await api.put(`/labels/documents/${editingDocumentId}`, { label_ids: labelIds });
      
      // Update the document in the local state
      setDocuments(prev => prev.map(doc => 
        doc.id === editingDocumentId 
          ? { ...doc, labels: editingDocumentLabels }
          : doc
      ));
      
      setLabelEditDialogOpen(false);
      setEditingDocumentId(null);
      setEditingDocumentLabels([]);
    } catch (error) {
      console.error('Failed to update document labels:', error);
    }
  };

  const handleDownload = async (doc: Document): Promise<void> => {
    try {
      const response = await documentService.download(doc.id);
      const url = window.URL.createObjectURL(new Blob([response.data]));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', doc.original_filename);
      document.body.appendChild(link);
      link.click();
      link.remove();
      window.URL.revokeObjectURL(url);
    } catch (err) {
      console.error('Download failed:', err);
    }
  };

  const getFileIcon = (mimeType: string): React.ReactElement => {
    if (mimeType.includes('pdf')) return <PdfIcon color="error" />;
    if (mimeType.includes('image')) return <ImageIcon color="primary" />;
    if (mimeType.includes('text')) return <TextIcon color="info" />;
    return <DocIcon color="secondary" />;
  };

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

  const formatDate = (dateString: string): string => {
    return new Date(dateString).toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit',
    });
  };

  const filteredDocuments = (documents || []).filter(doc =>
    doc.original_filename.toLowerCase().includes(searchQuery.toLowerCase()) ||
    doc.tags.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase()))
  );

  const sortedDocuments = [...filteredDocuments].sort((a, b) => {
    let aValue: any = a[sortBy];
    let bValue: any = b[sortBy];
    
    if (sortBy === 'created_at') {
      aValue = new Date(aValue);
      bValue = new Date(bValue);
    }
    
    if (sortOrder === 'asc') {
      return aValue > bValue ? 1 : -1;
    } else {
      return aValue < bValue ? 1 : -1;
    }
  });

  const handleViewModeChange = (event: React.MouseEvent<HTMLElement>, newView: ViewMode | null): void => {
    if (newView) {
      setViewMode(newView);
    }
  };

  const handleSortMenuClick = (event: React.MouseEvent<HTMLElement>): void => {
    setSortMenuAnchor(event.currentTarget);
  };

  const handleDocMenuClick = (event: React.MouseEvent<HTMLElement>, doc: Document): void => {
    setSelectedDoc(doc);
    setDocMenuAnchor(event.currentTarget);
  };

  const handleSortMenuClose = (): void => {
    setSortMenuAnchor(null);
  };

  const handleDocMenuClose = (): void => {
    setDocMenuAnchor(null);
  };

  const handleSortChange = (field: SortField, order: SortOrder): void => {
    setSortBy(field);
    setSortOrder(order);
    handleSortMenuClose();
  };

  const handleDeleteClick = (doc: Document): void => {
    setDocumentToDelete(doc);
    setDeleteDialogOpen(true);
    handleDocMenuClose();
  };

  const handleDeleteConfirm = async (): Promise<void> => {
    if (!documentToDelete) return;

    try {
      setDeleteLoading(true);
      await documentService.delete(documentToDelete.id);
      
      setDocuments(prev => prev.filter(doc => doc.id !== documentToDelete.id));
      setPagination(prev => ({ ...prev, total: prev.total - 1 }));
      
      setDeleteDialogOpen(false);
      setDocumentToDelete(null);
    } catch (error) {
      console.error('Failed to delete document:', error);
      setError('Failed to delete document');
    } finally {
      setDeleteLoading(false);
    }
  };

  const handleDeleteCancel = (): void => {
    setDeleteDialogOpen(false);
    setDocumentToDelete(null);
  };

  // Retry functionality handlers
  const handleRetryOcr = async (doc: Document): Promise<void> => {
    try {
      setRetryingDocument(doc.id);
      await documentService.bulkRetryOcr({
        mode: 'specific',
        document_ids: [doc.id],
        priority_override: 15,
      });
      
      // Refresh the document list to get updated status
      await fetchDocuments();
      
      setError(null);
    } catch (error) {
      console.error('Failed to retry OCR:', error);
      setError('Failed to retry OCR processing');
    } finally {
      setRetryingDocument(null);
      handleDocMenuClose();
    }
  };

  const handleShowRetryHistory = (docId: string): void => {
    setSelectedDocumentForHistory(docId);
    setRetryHistoryModalOpen(true);
    handleDocMenuClose();
  };

  const handlePageChange = (event: React.ChangeEvent<unknown>, page: number): void => {
    const newOffset = (page - 1) * pagination.limit;
    setPagination(prev => ({ ...prev, offset: newOffset }));
  };

  const handleOcrFilterChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
    setOcrFilter(event.target.value);
    setPagination(prev => ({ ...prev, offset: 0 })); // Reset to first page when filtering
  };

  // Mass selection handlers
  const handleToggleSelectionMode = (): void => {
    setSelectionMode(!selectionMode);
    setSelectedDocuments(new Set());
  };

  const handleDocumentSelect = (documentId: string, isSelected: boolean): void => {
    const newSelection = new Set(selectedDocuments);
    if (isSelected) {
      newSelection.add(documentId);
    } else {
      newSelection.delete(documentId);
    }
    setSelectedDocuments(newSelection);
  };

  const handleSelectAll = (): void => {
    if (selectedDocuments.size === sortedDocuments.length) {
      setSelectedDocuments(new Set());
    } else {
      setSelectedDocuments(new Set(sortedDocuments.map(doc => doc.id)));
    }
  };

  const handleBulkDelete = (): void => {
    if (selectedDocuments.size === 0) return;
    setBulkDeleteDialogOpen(true);
  };

  const handleBulkDeleteConfirm = async (): Promise<void> => {
    if (selectedDocuments.size === 0) return;

    try {
      setBulkDeleteLoading(true);
      const documentIds = Array.from(selectedDocuments);
      await documentService.bulkDelete(documentIds);
      
      setDocuments(prev => prev.filter(doc => !selectedDocuments.has(doc.id)));
      setPagination(prev => ({ ...prev, total: prev.total - selectedDocuments.size }));
      
      setSelectedDocuments(new Set());
      setSelectionMode(false);
      setBulkDeleteDialogOpen(false);
    } catch (error) {
      console.error('Failed to delete documents:', error);
      setError('Failed to delete selected documents');
    } finally {
      setBulkDeleteLoading(false);
    }
  };

  const handleBulkDeleteCancel = (): void => {
    setBulkDeleteDialogOpen(false);
  };

  const getOcrStatusChip = (doc: Document) => {
    if (!doc.ocr_status) return null;
    
    const statusConfig = {
      'completed': { color: 'success' as const, label: doc.ocr_confidence ? `OCR ${Math.round(doc.ocr_confidence)}%` : 'OCR Done' },
      'processing': { color: 'warning' as const, label: 'Processing...' },
      'failed': { color: 'error' as const, label: 'OCR Failed' },
      'pending': { color: 'default' as const, label: 'Pending' },
    };
    
    const config = statusConfig[doc.ocr_status as keyof typeof statusConfig];
    if (!config) return null;
    
    return (
      <Chip 
        label={config.label}
        size="small" 
        color={config.color}
        variant="outlined"
      />
    );
  };

  if (loading) {
    return (
      <Box display="flex" justifyContent="center" alignItems="center" minHeight="400px">
        <CircularProgress />
      </Box>
    );
  }

  if (error) {
    return (
      <Alert severity="error" sx={{ m: 2 }}>
        {error}
      </Alert>
    );
  }

  return (
    <Box sx={{ p: 3 }}>
      {/* Header */}
      <Box sx={{ mb: 4 }}>
        <Typography 
          variant="h4" 
          sx={{ 
            fontWeight: 800,
            background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
            backgroundClip: 'text',
            WebkitBackgroundClip: 'text',
            color: 'transparent',
            mb: 1,
          }}
        >
          Documents
        </Typography>
        <Typography variant="body1" color="text.secondary">
          Manage and explore your document library
        </Typography>
      </Box>

      {/* Toolbar */}
      <Box sx={{ 
        mb: 3, 
        display: 'flex', 
        gap: 2, 
        alignItems: 'center',
        flexWrap: 'wrap',
      }}>
        {/* Search */}
        <TextField
          placeholder="Search documents..."
          variant="outlined"
          size="small"
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          InputProps={{
            startAdornment: (
              <InputAdornment position="start">
                <SearchIcon color="action" />
              </InputAdornment>
            ),
          }}
          sx={{ minWidth: 300, flexGrow: 1 }}
        />

        {/* View Toggle */}
        <ToggleButtonGroup
          value={viewMode}
          exclusive
          onChange={handleViewModeChange}
          size="small"
        >
          <ToggleButton value="grid">
            <GridViewIcon />
          </ToggleButton>
          <ToggleButton value="list">
            <ListViewIcon />
          </ToggleButton>
        </ToggleButtonGroup>

        {/* Selection Mode Toggle */}
        <Button
          variant={selectionMode ? "contained" : "outlined"}
          startIcon={selectionMode ? <CloseIcon /> : <CheckBoxOutlineBlankIcon />}
          onClick={handleToggleSelectionMode}
          size="small"
          color={selectionMode ? "secondary" : "primary"}
        >
          {selectionMode ? 'Cancel' : 'Select'}
        </Button>

        {/* OCR Filter */}
        <FormControl size="small" sx={{ minWidth: 120 }}>
          <InputLabel>OCR Status</InputLabel>
          <Select
            value={ocrFilter}
            label="OCR Status"
            onChange={handleOcrFilterChange}
          >
            <MenuItem value="">All</MenuItem>
            <MenuItem value="completed">Completed</MenuItem>
            <MenuItem value="processing">Processing</MenuItem>
            <MenuItem value="failed">Failed</MenuItem>
            <MenuItem value="pending">Pending</MenuItem>
          </Select>
        </FormControl>

        {/* Sort Button */}
        <Button
          variant="outlined"
          startIcon={<SortIcon />}
          onClick={handleSortMenuClick}
          size="small"
        >
          Sort
        </Button>
      </Box>

      {/* Selection Toolbar */}
      {selectionMode && (
        <Box sx={{ 
          mb: 2, 
          p: 2, 
          bgcolor: 'primary.light',
          borderRadius: 1,
          display: 'flex',
          alignItems: 'center',
          gap: 2,
          color: 'primary.contrastText'
        }}>
          <Typography variant="body2" sx={{ flexGrow: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
            {selectedDocuments.size > 999 ? `${Math.floor(selectedDocuments.size/1000)}K` : selectedDocuments.size} of {sortedDocuments.length > 999 ? `${Math.floor(sortedDocuments.length/1000)}K` : sortedDocuments.length} documents selected
          </Typography>
          <Button
            variant="text"
            startIcon={selectedDocuments.size === sortedDocuments.length ? <CheckBoxIcon /> : <CheckBoxOutlineBlankIcon />}
            onClick={handleSelectAll}
            size="small"
            sx={{ color: 'primary.contrastText' }}
          >
            {selectedDocuments.size === sortedDocuments.length ? 'Deselect All' : 'Select All'}
          </Button>
          <Button
            variant="contained"
            startIcon={<DeleteIcon />}
            onClick={handleBulkDelete}
            disabled={selectedDocuments.size === 0}
            size="small"
            color="error"
          >
            Delete Selected ({selectedDocuments.size > 999 ? `${Math.floor(selectedDocuments.size/1000)}K` : selectedDocuments.size})
          </Button>
        </Box>
      )}

      {/* Sort Menu */}
      <Menu
        anchorEl={sortMenuAnchor}
        open={Boolean(sortMenuAnchor)}
        onClose={handleSortMenuClose}
      >
        <MenuItem onClick={() => handleSortChange('created_at', 'desc')}>
          <ListItemIcon><DateIcon fontSize="small" /></ListItemIcon>
          <ListItemText>Newest First</ListItemText>
        </MenuItem>
        <MenuItem onClick={() => handleSortChange('created_at', 'asc')}>
          <ListItemIcon><DateIcon fontSize="small" /></ListItemIcon>
          <ListItemText>Oldest First</ListItemText>
        </MenuItem>
        <MenuItem onClick={() => handleSortChange('original_filename', 'asc')}>
          <ListItemIcon><TextIcon fontSize="small" /></ListItemIcon>
          <ListItemText>Name A-Z</ListItemText>
        </MenuItem>
        <MenuItem onClick={() => handleSortChange('original_filename', 'desc')}>
          <ListItemIcon><TextIcon fontSize="small" /></ListItemIcon>
          <ListItemText>Name Z-A</ListItemText>
        </MenuItem>
        <MenuItem onClick={() => handleSortChange('file_size', 'desc')}>
          <ListItemIcon><SizeIcon fontSize="small" /></ListItemIcon>
          <ListItemText>Largest First</ListItemText>
        </MenuItem>
        <MenuItem onClick={() => handleSortChange('file_size', 'asc')}>
          <ListItemIcon><SizeIcon fontSize="small" /></ListItemIcon>
          <ListItemText>Smallest First</ListItemText>
        </MenuItem>
      </Menu>

      {/* Document Menu */}
      <Menu
        anchorEl={docMenuAnchor}
        open={Boolean(docMenuAnchor)}
        onClose={handleDocMenuClose}
      >
        <MenuItem onClick={() => { 
          if (selectedDoc) handleDownload(selectedDoc); 
          handleDocMenuClose(); 
        }}>
          <ListItemIcon><DownloadIcon fontSize="small" /></ListItemIcon>
          <ListItemText>Download</ListItemText>
        </MenuItem>
        <MenuItem onClick={() => { 
          if (selectedDoc) navigate(`/documents/${selectedDoc.id}`); 
          handleDocMenuClose(); 
        }}>
          <ListItemIcon><ViewIcon fontSize="small" /></ListItemIcon>
          <ListItemText>View Details</ListItemText>
        </MenuItem>
        <MenuItem onClick={() => { 
          if (selectedDoc) handleEditDocumentLabels(selectedDoc); 
          handleDocMenuClose(); 
        }}>
          <ListItemIcon><EditIcon fontSize="small" /></ListItemIcon>
          <ListItemText>Edit Labels</ListItemText>
        </MenuItem>
        <Divider />
        <MenuItem onClick={() => { 
          if (selectedDoc) handleRetryOcr(selectedDoc); 
        }} disabled={retryingDocument === selectedDoc?.id}>
          <ListItemIcon>
            {retryingDocument === selectedDoc?.id ? (
              <CircularProgress size={16} />
            ) : (
              <RefreshIcon fontSize="small" />
            )}
          </ListItemIcon>
          <ListItemText>
            {retryingDocument === selectedDoc?.id ? 'Retrying OCR...' : 'Retry OCR'}
          </ListItemText>
        </MenuItem>
        <MenuItem onClick={() => { 
          if (selectedDoc) handleShowRetryHistory(selectedDoc.id); 
        }}>
          <ListItemIcon><HistoryIcon fontSize="small" /></ListItemIcon>
          <ListItemText>Retry History</ListItemText>
        </MenuItem>
        <Divider />
        <MenuItem onClick={() => { 
          if (selectedDoc) handleDeleteClick(selectedDoc); 
        }}>
          <ListItemIcon><DeleteIcon fontSize="small" color="error" /></ListItemIcon>
          <ListItemText>Delete</ListItemText>
        </MenuItem>
      </Menu>

      {/* Documents Grid/List */}
      {sortedDocuments.length === 0 ? (
        <Box 
          sx={{ 
            textAlign: 'center', 
            py: 8,
            background: 'linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%)',
            borderRadius: 2,
            border: '1px dashed',
            borderColor: 'primary.main',
          }}
        >
          <Typography variant="h6" color="text.secondary" gutterBottom>
            No documents found
          </Typography>
          <Typography variant="body2" color="text.secondary">
            {searchQuery ? 'Try adjusting your search terms' : 'Upload your first document to get started'}
          </Typography>
        </Box>
      ) : (
        <Grid container spacing={viewMode === 'grid' ? 3 : 1}>
          {sortedDocuments.map((doc) => (
            <Grid 
              item 
              xs={12} 
              sm={viewMode === 'grid' ? 6 : 12} 
              md={viewMode === 'grid' ? 4 : 12} 
              lg={viewMode === 'grid' ? 3 : 12}
              key={doc.id}
            >
              <Card 
                sx={{ 
                  height: '100%',
                  display: 'flex',
                  flexDirection: viewMode === 'list' ? 'row' : 'column',
                  transition: 'all 0.2s ease-in-out',
                  cursor: 'pointer',
                  position: 'relative',
                  '&:hover': {
                    transform: 'translateY(-4px)',
                    boxShadow: (theme) => theme.shadows[4],
                  },
                  ...(selectionMode && selectedDocuments.has(doc.id) && {
                    boxShadow: (theme) => `0 0 0 2px ${theme.palette.primary.main}`,
                    bgcolor: 'primary.light',
                  }),
                }}
                onClick={(e) => {
                  if (selectionMode) {
                    e.stopPropagation();
                    handleDocumentSelect(doc.id, !selectedDocuments.has(doc.id));
                  } else {
                    navigate(`/documents/${doc.id}`);
                  }
                }}
              >
                {/* Selection checkbox */}
                {selectionMode && (
                  <Box
                    sx={{
                      position: 'absolute',
                      top: 8,
                      right: 8,
                      zIndex: 1,
                      bgcolor: 'background.paper',
                      borderRadius: '50%',
                      boxShadow: 1,
                    }}
                    onClick={(e) => {
                      e.stopPropagation();
                      handleDocumentSelect(doc.id, !selectedDocuments.has(doc.id));
                    }}
                  >
                    <Checkbox
                      checked={selectedDocuments.has(doc.id)}
                      size="small"
                      color="primary"
                    />
                  </Box>
                )}

                {viewMode === 'grid' && (
                  <Box
                    sx={{
                      height: 120,
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      background: 'linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%)',
                    }}
                  >
                    <DocumentThumbnail
                      documentId={doc.id}
                      mimeType={doc.mime_type}
                      size="large"
                    />
                  </Box>
                )}
                
                <CardContent sx={{ flexGrow: 1, pb: 1 }}>
                  <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1 }}>
                    {viewMode === 'list' && (
                      <Box sx={{ mr: 1, mt: 0.5 }}>
                        <DocumentThumbnail
                          documentId={doc.id}
                          mimeType={doc.mime_type}
                          size="small"
                        />
                      </Box>
                    )}
                    
                    <Box sx={{ flexGrow: 1, minWidth: 0 }}>
                      <Typography 
                        variant="h6" 
                        sx={{ 
                          fontSize: '1rem',
                          fontWeight: 600,
                          mb: 1,
                          overflow: 'hidden',
                          textOverflow: 'ellipsis',
                          whiteSpace: 'nowrap',
                        }}
                        title={doc.original_filename}
                      >
                        {doc.original_filename}
                      </Typography>
                      
                      <Stack direction="row" spacing={1} sx={{ mb: 1, flexWrap: 'wrap', gap: 0.5 }}>
                        <Chip 
                          label={formatFileSize(doc.file_size)} 
                          size="small" 
                          variant="outlined"
                        />
                        {getOcrStatusChip(doc)}
                      </Stack>
                      
                      {doc.tags.length > 0 && (
                        <Stack direction="row" spacing={0.5} sx={{ mb: 1, flexWrap: 'wrap' }}>
                          {doc.tags.slice(0, 3).map((tag, index) => (
                            <Chip 
                              key={index}
                              label={tag} 
                              size="small" 
                              color="primary"
                              variant="outlined"
                              sx={{ 
                                fontSize: '0.7rem', 
                                height: '20px',
                                maxWidth: '120px',
                                '& .MuiChip-label': { 
                                  overflow: 'hidden', 
                                  textOverflow: 'ellipsis',
                                  whiteSpace: 'nowrap'
                                }
                              }}
                            />
                          ))}
                          {doc.tags.length > 3 && (
                            <Chip 
                              label={`+${doc.tags.length - 3}`}
                              size="small" 
                              variant="outlined"
                              sx={{ fontSize: '0.7rem', height: '20px' }}
                            />
                          )}
                        </Stack>
                      )}
                      
                      {doc.labels && doc.labels.length > 0 && (
                        <Stack direction="row" spacing={0.5} sx={{ mb: 1, flexWrap: 'wrap' }}>
                          {doc.labels.slice(0, 3).map((label) => (
                            <Label
                              key={label.id}
                              label={label}
                              size="small"
                              variant="filled"
                            />
                          ))}
                          {doc.labels.length > 3 && (
                            <Chip 
                              label={`+${doc.labels.length - 3}`}
                              size="small" 
                              variant="outlined"
                              sx={{ fontSize: '0.7rem', height: '20px' }}
                            />
                          )}
                        </Stack>
                      )}
                      
                      <Typography variant="caption" color="text.secondary">
                        {formatDate(doc.created_at)}
                      </Typography>
                    </Box>
                    
                    {!selectionMode && (
                      <IconButton
                        size="small"
                        onClick={(e) => {
                          e.stopPropagation();
                          handleDocMenuClick(e, doc);
                        }}
                      >
                        <MoreIcon />
                      </IconButton>
                    )}
                  </Box>
                </CardContent>
                
                {viewMode === 'grid' && (
                  <CardActions sx={{ pt: 0 }}>
                    <Button 
                      size="small" 
                      startIcon={<DownloadIcon />}
                      onClick={(e) => {
                        e.stopPropagation();
                        handleDownload(doc);
                      }}
                      fullWidth
                    >
                      Download
                    </Button>
                  </CardActions>
                )}
              </Card>
            </Grid>
          ))}
        </Grid>
      )}

      {/* Label Edit Dialog */}
      <Dialog open={labelEditDialogOpen} onClose={() => setLabelEditDialogOpen(false)} maxWidth="sm" fullWidth>
        <DialogTitle>Edit Document Labels</DialogTitle>
        <DialogContent>
          <Box sx={{ pt: 2 }}>
            <LabelSelector
              selectedLabels={editingDocumentLabels}
              availableLabels={availableLabels}
              onLabelsChange={setEditingDocumentLabels}
              onCreateLabel={handleCreateLabel}
              placeholder="Select labels for this document..."
              size="medium"
              disabled={labelsLoading}
            />
          </Box>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setLabelEditDialogOpen(false)}>Cancel</Button>
          <Button onClick={handleSaveDocumentLabels} variant="contained">Save</Button>
        </DialogActions>
      </Dialog>

      {/* Delete Confirmation Dialog */}
      <Dialog open={deleteDialogOpen} onClose={handleDeleteCancel} maxWidth="sm">
        <DialogTitle>Delete Document</DialogTitle>
        <DialogContent>
          <Typography>
            Are you sure you want to delete "{documentToDelete?.original_filename}"?
          </Typography>
          <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
            This action cannot be undone. The document file and all associated data will be permanently removed.
          </Typography>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleDeleteCancel} disabled={deleteLoading}>
            Cancel
          </Button>
          <Button 
            onClick={handleDeleteConfirm} 
            color="error" 
            variant="contained"
            disabled={deleteLoading}
            startIcon={deleteLoading ? <CircularProgress size={16} color="inherit" /> : <DeleteIcon />}
          >
            {deleteLoading ? 'Deleting...' : 'Delete'}
          </Button>
        </DialogActions>
      </Dialog>

      {/* Bulk Delete Confirmation Dialog */}
      <Dialog open={bulkDeleteDialogOpen} onClose={handleBulkDeleteCancel} maxWidth="sm">
        <DialogTitle>Delete Multiple Documents</DialogTitle>
        <DialogContent>
          <Typography gutterBottom>
            Are you sure you want to delete {selectedDocuments.size} selected document{selectedDocuments.size !== 1 ? 's' : ''}?
          </Typography>
          <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
            This action cannot be undone. All selected documents and their associated data will be permanently removed.
          </Typography>
          {selectedDocuments.size > 0 && (
            <Box sx={{ mt: 2, maxHeight: 200, overflow: 'auto' }}>
              <Typography variant="subtitle2" gutterBottom>
                Documents to be deleted:
              </Typography>
              {Array.from(selectedDocuments).slice(0, 10).map(docId => {
                const doc = documents.find(d => d.id === docId);
                return doc ? (
                  <Typography key={docId} variant="body2" sx={{ pl: 1 }}>
                    • {doc.original_filename}
                  </Typography>
                ) : null;
              })}
              {selectedDocuments.size > 10 && (
                <Typography variant="body2" sx={{ pl: 1, fontStyle: 'italic' }}>
                  ... and {selectedDocuments.size - 10} more
                </Typography>
              )}
            </Box>
          )}
        </DialogContent>
        <DialogActions>
          <Button onClick={handleBulkDeleteCancel} disabled={bulkDeleteLoading}>
            Cancel
          </Button>
          <Button 
            onClick={handleBulkDeleteConfirm} 
            color="error" 
            variant="contained"
            disabled={bulkDeleteLoading}
            startIcon={bulkDeleteLoading ? <CircularProgress size={16} color="inherit" /> : <DeleteIcon />}
          >
            {bulkDeleteLoading ? 'Deleting...' : `Delete ${selectedDocuments.size} Document${selectedDocuments.size !== 1 ? 's' : ''}`}
          </Button>
        </DialogActions>
      </Dialog>

      {/* Results count and pagination */}
      <Box sx={{ mt: 3 }}>
        <Box sx={{ textAlign: 'center', mb: 2 }}>
          <Typography variant="body2" color="text.secondary">
            Showing {pagination.offset + 1}-{Math.min(pagination.offset + pagination.limit, pagination.total)} of {pagination.total} documents
            {ocrFilter && ` with OCR status: ${ocrFilter}`}
            {searchQuery && ` matching "${searchQuery}"`}
          </Typography>
        </Box>
        
        {pagination.total > pagination.limit && (
          <Box sx={{ display: 'flex', justifyContent: 'center' }}>
            <Pagination
              count={Math.ceil(pagination.total / pagination.limit)}
              page={Math.floor(pagination.offset / pagination.limit) + 1}
              onChange={handlePageChange}
              color="primary"
              size="large"
              showFirstButton
              showLastButton
            />
          </Box>
        )}
      </Box>

      {/* Retry History Modal */}
      <RetryHistoryModal
        open={retryHistoryModalOpen}
        onClose={() => setRetryHistoryModalOpen(false)}
        documentId={selectedDocumentForHistory || ''}
        documentName={selectedDocumentForHistory ? 
          documents.find(d => d.id === selectedDocumentForHistory)?.original_filename : undefined}
      />
    </Box>
  );
};

export default DocumentsPage;