// Onboarding, splash, phone-OTP auth screens

// ─── Splash ───────────────────────────────────────────────────────────
function SplashScreen({ theme, lang }) {
  const T = theme;
  const l = L[lang];
  const nav = useNav();
  return (
    <PhoneFrame theme={T} dir={isRTL(lang) ? 'rtl' : 'ltr'} statusOverlay hideStatus>
      <div onClick={() => nav?.nav('onb1')} style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(120% 80% at 50% 0%, ${T.camel} 0%, ${T.camelDeep} 55%, ${T.pastelBrown} 100%)`,
        cursor: 'pointer',
      }}/>
      <div style={{ position: 'absolute', inset: 0, opacity: 0.18 }}>
        <DuyufPattern color="#FFF" opacity={0.35} size={64}/>
      </div>
      <PhoneStatusBar theme={T} color="#fff"/>
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        textAlign: 'center', padding: 40,
      }}>
        <div style={{
          width: 132, height: 132, borderRadius: 32, background: 'rgba(255,255,255,0.14)',
          backdropFilter: 'blur(20px)', display: 'flex', alignItems: 'center', justifyContent: 'center',
          marginBottom: 28, border: '1px solid rgba(255,255,255,0.18)',
        }}>
          <DuyufMark size={86} color="#fff" accent="#fff"/>
        </div>
        <div style={{ fontFamily: 'Alexandria', fontWeight: 700, fontSize: 44, color: '#fff', letterSpacing: '-0.02em', lineHeight: 1 }}>
          {l.appName}
        </div>
        <div style={{ marginTop: 10, fontFamily: 'Alexandria', fontWeight: 400, fontSize: 14, color: 'rgba(255,255,255,0.78)' }}>
          {l.tagline}
        </div>
      </div>
      {/* Footer ornament */}
      <div style={{ position: 'absolute', bottom: 50, left: 0, right: 0, textAlign: 'center', color: 'rgba(255,255,255,0.55)', fontSize: 11, letterSpacing: '0.12em' }}>
        DUYUF · 2024
      </div>
    </PhoneFrame>
  );
}

// ─── Onboarding (3 slides shown together) ─────────────────────────────
function OnboardingScreen({ theme, lang, step = 1 }) {
  const T = theme;
  const l = L[lang];
  const rtl = isRTL(lang);
  const nav = useNav();
  // If used by router (no explicit step prop), read from route name
  if (nav && nav.route && nav.route.startsWith('onb')) step = parseInt(nav.route.slice(3), 10) || step;
  const slides = [
    { title: l.onb1Title, body: l.onb1Body, tone: 'camel', icon: 'kaaba' },
    { title: l.onb2Title, body: l.onb2Body, tone: 'cream', icon: 'bed' },
    { title: l.onb3Title, body: l.onb3Body, tone: 'brown', icon: 'compass' },
  ];
  const s = slides[step - 1];
  return (
    <PhoneFrame theme={T} dir={rtl ? 'rtl' : 'ltr'}>
      <div style={{ position: 'absolute', inset: 0, padding: '60px 24px 40px', display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 8 }}>
          <DuyufMark size={28} color={T.primary}/>
          <span onClick={() => nav?.nav('home')} style={{ color: T.textMuted, fontSize: 13, fontWeight: 500, cursor: 'pointer' }}>{l.skip}</span>
        </div>

        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 28 }}>
          <ImgSlot theme={T} tone={s.tone} height={300} radius={28}>
            <div style={{
              position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <div style={{
                width: 120, height: 120, borderRadius: 28, background: 'rgba(255,255,255,0.78)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                boxShadow: T.heroShadow,
              }}>
                <Icon name={s.icon} size={60} color={T.primary} strokeWidth={1.4}/>
              </div>
            </div>
          </ImgSlot>
          <div>
            <h1 style={{
              margin: 0, fontFamily: 'Alexandria', fontWeight: 700, fontSize: 28, lineHeight: 1.15,
              color: T.text, letterSpacing: '-0.01em',
            }}>{s.title}</h1>
            <p style={{
              margin: '12px 0 0', fontFamily: 'Alexandria', fontWeight: 400, fontSize: 15, lineHeight: 1.55,
              color: T.textMuted, textWrap: 'pretty',
            }}>{s.body}</p>
          </div>
        </div>

        {/* Dots */}
        <div style={{ display: 'flex', gap: 6, justifyContent: 'center', marginBottom: 22 }}>
          {[1,2,3].map(i => (
            <div key={i} style={{
              width: i === step ? 22 : 7, height: 7, borderRadius: 999,
              background: i === step ? T.primary : T.hairlineStrong,
              transition: 'width 0.2s',
            }}/>
          ))}
        </div>
        <Button kind="primary" size="lg" full theme={T} icon={rtl ? undefined : 'arrow-r'}
          onClick={() => nav?.nav(step === 3 ? 'phone' : `onb${step + 1}`)}>
          {step === 3 ? l.begin : l.next}
        </Button>
      </div>
    </PhoneFrame>
  );
}

// ─── Phone OTP — number entry ─────────────────────────────────────────
function PhoneAuthScreen({ theme, lang }) {
  const T = theme;
  const l = L[lang];
  const rtl = isRTL(lang);
  const nav = useNav();
  return (
    <PhoneFrame theme={T} dir={rtl ? 'rtl' : 'ltr'}>
      <div style={{ padding: '60px 24px 0', height: '100%', display: 'flex', flexDirection: 'column' }}>
        <button onClick={() => nav?.back()} style={{ width: 40, height: 40, borderRadius: 12, background: T.surfaceAlt, border: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>
          <Icon name={rtl ? 'arrow-r' : 'arrow-l'} size={20} color={T.text}/>
        </button>

        <div style={{ marginTop: 28 }}>
          <DuyufMark size={42} color={T.primary}/>
          <h1 style={{ margin: '18px 0 6px', fontFamily: 'Alexandria', fontWeight: 700, fontSize: 26, color: T.text, letterSpacing: '-0.01em' }}>
            {rtl ? 'سجّل الدخول بهاتفك' : 'Sign in with your phone'}
          </h1>
          <p style={{ margin: 0, fontFamily: 'Alexandria', fontSize: 14, color: T.textMuted, lineHeight: 1.5 }}>
            {rtl ? 'سنرسل لك رمز التحقق عبر رسالة نصية' : "We'll send you a verification code by SMS"}
          </p>
        </div>

        <div style={{ marginTop: 36 }}>
          <label style={{ display: 'block', fontFamily: 'Alexandria', fontSize: 12, fontWeight: 600, color: T.textMuted, marginBottom: 8, letterSpacing: '0.04em', textTransform: 'uppercase' }}>
            {rtl ? 'رقم الجوال' : 'Mobile number'}
          </label>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 8,
            background: T.surface, border: `1px solid ${T.hairlineStrong}`, borderRadius: 14,
            padding: '0 14px', height: 58,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, paddingInlineEnd: 10, borderInlineEnd: `1px solid ${T.hairline}` }}>
              <span style={{ fontSize: 20 }}>🇸🇦</span>
              <span style={{ fontFamily: 'Alexandria', fontSize: 15, fontWeight: 600, color: T.text }}>+966</span>
              <Icon name="arrow-down" size={14} color={T.textMuted}/>
            </div>
            <span style={{ fontFamily: 'Alexandria', fontSize: 19, fontWeight: 500, color: T.text, letterSpacing: '0.04em', flex: 1 }} dir="ltr">5•• ••• •••</span>
          </div>
        </div>

        <div style={{ marginTop: 'auto', paddingBottom: 44 }}>
          <p style={{ fontFamily: 'Alexandria', fontSize: 11.5, color: T.textFaint, textAlign: 'center', lineHeight: 1.5, marginBottom: 14 }}>
            {rtl ? 'بالمتابعة، أنت توافق على الشروط وسياسة الخصوصية' : 'By continuing you agree to the Terms & Privacy Policy'}
          </p>
          <Button kind="primary" size="lg" full theme={T} onClick={() => nav?.nav('otp')}>
            {rtl ? 'إرسال الرمز' : 'Send code'}
          </Button>

          {/* Divider */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '18px 0 14px' }}>
            <div style={{ flex: 1, height: 1, background: T.hairline }}/>
            <span style={{ fontFamily: 'Alexandria', fontSize: 11, color: T.textFaint, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
              {rtl ? 'أو' : 'or'}
            </span>
            <div style={{ flex: 1, height: 1, background: T.hairline }}/>
          </div>

          {/* Guest mode */}
          <button onClick={() => nav?.nav('home', { isGuest: true })} style={{
            width: '100%', height: 52, borderRadius: 14,
            background: 'transparent', border: `1px solid ${T.hairlineStrong}`,
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            fontFamily: 'Alexandria', fontWeight: 600, fontSize: 14, color: T.text,
            cursor: 'pointer',
          }}>
            <Icon name="compass" size={18} color={T.text}/>
            {rtl ? 'تصفّح كضيف' : 'Continue as guest'}
          </button>
          <p style={{ margin: '8px 0 0', fontFamily: 'Alexandria', fontSize: 10.5, color: T.textFaint, textAlign: 'center' }}>
            {rtl ? 'ستحتاج تسجيل الدخول قبل إتمام أي حجز' : "You'll sign in before completing any booking"}
          </p>
        </div>
      </div>
    </PhoneFrame>
  );
}

// ─── OTP entry ────────────────────────────────────────────────────────
function OTPScreen({ theme, lang }) {
  const T = theme;
  const l = L[lang];
  const rtl = isRTL(lang);
  const nav = useNav();
  const digits = ['5', '8', '2', '', '', ''];
  return (
    <PhoneFrame theme={T} dir={rtl ? 'rtl' : 'ltr'}>
      <div style={{ padding: '60px 24px 0', height: '100%', display: 'flex', flexDirection: 'column' }}>
        <button onClick={() => nav?.back()} style={{ width: 40, height: 40, borderRadius: 12, background: T.surfaceAlt, border: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>
          <Icon name={rtl ? 'arrow-r' : 'arrow-l'} size={20} color={T.text}/>
        </button>
        <div style={{ marginTop: 28 }}>
          <h1 style={{ margin: 0, fontFamily: 'Alexandria', fontWeight: 700, fontSize: 26, color: T.text, letterSpacing: '-0.01em' }}>
            {rtl ? 'أدخل رمز التحقق' : 'Enter the code'}
          </h1>
          <p style={{ margin: '8px 0 0', fontFamily: 'Alexandria', fontSize: 14, color: T.textMuted, lineHeight: 1.5 }}>
            {rtl ? 'أُرسل إلى +966 5•• ••• 412' : 'Sent to +966 5•• ••• 412'}
          </p>
        </div>
        <div style={{ marginTop: 36, display: 'flex', gap: 10, justifyContent: 'center' }} dir="ltr">
          {digits.map((d, i) => (
            <div key={i} style={{
              width: 46, height: 56, borderRadius: 14,
              background: T.surface,
              border: `1.5px solid ${d ? T.primary : T.hairlineStrong}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: 'Alexandria', fontWeight: 700, fontSize: 24, color: T.text,
              boxShadow: d ? `0 0 0 4px ${T.camelMist}` : 'none',
            }}>{d}</div>
          ))}
        </div>
        <p style={{ margin: '20px 0 0', textAlign: 'center', fontSize: 13, color: T.textMuted, fontFamily: 'Alexandria' }}>
          {rtl ? 'إعادة إرسال الرمز خلال' : 'Resend code in'} <span style={{ color: T.primary, fontWeight: 600 }}>00:42</span>
        </p>

        {/* Keypad */}
        <div style={{ marginTop: 'auto', paddingBottom: 30 }} dir="ltr">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
            {['1','2','3','4','5','6','7','8','9','','0','⌫'].map((k, i) => (
              <div key={i} onClick={() => k && k !== '⌫' && nav?.nav('home')} style={{
                height: 48, borderRadius: 12,
                background: k && k !== '⌫' ? T.surface : (k === '⌫' ? 'transparent' : 'transparent'),
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'Alexandria', fontSize: 22, fontWeight: 500, color: T.text,
                border: k && k !== '⌫' ? `1px solid ${T.hairline}` : 'none',
                cursor: k ? 'pointer' : 'default',
              }}>{k}</div>
            ))}
          </div>
        </div>
      </div>
    </PhoneFrame>
  );
}

Object.assign(window, { SplashScreen, OnboardingScreen, PhoneAuthScreen, OTPScreen });