"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";

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 fetch('https://hrdi.coconutmeet.net/auth/find-id', {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json',
				},
				body: JSON.stringify({
					name: name,
					phone: phone,
				}),
			});

			if (!response.ok) {
				let errorMessage = `아이디 찾기 실패 (${response.status})`;
				try {
					const errorData = await response.json();
					if (errorData.error) {
						errorMessage = errorData.error;
					} else if (errorData.message) {
						errorMessage = errorData.message;
					} else if (response.statusText) {
						errorMessage = `${response.statusText} (${response.status})`;
					}
				} catch (parseError) {
					if (response.statusText) {
						errorMessage = `${response.statusText} (${response.status})`;
					}
				}
				console.error('아이디 찾기 실패:', errorMessage);
				setIsFailedOpen(true);
				return;
			}

			const data = await response.json();
			
			// body의 emails 배열에서 첫 번째 이메일 가져오기
			if (data.emails && Array.isArray(data.emails) && data.emails.length > 0) {
				setFoundUserId(data.emails[0]);
			} else if (data.email) {
				setFoundUserId(data.email);
			}
			
			// 가입일 정보는 API 응답에 없음
			// // header의 date 값 가져오기
			// const headerDate = response.headers.get('date');
			// if (headerDate) {
			// 	setJoinedAt(formatJoinedAt(headerDate));
			// }
			
			setIsDoneOpen(true);
		} catch (error) {
			const errorMessage = error instanceof Error ? error.message : '네트워크 오류가 발생했습니다.';
			console.error('아이디 찾기 오류:', errorMessage);
			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>
	);
}