import { Button } from "@/components/bs-ui/button";
import { DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/bs-ui/dialog";
import { Input, Textarea } from "@/components/bs-ui/input";
import { useToast } from "@/components/bs-ui/toast/use-toast";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";

export default function EditAssistantDialog({ name, desc, onSave }) {

    const { t } = useTranslation()
    // State for form fields
    const [formData, setFormData] = useState({ name: '', desc: '' });

    useEffect(() => {
        setFormData({ name, desc })
    }, [name, desc])
    // console.log(formData, name, desc);

    // State for errors
    const [errors, setErrors] = useState<any>({});

    // Validate form fields
    const validateField = (name, value) => {
        switch (name) {
            case 'name':
                if (!value) return t('build.nameRequired');
                if (value.length > 50) return t('build.nameMaxLength');
                return '';
            case 'desc':
                if (value.length > 1000) return t('build.descMaxLength');
                return '';
            default:
                return '';
        }
    };

    // Handle field change
    const handleChange = (e) => {
        const { name, value } = e.target;
        const error = validateField(name, value);

        setFormData(prev => ({ ...prev, [name]: value }));
        setErrors(prev => ({ ...prev, [name]: error }));
    };

    // Validate entire form
    const validateForm = () => {
        const formErrors = {};
        let isValid = true;

        Object.keys(formData).forEach(key => {
            const error = validateField(key, formData[key]);
            if (error) {
                formErrors[key] = error;
                isValid = false;
            }
        });

        setErrors(formErrors);
        return isValid;
    };

    const { message, toast } = useToast()
    // Handle form submission
    const handleSubmit = (e) => {
        e.preventDefault();
        const isValid = validateForm();
        // console.log('Form data:', errors);
        if (!isValid) return toast({
            title: t('prompt'),
            variant: 'error',
            description: Object.keys(errors).map(key => errors[key]),
        })

        onSave(formData)

    };

    return <DialogContent className="sm:max-w-[625px]">
        <DialogHeader>
            <DialogTitle>{t('build.editAssistant')}</DialogTitle>
        </DialogHeader>
        <div className="flex flex-col gap-8 py-6">
            <div className="">
                <label htmlFor="name" className="bisheng-label">{t('build.assistantName')}<span className="bisheng-tip">*</span></label>
                <Input id="name" name="name" placeholder={t('build.enterName')} className="mt-2" value={formData.name} onChange={handleChange} />
                {errors.name && <p className="bisheng-tip mt-1">{errors.name}</p>}
            </div>
            <div className="">
                <label htmlFor="desc" className="bisheng-label">{t('build.assistantDesc')}</label>
                <Textarea id="desc" name="desc" placeholder={t('build.enterDesc')} maxLength={1200} className="mt-2" value={formData.desc} onChange={handleChange} />
                {errors.desc && <p className="bisheng-tip mt-1">{errors.desc}</p>}
            </div>
        </div>
        <DialogFooter>
            <DialogClose>
                <Button variant="outline" className="px-11" type="button">{t('build.cancel')}</Button>
            </DialogClose>
            <Button type="submit" className="px-11" onClick={handleSubmit}>{t('build.confirm')}</Button>
        </DialogFooter>
    </DialogContent>
};