import { useState } from 'react';
import { Link } from 'react-router-dom';

// นำเข้า Hooks และ Library ที่จำเป็น
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';

// นำเข้า Hook API และ Components
import { useLoginMutation } from '../services/authApi';
import LandingIntro from './LandingIntro';
import InputText from './InputText'; // ตรวจสอบ Path ให้ถูกต้อง

import { loginSchema } from '../schemas/authSchema'; // ตรวจสอบ Path ให้ถูกต้อง


export default function LoginForm() {
    const loginMutation = useLoginMutation();
    const [apiErrorMessage, setApiErrorMessage] = useState("");

    const {
        register,
        handleSubmit,
        formState: { errors }
    } = useForm({
        resolver: yupResolver(loginSchema),
        defaultValues: {
            username: '',
            password: ''
        }
    });

    const onSubmit = (data) => {
        setApiErrorMessage("");

        // เรียกใช้ Mutation (Token + Fetch User)
        loginMutation.mutate({
            username: data.username,
            password: data.password
        }, {
            onError: (error) => {
                setApiErrorMessage(error.message || "การล็อกอินล้มเหลว กรุณาตรวจสอบข้อมูล");
            }
        });
    }

    const loading = loginMutation.isPending;

    return (
        // Card หลัก: ปรับ bg-white, shadow, border-radius ตามสไตล์ Contabo
        <div className="card w-full shadow-lg rounded-xl bg-white min-h-full">
            <div className="grid md:grid-cols-2 grid-cols-1">

                {/* คอลัมน์ซ้าย: Intro/Features */}
                <div className="hidden md:block">
                    <LandingIntro />
                </div>

                {/* คอลัมน์ขวา: Form Wrapper (จัดกึ่งกลางเนื้อหา) */}
                <div className='py-12 px-10 flex flex-col justify-center items-center'>

                    {/* Div จำกัดความกว้างของฟอร์มจริง ๆ */}
                    <div className="w-full max-w-sm">

                        {/* Text: ปรับเป็นภาษาไทย */}
                        <h2 className='text-3xl font-bold mb-8 text-center text-gray-800'>ยินดีต้อนรับกลับมา</h2>
                        <p className='text-sm mb-6 text-center text-gray-600 leading-relaxed'>
                            ที่นี่คุณสามารถเข้าสู่ระบบ DDO Console ได้ โปรดทราบว่าข้อมูลประจำตัวนี้อาจแตกต่างจากข้อมูลประจำตัวสำหรับระบบอื่น ๆ
                        </p>

                        <form onSubmit={handleSubmit(onSubmit)}>

                            {/* API Error Alert */}
                            {apiErrorMessage && (
                                <div className="alert alert-error text-sm my-4 rounded-md">
                                    <svg xmlns="http://www.w3.org/2000/svg" className="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                                    <span>{apiErrorMessage}</span>
                                </div>
                            )}

                            <div className="mb-4">
                                {/* Username Input: เปลี่ยนเป็น 'ชื่อผู้ใช้' */}
                                <InputText
                                    type="text"
                                    containerStyle="mt-4"
                                    labelTitle="ชื่อผู้ใช้"
                                    placeholder="ชื่อผู้ใช้ของคุณ"
                                    {...register('username')} // ฟิลด์ใน RHF ยังคงใช้ 'username'
                                    error={errors.username}
                                />

                                {/* Password Input: เปลี่ยนเป็น 'รหัสผ่าน' */}
                                <InputText
                                    type="password"
                                    containerStyle="mt-4"
                                    labelTitle="รหัสผ่าน"
                                    placeholder="********"
                                    {...register('password')}
                                    error={errors.password}
                                />
                            </div>

                            {/* Checkbox และ Link ลืมรหัสผ่าน */}
                            <div className='flex justify-between items-center text-sm mt-6'>
                                <label className="flex items-center space-x-2 text-gray-600">
                                    <input type="checkbox" className="checkbox checkbox-primary checkbox-sm" {...register('remember_me')}/>
                                    <span>จดจำฉัน</span>
                                </label>
                                <Link to="/forgot-password">
                                    <span className="inline-block text-blue-600 hover:underline hover:cursor-pointer transition duration-200">
                                        ลืมรหัสผ่าน?
                                    </span>
                                </Link>
                            </div>

                            <button
                                type="submit"
                                className={"btn mt-8 w-full btn-primary rounded-md shadow-lg transition duration-300 ease-in-out" + (loading ? " loading" : "")}
                                disabled={loading}
                            >
                                {loading ? 'กำลังเข้าสู่ระบบ...' : 'เข้าสู่ระบบ'}
                            </button>

                            {/* "ยังไม่มีบัญชีใช่ไหม?" */}
                            <div className='text-center mt-6 text-gray-600'>
                                ยังไม่มีบัญชีใช่ไหม?
                                <Link to="/register">
                                    <span className="inline-block text-blue-600 hover:underline hover:cursor-pointer transition duration-200 ml-1">
                                        ลงทะเบียน
                                    </span>
                                </Link>
                            </div>
                        </form>
                    </div> {/* สิ้นสุด Div จำกัดความกว้าง */}

                </div> {/* สิ้นสุดคอลัมน์ขวา */}
            </div>
        </div>
    )
}