const { useState, createContext, useContext, useEffect } = React;

// データのコンテキストを作成
const DataContext = createContext();

//パスワードをhasu化するためのcrypto　API
async function hashPassword(password) {
	const encoder = new TextEncoder();
	const data = encoder.encode(password);
	const hashBuffer = await crypto.subtle.digest('SHA-256', data);
	const hashArray = Array.from(new Uint8Array(hashBuffer));
	const hashHex = hashArray.map(byte => byte.toString(16).padStart(2, '0')).join('');
	return hashHex;
}

//データを管理するDataprovider-------------------------------------------
function DataProvider({ children }) {
	const [LOGIN, setLOGIN] = useState('');
	const [NAME, setNAME] = useState('');
	const [BIRTHDAY, setBIRTHDAY] = useState('');
	const [EMAIL, setEMAIL] = useState('');
	const [PASSWORDHASH, setPASSWORDHASH] = useState('');
	const [errors, setErrors] = useState({
		EMAIL: false,
		BIRTHDAY: false,
		SEI: false,
		MEI: false,
		POPUPNEWPASSWORD: false,
		POPUPCOMFIRMPASSWORD: false
	});
	const [errorMessages, setErrorMessages] = useState({
		EMAIL: '',
		BIRTHDAY: '',
		SEI: '',
		MEI: '',
		POPUPNEWPASSWORD: '',
		POPUPCOMFIRMPASSWORD: ''
	});

	//ポップアップ専用
	//パスワード再設定によりユーザー検証
	const [isPWRecreatePopup, setIsPWRecreatePopup] = useState(false);
	//パスワード再設定ポップアップ
	const [isPasswordResetPopup, setIsPasswordResetPopup] = useState(false);


	return (
		// 選択された値と、それをセットする関数をコンテキストとして提供
		<DataContext.Provider value={{
			LOGIN, setLOGIN,
			NAME, setNAME,
			EMAIL, setEMAIL,
			BIRTHDAY, setBIRTHDAY,
			PASSWORDHASH, setPASSWORDHASH,
			errors, setErrors,
			errorMessages, setErrorMessages,
			isPWRecreatePopup, setIsPWRecreatePopup,
			isPasswordResetPopup, setIsPasswordResetPopup
		}}>
			{children}
		</DataContext.Provider>
	);
}

//-------------------------------------------------------------------------------------
//全体を表すコンポーネント
function Member_Login() {
	return (
		<DataProvider>
			<LoginContent />
		</DataProvider>
	);
}
//全体を表すコンポーネント
function LoginContent() {
	const { setLOGIN } = useContext(DataContext);

	useEffect(() => {
		const fetchUserData = async () => {
			const userId = sessionStorage.getItem('USER_ID');
			if (userId) {
				try {
					const response = await fetch(`/Regist/getUserById?USER_ID=${userId}`);
					const data = await response.json();
					if (data && data.length > 0) {
						console.log("data:", data[0]);
						setLOGIN(data[0].name);
					} else {
						alert('会員情報の取得に失敗しました。');
					}
				} catch (error) {
					console.error('会員情報取得エラー:', error);
					alert('会員情報の取得中にエラーが発生しました。');
				}
			}
		};

		fetchUserData();
	}, [setLOGIN]);

	return (
		<div id="member_Login">
			<TOP_HEADER />
			<LOGIN_CONTAINER />
			<LOFIN_FORM_FOOTER />
		</div>
	);
}

// Member_RegistコンポーネントをDOMにレンダリング
const memberElement = document.getElementById('member_Login');
const memberRoot = ReactDOM.createRoot(memberElement);
memberRoot.render(<Member_Login />);


//-----------------------------------------------------------------------------------------------------
//headerのコンポーネント
function TOP_HEADER() {
	return (
		<div className="top_header">
			<LOGO />
			<TOP_TAB />
		</div>
	);
}
//logoのコンポーネント
function LOGO() {
	return (
		<div className="logo">
			<a href="/" className="logo-link">
				<img src="./image/logo_healthma.png" width="150" alt="LOGO" />
			</a>

		</div>

	);
}
//タブのコンポーネント
function TOP_TAB() {
	const { LOGIN } = useContext(DataContext);

	const handleLoginClick = (event) => {
		event.preventDefault();
		// dorpdownを表示する
		const dropdown = document.getElementById("login_dropdown");
		if (dropdown) {
			dropdown.style.display = dropdown.style.display === "block" ? "none" : "block";
		}
	};
	const MenuBarOnClick = (event) => {
		event.preventDefault();
		// dorpdownを表示する
		const menuBar = document.getElementById("top_tab");
		if (menuBar) {
			menuBar.style.display =
				menuBar.style.display === "block" ? "none" : "block";
		}
	};

	return (
		<div className="top_header" id="top_header_position">
			<div className="menu">
				<div className="toplogo">
					<a href="/" className="logo-link">
						<img src="image/logo_healthma.png" width="150" alt="LOGO" />
					</a>
				</div>
			</div>
			<div className="menu-toggle" id="menu-toggle" onClick={MenuBarOnClick}>
				&#9776;
			</div>

			<div className="top_tab" id="top_tab">
				<div className="menulogo">
					<a href="/" className="logo-link">
						<img src="image/logo_healthma.png" width="150" alt="LOGO" />
					</a>
					<div id="top_memu_close" onClick={MenuBarOnClick}>
						<span className="cross">✖️</span>
					</div>
				</div>

				<div className="member_login">
					<a
						href="javascript:void(0);"
						className="member-link"
						id="login_button"
					>
						ログイン
					</a>
					<hr />
					<div id="login_dropdown" className="dropdown_content">
						<a
							href="/member_login_general"
							className="member_login_general"
							style={{ paddingBottom: "5px" }}
						>
							一般会員の方
						</a>
					</div>
				</div>
				<div className="our_story">
					<a href="/aboutus" className="aboutus-link">
						私たちについて
					</a>
					<hr />
				</div>
				<div className="service">
					<a href="/service" className="service-link">
						サービス
					</a>
					<hr />
				</div>
				<div className="doctor_search">
					<a href="/product_search" className="doctor_search-link">
						薬膳検索
					</a>
					<hr />
				</div>
				<div className="life_plan">
					<a href="/lifeplan" className="lifeplan-link">
						ライフプラン
					</a>
					<hr />
				</div>
				<div className="column">
					<a href="/colum" className="colum-link">
						コラム
					</a>
					<hr />
				</div>
				<div className="consultation">
					<a href="/consultation" className="consultation-link">
						問い合わせ
					</a>
					<hr />
				</div>

				<div className="p-footer-menu-item">
					<ul className="menulist">
						<li>
							<a href="">
								<h4 className="company">運営会社</h4>
							</a>
						</li>
						<li>
							<a href="">
								<h4 className="terms">利用規約</h4>
							</a>
						</li>
						<li>
							<a href="/consultation">
								<h4 className="contact">お問い合わせ</h4>
							</a>
						</li>
						<li>
							<a href="/personal_infomation_member">
								<h4 className="privacy-policy">プライバシーポリシー</h4>
							</a>
						</li>
					</ul>
				</div>

				<span className="officalsns">公式SNS</span>
				<div className="snsBox">
					<a href="https://x.com/Healthma_jp">
						<img src="image/foot_x.png" alt="x" className="x-icon" />
						<p className="sns-text-x">X</p>
					</a>
					<a href="https://www.instagram.com/healthma_jp/">
						<img
							src="image/foot_instagram.png"
							alt="instagram"
							className="instagram-icon"
						/>
						<p className="sns-text-instagram">Instagram</p>
					</a>
					<a href="https://lin.ee/ye6pc04">
						<img src="image/foot_line.png" alt="line" className="line-icon" />
						<p className="sns-text-line">LINE</p>
					</a>
				</div>
			</div>
		</div>
	);
}

//-----------------------------------------------------------------------------------------------------
//ログインフォームのコンポーネント
function LOGIN_CONTAINER() {
	return (
		<div className="login_container">
			<LOGIN_MAIN />
		</div>
	);
}

function LOGIN_MAIN() {
	return (
		<div className="login_main">
			<h1 className="login_title">
				ログイン
			</h1>
			<main role="main">
				<section className="login_form">
					<LOGIN_INNER />
					<TO_REGIST_INNER />
				</section>
			</main>
		</div>
	);
}

//Login部分のコンポーネント
function LOGIN_INNER() {
	return (
		<div className="login_inner">
			<LOGIN_WRAP />
		</div>
	);
}
function LOGIN_WRAP() {
	return (
		<div className="login_wrap">
			<FORM_MEMBER_TITLE />
			<FORM_MEMBER_TEXT />
			<LOGIN_INPUT_AREA />
			{/* <p className="login_button">
                <a href="" className="login_button_link">
                    ログイン
                </a>
            </p> */}
			<MEMBER_FOOTER_CONTAINER />
		</div>
	);
}
function FORM_MEMBER_TITLE() {
	return (
		<div className="form_member_title">
			<h1>会員の方</h1>
		</div>
	);
}
function FORM_MEMBER_TEXT() {
	return (
		<div className="form_member_text">
			<p>メールアドレスとパスワードでログイン</p>
		</div>
	);
}
function LOGIN_INPUT_AREA() {
	const { setEMAIL, setPASSWORDHASH } = useContext(DataContext);
	const [email, setEmail] = useState('');
	const [password, setPassword] = useState('');
	const [errorMessage, setErrorMessage] = useState('');
	const [emailErrorMessage, setEmailErrorMessage] = useState('');
	const [passwordErrorMessage, setPasswordErrorMessage] = useState('');

	const handleLogin = async (event) => {
		event.preventDefault();
		if (email == '') {
			setEmailErrorMessage('メールアドレスを入力してください');
			return;
		} else if (!validateEmail(email)) {
			setEmailErrorMessage('正しいメールアドレスの形式で入力をお願いします');
			return;
		}
		setEMAIL(email);

		if (password == '') {
			setPasswordErrorMessage('パスワードを入力してください');
			return;
		}

		try {
			const hashedPassword = await hashPassword(password);
			setPASSWORDHASH(hashedPassword);

			const response = await fetch('/Regist/getUser', {
				method: 'POST',
				headers: {
					'Content-Type': 'application/x-www-form-urlencoded',
				},
				body: `EMAIL=${encodeURIComponent(email)}&PASSWORDHASH=${encodeURIComponent(hashedPassword)}`,
			});

			const data = await response.json();
			if (data && data.length > 0) {
				console.log("data:", data[0]);
				const userId = data[0].user_ID;
				console.log("user_id:", userId);
				if (userId !== undefined) {
					sessionStorage.setItem('USER_ID', userId);
					window.location.href = '/mypage_appointment';
				} else {
					setErrorMessage('このアカウントはまだ会員登録していません。');
				}
			} else {
				setErrorMessage('メールアドレスまたはパスワードが正しくありません。もう一度ご確認の上、入力してください。');
			}
		} catch (error) {
			console.error('ログインエラー:', error);
			setErrorMessage('ログイン中にエラーが発生しました。');
		}
	};

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

	const handleEmailBlur = () => {
		if (email == '') {
			setEmailErrorMessage('メールアドレスを入力してください');
		} else if (!validateEmail(email)) {
			setEmailErrorMessage('正しいメールアドレスの形式で入力をお願いします');
		} else {
			setEmailErrorMessage('');
		}
	};

	const handlePasswordBlur = () => {
		if (password == '') {
			setPasswordErrorMessage('パスワードを入力してください');
		} else {
			setPasswordErrorMessage('');
		}
	};

	return (
		<div className="login_input_area">
			<div className="email_inputbox">
				<input
					className={`email ${emailErrorMessage ? 'input_error' : ''}`}
					type="email"
					maxLength="255"
					id="email"
					placeholder="メールアドレス"
					value={email}
					onChange={(e) => setEmail(e.target.value)}
					onBlur={handleEmailBlur} />
			</div>
			{emailErrorMessage && (
				<div className="email_error_message">{emailErrorMessage}</div>
			)}
			<div className="password_inputbox">
				<input
					className={`password ${passwordErrorMessage ? 'input_error' : ''}`}
					type="password"
					maxLength="64"
					id="password"
					placeholder="パスワード"
					value={password}
					onChange={(e) => setPassword(e.target.value)}
					onBlur={handlePasswordBlur} />
			</div>
			{passwordErrorMessage && (
				<div className="password_error_message">{passwordErrorMessage}</div>
			)}
			{/* ログインエラーメッセージ */}
			{errorMessage && (
				<div className="login_error_message">
					{errorMessage.split('。')[0]}。<br />
					{errorMessage.split('。')[1]}
				</div>
			)}
			{/* ログインボタン */}
			<p className="login_button">
				<a href="#" className="login_button_link" onClick={handleLogin}>
					ログイン
				</a>
			</p>
		</div>
	);
}

function MEMBER_FOOTER_CONTAINER() {
	const { NAME, EMAIL, BIRTHDAY, setLOGIN,
		isPasswordResetPopup, setIsPasswordResetPopup,
		isPWRecreatePopup, setIsPWRecreatePopup } = useContext(DataContext);


	//PWrecreatePopupパスワード再設定のポップアップを呼び出す--------------------------------------------------
	const handleOpenPWreCreatePopup = () => {
		sessionStorage.removeItem('USER_ID');
		setLOGIN('');
		setIsPWRecreatePopup(true);
	}
	const handleConfirm = async () => {
		try {
			const response = await fetch('/Regist/getUserforPassword', {
				method: 'POST',
				headers: {
					'Content-Type': 'application/x-www-form-urlencoded',
				},
				body: `EMAIL=${encodeURIComponent(EMAIL)}&BIRTHDAY=${encodeURIComponent(BIRTHDAY)}&NAME=${encodeURIComponent(NAME)}`,
			});

			const data = await response.json();
			if (data && data.length > 0) {
				console.log("data:", data[0]);
				const userId = data[0].user_ID;
				console.log("user_id:", userId);
				if (userId !== undefined) {
					sessionStorage.setItem('USER_ID', userId);
				} else {
					alert('このアカウントはまだ会員登録していません。');
				}
			} else {
				alert('メールアドレス、生年月日または氏名が正しくありません！');
				return;
			}
		} catch (error) {
			console.error('アカウント確認エラー:', error);
			setErrorMessage('アカウントを確認中にエラーが発生しました。');
		}

		setIsPWRecreatePopup(false);
		await handleSubmit();
	}

	const handleCancel = () => {
		setIsPWRecreatePopup(false);
	}

	const handleSubmit = async () => {
		setIsPasswordResetPopup(true);
	}

	return (
		<div className="member_footer_container">
			{/* パスワードrecreate */}
			{/* <div className="member_password_recreate">
                <a href="">パスワードを忘れたら</a>
            </div> */}
			<div className="member_password_recreate_display">
				<button
					className="member_password_recreate"
					type="button"
					onClick={handleOpenPWreCreatePopup} >
					パスワードを忘れたら
				</button>
				{isPWRecreatePopup && (
					<PWrecreatePopup
						onConfirm={handleConfirm}
						onCancel={handleCancel}
					/>
				)}
			</div>
			{isPasswordResetPopup && (
				<PasswordResetPopup onClose={() => setIsPasswordResetPopup(false)} />
			)}
		</div>
	);
}

//----------------------------------- ポップアップ ---------------------------------------------------
//パスワード再設定によりユーザー検証pop-upのコンポーネント
function PWrecreatePopup({ onConfirm, onCancel }) {
	const { NAME, setNAME, EMAIL, setEMAIL, BIRTHDAY, setBIRTHDAY,
		errors, setErrors, errorMessages, setErrorMessages } = useContext(DataContext);
	// const [mail, setMail] = useState('');
	// const [birth, setBirth] = useState('');
	const [sei, setSei] = useState('');
	const [mei, setMei] = useState('');

	//NAMEはseiとmeiの結合
	useEffect(() => {
		const fullName = `${sei} ${mei}`;
		setNAME(fullName);
	}, [sei, mei, setNAME]);


	//メールアドレスの正規化
	const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

	//全角数字を半角数字に変換する
	const convertToHalfWidth = (str) => {
		return str.replace(/[０-９]/g, (s) => {
			return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
		}).replace(/－/g, '-');
	};

	// 入力された日付をYYYY-MM-DDの形式に標準化する
	const standardizeDate = (date) => {
		const parts = date.split('-');
		if (parts.length === 3) {
			const year = parts[0];
			const month = parts[1].length === 1 ? '0' + parts[1] : parts[1];
			const day = parts[2].length === 1 ? '0' + parts[2] : parts[2];
			return `${year}-${month}-${day}`;
		}
		return date;
	};

	//数字を含めるかどうかを確認
	const containsNumbers = (str) => /[0-9０-９]/.test(str);

	//mailのinputboxのリマインド
	const handleBlurEMAIL = () => {
		if (EMAIL === '') {
			setErrors(prev => ({ ...prev, EMAIL: true }));
			setErrorMessages(prev => ({ ...prev, EMAIL: '入力お願いします' }));
		} else if (!emailPattern.test(EMAIL)) {
			setErrors(prev => ({ ...prev, EMAIL: true }));
			setErrorMessages(prev => ({ ...prev, EMAIL: '正しいメールアドレスの形式で入力をお願いします' }));
		} else {
			setErrors(prev => ({ ...prev, EMAIL: false }));
			setErrorMessages(prev => ({ ...prev, EMAIL: '' }));
		}
	}
	//birthdayのinputboxのリマインド
	const handleBlurBIRTHDAY = () => {
		//フォーカスアウトすると全角数字を半角数字に自動的に変換する
		let halfWidthBIRTHDAY = convertToHalfWidth(BIRTHDAY);
		if (halfWidthBIRTHDAY === '') {
			setErrors(prev => ({ ...prev, BIRTHDAY: true }));
			setErrorMessages(prev => ({ ...prev, BIRTHDAY: '入力お願いします' }));
		} else if (!/^\d{4}-\d{1,2}-\d{1,2}$/.test(halfWidthBIRTHDAY)) {
			setErrors(prev => ({ ...prev, BIRTHDAY: true }));
			setErrorMessages(prev => ({ ...prev, BIRTHDAY: '生年月日は「YYYY-MM-DD」の形式で入力してください' }));
		} else {
			halfWidthBIRTHDAY = standardizeDate(halfWidthBIRTHDAY);
			setErrors(prev => ({ ...prev, BIRTHDAY: false }));
			setErrorMessages(prev => ({ ...prev, BIRTHDAY: '' }));
		}
		setBIRTHDAY(halfWidthBIRTHDAY);
	};

	//seiのinputboxのリマインド
	const handleBlurSei = () => {
		if (!sei) {
			setErrors(prev => ({ ...prev, SEI: true }));
			setErrorMessages(prev => ({ ...prev, SEI: '入力お願いします' }));
		} else if (containsNumbers(sei)) {
			setErrors(prev => ({ ...prev, SEI: true }));
			setErrorMessages(prev => ({ ...prev, SEI: '数字を含めないでください' }));
		} else {
			setErrors(prev => ({ ...prev, SEI: false }));
			setErrorMessages(prev => ({ ...prev, SEI: '' }));
		}
	};

	//meiのinputboxのリマインド
	const handleBlurMei = () => {
		if (!mei) {
			setErrors(prev => ({ ...prev, MEI: true }));
			setErrorMessages(prev => ({ ...prev, MEI: '入力お願いします' }));
		} else if (containsNumbers(mei)) {
			setErrors(prev => ({ ...prev, MEI: true }));
			setErrorMessages(prev => ({ ...prev, MEI: '数字を含めないでください' }));
		} else {
			setErrors(prev => ({ ...prev, MEI: false }));
			setErrorMessages(prev => ({ ...prev, MEI: '' }));
		}
	};



	//現在登録されているメールアドレスと一致するかどうかを確認
	const handleConfirmClick = async () => {
		if (EMAIL === '' && BIRTHDAY === '' && sei === '' && mei === '') {
			alert('情報を入力してください！');
			return;
		} else if (EMAIL === '') {
			alert('メールアドレスを入力してください！');
			return;
		} else if (BIRTHDAY === '') {
			alert('生年月日を入力してください！');
			return;
		} else if (sei === '' || mei === '') {
			alert('氏名を入力してください！')
			return;
		}

		// 確認ダイアログを表示
		const isConfirmed = window.confirm('パスワード再設定しますか？');
		if (isConfirmed) {
			onConfirm();
		}
	}

	return (
		<div className="password_recreate_popup">
			<div className="popup_container" type="modal">
				<div className="popup_display" data-modal-type="modal">
					<div className="popup_inner" data-modal-size="m">
						<div className="popup_header_display">
							<div className="popup_header">
								<h2 className="popup_header_title">
									パスワードをお忘れですか？
								</h2>
								<div className="popup_header_line"></div>
								<button className="popup_header_button" type="button" onClick={onCancel}>
									<span type="add" className="pupup_button_mark">＋</span>
								</button>
							</div>
						</div>
						<div className="popup_main_display">
							<div className="popup_main">
								<span className="popup_main_text_1">
									登録しているメールアドレス、生年月日と氏名を入力してください。
								</span>
								<span className="popup_main_text_2">
									パスワードは上記の入力情報に基づいて再設定できます。
								</span>
								<div className="popup_inputarea">
									<div className="popup_inputarea_display">
										<div className="popup_email_area">
											<span className="email_area_text">
												メールアドレス
											</span>
											<input
												className={`email_address ${errors.EMAIL ? 'error' : EMAIL !== '' ? 'success' : ''}`}
												name="email"
												id="email"
												maxLength="255"
												placeholder="info@example.com"
												value={EMAIL}
												onChange={(e) => setEMAIL(e.target.value)}
												onBlur={handleBlurEMAIL} />
											{errors.EMAIL && (
												<div className="input_error_message">{errorMessages.EMAIL}</div>
											)}
										</div>
										<div className="popup_birthday_area">
											<span className="birthday_area_text">
												生年月日
											</span>
											<input
												className={`birthday ${errors.BIRTHDAY ? 'error' : BIRTHDAY !== '' ? 'success' : ''}`}
												name="birthday"
												id="birthday"
												maxLength="10"
												placeholder="2000-01-01"
												value={BIRTHDAY}
												onChange={(e) => setBIRTHDAY(e.target.value)}
												onBlur={handleBlurBIRTHDAY} />
											{errors.BIRTHDAY && (
												<div className="input_error_message">{errorMessages.BIRTHDAY}</div>
											)}
										</div>
										<div className="popup_name_area">
											<span className="name_area_text">
												氏名
											</span>
											<div className="name_area_display">
												<div className="sei_area">
													<input
														className={`sei ${errors.SEI ? 'error' : sei !== '' ? 'success' : ''}`}
														name="sei"
														id="sei"
														value={sei}
														onChange={(e) => setSei(e.target.value)}
														onBlur={handleBlurSei} />
													{errors.SEI && (
														<div className="input_error_message">{errorMessages.SEI}</div>
													)}
												</div>
												<div className="mei_area">
													<input
														className={`mei ${errors.MEI ? 'error' : mei !== '' ? 'success' : ''}`}
														name="mei"
														id="mei"
														value={mei}
														onChange={(e) => setMei(e.target.value)}
														onBlur={handleBlurMei} />
													{errors.MEI && (
														<div className="input_error_message">{errorMessages.MEI}</div>
													)}
												</div>
											</div>
										</div>
									</div>
								</div>
								<div className="popup_buttonarea">
									<div className="popup_buttonarea_display">
										<button className="popup_submit_button" onClick={handleConfirmClick}>
											送信する
										</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	);
}
//----------------------------------------------------------------------------------------------------

//パスワード再設定ポップアップ
function PasswordResetPopup({ onClose }) {
	const { setPASSWORDHASH, errors, setErrors, errorMessages, setErrorMessages } = useContext(DataContext);
	const [newPassword, setNewPassword] = useState('');
	const [confirmPassword, setConfirmPassword] = useState('');

	const handleSave = async () => {
		let hasError = false;

		if (newPassword === '') {
			setErrors(prev => ({ ...prev, POPUPNEWPASSWORD: true }));
			setErrorMessages(prev => ({ ...prev, POPUPNEWPASSWORD: '入力お願いします' }));
			hasError = true;
		} else if (newPassword.length < 8) {
			setErrors(prev => ({ ...prev, POPUPNEWPASSWORD: true }));
			setErrorMessages(prev => ({ ...prev, POPUPNEWPASSWORD: '8文字以上で入力ください' }));
			hasError = true;
		} else if (!/[A-Z]/.test(newPassword) || !/[a-z]/.test(newPassword) || !/[0-9]/.test(newPassword) || !/[\W_]/.test(newPassword)) {
			setErrors(prev => ({ ...prev, POPUPNEWPASSWORD: true }));
			setErrorMessages(prev => ({ ...prev, POPUPNEWPASSWORD: '大小英文字、数字、記号が混在するパスワードを入力してください' }));
			hasError = true;
		}

		if (confirmPassword === '') {
			setErrors(prev => ({ ...prev, POPUPCOMFIRMPASSWORD: true }));
			setErrorMessages(prev => ({ ...prev, POPUPCOMFIRMPASSWORD: '入力お願いします' }));
			hasError = true;
		} else if (confirmPassword !== newPassword) {
			setErrors(prev => ({ ...prev, POPUPCOMFIRMPASSWORD: true }));
			setErrorMessages(prev => ({ ...prev, POPUPCOMFIRMPASSWORD: '入力されたパスワードが上記と一致しません' }));
			hasError = true;
		}

		if (hasError) {
			return;
		}

		try {
			const hashedPassword = await hashPassword(confirmPassword);
			setPASSWORDHASH(hashedPassword);

			const response = await fetch('/Regist/UpdateUserPASSWORD', {
				method: 'POST',
				headers: {
					'Content-Type': 'application/x-www-form-urlencoded',
				},
				body: `PASSWORDHASH=${encodeURIComponent(hashedPassword)}&USER_ID=${encodeURIComponent(sessionStorage.getItem('USER_ID'))}`,
			});
			const result = await response.json();

			if (result) {
				alert('パスワードの更新に成功しました。');
				onClose();
				// window.location.href = '/member_login_general';
			} else {
				alert('パスワードの更新に失敗しました。');
			}
		} catch (error) {
			console.error('パスワードの更新エラー:', error);
			alert('パスワードの更新中にエラーが発生しました。');
		}
	};

	//newpasswordのinputboxのリマインド
	const handleBlurNEWPASSWORD = () => {
		if (newPassword === '') {
			setErrors(prev => ({ ...prev, POPUPNEWPASSWORD: true }));
			setErrorMessages(prev => ({ ...prev, POPUPNEWPASSWORD: '入力お願いします' }));
			//パスワードを8文字以下で入力した場合
		} else if (newPassword.length < 8) {
			setErrors(prev => ({ ...prev, POPUPNEWPASSWORD: true }));
			setErrorMessages(prev => ({ ...prev, POPUPNEWPASSWORD: '8文字以上で入力ください' }));
			//パスワードは数字、大小英文字と記号が混在してない場合
		} else if (!/[A-Z]/.test(newPassword) ||  //大英文字
			!/[a-z]/.test(newPassword) ||  //小英文字
			!/[0-9]/.test(newPassword) ||  //数字
			!/[\W_]/.test(newPassword)) {  //記号
			setErrors(prev => ({ ...prev, POPUPNEWPASSWORD: true }));
			setErrorMessages(prev => ({ ...prev, POPUPNEWPASSWORD: '大小英文字、数字、記号が混在するパスワードを入力してください' }));
		} else {
			setErrors(prev => ({ ...prev, POPUPNEWPASSWORD: false }));
			setErrorMessages(prev => ({ ...prev, POPUPNEWPASSWORD: '' }));
		}
	};

	//comfirmedpasswordのinputboxのリマインド
	const handleBlurCONFIRMPASSWORD = () => {
		if (confirmPassword === '') {
			setErrors(prev => ({ ...prev, POPUPCOMFIRMPASSWORD: true }));
			setErrorMessages(prev => ({ ...prev, POPUPCOMFIRMPASSWORD: '入力お願いします' }));
		} else if (confirmPassword !== newPassword) {
			setErrors(prev => ({ ...prev, POPUPCOMFIRMPASSWORD: true }));
			setErrorMessages(prev => ({ ...prev, POPUPCOMFIRMPASSWORD: '入力されたパスワードが上記と一致しません' }));
		} else {
			setErrors(prev => ({ ...prev, POPUPCOMFIRMPASSWORD: false }));
			setErrorMessages(prev => ({ ...prev, POPUPCOMFIRMPASSWORD: '' }));
		}
	};

	return (
		<div className="password_reset_popup">
			<div className="popup_reset_container" type="modal">
				<div className="popup_reset_display" data-modal-type="modal">
					<div className="popup_reset_inner" data-modal-size="m">
						<div className="popup_reset_header_display">
							<div className="popup_reset_header">
								<h2 className="popup_reset_header_title">
									新しいパスワードを入力
								</h2>
								<div className="popup_reset_header_line"></div>
								<button className="popup_reset_header_button" type="button" onClick={onClose}>
									<span type="add" className="pupup_reset_button_mark">＋</span>
								</button>
							</div>
						</div>
						<div className="popup_reset_main_display">
							<div className="popup_reset_main">
								<div className="popup_reset_main_line"></div>
								<div className="popup_update">
									<div className="popup_reset_inputarea">
										<div className="newpassword_area">
											<span className="newpassword_area_text">
												新しいパスワード ※8文字以上で設定してください
											</span>
											<input
												className={`newpassword ${errors.POPUPNEWPASSWORD ? 'error' : newPassword !== '' ? 'success' : ''}`}
												type="password"
												id="newpassword"
												name="newpassword"
												placeholder="8文字以上で入力ください"
												value={newPassword}
												onChange={(e) => setNewPassword(e.target.value)}
												onBlur={handleBlurNEWPASSWORD} />
											{errors.POPUPNEWPASSWORD && (
												<div className="input_error_message">{errorMessages.POPUPNEWPASSWORD}</div>
											)}
										</div>
										<div className="confirmpassword_area">
											<span className="confirmpassword_area_text">
												新しいパスワード（確認）※8文字以上で設定してください
											</span>
											<input
												className={`confirmpassword ${errors.POPUPCOMFIRMPASSWORD ? 'error' : confirmPassword !== '' ? 'success' : ''}`}
												type="password"
												id="confirmpassword"
												name="confirmpassword"
												placeholder="もう一度入力してください"
												value={confirmPassword}
												onChange={(e) => setConfirmPassword(e.target.value)}
												onBlur={handleBlurCONFIRMPASSWORD} />
											{errors.POPUPCOMFIRMPASSWORD && (
												<div className="input_error_message">{errorMessages.POPUPCOMFIRMPASSWORD}</div>
											)}
										</div>
									</div>
									<div className="popup_reset_buttonarea">
										<button className="update_button" type="button" onClick={handleSave}>
											パスワードを変更
										</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	);
}

//-----------------------------------------------------------------------------------------------------

//会員登録ページ遷移部分のコンポーネント
function TO_REGIST_INNER() {
	return (
		<div className="to_regist_inner">
			<h1 className="sign_up_title">新規会員登録</h1>
			{/* 会員登録ボタン */}
			<p className="regist_button">
				<a href="/member_regist">新規メンバー登録</a>
			</p>
		</div>
	);
}

//--------------------------------- フッター部分--------------------------------------------------
function LOFIN_FORM_FOOTER() {
	return (
		<div className="login-form-footer">
			<small className="copyright">
				ヘルスマ © healthma Co.,Ltd. All Rights Reserved.
			</small>
		</div>
	);
}