// 이 파일이 하는 일: 로그인한 사용자가 자기 비밀번호를 바꾸는 페이지.
// 현재 비밀번호를 함께 보내야 서버가 바꿔 준다(재인증).
//
// 학습 포인트: 이미 로그인했는데 왜 현재 비밀번호를 또 묻나?
// 잠깐 자리를 비운 사이 남이 내 브라우저로 비밀번호를 바꿔 계정을 통째로 뺏는 걸 막기 위해서다.
// "누구인가(인증)"와 "정말 본인인가(재인증)"는 다른 질문이고,
// 되돌리기 어려운 동작(비밀번호 변경·결제·탈퇴) 앞에는 재인증을 한 번 더 세운다.
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import client from '../api/client';

export default function ChangePasswordPage() {
  const navigate = useNavigate();
  const [currentPassword, setCurrentPassword] = useState('');
  const [newPassword, setNewPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [error, setError] = useState('');
  const [done, setDone] = useState(false);
  const [saving, setSaving] = useState(false);

  async function handleSubmit(e) {
    e.preventDefault();
    setError('');

    // 학습 포인트: 프론트 검증은 "빠른 안내"용 편의다. 진짜 검증은 서버에도 똑같이 있다
    // (ChangePasswordRequest의 @Size). 프론트 검사는 개발자도구로 우회할 수 있으니까.
    if (newPassword.length < 8) {
      setError('새 비밀번호는 8자 이상이어야 해요.');
      return;
    }
    if (newPassword !== confirmPassword) {
      setError('새 비밀번호 확인이 일치하지 않아요.');
      return;
    }
    if (newPassword === currentPassword) {
      setError('현재 비밀번호와 다른 비밀번호를 써 주세요.');
      return;
    }

    setSaving(true);
    try {
      await client.post('/auth/change-password', { currentPassword, newPassword });
      setDone(true);
    } catch (err) {
      // 401 = 현재 비밀번호가 틀림. 그 외는 일반 안내.
      if (err.response?.status === 401) {
        setError('현재 비밀번호가 올바르지 않아요.');
      } else {
        setError('변경 중 문제가 생겼어요. 잠시 후 다시 시도해 주세요.');
      }
    } finally {
      setSaving(false);
    }
  }

  if (done) {
    return (
      <div>
        <div className="hero compact">
          <div className="eyebrow">Security</div>
          <h1>비밀번호를 바꿨어요 🎉</h1>
          <p>다음 로그인부터 새 비밀번호를 쓰면 됩니다.</p>
        </div>
        <button className="btn btn-primary" onClick={() => navigate('/')}>
          대시보드로
        </button>
      </div>
    );
  }

  return (
    <div>
      <div className="hero compact">
        <div className="eyebrow">Security</div>
        <h1>비밀번호 변경</h1>
        <p>
          처음 받은 비밀번호를 쓰고 있다면 지금 바꿔 주세요. 8자 이상이면 되지만,
          길수록 안전해요.
        </p>
      </div>

      <div className="card" style={{ maxWidth: 460 }}>
        <form onSubmit={handleSubmit}>
          <div className="field">
            <label htmlFor="cur-pw">현재 비밀번호</label>
            <input
              id="cur-pw"
              className="input"
              type="password"
              value={currentPassword}
              onChange={(e) => setCurrentPassword(e.target.value)}
              autoComplete="current-password"
              required
            />
          </div>
          <div className="field">
            <label htmlFor="new-pw">새 비밀번호 (8자 이상)</label>
            <input
              id="new-pw"
              className="input"
              type="password"
              value={newPassword}
              onChange={(e) => setNewPassword(e.target.value)}
              autoComplete="new-password"
              required
            />
          </div>
          <div className="field">
            <label htmlFor="new-pw2">새 비밀번호 확인</label>
            <input
              id="new-pw2"
              className="input"
              type="password"
              value={confirmPassword}
              onChange={(e) => setConfirmPassword(e.target.value)}
              autoComplete="new-password"
              required
            />
          </div>
          {error && <p className="error-text">{error}</p>}
          <button className="btn btn-primary" type="submit" disabled={saving}>
            {saving ? '변경 중...' : '비밀번호 변경'}
          </button>
        </form>
      </div>

      <div className="tip" style={{ marginTop: 14, maxWidth: 460 }}>
        <b>비밀번호를 아예 잊었다면?</b> 멘토에게 요청하세요. 멘토가 재설정해 드립니다.
        (예전엔 이름만 알면 아무나 재설정할 수 있었는데, 보안 점검에서 발견해 닫았어요 —
        <strong> 방화벽</strong> 코스에서 배우는 "최소 권한" 원칙이 우리 코드에 적용된 사례예요.)
      </div>
    </div>
  );
}
