// pages/pro-skills.jsx — 專長與價目設定: sitter's service specialties (toggle chips) + editable price list.
// 服務專長 與 服務項目 皆由 admin 後台依「貓人力分類」設定提供，前端無法自行新增；
// 只能從平台提供的清單中勾選要提供的項目，再各自定價。
// Reached from pro-me.jsx. Sage accent.
const { useState: uSPS } = React;

// 這位貓人力所屬分類（由 admin / profile 設定，這裡為「貓保母」）
const PRO_CATEGORY = '貓保母';

// admin 後台提供的「服務專長」清單（依分類）— 前端只能勾選
const SKILL_TAGS = ['高齡貓照護', '餵藥服務', '多貓家庭', '害羞 / 緊張貓', '長毛梳理', '處方飲食', '術後照護', '幼貓照護', '皮下點滴'];

// admin 後台提供的「服務項目」目錄（依分類）— 前端從中挑選要提供的項目並定價
const SERVICE_CATALOG = {
  '貓保母': ['到府餵食 · 30 分', '到府餵食 · 60 分', '清貓砂 + 換水', '陪玩 · 30 分', '餵藥服務', '住宿托管 · 每晚', '每日照片回報', '皮下點滴協助'],
  '貓行為諮詢師': ['初次行為評估', '線上諮詢 · 60 分', '到府諮詢 · 90 分', '多貓關係調解', '分離焦慮改善', '攻擊行為矯正', '追蹤回診'],
};

// ---- 新增服務項目 bottom sheet：依分類顯示 admin 提供的可選項目（多選），沿用專案 SubscribeSheet overlay 慣例 ----
function ProServiceSheet({ category, existing, onAdd, onClose }) {
  const catalog = SERVICE_CATALOG[category] || [];
  const [sel, setSel] = uSPS([]);
  const toggle = (s) => setSel(p => p.includes(s) ? p.filter(x => x !== s) : [...p, s]);
  return A('div', { style: { position: 'absolute', inset: 0, zIndex: 60, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' } },
    A('div', { onClick: onClose, style: { position: 'absolute', inset: 0, background: 'rgba(46,31,20,.5)', backdropFilter: 'blur(2px)' } }),
    A('div', { className: 'ccaPop', style: { position: 'relative', background: 'var(--surface)', borderRadius: '26px 26px 0 0', boxShadow: '0 -12px 44px rgba(0,0,0,.22)', maxHeight: '82%', display: 'flex', flexDirection: 'column' } },
      // header
      A('div', { style: { padding: '10px 22px 6px', flexShrink: 0 } },
        A('div', { style: { width: 38, height: 4, borderRadius: 2, background: 'var(--line)', margin: '0 auto 14px' } }),
        A('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 } },
          A('h2', { style: { fontSize: 18, fontWeight: 800, margin: 0, letterSpacing: -0.3 } }, '新增服務項目'),
          A('button', { className: 'ccaTap', onClick: onClose, style: { width: 32, height: 32, borderRadius: '50%', border: 'none', background: 'var(--bgSoft)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--ink2)' } }, A(Icon, { name: 'x', size: 16, sw: 2.2 })))),
      // category note
      A('div', { style: { flexShrink: 0, padding: '0 22px 8px' } },
        A('div', { style: { display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: 'var(--ink2)', background: 'var(--sageSoft)', borderRadius: 'var(--rmd)', padding: '10px 13px', lineHeight: 1.5 } },
          A(Icon, { name: 'shield', size: 15, color: 'var(--sage)', sw: 2 }),
          A('span', null, '項目由寵答依你的分類「', A('b', { style: { color: 'var(--accentDeep)' } }, category), '」提供，勾選你要開放預約的項目'))),
      // catalog list
      A('div', { style: { overflowY: 'auto', padding: '4px 22px 6px' } },
        catalog.map((s, i) => {
          const added = existing.includes(s);
          const picked = sel.includes(s);
          return A('button', { key: s, className: added ? '' : 'ccaTap', disabled: added, onClick: added ? undefined : () => toggle(s), style: {
            display: 'flex', alignItems: 'center', gap: 12, width: '100%', textAlign: 'left', padding: '13px 4px',
            border: 'none', borderTop: i ? '1px solid var(--line2)' : 'none', background: 'transparent',
            fontFamily: 'inherit', cursor: added ? 'default' : 'pointer', opacity: added ? 0.55 : 1 } },
            // checkbox
            A('div', { style: { width: 22, height: 22, borderRadius: 7, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
              background: (picked || added) ? 'var(--sage)' : 'transparent', boxShadow: (picked || added) ? 'none' : 'inset 0 0 0 1.6px var(--line)' } },
              (picked || added) && A(Icon, { name: 'check', size: 14, color: '#fff', sw: 2.8 })),
            A('span', { style: { flex: 1, fontSize: 14.5, fontWeight: 700, color: added ? 'var(--ink3)' : 'var(--ink)' } }, s),
            added && A('span', { style: { fontSize: 10.5, fontWeight: 800, color: 'var(--ink3)', background: 'var(--bgSoft)', padding: '3px 9px', borderRadius: 8 } }, '已加入'));
        })),
      // footer
      A('div', { style: { flexShrink: 0, padding: '12px 22px 22px', borderTop: '1px solid var(--line2)', display: 'flex', gap: 10 } },
        A('button', { className: 'ccaTap', onClick: onClose, style: { flex: 1, padding: '13px', borderRadius: 'var(--rmd)', border: '1.5px solid var(--line)', background: 'var(--surface)', color: 'var(--ink2)', fontFamily: 'inherit', fontSize: 14.5, fontWeight: 800, cursor: 'pointer' } }, '取消'),
        A('button', { className: 'ccaTap', disabled: !sel.length, onClick: () => onAdd(sel), style: { flex: 2, padding: '13px', borderRadius: 'var(--rmd)', border: 'none', background: sel.length ? 'var(--sage)' : 'var(--line)', color: '#fff', fontFamily: 'inherit', fontSize: 14.5, fontWeight: 800, cursor: sel.length ? 'pointer' : 'default' } }, sel.length ? `加入（${sel.length}）` : '加入'))));
}

function ProSkills({ onBack = () => {}, go = () => {} }) {
  const [on, setOn] = uSPS(new Set(['高齡貓照護', '餵藥服務', '多貓家庭', '害羞 / 緊張貓']));
  // 服務項目改為可增刪的清單（每項 name + price），只能從 admin 目錄挑選
  const [items, setItems] = uSPS([
    { name: '到府餵食 · 30 分', price: 420 },
    { name: '清貓砂 + 換水', price: 150 },
    { name: '陪玩 · 30 分', price: 200 },
    { name: '餵藥服務', price: 100 },
  ]);
  const [sheet, setSheet] = uSPS(false);
  const toggle = (s) => setOn(prev => { const n = new Set(prev); n.has(s) ? n.delete(s) : n.add(s); return n; });
  const setPrice = (i, v) => setItems(p => p.map((it, j) => j === i ? { ...it, price: v.replace(/[^0-9]/g, '') } : it));
  const removeItem = (i) => setItems(p => p.filter((_, j) => j !== i));
  const addItems = (names) => { setItems(p => [...p, ...names.map(name => ({ name, price: '' }))]); setSheet(false); };

  const fieldLabel = (t, sub) => A('div', { style: { margin: '4px 2px 10px' } },
    A('div', { style: { fontSize: 13.5, fontWeight: 800 } }, t),
    sub && A('div', { style: { fontSize: 11.5, color: 'var(--ink3)', marginTop: 2 } }, sub));

  return A('div', { style: { flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0, background: 'var(--bg)', position: 'relative' } },
    A(AppBar, { title: '專長與價目設定', onLeft: onBack }),
    A(Scroll, { style: { padding: '4px 20px 16px' } },
      // 平台提供說明
      A('div', { style: { display: 'flex', alignItems: 'center', gap: 8, fontSize: 11.5, color: 'var(--ink2)', background: 'var(--sageSoft)', borderRadius: 'var(--rmd)', padding: '10px 13px', margin: '4px 0 16px', lineHeight: 1.5 } },
        A(Icon, { name: 'shield', size: 15, color: 'var(--sage)', sw: 2 }),
        A('span', null, '專長與服務項目皆由寵答依分類「', A('b', { style: { color: 'var(--accentDeep)' } }, PRO_CATEGORY), '」提供，可勾選、定價，不可自行新增')),
      // specialties
      fieldLabel('服務專長', '勾選你擅長的項目，會顯示在公開檔案上'),
      A(Card, { pad: 16, style: { marginBottom: 20 } },
        A('div', { style: { display: 'flex', flexWrap: 'wrap', gap: 8 } },
          SKILL_TAGS.map(s => {
            const sel = on.has(s);
            return A('button', { key: s, className: 'ccaTap', onClick: () => toggle(s), style: { display: 'flex', alignItems: 'center', gap: 6, padding: '9px 14px', borderRadius: 'var(--rpill)', border: 'none', fontFamily: 'inherit', fontSize: 13, fontWeight: 700,
              background: sel ? 'var(--sage)' : 'var(--bgSoft)', color: sel ? '#fff' : 'var(--ink2)', boxShadow: sel ? 'none' : 'inset 0 0 0 1px var(--line2)' } },
              sel && A(Icon, { name: 'check', size: 14, color: '#fff', sw: 2.6 }), s);
          }))),
      // pricing
      fieldLabel('服務項目與價目', '勾選平台提供的項目並設定價格，可隨時調整'),
      A(Card, { pad: 16 },
        items.length ? items.map((it, i) => A('div', { key: it.name, style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10, padding: '10px 0', borderTop: i ? '1px solid var(--line2)' : 'none' } },
          A('button', { className: 'ccaTap', onClick: () => removeItem(i), style: { width: 22, height: 22, flexShrink: 0, borderRadius: '50%', border: 'none', background: 'var(--bgSoft)', color: 'var(--ink3)', display: 'flex', alignItems: 'center', justifyContent: 'center' } }, A(Icon, { name: 'x', size: 13, sw: 2.4 })),
          A('span', { style: { flex: 1, fontSize: 13.5 } }, it.name),
          A('div', { style: { display: 'flex', alignItems: 'center', gap: 4, background: 'var(--bgSoft)', borderRadius: 10, padding: '6px 10px' } },
            A('span', { style: { fontSize: 13, color: 'var(--ink3)', fontWeight: 700 } }, '$'),
            A('input', { value: it.price, onChange: e => setPrice(i, e.target.value), inputMode: 'numeric', className: 'num', placeholder: '0',
              style: { width: 48, border: 'none', outline: 'none', background: 'transparent', fontSize: 14, fontWeight: 800, color: 'var(--accentDeep)', textAlign: 'right', fontFamily: 'inherit', padding: 0 } }))))
          : A('div', { style: { fontSize: 12.5, color: 'var(--ink3)', textAlign: 'center', padding: '14px 0' } }, '尚未選擇服務項目')),
      A('button', { className: 'ccaTap', onClick: () => setSheet(true), style: { width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, padding: 14, marginTop: 12, borderRadius: 'var(--rlg)', border: '1.5px dashed var(--line)', background: 'transparent', color: 'var(--ink3)', fontFamily: 'inherit', fontSize: 13.5, fontWeight: 700 } },
        A(Icon, { name: 'plus', size: 18 }), '新增服務項目')),
    A('div', { style: { flexShrink: 0, background: 'var(--surface)', borderTop: '1px solid var(--line2)', padding: '12px 20px 8px' } },
      A(Btn, { full: true, onClick: onBack, style: { padding: '15px' } }, '儲存')),
    A(HomeBar, {}),
    sheet && A(ProServiceSheet, { category: PRO_CATEGORY, existing: items.map(it => it.name), onAdd: addItems, onClose: () => setSheet(false) }));
}

Object.assign(window, { ProSkills });