xrlms/src/app/find-id/page.tsx

"use client";

import React, { useMemo, useState } from "react";
import IdFindDone from "./IdFindDone";
import IdFindFailed from "./IdFindFailed";
import FindIdOption from "./FindIdOption";
import LoginInputSvg from "@/app/svgs/inputformx";
import apiService from "@/app/lib/apiService";

export default function FindIdPage() {
	const [isDoneOpen, setIsDoneOpen] = useState(false);
	const [isFailedOpen, setIsFailedOpen] = useState(false);
	const [foundUserId, setFoundUserId] = useState<string | undefined>(undefined);
	const [joinedAt, setJoinedAt] = useState<string | undefined>(undefined);
	const [name, setName] = useState("");
	const [phone, setPhone] = useState("");
	const [focused, setFocused] = useState<Record<string, boolean>>({});
	const [errors, setErrors] = useState<Record<string, string>>({});

	const isNameValid = useMemo(() => name.trim().length > 0, [name]);
	const isPhoneValid = useMemo(() => /^\d{9,11}$/.test(phone), [phone]);
	const canSubmit = useMemo(() => isNameValid && isPhoneValid, [isNameValid, isPhoneValid]);

	function formatPhoneNumber(value: string): string {
		const numbers = value.replace(/[^0-9]/g, "");
		if (numbers.length <= 3) return numbers;
		if (numbers.length <= 7) return `${numbers.slice(0, 3)}-${numbers.slice(3)}`;
		if (numbers.length <= 11) return `${numbers.slice(0, 3)}-${numbers.slice(3, 7)}-${numbers.slice(7)}`;
		return `${numbers.slice(0, 3)}-${numbers.slice(3, 7)}-${numbers.slice(7, 11)}`;
	}

	// function formatJoinedAt(dateString: string | Date): string {
	// 	const date = typeof dateString === 'string' ? new Date(dateString) : dateString;
	// 	const year = date.getFullYear();
	// 	const month = date.getMonth() + 1;
	// 	const day = date.getDate();
	// 	return `${year}년 ${month}월 ${day}일`;
	// }

	function validateAll() {
		const next: Record<string, string> = {};
		if (!isNameValid) next.name = "이름을 입력해 주세요.";
		if (!isPhoneValid) next.phone = "휴대폰 번호를 숫자만 9~11자리로 입력해 주세요.";
		setErrors(next);
		return Object.keys(next).length === 0;
	}

	async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
		e.preventDefault();
		if (!validateAll()) return;

		try {
			const response = await apiService.findUserId(name, phone);
			const data = response.data;

			// body의 emails 배열에서 첫 번째 이메일 가져오기
			if (data.emails && Array.isArray(data.emails) && data.emails.length > 0) {
				setFoundUserId(data.emails[0]);
			} else if (data.email) {
				setFoundUserId(data.email);
			}

			setIsDoneOpen(true);
		} catch (error) {
			console.error('아이디 찾기 오류:', error);
			setIsFailedOpen(true);
		}
	}

	return (
		<div className="min-h-screen w-full flex flex-col items-center justify-between">
			<IdFindDone
				on={isDoneOpen}
				userId={foundUserId}
				// joinedAtText={joinedAt ? `가입일: ${joinedAt}` : undefined}
				onClose={() => setIsDoneOpen(false)}
			/>
			<IdFindFailed
				on={isFailedOpen}
				onClose={() => setIsFailedOpen(false)}
			/>

			<div className="flex-1 flex items-center justify-center w-full py-6">
				<div className="rounded-xl bg-white max-w-[560px] px-[40px] w-full relative">

					<div className="my-15 flex flex-col items-center">
						<div className="text-[24px] font-extrabold leading-[150%] text-neutral-700">
							아이디 찾기
						</div>
						<p className="text-[18px] leading-[150%] text-[#6c7682] mt-[8px] text-center">
							가입 시 등록한 회원정보를 입력해 주세요.
						</p>
					</div>

					<form onSubmit={handleSubmit}>
						<div className="space-y-2">
							<label htmlFor="name" className="text-[15px] font-semibold text-[#6c7682]">
								이름
							</label>
							<div className="relative">
								<input
									id="name"
									name="name"
									value={name}
									onChange={(e) => {
										setName(e.target.value);
										if (errors.name) {
											setErrors((prev) => {
												const next = { ...prev };
												delete next.name;
												return next;
											});
										}
									}}
									onFocus={() => setFocused((p) => ({ ...p, name: true }))}
									onBlur={() => setFocused((p) => ({ ...p, name: false }))}
									placeholder="이름을 입력해 주세요."
									className={`h-[40px] px-[12px] py-[7px] w-full rounded-[8px] mt-3 border focus:outline-none text-[18px] text-neutral-700 placeholder:text-input-placeholder-text pr-[40px] ${errors.name
											? "border-error focus:border-error"
											: "border-neutral-40 focus:border-neutral-700"
										}`}
								/>
								{name.trim().length > 0 && focused.name && (
									<button
										type="button"
										onMouseDown={(e) => {
											e.preventDefault();
											setName("");
										}}
										aria-label="입력 지우기"
										className="absolute right-3 top-[32px] -translate-y-1/2 cursor-pointer flex items-center justify-center">
										<LoginInputSvg />
									</button>
								)}
							</div>
							{errors.name && <p className="text-error text-[13px] leading-tight">{errors.name}</p>}
						</div>

						<div className="space-y-2 mt-6">
							<label htmlFor="phone" className="text-[15px] font-semibold text-[#6c7682]">
								휴대폰 번호
							</label>
							<div className="relative">
								<input
									id="phone"
									name="phone"
									type="tel"
									inputMode="numeric"
									value={formatPhoneNumber(phone)}
									onChange={(e) => {
										const numbersOnly = e.target.value.replace(/[^0-9]/g, "");
										setPhone(numbersOnly);
										if (errors.phone) {
											setErrors((prev) => {
												const next = { ...prev };
												delete next.phone;
												return next;
											});
										}
									}}
									onFocus={() => setFocused((p) => ({ ...p, phone: true }))}
									onBlur={() => setFocused((p) => ({ ...p, phone: false }))}
									placeholder="-없이 입력해 주세요."
									className={`h-[40px] px-[12px] py-[7px] w-full rounded-[8px] border mt-3 focus:outline-none text-[18px] text-neutral-700 placeholder:text-input-placeholder-text pr-[40px] ${errors.phone
											? "border-error focus:border-error"
											: "border-neutral-40 focus:border-neutral-700"
										}`}
								/>
								{phone.length > 0 && focused.phone && (
									<button
										type="button"
										onMouseDown={(e) => {
											e.preventDefault();
											setPhone("");
										}}
										aria-label="입력 지우기"
										className="absolute right-3 top-[32px] -translate-y-1/2 cursor-pointer flex items-center justify-center">
										<LoginInputSvg />
									</button>
								)}
							</div>
							{errors.phone && <p className="text-error text-[13px] leading-tight">{errors.phone}</p>}
						</div>

						<button
							type="submit"
							className={`h-[56px] w-full rounded-lg text-[16px] font-semibold text-white transition-opacity cursor-pointer mb-3 hover:bg-[#1F2B91] mt-[60px] ${canSubmit ? "bg-active-button" : "bg-inactive-button"}`}>
							다음
						</button>


					</form>
				</div>
			</div>

			<FindIdOption
				doneEnabled={isDoneOpen}
				setDoneEnabled={setIsDoneOpen}
				failedEnabled={isFailedOpen}
				setFailedEnabled={setIsFailedOpen}
			/>

			<p className="text-center py-[40px] text-[15px] text-basic-text">
				Copyright ⓒ 2025 XL LMS. All rights reserved
			</p>
		</div>
	);
}