// pages/pro-report.jsx — 服務執行: 飼主預約的服務（依每隻貓咪選的項目，唯讀清單 + 打勾），加上即時回報 composer。
// 服務項目來自飼主預約時所選（每隻貓可能不同），貓人力只能打勾完成，無法自行新增/編輯。
const { useState: uSP } = React;

function ProExec({ onBack = () => {}, go = () => {} }) {
  // 飼主預約時，依每隻貓咪各自選的服務項目（唯讀，來自 Booking）
  const [cats, setCats] = uSP([
    { name: '米克斯', note: '怕生、需餵藥 · 藥在冰箱第二層', services: [
      { t: '到府餵食 · 30 分', done: true }, { t: '餵藥服務', done: true }, { t: '清貓砂 + 換水', done: false } ] },
    { name: '小橘', note: '親人、愛玩', services: [
      { t: '到府餵食 · 30 分', done: false }, { t: '陪玩 · 30 分', done: false } ] },
  ]);
  const toggle = (ci, si) => setCats(cs => cs.map((c, i) => i === ci
    ? { ...c, services: c.services.map((s, j) => j === si ? { ...s, done: !s.done } : s) } : c));
  const total = cats.reduce((n, c) => n + c.services.length, 0);
  const done = cats.reduce((n, c) => n + c.services.filter(s => s.done).length, 0);

  const catCard = (c, ci) => {
    const dc = c.services.filter(s => s.done).length;
    return A(Card, { key: ci, pad: 0, style: { overflow: 'hidden', marginBottom: 12 } },
      // cat header — who + 照護提醒
      A('div', { style: { display: 'flex', gap: 11, alignItems: 'center', padding: '12px 14px', background: 'var(--sageSoft)' } },
        A(Ph, { w: 36, h: 36, r: 10, icon: 'paw' }),
        A('div', { style: { flex: 1, minWidth: 0 } },
          A('div', { style: { fontSize: 13.5, fontWeight: 800 } }, c.name),
          c.note && A('div', { style: { fontSize: 11.5, color: '#4E6B4B', marginTop: 1 } }, c.note)),
        A('span', { className: 'num', style: { fontSize: 11.5, fontWeight: 800, color: '#4E6B4B', flexShrink: 0 } }, `${dc}/${c.services.length}`)),
      // owner-selected services — 唯讀項目，只能打勾
      A('div', { style: { padding: '2px 14px 6px' } },
        c.services.map((s, si) => A('button', { key: si, className: 'ccaTap', onClick: () => toggle(ci, si), style: {
          display: 'flex', alignItems: 'center', gap: 11, width: '100%', textAlign: 'left',
          padding: '12px 0', border: 'none', borderTop: si ? '1px solid var(--line2)' : 'none', background: 'transparent', fontFamily: 'inherit', cursor: 'pointer' } },
          A('div', { style: { width: 24, height: 24, borderRadius: 8, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
            background: s.done ? 'var(--sage)' : 'transparent', boxShadow: s.done ? 'none' : 'inset 0 0 0 2px var(--line)' } }, s.done && A(Icon, { name: 'check', size: 14, color: '#fff', sw: 3 })),
          A('span', { style: { flex: 1, fontSize: 14.5, fontWeight: 600, color: s.done ? 'var(--ink3)' : 'var(--ink)', textDecoration: s.done ? 'line-through' : 'none' } }, s.t)))));
  };

  return A('div', { style: { flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0, background: 'var(--bg)' } },
    A(AppBar, { title: '服務執行', sub: '王小美 · 09:00', onLeft: onBack,
      right: A('button', { style: { width: 38, height: 38, borderRadius: '50%', border: 'none', background: 'transparent', color: 'var(--sage)' } }, A(Icon, { name: 'phone', size: 20 })) }),
    A('div', { style: { flex: 1, overflowY: 'auto', padding: '4px 20px 16px' } },
      // section header — 來自飼主預約
      A('div', { style: { display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', margin: '4px 2px 4px' } },
        A('div', { style: { fontSize: 15, fontWeight: 800 } }, '飼主預約的服務'),
        A('span', { className: 'num', style: { fontSize: 12.5, fontWeight: 800, color: 'var(--sage)' } }, `已完成 ${done}/${total}`)),
      A('div', { style: { fontSize: 12, color: 'var(--ink3)', margin: '0 2px 14px', lineHeight: 1.5 } }, '依每隻貓咪選的項目，完成後打勾'),
      cats.map((c, i) => catCard(c, i)),
      // live report composer
      A('div', { style: { fontSize: 13, fontWeight: 800, margin: '6px 2px 10px' } }, '即時回報給飼主'),
      A(Card, { pad: 12 },
        A('div', { style: { fontSize: 12.5, color: 'var(--ink3)', padding: '4px 4px 12px' } }, '拍張照片或寫幾句，飼主會即時收到'),
        A('div', { style: { display: 'flex', gap: 10 } },
          A(Ph, { w: 88, h: 88, r: 14, icon: 'camera' }), A(Ph, { w: 88, h: 88, r: 14, icon: 'video' }),
          A('button', { className: 'ccaTap', style: { width: 88, height: 88, borderRadius: 14, border: '1.5px dashed var(--line)', background: 'transparent', color: 'var(--sage)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 } }, A(Icon, { name: 'plus', size: 24 }))))),
    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', icon: 'message', onClick: () => go('msg'), style: { flex: 1, padding: '14px' } }, '聯絡飼主'),
      A(Btn, { onClick: onBack, style: { flex: 1, padding: '14px' } }, '完成服務')),
    A(HomeBar, {}));
}

Object.assign(window, { ProExec });