/* Admin — login screen (Supabase Auth) */

function LoginScreen() {
  const [email, setEmail] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [error, setError] = React.useState('');
  const [loading, setLoading] = React.useState(false);

  const submit = async (e) => {
    e.preventDefault();
    setError('');
    setLoading(true);
    const { data, error } = await window.supabaseClient.auth.signInWithPassword({ email, password });
    if (!error && data.session.user.app_metadata?.role !== 'admin') {
      await window.supabaseClient.auth.signOut();
      setLoading(false);
      setError('관리자 계정이 아닙니다.');
      return;
    }
    setLoading(false);
    if (error) setError('이메일 또는 비밀번호가 올바르지 않습니다.');
  };

  return (
    <div className="login-wrap">
      <form className="login-card" onSubmit={submit}>
        <div className="login-head">
          <img className="logo-img" src="assets/logo-full.png" alt="모모, 테리" />
          <p>운영진만 접근할 수 있는 관리자 페이지예요</p>
        </div>

        <div className="form-field">
          <label>이메일</label>
          <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="admin@momoterry.app" autoFocus required />
        </div>
        <div className="form-field">
          <label>비밀번호</label>
          <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="비밀번호를 입력하세요" required />
        </div>

        {error && <div className="login-error">{error}</div>}

        <button className="btn btn-primary" style={{ width: '100%', justifyContent: 'center' }} disabled={loading} type="submit">
          {loading ? '로그인 중…' : '로그인'}
        </button>

        <div className="login-foot">© 2026 모모, 테리</div>
      </form>
    </div>
  );
}

Object.assign(window, { LoginScreen });