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

function ProExec({ onBack = () => {}, go = () => {} }) {
  // 飼主預約時，依每隻貓咪各自選的服務項目（唯讀，來自 Booking）。貓咪身份對齊 Cat MVP 模型。
  const [cats, setCats] = uSP([
    { name: '小橘', sex: '公', meta: '米克斯 · 3 歲 · 橘白 · 已結紮', note: '親人愛撒嬌但怕生，第一次見面動作放慢牠就會靠近。每日早晚各餵藥一次，藥放冰箱第二層；正在吃腎臟處方飼料。', services: [
      { t: '到府餵食 · 30 分', done: true }, { t: '餵藥服務', done: true }, { t: '清貓砂 + 換水', done: false } ] },
    { name: '麻糬', sex: '母', meta: '英短 · 5 歲 · 銀漸層 · 已結紮', note: '愛喝流動的水，記得幫忙開飲水機。個性穩定不怕生。', services: [
      { 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 } },
      // 統一的身份 header（白底）+ 貓咪備註 — 與 pro-order-detail 完全一致
      A(CatJobHeader, { name: c.name, sex: c.sex, meta: c.meta }),
      A(CatJobNote, { note: c.note }),
      // 服務項目 — 此處才是可勾選的執行清單（綠＝已完成）
      A(CatJobSecLabel, { right: A('span', { className: 'num', style: { fontSize: 11.5, fontWeight: 800, color: 'var(--sage)' } }, `${dc}/${c.services.length}`) }, '服務項目'),
      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 });