KnowledgeBase/web/components/views/MemosView.tsx

import React, { useEffect, useState, useCallback } from 'react'
import { Book, Plus, Search, Trash2, Edit2, Clock, Eye, EyeOff, X, ArrowLeft, Folder, FolderPlus, MoreVertical, Check, ChevronRight } from 'lucide-react'
import { motion, AnimatePresence } from 'framer-motion'
import { noteService } from '../../services/noteService'
import { noteCategoryService } from '../../services/noteCategoryService'
import { Note, NoteCategory } from '../../types'
import { useLanguage } from '../../contexts/LanguageContext'
import { useToast } from '../../contexts/ToastContext'
import { useConfirm } from '../../contexts/ConfirmContext'
import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
import remarkMath from 'remark-math'
import rehypeKatex from 'rehype-katex'

interface MemosViewProps {
    authToken: string
    isAdmin?: boolean
}

export const MemosView: React.FC<MemosViewProps> = ({ authToken, isAdmin = false }) => {
    const { t } = useLanguage()
    const { showError, showSuccess } = useToast()
    const { confirm } = useConfirm()

    const [notes, setNotes] = useState<Note[]>([])
    const [isLoading, setIsLoading] = useState(true)
    const [filterText, setFilterText] = useState('')

    // Editor state
    const [isEditing, setIsEditing] = useState(false)
    const [currentNote, setCurrentNote] = useState<Partial<Note>>({})
    const [showPreview, setShowPreview] = useState(true)

    // Category state
    const [categories, setCategories] = useState<NoteCategory[]>([])
    const [selectedCategoryId, setSelectedCategoryId] = useState<string | null>(null) // null = All
    const [isCategoryLoading, setIsCategoryLoading] = useState(false)
    const [showAddCategory, setShowAddCategory] = useState(false)
    const [newCategoryName, setNewCategoryName] = useState('')
    const [editingCategoryId, setEditingCategoryId] = useState<string | null>(null)
    const [editCategoryName, setEditCategoryName] = useState('')
    const [addingSubCategoryId, setAddingSubCategoryId] = useState<string | null>(null)
    const [expandedCategories, setExpandedCategories] = useState<Set<string>>(new Set())

    const fetchNotes = useCallback(async () => {
        if (!authToken) return
        try {
            setIsLoading(true)
            const data = await noteService.getAll(authToken, undefined, selectedCategoryId || undefined)
            setNotes(data)
        } catch (error: any) {
            console.error(error)
            const errorMsg = error.message || ''
            if (!errorMsg.includes('401') && !errorMsg.includes('403')) {
                showError(`${t('errorLoadData')}: ${errorMsg}`)
            }
        } finally {
            setIsLoading(false)
        }
    }, [authToken, selectedCategoryId, showError, t])

    const fetchCategories = useCallback(async () => {
        if (!authToken) return
        try {
            setIsCategoryLoading(true)
            const data = await noteCategoryService.getAll(authToken)
            setCategories(data)
        } catch (error: any) {
            console.error(error)
        } finally {
            setIsCategoryLoading(false)
        }
    }, [authToken])

    useEffect(() => {
        fetchNotes()
    }, [fetchNotes])

    useEffect(() => {
        fetchCategories()
    }, [fetchCategories])

    const handleSaveNote = async () => {
        if (!currentNote.title || !currentNote.content) {
            showError(t('errorTitleContentRequired'))
            return
        }

        try {
            if (currentNote.id) {
                await noteService.update(authToken, currentNote.id, {
                    title: currentNote.title,
                    content: currentNote.content,
                    categoryId: currentNote.categoryId
                })
                showSuccess(t('successNoteUpdated'))
            } else {
                await noteService.create(authToken, {
                    title: currentNote.title,
                    content: currentNote.content,
                    groupId: '',
                    categoryId: currentNote.categoryId || selectedCategoryId || undefined
                })
                showSuccess(t('successNoteCreated'))
            }
            setIsEditing(false)
            setCurrentNote({})
            fetchNotes()
        } catch (error: any) {
            showError(t('errorSaveFailed', error.message))
        }
    }

    const handleDeleteNote = async (id: string) => {
        if (!(await confirm(t('confirmDeleteNote')))) return
        try {
            await noteService.delete(authToken, id)
            showSuccess(t('successNoteDeleted'))
            fetchNotes()
        } catch (error) {
            showError(t('deleteFailed'))
        }
    }

    const filteredNotes = notes.filter(n =>
        n.title.toLowerCase().includes(filterText.toLowerCase()) ||
        n.content.toLowerCase().includes(filterText.toLowerCase())
    )

    const handleCreateCategory = async (e: React.FormEvent, parentId?: string) => {
        e.preventDefault()
        if (!newCategoryName.trim()) return
        try {
            await noteCategoryService.create(authToken, newCategoryName.trim(), parentId)
            setNewCategoryName('')
            setShowAddCategory(false)
            setAddingSubCategoryId(null)
            fetchCategories()
            showSuccess(t('categoryCreated'))
        } catch (error: any) {
            showError(`${t('failedToCreateCategory')}: ${error.message}`)
        }
    }

    const handleUpdateCategory = async (id: string) => {
        if (!editCategoryName.trim()) return
        try {
            await noteCategoryService.update(authToken, id, editCategoryName.trim())
            setEditingCategoryId(null)
            fetchCategories()
            showSuccess(t('groupUpdated'))
        } catch (error) {
            showError(t('actionFailed'))
        }
    }

    const handleDeleteCategory = async (e: React.MouseEvent, id: string) => {
        e.stopPropagation()
        if (!(await confirm(t('confirmDeleteCategory')))) return
        try {
            await noteCategoryService.delete(authToken, id)
            if (selectedCategoryId === id) setSelectedCategoryId(null)
            fetchCategories()
            showSuccess(t('groupDeleted'))
        } catch (error) {
            showError(t('failedToDeleteCategory'))
        }
    }

    const toggleCategory = (id: string, e: React.MouseEvent) => {
        e.stopPropagation()
        const newExpanded = new Set(expandedCategories)
        if (newExpanded.has(id)) newExpanded.delete(id)
        else newExpanded.add(id)
        setExpandedCategories(newExpanded)
    }

    const renderCategoryTree = (parentId: string | null) => {
        const items = categories.filter(c => (c.parentId || null) === (parentId || null))

        return items.map(cat => {
            const hasChildren = categories.some(c => c.parentId === cat.id)
            const isExpanded = expandedCategories.has(cat.id)

            return (
                <div key={cat.id} className="flex flex-col">
                    <div className="group relative">
                        {editingCategoryId === cat.id ? (
                            <div className="flex items-center gap-2 bg-white border border-blue-200 rounded-lg p-1.5 mx-2">
                                <input
                                    autoFocus
                                    className="flex-1 text-xs border-none outline-none p-0 focus:ring-0"
                                    value={editCategoryName}
                                    onChange={e => setEditCategoryName(e.target.value)}
                                    onKeyDown={e => e.key === 'Enter' && handleUpdateCategory(cat.id)}
                                />
                                <button onClick={() => handleUpdateCategory(cat.id)} className="text-blue-600"><Check size={14} /></button>
                                <button onClick={() => setEditingCategoryId(null)} className="text-slate-400"><X size={14} /></button>
                            </div>
                        ) : (
                            <div
                                onClick={() => setSelectedCategoryId(cat.id)}
                                className={`w-full flex items-center justify-between px-3 py-2 rounded-lg text-sm group cursor-pointer transition-all ${selectedCategoryId === cat.id ? 'bg-blue-50 text-blue-700 font-bold shadow-sm' : 'text-slate-500 hover:bg-slate-100/50'}`}
                                style={{ paddingLeft: `${(cat.level - 1) * 12 + 12}px` }}
                            >
                                <div className="flex items-center gap-2 overflow-hidden">
                                    <div
                                        onClick={(e) => toggleCategory(cat.id, e)}
                                        className={`p-0.5 hover:bg-blue-100 rounded transition-colors ${!hasChildren ? 'invisible' : ''}`}
                                    >
                                        <ChevronRight size={14} className={`transition-transform duration-200 ${isExpanded ? 'rotate-90' : ''}`} />
                                    </div>
                                    <Folder size={16} className={selectedCategoryId === cat.id ? 'text-blue-600' : 'text-slate-400 group-hover:text-blue-500'} />
                                    <span className="truncate">{cat.name}</span>
                                </div>
                                <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
                                    {cat.level < 3 && (
                                        <button
                                            onClick={(e) => {
                                                e.stopPropagation()
                                                setAddingSubCategoryId(cat.id)
                                                setShowAddCategory(true)
                                                if (!isExpanded) {
                                                    const newExpanded = new Set(expandedCategories)
                                                    newExpanded.add(cat.id)
                                                    setExpandedCategories(newExpanded)
                                                }
                                            }}
                                            className="p-1 hover:text-blue-600"
                                            title={t('subFolderPlaceholder')}
                                        >
                                            <FolderPlus size={12} />
                                        </button>
                                    )}
                                    <button
                                        onClick={(e) => {
                                            e.stopPropagation()
                                            setEditingCategoryId(cat.id)
                                            setEditCategoryName(cat.name)
                                        }}
                                        className="p-1 hover:text-blue-600"
                                    >
                                        <Edit2 size={12} />
                                    </button>
                                    <button
                                        onClick={(e) => handleDeleteCategory(e, cat.id)}
                                        className="p-1 hover:text-red-500"
                                    >
                                        <Trash2 size={12} />
                                    </button>
                                </div>
                            </div>
                        )}
                    </div>

                    {isExpanded && (
                        <div className="flex flex-col">
                            {renderCategoryTree(cat.id)}
                            {addingSubCategoryId === cat.id && (
                                <form
                                    onSubmit={(e) => handleCreateCategory(e, cat.id)}
                                    className="my-1 mx-2"
                                    style={{ paddingLeft: `${cat.level * 12 + 12}px` }}
                                >
                                    <div className="flex items-center gap-2 bg-white border border-blue-200 rounded-lg p-1.5 focus-within:ring-2 focus-within:ring-blue-100 transition-all">
                                        <input
                                            autoFocus
                                            className="flex-1 text-xs border-none outline-none p-0 focus:ring-0"
                                            placeholder={t('subFolderPlaceholder')}
                                            value={newCategoryName}
                                            onChange={e => setNewCategoryName(e.target.value)}
                                            onBlur={() => !newCategoryName && setAddingSubCategoryId(null)}
                                        />
                                        <button type="submit" className="text-blue-600 hover:text-blue-800"><Check size={14} /></button>
                                        <button type="button" onClick={() => setAddingSubCategoryId(null)} className="text-slate-400"><X size={14} /></button>
                                    </div>
                                </form>
                            )}
                        </div>
                    )}
                </div>
            )
        })
    }

    if (isEditing) {
        return (
            <div className="flex flex-col h-full bg-white overflow-hidden">
                <div className="px-8 pt-8 pb-6 flex items-center justify-between shrink-0 border-b border-slate-100">
                    <div className="flex items-center gap-4">
                        <button
                            onClick={() => setIsEditing(false)}
                            className="p-2 -ml-2 hover:bg-slate-100 rounded-lg text-slate-400 hover:text-slate-600 transition-colors"
                            title={t('back')}
                        >
                            <ArrowLeft size={20} />
                        </button>
                        <div className="flex flex-col">
                            <h2 className="text-xl font-bold text-slate-900 leading-tight">
                                {currentNote.id ? t('editNote') : t('newNote')}
                            </h2>
                            <div className="flex items-center gap-2 mt-1">
                                <span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">{t('directoryLabel')}:</span>
                                <select
                                    className="text-[11px] font-bold text-blue-600 bg-blue-50/50 px-2 py-0.5 rounded border-none outline-none focus:ring-0 cursor-pointer max-w-[150px] truncate"
                                    value={currentNote.categoryId || ''}
                                    onChange={(e) => setCurrentNote({ ...currentNote, categoryId: e.target.value || undefined })}
                                >
                                    <option value="">{t('uncategorized')}</option>
                                    {categories.map(c => {
                                        const parent = categories.find(p => p.id === c.parentId)
                                        const grandparent = parent ? categories.find(gp => gp.id === parent.parentId) : null
                                        const path = [grandparent, parent, c].filter(Boolean).map(cat => cat?.name).join(' > ')
                                        return (
                                            <option key={c.id} value={c.id}>
                                                {'\u00A0'.repeat((c.level - 1) * 2)}{c.name}
                                            </option>
                                        )
                                    })}
                                </select>
                            </div>
                        </div>
                    </div>
                    <div className="flex items-center gap-3">
                        <button
                            onClick={() => setShowPreview(!showPreview)}
                            className="flex items-center gap-2 px-3 py-1.5 text-[13px] font-semibold text-slate-500 hover:bg-slate-50 rounded-lg transition-all"
                        >
                            {showPreview ? <EyeOff size={16} /> : <Eye size={16} />}
                            {showPreview ? t('hidePreview') : t('showPreview')}
                        </button>
                        <button
                            onClick={handleSaveNote}
                            className="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-semibold text-sm shadow-sm transition-all active:scale-95"
                        >
                            {t('save')}
                        </button>
                    </div>
                </div>

                <div className="flex-1 flex overflow-hidden">
                    <div className={`flex-1 flex flex-col p-8 gap-6 ${showPreview ? 'border-r border-slate-100' : ''}`}>
                        <input
                            type="text"
                            placeholder={t('noteTitlePlaceholder')}
                            value={currentNote.title || ''}
                            onChange={(e) => setCurrentNote({ ...currentNote, title: e.target.value })}
                            className="text-2xl font-bold text-slate-900 bg-transparent border-none focus:ring-0 placeholder:text-slate-200 w-full"
                        />
                        <textarea
                            placeholder={t('startWritingPlaceholder')}
                            value={currentNote.content || ''}
                            onChange={(e) => setCurrentNote({ ...currentNote, content: e.target.value })}
                            className="flex-1 text-[15px] text-slate-700 bg-transparent border-none focus:ring-0 placeholder:text-slate-200 w-full resize-none leading-relaxed"
                        />
                    </div>

                    {showPreview && (
                        <div className="flex-1 p-8 overflow-y-auto bg-slate-50/20">
                            <div className="prose prose-slate prose-sm max-w-none">
                                <h1 className="text-2xl font-bold text-slate-900 mb-6">{currentNote.title || t('previewHeader')}</h1>
                                <ReactMarkdown
                                    remarkPlugins={[remarkGfm, remarkMath]}
                                    rehypePlugins={[rehypeKatex]}
                                >
                                    {currentNote.content || t('noContentToPreview')}
                                </ReactMarkdown>
                            </div>
                        </div>
                    )}
                </div>
            </div>
        )
    }

    return (
        <div className="flex h-full bg-white overflow-hidden">
            {/* Category Sidebar */}
            <aside className="w-64 border-r border-slate-100 flex flex-col bg-slate-50/30 shrink-0">
                <div className="p-6 pb-2">
                    <div className="flex items-center justify-between mb-4">
                        <h2 className="text-[11px] font-black text-slate-400 uppercase tracking-widest">{t('personalNotebook') || t('directoryLabel')}</h2>
                        <button
                            onClick={() => setShowAddCategory(true)}
                            className="p-1 hover:bg-slate-100 rounded-md text-slate-400 transition-colors"
                        >
                            <FolderPlus size={16} />
                        </button>
                    </div>

                    <div className="space-y-0.5">
                        <button
                            onClick={() => setSelectedCategoryId(null)}
                            className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-all ${!selectedCategoryId ? 'bg-blue-50 text-blue-700 font-bold shadow-sm' : 'text-slate-500 hover:bg-slate-50'}`}
                        >
                            <Book size={16} className={!selectedCategoryId ? 'text-blue-600' : 'text-slate-400'} />
                            {t('allNotes')}
                        </button>
                    </div>
                </div>

                <div className="flex-1 overflow-y-auto px-4 py-2">
                    {showAddCategory && !addingSubCategoryId && (
                        <form onSubmit={(e) => handleCreateCategory(e)} className="mb-4 px-2">
                            <div className="flex items-center gap-2 bg-white border border-blue-200 rounded-lg p-1.5 focus-within:ring-2 focus-within:ring-blue-100 transition-all">
                                <input
                                    autoFocus
                                    className="flex-1 text-xs border-none outline-none p-0 focus:ring-0"
                                    placeholder={t('enterNamePlaceholder')}
                                    value={newCategoryName}
                                    onChange={e => setNewCategoryName(e.target.value)}
                                    onBlur={() => !newCategoryName && setShowAddCategory(false)}
                                />
                                <button type="submit" className="text-blue-600 hover:text-blue-800"><Check size={14} /></button>
                                <button type="button" onClick={() => setShowAddCategory(false)} className="text-slate-400"><X size={14} /></button>
                            </div>
                        </form>
                    )}

                    <div className="space-y-1">
                        {renderCategoryTree(null)}
                    </div>
                </div>
            </aside>

            {/* Main Content */}
            <div className="flex-1 flex flex-col overflow-hidden relative">
                <div className="px-8 pt-8 pb-6 flex items-start justify-between shrink-0">
                    <div>
                        <div className="flex items-center gap-2 mb-1">
                            <h1 className="text-2xl font-bold text-slate-900 leading-tight">{t('navNotebook')}</h1>
                            {selectedCategoryId && (
                                <>
                                    <ChevronRight size={16} className="text-slate-300" />
                                    <span className="text-2xl font-bold text-blue-600 truncate max-w-[200px]">
                                        {categories.find(c => c.id === selectedCategoryId)?.name || t('directoryLabel')}
                                    </span>
                                </>
                            )}
                        </div>
                        <p className="text-[15px] text-slate-500">{t('notebookDesc') || 'Capture your personal thoughts and research notes.'}</p>
                    </div>
                    <button
                        onClick={() => {
                            setCurrentNote({ categoryId: selectedCategoryId || undefined })
                            setIsEditing(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} />
                        {t('newNote')}
                    </button>
                </div>

                <div className="px-8 pb-6 flex items-center shrink-0">
                    <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={t('filterNotesPlaceholder')}
                            value={filterText}
                            onChange={(e) => setFilterText(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="px-8 pb-8 flex-1 overflow-y-auto">
                    {isLoading ? (
                        <div className="flex items-center justify-center py-20">
                            <div className="w-8 h-8 border-2 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
                        </div>
                    ) : filteredNotes.length === 0 ? (
                        <div className="flex flex-col items-center justify-center py-32 border-2 border-dashed border-slate-200 rounded-2xl bg-slate-50/10 text-center">
                            <Book className="w-12 h-12 text-slate-200 mx-auto mb-4" />
                            <h3 className="text-slate-900 font-bold">{t('noNotesFound') || 'No Notes Found'}</h3>
                            <p className="text-slate-500 text-sm mt-1">{t('startByCreatingNote') || 'Start by creating your first personal note.'}</p>
                        </div>
                    ) : (
                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                            <AnimatePresence>
                                {filteredNotes.map((note) => (
                                    <motion.div
                                        key={note.id}
                                        layout
                                        initial={{ opacity: 0, scale: 0.95 }}
                                        animate={{ opacity: 1, scale: 1 }}
                                        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"
                                        onClick={() => {
                                            setCurrentNote(note)
                                            setIsEditing(true)
                                        }}
                                    >
                                        <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()
                                                    setCurrentNote(note)
                                                    setIsEditing(true)
                                                }}
                                                className="p-1.5 text-slate-400 hover:text-blue-600 rounded-md bg-slate-50"
                                            >
                                                <Edit2 size={16} />
                                            </button>
                                            <button
                                                onClick={(e) => {
                                                    e.stopPropagation()
                                                    handleDeleteNote(note.id)
                                                }}
                                                className="p-1.5 text-slate-400 hover:text-red-500 rounded-md bg-slate-50"
                                            >
                                                <Trash2 size={16} />
                                            </button>
                                        </div>

                                        <div className="flex-1">
                                            <div className="w-11 h-11 bg-slate-50 rounded-lg text-slate-400 flex items-center justify-center mb-4 transition-all group-hover:bg-blue-600 group-hover:text-white">
                                                <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 pr-12">
                                                {note.title}
                                            </h3>
                                            <p className="text-[13px] text-slate-500 leading-relaxed line-clamp-4 overflow-hidden">
                                                {note.content}
                                            </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">
                                                <Clock size={12} className="text-slate-300" />
                                                <span className="text-[11px] font-medium text-slate-400">
                                                    {new Date(note.updatedAt).toLocaleDateString()}
                                                </span>
                                            </div>
                                            {note.categoryId && (
                                                <span className="text-[10px] bg-slate-100 text-slate-500 px-2 py-0.5 rounded font-medium">
                                                    {categories.find(c => c.id === note.categoryId)?.name || t('directoryLabel')}
                                                </span>
                                            )}
                                        </div>
                                    </motion.div>
                                ))}
                            </AnimatePresence>
                        </div>
                    )}
                </div>
            </div>
        </div>
    )
}