'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';

export default function PasswordFindPage() {
    const router = useRouter();
    const [email, setEmail] = useState('');
    const [newPassword, setNewPassword] = useState('');
    const [confirmPassword, setConfirmPassword] = useState('');
    const [emailError, setEmailError] = useState('');
    const [newPasswordError, setNewPasswordError] = useState('');
    const [confirmPasswordError, setConfirmPasswordError] = useState('');
    const [isCodeSent, setIsCodeSent] = useState(false);

    const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const value = e.target.value;
        setEmail(value);
        if (emailError) {
            setEmailError('');
        }
        // 이메일이 변경되면 인증 상태 초기화
        if (isCodeSent) {
            setIsCodeSent(false);
        }
    };

    const handleNewPasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const value = e.target.value;
        setNewPassword(value);
        if (newPasswordError) {
            setNewPasswordError('');
        }
        // 새 비밀번호가 변경되면 확인 비밀번호도 다시 검증
        if (confirmPassword && value !== confirmPassword) {
            setConfirmPasswordError('비밀번호와 일치하지 않아요.');
        } else if (confirmPassword && value === confirmPassword) {
            setConfirmPasswordError('');
        }
    };

    const handleConfirmPasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const value = e.target.value;
        setConfirmPassword(value);
        if (confirmPasswordError) {
            setConfirmPasswordError('');
        }
        // 비밀번호 확인 실시간 검증
        if (value && newPassword && value !== newPassword) {
            setConfirmPasswordError('비밀번호와 일치하지 않아요.');
        } else if (value && newPassword && value === newPassword) {
            setConfirmPasswordError('');
        }
    };

    const validateEmail = (email: string) => {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return emailRegex.test(email);
    };

    const validatePassword = (password: string) => {
        return password.length >= 8 && password.length <= 16 && /[a-zA-Z]/.test(password) && /[0-9]/.test(password);
    };

    const handleSendCode = () => {
        if (!email.trim()) {
            setEmailError('이메일을 입력해 주세요.');
            return;
        }
        if (!validateEmail(email)) {
            setEmailError('올바른 이메일을 입력해주세요.');
            return;
        }
        // TODO: 인증번호 발송 API 호출
        setIsCodeSent(true);
        setEmailError('');
    };

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        setEmailError('');
        setNewPasswordError('');
        setConfirmPasswordError('');

        let isValid = true;

        if (!email.trim()) {
            setEmailError('이메일을 입력해 주세요.');
            isValid = false;
        } else if (!validateEmail(email)) {
            setEmailError('올바른 이메일을 입력해주세요.');
            isValid = false;
        }

        if (!isCodeSent) {
            setEmailError('인증번호를 발송해주세요.');
            isValid = false;
        }

        if (!newPassword.trim()) {
            setNewPasswordError('새 비밀번호를 입력해 주세요.');
            isValid = false;
        } else if (!validatePassword(newPassword)) {
            setNewPasswordError('비밀번호는 8~16자의 영문/숫자를 포함해야 합니다.');
            isValid = false;
        }

        if (!confirmPassword.trim()) {
            setConfirmPasswordError('새 비밀번호 확인을 입력해 주세요.');
            isValid = false;
        } else if (newPassword !== confirmPassword) {
            setConfirmPasswordError('비밀번호와 일치하지 않아요.');
            isValid = false;
        }

        if (isValid) {
            // TODO: 비밀번호 재설정 API 호출
            router.push('/login');
        }
    };

    const canSubmit = email.trim() !== '' &&
        newPassword.trim() !== '' &&
        confirmPassword.trim() !== '' &&
        isCodeSent &&
        newPassword === confirmPassword &&
        validatePassword(newPassword);

    return (
        <div className="relative flex flex-col min-h-screen bg-white">
            {/* 메인 콘텐츠 영역 - 카피라이트와 브라우저 최상단 사이의 중앙 */}
            <div className="flex-1 flex flex-col items-center justify-center pb-[100px]">
                {/* 제목 */}
                <h1 className="font-bold text-[#1D1D1D] text-[32px] leading-tight">
                    비밀번호 재설정
                </h1>

                {/* 안내 문구 */}
                <p className="text-[#515151] text-[18px] font-medium leading-normal mt-[40px]">
                    비밀번호 재설정을 위해 아래 정보를 입력해 주세요.
                </p>

                {/* 입력 폼 */}
                <form
                    className="w-[829px] border border-[#b9b9b9] rounded-[8px] mt-[40px] px-[31px] py-[29px]"
                    onSubmit={handleSubmit}
                >
                    <div className="flex flex-col gap-[20px]">
                        {/* 이메일(아이디) + 인증번호 발송 */}
                        <div className="flex flex-col">
                            <div className="flex gap-[10px] items-center justify-between h-[42px]">
                                <span className="text-[#515151] text-[18px] font-medium w-[177px]">
                                    이메일(아이디)
                                </span>
                                <input
                                    type="email"
                                    value={email}
                                    onChange={handleEmailChange}
                                    className={`h-[42px] px-[10px] text-[18px] font-medium rounded-[8px] border placeholder:text-[#b9b9b9] bg-white w-[401px] focus:border-[#1669CA] focus:outline-none ${emailError ? 'border-[#E85D5D] text-[#E85D5D]' : 'border-[#b9b9b9] text-[#515151]'}`}
                                    placeholder="이메일을 입력해 주세요."
                                />
                                <button
                                    type="button"
                                    onClick={handleSendCode}
                                    className="bg-[#2B82E8] rounded-[10px] px-[10px] text-[18px] font-medium text-white h-[43px] w-[158px] transition hover:bg-[#1669ca] flex items-center justify-center"
                                >
                                    인증번호 발송
                                </button>
                            </div>
                            {emailError && (
                                <p className="text-[13px] text-[#E85D5D] ml-[187px] mt-[16px]">{emailError}</p>
                            )}
                            {isCodeSent && !emailError && (
                                <p className="text-[#1669ca] text-[12px] font-medium ml-[187px] mt-[16px]">
                                    인증번호가 발송되었습니다. 이메일을 확인해 주세요.
                                </p>
                            )}
                        </div>

                        {/* 새 비밀번호 */}
                        <div className="flex flex-col">
                            <div className="flex gap-[16px] items-center h-[42px]">
                                <span className="text-[#515151] text-[18px] font-medium w-[177px]">
                                    새 비밀번호
                                </span>
                                <input
                                    type="password"
                                    value={newPassword}
                                    onChange={handleNewPasswordChange}
                                    className={`flex-1 h-[42px] px-[10px] text-[18px] font-medium rounded-[8px] border placeholder:text-[#b9b9b9] bg-white focus:border-[#1669CA] focus:outline-none ${newPasswordError ? 'border-[#E85D5D] text-[#E85D5D]' : 'border-[#b9b9b9] text-[#515151]'}`}
                                    placeholder="새 비밀번호를 입력해 주세요."
                                />
                            </div>
                            {newPasswordError && (
                                <p className="text-[13px] text-[#E85D5D] ml-[193px] mt-[16px]">{newPasswordError}</p>
                            )}
                        </div>

                        {/* 새 비밀번호 확인 */}
                        <div className="flex flex-col">
                            <div className="flex gap-[16px] items-center h-[42px]">
                                <span className="text-[#515151] text-[18px] font-medium w-[177px]">
                                    새 비밀번호 확인
                                </span>
                                <input
                                    type="password"
                                    value={confirmPassword}
                                    onChange={handleConfirmPasswordChange}
                                    className={`flex-1 h-[42px] px-[10px] text-[18px] font-medium rounded-[8px] border placeholder:text-[#b9b9b9] bg-white focus:border-[#1669CA] focus:outline-none ${confirmPasswordError ? 'border-[#E85D5D] text-[#E85D5D]' : 'border-[#b9b9b9] text-[#515151]'}`}
                                    placeholder="새 비밀번호를 다시 입력해 주세요."
                                />
                            </div>
                            {confirmPasswordError && (
                                <p className="text-[13px] text-[#E85D5D] ml-[193px] mt-[16px]">{confirmPasswordError}</p>
                            )}
                        </div>
                    </div>
                </form>

                {/* 버튼 영역 */}
                <div className="mt-[54px] flex gap-[21px]">
                    <Link
                        href="/login"
                        className="border border-[#1669ca] bg-white rounded-[10px] h-[55px] w-[334px] flex items-center justify-center font-medium text-[#515151] text-[18px] hover:bg-[#EDF4FC] transition"
                    >
                        돌아가기
                    </Link>
                    <button
                        type="button"
                        onClick={handleSubmit}
                        disabled={!canSubmit}
                        className={`rounded-[10px] h-[55px] w-[334px] font-medium text-[18px] transition flex items-center justify-center
            ${canSubmit
                                ? 'bg-[#2B82E8] text-white hover:bg-[#1669ca]'
                                : 'bg-[#b9b9b9] text-white cursor-not-allowed'
                            }`}
                    >
                        비밀번호 재설정
                    </button>
                </div>
            </div>

            {/* 카피라이트 */}
            <footer className="absolute bottom-[51.5px] left-1/2 -translate-x-1/2 flex flex-col items-center">
                <p className="text-[16px] text-[rgba(0,0,0,0.55)] leading-[1.45] font-medium tracking-[-0.08px]">
                    Copyright ⓒ 2025 XL LMS. All rights reserved
                </p>
            </footer>
        </div>
    );
}