// 이 파일이 하는 일: 아이디/비밀번호 입력 폼. 성공하면 대시보드로 이동한다.
import { useState } from 'react';
import { useNavigate, Navigate, Link } from 'react-router-dom';
import { useAuth } from '../AuthContext';

export default function LoginPage() {
  const { user, login } = useAuth();
  const navigate = useNavigate();
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [submitting, setSubmitting] = useState(false);

  // 이미 로그인한 상태로 /login에 들어오면 대시보드로 보낸다.
  if (user) {
    return <Navigate to="/" replace />;
  }

  async function handleSubmit(e) {
    // 학습 포인트: preventDefault를 안 하면 브라우저가 폼을 전송하며
    // 페이지 전체를 새로고침해버린다 (React 상태가 전부 날아감).
    e.preventDefault();
    setError('');
    setSubmitting(true);
    try {
      await login(username, password);
      navigate('/', { replace: true });
    } catch (err) {
      if (err.response?.status === 401) {
        setError('아이디 또는 비밀번호가 맞지 않아요. 다시 확인해 주세요.');
      } else if (err.response?.status === 429) {
        // 무차별 대입 방어(로그인 잠금)에 걸린 경우 — 서버 LoginAttemptService 참고
        setError('로그인 시도가 너무 많아요. 5분 뒤에 다시 시도해 주세요.');
      } else {
        setError('로그인 중 문제가 생겼어요. 잠시 후 다시 시도해 주세요.');
      }
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <div
      style={{
        minHeight: '100vh',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        padding: 20,
      }}
    >
      <div className="card" style={{ width: '100%', maxWidth: 380 }}>
        <div style={{ textAlign: 'center', marginBottom: 24 }}>
          <div className="topnav-logo" style={{ fontSize: 18 }}>
            AWESOMEDEV <span>수습 플랫폼</span>
          </div>
        </div>
        <form onSubmit={handleSubmit}>
          <div className="field">
            <label htmlFor="username">아이디</label>
            <input
              id="username"
              className="input"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              autoComplete="username"
              autoFocus
              required
            />
          </div>
          <div className="field">
            <label htmlFor="password">비밀번호</label>
            <input
              id="password"
              className="input"
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              autoComplete="current-password"
              required
            />
          </div>
          {error && <p className="error-text">{error}</p>}
          <button
            className="btn btn-primary"
            type="submit"
            disabled={submitting}
            style={{ width: '100%', justifyContent: 'center', marginTop: 8 }}
          >
            {submitting ? '로그인 중...' : '로그인'}
          </button>
        </form>
        {/* 학습 포인트: <a href>는 페이지 전체를 새로 불러오지만,
            Link는 주소만 바꾸고 React가 화면을 갈아 끼운다 (SPA 방식 이동). */}
        <p className="muted" style={{ textAlign: 'center', fontSize: 14, marginTop: 16 }}>
          <Link to="/signup">회원가입</Link>
          <span style={{ margin: '0 8px' }}>|</span>
          <Link to="/find-account">아이디·비밀번호 찾기</Link>
        </p>
      </div>
    </div>
  );
}
