KnowledgeBase/web/components/views/NotebooksView.tsx

import React from 'react'
import { knowledgeGroupService } from '../../services/knowledgeGroupService'
import { KnowledgeGroup, UpdateGroupData, CreateGroupData } from '../../types'
import { Plus, Book, MoreVertical, Library, MessageSquare, Trash2, Edit2, FolderInput } from 'lucide-react'
import { motion, AnimatePresence } from 'framer-motion'
import { NotebookDetailView } from './NotebookDetailView'
import { CreateNotebookDrawer } from '../CreateNotebookDrawer'
import { EditNotebookDrawer } from '../EditNotebookDrawer'
import { ImportFolderDrawer } from '../ImportFolderDrawer'
import { useLanguage } from '../../contexts/LanguageContext'
import { useToast } from '../../contexts/ToastContext'
import { useConfirm } from '../../contexts/ConfirmContext'

interface NotebooksViewProps {
    authToken: string
    onChatWithContext: (context: { selectedGroups?: string[], selectedFiles?: string[] }) => void
    isAdmin?: boolean
}

export const NotebooksView: React.FC<NotebooksViewProps> = ({ authToken, onChatWithContext, isAdmin = false }) => {
    const { t } = useLanguage()
    const { showError } = useToast()
    const { confirm } = useConfirm()
    const [notebooks, setNotebooks] = React.useState<KnowledgeGroup[]>([])
    const [isLoading, setIsLoading] = React.useState(true)
    const [selectedNotebook, setSelectedNotebook] = React.useState<KnowledgeGroup | null>(null)
    const [isCreateDrawerOpen, setIsCreateDrawerOpen] = React.useState(false)
    const [isImportDrawerOpen, setIsImportDrawerOpen] = React.useState(false)
    const [editingNotebook, setEditingNotebook] = React.useState<KnowledgeGroup | null>(null)

    const fetchNotebooks = async () => {
        try {
            const groups = await knowledgeGroupService.getGroups()
            setNotebooks(groups)
        } catch (error) {
            console.error(error)
        } finally {
            setIsLoading(false)
        }
    }

    React.useEffect(() => {
        fetchNotebooks()
    }, [authToken, selectedNotebook])

    const handleCreateNotebook = async (data: CreateGroupData) => {
        try {
            setIsLoading(true)
            await knowledgeGroupService.createGroup(data)
            await fetchNotebooks()
            setIsCreateDrawerOpen(false)
        } catch (error) {
            console.error(error)
            showError(t('createFailed'))
        } finally {
            setIsLoading(false)
        }
    }

    const handleUpdateNotebook = async (id: string, data: UpdateGroupData) => {
        await knowledgeGroupService.updateGroup(id, data)
        await fetchNotebooks()
    }

    const handleDeleteNotebook = async (e: React.MouseEvent, id: string, name: string) => {
        e.stopPropagation()
        if (!(await confirm(t('confirmDeleteNotebook').replace('$1', name)))) return
        try {
            setIsLoading(true)
            await knowledgeGroupService.deleteGroup(id)
            setNotebooks(prev => prev.filter(n => n.id !== id))
        } catch (error) {
            console.error(error)
            showError(t('deleteFailed'))
        } finally {
            setIsLoading(false)
        }
    }

    if (selectedNotebook) {
        return (
            <NotebookDetailView
                authToken={authToken}
                notebook={selectedNotebook}
                onBack={() => setSelectedNotebook(null)}
                onChatWithContext={onChatWithContext}
                isAdmin={!!isAdmin}
            />
        )
    }

    return (
        <div className="flex flex-col h-full bg-transparent overflow-hidden">
            <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">{t('navKnowledgeGroups')}</h1>
                    <p className="text-[15px] text-slate-500 mt-1">{t('notebooksDesc')}</p>
                </div>
                <div className="flex items-center gap-3">
                    {isAdmin && (
                        <button
                            onClick={() => setIsImportDrawerOpen(true)}
                            className="flex items-center gap-2 px-4 py-2.5 bg-white border border-slate-200 text-slate-700 text-sm font-semibold rounded-lg hover:bg-slate-50 hover:border-slate-300 transition-all active:scale-95 shadow-sm"
                        >
                            <FolderInput size={18} className="text-blue-600" />
                            <span>Import Folder</span>
                        </button>
                    )}
                    {isAdmin && (
                        <button
                            onClick={() => setIsCreateDrawerOpen(true)}
                            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} />
                            <span>New Group</span>
                        </button>
                    )}
                </div>
            </div>

            <div className="px-8 pb-8 flex-1 overflow-y-auto">
                {isLoading ? (
                    <div className="flex h-64 items-center justify-center">
                        <div className="w-8 h-8 border-2 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
                    </div>
                ) : notebooks.length === 0 ? (
                    <div className="flex flex-col items-center justify-center py-32 border-2 border-dashed border-slate-200 rounded-2xl bg-white/50 text-center">
                        <Library className="w-12 h-12 text-slate-200 mx-auto mb-4" />
                        <h3 className="text-slate-900 font-bold">No Knowledge Groups</h3>
                        <p className="text-slate-500 text-sm mt-1">Create a group to start organizing your files.</p>
                        {isAdmin && (
                            <button
                                onClick={() => setIsCreateDrawerOpen(true)}
                                className="mt-6 px-5 py-2 bg-blue-600 text-white rounded-lg font-semibold text-sm hover:bg-blue-700 transition-all shadow-sm"
                            >
                                {t('createNotebook')}
                            </button>
                        )}
                    </div>
                ) : (
                    <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 max-w-7xl mx-auto">
                        <AnimatePresence>
                            {notebooks.map((notebook, index) => (
                                <motion.div
                                    key={notebook.id}
                                    layout
                                    initial={{ opacity: 0, y: 10 }}
                                    animate={{ opacity: 1, y: 0 }}
                                    onClick={() => setSelectedNotebook(notebook)}
                                    className="bg-white rounded-xl border border-slate-200/80 p-5 shadow-sm hover:shadow-md transition-all group relative overflow-hidden flex flex-col h-64 cursor-pointer"
                                >
                                    <div className="absolute top-4 right-4 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity" onClick={e => e.stopPropagation()}>
                                        <button
                                            onClick={(e) => {
                                                e.stopPropagation()
                                                onChatWithContext({ selectedGroups: [notebook.id] })
                                            }}
                                            className="p-1.5 text-slate-400 hover:text-blue-600 rounded-md"
                                        >
                                            <MessageSquare size={16} />
                                        </button>
                                        {isAdmin && (
                                            <button
                                                onClick={(e) => {
                                                    e.stopPropagation()
                                                    setEditingNotebook(notebook)
                                                }}
                                                className="p-1.5 text-slate-400 hover:text-blue-600 rounded-md"
                                            >
                                                <Edit2 size={16} />
                                            </button>
                                        )}
                                        {isAdmin && (
                                            <button
                                                onClick={(e) => handleDeleteNotebook(e, notebook.id, notebook.name)}
                                                className="p-1.5 text-slate-400 hover:text-red-500 rounded-md"
                                            >
                                                <Trash2 size={16} />
                                            </button>
                                        )}
                                    </div>

                                    <div className="flex-1">
                                        <div className="w-11 h-11 bg-blue-50 rounded-lg text-blue-600 shadow-sm border border-blue-100/30 flex items-center justify-center mb-4 transition-transform group-hover:scale-105">
                                            <Book size={20} />
                                        </div>
                                        <h3 className="font-bold text-slate-900 text-[16px] mb-2 leading-tight group-hover:text-blue-600 transition-colors truncate">
                                            {notebook.name}
                                        </h3>
                                        <p className="text-[13px] text-slate-500 leading-relaxed line-clamp-3 italic opacity-85">
                                            {notebook.description || "No description provided."}
                                        </p>
                                    </div>

                                    <div className="mt-auto pt-4 border-t border-slate-50 flex items-center justify-between">
                                        <div className="flex items-center gap-2 px-2.5 py-1 bg-slate-50 border border-slate-100 rounded-md">
                                            <span className="text-[11px] font-bold text-slate-700">{notebook.fileCount || 0}</span>
                                            <span className="text-[11px] font-semibold text-slate-400 uppercase tracking-tight">Files</span>
                                        </div>
                                        <span className="text-[11px] font-medium text-slate-300">
                                            {notebook.updatedAt ? new Date(notebook.updatedAt).toLocaleDateString() : ''}
                                        </span>
                                    </div>
                                </motion.div>
                            ))}
                        </AnimatePresence>
                    </div>
                )}
            </div>

            {isCreateDrawerOpen && (
                <CreateNotebookDrawer
                    isOpen={isCreateDrawerOpen}
                    onClose={() => setIsCreateDrawerOpen(false)}
                    onCreate={handleCreateNotebook}
                />
            )}

            {editingNotebook && (
                <EditNotebookDrawer
                    isOpen={!!editingNotebook}
                    onClose={() => setEditingNotebook(null)}
                    notebook={editingNotebook}
                    onUpdate={handleUpdateNotebook}
                />
            )}
            <ImportFolderDrawer
                isOpen={isImportDrawerOpen}
                onClose={() => setIsImportDrawerOpen(false)}
                authToken={authToken}
                onImportSuccess={fetchNotebooks}
            />
        </div>
    )
}