import { Link } from 'react-router-dom';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';

import { useRegisterMutation } from '../../services/authApi';
import { registrationSchema } from '../../schemas/authSchema';
import InputText from '../../components/InputText';
import RegisterInfoCard from '../../components/Registration/RegisterInfoCard';


export default function RegisterPage() {
    const registerMutation = useRegisterMutation();

    // ... (Hook Form Setup และ Logic เหมือนเดิม) ...
    const { register, handleSubmit, formState: { errors } } = useForm({
        resolver: yupResolver(registrationSchema),
        defaultValues: { username: '', email: '', phone_number: '', password: '', confirm_password: '' }
    });

    const onSubmit = (data) => {
        const { confirm_password: _, ...payload } = data;
        registerMutation.mutate(payload);
    };

    const loading = registerMutation.isPending;

    return (
        // Card หลัก: ใช้ h-full เพื่อให้เต็มหน้าจอ (ตาม AuthLayout.jsx ที่ถูกปรับ)
        <div className="card w-full h-full bg-base-100 rounded-none shadow-none">

            {/* Grid Layout: แบ่งเป็น 12 ส่วน, 6 ส่วนสำหรับ Guide (ซ้าย), 6 ส่วนสำหรับ Form (ขวา) */}
            <div className="grid grid-cols-1 md:grid-cols-12 h-full">

                {/* 1. คอลัมน์ซ้าย (Guide/Info Card) */}
                <div className="col-span-1 md:col-span-6 bg-base-200 p-8 h-full flex flex-col justify-center">
                    <RegisterInfoCard />
                </div>

                {/* 2. คอลัมน์ขวา (Form หลัก) */}
                {/* ใช้พื้นที่ 6/12 คอลัมน์ (50%), แสดง Form ที่นี่ */}
                <div className="col-span-1 md:col-span-6 py-12 px-8 lg:px-16 flex flex-col justify-center items-center
                            border-l border-base-300 md:border-l-0">
                    <div className="w-full max-w-lg">

                        <h2 className='text-3xl font-bold mb-8 text-center text-gray-800'>สร้างบัญชี DDO Console</h2>
                        <p className="text-sm text-center text-gray-600 mb-6">กรุณากรอกข้อมูลที่จำเป็นทั้งหมดเพื่อเข้าใช้งานระบบ MLOps Gateway</p>

                        <form onSubmit={handleSubmit(onSubmit)}>

                            {/* ... (ErrorText และ Input Fields ทั้งหมดเหมือนเดิม) ... */}

                            <div className="space-y-4">
                                <InputText labelTitle="ชื่อผู้ใช้งาน" placeholder="เช่น John.Doe2568" {...register('username')} error={errors.username} />
                                <InputText type="email" labelTitle="อีเมล" placeholder="จำเป็นสำหรับการกู้คืนรหัสผ่าน" {...register('email')} error={errors.email} />
                                <InputText type="tel" labelTitle="เบอร์โทรศัพท์ (ไม่บังคับ)" placeholder="สำหรับติดต่อเร่งด่วน" {...register('phone_number')} error={errors.phone_number} />
                                <InputText type="password" labelTitle="รหัสผ่าน" placeholder="ความยาวอย่างน้อย 8 ตัวอักษร" {...register('password')} error={errors.password} />
                                <InputText type="password" labelTitle="ยืนยันรหัสผ่าน" placeholder="กรุณากรอกรหัสผ่านซ้ำ" {...register('confirm_password')} error={errors.confirm_password} />
                            </div>

                            <button
                                type="submit"
                                className={"btn mt-8 w-full btn-primary rounded-md shadow-lg" + (loading ? " loading" : "")}
                                disabled={loading}
                            >
                                {loading ? 'กำลังลงทะเบียน...' : 'ลงทะเบียน'}
                            </button>

                            <div className='text-center mt-6 text-gray-600'>
                                เป็นสมาชิกอยู่แล้ว?
                                <Link to="/login">
                                    <span className="inline-block text-blue-600 hover:underline ml-1">
                                        เข้าสู่ระบบ
                                    </span>
                                </Link>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    );
}