function OrderCard({ order, dark, onAccept }) {
  const th = useTheme(dark);
  const [expanded, setExpanded] = useState(false);
  const alert = order.urgent || order.surcharge;

  return (
    <div style={{
      background:th.surface, border:`1px solid ${alert?'#D62B3A':th.border}`,
      borderRadius:13, padding:'11px 14px', marginBottom:10,
    }}>
      <div onClick={() => setExpanded(!expanded)} style={{ cursor:'pointer' }}>
        <div style={{ display:'flex', alignItems:'center', gap:6, flexWrap:'wrap' }}>
          <TypeChip type={order.type} />
          {order.urgent && (
            <span style={{ display:'inline-flex', alignItems:'center', gap:4, background:'#D62B3A', color:'#FFF', fontSize:FS(11), fontWeight:700, height:22, padding:'0 9px', borderRadius:6 }}>
              <span className="pulse-dot" style={{ width:6, height:6, borderRadius:'50%', background:'#FFF', display:'inline-block' }} />
              急單
            </span>
          )}
          {order.surcharge && <span style={{ background:'#D62B3A', color:'#FFF', fontSize:FS(11), fontWeight:700, height:22, padding:'0 9px', borderRadius:6 }}>＋加價</span>}
          {order.kenyi && <span style={{ border:`1px solid #888`, color:th.textSub, fontSize:FS(11), fontWeight:600, height:22, padding:'0 9px', borderRadius:6 }}>肯驛</span>}
          {order.returnBack && <span style={{ background:'#DC2626', color:'#FFF', fontSize:FS(11), fontWeight:700, height:22, padding:'0 9px', borderRadius:6 }}>回金{order.returnBack}</span>}
          <span style={{ marginLeft:'auto', fontFamily:FONTS.mono, fontSize:FS(12), color:th.textMuted }}>#{order.no}</span>
        </div>

        <div style={{ display:'flex', alignItems:'center', gap:8, marginTop:10 }}>
          <span style={{ width:10, height:10, borderRadius:'50%', background:'#0A0A0A', flexShrink:0 }} />
          <span style={{ fontSize:FS(19), fontWeight:600, color:th.text, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap', flex:1 }}>{order.routeFrom}</span>
        </div>
        <div style={{ display:'flex', alignItems:'center', gap:8, marginTop:2 }}>
          <span style={{ width:10, height:10, borderRadius:'50%', border:`2px solid ${th.textMuted}`, flexShrink:0, boxSizing:'border-box' }} />
          <span style={{ fontSize:FS(19), fontWeight:600, color:th.text, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap', flex:1 }}>{order.routeTo}</span>
          <Icon.ChevronD size={16} color={th.textMuted} style={{ transform: expanded?'rotate(180deg)':'none', transition:'transform .2s' }} />
        </div>

        <div style={{ display:'flex', alignItems:'center', marginTop:10 }}>
          <span style={{ fontFamily:FONTS.mono, fontSize:FS(12), color:th.textSub }}>{order.date} · {order.time}</span>
          <span style={{ marginLeft:'auto', fontFamily:FONTS.mono, fontSize:FS(24), fontWeight:600, color:th.text }}>
            <span style={{ fontSize:FS(13), fontWeight:600 }}>NT$</span>{order.price.toLocaleString()}
          </span>
        </div>
        {order.bonus > 0 && (
          <span style={{ position:'relative', float:'right', top:-4, background:'#D62B3A', color:'#FFF', fontSize:FS(12), fontWeight:700, height:20, padding:'0 8px', borderRadius:6, marginTop:-6 }}>
            ＋{order.bonus}
          </span>
        )}
      </div>

      {expanded && (
        <div style={{ marginTop:10, borderTop:`1px dashed ${th.border}`, paddingTop:10 }}>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:'8px 10px' }}>
            {[
              ['乘客·行李', `${order.pax} 人 / ${order.bags} 件`],
              ['車型', order.carType||'5人座'],
              ['航班', order.flight||'—'],
              ['派單方', order.dispatcher],
            ].map(([k,v]) => (
              <div key={k}>
                <div style={{ fontFamily:FONTS.mono, fontSize:FS(9.5), letterSpacing:1, textTransform:'uppercase', color:th.textMuted }}>{k}</div>
                <div style={{ fontSize:FS(13), fontWeight:500, color:th.text, marginTop:1 }}>{v}</div>
              </div>
            ))}
            {order.returnBack!=null && (
              <div>
                <div style={{ fontFamily:FONTS.mono, fontSize:FS(9.5), letterSpacing:1, textTransform:'uppercase', color:th.textMuted }}>回金</div>
                <div style={{ fontSize:FS(13), fontWeight:500, color:'#DC2626', marginTop:1 }}>{order.returnBack?`NT$${order.returnBack}`:'—'}</div>
              </div>
            )}
            {order.realGet!=null && (
              <div>
                <div style={{ fontFamily:FONTS.mono, fontSize:FS(9.5), letterSpacing:1, textTransform:'uppercase', color:th.textMuted }}>接單實拿</div>
                <div style={{ fontSize:FS(13), fontWeight:500, color:'#1A5CB8', marginTop:1 }}>NT${order.realGet}</div>
              </div>
            )}
            <div style={{ gridColumn:'span 2' }}>
              <div style={{ fontFamily:FONTS.mono, fontSize:FS(9.5), letterSpacing:1, textTransform:'uppercase', color:th.textMuted }}>備註</div>
              <div style={{ fontSize:FS(13), fontWeight:500, color:th.text, marginTop:1 }}>{order.note||'—'}</div>
            </div>
            <div style={{ gridColumn:'span 2' }}>
              <div style={{ fontFamily:FONTS.mono, fontSize:FS(9.5), letterSpacing:1, textTransform:'uppercase', color:th.textMuted }}>原始單訊</div>
              <div style={{ fontSize:FS(13), fontWeight:500, color:th.textSub, marginTop:1 }}>{order.sourceText}</div>
            </div>
          </div>

          <SlideToConfirm onDone={() => onAccept(order)} dark={dark} />
        </div>
      )}

      {!expanded && (
        <button onClick={() => setExpanded(true)} className="press" style={{
          marginTop:10, width:'100%', padding:'9px', borderRadius:8, border:`1px dashed ${th.border}`,
          background:'transparent', color:th.textSub, fontSize:FS(12), cursor:'pointer', fontFamily:'Noto Sans TC',
        }}>展開詳細與滑動接單</button>
      )}
    </div>
  );
}

function SlideToConfirm({ onDone, dark }) {
  const th = useTheme(dark);
  const [pos, setPos] = useState(0);
  const [done, setDone] = useState(false);
  const trackRef = React.useRef(null);

  function onMove(e) {
    if (done) return;
    const track = trackRef.current;
    const max = track.clientWidth - 44;
    let x;
    if (e.type === 'touchmove') x = e.touches[0].clientX - track.getBoundingClientRect().left - 22;
    else x = e.clientX - track.getBoundingClientRect().left - 22;
    setPos(Math.max(0, Math.min(max, x)));
  }
  function onEnd() {
    const track = trackRef.current;
    const max = track.clientWidth - 44;
    if (pos >= max - 8) { setPos(max); setDone(true); onDone(); }
    else setPos(0);
  }

  return (
    <div
      ref={trackRef}
      onMouseMove={onMove}
      onMouseUp={onEnd}
      onMouseLeave={onEnd}
      onTouchMove={onMove}
      onTouchEnd={onEnd}
      style={{
        height:44, borderRadius:999, background:th.surfaceAlt, marginTop:12, position:'relative',
        display:'flex', alignItems:'center', justifyContent:'center', touchAction:'none', overflow:'hidden',
      }}>
      {!done && <span style={{ fontSize:FS(12), color:th.textSub, userSelect:'none' }}>滑動接單</span>}
      {done && <Icon.Check size={20} color={th.success} />}
      <span style={{
        position:'absolute', left:5, top:5, width:34, height:34, borderRadius:'50%', background:th.text, color:th.surface,
        display:'flex', alignItems:'center', justifyContent:'center', transform:`translateX(${pos}px)`, transition:pos===0?'transform .2s':'none',
        cursor:'grab',
      }}>
        {done ? <Icon.Check size={16} color={th.surface}/> : <span style={{ fontSize:FS(16) }}>→</span>}
      </span>
    </div>
  );
}

function TabHall({ dark, unread, onOpenMessages }) {
  const th = useTheme(dark);
  const [filter, setFilter] = useState('all');
  const [acceptOrder, setAcceptOrder] = useState(null);
  const [accepting, setAccepting] = useState(false);
  const [accepted, setAccepted] = useState(null);
  const [toast, setToast] = useState(null);

  const counts = { all: DATA.hallOrders.length };
  for (const o of DATA.hallOrders) counts[o.type] = (counts[o.type]||0)+1;

  const filters = [
    { key:'all', label:'全部', count:counts.all },
    { key:'pickup', label:'接機', count:counts.pickup||0 },
    { key:'dropoff', label:'送機', count:counts.dropoff||0 },
    { key:'charter', label:'包車', count:counts.charter||0 },
    { key:'boat', label:'接送船', count:counts.boat||0 },
  ];

  const list = DATA.hallOrders.filter(o => filter==='all' || o.type===filter);
  const feePct = 3;

  function confirmAccept() {
    setAccepting(true);
    setTimeout(() => {
      setAccepting(false);
      setAccepted(acceptOrder);
      setAcceptOrder(null);
    }, 800);
  }

  return (
    <div style={{ height:'100%', display:'flex', flexDirection:'column', background:th.bg }}>
      <div style={{ position:'relative' }}>
        <ScreenHeader
          title="接單大廳"
          sub={`${DATA.hallOrders.length} 張符合您車型的訂單`}
          right={
            <button onClick={onOpenMessages} className="press" style={{
              width:38, height:38, borderRadius:'50%', border:`1px solid ${th.border}`, background:th.surface,
              color:th.text, display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer', position:'relative',
            }}>
              <Icon.Bell size={20} color={th.text} />
              {unread>0 && <span style={{ position:'absolute', top:-2, right:-4, background:th.danger, color:'#FFF', fontSize:FS(10), fontWeight:700, borderRadius:9, padding:'1px 5px', fontFamily:FONTS.mono }}>{unread}</span>}
            </button>
          }
        />
      </div>

      <div style={{ padding:'0 16px' }}>
        <FilterChips options={filters} value={filter} onChange={setFilter} dark={dark} />
      </div>

      <div style={{ flex:1, overflowY:'auto', padding:'12px 16px 20px' }} className="scroll-hide">
        {list.length === 0 ? (
          <div style={{ textAlign:'center', paddingTop:60, color:th.textMuted }}>
            <div style={{ fontSize:FS(40) }}>—</div>
            <div style={{ fontSize:FS(14), marginTop:8 }}>目前沒有待接單</div>
          </div>
        ) : list.map(o => (
          <OrderCard key={o.no} order={o} dark={dark} onAccept={setAcceptOrder} />
        ))}
      </div>

      {acceptOrder && (
        <Modal dark={dark} onClose={() => !accepting && setAcceptOrder(null)}>
          <div style={{ padding:20, textAlign:'center' }}>
            <div style={{ width:52, height:52, borderRadius:'50%', background:'#FBEFD9', display:'flex', alignItems:'center', justifyContent:'center', margin:'0 auto 14px', fontSize:FS(26) }}>⚠️</div>
            <div style={{ fontSize:FS(20), fontWeight:900, color:th.text }}>確認接單</div>
            <div style={{ fontSize:FS(13), color:th.textSub, lineHeight:1.7, marginTop:10, textAlign:'left' }}>
              按下確定後，系統將先<b style={{ color:th.text }}>暫扣</b>此行程的接單費用（<b style={{ color:th.danger, fontFamily:FONTS.mono }}>{(acceptOrder.price*feePct/100).toLocaleString()} 點</b>，高級費率 {feePct}%）。
              <br/>若派單方未核准或逾時未審，暫扣費用將<b style={{ color:th.text }}>全額退回</b>。
            </div>
            {acceptOrder.kenyi && (
              <div style={{ marginTop:12, background:'#EDE3F8', color:'#6D3DB8', borderRadius:10, padding:10, fontSize:FS(12), lineHeight:1.6, textAlign:'left' }}>
                此為<b>肯驛訂單</b>，接單前請確認您具備肯驛系統與相關資格。
              </div>
            )}
            <div style={{ display:'flex', gap:10, marginTop:18 }}>
              <CTAButton variant="secondary" onClick={() => setAcceptOrder(null)} disabled={accepting} dark={dark} style={{ flex:1 }}>取消接單</CTAButton>
              <CTAButton onClick={confirmAccept} disabled={accepting} dark={dark} style={{ flex:1 }}>{accepting?'處理中...':'確定接單'}</CTAButton>
            </div>
          </div>
        </Modal>
      )}

      {accepted && (
        <Modal dark={dark} onClose={() => setAccepted(null)}>
          <div style={{ padding:20, textAlign:'center' }}>
            <div style={{ width:52, height:52, borderRadius:'50%', background:th.successBg, display:'flex', alignItems:'center', justifyContent:'center', margin:'0 auto 14px' }}>
              <Icon.Check size={26} color={th.success} />
            </div>
            <div style={{ fontSize:FS(20), fontWeight:900, color:th.text }}>已送出申請</div>
            <div style={{ fontSize:FS(13), color:th.textSub, lineHeight:1.7, marginTop:10 }}>
              等待派單方審核。接單費用已暫扣，可在「我的行程」查看進度或撤回申請。
              <br/><span style={{ fontFamily:FONTS.mono, color:th.textMuted }}>#{accepted.no}</span>
            </div>
            <CTAButton variant="primary" onClick={() => setAccepted(null)} dark={dark} style={{ marginTop:18 }}>知道了</CTAButton>
          </div>
        </Modal>
      )}

      {toast && <Toast msg={toast} dark={dark} />}
    </div>
  );
}