import React, { useEffect } from 'react';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import InputText from './InputText';
import { modelSchema } from '../schemas/modelSchema';
import SelectInput from './SelectInput';

export default function ModalForm({ isOpen, onClose, mode, OnSubmit, model }) {

    // สถานะ Status Choices จาก AiModel (กำหนดเองใน Frontend)
    const STATUS_OPTIONS = [
        { value: 'ACTIVE', name: 'ACTIVE (พร้อมใช้งาน)' },
        { value: 'INACTIVE', name: 'INACTIVE (ไม่ได้ใช้งาน)' },
        { value: 'TESTING', name: 'TESTING (กำลังทดสอบ)' },
    ];

    // 1. RHF Setup
    const {
        register,
        handleSubmit,
        reset,
        formState: { errors, isSubmitting }
    } = useForm({
        resolver: yupResolver(modelSchema), // ใช้ Schema สำหรับ Model Registry
        // กำหนดค่าเริ่มต้นตาม mode
        defaultValues: {
            id: '',
            name: '',
            model_version: 'v1.0.0',
            developer: '',
            base_url: '',
            inference_path: '',
            status: 'INACTIVE',
            auth_required: false,
        }
    });

    // 2. Logic โหลดข้อมูล Model เข้า Form เมื่อเปิดโหมด Edit
    useEffect(() => {
        if (mode === 'edit' && model) {
            // ใช้ reset() ของ RHF เพื่อโหลดข้อมูลลงในฟอร์ม
            reset({
                id: model.id || '', // ID เป็น ReadOnly
                name: model.name || '',
                model_version: model.model_version || 'v1.0.0',
                developer: model.developer || '',
                base_url: model.base_url || '',
                inference_path: model.inference_path || '',
                status: model.status || 'INACTIVE',
                auth_required: model.auth_required || false,
            });
        } else {
            // Reset ฟอร์มเป็นค่าเริ่มต้นเมื่อเปิดโหมด Add
            reset();
        }
    }, [mode, model, reset]);


    // 3. Logic การ Submit
    const onSubmitHandler = (data) => {
        // เพิ่ม ID เข้าไปในข้อมูลถ้าเป็นโหมด Edit
        if (mode === 'edit') {
            data.id = model.id;
        }

        // เรียกใช้ OnSubmit ที่มาจาก Page Component (เรียก Mutation)
        OnSubmit(data);

        onClose(); // ปิด Modal หลังจาก Submit
    };

    const modalTitle = mode === 'add' ? 'ลงทะเบียน AI Model ใหม่' : `แก้ไข Model: ${model?.name}`;
    const submitText = mode === 'add' ? 'ลงทะเบียน' : 'บันทึกการแก้ไข';


    return (
        <dialog id="model_form_modal" className="modal" open={isOpen}>
            <div className="modal-box w-11/12 max-w-4xl"> {/* เพิ่มขนาด Modal */}
                <h3 className="font-bold text-xl py-4">{modalTitle}</h3>

                {/* ปุ่มปิด Modal */}
                <button type="button" className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onClick={onClose}>✕</button>

                {/* 4. Form หลัก (ใช้ handleSubmit ของ RHF) */}
                <form onSubmit={handleSubmit(onSubmitHandler)}>
                    <div className="space-y-4">

                        {/* ---------------------------------- */}
                        {/* กลุ่มที่ 1: ชื่อและสถานะ */}
                        {/* ---------------------------------- */}
                        <div className="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4">
                            <div className="w-full">
                                <InputText
                                    labelTitle="ชื่อโมเดล (เช่น Spleen Segmentation)"
                                    placeholder="Model Name"
                                    type="text"
                                    {...register('name')}
                                    error={errors.name}
                                />
                            </div>
                            <div className="w-full">
                                <InputText
                                    labelTitle="เวอร์ชัน"
                                    placeholder="v1.0.0"
                                    type="text"
                                    {...register('model_version')}
                                    error={errors.model_version}
                                />
                            </div>
                        </div>

                        {/* ---------------------------------- */}
                        {/* กลุ่มที่ 2: Base URL / Inference Path */}
                        {/* ---------------------------------- */}
                        <div className="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4">
                            <div className="w-full md:w-3/5">
                                <InputText
                                    labelTitle="Base URL (Internal Service Address)"
                                    placeholder="http://ai_model_server:8001"
                                    type="url"
                                    {...register('base_url')}
                                    error={errors.base_url}
                                    labelStyle='text-warning'
                                />
                            </div>
                            <div className="w-full md:w-2/5">
                                <InputText
                                    labelTitle="Inference Path"
                                    placeholder="inference/spleen/"
                                    type="text"
                                    {...register('inference_path')}
                                    error={errors.inference_path}
                                />
                            </div>
                        </div>

                        {/* ---------------------------------- */}
                        {/* กลุ่มที่ 3: สถานะและการควบคุม */}
                        {/* ---------------------------------- */}
                        <div className="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4">
                            <div className="w-full md:w-1/2">
                                <SelectInput
                                    labelTitle="สถานะบริการ"
                                    options={STATUS_OPTIONS}
                                    {...register('status')} // RHF register
                                    error={errors.status}    // RHF error
                                />
                                {errors.status && <p className="text-error text-xs mt-1">{errors.status.message}</p>}
                            </div>

                            <div className="w-full md:w-1/2 flex items-end">
                                <div className="form-control">
                                    <label className="label cursor-pointer space-x-2">
                                        <span className="label-text">ต้องการ Internal Auth Key?</span>
                                        <input
                                            type="checkbox"
                                            className="checkbox checkbox-primary"
                                            {...register('auth_required')}
                                        />
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div className="w-full">
                            <InputText
                                labelTitle="ผู้พัฒนา/ทีม"
                                placeholder="Core AI Team"
                                type="text"
                                {...register('developer')}
                                error={errors.developer}
                            />
                        </div>


                    </div>

                    {/* 5. ปุ่ม Submit และ Cancel */}
                    <div className="modal-action mt-6">
                        <button type="button" className="btn btn-ghost" onClick={onClose} disabled={isSubmitting}>ยกเลิก</button>
                        <button type="submit" className={"btn btn-success" + (isSubmitting ? " loading" : "")} disabled={isSubmitting}>
                            {submitText}
                        </button>
                    </div>
                </form>
            </div>
        </dialog>
    );
}