'use client';

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

export default function IdFindPage() {
  const router = useRouter();
  const [name, setName] = useState('');
  const [phone, setPhone] = useState('');
  const [nameError, setNameError] = useState('');
  const [phoneError, setPhoneError] = useState('');

  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    let value = e.target.value;
    setName(value);
    if (nameError) {
      setNameError('');
    }
  };

  const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    let value = e.target.value.replace(/[^\d]/g, '');
    if (value.length > 11) value = value.slice(0, 11);
    setPhone(value);
    if (phoneError) {
      setPhoneError('');
    }
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setNameError('');
    setPhoneError('');

    let isValid = true;

    if (!name.trim()) {
      setNameError('이름을 입력해주세요.');
      isValid = false;
    }

    if (!phone.trim()) {
      setPhoneError('휴대폰 번호를 입력해주세요.');
      isValid = false;
    } else if (phone.length !== 11) {
      setPhoneError('올바른 휴대폰 번호를 입력해주세요.');
      isValid = false;
    }

    if (isValid) {
      // TODO: 아이디 찾기 API 호출
      // 임시로 다음 단계로 이동
      router.push('/idfind/result');
    }
  };

  return (
    <div className="relative flex flex-col items-center bg-white pb-[100px]">
      {/* 제목 */}
      <h1 className="font-bold text-[#1D1D1D] text-[32px] leading-tight mt-[292px]">
        아이디 찾기
      </h1>
      {/* 입력 폼 */}
      <form
        className="w-[664px] border border-[#b9b9b9] rounded-[8px] mt-[40px] px-[88px] py-[48px]"
        onSubmit={handleSubmit}
      >
        <p className="text-[#515151] text-[16px] font-medium leading-[1.6] text-center mb-[36px]">
          가입 시 등록한 회원정보를 입력해 주세요.
        </p>

        <div className="flex flex-col gap-[20px]">
          {/* 이름 */}
          <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="text"
                value={name}
                onChange={handleNameChange}
                className={`h-[42px] px-[10px] text-[18px] font-medium rounded-[8px] border border-[#b9b9b9] placeholder:text-[#b9b9b9] bg-white w-[313px] ${nameError ? 'border-[#E85D5D] text-[#E85D5D]' : 'text-[#515151]'}`}
                placeholder="이름을 입력해 주세요."
              />
            </div>
            {nameError && (
              <p className="text-[13px] text-[#E85D5D] ml-[193px] mt-[16px]">{nameError}</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="text"
                value={phone}
                onChange={handlePhoneChange}
                maxLength={11}
                className={`h-[42px] px-[10px] text-[18px] font-medium rounded-[8px] border border-[#b9b9b9] placeholder:text-[#b9b9b9] bg-white w-[313px] ${phoneError ? 'border-[#E85D5D] text-[#E85D5D]' : 'text-[#515151]'}`}
                placeholder="숫자만 입력해 주세요."
              />
            </div>
            {phoneError && (
              <p className="text-[13px] text-[#E85D5D] ml-[193px] mt-[16px]">{phoneError}</p>
            )}
          </div>
        </div>
      </form>

      {/* 다음 버튼 */}
      <div className="mt-[54px] mb-[228px]">
        <button
          type="button"
          onClick={handleSubmit}
          className="bg-[#2B82E8] rounded-[10px] h-[55px] w-[334px] flex items-center justify-center font-medium text-white text-[18px] hover:bg-[#1669ca] transition"
        >
          다음
        </button>
      </div>

      {/* 카피라이트 */}
      <footer className="absolute bottom-[40px] 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>
  );
}

