// ════════════════════════════════════════════════════════════════
// PEXXIE · AUTH — the login step between the website and the app.
// Full-bleed (no shell). Registers window.SCREENS['login'].
// ════════════════════════════════════════════════════════════════
const { Icon: _AIcon, PXLogo: _APXLogo, Btn: _ABtn, Spark: _ASpark } = window;

window.SCREENS['login'] = function Login() {
  const P = window.PX;
  const { go, toast } = window.useApp();
  const [email, setEmail] = React.useState('you@honestloaves.com');
  const [pw, setPw] = React.useState('');
  const [err, setErr] = React.useState('');
  const [busy, setBusy] = React.useState(null);   // 'signin' | 'google' while a request is pending
  const [reset, setReset] = React.useState(false);

  const submit = () => {
    if (busy) return;
    if (!email.trim() || !pw.trim()) {
      setErr(!email.trim() ? 'Enter the email for your workspace.' : 'Enter your password.');
      return;
    }
    setErr(''); setReset(false); setBusy('signin');
    setTimeout(() => go('home'), 650);
  };
  const google = () => {
    if (busy) return;
    setErr(''); setReset(false); setBusy('google');
    setTimeout(() => go('home'), 950);
  };
  const forgot = () => {
    if (busy) return;
    if (!email.trim()) { setErr('Enter your email first, then tap Forgot.'); return; }
    setErr(''); setReset(true);
    toast('Password reset link sent to ' + email.trim(), { tone: 'sage', icon: 'mail' });
  };
  const onKey = (e) => { if (e.key === 'Enter') submit(); };
  const emailBad = err && !email.trim();
  const pwBad = err && !!email.trim() && !pw.trim();

  const inputWrap = {
    display: 'flex', alignItems: 'center', gap: 10, background: P.canvas,
    border: `1px solid ${P.lineStrong || P.line}`, borderRadius: 11, padding: '0 13px', height: 46,
  };
  const input = {
    flex: 1, border: 'none', background: 'transparent', outline: 'none',
    fontSize: 14.5, color: P.ink, fontFamily: P.sans, height: '100%',
  };

  return (
    <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column', fontFamily: P.sans, background: P.canvas, color: P.ink }}>
      {/* slim top bar — escape hatch out to the marketing site (separate deploy: /pexxie-website) */}
      <div style={{ height: 64, display: 'flex', alignItems: 'center', padding: '0 28px' }}>
        <a href="https://pexxie.com" style={{ display: 'flex', alignItems: 'center', gap: 7, fontSize: 13.5, color: P.ink2, cursor: 'pointer', fontWeight: 500, textDecoration: 'none' }}>
          <span style={{ fontSize: 16, lineHeight: 1 }}>←</span> Back to site
        </a>
      </div>

      {/* centered card */}
      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '0 24px 64px' }}>
        <div style={{ width: 392 }}>
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 22 }}><_APXLogo size={28}/></div>

          <h1 style={{ fontFamily: P.serif, fontStyle: 'italic', fontWeight: 600, fontSize: 38, letterSpacing: -0.5, textAlign: 'center', margin: '0 0 6px' }}>Welcome back.</h1>
          <p style={{ textAlign: 'center', color: P.ink3, fontSize: 14, margin: '0 0 26px' }}>One login for your whole business.</p>

          <div style={{ background: P.card, border: `1px solid ${P.line}`, borderRadius: 18, padding: 24, boxShadow: P.shLg }}>
            <_ABtn kind="default" size="lg" full onClick={google} disabled={busy === 'google'}>
              {busy === 'google'
                ? <span style={{ display: 'inline-flex', alignItems: 'center', gap: 9 }}>
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" style={{ animation: 'pxspin .7s linear infinite' }}><path d="M12 3a9 9 0 1 1-9 9"/></svg>
                    Connecting to Google…
                  </span>
                : <span style={{ display: 'inline-flex', alignItems: 'center', gap: 9 }}>
                    <svg width="16" height="16" viewBox="0 0 48 48"><path fill="#EA4335" d="M24 9.5c3.5 0 6.6 1.2 9 3.6l6.7-6.7C35.6 2.4 30.2 0 24 0 14.6 0 6.4 5.4 2.5 13.3l7.8 6.1C12.2 13.7 17.6 9.5 24 9.5z"/><path fill="#4285F4" d="M46.1 24.5c0-1.6-.1-3.1-.4-4.5H24v9h12.4c-.5 2.9-2.1 5.3-4.6 7l7.1 5.5c4.1-3.8 6.5-9.4 6.5-16z"/><path fill="#FBBC05" d="M10.3 28.6c-.5-1.4-.8-2.9-.8-4.6s.3-3.2.8-4.6l-7.8-6.1C.9 16.5 0 20.1 0 24s.9 7.5 2.5 10.7l7.8-6.1z"/><path fill="#34A853" d="M24 48c6.2 0 11.4-2 15.2-5.5l-7.1-5.5c-2 1.3-4.6 2.1-8.1 2.1-6.4 0-11.8-4.2-13.7-10l-7.8 6.1C6.4 42.6 14.6 48 24 48z"/></svg>
                    Continue with Google
                  </span>}
            </_ABtn>

            <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '18px 0' }}>
              <div style={{ flex: 1, height: 1, background: P.line }}/>
              <span style={{ fontSize: 11.5, color: P.ink3, textTransform: 'uppercase', letterSpacing: 0.8 }}>or</span>
              <div style={{ flex: 1, height: 1, background: P.line }}/>
            </div>

            <label style={{ fontSize: 12, fontWeight: 600, color: P.ink2, display: 'block', marginBottom: 7 }}>Email</label>
            <div style={{ ...inputWrap, marginBottom: 15, border: `1px solid ${emailBad ? P.rose : (P.lineStrong || P.line)}` }}>
              <_AIcon name="mail" size={16} color={emailBad ? P.rose : P.ink3}/>
              <input value={email} onChange={e => { setEmail(e.target.value); if (err) setErr(''); }} onKeyDown={onKey} style={input} placeholder="you@yourco.com"/>
            </div>

            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 7 }}>
              <label style={{ fontSize: 12, fontWeight: 600, color: P.ink2 }}>Password</label>
              <span onClick={forgot} style={{ fontSize: 12, color: P.spark, cursor: 'pointer' }}>Forgot?</span>
            </div>
            <div style={{ ...inputWrap, marginBottom: 16, border: `1px solid ${pwBad ? P.rose : (P.lineStrong || P.line)}` }}>
              <_AIcon name="lock" size={16} color={pwBad ? P.rose : P.ink3}/>
              <input value={pw} onChange={e => { setPw(e.target.value); if (err) setErr(''); }} onKeyDown={onKey} type="password" style={input} placeholder="••••••••••"/>
            </div>

            {err && <div style={{ color: P.rose, fontSize: 12.5, marginBottom: 14, display: 'flex', alignItems: 'center', gap: 6 }}><_AIcon name="alert" size={13} stroke={2.5}/>{err}</div>}
            {reset && !err && <div style={{ color: P.sage, fontSize: 12.5, marginBottom: 14, display: 'flex', alignItems: 'center', gap: 6 }}><_AIcon name="check" size={13} stroke={2.5}/>Reset link sent to your email — check your inbox.</div>}

            <_ABtn kind="primary" size="lg" full onClick={submit} loading={busy === 'signin'} iconR="arrowRight">Sign in</_ABtn>
          </div>

          <p style={{ textAlign: 'center', color: P.ink3, fontSize: 13.5, marginTop: 22 }}>
            New to Pexxie?{' '}
            <span onClick={() => go('onboard')} style={{ color: P.spark, fontWeight: 600, cursor: 'pointer' }}>Get started →</span>
          </p>
        </div>
      </div>
    </div>
  );
};