// login.jsx — 로그인 화면(실제 인증). 이메일+비밀번호 → 서버 세션 쿠키 발급 → 앱 진입.
// ※ 데모 계정 목록은 없다. 신원은 서버 세션에서만 도출된다.

const Login = ({ onLogin }) => {
  const [email, setEmail] = React.useState('');
  const [pw, setPw] = React.useState('');
  const [err, setErr] = React.useState('');
  const [busy, setBusy] = React.useState(false);

  const onSubmit = (e) => {
    e.preventDefault();
    if (busy) return;
    setErr('');
    if (!email.trim() || !pw) { setErr('이메일과 비밀번호를 입력하세요.'); return; }
    setBusy(true);
    window.RAlly.login(email.trim(), pw).then(({ status, data }) => {
      setBusy(false);
      if (status === 200 && data && data.ok && data.user) {
        setPw('');
        window.RAlly.setUser(data.user);
        onLogin(data.user);
      } else {
        setErr((data && data.error) || '로그인에 실패했습니다.');
      }
    }).catch(() => {
      setBusy(false);
      setErr('서버에 연결할 수 없습니다. 잠시 후 다시 시도하세요.');
    });
  };

  return (
    <div style={{
      minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center',
      background: 'linear-gradient(135deg, #0F2942 0%, #173856 100%)', fontFamily: 'var(--font)', padding: 20,
    }}>
      <div style={{ width: '100%', maxWidth: 420 }}>
        {/* 브랜드 — 로고만 */}
        <div style={{ textAlign: 'center', marginBottom: 26 }}>
          <img src="logo_white_fit.svg" alt="RAlly" style={{ height: 52, width: 'auto', maxWidth: 240, objectFit: 'contain' }} />
        </div>

        {/* 카드 */}
        <div style={{ background: '#fff', borderRadius: 16, padding: 30, boxShadow: '0 20px 60px rgba(0,0,0,0.3)' }}>
          <div style={{ fontSize: 19, fontWeight: 800, color: 'var(--navy)', marginBottom: 4 }}>로그인</div>
          <div style={{ fontSize: 13, color: 'var(--ink-3)', marginBottom: 20 }}>의료기기 GMP 문서 작업을 시작하세요.</div>

          <form onSubmit={onSubmit}>
            <label htmlFor="rally-email" style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink-2)' }}>이메일</label>
            <input id="rally-email" name="email" value={email} onChange={(e) => setEmail(e.target.value)}
              type="email" autoComplete="username" autoFocus
              style={inp} placeholder="name@company.co.kr" />
            <label htmlFor="rally-pw" style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink-2)', marginTop: 12, display: 'block' }}>비밀번호</label>
            <input id="rally-pw" name="password" value={pw} onChange={(e) => setPw(e.target.value)}
              type="password" autoComplete="current-password" style={inp} placeholder="비밀번호" />

            {err && (
              <div role="alert" style={{
                marginTop: 14, padding: '9px 12px', borderRadius: 8, fontSize: 12.5,
                background: '#FDECEA', border: '1px solid #F5C6C0', color: '#9A2A1E',
              }}>{err}</div>
            )}

            <button type="submit" disabled={busy} style={{
              width: '100%', marginTop: 18, padding: '12px', borderRadius: 10, border: 'none',
              background: busy ? '#C9A093' : 'var(--coral)', color: '#fff', fontSize: 15, fontWeight: 700,
              cursor: busy ? 'default' : 'pointer', fontFamily: 'inherit',
            }}>{busy ? '확인 중…' : '로그인 →'}</button>
          </form>
        </div>

        <div style={{ textAlign: 'center', marginTop: 16, fontSize: 11, color: 'rgba(240,239,232,0.45)' }}>
          계정은 관리자가 발급합니다. 비밀번호를 잊었다면 관리자에게 재설정을 요청하세요.
        </div>
      </div>
    </div>
  );
};

const inp = {
  width: '100%', marginTop: 5, padding: '11px 12px', borderRadius: 9, border: '1px solid var(--line)',
  fontSize: 14, fontFamily: 'inherit', boxSizing: 'border-box', outline: 'none',
};

window.RAlly.Login = Login;