// pages/pro-order-detail.jsx — 預約單詳情: owner-provided info (note, cats, chosen services,
// schedule, address + access note). Cross-references booking-flow.jsx 第4步. Owners have no rating.
function ProJob({ onBack = () => {}, go = () => {} }) {
  // 對齊新的 Cat MVP 模型：暱稱為主、品種/性別/年齡/毛色為 meta；照護與安全資訊一律來自自由備註
  const cats = [
    { name: '小橘', sex: '公', meta: '米克斯 · 3 歲 · 橘白 · 已結紮', svcs: ['到府餵食 ×3', '清貓砂 + 換水', '餵藥服務'], note: '親人愛撒嬌但怕生，第一次見面動作放慢牠就會靠近。每日早晚各餵藥一次，藥放冰箱第二層；正在吃腎臟處方飼料。' },
    { name: '麻糬', sex: '母', meta: '英短 · 5 歲 · 銀漸層 · 已結紮', svcs: ['到府餵食 ×1'], note: '愛喝流動的水，記得幫忙開飲水機。個性穩定不怕生。' },
  ];
  const SecLabel = (t) => A('div', { style: { fontSize: 13, fontWeight: 800, margin: '4px 2px 10px' } }, t);
  return A('div', { style: { flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0, background: 'var(--bg)' } },
    A(AppBar, { title: '預約單', sub: '王小美 · 6/4–6/6', onLeft: onBack }),
    A('div', { style: { flex: 1, overflowY: 'auto', padding: '4px 20px 16px' } },
      // owner — no rating
      A(Card, { pad: 16, style: { marginBottom: 14, display: 'flex', gap: 12, alignItems: 'center' } },
        A(Avatar, { size: 48, kind: 'person', style: { borderRadius: 14 } }),
        A('div', { style: { flex: 1 } }, A('div', { style: { fontSize: 15, fontWeight: 700 } }, '王小美'), A('div', { style: { fontSize: 11.5, color: 'var(--ink3)' } }, '飼主 · 加入 280 天')),
        A(Tag, { color: 'warn', icon: 'clock' }, '待回覆')),
      // cats — 身份 header → 貓咪備註 → 服務項目（此處為唯讀預覽，不可勾選）
      SecLabel('照顧對象與預約服務'),
      A('div', { style: { display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 14 } },
        cats.map((c, i) => A(Card, { key: i, pad: 0, style: { overflow: 'hidden' } },
          A(CatJobHeader, { name: c.name, sex: c.sex, meta: c.meta }),
          A(CatJobNote, { note: c.note }),
          A(CatJobSecLabel, { right: A('span', { style: { fontSize: 11, color: 'var(--ink3)' } }, '飼主預約') }, '服務項目'),
          A('div', { style: { padding: '6px 14px 12px' } },
            c.svcs.map((s, si) => A('div', { key: si, style: { display: 'flex', alignItems: 'center', gap: 11, padding: '7px 0' } },
              A('div', { style: { width: 6, height: 6, borderRadius: 3, background: 'var(--sage)', flexShrink: 0 } }),
              A('span', { style: { fontSize: 14, fontWeight: 600, color: 'var(--ink)' } }, s))))))),
      // income total
      A(Card, { pad: 14, style: { marginBottom: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
        A('span', { style: { fontSize: 13, color: 'var(--ink3)' } }, '預估收入'),
        A('span', { className: 'num', style: { fontSize: 20, fontWeight: 800, color: '#6E8C6B' } }, '$1,260')),
      // schedule + address (public); access note stays hidden until service starts
      SecLabel('時間與到府資訊'),
      A(Card, { pad: 14 },
        [['calendar', '每日 09:00 · 連續 3 天'], ['pin', '台北市大安區復興南路一段 1 號 5 樓']].map(([ic, t], i) =>
          A('div', { key: i, style: { display: 'flex', gap: 10, alignItems: 'flex-start', padding: '8px 0', fontSize: 13.5, color: 'var(--ink2)', borderTop: i ? '1px solid var(--line2)' : 'none' } },
            A(Icon, { name: ic, size: 17, color: 'var(--sage)', style: { flexShrink: 0, marginTop: 1 } }), A('span', { style: { lineHeight: 1.45 } }, t))),
        // confidential: 門禁/鑰匙 revealed only when service starts
        A('div', { style: { display: 'flex', gap: 10, alignItems: 'center', padding: '11px 12px', marginTop: 8, 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 } }, '為保護飼主隱私，服務開始時才會顯示')))) ),
    A('div', { style: { flexShrink: 0, background: 'var(--surface)', borderTop: '1px solid var(--line2)', padding: '12px 20px 8px', display: 'flex', gap: 10 } },
      A(Btn, { variant: 'neutral', onClick: onBack, style: { flex: 1, padding: '14px' } }, '拒絕'),
      A(Btn, { onClick: () => go('exec'), style: { flex: 2, padding: '14px' } }, '接受預約')),
    A(HomeBar, {}));
}

Object.assign(window, { ProJob });