// Login page — Phase 2 (placeholder)
// Will be built out with email/password login for vendors

function LoginPage({ onLogin }) {
  const [email, setEmail] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [error, setError] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const [mode, setMode] = React.useState('login'); // 'login' | 'reset'

  const handleLogin = async (e) => {
    e.preventDefault();
    setError('');
    setLoading(true);
    try {
      await auth.signInWithEmailAndPassword(email, password);
      if (onLogin) onLogin();
    } catch (err) {
      if (err.code === 'auth/user-not-found' || err.code === 'auth/wrong-password' || err.code === 'auth/invalid-credential') {
        setError('Invalid email or password.');
      } else if (err.code === 'auth/too-many-requests') {
        setError('Too many attempts. Please try again later.');
      } else {
        setError(err.message);
      }
    } finally {
      setLoading(false);
    }
  };

  const handleReset = async (e) => {
    e.preventDefault();
    setError('');
    setLoading(true);
    try {
      await auth.sendPasswordResetEmail(email);
      setError('');
      setMode('login');
      alert('Password reset email sent. Check your inbox.');
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  if (mode === 'reset') {
    return (
      <div className="login-page">
        <div className="login-card">
          <div className="brand-mark" style={{ margin: '0 auto 16px', width: 48, height: 48 }}></div>
          <h2>Reset Password</h2>
          <p style={{ color: 'var(--ink-soft)', fontSize: 14, marginBottom: 20 }}>Enter your email to receive a reset link.</p>
          <form onSubmit={handleReset}>
            <div className="field">
              <label>Email</label>
              <input className="input" type="email" value={email} onChange={e => setEmail(e.target.value)} required autoFocus/>
            </div>
            {error && <div className="login-error">{error}</div>}
            <button className="btn primary lg" type="submit" disabled={loading} style={{ width: '100%', marginTop: 12 }}>
              {loading ? 'Sending...' : 'Send reset link'}
            </button>
            <button type="button" className="btn ghost" onClick={() => setMode('login')} style={{ width: '100%', marginTop: 8 }}>
              Back to login
            </button>
          </form>
        </div>
      </div>
    );
  }

  return (
    <div className="login-page">
      <div className="login-card">
        <div className="brand-mark" style={{ fontStyle: 'italic', margin: '0 auto 16px', width: 48, height: 48, fontSize: 24 }}>P</div>
        <h2>Vendor Login</h2>
        <p style={{ color: 'var(--ink-soft)', fontSize: 14, marginBottom: 20 }}>Sign in to submit and track your cabinet repair orders.</p>
        <form onSubmit={handleLogin}>
          <div className="field">
            <label>Email</label>
            <input className="input" type="email" value={email} onChange={e => setEmail(e.target.value)} required autoFocus/>
          </div>
          <div className="field" style={{ marginTop: 12 }}>
            <label>Password</label>
            <input className="input" type="password" value={password} onChange={e => setPassword(e.target.value)} required/>
          </div>
          {error && <div className="login-error">{error}</div>}
          <button className="btn primary lg" type="submit" disabled={loading} style={{ width: '100%', marginTop: 16 }}>
            {loading ? 'Signing in...' : 'Sign in'}
          </button>
          <button type="button" className="btn ghost" onClick={() => setMode('reset')} style={{ width: '100%', marginTop: 8 }}>
            Forgot password?
          </button>
        </form>
      </div>
    </div>
  );
}

Object.assign(window, { LoginPage });