import React from 'react';
import { useParams, Link } from 'react-router-dom';
import { useConfirmPasswordReset } from '../../services/authApi';
import ResetPasswordForm from '../../components/PasswordReset/ResetPasswordForm';

import { FaLock } from 'react-icons/fa'; // Icon Lock

export default function ResetConfirmPage() {
    // 1. Logic Management (รับพารามิเตอร์และ Hook)
    const { uid, token } = useParams();
    const confirmMutation = useConfirmPasswordReset();

    // 2. Pre-check: ตรวจสอบ URL Validity
    if (!uid || !token) {
        return (
            <div className="flex items-center justify-center h-screen bg-base-200 p-4">
                <div className="max-w-md alert alert-error text-center shadow-lg">
                    <FaLock className="w-6 h-6 mr-2" />
                    <span>ลิงก์รีเซ็ตรหัสผ่านไม่สมบูรณ์ หรือหมดอายุแล้ว</span>
                    <div className="mt-2 text-sm"><Link to="/login" className="link">กลับสู่หน้าล็อกอิน</Link></div>
                </div>
            </div>
        );
    }

    // 3. Presentation (A-List UI)
    return (
        <div className="flex items-center justify-center h-screen bg-base-200 p-4">
            <div className="card w-full max-w-lg shadow-2xl bg-white animate__animated animate__fadeInDown">

                <div className="card-body p-8">
                    <div className="text-center mb-6">
                        {/* ไอคอน Lock ขนาดใหญ่ พร้อมพื้นหลังสีอ่อน */}
                        <FaLock className="w-12 h-12 mx-auto text-error bg-error/10 p-3 rounded-full mb-3" />
                        <h1 className="text-3xl font-extrabold text-base-content">ยืนยันการตั้งรหัสผ่าน</h1>
                    </div>

                    {/* Rendering the separated Form Component */}
                    <ResetPasswordForm
                        uid={uid}
                        token={token}
                        confirmMutation={confirmMutation}
                    />

                </div>
            </div>
        </div>
    );
}