/* 모모, 테리 — 공개 사이트 로그인 (회원 전용) */

function SiteLoginScreen() {
  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 { error } = await window.supabaseClient.auth.signInWithPassword({ email, password });
    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="you@example.com" 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">계정이 없으신가요? 관리자에게 문의해 주세요.</div>
      </form>
    </div>
  );
}

Object.assign(window, { SiteLoginScreen });