// pages/my-cats.jsx — 我的貓咪: list of cat living-profiles + add affordance (→ add-cat form).
const { useState: uSMC } = React;
const CATS = [
  { name: '小橘', breed: '米克斯 · 公', age: '3 歲', meta: '5.0kg · 已絕育', updated: '今天更新血檢' },
  { name: '麻糬', breed: '英短 · 母', age: '5 歲', meta: '4.2kg · 已絕育', updated: '3 天前更新體重' },
];

function MyCats({ onNav = () => {}, go = () => {}, variant = 'notch' }) {
  const [view, setView] = uSMC('list');
  if (view === 'add') return A(AddCat, { onBack: () => setView('list') });
  return A('div', { style: { flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 } },
    A('div', { style: { padding: '4px 20px 6px', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'space-between' } },
      A('h1', { style: { fontSize: 24, fontWeight: 800, letterSpacing: -0.5, margin: '4px 0' } }, '我的貓咪')),
    A(Scroll, { style: { padding: '8px 20px 16px' } },
      A('div', { style: { display: 'flex', flexDirection: 'column', gap: 14 } },
        CATS.map((c, i) => A(Card, { key: i, onClick: () => go('catdetail'), pad: 0, style: { overflow: 'hidden' } },
          A('div', { style: { display: 'flex', gap: 14, padding: 14, alignItems: 'center' } },
            A(Ph, { w: 72, h: 72, r: 18, icon: 'paw' }),
            A('div', { style: { flex: 1 } },
              A('div', { style: { fontSize: 17, fontWeight: 800 } }, c.breed),
              A('div', { style: { fontSize: 12.5, color: 'var(--ink3)', marginTop: 2 } }, c.age),
              A('div', { style: { fontSize: 12.5, color: 'var(--ink2)', marginTop: 4, fontWeight: 600 } }, c.meta)),
            A(Icon, { name: 'chevR', size: 18, color: 'var(--ink3)' })))),
        A('button', { className: 'ccaTap', onClick: () => setView('add'), style: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, padding: 18, borderRadius: 'var(--rlg)', border: '1.5px dashed var(--line)', background: 'transparent', color: 'var(--ink3)', fontFamily: 'inherit', fontSize: 14, fontWeight: 700 } },
          A(Icon, { name: 'plus', size: 19 }), '新增一隻貓咪'))),
    A(BottomNavOwner, { active: 'me', onNav, variant }));
}

Object.assign(window, { MyCats });