// pages/pro-order-manager.jsx — 預約單管理: tabbed (待接 / 已接 / 完成 / 取消) order management for 貓人力.
// Entry from 工作台. The 待接 card supports accept/reject; other tabs show status + outcome.
const { useState: uSOM } = React;

const OM_ORDERS = [
  // 待接 pending
  { id: 'o1', owner: '王小美', date: '6/4–6/6（三–五）· 連續 3 天', area: '大安區', status: 'pending',
    cats: [['米克斯 · 公', '到府餵食 ×3、清貓砂、餵藥服務'], ['英短 · 母', '到府餵食 ×1']],
    meta: [['calendar', '每日 09:00 · 連續 3 天'], ['pin', '台北市大安區復興南路一段 1 號 5 樓']], access: '門禁密碼 1234#，鑰匙放鞋櫃', income: '$1,260' },
  { id: 'o2', owner: '李先生', date: '6/8（日）· 單次', area: '信義區', status: 'pending',
    cats: [['黑嚕 · 公', '清貓砂 + 換水、陪玩 30 分']],
    meta: [['calendar', '6/8（日）14:00 · 單次'], ['pin', '台北市信義區松高路 11 號 8 樓']], income: '$350' },
  // 已接 accepted
  { id: 'o3', owner: '張小姐', date: '6/3（二）· 單次', area: '中山區', status: 'accepted',
    cats: [['布丁 · 母', '到府餵食 ×1']],
    meta: [['calendar', '6/3（二）18:30 · 單次'], ['pin', '台北市中山區南京東路二段 20 號']], access: '大樓門禁卡於管理室代領，按 8 樓', income: '$420' },
  { id: 'o4', owner: '陳先生', date: '6/5–6/6（四–五）· 連續 2 天', area: '松山區', status: 'accepted',
    cats: [['橘子 · 公', '到府餵食 ×2'], ['奶茶 · 母', '清貓砂 + 換水']],
    meta: [['calendar', '每日 10:00 · 連續 2 天'], ['pin', '台北市松山區八德路四段 100 號']], access: '鑰匙藏門口地墊下，密碼鎖 5678', income: '$980' },
  // 完成 done
  { id: 'o5', owner: '林太太', date: '5/28（三）· 單次', area: '大安區', status: 'done', rating: 5,
    cats: [['咪咪 · 母', '到府餵食 ×1、陪玩 30 分']],
    meta: [['calendar', '5/28（三）11:00 · 已完成'], ['pin', '台北市大安區敦化南路一段 5 號']], income: '$620' },
  { id: 'o6', owner: '黃先生', date: '5/20–5/22 · 連續 3 天', area: '信義區', status: 'done', rating: 4,
    cats: [['可樂 · 公', '到府餵食 ×3、清貓砂']],
    meta: [['calendar', '每日 08:30 · 已完成'], ['pin', '台北市信義區忠孝東路五段 8 號']], income: '$1,410' },
  // 取消 cancelled
  { id: 'o7', owner: '吳小姐', date: '5/15（四）· 單次', area: '中正區', status: 'cancelled', reason: '飼主臨時取消',
    cats: [['湯圓 · 母', '到府餵食 ×1']],
    meta: [['calendar', '5/15（四）19:00 · 已取消'], ['pin', '台北市中正區羅斯福路三段 30 號']], income: '$420' },
];

const OM_TABS = [['pending', '待接'], ['accepted', '已接'], ['done', '完成'], ['cancelled', '取消']];
const OM_TAGS = {
  pending: ['warn', 'clock', '待回覆'], accepted: ['ok', 'check', '已接受'],
  done: ['sage', 'check', '已完成'], cancelled: ['ink', 'x', '已取消'],
};

// one order card; in 待接 tab it offers accept/reject, otherwise it shows the outcome
function OMOrderCard({ order, go = () => {} }) {
  const [req, setReq] = uSOM(order.status); // pending tab: pending → accepted | rejected
  const status = order.status === 'pending' ? req : order.status;
  const [tc, ti, tl] = OM_TAGS[status] || OM_TAGS.pending;
  const doneLike = status === 'done' || status === 'cancelled';
  return A(Card, { pad: 0, style: { overflow: 'hidden', opacity: status === 'cancelled' ? 0.78 : 1 } },
    A('div', { style: { padding: 16 } },
      A('div', { style: { display: 'flex', gap: 12, alignItems: 'center', marginBottom: 14 } },
        A(Avatar, { size: 44, kind: 'person', style: { borderRadius: 13 } }),
        A('div', { style: { flex: 1 } }, A('div', { style: { fontSize: 14.5, fontWeight: 700 } }, order.owner), A('div', { style: { fontSize: 11.5, color: 'var(--ink3)' } }, order.date)),
        A(Tag, { color: tc, icon: ti }, tl)),
      A('div', { style: { fontSize: 11.5, fontWeight: 800, color: 'var(--ink3)', margin: '2px 0 8px' } }, '服務明細'),
      A('div', { style: { display: 'flex', flexDirection: 'column', gap: 8, background: 'var(--bgSoft)', borderRadius: 14, padding: '12px 13px' } },
        order.cats.map(([cat, svc, note], i) =>
          A('div', { key: i, style: { display: 'flex', gap: 9, alignItems: 'flex-start' } },
            A('div', { style: { width: 26, height: 26, borderRadius: 8, background: 'var(--surface)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 } }, A(Icon, { name: 'paw', size: 14, color: 'var(--sage)' })),
            A('div', { style: { flex: 1, minWidth: 0 } },
              A('div', { style: { fontSize: 12.5, fontWeight: 700 } }, cat),
              A('div', { style: { fontSize: 11.5, color: 'var(--ink2)', marginTop: 1, lineHeight: 1.45 } }, svc),
              note && A('div', { style: { display: 'flex', gap: 5, alignItems: 'flex-start', marginTop: 5 } },
                A(Icon, { name: 'edit', size: 12, color: 'var(--ink3)', style: { flexShrink: 0, marginTop: 2 } }),
                A('div', { style: { flex: 1, fontSize: 11.5, color: 'var(--ink3)', lineHeight: 1.45 } }, note)))))),
      A('div', { style: { display: 'flex', flexDirection: 'column', gap: 9, fontSize: 13, marginTop: 12 } },
        order.meta.map(([ic, t], i) =>
          A('div', { key: i, style: { display: 'flex', gap: 9, alignItems: 'flex-start', color: 'var(--ink2)' } },
            A(Icon, { name: ic, size: 16, color: 'var(--sage)', style: { flexShrink: 0, marginTop: 1 } }), A('span', { style: { lineHeight: 1.45 } }, t)))),
      // 門禁/鑰匙 — confidential, revealed only when 服務進行中 (accepted)
      order.access && (status === 'accepted'
        ? A('div', { style: { display: 'flex', gap: 10, alignItems: 'center', padding: '11px 12px', marginTop: 9, borderRadius: 12, background: 'var(--sageSoft)' } },
          A('div', { style: { width: 30, height: 30, borderRadius: 9, background: 'var(--surface)', color: '#4E6B4B', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 } }, A(Icon, { name: 'doc', size: 16 })),
          A('div', { style: { flex: 1 } },
            A('div', { style: { fontSize: 13, fontWeight: 700, color: '#3F5A3D' } }, '門禁與鑰匙'),
            A('div', { style: { fontSize: 11.5, color: '#4E6B4B', marginTop: 1, lineHeight: 1.4 } }, order.access)))
        : status === 'pending'
          ? A('div', { style: { display: 'flex', gap: 10, alignItems: 'center', padding: '11px 12px', marginTop: 9, borderRadius: 12, background: 'var(--bgSoft)', border: '1px dashed var(--line)' } },
            A('div', { style: { width: 30, height: 30, borderRadius: 9, background: 'var(--surface)', color: 'var(--ink3)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 } }, A(Icon, { name: 'shield', size: 16 })),
            A('div', { style: { flex: 1 } },
              A('div', { style: { fontSize: 13, fontWeight: 700, color: 'var(--ink2)' } }, '門禁與鑰匙資訊'),
              A('div', { style: { fontSize: 11, color: 'var(--ink3)', marginTop: 1 } }, '為保護飼主隱私，服務開始時才會顯示')))
          : null),
      A('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 13, paddingTop: 13, borderTop: '1px solid var(--line2)' } },
        A('span', { style: { fontSize: 12, color: 'var(--ink3)' } }, doneLike ? (status === 'done' ? '實收' : '原金額') : '預估收入'),
        status === 'done' && order.rating
          ? A('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } }, A(Stars, { value: order.rating, size: 12 }), A('span', { className: 'num', style: { fontSize: 18, fontWeight: 800, color: '#6E8C6B' } }, order.income))
          : A('span', { className: 'num', style: { fontSize: 18, fontWeight: 800, color: status === 'cancelled' ? 'var(--ink3)' : '#6E8C6B', textDecoration: status === 'cancelled' ? 'line-through' : 'none' } }, order.income))),
    // footer per status
    status === 'pending'
      ? A('div', { style: { display: 'flex', gap: 0, borderTop: '1px solid var(--line2)' } },
        A('button', { className: 'ccaTap', onClick: () => setReq('rejected'), style: { flex: 1, padding: '14px', border: 'none', background: 'rgba(208,109,92,.10)', color: 'var(--err)', fontFamily: 'inherit', fontSize: 14, fontWeight: 800, borderRight: '1px solid var(--line2)' } }, '拒絕'),
        A('button', { className: 'ccaTap', onClick: () => setReq('accepted'), style: { flex: 1, padding: '14px', border: 'none', background: 'var(--sage)', color: '#fff', fontFamily: 'inherit', fontSize: 14, fontWeight: 800 } }, '接受預約'))
      : status === 'accepted'
        ? A('button', { className: 'ccaTap', onClick: () => go('exec'), style: { width: '100%', padding: '14px', border: 'none', borderTop: '1px solid var(--line2)', background: 'transparent', color: '#6E8C6B', fontFamily: 'inherit', fontSize: 14, fontWeight: 800, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 } }, '前往服務執行 ', A(Icon, { name: 'arrowR', size: 16, sw: 2.2 }))
        : status === 'cancelled' && order.reason
          ? A('div', { style: { padding: '12px 16px', borderTop: '1px solid var(--line2)', fontSize: 12, color: 'var(--ink3)', display: 'flex', alignItems: 'center', gap: 7 } }, A(Icon, { name: 'x', size: 14, color: 'var(--ink3)' }), order.reason)
          : null);
}

function ProOrderManager({ onBack = () => {}, go = () => {}, start = 'pending' }) {
  const [tab, setTab] = uSOM(start);
  const count = (s) => OM_ORDERS.filter(o => o.status === s).length;
  const list = OM_ORDERS.filter(o => o.status === tab);
  return A('div', { style: { flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0, background: 'var(--bg)' } },
    A(AppBar, { title: '預約單管理', onLeft: onBack }),
    // tabs
    A('div', { style: { display: 'flex', gap: 6, padding: '0 16px 10px', flexShrink: 0 } },
      OM_TABS.map(([k, l]) => {
        const on = tab === k;
        const n = count(k);
        return A('button', { key: k, className: 'ccaTap', onClick: () => setTab(k), style: { flex: 1, padding: '9px 4px', borderRadius: 'var(--rpill)', border: 'none', fontFamily: 'inherit', fontSize: 13, fontWeight: 800,
          background: on ? 'var(--sage)' : 'var(--surface)', color: on ? '#fff' : 'var(--ink3)', boxShadow: on ? 'none' : 'inset 0 0 0 1px var(--line2)', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4 } },
          l, n > 0 && A('span', { className: 'num', style: { fontSize: 11, fontWeight: 800, color: on ? '#fff' : 'var(--ink3)', opacity: on ? 0.9 : 1 } }, n));
      })),
    A(Scroll, { style: { padding: '6px 20px 16px' } },
      list.length
        ? A('div', { style: { display: 'flex', flexDirection: 'column', gap: 14 } }, list.map(o => A(OMOrderCard, { key: o.id, order: o, go })))
        : A('div', { style: { textAlign: 'center', color: 'var(--ink3)', padding: '60px 20px' } },
          A('div', { style: { width: 56, height: 56, borderRadius: '50%', background: 'var(--bgSoft)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 12px' } }, A(Icon, { name: 'list', size: 26, color: 'var(--neutral)' })),
          A('div', { style: { fontSize: 13.5, fontWeight: 600 } }, '目前沒有此類預約單'))),
    A(BottomNavPro, { active: 'dash', onNav: () => {} }));
}

Object.assign(window, { OM_ORDERS, OM_TABS, OM_TAGS, OMOrderCard, ProOrderManager });