KnowledgeBase/web/components/views/KnowledgeBaseView.tsx

import React, { useCallback, useEffect, useState, useMemo } from 'react'
import IndexingModalWithMode from '../../components/IndexingModalWithMode'
import { PDFPreview } from '../../components/PDFPreview'
import { DragDropUpload } from '../../components/DragDropUpload'
import { GlobalDragDropOverlay } from '../../components/GlobalDragDropOverlay'
import {
    AppSettings,
    DEFAULT_MODELS,
    DEFAULT_SETTINGS,
    IndexingConfig,
    KnowledgeFile,
    ModelConfig,
    ModelType,
    RawFile,
    KnowledgeGroup,
} from '../../types'
import { readFile, formatBytes } from '../../utils/fileUtils'
import { useLanguage } from '../../contexts/LanguageContext'
import { useToast } from '../../contexts/ToastContext'
import { userSettingService } from '../../services/userSettingService'
import { uploadService } from '../../services/uploadService'
import { knowledgeBaseService } from '../../services/knowledgeBaseService'
import { knowledgeGroupService } from '../../services/knowledgeGroupService'
import { useConfirm } from '../../contexts/ConfirmContext'
import { ChunkInfoDrawer } from '../../components/ChunkInfoDrawer'
import {
    Search,
    Filter,
    Plus,
    FileText,
    Image as ImageIcon,
    FileType,
    CheckCircle2,
    CircleDashed,
    RefreshCw,
    Eye,
    Trash2,
    RotateCcw,
    Settings,
    MoreVertical,
    Folder,
    Hash,
    ChevronRight,
    Tag,
    Layers,
    MoreHorizontal
} from 'lucide-react'
import { motion, AnimatePresence } from 'framer-motion'
import { KB_ALLOWED_EXTENSIONS, IMAGE_MIME_TYPES, isExtensionAllowed, isFormatSupportedForPreview } from '../../constants/fileSupport'

interface KnowledgeBaseViewProps {
    authToken: string;
    onLogout: () => void;
    modelConfigs?: ModelConfig[];
    onNavigate: (view: any) => void;
    isAdmin?: boolean;
}

export const KnowledgeBaseView: React.FC<KnowledgeBaseViewProps> = (props) => {
    const { authToken, modelConfigs = DEFAULT_MODELS, isAdmin = false } = props;
    const { showError, showWarning, showSuccess } = useToast()
    const { confirm } = useConfirm()
    const { t } = useLanguage()

    // Data State
    const [files, setFiles] = useState<KnowledgeFile[]>([])
    const [groups, setGroups] = useState<KnowledgeGroup[]>([])
    const [settings, setSettings] = useState<AppSettings>(DEFAULT_SETTINGS)
    const [isLoadingSettings, setIsLoadingSettings] = useState(true)
    const [isLoadingFiles, setIsLoadingFiles] = useState(true)

    // UI State
    const [pdfPreview, setPdfPreview] = useState<{ fileId: string; fileName: string } | null>(null)
    const [isIndexingModalOpen, setIsIndexingModalOpen] = useState(false)
    const [pendingFiles, setPendingFiles] = useState<RawFile[]>([])
    const [fileInputRef] = useState<React.RefObject<HTMLInputElement>>(React.createRef())
    const [shouldOpenModal, setShouldOpenModal] = useState(false)

    // Filter & Pagination State
    const [filterName, setFilterName] = useState('')
    const [filterGroup, setFilterGroup] = useState('all')
    const [filterStatus, setFilterStatus] = useState<'all' | 'ready' | 'indexing' | 'failed'>('all')
    const [currentPage, setCurrentPage] = useState(1)
    const pageSize = 12 // Adjusted for card grid
    const [chunkDrawer, setChunkDrawer] = useState<{ isOpen: boolean; fileId: string; fileName: string } | null>(null)

    const [isAutoRefreshEnabled, setIsAutoRefreshEnabled] = useState(true)
    const [autoRefreshInterval] = useState<number>(5000)

    // Sidebar State
    const [selectedSidebarFilter, setSelectedSidebarFilter] = useState<{ type: 'all' | 'uncategorized' | 'group'; groupId?: string }>({ type: 'all' })
    const [isGroupModalOpen, setIsGroupModalOpen] = useState(false)
    const [editingGroup, setEditingGroup] = useState<KnowledgeGroup | null>(null)
    const [newGroupName, setNewGroupName] = useState('')

    const fetchAndSetSettings = useCallback(async () => {
        if (!authToken) return
        try {
            const settingsData = isAdmin
                ? await userSettingService.getGlobal(authToken)
                : await userSettingService.get(authToken);
            setSettings({ ...DEFAULT_SETTINGS, ...settingsData })
        } catch (error) {
            console.error('Failed to fetch settings:', error)
        } finally {
            setIsLoadingSettings(false)
        }
    }, [authToken, isAdmin])

    const fetchAndSetFiles = useCallback(async () => {
        if (!authToken) return
        try {
            const remoteFiles = await knowledgeBaseService.getAll(authToken)
            setFiles(remoteFiles)
        } catch (error) {
            console.error('Failed to fetch files:', error)
        } finally {
            setIsLoadingFiles(false)
        }
    }, [authToken])

    const fetchAndSetGroups = useCallback(async () => {
        if (!authToken) return
        try {
            const remoteGroups = await knowledgeGroupService.getGroups()
            setGroups(remoteGroups)
        } catch (error) {
            console.error('Failed to fetch groups:', error)
        }
    }, [authToken])

    useEffect(() => {
        if (authToken) {
            fetchAndSetSettings()
            fetchAndSetFiles()
            fetchAndSetGroups()
        }
    }, [authToken, fetchAndSetSettings, fetchAndSetFiles, fetchAndSetGroups])

    useEffect(() => {
        if (shouldOpenModal && pendingFiles.length > 0) {
            setIsIndexingModalOpen(true);
            setShouldOpenModal(false);
        }
    }, [shouldOpenModal, pendingFiles.length]);

    const handleFileUpload = async (fileList: FileList) => {
        if (!authToken) {
            showWarning(t('loginRequired'))
            return
        }

        const MAX_FILE_SIZE = 104857600;
        const rawFiles: RawFile[] = []
        const errors: string[] = []

        const filesArray = Array.from(fileList);
        for (const file of filesArray) {
            const extension = file.name.split('.').pop() || ''
            if (!isExtensionAllowed(extension, 'kb')) {
                errors.push(t('unsupportedFileType', file.name, extension))
                continue
            }
            if (file.size > MAX_FILE_SIZE) {
                errors.push(t('fileSizeLimitExceeded', file.name, formatBytes(file.size), 100))
                continue;
            }
            try {
                const rawFile = await readFile(file)
                rawFiles.push(rawFile)
            } catch (error) {
                errors.push(`${file.name} - ${t('readingFailed')}`);
            }
        }

        if (errors.length > 0) showError(`${t('uploadErrors')}:\n${errors.join('\n')}`);
        if (rawFiles.length === 0) return;

        setPendingFiles(rawFiles);
        setShouldOpenModal(true);
    }

    const handleConfirmIndexing = async (config: IndexingConfig) => {
        if (!authToken) return
        let hasSuccess = false

        for (const rawFile of pendingFiles) {
            try {
                const indexingConfig = {
                    ...config,
                    groupIds: selectedSidebarFilter.type === 'group' ? [selectedSidebarFilter.groupId!] : []
                };
                await uploadService.uploadFileWithConfig(rawFile.file, indexingConfig, authToken)
                hasSuccess = true
            } catch (error: any) {
                showError(`${t('uploadFailed')}: ${rawFile.name} - ${error.message}`)
            }
        }
        if (hasSuccess) await fetchAndSetFiles()
        setPendingFiles([])
        setIsIndexingModalOpen(false)
    }

    const handleRemoveFile = async (id: string) => {
        if (!(await confirm(t('confirmDeleteFile')))) return
        if (!authToken) return
        try {
            await knowledgeBaseService.deleteFile(id, authToken)
            setFiles(prev => prev.filter(f => f.id !== id))
            showSuccess(t('fileDeleted'))
        } catch (error: any) {
            showError(`${t('deleteFailed')}: ` + error.message)
        }
    }

    const handleToggleFileCategory = async (file: KnowledgeFile, groupId: string) => {
        try {
            const currentGroupIds = file.groups?.map(g => g.id) || [];
            const isAssigned = currentGroupIds.includes(groupId);
            
            let newGroupIds: string[];
            if (isAssigned) {
                newGroupIds = currentGroupIds.filter(id => id !== groupId);
            } else {
                newGroupIds = [...currentGroupIds, groupId];
            }
            
            await knowledgeGroupService.addFileToGroups(file.id, newGroupIds);
            await fetchAndSetFiles();
        } catch (error: any) {
            console.error('Failed to toggle category:', error);
            showError(t('actionFailed') + ': ' + error.message);
        }
    }

    const handleClearAll = async () => {
        if (!(await confirm(t('confirmClearKB')))) return
        if (!authToken) return
        try {
            await knowledgeBaseService.clearAll(authToken)
            setFiles([])
            showSuccess(t('kbCleared'))
        } catch (error: any) {
            showError(`${t('clearFailed')}: ` + error.message)
        }
    }


    const filteredFiles = useMemo(() => {
        return files.filter(file => {
            const matchName = file.name.toLowerCase().includes(filterName.toLowerCase());
            
            // Updated filtering logic for sidebar
            let matchGroup = true;
            if (selectedSidebarFilter.type === 'uncategorized') {
                matchGroup = !file.groups || file.groups.length === 0;
            } else if (selectedSidebarFilter.type === 'group') {
                matchGroup = file.groups?.some(g => g.id === selectedSidebarFilter.groupId) || false;
            }
            
            const matchStatus = filterStatus === 'all' ||
                (filterStatus === 'ready' && (file.status === 'ready' || file.status === 'vectorized')) ||
                (filterStatus === 'indexing' && (file.status === 'indexing' || file.status === 'pending' || file.status === 'extracted')) ||
                (filterStatus === 'failed' && (file.status === 'failed' || file.status === 'error'));
            return matchName && matchGroup && matchStatus;
        });
    }, [files, filterName, selectedSidebarFilter, filterStatus]);

    const totalPages = Math.ceil(filteredFiles.length / pageSize);
    const paginatedFiles = useMemo(() => {
        const start = (currentPage - 1) * pageSize;
        return filteredFiles.slice(start, start + pageSize);
    }, [filteredFiles, currentPage, pageSize]);

    useEffect(() => {
        setCurrentPage(1);
    }, [filterName, filterGroup, filterStatus]);

    useEffect(() => {
        let intervalId: NodeJS.Timeout | null = null;
        const hasIndexingFiles = files.some(file => ['pending', 'indexing', 'extracted', 'vectorized'].includes(file.status));

        if (isAutoRefreshEnabled && hasIndexingFiles) {
            intervalId = setInterval(() => {
                fetchAndSetFiles();
            }, autoRefreshInterval);
        }

        return () => { if (intervalId) clearInterval(intervalId); };
    }, [isAutoRefreshEnabled, files, autoRefreshInterval, fetchAndSetFiles]);

    const getFileIcon = (file: KnowledgeFile) => {
        if (file.type.startsWith('image/')) return <ImageIcon size={20} className="text-slate-500" />;
        if (file.type === 'application/pdf') return <FileType size={20} className="text-blue-500" />;
        return <FileText size={20} className="text-blue-500" />;
    };

    const handleCreateOrUpdateGroup = async () => {
        if (!newGroupName.trim()) return
        try {
            if (editingGroup) {
                await knowledgeGroupService.updateGroup(editingGroup.id, { name: newGroupName })
                showSuccess(t('groupUpdated'))
            } else {
                await knowledgeGroupService.createGroup({ name: newGroupName })
                showSuccess(t('groupCreated'))
            }
            fetchAndSetGroups()
            setIsGroupModalOpen(false)
            setEditingGroup(null)
            setNewGroupName('')
        } catch (error: any) {
            showError(t('actionFailed') + ': ' + error.message)
        }
    }

    const handleDeleteGroup = async (group: KnowledgeGroup) => {
        if (!(await confirm(t('confirmDeleteGroup')))) return
        try {
            await knowledgeGroupService.deleteGroup(group.id)
            showSuccess(t('groupDeleted'))
            if (selectedSidebarFilter.groupId === group.id) {
                setSelectedSidebarFilter({ type: 'all' })
            }
            fetchAndSetGroups()
        } catch (error: any) {
            showError(t('deleteFailed') + ': ' + error.message)
        }
    }

    if (isLoadingSettings) {
        return (
            <div className='flex items-center justify-center min-h-[400px] w-full'>
                <div className='text-blue-600 animate-spin rounded-full h-8 w-8 border-2 border-t-transparent border-blue-600'></div>
            </div>
        )
    }

    return (
        <div className='flex flex-row h-full w-full bg-slate-50 overflow-hidden'>
            {/* Sidebar */}
            <div className="w-64 bg-white border-r border-slate-200 flex flex-col shrink-0">
                <div className="p-6">
                    <h2 className="text-sm font-semibold text-slate-400 uppercase tracking-wider mb-4">Catalog</h2>
                    <nav className="space-y-1">
                        <button
                            onClick={() => setSelectedSidebarFilter({ type: 'all' })}
                            className={`w-full flex items-center justify-between px-3 py-2 rounded-lg text-sm font-medium transition-colors ${selectedSidebarFilter.type === 'all' ? 'bg-blue-50 text-blue-700' : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'}`}
                        >
                            <div className="flex items-center gap-2">
                                <Layers size={16} />
                                <span>All Documents</span>
                            </div>
                            <span className="text-xs bg-slate-100 text-slate-500 px-1.5 py-0.5 rounded-full">{files.length}</span>
                        </button>
                        <button
                            onClick={() => setSelectedSidebarFilter({ type: 'uncategorized' })}
                            className={`w-full flex items-center justify-between px-3 py-2 rounded-lg text-sm font-medium transition-colors ${selectedSidebarFilter.type === 'uncategorized' ? 'bg-blue-50 text-blue-700' : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'}`}
                        >
                            <div className="flex items-center gap-2">
                                <FileText size={16} />
                                <span>Uncategorized</span>
                            </div>
                            <span className="text-xs bg-slate-100 text-slate-500 px-1.5 py-0.5 rounded-full">
                                {files.filter(f => !f.groups || f.groups.length === 0).length}
                            </span>
                        </button>
                    </nav>

                    <div className="mt-8 flex items-center justify-between mb-4">
                        <h2 className="text-sm font-semibold text-slate-400 uppercase tracking-wider">Categories</h2>
                        {isAdmin && (
                            <button
                                onClick={() => { setEditingGroup(null); setNewGroupName(''); setIsGroupModalOpen(true); }}
                                className="p-1 text-slate-400 hover:text-blue-600 hover:bg-blue-50 rounded transition-all"
                            >
                                <Plus size={14} />
                            </button>
                        )}
                    </div>

                    <div className="space-y-1 overflow-y-auto max-h-[calc(100vh-320px)] pr-1">
                        {groups.map(group => (
                            <div key={group.id} className="group flex items-center justify-between group">
                                <button
                                    onClick={() => setSelectedSidebarFilter({ type: 'group', groupId: group.id })}
                                    className={`flex-1 flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors text-left ${selectedSidebarFilter.groupId === group.id ? 'bg-blue-50 text-blue-700' : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'}`}
                                >
                                    <Hash size={16} className={selectedSidebarFilter.groupId === group.id ? 'text-blue-500' : 'text-slate-400'} />
                                    <span className="truncate">{group.name}</span>
                                </button>
                                {isAdmin && (
                                    <div className="opacity-0 group-hover:opacity-100 flex items-center gap-0.5 pr-2">
                                        <button
                                            onClick={() => { setEditingGroup(group); setNewGroupName(group.name); setIsGroupModalOpen(true); }}
                                            className="p-1 text-slate-400 hover:text-blue-600"
                                        >
                                            <Settings size={12} />
                                        </button>
                                        <button
                                            onClick={() => handleDeleteGroup(group)}
                                            className="p-1 text-slate-400 hover:text-red-500"
                                        >
                                            <Trash2 size={12} />
                                        </button>
                                    </div>
                                )}
                            </div>
                        ))}
                    </div>
                </div>
            </div>

            {/* Main Content Area */}
            <div className='flex flex-col flex-1 h-full w-full bg-transparent overflow-hidden'>
                <input
                    type="file"
                    ref={fileInputRef}
                    onChange={(e) => {
                        if (e.target.files && e.target.files.length > 0) handleFileUpload(e.target.files)
                    }}
                    multiple
                    className="hidden"
                    accept={KB_ALLOWED_EXTENSIONS.map(ext => `.${ext}`).join(',') + ',' + IMAGE_MIME_TYPES.join(',')}
                />

                <GlobalDragDropOverlay onFilesSelected={handleFileUpload} isAdmin={isAdmin} />

                {/* Header Section */}
                <div className="px-8 pt-8 pb-6 flex items-start justify-between shrink-0">
                    <div>
                        <h1 className="text-2xl font-bold text-slate-900 leading-tight">
                            {selectedSidebarFilter.type === 'all' ? 'Knowledge Base' :
                             selectedSidebarFilter.type === 'uncategorized' ? 'Uncategorized Files' :
                             groups.find(g => g.id === selectedSidebarFilter.groupId)?.name || 'Category'}
                        </h1>
                        <p className="text-[15px] text-slate-500 mt-1">
                            {selectedSidebarFilter.type === 'group' 
                                ? groups.find(g => g.id === selectedSidebarFilter.groupId)?.description || 'Documents in this category.'
                                : 'Manage your documents and data sources.'}
                        </p>
                    </div>
                    <div className="flex items-center gap-3">
                        {isAdmin && (
                            <button
                                onClick={() => fileInputRef.current?.click()}
                                className="flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg shadow-sm shadow-blue-100 transition-all font-semibold text-sm active:scale-95"
                            >
                                <Plus size={18} />
                                Add Document
                            </button>
                        )}
                    </div>
                </div>

                {/* Filter Bar */}
                <div className="px-8 pb-6 flex items-center justify-between gap-4 shrink-0">
                    <div className="flex items-center gap-3 flex-1">
                        <div className="relative max-w-xs w-full">
                            <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={16} />
                            <input
                                type="text"
                                placeholder="Filter by name..."
                                value={filterName}
                                onChange={(e) => setFilterName(e.target.value)}
                                className="w-full h-9 pl-9 pr-4 bg-white border border-slate-200 rounded-lg text-sm transition-all focus:ring-1 focus:ring-blue-500 focus:border-blue-500 outline-none"
                            />
                        </div>
                    </div>
                    <div className="flex items-center gap-3">
                        <button
                            onClick={() => fetchAndSetFiles()}
                            className="p-2 text-slate-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-all"
                            title="Refresh"
                        >
                            <RefreshCw size={18} className={isAutoRefreshEnabled ? 'animate-spin' : ''} />
                        </button>
                    </div>
                </div>

                {/* Card Grid */}
                <div className="flex-1 overflow-y-auto px-8 pb-8">
                    {isLoadingFiles ? (
                        <div className="flex flex-col items-center justify-center py-20 gap-4">
                            <div className="w-10 h-10 border-2 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
                        </div>
                    ) : paginatedFiles.length > 0 ? (
                        <div className="flex flex-col gap-3">
                            <AnimatePresence mode="popLayout">
                                {paginatedFiles.map((file) => (
                                    <motion.div
                                        key={file.id}
                                        layout
                                        initial={{ opacity: 0, y: 10 }}
                                        animate={{ opacity: 1, y: 0 }}
                                        exit={{ opacity: 0, scale: 0.95 }}
                                        className="bg-white rounded-xl border border-slate-200/80 p-4 shadow-sm hover:shadow-md transition-all group relative flex items-center gap-4"
                                    >
                                        {/* Icon */}
                                        <div className="p-2.5 bg-blue-50 rounded-lg text-blue-600 shadow-sm border border-blue-100/30 shrink-0">
                                            {getFileIcon(file)}
                                        </div>

                                        {/* Name & Desc */}
                                        <div className="flex-1 min-w-0">
                                            <div className="flex items-center gap-3 mb-1">
                                                <h3
                                                    onClick={() => setChunkDrawer({ isOpen: true, fileId: file.id, fileName: file.name })}
                                                    className="font-bold text-slate-900 text-[15px] cursor-pointer hover:text-blue-600 transition-colors truncate"
                                                >
                                                    {file.name}
                                                </h3>
                                                <span className="px-2 py-0.5 bg-slate-100 text-slate-500 rounded text-[10px] font-bold tracking-wider uppercase shrink-0">
                                                    {file.name.split('.').pop()?.toUpperCase() || 'FILE'}
                                                </span>
                                            </div>
                                            <div className="flex items-center gap-2">
                                                <p className="text-[13px] text-slate-500 truncate">
                                                    {file.status === 'ready' || file.status === 'vectorized'
                                                        ? `Document processed and ready.`
                                                        : `Processing... Currently in ${file.status} state.`
                                                    }
                                                </p>
                                                {file.groups && file.groups.length > 0 && (
                                                    <div className="flex gap-1 ml-2">
                                                        {file.groups.map(g => (
                                                            <span key={g.id} className="text-[10px] px-1.5 py-0.5 bg-blue-50 text-blue-600 rounded-full border border-blue-100">
                                                                {g.name}
                                                            </span>
                                                        ))}
                                                    </div>
                                                )}
                                            </div>
                                        </div>

                                        {/* Meta & Actions */}
                                        <div className="flex items-center gap-6 shrink-0">
                                            <div className="text-[12px] font-medium text-slate-400 flex flex-col items-end">
                                                <span>{new Date(file.createdAt || Date.now()).toLocaleDateString('ja-JP')}</span>
                                                <span>{formatBytes(file.size)}</span>
                                            </div>

                                            <div className="flex items-center gap-2">
                                                {file.status !== 'ready' && file.status !== 'vectorized' ? (
                                                    <CircleDashed size={16} className="text-blue-400 animate-spin mr-2" />
                                                ) : null}
                                            </div>

                                            <div className="flex items-center gap-1 opacity-100 md:opacity-0 group-hover:opacity-100 transition-opacity">
                                                {isFormatSupportedForPreview(file.name) && (
                                                    <button onClick={() => setPdfPreview({ fileId: file.id, fileName: file.name })} className="p-1.5 text-slate-400 hover:text-blue-600 rounded-md bg-slate-50" title={t('preview') as string || 'Preview'}>
                                                    <Eye size={16} />
                                                </button>
                                            )}
                                            <div className="relative group">
                                                <button className="p-1.5 text-slate-400 hover:text-blue-600 rounded-md bg-slate-50" title="Move to Category">
                                                    <Tag size={16} />
                                                </button>
                                                <div className="absolute right-0 top-full mt-1 w-48 bg-white border border-slate-200 rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-20 overflow-hidden">
                                                    <div className="p-2 border-b border-slate-100 bg-slate-50 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                                                        Select Category
                                                    </div>
                                                    <div className="max-h-40 overflow-y-auto">
                                                        <button
                                                            onClick={() => knowledgeGroupService.addFileToGroups(file.id, []).then(fetchAndSetFiles)}
                                                            className="w-full text-left px-3 py-2 text-xs text-slate-600 hover:bg-slate-50 flex items-center gap-2"
                                                        >
                                                            <Layers size={12} />
                                                            None (Uncategorized)
                                                        </button>
                                                        {groups.map(g => (
                                                            <button
                                                                key={g.id}
                                                                onClick={() => handleToggleFileCategory(file, g.id)}
                                                                className="w-full text-left px-3 py-2 text-xs text-slate-600 hover:bg-slate-50 border-t border-slate-50 flex items-center justify-between"
                                                            >
                                                                <div className="flex items-center gap-2 truncate">
                                                                    <Hash size={12} className={file.groups?.some(fg => fg.id === g.id) ? 'text-blue-500' : 'text-slate-400'} />
                                                                    <span className={file.groups?.some(fg => fg.id === g.id) ? 'text-blue-600 font-medium' : ''}>{g.name}</span>
                                                                </div>
                                                                {file.groups?.some(fg => fg.id === g.id) && <CheckCircle2 size={12} className="text-blue-600" />}
                                                            </button>
                                                        ))}
                                                    </div>
                                                </div>
                                            </div>
                                            {isAdmin && (
                                                    <button onClick={() => handleRemoveFile(file.id)} className="p-1.5 text-slate-400 hover:text-red-500 rounded-md bg-slate-50" title={t('delete') as string || 'Delete'}>
                                                        <Trash2 size={16} />
                                                    </button>
                                                )}
                                            </div>
                                        </div>
                                    </motion.div>
                                ))}
                            </AnimatePresence>
                        </div>
                    ) : (
                        <div className="max-w-4xl mx-auto w-full pt-12">
                            <DragDropUpload onFilesSelected={handleFileUpload} isAdmin={isAdmin} />
                        </div>
                    )}
                </div>

                {/* Pagination */}
                {totalPages > 1 && (
                    <div className="px-8 py-4 border-t border-slate-200/60 bg-white/50 backdrop-blur-md flex items-center justify-center gap-2 shrink-0">
                        <button
                            onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
                            disabled={currentPage === 1}
                            className="p-2 border border-slate-200 rounded-lg hover:bg-slate-50 disabled:opacity-30 transition-all font-medium text-slate-600"
                        >
                            Previous
                        </button>
                        <div className="px-3 py-2 text-sm font-semibold text-slate-700">
                            {currentPage} of {totalPages}
                        </div>
                        <button
                            onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
                            disabled={currentPage === totalPages}
                            className="p-2 border border-slate-200 rounded-lg hover:bg-slate-50 disabled:opacity-30 transition-all font-medium text-slate-600"
                        >
                            Next
                        </button>
                    </div>
                )}
            </div>

            <IndexingModalWithMode
                isOpen={isIndexingModalOpen}
                onClose={() => { setPendingFiles([]); setIsIndexingModalOpen(false); }}
                files={pendingFiles}
                embeddingModels={modelConfigs.filter(m => m.type === ModelType.EMBEDDING)}
                defaultEmbeddingId={settings.selectedEmbeddingId}
                onConfirm={handleConfirmIndexing}
                authToken={authToken}
            />

            {/* Group Modal */}
            <AnimatePresence>
                {isGroupModalOpen && (
                    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/40 backdrop-blur-sm">
                        <motion.div
                            initial={{ opacity: 0, scale: 0.95 }}
                            animate={{ opacity: 1, scale: 1 }}
                            exit={{ opacity: 0, scale: 0.95 }}
                            className="bg-white rounded-2xl shadow-xl w-full max-w-md overflow-hidden"
                        >
                            <div className="p-6">
                                <h2 className="text-xl font-bold text-slate-900 mb-2">
                                    {editingGroup ? 'Edit Category' : 'Create New Category'}
                                </h2>
                                <p className="text-slate-500 text-sm mb-6">
                                    Organize your documents with descriptive categories.
                                </p>

                                <div className="space-y-4">
                                    <div>
                                        <label className="block text-sm font-medium text-slate-700 mb-1">Category Name</label>
                                        <input
                                            type="text"
                                            value={newGroupName}
                                            onChange={(e) => setNewGroupName(e.target.value)}
                                            placeholder="e.g. Finance, Projects..."
                                            className="w-full h-11 px-4 bg-slate-50 border border-slate-200 rounded-xl outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all"
                                        />
                                    </div>
                                </div>
                            </div>

                            <div className="px-6 py-4 bg-slate-50 border-t border-slate-100 flex justify-end gap-3">
                                <button
                                    onClick={() => setIsGroupModalOpen(false)}
                                    className="px-4 py-2 text-slate-600 font-medium hover:bg-slate-200/50 rounded-lg transition-all"
                                >
                                    Cancel
                                </button>
                                <button
                                    onClick={handleCreateOrUpdateGroup}
                                    className="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-lg shadow-sm transition-all active:scale-95"
                                >
                                    {editingGroup ? 'Save Changes' : 'Create Category'}
                                </button>
                            </div>
                        </motion.div>
                    </div>
                )}
            </AnimatePresence>

            {pdfPreview && (
                <PDFPreview
                    fileId={pdfPreview.fileId}
                    fileName={pdfPreview.fileName}
                    authToken={authToken}
                    onClose={() => setPdfPreview(null)}
                />
            )}

            {chunkDrawer && (
                <ChunkInfoDrawer
                    isOpen={chunkDrawer.isOpen}
                    onClose={() => setChunkDrawer(null)}
                    fileId={chunkDrawer.fileId}
                    fileName={chunkDrawer.fileName}
                    authToken={authToken}
                />
            )}

        </div>
    )
}