// 12 · Sign In   ·   13 · OTP Verification

// ───────────────────────────────────────────────
// Shared AuthShell — split layout with editorial panel on left
// ───────────────────────────────────────────────
function AuthShell({ children, headline, sub }) {
  const C = window.V4;
  const event = window.DESI_EVENTS[0];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 520px', minHeight: '100vh', background: C.bg }}>
      {/* Editorial left panel */}
      <div style={{
        background: `linear-gradient(135deg, ${C.plumDeep} 0%, #3B1F2E 60%, ${C.red} 120%)`,
        color: '#fff', position: 'relative', overflow: 'hidden', padding: '60px 60px 40px',
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
      }}>
        <div style={{
          position: 'absolute', inset: 0,
          background: 'radial-gradient(ellipse 50% 40% at 30% 30%, rgba(255,255,255,0.15), transparent 60%)',
        }}/>
        <div style={{ position: 'relative' }}>
          <a style={{
            fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 600,
            letterSpacing: '-0.03em', color: '#fff', textDecoration: 'none',
          }}>
            desi<em style={{ fontStyle: 'italic', color: C.pink, fontFamily: 'var(--font-serif-italic)', fontWeight: 400, fontSize: 32 }}>pass</em>
          </a>
        </div>

        <div style={{ position: 'relative' }}>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 11.5, letterSpacing: '0.18em',
            textTransform: 'uppercase', color: C.pink, marginBottom: 20, fontWeight: 600,
          }}>Welcome back</div>
          <h1 style={{
            fontFamily: 'var(--font-display)', fontSize: 60, fontWeight: 400,
            letterSpacing: '-0.032em', lineHeight: 1.05, margin: '0 0 22px',
          }}>
            {headline}
          </h1>
          <p style={{ fontSize: 16, color: 'rgba(255,255,255,0.78)', lineHeight: 1.55, maxWidth: 440, margin: 0 }}>{sub}</p>
        </div>

        {/* Featured event floating card */}
        <div style={{ position: 'relative' }}>
          <div style={{
            padding: 14, background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.15)',
            borderRadius: 14, backdropFilter: 'blur(12px)',
            display: 'grid', gridTemplateColumns: '56px 1fr auto', gap: 14, alignItems: 'center', maxWidth: 440,
          }}>
            <div style={{ width: 56, aspectRatio: '3/4', borderRadius: 6, overflow: 'hidden' }}>
              <window.DesiPoster event={event}/>
            </div>
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: C.pink, textTransform: 'uppercase', fontWeight: 600 }}>
                Next in Berlin · {event.dateShort}
              </div>
              <div style={{ fontSize: 14, fontWeight: 500, marginTop: 2 }}>{event.artist}</div>
              <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)' }}>from €{event.priceFrom}</div>
            </div>
            <V4Icon name="arrowUR" size={16}/>
          </div>
          <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.4)', marginTop: 22, fontFamily: 'var(--font-mono)' }}>
            © 2026 Desipass GmbH · Berlin
          </div>
        </div>
      </div>

      {/* Right pane */}
      <div style={{ padding: '60px 60px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <div style={{ width: '100%', maxWidth: 380 }}>
          {children}
        </div>
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────
// 12 · Sign In
// ───────────────────────────────────────────────
function ScreenSignIn({ onNav }) {
  const C = window.V4;
  const [mode, setMode] = React.useState('email'); // email | phone

  return (
    <div data-screen-label="12 Sign In">
      <AuthShell
        headline={<>Sign in to book <em style={{ fontFamily: 'var(--font-serif-italic)', fontStyle: 'italic', color: C.pink }}>faster.</em></>}
        sub="Save payment methods, sync wishlists, and unlock 72-hour pre-sale access to Desipass Originals."
      >
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: C.ink3, marginBottom: 14, fontWeight: 600 }}>Sign in</div>
        <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 36, fontWeight: 500, letterSpacing: '-0.025em', margin: '0 0 8px' }}>Welcome back.</h2>
        <p style={{ fontSize: 14, color: C.ink2, margin: '0 0 30px' }}>
          New here? <a onClick={() => onNav('sign-in')} style={{ color: C.red, fontWeight: 600, cursor: 'pointer' }}>Create an account</a>
        </p>

        {/* Social */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 22 }}>
          <button style={socialBtn(C)}><span style={{ fontSize: 16 }}>G</span> Continue with Google</button>
          <button style={socialBtn(C)}><span style={{ fontSize: 16 }}>🍎</span> Continue with Apple</button>
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: 14, margin: '22px 0', color: C.ink3, fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 600 }}>
          <div style={{ flex: 1, height: 1, background: C.line }}/>
          or
          <div style={{ flex: 1, height: 1, background: C.line }}/>
        </div>

        {/* Toggle email / phone */}
        <div style={{ display: 'flex', background: C.bgAlt, borderRadius: 99, padding: 4, marginBottom: 16 }}>
          {['email', 'phone'].map(m => (
            <button key={m} onClick={() => setMode(m)} style={{
              flex: 1, height: 34, border: 0, borderRadius: 99,
              background: mode === m ? C.paper : 'transparent', color: mode === m ? C.ink : C.ink3,
              fontSize: 12.5, fontWeight: 600, cursor: 'pointer', textTransform: 'capitalize',
              boxShadow: mode === m ? '0 1px 3px rgba(0,0,0,0.08)' : 'none',
            }}>{m}</button>
          ))}
        </div>

        {mode === 'email' ? (
          <>
            <Field label="Email" placeholder="you@example.com"/>
            <div style={{ height: 14 }}/>
            <Field label="Password" placeholder="••••••••"/>
          </>
        ) : (
          <Field label="Phone" placeholder="+49 170 123 4567"/>
        )}

        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', margin: '18px 0 22px', fontSize: 12.5 }}>
          <label style={{ display: 'flex', alignItems: 'center', gap: 6, color: C.ink2, cursor: 'pointer' }}>
            <input type="checkbox" style={{ accentColor: C.red }}/> Remember me
          </label>
          <a style={{ color: C.red, fontWeight: 500, cursor: 'pointer' }}>Forgot password?</a>
        </div>

        <button onClick={() => onNav(mode === 'phone' ? 'otp' : 'bookings')} style={{
          width: '100%', height: 52, borderRadius: 99, border: 0,
          background: C.ink, color: '#fff', fontSize: 14.5, fontWeight: 600,
          cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        }}>{mode === 'phone' ? 'Send code' : 'Sign in'} <V4Icon name="arrow" size={14}/></button>

        <div style={{ fontSize: 11.5, color: C.ink3, marginTop: 28, textAlign: 'center', lineHeight: 1.55 }}>
          By continuing, you agree to Desipass's <a style={{ color: C.ink2 }}>Terms</a> and <a style={{ color: C.ink2 }}>Privacy Policy</a>.
        </div>
      </AuthShell>
    </div>
  );
}

function socialBtn(C) {
  return {
    width: '100%', height: 46, borderRadius: 99,
    background: '#fff', border: `1px solid ${C.line}`,
    display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
    fontSize: 13.5, fontWeight: 500, cursor: 'pointer',
  };
}

// ───────────────────────────────────────────────
// 13 · OTP Verification
// ───────────────────────────────────────────────
function ScreenOTP({ onNav }) {
  const C = window.V4;
  const [code, setCode] = React.useState(['', '', '', '', '', '']);
  const refs = React.useRef([]);
  const [countdown, setCountdown] = React.useState(42);

  React.useEffect(() => {
    if (countdown <= 0) return;
    const t = setTimeout(() => setCountdown(countdown - 1), 1000);
    return () => clearTimeout(t);
  }, [countdown]);

  const handleChange = (i, v) => {
    if (!/^\d?$/.test(v)) return;
    const next = [...code]; next[i] = v; setCode(next);
    if (v && i < 5) refs.current[i+1]?.focus();
  };
  const handleKey = (i, e) => {
    if (e.key === 'Backspace' && !code[i] && i > 0) refs.current[i-1]?.focus();
  };

  const complete = code.every(c => c);

  return (
    <div data-screen-label="13 OTP">
      <AuthShell
        headline={<>Verify your <em style={{ fontFamily: 'var(--font-serif-italic)', fontStyle: 'italic', color: C.pink }}>phone.</em></>}
        sub="A 6-digit code has been sent via SMS. Enter it to continue — this keeps your account safe across devices."
      >
        <button onClick={() => onNav('sign-in')} style={{
          background: 'none', border: 0, color: C.ink2, fontSize: 13, cursor: 'pointer',
          display: 'inline-flex', alignItems: 'center', gap: 6, padding: 0, marginBottom: 20,
        }}><V4Icon name="cheL" size={14}/> Change number</button>

        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: C.ink3, marginBottom: 14, fontWeight: 600 }}>Verify</div>
        <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 36, fontWeight: 500, letterSpacing: '-0.025em', margin: '0 0 10px' }}>Enter your code.</h2>
        <p style={{ fontSize: 14, color: C.ink2, margin: '0 0 32px' }}>
          We sent a 6-digit code to <strong style={{ color: C.ink }}>+49 170 •••• 4567</strong>. It expires in <span style={{ fontFamily: 'var(--font-mono)', color: C.red }}>{String(Math.floor(countdown/60)).padStart(2,'0')}:{String(countdown%60).padStart(2,'0')}</span>.
        </p>

        {/* OTP inputs */}
        <div style={{ display: 'flex', gap: 10, marginBottom: 28 }}>
          {code.map((c, i) => (
            <input
              key={i}
              ref={el => refs.current[i] = el}
              value={c}
              onChange={e => handleChange(i, e.target.value)}
              onKeyDown={e => handleKey(i, e)}
              inputMode="numeric"
              maxLength={1}
              style={{
                flex: 1, aspectRatio: '1', minWidth: 0,
                borderRadius: 12, border: `1px solid ${c ? C.red : C.line}`,
                background: '#fff', textAlign: 'center',
                fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 500,
                color: C.ink, outline: 'none',
                transition: 'border-color 150ms',
              }}
            />
          ))}
        </div>

        <button onClick={() => onNav('bookings')} disabled={!complete} style={{
          width: '100%', height: 52, borderRadius: 99, border: 0,
          background: complete ? C.ink : C.line, color: complete ? '#fff' : C.ink3,
          fontSize: 14.5, fontWeight: 600, cursor: complete ? 'pointer' : 'not-allowed',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        }}>Verify & continue <V4Icon name="arrow" size={14}/></button>

        <div style={{ textAlign: 'center', marginTop: 24, fontSize: 13, color: C.ink2 }}>
          Didn't get it? <button disabled={countdown > 0} style={{
            background: 'none', border: 0, color: countdown > 0 ? C.ink3 : C.red, fontWeight: 600,
            cursor: countdown > 0 ? 'not-allowed' : 'pointer', fontSize: 13,
          }}>Resend code {countdown > 0 && `(${countdown}s)`}</button>
        </div>

        <div style={{ marginTop: 30, padding: 14, background: C.bgAlt, borderRadius: 10, fontSize: 12, color: C.ink2, display: 'flex', gap: 10, alignItems: 'flex-start' }}>
          <V4Icon name="info" size={14}/>
          <span>Tip: if the SMS is slow, we can call you instead — <a style={{ color: C.red, fontWeight: 600, cursor: 'pointer' }}>request voice code</a>.</span>
        </div>
      </AuthShell>
    </div>
  );
}

Object.assign(window, { ScreenSignIn, ScreenOTP });