const STATUS_STYLE = {
  ASSIGNED:    { label:'已接單', fg:'#1F3FA8', bg:'#E2E7F5' },
  IN_PROGRESS: { label:'進行中', fg:'#B45309', bg:'#FBEFD9' },
  COMPLETED:   { label:'我已完成的單', fg:'#0F7A3A', bg:'#E6F2EB' },
  PENDING:     { label:'待審核', fg:'#B45309', bg:'#FBEFD9' },
  PUBLISHED:   { label:'已上架', fg:'#0F7A3A', bg:'#E6F2EB' },
  QR:          { label:'QR 收單', fg:'#1F3FA8', bg:'#E2E7F5' },
};

function ScheduleCard({ order, dark, onClick }) {
  const th = useTheme(dark);
  const st = STATUS_STYLE[order.status] || STATUS_STYLE.ASSIGNED;
  return (
    <div onClick={onClick} className="press" style={{
      background:th.surface, border:`1px solid ${th.border}`, borderRadius:14, padding:'13px 15px', marginBottom:10, cursor:'pointer',
    }}>
      <div style={{ display:'flex', alignItems:'center', gap:6 }}>
        <TypeChip type={order.type} />
        {order.status==='COMPLETED' && order.paidCashBack && <Pill fg='#DC2626' bg='#FBE5E8'>收現回金</Pill>}
        {order.status==='COMPLETED' && !order.paidCashBack && <Pill fg='#DC2626' bg='#FBE5E8'>客下轉帳</Pill>}
        {order.self && <Pill fg='#0F7A3A' bg='#E6F2EB' outline>司機自派</Pill>}
        <span style={{ width:6, height:6, borderRadius:'50%', background:th.danger, display:'inline-block' }} />
        <StatusPill {...st} style={{ marginLeft:'auto' }} />
      </div>
      <div style={{ fontSize:FS(12), color:th.textSub, marginTop:7 }}>{order.date} · {order.time}</div>
      <div style={{ fontSize:FS(16), fontWeight:700, color:th.text, marginTop:3, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>
        {order.from} → {order.to}
      </div>
      <div style={{ display:'flex', alignItems:'baseline', marginTop:6 }}>
        <span style={{ fontFamily:FONTS.mono, fontWeight:900, fontSize:FS(20), color:th.text, marginLeft:'auto' }}>
          <span style={{ fontSize:FS(11), fontWeight:600 }}>NT$</span>{order.price.toLocaleString()}
        </span>
        <span style={{ fontFamily:FONTS.mono, fontSize:FS(11), color:th.textMuted, marginLeft:6 }}>#{order.no}</span>
      </div>
    </div>
  );
}

function StepDot({ label, state, time, dark }) {
  const th = useTheme(dark);
  const done = state==='done';
  const current = state==='current';
  return (
    <div style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:4, flex:1 }}>
      <div style={{
        width:34, height:34, borderRadius:'50%', display:'flex', alignItems:'center', justifyContent:'center',
        background: done ? th.text : (current ? th.surfaceAlt : 'transparent'),
        border: done ? 'none' : (current ? `2px solid ${th.text}` : `1px solid ${th.border}`),
        color: done ? th.surface : th.textMuted, fontWeight:700, fontSize:FS(14), boxSizing:'border-box',
      }}>
        {done ? <Icon.Check size={16} color={th.surface}/> : <span>{['開始','抵達','客上','客下'][['begin','arrive','board','drop'][['start','arrived','boarded','done'].indexOf(state)]]}</span>}
      </div>
      <div style={{ fontSize:FS(11), fontWeight:700, color: done||current ? th.text : th.textMuted }}>{label}</div>
      {time && <div style={{ fontFamily:FONTS.mono, fontSize:FS(9.5), color:th.textMuted }}>{time}</div>}
    </div>
  );
}

function AssignedDetail({ order, dark, onBack }) {
  const th = useTheme(dark);
  const [step, setStep] = useState(order.status==='IN_PROGRESS'?1:0);
  const [expandTrip, setExpandTrip] = useState(false);
  const [expandMsg, setExpandMsg] = useState(false);
  const [smartOpen, setSmartOpen] = useState(false);
  const [unlock] = useState(true);

  const steps = [
    { key:'begin', label:'開始', time:'08:50' },
    { key:'arrive', label:'抵達', time: step>1?'09:00':null },
    { key:'board', label:'客上', time: step>2?'09:03':null },
    { key:'drop', label:'客下', time: step>3?'09:52':null },
  ];

  const stepLabels = ['開始','我已出發','已抵達上車點','乘客已上車'];
  const stepSubs = ['出發前往上車地點','抵達後點擊確認','乘客上車後確認','抵達目的地後完成'];

  function nextStep() {
    if (step < 4) setStep(step+1);
  }

  if (smartOpen) return <SmartFlow dark={dark} onBack={() => setSmartOpen(false)} />;

  return (
    <div className="fullscreen-overlay" style={{ background:th.bg, '--bg':th.bg }}>
      <ScreenHeader
        title={TYPE_META[order.type].label}
        sub={`#${order.no} · ${order.time} · ${order.date}`}
        onBack={onBack}
        right={<StatusPill {...STATUS_STYLE[step>=4?'COMPLETED':step===0?'ASSIGNED':'IN_PROGRESS']} />}
        dark={dark}
      />

      <div style={{ flex:1, overflowY:'auto', padding:'0 16px 110px' }} className="scroll-hide">
        <SectionLabel dark={dark}>執行進度</SectionLabel>
        <Card dark={dark}>
          <div style={{ display:'flex', alignItems:'flex-start' }}>
            {steps.map((s,i)=>(
              <React.Fragment key={s.key}>
                <StepDot
                  label={['開始','抵達','客上','客下'][i]}
                  state={ step>i ? 'done' : (step===i ? 'current':'todo') }
                  time={step>i ? s.time : null}
                  dark={dark}
                />
                {i<3 && <span style={{ flex:1, height:2, marginTop:16, background: step>i ? th.text : th.border, borderRadius:2 }} />}
              </React.Fragment>
            ))}
          </div>
          <div style={{ fontFamily:FONTS.mono, fontSize:FS(11), color:th.textMuted, textAlign:'center', marginTop:10 }}>
            現在位置 · {order.district}
          </div>
        </Card>

        <SectionLabel dark={dark}>行程路線</SectionLabel>
        <Card dark={dark} style={{ padding:'6px 16px' }}>
          <RouteRow label="上車地點" addr={order.from} color="#1F3FA8" dark={dark} />
          <RouteRow label="下車地點" addr={order.to} color="#B45309" dark={dark} last />
        </Card>

        <SectionLabel dark={dark}>行程詳情</SectionLabel>
        <Card dark={dark}>
          <div style={{ display:'flex', alignItems:'center', gap:12, cursor:'pointer' }} onClick={() => setExpandTrip(!expandTrip)}>
            <Avatar name={order.passenger.name} size={40} bg={th.text} />
            <div style={{ flex:1 }}>
              <div style={{ fontSize:FS(16), fontWeight:700, color:th.text }}>{order.passenger.name}</div>
              <div style={{ fontSize:FS(12), color:th.textSub }}>{order.pax} 人 · {order.bags} 件</div>
            </div>
            <button className="press" style={{ width:40, height:40, borderRadius:'50%', background:th.success, color:'#FFF', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer', border:'none' }}>
              <Icon.Phone size={18} />
            </button>
          </div>
          {expandTrip && (
            <div className="pop-in" style={{ marginTop:14, borderTop:`1px dashed ${th.border}`, paddingTop:12 }}>
              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:8 }}>
                <MiniStat label="航班" value={order.flight||'—'} dark={dark} />
                <MiniStat label="人數" value={`${order.pax} 人`} dark={dark} />
                <MiniStat label="行李" value={`${order.bags} 件`} dark={dark} />
              </div>
              <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginTop:12 }}>
                <span style={{ fontSize:FS(12), color:th.textSub }}>司機實拿</span>
                <Amount value={order.realGet ?? order.price} size={30} dark={dark} />
              </div>
              <div style={{ marginTop:10 }}>
                <Pill fg='#B45309' bg='#FBEFD9'>車型 {order.carType}</Pill>
              </div>
              {order.note && (
                <div style={{ marginTop:10, background:'#FBEFD9', color:'#9A6700', borderRadius:8, padding:10, fontSize:FS(12), lineHeight:1.6 }}>
                  <b>備註</b> · {order.note}
                </div>
              )}
            </div>
          )}
        </Card>

        <SectionLabel dark={dark}>訊息</SectionLabel>
        <Card dark={dark} onClick={() => setExpandMsg(!expandMsg)} style={{ cursor:'pointer' }}>
          <div style={{ display:'flex', alignItems:'center', gap:10 }}>
            <Avatar name="宏發車行" size={32} bg={th.surfaceAlt} fg={th.text} />
            <div style={{ flex:1 }}>
              <div style={{ fontSize:FS(13), fontWeight:700, color:th.text }}>派單方</div>
              <div style={{ fontSize:FS(12), color:th.textSub }}>宏發車行</div>
            </div>
            {order.status!=='COMPLETED' && <span style={{ width:6, height:6, borderRadius:'50%', background:th.danger }} />}
            <Icon.ChevronD size={16} color={th.textMuted} />
          </div>
        </Card>

        {order.type!=='charter' && (
          <>
            <SectionLabel dark={dark}>智慧排單</SectionLabel>
            <Card dark={dark}>
              {!unlock ? (
                <div style={{ display:'flex', alignItems:'center', gap:10, color:th.textMuted }}>
                  <span style={{ fontSize:FS(18) }}>🔒</span><span style={{ fontSize:FS(13) }}>升級會員解鎖</span>
                </div>
              ) : (
                <button onClick={() => setSmartOpen(true)} className="press" style={{
                  width:'100%', padding:'13px', borderRadius:10, background:th.surfaceAlt, border:'none',
                  color:th.text, fontSize:FS(14), fontWeight:700, cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', gap:6, fontFamily:'Noto Sans TC',
                }}>✨ 智慧排單 <Icon.ChevronR size={14} color={th.text}/></button>
              )}
            </Card>
          </>
        )}

        <SectionLabel dark={dark}>其他操作</SectionLabel>
        <Card dark={dark} style={{ display:'flex', gap:8 }}>
          <button className="press" style={{ flex:1, padding:'12px', borderRadius:10, background:th.surfaceAlt, color:th.text, border:'none', fontSize:FS(13), fontWeight:600, cursor:'pointer', fontFamily:'Noto Sans TC' }}>查看車輛出租單</button>
          <button className="press" style={{ flex:1, padding:'12px', borderRadius:10, background:'transparent', color:th.danger, border:`1px solid ${th.danger}`, fontSize:FS(13), fontWeight:600, cursor:'pointer', fontFamily:'Noto Sans TC' }}>轉單給小隊</button>
          <button className="press" style={{ flex:1, padding:'12px', borderRadius:10, background:'transparent', color:th.danger, border:`1px solid ${th.danger}`, fontSize:FS(13), fontWeight:600, cursor:'pointer', fontFamily:'Noto Sans TC' }}>申請退單</button>
        </Card>
      </div>

      <div style={{ position:'absolute', left:0, right:0, bottom:0, padding:'12px 16px calc(env(safe-area-inset-bottom,0px) + 12px)', background:th.bg, borderTop:`1px solid ${th.border}`, display:'flex', gap:8 }}>
        <button onClick={onBack} className="press" style={{
          padding:'16px 18px', borderRadius:12, background:th.surface, color:th.text, border:`1px solid ${th.border}`, fontSize:FS(16), fontWeight:700, cursor:'pointer', fontFamily:'Noto Sans TC',
        }}>回上一頁</button>
        <button onClick={nextStep} className="press" disabled={step>=4} style={{
          flex:1, padding:'16px', borderRadius:12, background: step>=4 ? th.success : th.text, color: step>=4 ? '#FFF' : th.surface,
          border:'none', fontSize:FS(17), fontWeight:900, cursor:'pointer', display:'flex', flexDirection:'column', alignItems:'center', gap:2, opacity: step>=4?1:.96, fontFamily:'Noto Sans TC',
        }}>
          {step>=4 ? '行程已完成 / 感謝您的服務' : stepLabels[step]}
          {step<4 && <span style={{ fontSize:FS(11), fontWeight:500, opacity:.7 }}>{stepSubs[step]}</span>}
        </button>
      </div>
    </div>
  );
}

function RouteRow({ label, addr, color, dark, last }) {
  const th = useTheme(dark);
  return (
    <div style={{ display:'flex', alignItems:'center', gap:10, padding:'10px 0', borderBottom:last?'none':`1px solid ${th.border}` }}>
      <span style={{ width:10, height:10, borderRadius:'50%', background:color, flexShrink:0 }} />
      <div style={{ flex:1 }}>
        <div style={{ fontSize:FS(11), color:th.textMuted }}>{label}</div>
        <div style={{ fontSize:FS(17), fontWeight:700, color:th.text }}>{addr}</div>
      </div>
      <button className="press" style={{ padding:'8px 14px', borderRadius:8, background:th.surfaceAlt, color:th.text, border:'none', fontSize:FS(12), fontWeight:600, cursor:'pointer', fontFamily:'Noto Sans TC' }}>
        <Icon.Pin size={12} color={th.text} /> 導航
      </button>
    </div>
  );
}

function MiniStat({ label, value, dark }) {
  const th = useTheme(dark);
  return (
    <div style={{ background:th.surfaceAlt, borderRadius:10, padding:'10px', textAlign:'center' }}>
      <div style={{ fontSize:FS(10), color:th.textMuted }}>{label}</div>
      <div style={{ fontSize:FS(14), fontWeight:700, color:th.text, marginTop:2, fontFamily:FONTS.mono }}>{value}</div>
    </div>
  );
}

function SmartFlow({ dark, onBack }) {
  const th = useTheme(dark);
  return (
    <div className="fullscreen-overlay" style={{ background:th.bg, '--bg':th.bg }}>
      <ScreenHeader title="智慧排單" sub="錨點單 09:05 桃園機場 T1 → 台北車站 · 候選池 4 張" onBack={onBack} dark={dark} />
      <div style={{ flex:1, overflowY:'auto', padding:'0 16px 100px' }} className="scroll-hide">
        <div style={{ display:'flex', gap:8 }}>
          {[['後','往前接續',2],['往','往後接續',1]].map(([d,label,n]) => (
            <button key={d} className="press" style={{
              flex:1, padding:'12px', borderRadius:999, border:d==='往'?`1.5px solid ${th.text}`:`1px solid ${th.border}`,
              background:d==='往'?'transparent':th.surfaceAlt, color:th.text, fontSize:FS(13), fontWeight:600, cursor:'pointer', fontFamily:'Noto Sans TC',
              display:'flex', alignItems:'center', justifyContent:'center', gap:4,
            }}>
              {d==='後'&&<span>←</span>}{label}{d==='往'&&<span>→</span>}
              <span style={{ fontFamily:FONTS.mono, fontSize:FS(11), opacity:.6 }}>{n}</span>
            </button>
          ))}
        </div>
        <div style={{ fontSize:FS(13), fontWeight:700, color:th.text, margin:'16px 2px 8px' }}>錨點單之後可接續 1 張 · 滑動切換</div>
        <div style={{ display:'flex', gap:10, overflowX:'auto' }} className="scroll-hide">
          {[['送機 08/10 14:30','松山機場','幾乎無縫','45 分','NT$1,200'],['接機 08/10 21:40','台中逢甲','空檔較長','210 分','NT$3,200']].map(([label,dest,tight,mins,amt])=>(
            <div key={label} className="press" style={{ minWidth:132, background:th.surface, border:`1px solid ${th.border}`, borderRadius:14, padding:12, flexShrink:0 }}>
              <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between' }}>
                <Pill fg={TYPE_META[label.startsWith('送')?'dropoff':'pickup'].color} bg={th.surfaceAlt} style={{ background:th.surfaceAlt, color:TYPE_META[label.startsWith('送')?'dropoff':'pickup'].color, border:`1px solid ${TYPE_META[label.startsWith('送')?'dropoff':'pickup'].color}` }}>{label.split(' ')[0]}</Pill>
                <span style={{ fontFamily:FONTS.mono, fontSize:FS(10), color:th.textMuted }}>{amt}</span>
              </div>
              <div style={{ fontSize:FS(14), fontWeight:600, color:th.text, marginTop:8 }}>{dest}</div>
              <div style={{ marginTop:6, display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                <Pill fg={th.warn} bg={th.warnBg}>{tight}</Pill>
                <span style={{ fontFamily:FONTS.mono, fontSize:FS(11), color:th.textMuted }}>{mins}</span>
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop:16, background:th.surface, border:`1px solid ${th.border}`, borderRadius:14, padding:16 }}>
          <div style={{ fontFamily:FONTS.mono, fontSize:FS(14), fontWeight:700, color:th.text }}>09:05</div>
          <div style={{ marginTop:8, display:'flex', gap:12 }}>
            <span style={{ width:14, height:14, borderRadius:'50%', border:`2px solid ${th.info}`, boxSizing:'border-box', flexShrink:0 }} />
            <div>
              <div style={{ fontSize:FS(15), fontWeight:700, color:th.text }}>飛機落地 · 桃園機場 T1</div>
              <div style={{ fontSize:FS(12), color:th.textSub }}>BR-217 等候客人下機出關</div>
            </div>
          </div>
          <div style={{ marginLeft:7, width:2, height:28, background:th.text, marginTop:2 }} />
          <div style={{ display:'flex', gap:12 }}>
            <span style={{ width:10, height:10, borderRadius:'50%', background:th.text, marginLeft:2, marginTop:6, flexShrink:0 }} />
            <div style={{ flex:1, background:th.surfaceAlt, borderRadius:12, padding:12 }}>
              <div style={{ display:'flex', gap:6, alignItems:'center' }}>
                <Pill fg='#2563EB' bg={th.surfaceAlt} style={{ border:`1px solid #2563EB`, color:'#2563EB' }}>接機</Pill>
                <Pill fg='#D62B3A' bg='#FBE5E8'>錨點單</Pill>
                <span style={{ marginLeft:'auto', fontFamily:FONTS.mono, fontSize:FS(18), fontWeight:700, color:th.text }}>NT$1,850</span>
              </div>
              <div style={{ fontSize:FS(15), fontWeight:600, color:th.text, marginTop:8 }}>桃園機場 T1 → 台北車站</div>
            </div>
          </div>
          <div style={{ marginLeft:7, width:2, height:28, background:th.border, borderStyle:'dashed', marginTop:2, borderLeft:'2px dashed #B45309', background:'transparent' }} />
          <div style={{ display:'flex', gap:12 }}>
            <span style={{ width:10, height:10, borderRadius:'50%', border:`2px solid ${th.warn}`, marginLeft:2, marginTop:6, boxSizing:'border-box', flexShrink:0 }} />
            <div style={{ flex:1 }}>
              <div style={{ fontSize:FS(14), fontWeight:700, color:th.text }}>空檔等候 · 可休息 / 加油 / 用餐</div>
              <Pill fg={th.warn} bg={th.warnBg} style={{ marginTop:6 }}>需等候 · 45 分</Pill>
            </div>
          </div>
          <div style={{ fontSize:FS(11), color:th.textMuted, marginTop:14, lineHeight:1.6, background:'#FBEFD9', borderRadius:8, padding:10 }}>
            ⚠ 時間軸標註之時刻與等待時間均為系統預估，實際依路況與班機調整。建議預留緩衝時間。
          </div>
        </div>
      </div>
      <div style={{ position:'absolute', left:0, right:0, bottom:0, padding:'12px 16px calc(env(safe-area-inset-bottom,0px) + 12px)', background:th.bg, borderTop:`1px solid ${th.border}`, display:'flex', gap:8, alignItems:'center' }}>
        <button onClick={onBack} className="press" style={{ padding:'16px 18px', borderRadius:12, background:th.surface, border:`1px solid ${th.border}`, color:th.text, fontSize:FS(14), fontWeight:700, cursor:'pointer', fontFamily:'Noto Sans TC' }}>回上一頁</button>
        <div style={{ flex:1, textAlign:'center' }}>
          <div style={{ fontFamily:FONTS.mono, fontSize:FS(20), fontWeight:900, color:th.text }}>NT$3,050</div>
          <div style={{ fontSize:FS(11), color:th.textMuted }}>總收入 · 時段 09:05–12:00 · 空檔 45 分</div>
        </div>
        <button className="press" style={{ padding:'16px 20px', borderRadius:12, background:th.success, color:'#FFF', border:'none', fontSize:FS(15), fontWeight:900, cursor:'pointer', fontFamily:'Noto Sans TC' }}>推薦單 接單</button>
      </div>
    </div>
  );
}

function PendingDetail({ order, dark, onBack }) {
  const th = useTheme(dark);
  return (
    <div className="fullscreen-overlay" style={{ background:th.bg, '--bg':th.bg }}>
      <ScreenHeader title={TYPE_META[order.type].label} sub={`#${order.no} · ${order.time} · ${order.date}`} onBack={onBack} right={<StatusPill {...STATUS_STYLE.PENDING} />} dark={dark} />
      <div style={{ flex:1, overflowY:'auto', padding:'0 16px 24px' }} className="scroll-hide">
        <Card dark={dark} style={{ display:'flex', alignItems:'center', justifyContent:'space-between' }}>
          <div>
            <div style={{ fontSize:FS(12), color:th.textSub }}>司機實拿</div>
            <Amount value={order.realGet ?? order.price} size={30} dark={dark} />
          </div>
          <Pill fg={th.text} bg={th.surfaceAlt} style={{ border:`1px solid ${th.border}` }}>車型 {order.carType}</Pill>
        </Card>
        <Card dark={dark} style={{ marginTop:10 }}>
          <div style={{ display:'flex', alignItems:'center', gap:10 }}>
            <Icon.Pin size={16} color={th.info} />
            <div style={{ flex:1 }}><div style={{ fontSize:FS(17), fontWeight:700, color:th.text }}>{order.from}</div><div style={{ fontSize:FS(12), color:th.textSub }}>{order.to}</div></div>
            <button className="press" style={{ padding:'8px 14px', borderRadius:8, background:th.surfaceAlt, color:th.text, border:'none', fontSize:FS(12), fontWeight:600, cursor:'pointer', fontFamily:'Noto Sans TC' }}>📍 開啟地圖導航</button>
          </div>
        </Card>
        <div style={{ marginTop:16 }}>
          <CTAButton variant="danger" dark={dark} onClick={() => onBack()} style={{ background:'transparent', border:`1px solid ${th.danger}`, color:th.danger, fontWeight:600, fontSize:FS(14) }}>撤回申請（手續費全額退回）</CTAButton>
        </div>
      </div>
    </div>
  );
}

function TabSchedule({ dark, targetOrderId }) {
  const th = useTheme(dark);
  const [filter, setFilter] = useState('assigned');
  const [detail, setDetail] = useState(null);

  const filters = [
    { key:'assigned', label:'即將開始', count: DATA.schedule.assigned.length },
    { key:'pending', label:'等待審核', count: DATA.schedule.pending.length },
    { key:'completed', label:'已完成', count: DATA.schedule.completed.length },
    { key:'published', label:'我的派單', count: DATA.schedule.published.length },
    { key:'qr', label:'QRcode收單', count: DATA.schedule.qr.length },
  ];

  let list = [];
  if (filter==='assigned') list = DATA.schedule.assigned;
  if (filter==='pending') list = DATA.schedule.pending;
  if (filter==='completed') list = DATA.schedule.completed;
  if (filter==='published') list = DATA.schedule.published;
  if (filter==='qr') list = DATA.schedule.qr;

  return (
    <div style={{ height:'100%', display:'flex', flexDirection:'column', background:th.bg }}>
      <ScreenHeader title="我的行程" sub={`${DATA.schedule.assigned.length + DATA.schedule.pending.length} 筆進行中行程`} dark={dark} />
      <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">
        {filter==='published' ? (
          list.map(o => (
            <div key={o.no} style={{ background:th.surface, border:`1px solid ${th.border}`, borderRadius:14, padding:13, marginBottom:10 }}>
            <div style={{ display:'flex', gap:6, alignItems:'center' }}>
              <TypeChip type={o.type} /><Pill fg='#DC2626' bg='#FBE5E8'>回金{o.returnBack||0}</Pill><Pill fg='#0F7A3A' bg='#E6F2EB' outline>司機自派</Pill>
              <StatusPill {...STATUS_STYLE.PUBLISHED} style={{ marginLeft:'auto' }} />
            </div>
            <div style={{ fontSize:FS(12), color:th.textSub, marginTop:7 }}>{o.date} · {o.time}</div>
            <div style={{ fontSize:FS(16), fontWeight:700, color:th.text, marginTop:3 }}>{o.from} → {o.to}</div>
            <div style={{ fontSize:FS(12), color:th.textSub, marginTop:5 }}>{o.pax} 人 · {o.bags} 件 · <span style={{ fontFamily:FONTS.mono }}>NT${o.price.toLocaleString()}</span></div>
            <div style={{ display:'flex', gap:8, marginTop:10 }}>
              {['編輯','存檔','下架'].map((t,i)=>(
                <button key={t} className="press" style={{
                  flex:1, padding:'10px', borderRadius:10, fontSize:FS(13), fontWeight:600, cursor:'pointer', fontFamily:'Noto Sans TC',
                  background:i===2?'transparent':th.surfaceAlt, color:i===2?th.danger:th.text, border:i===2?`1px solid ${th.danger}`:'none',
                }}>{t}</button>
              ))}
            </div>
            </div>
          ))
        ) : 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 => (
          <ScheduleCard key={o.no} order={o} dark={dark} onClick={() => setDetail(o)} />
        ))}
      </div>

      {detail && detail.status!=='PUBLISHED' && detail.status!=='QR' && (
        <AssignedDetail order={detail} dark={dark} onBack={() => setDetail(null)} />
      )}
      {detail && detail.status==='PENDING' && (
        <PendingDetail order={detail} dark={dark} onBack={() => setDetail(null)} />
      )}
    </div>
  );
}