// pages/me.jsx — 我的: profile + owner/pro role switcher.
const { useState: uS2 } = React;

function MeScreen({ onNav = () => {}, go = () => {}, variant = 'notch' }) {
  const [role, setRole] = uS2('owner');
  const [toast, setToast] = uS2(false);
  const switchRole = (r) => { if (r === role) return; setRole(r); if (r === 'pro') { setToast(true); setTimeout(() => setToast(false), 1800); } };
  const rows = [['paw', '我的貓咪', 'mycats'], ['pin', '地址簿', 'addresses'], ['wallet', '付款方式', 'payment'], ['bell', '通知設定', ''], ['shield', '隱私與安全', ''], ['message', '聯絡客服', 'support']];
  return A('div', { style: { flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0, position: 'relative' } },
    A(Scroll, { style: { padding: '4px 20px 16px' } },
      A('div', { style: { background: 'var(--surface)', border: '1px solid var(--line2)', borderRadius: 'var(--rpill)', padding: 4, display: 'flex', position: 'relative', marginTop: 4 } },
        A('div', { style: { position: 'absolute', top: 4, bottom: 4, left: role === 'owner' ? 4 : '50%', width: 'calc(50% - 4px)', borderRadius: 'var(--rpill)', background: role === 'owner' ? 'var(--brand)' : 'var(--sage)', transition: 'left .28s cubic-bezier(.3,.8,.3,1),background .28s' } }),
        [['owner', '飼主', 'paw'], ['pro', '貓人力', 'shield']].map(([k, l, ic]) =>
          A('button', { key: k, className: 'ccaTap', onClick: () => switchRole(k), style: { flex: 1, zIndex: 1, border: 'none', background: 'transparent', padding: '10px', fontFamily: 'inherit', fontSize: 14, fontWeight: 800, color: role === k ? '#fff' : 'var(--ink3)', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 } }, A(Icon, { name: ic, size: 17, sw: 2 }), l))),
      A('div', { style: { fontSize: 11.5, color: 'var(--ink3)', textAlign: 'center', margin: '8px 0 16px' } }, role === 'owner' ? '目前是飼主模式 · 可隨時切換到工作模式' : '工作模式 · 主色轉為鼠尾草綠'),
      A(Card, { pad: 16, style: { display: 'flex', alignItems: 'center', gap: 14 } },
        A(Avatar, { size: 56, kind: 'person', ring: true }),
        A('div', { style: { flex: 1 } },
          A('div', { style: { fontSize: 17, fontWeight: 800 } }, '王小美'),
          A('div', { style: { fontSize: 12.5, color: 'var(--ink3)', marginTop: 2 } }, '飼主 · 貓人力 · 加入 280 天')),
        A('button', { className: 'ccaTap', onClick: () => go('profile'), style: { width: 36, height: 36, borderRadius: '50%', border: '1.5px solid var(--line)', background: 'transparent', color: 'var(--ink2)' } }, A(Icon, { name: 'edit', size: 18 }))),
      A('div', { style: { marginTop: 16, background: 'var(--surface)', border: '1px solid var(--line2)', borderRadius: 'var(--rlg)', overflow: 'hidden' } },
        rows.map(([ic, l, target], i) => A('div', { key: i, className: 'ccaTap', onClick: () => target && (target === 'mycats' ? onNav('me') : go(target)), style: { display: 'flex', alignItems: 'center', gap: 13, padding: '14px 16px', borderTop: i ? '1px solid var(--line2)' : 'none' } },
          A('div', { style: { width: 32, height: 32, borderRadius: 10, background: 'var(--bgSoft)', color: 'var(--ink2)', display: 'flex', alignItems: 'center', justifyContent: 'center' } }, A(Icon, { name: ic, size: 18 })),
          A('span', { style: { flex: 1, fontSize: 14, fontWeight: 600 } }, l),
          A(Icon, { name: 'chevR', size: 17, color: 'var(--ink3)' }))))),
    A(BottomNavOwner, { active: 'me', onNav, variant }),
    toast && A('div', { style: { position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(46,31,20,.5)', zIndex: 20, backdropFilter: 'blur(2px)' } },
      A('div', { className: 'ccaPop', style: { background: 'var(--surface)', borderRadius: 22, padding: '24px 30px', textAlign: 'center', boxShadow: '0 12px 40px rgba(0,0,0,.2)' } },
        A('div', { style: { width: 56, height: 56, borderRadius: '50%', background: 'var(--sageSoft)', color: 'var(--sage)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 12px' } }, A(Icon, { name: 'shield', size: 28, sw: 2 })),
        A('div', { style: { fontSize: 16, fontWeight: 800 } }, '已切換到 貓人力 模式'),
        A('div', { style: { fontSize: 12.5, color: 'var(--ink3)', marginTop: 4 } }, '導覽列與主色已更新 🐾'))));
}

Object.assign(window, { MeScreen });