/* global React */
const { useState: useStateAuth, useEffect: useEffectAuth } = React;

window.LoginScreen = function LoginScreen({ onAuthed }) {
  const [mode, setMode] = useStateAuth('login'); // 'login' | 'forgot' | 'sent'
  const [email, setEmail] = useStateAuth('');
  const [password, setPassword] = useStateAuth('');
  const [busy, setBusy] = useStateAuth(false);
  const [error, setError] = useStateAuth('');

  async function submitLogin(e) {
    e.preventDefault();
    setError('');
    setBusy(true);
    try {
      const user = await window.LQ.login(email.trim().toLowerCase(), password);
      onAuthed && onAuthed(user);
    } catch (err) {
      setError(err.message || 'Login failed.');
    } finally {
      setBusy(false);
    }
  }

  async function submitForgot(e) {
    e.preventDefault();
    setError('');
    setBusy(true);
    try {
      await window.LQ.requestReset(email.trim().toLowerCase());
      setMode('sent');
    } catch (err) {
      setError(err.message || 'Request failed.');
    } finally {
      setBusy(false);
    }
  }

  return (
    <div className="admin-auth-screen">
      <div className="admin-auth-card">
        <div className="admin-auth-logo">
          <img src="../assets/logo-navbar.png" alt="Lacquery Nails" style={{ height: 48, width: 'auto' }} />
        </div>

        {mode === 'login' && (
          <>
            <h1 className="display admin-auth-title">Admin Login</h1>
            <form className="admin-auth-form" onSubmit={submitLogin} autoComplete="on" style={{ marginTop: 28 }}>
              <label className="admin-label">Email</label>
              <input className="admin-input" type="email" required value={email}
                     onChange={(e) => setEmail(e.target.value)} autoFocus autoComplete="email" />
              <label className="admin-label" style={{ marginTop: 14 }}>Password</label>
              <input className="admin-input" type="password" required value={password}
                     onChange={(e) => setPassword(e.target.value)} autoComplete="current-password" />
              {error && <div className="admin-auth-msg err">{error}</div>}
              <button type="submit" className="btn btn-primary admin-auth-submit" disabled={busy}>
                {busy ? 'Signing in…' : 'Sign In'}
              </button>
            </form>
            <button className="admin-auth-link" onClick={() => { setMode('forgot'); setError(''); }}>
              Forgot password?
            </button>
          </>
        )}

        {mode === 'forgot' && (
          <>
            <h1 className="display admin-auth-title">Forgot Password</h1>
            <p className="admin-auth-sub">Enter your email to receive a reset link.</p>
            <form className="admin-auth-form" onSubmit={submitForgot}>
              <label className="admin-label">Email</label>
              <input className="admin-input" type="email" required value={email}
                     onChange={(e) => setEmail(e.target.value)} autoFocus />
              {error && <div className="admin-auth-msg err">{error}</div>}
              <button type="submit" className="btn btn-primary admin-auth-submit" disabled={busy}>
                {busy ? 'Sending…' : 'Send Reset Link'}
              </button>
            </form>
            <button className="admin-auth-link" onClick={() => { setMode('login'); setError(''); }}>
              Back to login
            </button>
          </>
        )}

        {mode === 'sent' && (
          <>
            <h1 className="display admin-auth-title">Check your inbox</h1>
            <p className="admin-auth-sub">
              If <strong>{email}</strong> matches an admin account, a reset link has been sent.
              The link expires in 30 minutes.
            </p>
            <button className="btn btn-primary admin-auth-submit" onClick={() => { setMode('login'); setError(''); }}>
              Back to login
            </button>
          </>
        )}
      </div>
    </div>
  );
};