台東外送

🔴 訂單進行中

{active.map(o => (

{o.id}外送中

🏪

📍

{o.storeName}

{o.address.substring(0,8)}

🚴 預計 10-15 分鐘送達・距離 {o.distance} km

))}

}

setPage("stores")}>

🍽️ 立即點餐

{STORES.map(s=>(

{s.name}

⭐ {s.rating} · {s.address.substring(0,10)}

))}

); } function StoreList({ setPage, setSelectedStore }) { return (<>

餐廳列表

選擇你想點的餐廳

{STORES.map(s => (

{setSelectedStore(s);setPage("store_detail");}}>

{s.name}

📍 {s.address}

⭐ {s.rating} 外送中{s.products.length}項商品

))} ); } function StoreDetail({ store, cart, setCart, setPage }) { const storeProducts = PRODUCTS.filter(p => store.products.includes(p.id)); const addToCart = (p) => { setCart(c => { const ex = c.find(i=>i.id===p.id&&i.storeId===store.id); if (ex) return c.map(i=>i.id===p.id&&i.storeId===store.id?{...i,qty:i.qty+1}:i); return [...c, {...p, storeId: store.id, storeName: store.name, qty:1}]; }); }; const inCart = (id) => cart.find(i=>i.id===id&&i.storeId===store.id)?.qty || 0; return (<>

{store.name}

📍 {store.address}・⭐ {store.rating}

{storeProducts.map(p => (

{p.emoji}

{p.name}

{p.desc}

NT${p.price}

{inCart(p.id) > 0 && <> {inCart(p.id)} }

))}

{cart.length > 0 && (

)} ); } function CartPage({ auth, cart, setCart, orders, setOrders, setPage }) { const [address, setAddress] = useState(auth.address || ""); const [district, setDistrict] = useState(auth.district || "台東市"); const [note, setNote] = useState(""); const isRemote = ["卑南鄉","鹿野鄉","關山鎮"].includes(district); const subtotal = cart.reduce((a,c)=>a+c.price*c.qty,0); const dist = isRemote ? 5.2 : 2.1; const fee = calcFee(dist, isRemote); const platform = Math.round(subtotal * 0.05); const total = subtotal + fee + platform; const bonus = calcBonus(dist); const placeOrder = () => { if (!address) return alert("請填寫送餐地址"); const id = "ORD-" + String(orders.length + 1).padStart(3, "0"); const storeId = cart[0]?.storeId; const storeName = cart[0]?.storeName || "餐廳"; const newOrder = { id, storeId, storeName, items: cart.map(c=>({id:c.id,name:c.name,price:c.price,qty:c.qty})), status: "pending", address, district, total, fee, distance: dist, bonus, time: new Date().toLocaleTimeString("zh-TW",{hour:"2-digit",minute:"2-digit"}) }; setOrders(o=>[...o, newOrder]); setCart([]); alert(`✅ 訂單 ${id} 已成立！\n平台維護費：NT$${platform}\n外送費：NT$${fee}`); setPage("orders"); }; if (cart.length === 0) return (<>

購物車

🛒

購物車是空的

); return (<>

確認訂單

確認商品及配送資訊

🛍️ 商品明細

{cart.map(item => (

{PRODUCTS.find(p=>p.id===item.id)?.emoji}

{item.name}

NT${item.price} × {item.qty}

{item.qty}

NT${item.price*item.qty}

))}

📍 配送資訊

送餐地址 setAddress(e.target.value)} placeholder="台東市中正路123號" />

行政區

備註

setNote(e.target.value)} placeholder="如：請不要辣、叔叔快點" rows={2}
              style={{width:"100%",background:T.surface,border:`1px solid ${T.border}`,borderRadius:10,padding:"10px 14px",color:T.text,fontFamily:"DM Sans",fontSize:14,outline:"none",resize:"none"}} /></div>
        </div>
      </div>
      <div>
        <div className="card">
          <div className="card-title">💰 費用明細</div>
          <div className="fee-row"><span>商品小計</span><span>NT${subtotal}</span></div>
          <div className="fee-row"><span>外送費 ({dist} km{isRemote?" · 偏遠地區":""})</span><span>NT${fee}</span></div>
          <div className="fee-row"><span>平台維護費 (5%)</span><span>NT${platform}</span></div>
          <div className="fee-row total"><span>合計</span><span>NT${total}</span></div>
          {isRemote && <div style={{marginTop:12,padding:"8px 12px",background:"rgba(249,115,22,.1)",borderRadius:8,fontSize:12,color:T.accent}}>
            ⚠️ 偏遠地區加收 NT$20 外送費
          </div>}
        </div>
        <div className="card">
          <div className="card-title">🗺️ 配送路線預覽</div>
          <div className="map-mock" style={{height:160}}>
            <div className="map-bg" /><div className="map-route" />
            <div className="map-pin start">🏪</div><div className="map-pin end">📍</div>
            <div className="map-label start">取餐點</div><div className="map-label end">目的地</div>
          </div>
          <div className="info-row" style={{marginTop:12}}>📏 預計距離：<span className="highlight">{dist} km</span></div>
          <div className="info-row">⏱️ 預計時間：<span className="highlight">{Math.round(dist*4+10)} 分鐘</span></div>
        </div>
        <button className="btn green" onClick={placeOrder}>✅ 確認下訂 NT${total}</button>
      </div>
    </div>
  </>);
}

function CustProfile({ auth }) {
  return (<>
    <div className="page-title">個人設定</div>
    <div className="card">
      <div className="card-title">👤 帳號資訊</div>
      <div className="info-row">姓名：<span className="highlight">{auth.name}</span></div>
      <div className="info-row">手機：<span className="highlight">{auth.phone || "0912-345-678"}</span></div>
      <div className="info-row">地址：<span className="highlight">{auth.address || "尚未設定"}</span></div>
      <div className="info-row">行政區：<span className="highlight">{auth.district || "台東市"}</span></div>
    </div>
    <div className="card">
      <div className="card-title">💳 付款方式</div>
      <div className="info-row">💵 現金付款 <span className="tag">預設</span></div>
      <div className="info-row">📱 Line Pay</div>
    </div>
  </>);
}

// ─── Courier App ──────────────────────────────────────────────────────────────
function CourierApp({ page, setPage, auth, orders, setOrders, notifications }) {
  const nav = [
    { id:"home", icon:"🏠", label:"首頁" },
    { id:"orders", icon:"📋", label:"接單列表" },
    { id:"active", icon:"🗺️", label:"進行中" },
    { id:"earnings", icon:"💰", label:"收益" },
    { id:"notif", icon:"🔔", label:`通知${notifications.length>0?` (${notifications.length})`:""}`},
  ];

return (
    <div className="main">
      <div className="sidebar">
        {nav.map(n => (
          <div key={n.id} className={`nav-item ${page===n.id?"active":""}`} onClick={()=>setPage(n.id)}>
            <span className="nav-icon">{n.icon}</span>{n.label}
          </div>
        ))}
      </div>
      <div className="content">
        {page==="home" && <CourierHome auth={auth} orders={orders} setPage={setPage} />}
        {page==="orders" && <CourierOrders orders={orders} setOrders={setOrders} />}
        {page==="active" && <ActiveDelivery orders={orders} setOrders={setOrders} />}
        {page==="earnings" && <Earnings orders={orders} />}
        {page==="notif" && <Notifications notifications={notifications} />}
      </div>
    </div>
  );
}

function CourierOrders({ orders, setOrders }) {
  const [filter, setFilter] = useState("pending");
  const filtered = orders.filter(o => filter==="all" ? true : o.status===filter);

const accept = (id) => setOrders(o=>o.map(x=>x.id===id?{...x,status:"active"}:x));
  const complete = (id) => setOrders(o=>o.map(x=>x.id===id?{...x,status:"delivered"}:x));

return (<>
    <div className="page-title">訂單列表</div>
    <div className="inner-tabs">
      {[["pending","待接單"],["active","外送中"],["delivered","已送達"],["all","全部"]].map(([k,l])=>(
        <div key={k} className={`inner-tab ${filter===k?"active":""}`} onClick={()=>setFilter(k)}>{l}</div>
      ))}
    </div>
    {filtered.length===0 ? <div className="empty"><div className="icon">📋</div><div>沒有訂單</div></div>
    : filtered.map(o=>(
      <div key={o.id} className="order-card">
        <div className="order-header">
          <span className="order-id">{o.id}</span>
          <span className={`badge ${o.status}`}>{o.status==="pending"?"待接單":o.status==="active"?"外送中":"已送達"}</span>
        </div>
        <div className="grid2" style={{marginBottom:12}}>
          <div>
            <div className="info-row">🏪 取貨：{o.storeName}</div>
            <div className="info-row">📍 送達：{o.address}</div>
            <div className="info-row">🕐 下單：{o.time}</div>
          </div>
          <div>
            <div className="info-row">📏 距離：<span className="highlight">{o.distance} km</span></div>
            <div className="info-row">💰 外送費：<span className="highlight">NT${o.fee}</span></div>
            <div className="info-row">🎯 里程獎金：<span style={{color:T.green,fontWeight:700}}>NT${o.bonus}</span></div>
          </div>
        </div>
        <div style={{background:T.surface,borderRadius:8,padding:"8px 12px",marginBottom:12}}>
          {o.items.map(i=><span key={i.id} style={{fontSize:13,marginRight:12}}>{i.name} ×{i.qty}</span>)}
        </div>
        <div style={{display:"flex",gap:8}}>
          {o.status==="pending" && <button className="btn sm green" onClick={()=>accept(o.id)}>✅ 接單</button>}
          {o.status==="active" && <button className="btn sm" style={{background:T.blue}} onClick={()=>complete(o.id)}>🏁 完成配送</button>}
          {o.status==="pending" && <button className="btn sm secondary">❌ 拒絕</button>}
        </div>
      </div>
    ))}
  </>);
}

function ActiveDelivery({ orders, setOrders }) {
  const active = orders.filter(o=>o.status==="active");
  const [current, setCurrent] = useState(active[0] || null);
  const [phase, setPhase] = useState("pickup"); // pickup | deliver

useEffect(() => { if (active.length > 0 && !current) setCurrent(active[0]); }, [active]);

if (!current) return (<>
    <div className="page-title">地圖導航</div>
    <div className="empty"><div className="icon">🗺️</div><div>目前沒有進行中的配送</div></div>
  </>);

const complete = () => {
    setOrders(o=>o.map(x=>x.id===current.id?{...x,status:"delivered"}:x));
    setCurrent(null); setPhase("pickup");
  };

return (<>
    <div className="page-title">🗺️ 實時導航</div>
    <div className="page-sub">{current.id} · {phase==="pickup"?"前往取貨":"前往送餐"}</div>
    <div className="grid2">
      <div>
        <div className="map-mock" style={{height:340,marginBottom:16}}>
          <div className="map-bg" />
          <svg style={{position:"absolute",inset:0,width:"100%",height:"100%"}} viewBox="0 0 400 300">
            <path d="M80 200 Q120 120 180 140 Q240 160 280 100 Q320 60 340 80" stroke={T.accent} strokeWidth="3" fill="none" strokeDasharray="8 4" />
            <circle cx="80" cy="200" r="10" fill={T.green} />
            <circle cx="340" cy="80" r="10" fill={T.red} />
            <circle cx={phase==="pickup"?"140":"220"} cy={phase==="pickup"?"155":"135"} r="8" fill={T.accent} />
            <text x="88" y="220" fill={T.text} fontSize="12">🏪 {current.storeName.substring(0,5)}</text>
            <text x="310" y="70" fill={T.text} fontSize="12">📍 目的地</text>
            <text x={phase==="pickup"?"148":"228"} y={phase==="pickup"?"145":"125"} fill={T.accent} fontSize="16">🛵</text>
          </svg>
          <div style={{position:"absolute",bottom:12,left:12,right:12,background:"rgba(0,0,0,.7)",borderRadius:10,padding:"8px 14px",backdropFilter:"blur(8px)"}}>
            <div style={{fontSize:12,color:T.muted,marginBottom:4}}>目的地</div>
            <div style={{fontFamily:"Syne",fontWeight:700,fontSize:14}}>{phase==="pickup"?current.storeName:current.address}</div>
          </div>
        </div>
        <div style={{display:"flex",gap:8}}>
          {phase==="pickup"
            ? <button className="btn green" onClick={()=>setPhase("deliver")}>✅ 已取貨，前往送餐</button>
            : <button className="btn" style={{background:T.blue}} onClick={complete}>🏁 完成配送</button>}
        </div>
      </div>
      <div>
        <div className="card">
          <div className="card-title">📋 訂單資訊</div>
          <div className="info-row">🆔 <span className="highlight">{current.id}</span></div>
          <div className="info-row">🏪 取貨：<span className="highlight">{current.storeName}</span></div>
          <div className="info-row">📍 送達：<span className="highlight">{current.address}</span></div>
          <hr className="divider" />
          {current.items.map(i=><div key={i.id} className="info-row">{PRODUCTS.find(p=>p.id===i.id)?.emoji} {i.name} × {i.qty}</div>)}
        </div>
        <div className="card">
          <div className="card-title">💰 本單收益</div>
          <div className="fee-row"><span>外送費</span><span>NT${current.fee}</span></div>
          <div className="fee-row"><span>里程獎金 ({current.distance} km)</span><span style={{color:T.green}}>+NT${current.bonus}</span></div>
          <div className="fee-row total"><span>合計</span><span>NT${current.fee+current.bonus}</span></div>
          <div style={{marginTop:12,padding:"8px 12px",background:"rgba(34,197,94,.1)",borderRadius:8,fontSize:12,color:T.green}}>
            🎯 超過 5km 享有里程加成獎金
          </div>
        </div>
        <div className="card">
          <div className="card-title">📏 配送資料</div>
          <div className="info-row">距離：<span className="highlight">{current.distance} km</span></div>
          <div className="info-row">預計時間：<span className="highlight">{Math.round(current.distance*4+8)} 分鐘</span></div>
          <div className="info-row">當前狀態：<span style={{color:phase==="pickup"?T.yellow:T.accent,fontWeight:700}}>{phase==="pickup"?"前往取貨 🏪":"配送中 🚴"}</span></div>
        </div>
      </div>
    </div>
  </>);
}

function Earnings({ orders }) {
  const delivered = orders.filter(o=>o.status==="delivered");
  const totalFee = delivered.reduce((a,c)=>a+c.fee,0);
  const totalBonus = delivered.reduce((a,c)=>a+c.bonus,0);
  const totalDist = delivered.reduce((a,c)=>a+c.distance,0).toFixed(1);
  const goal = 2000;

return (<>
    <div className="page-title">收益總覽</div>
    <div className="page-sub">今日收益與里程統計</div>
    <div className="grid3" style={{marginBottom:20}}>
      <div className="stat-card"><div className="stat-label">外送費收入</div><div className="stat-value accent">NT${totalFee}</div></div>
      <div className="stat-card"><div className="stat-label">里程獎金</div><div className="stat-value green">NT${totalBonus}</div></div>
      <div className="stat-card"><div className="stat-label">總里程</div><div className="stat-value blue">{totalDist} km</div></div>
    </div>
    <div className="card">
      <div className="card-title">🎯 今日目標</div>
      <div style={{display:"flex",justifyContent:"space-between",marginBottom:8,fontSize:14}}>
        <span>NT${totalFee+totalBonus} / NT${goal}</span>
        <span style={{color:T.muted}}>{Math.round((totalFee+totalBonus)/goal*100)}%</span>
      </div>
      <div className="earn-bar"><div className="earn-fill" style={{width:`${Math.min((totalFee+totalBonus)/goal*100,100)}%`}} /></div>
    </div>
    <div className="card">
      <div className="card-title">📊 里程加成規則</div>
      {[[0,3,"標準","NT$3/km"],[3,5,"加成 1.5x","NT$4.5/km"],[5,99,"加成 2x","NT$5.5/km"]].map(([a,b,label,rate])=>(
        <div key={a} className="fee-row">
          <span>{a}–{b===99?"∞":b} km <span className="tag">{label}</span></span>
          <span style={{color:T.green}}>{rate}</span>
        </div>
      ))}
    </div>
    <div className="card">
      <div className="card-title">📝 配送記錄</div>
      {delivered.length===0 ? <div className="empty" style={{padding:20}}><div>尚無配送記錄</div></div>
      : delivered.map(o=>(
        <div key={o.id} className="fee-row">
          <span>{o.id} · {o.distance} km · {o.time}</span>
          <span style={{color:T.green}}>+NT${o.fee+o.bonus}</span>
        </div>
      ))}
    </div>
  </>);
}

function Notifications({ notifications }) {
  return (<>
    <div className="page-title">通知中心</div>
    <div className="page-sub">{notifications.length} 則通知</div>
    {notifications.length===0 ? <div className="empty"><div className="icon">🔔</div><div>沒有通知</div></div>
    : notifications.map(n=>(
      <div key={n.id} className={`notif ${n.type==="new"?"new":""}`}>
        <div className="notif-icon">{n.type==="new"?"🆕":"ℹ️"}</div>
        <div className="notif-text">
          <div className="notif-title">{n.title}</div>
          <div className="notif-desc">{n.desc}</div>
        </div>
        <div className="notif-time">{n.time}</div>
      </div>
    ))}
  </>);
}