// 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 = () => {} }) {
  const cats = [
    { name: '米克斯 · 公', meta: '3 歲 · 5.0kg · 需每日餵藥', tag: '怕生', svc: '到府餵食 ×3、清貓砂 + 換水、餵藥服務', note: '怕生，第一次見面請慢慢來；餵藥在冰箱第二層' },
    { name: '英短 · 母', meta: '5 歲 · 4.2kg · 已絕育', tag: null, svc: '到府餵食 ×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 + the services owner picked per cat + per-cat note (booking-flow 選項目)
      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('div', { style: { display: 'flex', gap: 12, alignItems: 'center', padding: 14 } },
            A(Ph, { w: 48, h: 48, r: 14, icon: 'paw' }),
            A('div', { style: { flex: 1, minWidth: 0 } }, A('div', { style: { fontSize: 14, fontWeight: 700 } }, c.name), A('div', { style: { fontSize: 11.5, color: 'var(--ink3)', marginTop: 2 } }, c.meta)),
            c.tag && A(Tag, { color: 'rose' }, c.tag)),
          A('div', { style: { display: 'flex', gap: 9, alignItems: 'flex-start', padding: '11px 14px', borderTop: '1px solid var(--line2)', background: 'var(--sageSoft)' } },
            A(Icon, { name: 'check', size: 15, color: '#4E6B4B', sw: 2.6, style: { flexShrink: 0, marginTop: 1 } }),
            A('div', { style: { flex: 1, fontSize: 12.5, color: '#3F5A3D', lineHeight: 1.5, fontWeight: 700 } }, c.svc)),
          c.note && A('div', { style: { display: 'flex', gap: 9, alignItems: 'flex-start', padding: '11px 14px', borderTop: '1px solid var(--line2)' } },
            A(Icon, { name: 'edit', size: 15, color: 'var(--ink3)', style: { flexShrink: 0, marginTop: 1 } }),
            A('div', { style: { flex: 1, minWidth: 0 } },
              A('div', { style: { fontSize: 11, fontWeight: 800, color: 'var(--ink3)', marginBottom: 3 } }, '飼主備註'),
              A('div', { style: { fontSize: 12.5, color: 'var(--ink2)', lineHeight: 1.5 } }, c.note)))))),
      // 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 });