// app.jsx — root: device frame, scaling, navigation, tab bar
(function(){
  const { useState, useEffect } = React;
  const Icon = window.Icon;
  const { Header, TabBar, HorseAvatar, SecureNote } = window;

  // ── More / profile screen ──
  function MoreScreen({ go }){
    const D = window.DATA;
    const groups = [
      [ { icon:'box',    k:'طلباتي', go:'orders' },
        { icon:'shield', k:'الملف الصحي', go:'health' },
        { icon:'pin',    k:'العناوين المحفوظة' },
        { icon:'card',   k:'طرق الدفع' } ],
      [ { icon:'bell',   k:'الإشعارات', tail:'مفعّلة' },
        { icon:'headset',k:'الدعم والمساعدة' },
        { icon:'doc',    k:'الشروط والخصوصية' } ],
    ];
    return (
      <div className="scroll pad-tab scr-anim">
        <Header title="المزيد" />
        <div style={{padding:'2px 16px 0'}}>
          {/* owner card */}
          <div className="card card-pad" style={{display:'flex', alignItems:'center', gap:14, marginBottom:16}}>
            <div className="ph avatar-ring" style={{width:58, height:58, borderRadius:'50%', padding:0}}>
              <div className="ph" style={{width:58, height:58, borderRadius:'50%'}}><span className="ph-label">صورة</span></div>
            </div>
            <div style={{flex:1}}>
              <div className="ar lead" style={{fontSize:16}}>عبدالله المطيري</div>
              <div className="ar t-mut t-sm" style={{fontWeight:600, marginTop:2}}>مالك · {D.horse.stable}</div>
            </div>
            <button className="hdr-btn" aria-label="تعديل"><Icon name="edit" size={17}/></button>
          </div>

          {/* my horses */}
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:12}}>
            <h3 className="ar lead" style={{margin:0, fontSize:15}}>خيولي ({D.horses.length})</h3>
            <button onClick={()=>go('addHorse')} className="ar" style={{border:'none', background:'none', color:'var(--green)', fontWeight:700, fontSize:13, cursor:'pointer'}}>+ إضافة</button>
          </div>
          <div className="card" style={{overflow:'hidden', marginBottom:16}}>
            {D.horses.map((hh,i)=>(
              <div key={i} className="tap" onClick={()=>go('health')} style={{padding:14, display:'flex', alignItems:'center', gap:13, borderTop:i?'1px solid var(--line)':'none'}}>
                <HorseAvatar size={46}/>
                <div style={{flex:1}}>
                  <div className="ar lead" style={{fontSize:15}}>{hh.name}</div>
                  <div className="ar t-mut t-xs" style={{fontWeight:600, marginTop:2}}>{hh.breed} · {hh.age}</div>
                </div>
                <span className={'badge '+(hh.statusCls||'ok')}><span className="dot"/>{hh.status||'نشط'}</span>
              </div>
            ))}
          </div>

          {/* settings groups */}
          {groups.map((g,gi)=>(
            <div className="card" key={gi} style={{marginBottom:14, overflow:'hidden'}}>
              {g.map((r,ri)=>(
                <button key={ri} onClick={()=>r.go && go(r.go)}
                  style={{width:'100%', border:'none', background:'none', cursor:'pointer', display:'flex', alignItems:'center', gap:13, padding:'14px 16px', borderTop:ri?'1px solid var(--line)':'none'}}>
                  <span style={{width:34, height:34, borderRadius:10, background:'var(--green-tint)', color:'var(--green)', display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto'}}>
                    <Icon name={r.icon} size={18} sw={1.8}/>
                  </span>
                  <span className="ar lead" style={{flex:1, fontSize:14.5, textAlign:'right'}}>{r.k}</span>
                  {r.tail && <span className="ar t-mut t-xs" style={{fontWeight:600}}>{r.tail}</span>}
                  <span style={{color:'var(--faint)'}}><Icon name="chevron-l" size={18}/></span>
                </button>
              ))}
            </div>
          ))}

          <button className="btn ar" style={{background:'var(--surface)', color:'var(--bad-fg)', boxShadow:'var(--sh-sm)'}}>تسجيل الخروج</button>
          <SecureNote text="الإصدار 2.0 · تطبيق خيل" />
        </div>
      </div>
    );
  }

  const ROOT = { home:'home', feed:'feedList', vet:'vet', transport:'transport', more:'more' };

  function OwnerApp(){
    const [tab,setTab] = useState('home');
    const [stack,setStack] = useState([{name:'home'}]);
    const go = (name,params)=> setStack(s=>[...s,{name,params:params||{}}]);
    const back = ()=> setStack(s=> s.length>1 ? s.slice(0,-1) : s);
    const switchTab = (t)=>{ setTab(t); setStack([{name:ROOT[t]}]); };
    const cur = stack[stack.length-1];

    // ── shopping cart ──
    const [cart,setCart] = useState([]);
    const cartCount = cart.reduce((s,c)=>s+c.qty,0);
    const addToCart = (id,qty=1)=> setCart(c=>{
      const ex = c.find(x=>x.id===id);
      return ex ? c.map(x=>x.id===id?{...x,qty:x.qty+qty}:x) : [...c,{id,qty}];
    });
    const setQty = (id,qty)=> setCart(c=> c.map(x=>x.id===id?{...x,qty:Math.max(1,qty)}:x));
    const removeItem = (id)=> setCart(c=> c.filter(x=>x.id!==id));
    const clearCart = ()=> setCart([]);

    // ── favorite vets ──
    const [favVets,setFavVets] = useState([]);
    const toggleFav = (id)=> setFavVets(f=> f.includes(id) ? f.filter(x=>x!==id) : [...f,id]);

    // ── favorite transport providers ──
    const [favTransport,setFavTransport] = useState([]);
    const toggleFavT = (id)=> setFavTransport(f=> f.includes(id) ? f.filter(x=>x!==id) : [...f,id]);

    const screens = {
      home:       <window.HomeScreen go={go} setTab={switchTab}/>,
      addHorse:   <window.AddHorseScreen back={back}/>,
      feedList:   <window.FeedListScreen go={go} cart={cart} addToCart={addToCart}/>,
      product:    <window.ProductDetailScreen back={back} params={cur.params} go={go} cart={cart} addToCart={addToCart}/>,
      cart:       <window.CartScreen back={back} go={go} cart={cart} setQty={setQty} removeItem={removeItem} clearCart={clearCart}/>,
      orders:     <window.OrdersScreen go={go} back={back}/>,
      feedDetail: <window.FeedDetailScreen back={back} params={cur.params}/>,
      vet:          <window.VetScreen go={go} favVets={favVets} toggleFav={toggleFav}/>,
      vetBook:      <window.VetBookScreen back={back} params={cur.params} go={go} favVets={favVets} toggleFav={toggleFav}/>,
      vetEmergency: <window.VetEmergencyScreen back={back} favVets={favVets}/>,
      transport:         <window.TransportScreen go={go} favTransport={favTransport} toggleFavT={toggleFavT}/>,
      transportProvider: <window.TransportProviderScreen back={back} params={cur.params} go={go} favTransport={favTransport} toggleFavT={toggleFavT}/>,
      transportRequest:  <window.TransportRequestScreen back={back} params={cur.params} go={go}/>,
      tripTrack:         <window.TripTrackScreen back={back}/>,
      health:     <window.HealthScreen back={back} go={go}/>,
      pedigree:   <window.PedigreeScreen back={back}/>,
      more:       <MoreScreen go={go}/>,
    };
    const el = React.cloneElement(screens[cur.name], { key: stack.length+'-'+cur.name });
    const showTab = !['feedDetail','product','cart','vetBook','vetEmergency','transportProvider','transportRequest','tripTrack','addHorse','pedigree'].includes(cur.name);

    return (
      <div className="app">
        {el}
        {showTab && <TabBar active={tab} onTab={switchTab} cartCount={cartCount}/>}
      </div>
    );
  }

  // ── two-device side-by-side stage ──
  const W = 402, H = 874, GAP = 40, LABEL = 44; // LABEL = label block height + gap (unscaled)

  function Phone({ label, accent, children }){
    return (
      <div style={{display:'flex', flexDirection:'column', alignItems:'center', gap:14, width:W}}>
        <div className="ar lead" style={{display:'flex', alignItems:'center', gap:8, fontSize:18, color:'#46514A', whiteSpace:'nowrap'}}>
          <span style={{width:11, height:11, borderRadius:'50%', background:accent}}/>{label}
        </div>
        <window.IOSDevice width={W} height={H}>{children}</window.IOSDevice>
      </div>
    );
  }

  function Root(){
    const apps = [
      { label:'الدخول والتسجيل',       accent:'#7E5BA6', app:<window.AuthApp/> },
      { label:'تطبيق صاحب الخيل',      accent:'#204B30', app:<OwnerApp/> },
      { label:'تطبيق الطبيب البيطري',  accent:'#B08A45', app:<window.DoctorApp/> },
      { label:'تطبيق شركة النقل',      accent:'#3D5E88', app:<window.CompanyApp/> },
      { label:'تطبيق المتجر',          accent:'#AF4A4B', app:<window.MerchantApp/> },
    ];
    const N = apps.length;
    const [vp,setVp] = useState({ w:1200, h:800 });
    const ref = React.useRef(null);
    useEffect(()=>{
      const measure = ()=>{
        const host = ref.current && ref.current.parentElement;
        const w = (host && host.clientWidth)  || window.innerWidth  || 1200;
        const h = (host && host.clientHeight) || window.innerHeight || 800;
        if(w<=0 || h<=0) return;
        setVp({ w, h });
      };
      measure();
      requestAnimationFrame(measure);
      const ro = new ResizeObserver(measure);
      if(ref.current && ref.current.parentElement) ro.observe(ref.current.parentElement);
      window.addEventListener('resize',measure);
      return ()=>{ ro.disconnect(); window.removeEventListener('resize',measure); };
    },[]);

    // responsive: choose how many phones fit per row (down to 1 on small screens)
    const { w, h } = vp;
    const MIN_COL = 280; // smallest comfortable phone-display width (phone→1 col, tablet→2, laptop→4)
    const cols = Math.max(1, Math.min(N, Math.floor((w - 24 + GAP) / (MIN_COL + GAP))));
    const colAvail = (w - 32 - GAP*(cols-1)) / cols;
    const scale = Math.max(0.1, Math.min(colAvail / W, 1));
    const colW = W*scale, colH = (H+LABEL)*scale;
    const rows = Math.ceil(N / cols);
    const fits = rows === 1 && colH <= h; // single row that fits → center, no scroll

    return (
      <div ref={ref} className="stage-pan" style={{
        width:'100%', height:'100%', overflow:'auto',
        display:'flex', flexWrap:'wrap', gap:GAP, justifyContent: fits ? 'center' : 'safe center',
        alignContent: fits ? 'center' : 'flex-start', alignItems:'flex-start',
        padding: fits ? '0' : '24px 16px',
        cursor: fits ? 'default' : 'grab',
      }}>
        {apps.map((p,i)=>(
          <div key={i} style={{width:colW, height:colH, flex:'0 0 auto'}}>
            <div style={{transformOrigin:'top left', transform:`scale(${scale})`, width:W}}>
              <Phone label={p.label} accent={p.accent}>{p.app}</Phone>
            </div>
          </div>
        ))}
      </div>
    );
  }

  ReactDOM.createRoot(document.getElementById('root')).render(<Root/>);
})();