KnowledgeBase/web/components/CreateNotebookDrawer.tsx

import React, { useState } from 'react'
import { X, Plus, ChevronRight } from 'lucide-react'
import { CreateGroupData } from '../types'
import { useLanguage } from '../contexts/LanguageContext'

interface CreateNotebookDrawerProps {
    isOpen: boolean
    onClose: () => void
    onCreate: (data: CreateGroupData) => Promise<void>
}

export const CreateNotebookDrawer: React.FC<CreateNotebookDrawerProps> = ({
    isOpen,
    onClose,
    onCreate,
}) => {
    const { t } = useLanguage()
    const [name, setName] = useState('')
    const [description, setDescription] = useState('')
    const [intro, setIntro] = useState('')
    const [isSubmitting, setIsSubmitting] = useState(false)

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault()
        if (!name.trim()) return

        try {
            setIsSubmitting(true)
            await onCreate({
                name: name.trim(),
                description: description.trim(),
                intro: intro.trim(),
                color: '#3b82f6', // Default color
            })
            // Reset form
            setName('')
            setDescription('')
            setIntro('')
            onClose()
        } catch (error) {
            console.error('Failed to create notebook:', error)
            alert(t('createFailedRetry'))
        } finally {
            setIsSubmitting(false)
        }
    }

    return (
        <>
            {/* Backdrop */}
            {isOpen && (
                <div
                    className="fixed inset-0 bg-black/20 backdrop-blur-sm z-40 transition-opacity duration-300"
                    onClick={onClose}
                />
            )}

            {/* Drawer */}
            <div
                className={`fixed right-0 top-0 h-full w-full max-w-md bg-white shadow-2xl z-50 transform transition-transform duration-300 ease-out ${isOpen ? 'translate-x-0' : 'translate-x-full'
                    }`}
            >
                <div className="flex flex-col h-full">
                    {/* Header */}
                    <div className="flex items-center justify-between px-6 py-4 border-b bg-slate-50">
                        <h2 className="text-xl font-semibold text-slate-800 flex items-center gap-2">
                            <Plus className="w-6 h-6 text-blue-600" />
                            {t('createNotebookTitle')}
                        </h2>
                        <button
                            onClick={onClose}
                            className="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-200 rounded-full transition-colors"
                        >
                            <ChevronRight size={24} />
                        </button>
                    </div>

                    {/* Content */}
                    <div className="flex-1 overflow-y-auto p-6">
                        <form id="create-notebook-form" onSubmit={handleSubmit} className="space-y-6">
                            <div>
                                <label className="block text-sm font-medium text-slate-700 mb-1">
                                    {t('name')} <span className="text-red-500">*</span>
                                </label>
                                <input
                                    type="text"
                                    value={name}
                                    onChange={(e) => setName(e.target.value)}
                                    className="w-full px-4 py-3 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 bg-slate-50"
                                    placeholder={t('namePlaceholder')}
                                    required
                                    autoFocus
                                />
                                <p className="mt-1 text-xs text-slate-500">{t('nameHelp')}</p>
                            </div>

                            <div>
                                <label className="block text-sm font-medium text-slate-700 mb-1">
                                    {t('shortDescription')}
                                </label>
                                <input
                                    type="text"
                                    value={description}
                                    onChange={(e) => setDescription(e.target.value)}
                                    className="w-full px-4 py-3 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 bg-slate-50"
                                    placeholder={t('descPlaceholder')}
                                />
                            </div>

                            <div>
                                <label className="block text-sm font-medium text-slate-700 mb-1">
                                    {t('detailedIntro')}
                                </label>
                                <textarea
                                    value={intro}
                                    onChange={(e) => setIntro(e.target.value)}
                                    className="w-full px-4 py-3 border rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 bg-slate-50 h-64 resize-none leading-relaxed"
                                    placeholder={t('introPlaceholder')}
                                />
                                <p className="mt-1 text-xs text-slate-500">{t('introHelp')}</p>
                            </div>
                        </form>
                    </div>

                    {/* Footer */}
                    <div className="p-6 border-t bg-slate-50">
                        <button
                            type="submit"
                            form="create-notebook-form"
                            disabled={isSubmitting || !name.trim()}
                            className="w-full flex items-center justify-center gap-2 px-6 py-3 bg-blue-600 text-white font-medium rounded-xl hover:bg-blue-700 active:scale-[0.98] transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-blue-600/20"
                        >
                            <Plus size={20} />
                            {isSubmitting ? t('creating') : t('createNow')}
                        </button>
                    </div>
                </div>
            </div>
        </>
    )
}