// Sign-in screen — single email/password page

const Signin = ({ tweaks, navigate, setRole }) => {
  const { Nav, Footer, Btn, Field, inputStyle, Wordmark } = window;
  const [email, setEmail] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [as, setAs] = React.useState('member'); // demo only

  return (
    <div style={{ background: 'var(--bg)', minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
      <Nav tweaks={tweaks} navigate={navigate} active="signin" />

      <section style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '64px 24px' }}>
        <div style={{ width: '100%', maxWidth: 460 }}>
          <div style={{ textAlign: 'center', marginBottom: 40 }}>
            <Wordmark variant={tweaks.wordmark} />
            <h1 className="serif" style={{ fontSize: 40, fontWeight: 500, lineHeight: 1.1, margin: '24px 0 12px', textWrap: 'balance' }}>
              Sign in
            </h1>
            <p style={{ fontSize: 14, color: 'var(--ink-3)', margin: 0 }}>
              For confirmed members and elders of partner churches.
            </p>
          </div>

          <form onSubmit={e => { e.preventDefault(); if (setRole) setRole(as); navigate(as === 'elder' ? 'elder-home' : as === 'admin' ? 'admin-home' : 'member-home'); }}
            style={{ background: 'var(--paper)', border: '1px solid var(--line)', padding: 36 }}>
            <Field label="Email">
              <input style={inputStyle} type="email" autoFocus value={email}
                onChange={e => setEmail(e.target.value)} placeholder="hannah.kemp@gmail.com" />
            </Field>
            <div style={{ height: 18 }}></div>
            <Field label="Password">
              <input style={inputStyle} type="password" value={password}
                onChange={e => setPassword(e.target.value)} placeholder="••••••••••" />
            </Field>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 8, fontSize: 13 }}>
              <label style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--ink-3)', cursor: 'pointer' }}>
                <input type="checkbox" /> Stay signed in
              </label>
              <a href="#" style={{ color: 'var(--ink-3)', textDecoration: 'underline', textDecorationColor: 'var(--line-2)' }}>Forgot password?</a>
            </div>

            <div style={{ marginTop: 28 }}>
              <Btn kind="primary" type="submit" style={{ width: '100%', justifyContent: 'center' }}>Sign in</Btn>
            </div>

            {/* Demo-only role switch */}
            <div style={{ marginTop: 24, padding: 16, background: 'var(--bg-2)', border: '1px dashed var(--line-2)' }}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--taupe)', marginBottom: 10 }}>Demo · sign in as</div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6 }}>
                {[['member', 'Member'], ['elder', 'Elder'], ['admin', 'Admin']].map(([v, l]) => (
                  <button key={v} type="button" onClick={() => setAs(v)} style={{
                    padding: '8px', fontSize: 12, fontFamily: 'var(--mono)',
                    background: as === v ? 'var(--ink)' : 'transparent',
                    color: as === v ? 'var(--paper)' : 'var(--ink-2)',
                    border: '1px solid ' + (as === v ? 'var(--ink)' : 'var(--line-2)'),
                    cursor: 'pointer'
                  }}>{l}</button>
                ))}
              </div>
            </div>
          </form>

          <div style={{ textAlign: 'center', marginTop: 28, fontSize: 14, color: 'var(--ink-3)' }}>
            New to the network?{' '}
            <button onClick={() => navigate('signup')} style={{
              background: 'none', border: 'none', padding: 0, color: 'var(--ink)',
              fontFamily: 'inherit', fontSize: 14, textDecoration: 'underline', textDecorationColor: 'var(--line-2)', cursor: 'pointer'
            }}>Request to join</button>
          </div>
        </div>
      </section>

      <Footer tweaks={tweaks} navigate={navigate} />
    </div>
  );
};

window.Signin = Signin;