// pages/booking-detail.jsx — 預約詳情 / 服務進行中: sectioned panels — 服務狀態 timeline,
// 今日進度 (read-only done/undone status), 保姆回報 feed.
const TODO = [['餵食', true], ['換水', true], ['清貓砂', false], ['陪玩', false]];
const STAGES = ['已接受', '出發中', '服務中', '完成'];

function BookingDetail({ onBack = () => {}, go = () => {} }) {
  const cur = 2;
  const doneN = TODO.filter(([, d]) => d).length;

  const SecHead = (icon, text, right) => A('div', { style: { display: 'flex', alignItems: 'center', gap: 9, marginBottom: 13 } },
    A('div', { style: { width: 28, height: 28, borderRadius: 9, background: 'var(--accentSoft)', color: 'var(--accentDeep)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 } }, A(Icon, { name: icon, size: 16, sw: 2 })),
    A('div', { style: { fontSize: 15, fontWeight: 800, flex: 1, letterSpacing: -0.2 } }, text),
    right || null);

  // ---- 服務狀態 ----
  const statusCard = A(Card, { pad: 16 },
    SecHead('trend', '服務狀態'),
    A('div', { style: { display: 'flex', justifyContent: 'space-between', position: 'relative', padding: '0 6px' } },
      A('div', { style: { position: 'absolute', top: 11, left: 18, right: 18, height: 2.5, background: 'var(--line)' } }),
      A('div', { style: { position: 'absolute', top: 11, left: 18, width: `${(cur / (STAGES.length - 1)) * 84}%`, height: 2.5, background: 'var(--accent)' } }),
      STAGES.map((s, i) => A('div', { key: i, style: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, position: 'relative', zIndex: 1 } },
        A('div', { style: { width: 24, height: 24, borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'center', background: i <= cur ? 'var(--accent)' : 'var(--surface)', border: i <= cur ? 'none' : '2px solid var(--line)', color: '#fff', animation: i === cur ? 'ccaPulse 1.6s infinite' : 'none' } },
          i < cur ? A(Icon, { name: 'check', size: 14, sw: 2.6 }) : i === cur ? A('div', { style: { width: 7, height: 7, borderRadius: 4, background: '#fff' } }) : null),
        A('span', { style: { fontSize: 11, fontWeight: i <= cur ? 700 : 500, color: i <= cur ? 'var(--ink)' : 'var(--ink3)' } }, s)))));

  // ---- 今日進度 (read-only status, not tickable) ----
  const progressCard = A(Card, { pad: 16 },
    SecHead('list', '今日進度', A('span', { className: 'num', style: { fontSize: 12.5, color: 'var(--ink3)', fontWeight: 700 } }, `${doneN} / ${TODO.length}`)),
    A('div', null,
      TODO.map(([t, done], i) => A('div', { key: i, style: { display: 'flex', alignItems: 'center', gap: 11, padding: '11px 0', borderTop: i ? '1px solid var(--line2)' : 'none' } },
        done
          ? A('div', { style: { width: 22, height: 22, borderRadius: 11, background: 'var(--ok)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 } }, A(Icon, { name: 'check', size: 13, sw: 3 }))
          : A('div', { style: { width: 22, height: 22, borderRadius: 11, background: 'var(--bgSoft)', color: 'var(--ink3)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 } }, A(Icon, { name: 'clock', size: 13, sw: 2 })),
        A('span', { style: { flex: 1, fontSize: 14, fontWeight: 600, color: done ? 'var(--ink)' : 'var(--ink3)' } }, t),
        done
          ? A('span', { className: 'num', style: { fontSize: 11, color: 'var(--ink3)' } }, '09:0' + (i + 5))
          : A('span', { style: { fontSize: 11.5, fontWeight: 700, color: 'var(--ink3)' } }, '未完成')))));

  // ---- 保姆回報 ----
  const reportCard = A(Card, { pad: 16 },
    SecHead('camera', '保姆回報'),
    A('div', { style: { display: 'flex', gap: 11 } },
      A('div', { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 } },
        A(Avatar, { size: 30, kind: 'person' }),
        A('div', { style: { width: 2, flex: 1, background: 'var(--line2)' } })),
      A('div', { style: { flex: 1 } },
        A('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' } },
          A('span', { style: { fontSize: 13, fontWeight: 700 } }, '林依婷'),
          A('span', { style: { fontSize: 11, color: 'var(--ink3)' } }, '09:12')),
        A('p', { style: { fontSize: 13, color: 'var(--ink2)', lineHeight: 1.5, margin: '5px 0 9px' } }, '都吃光光了！剛剛還主動討摸摸，狀況很好 🐱'),
        A('div', { style: { display: 'flex', gap: 8 } }, A(Ph, { w: 96, h: 96, r: 14, icon: 'image' }), A(Ph, { w: 96, h: 96, r: 14, icon: 'video' })))));

  return A('div', { style: { flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0, background: 'var(--bg)' } },
    A(AppBar, { title: '預約詳情', sub: '6/4 到府餵食', onLeft: onBack }),
    A('div', { style: { flex: 1, overflowY: 'auto', padding: '4px 20px 16px' } },
      // booking summary (subject of this page)
      A(Card, { pad: 14, style: { 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: 12, color: 'var(--ink3)' } }, '到府保姆 · 09:00–09:30')),
        A(Tag, { color: 'ok', icon: 'clock' }, '服務中')),
      // sections
      A('div', { style: { display: 'flex', flexDirection: 'column', gap: 14, marginTop: 14 } },
        statusCard, progressCard, reportCard)),
    A('div', { style: { flexShrink: 0, background: 'var(--surface)', borderTop: '1px solid var(--line2)', padding: '12px 20px 8px' } },
      A(Btn, { full: true, icon: 'message', onClick: () => go('personChat'), style: { padding: '15px' } }, '與林依婷即時聊天')),
    A(HomeBar, {}));
}

Object.assign(window, { BookingDetail });