function LoginScreen({ onAuth }) {
  const [cardNo, setCardNo] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const [err, setErr] = React.useState('');

  const submit = async (e) => {
    e.preventDefault();
    if (!cardNo.trim() || !password) {
      setErr('건물등록 번호와 비밀번호를 입력하세요.');
      return;
    }
    setErr(''); 
    setLoading(true);
    try {
      const res = await API.auth.login({ username: cardNo.trim(), password });
      if (res && res.token) API.setToken(res.token);
      const me = (res && res.user) || await API.auth.me();
      onAuth && onAuth(me);
    } catch (e2) {
      setErr(e2.message || '로그인에 실패했습니다.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{
      minHeight: '100dvh',
      background: '#f0eee8',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: '24px 16px',
      fontFamily: "'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif",
    }}>
      <div style={{
        width: '100%', maxWidth: 360,
        background: '#fff',
        border: '1px solid #e0ddd4',
        borderRadius: 18,
        padding: '28px 24px 24px',
        boxShadow: '0 2px 6px rgba(26,26,24,.04)',
      }}>
        <div style={{
          fontSize: 11, fontWeight: 800, letterSpacing: '.08em',
          color: '#fff', background: '#2563EB',
          display: 'inline-block',
          padding: '3px 8px', borderRadius: 4,
          textTransform: 'uppercase',
          marginBottom: 12,
        }}>
          SafeOn24 · 소리톡
        </div>
        <h1 style={{
          fontSize: 22, fontWeight: 800, letterSpacing: '-0.02em',
          color: '#1a1a18', margin: '0 0 6px',
        }}>
          로그인
        </h1>
        <p style={{
          fontSize: 13, color: '#5a5a55', margin: '0 0 20px', lineHeight: 1.55,
        }}>
          건물등록 번호와 비밀번호를 입력하세요
        </p>

        <form onSubmit={submit} style={{ display: 'grid', gap: 12 }}>
          <label style={authLblStyle}>
            <span style={authLblText}>건물등록 번호</span>
            <input
              type="text"
              required
              autoFocus
              value={cardNo}
              onChange={e => setCardNo(e.target.value)}
              placeholder="C-2024-0087"
              autoComplete="username"
              style={authInputStyle}
            />
          </label>

          <label style={authLblStyle}>
            <span style={authLblText}>비밀번호</span>
            <input
              type="password"
              required
              value={password}
              onChange={e => setPassword(e.target.value)}
              placeholder="••••••••"
              autoComplete="current-password"
              style={authInputStyle}
            />
          </label>

          {err && (
            <div style={{
              marginTop: 4,
              background: '#fef2f2', border: '1px solid #f4b4b4',
              color: '#cc2222',
              fontSize: 12.5, fontWeight: 600,
              borderRadius: 10, padding: '10px 12px',
              lineHeight: 1.5,
            }}>
              {err}
            </div>
          )}

          <button
            type="submit"
            disabled={loading}
            style={{
              marginTop: 10, width: '100%', height: 48,
              background: loading ? '#9db4ea' : '#2563EB',
              color: '#fff', border: 'none', borderRadius: 12,
              fontSize: 14.5, fontWeight: 800, letterSpacing: '-0.01em',
              fontFamily: 'inherit',
              cursor: loading ? 'wait' : 'pointer',
              boxShadow: loading ? 'none' : '0 4px 12px rgba(37,99,235,.32)',
              transition: 'background 200ms, box-shadow 200ms',
              WebkitTapHighlightColor: 'transparent',
            }}
          >
            {loading ? '로그인 중…' : '로그인'}
          </button>
        </form>

        <div style={{
          marginTop: 18, paddingTop: 14, borderTop: '1px solid #e5e3dc',
          fontSize: 11.5, color: '#8a8880', textAlign: 'center', lineHeight: 1.6,
        }}>
          © 2026 SafeOn24 · 소방안전 점검 플랫폼<br/>
          계정 문의는 관리자에게 문의해 주세요.
        </div>
      </div>
    </div>
  );
}

const authLblStyle = { display: 'grid', gap: 5 };
const authLblText  = { fontSize: 11.5, fontWeight: 700, color: '#5a5a55', letterSpacing: '-0.01em' };
const authInputStyle = {
  width: '100%', height: 44, padding: '0 12px',
  border: '1px solid #e5e3dc',
  borderRadius: 10, fontSize: 14, fontFamily: 'inherit',
  outline: 'none', background: '#fbf9f3', color: '#1a1a18',
  boxSizing: 'border-box',
  transition: 'border-color 160ms, background 160ms',
};

window.LoginScreen = LoginScreen;