xrlms/src/app/menu/ChangePasswordModal.tsx

'use client';

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import ModalCloseSvg from "../svgs/closexsvg";
import apiService from "../lib/apiService";

type Props = {
  open: boolean;
  onClose: () => void;
  onSubmit?: (payload: { email: string; code?: string; newPassword: string }) => void;
  showVerification?: boolean;
  devVerificationState?: 'initial' | 'sent' | 'verified' | 'failed';
  initialEmail?: string;
};

export default function ChangePasswordModal({ open, onClose, onSubmit, showVerification = false, devVerificationState, initialEmail }: Props) {
  const router = useRouter();
  const [email, setEmail] = useState(initialEmail || "");
  const [code, setCode] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [error, setError] = useState<string | null>(null); // 인증번호 오류 등
  const [requireCode, setRequireCode] = useState<boolean>(showVerification);
  const [isCodeSent, setIsCodeSent] = useState<boolean>(showVerification);
  const canConfirm = code.trim().length > 0;
  const [isVerified, setIsVerified] = useState(false);
  const [isSending, setIsSending] = useState(false);
  const [isVerifying, setIsVerifying] = useState(false);
  const [showSuccessModal, setShowSuccessModal] = useState(false);
  const hasError = !!error;

  // initialEmail이 변경되면 email state 업데이트
  useEffect(() => {
    if (initialEmail) {
      setEmail(initialEmail);
    }
  }, [initialEmail]);

  // 외부에서 전달된 개발모드 상태(devVerificationState)에 따라 UI 동기화
  useEffect(() => {
    if (!devVerificationState) return;
    switch (devVerificationState) {
      case 'initial':
        setRequireCode(false);
        setIsCodeSent(false);
        setCode("");
        setError(null);
        setIsVerified(false);
        break;
      case 'sent':
        setRequireCode(true);
        setIsCodeSent(true);
        setCode("");
        setError(null);
        setIsVerified(false);
        break;
      case 'verified':
        setRequireCode(true);
        setIsCodeSent(true);
        setCode("123456");
        setError(null);
        setIsVerified(true);
        break;
      case 'failed':
        setRequireCode(true);
        setIsCodeSent(true);
        setCode("");
        setError("올바르지 않은 인증번호입니다. 인증번호를 확인해주세요.");
        setIsVerified(false);
        break;
      default:
        break;
    }
  }, [devVerificationState]);

  const handleLoginClick = () => {
    // 토큰 삭제 (로그아웃)
    if (typeof window !== 'undefined') {
      localStorage.removeItem('token');
      document.cookie = 'token=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT';
    }
    // 로그인 페이지로 이동
    router.push('/login');
    onClose();
  };

  const handleSubmit = async () => {
    setError(null);
    if (requireCode) {
      if (!code) {
        setError("인증번호를 입력해 주세요.");
        return;
      }
    }
    if (!newPassword || !confirmPassword) {
      setError("새 비밀번호를 입력해 주세요.");
      return;
    }
    if (newPassword !== confirmPassword) {
      setError("새 비밀번호가 일치하지 않습니다.");
      return;
    }
    if (!email.trim()) {
      setError("이메일을 입력해 주세요.");
      return;
    }
    if (requireCode && !code.trim()) {
      setError("인증번호를 입력해 주세요.");
      return;
    }

    try {
      await apiService.resetPassword(email, code, newPassword, confirmPassword);
      onSubmit?.({ email, code: requireCode ? code : undefined, newPassword });
      setShowSuccessModal(true);
    } catch (err) {
      setError(err instanceof Error ? err.message : "비밀번호 변경에 실패했습니다.");
    }
  };

  const handleCancel = () => {
    // 모든 상태 초기화
    setEmail(initialEmail || "");
    setCode("");
    setNewPassword("");
    setConfirmPassword("");
    setError(null);
    setRequireCode(showVerification);
    setIsCodeSent(showVerification);
    setIsVerified(false);
    setIsSending(false);
    setIsVerifying(false);
    onClose();
  };

  // 완료 팝업은 open prop과 관계없이 표시
  if (showSuccessModal) {
    return (
      <div
        className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-[2px]"
        role="dialog"
        aria-modal="true"
      >
        <div className="w-[480px] rounded-[12px] border border-[#dee1e6] bg-white">
          {/* header */}
          <div className="flex items-center justify-end h-[80px] p-6">
            <button
              type="button"
              aria-label="닫기"
              onClick={handleLoginClick}
              className="inline-flex size-6 items-center justify-center text-neutral-700 hover:opacity-80 cursor-pointer"
            >
              <ModalCloseSvg />
            </button>
          </div>

          {/* body */}
          <div className="flex flex-col gap-4 items-center px-6 pb-0 pt-[60px]">
            <h2 className="text-[24px] font-extrabold leading-[1.45] text-[#333c47] text-center">
              비밀번호 변경이 완료됐습니다.
            </h2>
            <p className="text-[18px] font-normal leading-[1.5] text-[#6c7682] text-center mb-[148px]">
              새로운 비밀번호로 다시 로그인 해주세요.
            </p>
          </div>

          {/* footer */}
          <div className="flex gap-8 items-end justify-center p-6 h-[72px]">
            <button
              type="button"
              onClick={handleLoginClick}
              className="h-12 w-[284px] rounded-[10px] bg-[#1f2b91] px-2 text-[16px] font-semibold leading-[1.5] text-white cursor-pointer"
            >
              로그인
            </button>
          </div>
        </div>
      </div>
    );
  }

  if (!open) return null;

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-[2px]"
      role="dialog"
      aria-modal="true"
    >
      <div className="w-[480px] rounded-[12px] border border-input-border bg-white shadow-[0_10px_30px_rgba(0,0,0,0.06)]">
        {/* header */}
        <div className="flex items-center justify-between p-6">
          <h2 className="text-[20px] font-bold leading-[1.5] text-neutral-700">비밀번호 변경</h2>
          <button
            type="button"
            aria-label="닫기"
            onClick={onClose}
            className="inline-flex size-6 items-center justify-center text-neutral-700 hover:opacity-80 cursor-pointer"
          >
            <ModalCloseSvg />
          </button>
        </div>

        {/* body */}
        <div className="flex flex-col gap-[10px] px-6">
          <div className="flex flex-col gap-2">
            <label className="w-[100px] text-[15px] font-semibold leading-[1.5] text-text-label">아이디 (이메일)</label>
            <div className="flex items-center gap-3">
              <input
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                className={[
                  "h-10 flex-1 rounded-[8px] border border-input-border px-3 text-[16px] leading-[1.5] text-neutral-700 placeholder:text-text-placeholder-alt outline-none",
                  hasError ? "bg-white" : isCodeSent ? "bg-neutral-50" : "bg-white",
                ].join(" ")}
                placeholder="이메일"
              />
              <button
                type="button"
                onClick={async () => {
                  if (!email.trim()) {
                    setError("이메일을 입력해 주세요.");
                    return;
                  }

                  setIsSending(true);
                  setError(null);

                  try {
                    await apiService.sendPasswordReset(email);
                    setRequireCode(true);
                    setIsCodeSent(true);
                    // 재전송 시 기존 인증 상태 초기화
                    setCode("");
                    setIsVerified(false);
                  } catch (err) {
                    setError(err instanceof Error ? err.message : "인증번호 전송에 실패했습니다.");
                  } finally {
                    setIsSending(false);
                  }
                }}
                disabled={isSending}
                className={[
                  "h-10 w-[136px] rounded-[8px] bg-bg-gray-light px-3 text-[16px] font-semibold leading-[1.5] text-neutral-700",
                  isSending ? "cursor-not-allowed opacity-50" : "cursor-pointer"
                ].join(" ")}
              >
                {isSending ? "전송 중..." : (isCodeSent ? "인증번호 재전송" : "인증번호 전송")}
              </button>
            </div>
          </div>
          {requireCode ? (
            <div className="flex flex-col gap-2">
              <div className="w-[100px] text-[15px] font-semibold leading-[1.5] text-text-label">인증번호</div>
              <div className="flex items-center gap-3">
                <input
                  type="text"
                  value={code}
                  onChange={(e) => setCode(e.target.value)}
                  className="h-10 flex-1 rounded-[8px] border border-input-border bg-white px-3 text-[16px] leading-normal text-neutral-700 placeholder:text-text-placeholder-alt outline-none"
                  placeholder="인증번호를 입력해 주세요."
                />
                <button
                  type="button"
                  disabled={!canConfirm || isVerifying}
                  onClick={async () => {
                    if (!email.trim()) {
                      setError("이메일을 입력해 주세요.");
                      return;
                    }
                    if (!code.trim()) {
                      setError("인증번호를 입력해 주세요.");
                      return;
                    }

                    setIsVerifying(true);
                    setError(null);

                    try {
                      await apiService.verifyPasswordResetCode(email, code);
                      setIsVerified(true);
                      setError(null);
                    } catch (err) {
                      setError(err instanceof Error ? err.message : "올바르지 않은 인증번호입니다. 인증번호를 확인해주세요.");
                      setIsVerified(false);
                    } finally {
                      setIsVerifying(false);
                    }
                  }}
                  className={[
                    "h-10 w-[136px] rounded-[8px] px-3 text-[16px] font-semibold leading-[1.5]",
                    canConfirm && !isVerifying ? "bg-bg-gray-light text-basic-text cursor-pointer" : "bg-gray-50 text-text-placeholder-alt cursor-default",
                  ].join(" ")}
                >
                  {isVerifying ? "확인 중..." : "인증번호 확인"}
                </button>
              </div>
              {isCodeSent && !hasError && !isVerified ? (
                <div className="px-1">
                  <p className="text-[13px] font-semibold leading-[1.4] text-primary">
                    인증 확인을 위해 작성한 이메일로 인증번호를 발송했습니다.
                  </p>
                  <p className="text-[13px] font-semibold leading-[1.4] text-primary">
                    이메일을 확인해 주세요.
                  </p>
                </div>
              ) : null}
              {error ? (
                <p className="px-1 text-[13px] font-semibold leading-[1.4] text-error">
                  {error}
                </p>
              ) : null}
            </div>
          ) : null}
          <div className="flex flex-col gap-2">
            <label className="text-[15px] font-semibold leading-[1.5] text-text-label">새 비밀번호</label>
            <input
              type="password"
              value={newPassword}
              onChange={(e) => setNewPassword(e.target.value)}
              disabled={!isVerified}
              className={[
                "h-10 rounded-[8px] border border-input-border px-3 text-[16px] leading-[1.5] text-neutral-700 placeholder:text-text-placeholder-alt outline-none",
                isVerified ? "bg-white" : "bg-neutral-50",
              ].join(" ")}
              placeholder="새 비밀번호"
            />
          </div>
          <div className="flex flex-col gap-2">
            <label className="text-[15px] font-semibold leading-[1.5] text-text-label">
              새 비밀번호 확인
            </label>
            <input
              type="password"
              value={confirmPassword}
              onChange={(e) => setConfirmPassword(e.target.value)}
              disabled={!isVerified}
              className={[
                "h-10 rounded-[8px] border border-input-border px-3 text-[16px] leading-[1.5] text-neutral-700 placeholder:text-text-placeholder-alt outline-none",
                isVerified ? "bg-white" : "bg-neutral-50",
              ].join(" ")}
              placeholder="새 비밀번호 확인"
            />
          </div>
        </div>

        {/* footer */}
        <div className="flex items-center justify-center gap-3 p-6">
          <button
            type="button"
            onClick={handleCancel}
            className="h-12 w-[136px] rounded-[10px] bg-bg-gray-light px-4 text-[16px] font-semibold leading-[1.5] text-basic-text cursor-pointer"
          >
            취소
          </button>
          <button
            type="button"
            onClick={handleSubmit}
            className="h-12 w-[136px] rounded-[10px] bg-inactive-button px-4 text-[16px] font-semibold leading-[1.5] text-white cursor-pointer"
          >
            비밀번호 변경
          </button>
        </div>
      </div>
    </div>
  );
}