// screens-company.jsx — transport company role app: dashboard, trips, fleet, profile
(function(){
  const { useState } = React;
  const Icon = window.Icon;
  const { Header, Segmented, Stars, SecureNote } = window;

  // ── status badge using trip statuses ──
  function TripBadge({ status }){
    const s = window.DATA.tripStatus[status] || { label:status, cls:'ok' };
    return <span className={'badge '+s.cls}><span className="dot"/>{s.label}</span>;
  }

  // ── toggle switch ──
  function Switch({ on, onChange }){
    return (
      <button onClick={()=>onChange(!on)} aria-label="تبديل"
        style={{width:48, height:28, borderRadius:999, border:'none', cursor:'pointer', padding:0,
          background:on?'var(--green)':'var(--line-2)', position:'relative', transition:'.18s', flex:'0 0 auto'}}>
        <span style={{position:'absolute', top:3, left:on?23:3, width:22, height:22, borderRadius:'50%', background:'#fff', boxShadow:'var(--sh-sm)', transition:'left .18s'}}/>
      </button>
    );
  }

  // ── route line (from → to) ──
  function Route({ from, to }){
    return (
      <div style={{display:'flex', alignItems:'center', gap:8}}>
        <span style={{display:'inline-flex', alignItems:'center', gap:5, color:'var(--green)'}}>
          <Icon name="pin" size={14} sw={1.8}/><span className="ar t-xs" style={{fontWeight:700, color:'var(--ink-2)'}}>{from}</span>
        </span>
        <span style={{flex:1, height:2, borderRadius:2, background:'repeating-linear-gradient(90deg, var(--line-2) 0 4px, transparent 4px 8px)', minWidth:14}}/>
        <span style={{display:'inline-flex', alignItems:'center', gap:5, color:'var(--green)'}}>
          <Icon name="building" size={14} sw={1.8}/><span className="ar t-xs" style={{fontWeight:700, color:'var(--ink-2)'}}>{to}</span>
        </span>
      </div>
    );
  }

  function TripRow({ t, onAccept, onDecline, onStart, compact }){
    return (
      <div className="card" style={{padding:14, marginBottom:10}}>
        <div style={{display:'flex', alignItems:'center', gap:12, marginBottom:11}}>
          <span style={{width:44, height:44, borderRadius:13, background:'var(--green-tint)', color:'var(--green)', display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto'}}>
            <Icon name="truck" size={21}/>
          </span>
          <div style={{flex:1, minWidth:0}}>
            <div style={{display:'flex', alignItems:'center', gap:8}}>
              <span className="num lead" style={{fontSize:14}}>{t.id}</span>
              <TripBadge status={t.status}/>
            </div>
            <div className="ar t-mut t-xs" style={{fontWeight:600, marginTop:3}}>{t.horse} · {t.owner}</div>
          </div>
          <div style={{textAlign:'left'}}>
            <div className="ar lead" style={{fontSize:13.5, color:'var(--green)'}}>{t.time}</div>
            <div className="ar t-mut t-xs" style={{fontWeight:600, marginTop:2}}>{t.date}</div>
          </div>
        </div>
        <Route from={t.from} to={t.to}/>
        {!compact && (
          <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginTop:11}}>
            <span className="ar t-mut t-xs" style={{fontWeight:600}}>قيمة الرحلة</span>
            <span className="price" style={{fontSize:14.5, color:'var(--green)'}}>{t.price} <span style={{fontSize:10, color:'var(--muted)'}}>د.ك</span></span>
          </div>
        )}
        {t.status==='pending' && onAccept && (
          <div style={{display:'flex', gap:8, marginTop:12}}>
            <button className="btn btn-primary ar" onClick={()=>onAccept(t.id)} style={{padding:'11px', fontSize:13.5}}><Icon name="check" size={17} color="#fff"/> قبول</button>
            <button className="btn btn-line ar" onClick={()=>onDecline(t.id)} style={{padding:'11px', fontSize:13.5, color:'var(--bad-fg)', borderColor:'var(--line-2)'}}>رفض</button>
          </div>
        )}
        {t.status==='accepted' && onStart && (
          <button className="btn btn-soft ar" onClick={()=>onStart(t.id)} style={{marginTop:12, padding:'11px', fontSize:13.5, background:'var(--surface-2)', boxShadow:'none'}}>
            <Icon name="truck" size={17}/> بدء الرحلة
          </button>
        )}
      </div>
    );
  }

  /* ───────────────────────── DASHBOARD ───────────────────────── */
  function CoHome({ online, setOnline, trips, today, fleet }){
    const P = window.DATA.companyProfile;
    const pending = trips.filter(t=>t.status==='pending').length;
    const activeCars = fleet.filter(f=>f.on).length;
    const stats = [ ['رحلات اليوم', today.length, 'truck'], ['طلبات جديدة', pending, 'list'], ['مركبات متاحة', activeCars, 'check'] ];
    return (
      <div className="scroll pad-tab scr-anim">
        {/* greeting */}
        <div style={{padding:'56px 18px 10px', display:'flex', alignItems:'center', gap:12}}>
          <div style={{flex:1, lineHeight:1.35}}>
            <div className="ar t-mut" style={{fontSize:12.5, fontWeight:700}}>السبت، 10 مايو</div>
            <div className="ar lead" style={{fontSize:20, color:'var(--ink)', marginTop:1}}>{P.name} 🚚</div>
          </div>
          <button className="hdr-btn" aria-label="الإشعارات" style={{position:'relative'}}>
            <Icon name="bell" size={20}/>
            <span style={{position:'absolute', top:9, left:11, width:7, height:7, borderRadius:'50%', background:'var(--gold)', border:'1.5px solid var(--surface)'}}/>
          </button>
        </div>

        {/* online toggle */}
        <div style={{padding:'4px 16px 0'}}>
          <div className="card card-pad" style={{display:'flex', alignItems:'center', gap:14}}>
            <span style={{width:46, height:46, borderRadius:14, flex:'0 0 auto', display:'flex', alignItems:'center', justifyContent:'center',
              background:online?'var(--ok-bg)':'var(--surface-2)', color:online?'var(--ok-fg)':'var(--faint)'}}>
              <Icon name={online?'check':'clock'} size={22}/>
            </span>
            <div style={{flex:1}}>
              <div className="ar lead" style={{fontSize:15.5}}>{online?'متاح لاستقبال الطلبات':'غير متاح حالياً'}</div>
              <div className="ar t-mut t-xs" style={{fontWeight:600, marginTop:2}}>{online?'تصلك طلبات الرحلات الجديدة' : 'لن تصلك طلبات جديدة'}</div>
            </div>
            <Switch on={online} onChange={setOnline}/>
          </div>
        </div>

        {/* stats */}
        <div style={{padding:'16px 16px 4px'}}>
          <div className="card" style={{display:'flex', textAlign:'center', overflow:'hidden'}}>
            {stats.map((s,i)=>(
              <div key={i} style={{flex:1, padding:'15px 4px', borderInlineStart:i?'1px solid var(--line)':'none'}}>
                <span style={{color:'var(--green)', display:'inline-flex'}}><Icon name={s[2]} size={18}/></span>
                <div className="lead" style={{fontSize:19, color:'var(--ink)', marginTop:5, fontFamily:"'Rubik',sans-serif"}}>{s[1]}</div>
                <div className="ar t-mut t-xs" style={{fontWeight:600, marginTop:2}}>{s[0]}</div>
              </div>
            ))}
          </div>
        </div>

        {/* today's trips */}
        <div style={{padding:'20px 16px 0'}}>
          <h3 className="ar lead" style={{margin:'0 0 12px', fontSize:16}}>رحلات اليوم</h3>
          {today.length ? today.map(t=>(<TripRow key={t.id} t={t} compact/>))
            : <div className="ar t-mut" style={{textAlign:'center', padding:'30px 0', fontWeight:600}}>لا توجد رحلات اليوم</div>}
        </div>
      </div>
    );
  }

  /* ───────────────────────── TRIPS ───────────────────────── */
  const FILTERS = [
    { id:'all',       label:'الكل' },
    { id:'pending',   label:'طلبات جديدة' },
    { id:'accepted',  label:'مقبولة' },
    { id:'ongoing',   label:'جارية' },
    { id:'completed', label:'مكتملة' },
  ];
  function CoTrips({ trips, onAccept, onDecline, onStart }){
    const [filter,setFilter] = useState('all');
    const list = trips.filter(t=> filter==='all' ? true : t.status===filter);
    return (
      <div className="scroll pad-tab scr-anim">
        <Header title="الرحلات"
          right={<button className="hdr-btn" aria-label="تقويم"><Icon name="calendar" size={19}/></button>} />
        <div style={{padding:'2px 16px 14px'}}>
          <Segmented items={FILTERS} value={filter} onChange={setFilter}/>
        </div>
        <div style={{padding:'0 16px'}}>
          {list.length ? list.map(t=>(<TripRow key={t.id} t={t} onAccept={onAccept} onDecline={onDecline} onStart={onStart}/>))
            : <div className="ar t-mut" style={{textAlign:'center', padding:'48px 0', fontWeight:600}}>لا توجد رحلات في هذه الحالة</div>}
        </div>
      </div>
    );
  }

  /* ───────────────────────── FLEET ───────────────────────── */
  function CoFleet({ online, setOnline, fleet, toggleCar }){
    const activeCars = fleet.filter(f=>f.on).length;
    return (
      <div className="scroll pad-tab scr-anim">
        <Header title="الأسطول"
          right={<button className="hdr-btn" aria-label="إضافة مركبة"><Icon name="plus" size={20} sw={2.2}/></button>} />
        <div style={{padding:'2px 16px 0'}}>
          {/* master toggle */}
          <div className="card card-pad" style={{display:'flex', alignItems:'center', gap:14, marginBottom:16}}>
            <div style={{flex:1}}>
              <div className="ar lead" style={{fontSize:15.5}}>استقبال الطلبات</div>
              <div className="ar t-mut t-xs" style={{fontWeight:600, marginTop:2}}>{activeCars} من {fleet.length} مركبات متاحة الآن</div>
            </div>
            <Switch on={online} onChange={setOnline}/>
          </div>

          <div className="ar t-mut t-sm" style={{fontWeight:600, marginBottom:12, opacity:online?1:.5}}>فعّل أو أوقف كل مركبة على حدة</div>

          <div style={{opacity:online?1:.45, pointerEvents:online?'auto':'none', transition:'.2s'}}>
            {fleet.map(f=>(
              <div className="card" key={f.id} style={{padding:14, marginBottom:10, display:'flex', alignItems:'center', gap:13}}>
                <span style={{width:44, height:44, borderRadius:13, flex:'0 0 auto', display:'flex', alignItems:'center', justifyContent:'center',
                  background:f.on?'var(--green-tint)':'var(--surface-2)', color:f.on?'var(--green)':'var(--faint)'}}>
                  <Icon name="truck" size={21}/>
                </span>
                <div style={{flex:1, minWidth:0}}>
                  <div style={{display:'flex', alignItems:'center', gap:8}}>
                    <span className="num lead" style={{fontSize:14.5}}>{f.plate}</span>
                    <span className="badge info" style={{padding:'3px 9px', fontSize:11}}>{f.type}</span>
                  </div>
                  <div className="ar t-mut t-xs" style={{fontWeight:600, marginTop:3}}>السائق: {f.driver}</div>
                </div>
                <Switch on={f.on} onChange={()=>toggleCar(f.id)}/>
              </div>
            ))}
          </div>

          <SecureNote text="حالة الأسطول تُحدّث للعملاء مباشرة." />
        </div>
      </div>
    );
  }

  /* ───────────────────────── PROFILE ───────────────────────── */
  function CoProfile(){
    const P = window.DATA.companyProfile;
    const rows = [
      { icon:'truck',    k:'نوع الخدمة', v:P.type },
      { icon:'box',      k:'الأسطول',    v:P.fleet },
      { icon:'phone',    k:'الهاتف',    v:P.phone, num:true },
      { icon:'doc',      k:'البريد',    v:P.email },
      { icon:'shield',   k:'الترخيص',   v:P.license, num:true },
      { icon:'pin',      k:'الموقع',    v:P.city },
    ];
    return (
      <div className="scroll pad-tab scr-anim">
        <Header title="حسابي"
          right={<button className="hdr-btn" aria-label="تعديل"><Icon name="edit" size={17}/></button>} />
        <div style={{padding:'2px 16px 0'}}>
          {/* head */}
          <div className="card card-pad" style={{display:'flex', alignItems:'center', gap:14, marginBottom:14}}>
            <span style={{width:66, height:66, borderRadius:20, flex:'0 0 auto', display:'flex', alignItems:'center', justifyContent:'center', background:'var(--green)', color:'#fff'}}>
              <Icon name="truck" size={30}/>
            </span>
            <div style={{flex:1}}>
              <div className="ar lead" style={{fontSize:17}}>{P.name}</div>
              <div className="ar t-mut t-sm" style={{fontWeight:600, marginTop:2}}>{P.type}</div>
              <div style={{marginTop:8}}><Stars value={P.rating}/> <span className="ar t-mut t-xs" style={{fontWeight:600}}>({P.reviews} تقييم)</span></div>
            </div>
          </div>

          {/* info */}
          <div className="card" style={{overflow:'hidden', marginBottom:14}}>
            {rows.map((r,i)=>(
              <div key={i} style={{display:'flex', alignItems:'center', gap:12, padding:'14px 16px', borderTop:i?'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 t-mut t-sm" style={{fontWeight:700, flex:1}}>{r.k}</span>
                <span className={(r.num?'num':'ar lead')} style={{fontSize:13.5, color:'var(--ink)', fontWeight:700}}>{r.v}</span>
              </div>
            ))}
          </div>

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

  /* ───────────────────────── TAB BAR + APP ───────────────────────── */
  const CO_TABS = [
    { id:'home',    label:'الرئيسية', icon:'home' },
    { id:'trips',   label:'الرحلات',  icon:'list' },
    { id:'fleet',   label:'الأسطول',  icon:'truck' },
    { id:'profile', label:'حسابي',    icon:'user' },
  ];
  function CoTabBar({ active, onTab, pending }){
    return (
      <div className="tabbar">
        <div className="tabbar-inner">
          {CO_TABS.map(t=>(
            <button key={t.id} className={'tab '+(active===t.id?'on':'')} onClick={()=>onTab(t.id)}>
              <span className="ic">
                <Icon name={t.icon} size={23} sw={active===t.id?2.1:1.8}/>
                {t.id==='trips' && pending>0 && <span className="tab-badge num">{pending}</span>}
              </span>
              <span>{t.label}</span>
            </button>
          ))}
        </div>
      </div>
    );
  }

  function CompanyApp(){
    const D = window.DATA;
    const [tab,setTab] = useState('home');
    const [online,setOnline] = useState(true);
    const [trips,setTrips] = useState(()=> D.companyTrips.map(t=>({...t})));
    const [fleet,setFleet] = useState(()=> D.companyFleet.map(f=>({...f})));

    const setStatus = (id,status)=> setTrips(ts=> ts.map(t=> t.id===id?{...t,status}:t));
    const onAccept = (id)=> setStatus(id,'accepted');
    const onDecline = (id)=> setStatus(id,'cancelled');
    const onStart = (id)=> setStatus(id,'ongoing');
    const toggleCar = (id)=> setFleet(fs=> fs.map(f=> f.id===id?{...f,on:!f.on}:f));

    const today = trips.filter(t=> t.date==='اليوم' && t.status!=='cancelled');
    const pending = trips.filter(t=>t.status==='pending').length;

    const screens = {
      home:    <CoHome online={online} setOnline={setOnline} trips={trips} today={today} fleet={fleet}/>,
      trips:   <CoTrips trips={trips} onAccept={onAccept} onDecline={onDecline} onStart={onStart}/>,
      fleet:   <CoFleet online={online} setOnline={setOnline} fleet={fleet} toggleCar={toggleCar}/>,
      profile: <CoProfile/>,
    };

    return (
      <div className="app">
        {React.cloneElement(screens[tab], { key: tab })}
        <CoTabBar active={tab} onTab={setTab} pending={pending}/>
      </div>
    );
  }

  window.CompanyApp = CompanyApp;
})();