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

// Imports Components และ Hooks
import InputText from '../../components/InputText';
import ErrorText from '../../components/ErrorText';
import { useRequestPasswordReset } from '../../services/authApi';
import ResetInfoCard from '../../components/PasswordReset/ResetInfoCard';

// ----------------------------------------------------
// Schema สำหรับตรวจสอบข้อมูล (รับแค่อีเมล)
// ----------------------------------------------------
const requestSchema = yup.object().shape({
    email: yup.string().email('รูปแบบอีเมลไม่ถูกต้อง').required('กรุณากรอกอีเมลที่ใช้ลงทะเบียน'),
});

export default function ForgotPasswordPage() {
    const requestMutation = useRequestPasswordReset();

    // 1. Hook Form Setup
    const {
        register,
        handleSubmit,
        formState: { errors }
    } = useForm({
        resolver: yupResolver(requestSchema),
    });

    const onSubmit = (data) => {
        // ส่งคำขอรีเซ็ตผ่าน Mutation
        requestMutation.mutate(data);
    };

    const loading = requestMutation.isPending;

    return (
        // Layout หลัก: ใช้ h-full เพื่อให้เต็มหน้าจอ
        <div className="card w-full h-full bg-base-100 rounded-none shadow-none">

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

                {/* 1. คอลัมน์ซ้าย (คำแนะนำและช่วยเหลือ) */}
                <div className="col-span-1 md:col-span-6 bg-base-200 h-full flex flex-col justify-center rounded-none">
                    <ResetInfoCard />
                </div>

                {/* 2. คอลัมน์ขวา (Form หลัก) */}
                <div className="col-span-1 md:col-span-6 py-12 px-8 lg:px-16 flex flex-col justify-center items-center">
                    <div className="w-full max-w-lg">

                        <h2 className="text-3xl font-bold mb-4 text-base-content text-center">ลืมรหัสผ่าน?</h2>
                        <p className="text-sm text-gray-600 mb-6 text-center">
                            กรุณากรอกอีเมลของคุณเพื่อรับลิงก์สำหรับรีเซ็ตรหัสผ่าน
                        </p>

                        <form onSubmit={handleSubmit(onSubmit)}>
                            <InputText
                                type="email"
                                labelTitle="อีเมล"
                                placeholder="อีเมลที่ใช้ลงทะเบียน"
                                {...register('email')}
                                error={errors.email}
                            />

                            {requestMutation.isError && (
                                <ErrorText styleClass="my-4">
                                    {requestMutation.error.message || "การส่งคำขอล้มเหลว"}
                                </ErrorText>
                            )}

                            <button
                                type="submit"
                                className={"btn btn-primary w-full mt-6" + (loading ? " loading" : "")}
                                disabled={loading}
                            >
                                {loading ? 'กำลังส่งคำขอ...' : 'ส่งคำขอรีเซ็ต'}
                            </button>
                        </form>

                        <div className="text-center mt-4">
                            <Link to="/login" className="link link-hover text-sm">ย้อนกลับไปหน้าล็อกอิน</Link>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    );
}