// pages/my-bookings.jsx — 我的預約: upcoming / done booking list.
const { useState: uS2 } = React;

const BOOKINGS = {
  upcoming: [
    { day: '04', mon: '六月', status: 'serving', sTxt: '服務中', sc: 'ok', name: '林依婷 · 到府保姆', sub: '09:00 到府餵食', accent: 'brand' },
    { day: '12', mon: '六月', status: 'accepted', sTxt: '已接受', sc: 'sage', name: '阿福獸醫 · 到府', sub: '14:00 健康檢查', accent: 'sage' },
  ],
  done: [
    { day: '20', mon: '五月', status: 'done', sTxt: '已完成', sc: 'ink', name: '陳冠宇 · 行為諮詢', sub: '線上 40 分', rated: false },
    { day: '08', mon: '五月', status: 'done', sTxt: '已評價', sc: 'ink', name: '林依婷 · 到府保姆', sub: '連續 2 天', rated: true },
  ],
};

function MyBookings({ onNav = () => {}, go = () => {}, variant = 'notch' }) {
  const [tab, setTab] = uS2('upcoming');
  const list = BOOKINGS[tab];
  return A('div', { style: { flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 } },
    A('div', { style: { padding: '4px 20px 0', flexShrink: 0 } },
      A('h1', { style: { fontSize: 24, fontWeight: 800, letterSpacing: -0.5, margin: '4px 0 14px' } }, '我的預約'),
      A('div', { style: { display: 'flex', gap: 24, borderBottom: '1px solid var(--line2)' } },
        [['upcoming', '即將到來'], ['done', '已完成']].map(([k, l]) =>
          A('button', { key: k, className: 'ccaTap', onClick: () => setTab(k), style: { border: 'none', background: 'transparent', padding: '0 0 10px', fontFamily: 'inherit', fontSize: 15, fontWeight: tab === k ? 800 : 600, color: tab === k ? 'var(--ink)' : 'var(--ink3)', borderBottom: tab === k ? '2.5px solid var(--accent)' : '2.5px solid transparent', marginBottom: -1 } }, l)))),
    A(Scroll, { style: { padding: '16px 20px' } },
      A('div', { style: { display: 'flex', flexDirection: 'column', gap: 12 } },
        list.map((b, i) => A(Card, { key: i, onClick: () => go('bkdetail'), pad: 14, style: { display: 'flex', gap: 12, alignItems: 'center' } },
          A('div', { style: { textAlign: 'center', background: b.status === 'done' ? 'var(--bgSoft)' : 'var(--brandSoft)', borderRadius: 12, padding: '8px 12px', flexShrink: 0 } },
            A('div', { className: 'num', style: { fontSize: 20, fontWeight: 800, color: b.status === 'done' ? 'var(--ink2)' : 'var(--brandDeep)', lineHeight: 1 } }, b.day),
            A('div', { style: { fontSize: 10, fontWeight: 700, color: b.status === 'done' ? 'var(--ink3)' : 'var(--brandDeep)', marginTop: 2 } }, b.mon)),
          A('div', { style: { flex: 1, minWidth: 0 } },
            A('div', { style: { display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 } },
              A(Tag, { color: b.sc, icon: b.status === 'serving' ? 'clock' : b.status === 'accepted' ? 'check' : undefined }, b.sTxt),
              b.status === 'serving' && A('span', { style: { width: 6, height: 6, borderRadius: 3, background: 'var(--ok)', animation: 'ccaPulse 1.4s infinite' } })),
            A('div', { style: { fontSize: 14, fontWeight: 700 } }, b.name),
            A('div', { style: { fontSize: 12, color: 'var(--ink3)', marginTop: 1 } }, b.sub)),
          (tab === 'done' && !b.rated) ? A(Btn, { size: 'sm', variant: 'soft', onClick: (e) => { e.stopPropagation(); go('writereview'); } }, '評價') : A(Icon, { name: 'chevR', size: 18, color: 'var(--ink3)' }))))),
    A(BottomNavOwner, { active: 'bookings', onNav, variant }));
}

Object.assign(window, { MyBookings });