// screens-signin.jsx — Sign in (existing account). Phone + OTP only, no passwords.

function SignInScreen({ onClose, onSignedIn, __initial = 'phone' }) {
  // step: 'phone' → 'otp'
  const [step, setStep] = React.useState(__initial);
  const [phone, setPhone] = React.useState('7700 900 184');

  return (
    <div style={{
      background: PACER.bg, height: '100%', color: PACER.text, fontFamily: PACER.font,
      display: 'flex', flexDirection: 'column', overflow: 'hidden',
    }}>
      {/* Header */}
      <div style={{
        padding: `${SCREEN_TOP}px 16px 12px`,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <button onClick={() => step === 'phone' ? onClose && onClose() : setStep('phone')} style={{
          width: 40, height: 40, borderRadius: 12,
          background: 'rgba(255,255,255,0.04)', border: `1px solid ${PACER.border}`,
          color: PACER.text, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Icon name={step === 'phone' ? 'close' : 'chevL'} size={20} color={PACER.text}/>
        </button>
        <div style={{ fontSize: 16, fontWeight: 600 }}>Sign in</div>
        <div style={{ width: 40 }}/>
      </div>

      <div style={{ flex: 1, minHeight: 0, overflowY: 'auto', padding: '24px 28px 0' }}>
        {/* Logo */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 36 }}>
          <div style={{
            width: 30, height: 30, borderRadius: 9, background: PACER.lime,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Icon name="run" size={18} color={PACER.limeInk}/>
          </div>
          <div style={{ fontSize: 19, fontWeight: 700, letterSpacing: -0.5 }}>Run Crew</div>
        </div>

        {step === 'phone' ? (
          <PhonePane phone={phone} setPhone={setPhone} onNext={() => setStep('otp')}/>
        ) : (
          <OtpPane phone={phone} onSignedIn={onSignedIn}/>
        )}
      </div>

      {/* Footer note */}
      <div style={{ flexShrink: 0, padding: `20px 28px ${20 + SCREEN_BOTTOM}px`, textAlign: 'center' }}>
        <div style={{ fontSize: 11.5, color: PACER.textSubtle, lineHeight: 1.5 }}>
          By signing in you agree to our <span style={{ color: PACER.textDim, textDecoration: 'underline' }}>terms</span> and <span style={{ color: PACER.textDim, textDecoration: 'underline' }}>community guidelines</span>.
        </div>
        <div style={{ fontSize: 12.5, color: PACER.textMute, marginTop: 12 }}>
          New here? <span style={{ color: PACER.lime, fontWeight: 500 }}>Create an account</span>
        </div>
      </div>
    </div>
  );
}

function PhonePane({ phone, setPhone, onNext }) {
  return (
    <>
      <div style={{
        fontSize: 30, fontWeight: 600, letterSpacing: -1.1, lineHeight: 1.1,
        marginBottom: 8,
      }}>Welcome back.</div>
      <div style={{ fontSize: 14.5, color: PACER.textDim, lineHeight: 1.5, marginBottom: 32 }}>
        Enter your phone. We'll text you a code — no passwords here.
      </div>

      <div style={{
        fontSize: 11, fontWeight: 600, color: PACER.textMute,
        letterSpacing: 1.4, textTransform: 'uppercase', marginBottom: 10,
      }}>Phone number</div>

      <div style={{
        background: PACER.card, border: `1px solid ${PACER.border}`,
        borderRadius: 14, padding: '14px 16px',
        display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 6,
          paddingRight: 12, borderRight: `1px solid ${PACER.border}`,
        }}>
          <span style={{ fontSize: 16 }}>🇬🇧</span>
          <span style={{ fontFamily: PACER.mono, fontSize: 15, color: PACER.text, fontWeight: 500 }}>+44</span>
        </div>
        <input
          value={phone}
          onChange={e => setPhone(e.target.value)}
          placeholder="7700 900 184"
          inputMode="tel"
          style={{
            flex: 1, background: 'transparent', border: 'none',
            color: PACER.text, fontFamily: PACER.mono, fontSize: 17, fontWeight: 500,
            outline: 'none', letterSpacing: 1, padding: 0,
          }}
        />
      </div>

      <div style={{
        marginTop: 14, padding: '12px 14px', borderRadius: 12,
        background: 'rgba(255,255,255,0.02)', border: `1px solid ${PACER.border}`,
        display: 'flex', alignItems: 'flex-start', gap: 10,
      }}>
        <Icon name="shield" size={14} color={PACER.textDim} style={{ marginTop: 1, flexShrink: 0 }}/>
        <div style={{ fontSize: 11.5, color: PACER.textMute, lineHeight: 1.5 }}>
          Your number is used for verification only. Never shared with other runners.
        </div>
      </div>

      <div style={{ marginTop: 26 }}>
        <Btn variant="primary" size="lg" style={{ width: '100%' }}
          disabled={phone.trim().length < 6}
          onClick={onNext}
          trailing={<Icon name="arrow" size={18} color={PACER.limeInk}/>}>
          Send code
        </Btn>
      </div>
    </>
  );
}

function OtpPane({ phone, onSignedIn }) {
  const code = ['7', '3', '9', '', '', ''];
  return (
    <>
      <div style={{
        fontSize: 30, fontWeight: 600, letterSpacing: -1.1, lineHeight: 1.1,
        marginBottom: 8,
      }}>Enter the code</div>
      <div style={{ fontSize: 14.5, color: PACER.textDim, lineHeight: 1.5, marginBottom: 32 }}>
        We sent a 6-digit code to <span style={{ color: PACER.text, fontFamily: PACER.mono }}>+44 {phone}</span>.
      </div>

      <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
        {code.map((d, i) => {
          const empty = !d;
          const isCursor = i === 3;
          return (
            <div key={i} style={{
              flex: 1, height: 64,
              borderRadius: 14,
              background: empty ? PACER.inset : PACER.card,
              border: `1px solid ${isCursor ? PACER.lime : empty ? PACER.border : PACER.limeBorder}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: PACER.mono, fontSize: 26, fontWeight: 500,
              color: empty ? PACER.textSubtle : PACER.text,
              position: 'relative',
            }}>
              {d}
              {isCursor && (
                <div style={{
                  position: 'absolute', width: 2, height: 30,
                  background: PACER.lime, borderRadius: 1,
                  animation: 'blink 1s steps(2, start) infinite',
                }}/>
              )}
            </div>
          );
        })}
      </div>

      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        fontSize: 12.5, color: PACER.textMute, marginBottom: 26,
      }}>
        <span>Didn't get it?</span>
        <span style={{ color: PACER.textDim, fontFamily: PACER.mono }}>Resend in 0:24</span>
      </div>

      <Btn variant="primary" size="lg" style={{ width: '100%' }}
        onClick={onSignedIn}
        trailing={<Icon name="arrow" size={18} color={PACER.limeInk}/>}>
        Sign in
      </Btn>

      <button style={{
        marginTop: 14, width: '100%', background: 'transparent', border: 'none',
        padding: '10px', color: PACER.textDim, cursor: 'pointer',
        fontFamily: PACER.font, fontSize: 13, fontWeight: 500,
      }}>
        Use a different number
      </button>
    </>
  );
}

Object.assign(window, { SignInScreen });