// screens-auth.jsx — onboarding + login (phone OTP, Google, Apple) shown as its own mockup
(function(){
  const { useState, useRef, useEffect } = React;
  const Icon = window.Icon;

  // ── brand mark ──
  function Brand({ size=64 }){
    return (
      <div style={{width:size, height:size, borderRadius:size*0.32, background:'var(--green)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', boxShadow:'0 10px 24px rgba(30,74,53,.28)'}}>
        <Icon name="horse-tab" size={size*0.5}/>
      </div>
    );
  }

  // ── brand SVGs for social buttons ──
  function GoogleG({ s=20 }){
    return (
      <svg width={s} height={s} viewBox="0 0 48 48" aria-hidden="true">
        <path fill="#FFC107" d="M43.6 20.5H42V20H24v8h11.3C33.7 32.4 29.3 35 24 35c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34.6 5.1 29.6 3 24 3 12.4 3 3 12.4 3 24s9.4 21 21 21 21-9.4 21-21c0-1.4-.1-2.5-.4-3.5z"/>
        <path fill="#FF3D00" d="M6.3 14.7l6.6 4.8C14.7 16 19 13 24 13c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34.6 5.1 29.6 3 24 3 16 3 9.1 7.6 6.3 14.7z"/>
        <path fill="#4CAF50" d="M24 45c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 36 26.7 37 24 37c-5.3 0-9.7-2.6-11.3-7l-6.5 5C9 40.3 15.9 45 24 45z"/>
        <path fill="#1976D2" d="M43.6 20.5H42V20H24v8h11.3c-.8 2.2-2.2 4.1-4.1 5.6l6.2 5.2C39.6 41.5 45 36 45 24c0-1.4-.1-2.5-.4-3.5z"/>
      </svg>
    );
  }
  function AppleLogo({ s=20, color='#fff' }){
    return (
      <svg width={s} height={s} viewBox="0 0 24 24" fill={color} aria-hidden="true">
        <path d="M16.4 12.7c0-2.3 1.9-3.4 2-3.5-1.1-1.6-2.8-1.8-3.4-1.9-1.4-.1-2.8.8-3.5.8-.7 0-1.8-.8-3-.8-1.5 0-3 .9-3.8 2.3-1.6 2.8-.4 6.9 1.1 9.2.7 1.1 1.6 2.3 2.8 2.3 1.1 0 1.5-.7 2.9-.7 1.3 0 1.7.7 2.9.7 1.2 0 2-1.1 2.8-2.2.9-1.3 1.2-2.5 1.2-2.6-.1 0-2.3-.9-2.3-3.6zM14.2 5.9c.6-.8 1-1.8.9-2.9-.9 0-2 .6-2.7 1.4-.6.7-1.1 1.7-.9 2.7 1 .1 2.1-.5 2.7-1.2z"/>
      </svg>
    );
  }

  /* ───────────────────────── ONBOARDING ───────────────────────── */
  const SLIDES = [
    { icon:'horse-tab', title:'أهلاً بك في خيل', text:'كل ما يحتاجه حصانك في تطبيق واحد — رعاية، أعلاف، ونقل.' },
    { icon:'stetho',    title:'رعاية بيطرية',    text:'احجز موعداً مع أفضل الأطباء أو اطلب طوارئ فورية.' },
    { icon:'truck',     title:'أعلاف ونقل آمن',  text:'اطلب الأعلاف لباب الإسطبل ووصّل خيلك بأمان.' },
  ];
  function Onboarding({ onDone }){
    const [i,setI] = useState(0);
    const last = i === SLIDES.length-1;
    const s = SLIDES[i];
    return (
      <div className="scroll scr-anim" style={{display:'flex', flexDirection:'column', padding:'64px 26px 30px'}}>
        <div style={{textAlign:'left'}}>
          <button onClick={onDone} className="ar" style={{border:'none', background:'none', color:'var(--muted)', fontWeight:700, fontSize:13.5, cursor:'pointer'}}>تخطّي</button>
        </div>
        <div style={{flex:1, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', textAlign:'center', gap:18}}>
          <div style={{width:128, height:128, borderRadius:'50%', background:'var(--green-tint)', color:'var(--green)', display:'flex', alignItems:'center', justifyContent:'center'}}>
            <Icon name={s.icon} size={58}/>
          </div>
          <div className="ar lead" style={{fontSize:24, color:'var(--ink)'}}>{s.title}</div>
          <div className="ar" style={{fontSize:15, fontWeight:500, color:'var(--ink-2)', lineHeight:1.8, maxWidth:300}}>{s.text}</div>
        </div>
        <div style={{display:'flex', justifyContent:'center', gap:7, marginBottom:24}}>
          {SLIDES.map((_,k)=>(
            <span key={k} style={{width:k===i?20:8, height:8, borderRadius:99, transition:'.2s', background:k===i?'var(--green)':'var(--line-2)'}}/>
          ))}
        </div>
        <button className="btn btn-primary ar" onClick={()=> last ? onDone() : setI(i+1)}>
          {last ? 'ابدأ الآن' : 'التالي'}
        </button>
      </div>
    );
  }

  /* ───────────────────────── LOGIN ───────────────────────── */
  function Login({ phone, setPhone, onOtp, onSocial }){
    const ok = phone.replace(/\D/g,'').length >= 7;
    return (
      <div className="scroll scr-anim" style={{display:'flex', flexDirection:'column', padding:'70px 26px 30px'}}>
        <div style={{display:'flex', flexDirection:'column', alignItems:'center', textAlign:'center', gap:12, marginBottom:26}}>
          <div className="ar lead" style={{fontSize:22, color:'var(--ink)', marginTop:6}}>تسجيل الدخول</div>
          <div className="ar t-mut" style={{fontSize:13.5, fontWeight:600}}>أدخل رقم جوالك للمتابعة</div>
        </div>

        {/* phone field */}
        <div className="ar t-mut t-xs" style={{fontWeight:700, marginBottom:7}}>رقم الجوال</div>
        <div style={{display:'flex', gap:8, marginBottom:16}}>
          <div style={{display:'flex', alignItems:'center', gap:6, background:'var(--surface)', borderRadius:14, padding:'0 13px', boxShadow:'var(--sh-sm)'}}>
            <span className="num lead" style={{fontSize:15}}>965+</span>
            <span style={{fontSize:16}}>🇰🇼</span>
          </div>
          <input value={phone} onChange={e=>setPhone(e.target.value)} inputMode="numeric" placeholder="5XXX XXXX"
            className="num" style={{flex:1, border:'none', background:'var(--surface)', borderRadius:14, padding:'14px', fontSize:16, fontWeight:600,
              color:'var(--ink)', boxShadow:'var(--sh-sm)', direction:'ltr', textAlign:'left'}}/>
        </div>

        <button className="btn btn-primary ar" disabled={!ok} onClick={onOtp} style={!ok?{opacity:.5}:{}}>متابعة</button>

        {/* divider */}
        <div style={{display:'flex', alignItems:'center', gap:12, margin:'22px 0'}}>
          <span style={{flex:1, height:1, background:'var(--line)'}}/>
          <span className="ar t-mut t-xs" style={{fontWeight:700}}>أو تابع باستخدام</span>
          <span style={{flex:1, height:1, background:'var(--line)'}}/>
        </div>

        {/* social */}
        <button className="btn ar" onClick={onSocial} style={{background:'var(--surface)', color:'var(--ink)', boxShadow:'var(--sh-sm)', marginBottom:10}}>
          <GoogleG s={20}/> المتابعة بحساب Google
        </button>
        <button className="btn ar" onClick={onSocial} style={{background:'#000', color:'#fff'}}>
          <AppleLogo s={19}/> المتابعة بحساب Apple
        </button>

        <div className="ar t-mut t-xs" style={{textAlign:'center', fontWeight:600, marginTop:20, lineHeight:1.7}}>
          بالمتابعة فإنك توافق على <span style={{color:'var(--green)', fontWeight:700}}>الشروط</span> و<span style={{color:'var(--green)', fontWeight:700}}>سياسة الخصوصية</span>
        </div>
      </div>
    );
  }

  /* ───────────────────────── OTP ───────────────────────── */
  function Otp({ phone, onBack, onVerify }){
    const [code,setCode] = useState(['','','','']);
    const refs = [useRef(null),useRef(null),useRef(null),useRef(null)];
    const [t,setT] = useState(30);
    useEffect(()=>{ const id=setInterval(()=>setT(x=> x>0?x-1:0),1000); return ()=>clearInterval(id); },[]);
    const set = (i,v)=>{
      if(!/^\d?$/.test(v)) return;
      const c=[...code]; c[i]=v; setCode(c);
      if(v && i<3 && refs[i+1].current) refs[i+1].current.focus();
    };
    const onKey = (i,e)=>{ if(e.key==='Backspace' && !code[i] && i>0 && refs[i-1].current) refs[i-1].current.focus(); };
    const full = code.join('').length===4;
    return (
      <div className="scroll scr-anim" style={{display:'flex', flexDirection:'column', padding:'62px 26px 30px'}}>
        <button onClick={onBack} className="hdr-btn" aria-label="رجوع" style={{alignSelf:'flex-start'}}><Icon name="chevron-r" size={22} sw={2.2}/></button>
        <div style={{display:'flex', flexDirection:'column', alignItems:'center', textAlign:'center', gap:10, margin:'18px 0 26px'}}>
          <div style={{width:64, height:64, borderRadius:'50%', background:'var(--green-tint)', color:'var(--green)', display:'flex', alignItems:'center', justifyContent:'center'}}>
            <Icon name="phone" size={28}/>
          </div>
          <div className="ar lead" style={{fontSize:21, color:'var(--ink)', marginTop:4}}>أدخل رمز التحقق</div>
          <div className="ar t-mut" style={{fontSize:13.5, fontWeight:600}}>
            أرسلنا رمزاً مكوّناً من 4 أرقام إلى<br/><span className="num" style={{color:'var(--ink)', fontWeight:700, direction:'ltr', display:'inline-block'}}>+965 {phone||'5XXX XXXX'}</span>
          </div>
        </div>

        {/* code boxes */}
        <div style={{display:'flex', gap:12, justifyContent:'center', marginBottom:22, direction:'ltr'}}>
          {code.map((d,i)=>(
            <input key={i} ref={refs[i]} value={d} onChange={e=>set(i,e.target.value.slice(-1))} onKeyDown={e=>onKey(i,e)}
              inputMode="numeric" maxLength={1} className="num"
              style={{width:56, height:64, textAlign:'center', fontSize:26, fontWeight:700, color:'var(--ink)',
                border:`1.5px solid ${d?'var(--green)':'var(--line-2)'}`, borderRadius:16, background: d?'var(--green-tint)':'var(--surface)', outline:'none'}}/>
          ))}
        </div>

        <button className="btn btn-primary ar" disabled={!full} onClick={onVerify} style={!full?{opacity:.5}:{}}>تأكيد</button>

        <div className="ar t-mut" style={{textAlign:'center', fontSize:13, fontWeight:600, marginTop:18}}>
          {t>0
            ? <span>إعادة إرسال الرمز خلال <span className="num" style={{color:'var(--ink)', fontWeight:700}}>0:{String(t).padStart(2,'0')}</span></span>
            : <button onClick={()=>setT(30)} className="ar" style={{border:'none', background:'none', color:'var(--green)', fontWeight:700, fontSize:13.5, cursor:'pointer'}}>إعادة إرسال الرمز</button>}
        </div>
      </div>
    );
  }

  /* ───────────────────────── SUCCESS ───────────────────────── */
  function Success({ onReplay }){
    return (
      <div className="scroll scr-anim" style={{display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', textAlign:'center', padding:'0 30px'}}>
        <div style={{width:104, height:104, borderRadius:'50%', background:'var(--ok-bg)', color:'var(--ok-fg)', display:'flex', alignItems:'center', justifyContent:'center', marginBottom:22}}>
          <Icon name="check" size={52} sw={2.4}/>
        </div>
        <div className="ar lead" style={{fontSize:22, color:'var(--ink)'}}>تم تسجيل الدخول بنجاح</div>
        <div className="ar t-mut" style={{fontSize:14, fontWeight:600, marginTop:8, lineHeight:1.7}}>مرحباً بك في خيل 👋<br/>جارٍ تجهيز لوحتك الرئيسية…</div>
        <button className="btn btn-line ar" style={{marginTop:26, width:'auto', padding:'12px 30px'}} onClick={onReplay}>إعادة عرض التسجيل</button>
      </div>
    );
  }

  /* ───────────────────────── AUTH APP (own mockup) ───────────────────────── */
  function AuthApp(){
    const [step,setStep] = useState('onboard'); // onboard | login | otp | done
    const [phone,setPhone] = useState('');
    return (
      <div className="app">
        {step==='onboard' && <Onboarding key="ob" onDone={()=>setStep('login')}/>}
        {step==='login'   && <Login key="lg" phone={phone} setPhone={setPhone} onOtp={()=>setStep('otp')} onSocial={()=>setStep('done')}/>}
        {step==='otp'     && <Otp key="ot" phone={phone} onBack={()=>setStep('login')} onVerify={()=>setStep('done')}/>}
        {step==='done'    && <Success key="dn" onReplay={()=>{ setPhone(''); setStep('onboard'); }}/>}
      </div>
    );
  }

  window.AuthApp = AuthApp;
})();