KnowledgeBase/web/components/CreateNotebookDialog.tsx

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

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

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

    if (!isOpen) return null

    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('creationFailed'))
        } finally {
            setIsSubmitting(false)
        }
    }

    return (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
            <div className="bg-white rounded-xl shadow-xl w-full max-w-lg overflow-hidden animate-in fade-in zoom-in duration-200">
                <div className="flex justify-between items-center px-6 py-4 border-b">
                    <h2 className="text-lg font-semibold text-slate-800">{t('createNewNotebook')}</h2>
                    <button
                        onClick={onClose}
                        className="text-slate-400 hover:text-slate-600 transition-colors"
                    >
                        <X size={20} />
                    </button>
                </div>

                <form onSubmit={handleSubmit} className="p-6 space-y-4">
                    <div>
                        <label className="block text-sm font-medium text-slate-700 mb-1">
                            {t('nameField')} <span className="text-red-500">{t('required')}</span>
                        </label>
                        <input
                            type="text"
                            value={name}
                            onChange={(e) => setName(e.target.value)}
                            className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                            placeholder={t('exampleResearch')}
                            required
                            autoFocus
                        />
                    </div>

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

                    <div>
                        <label className="block text-sm font-medium text-slate-700 mb-1">
                            {t('detailedIntroField')}
                        </label>
                        <textarea
                            value={intro}
                            onChange={(e) => setIntro(e.target.value)}
                            className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 h-32 resize-none"
                            placeholder={t('provideBackgroundInfo')}
                        />
                    </div>

                    <div className="flex justify-end pt-2">
                        <button
                            type="button"
                            onClick={onClose}
                            className="px-4 py-2 text-slate-600 hover:bg-slate-100 rounded-lg mr-2 transition-colors"
                        >
                            {t('cancel')}
                        </button>
                        <button
                            type="submit"
                            disabled={isSubmitting || !name.trim()}
                            className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                        >
                            <Plus size={18} />
                            {isSubmitting ? t('creating') : t('createNow')}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    )
}