// pages/my-cats.jsx — 我的貓咪: list of cat living-profiles + add affordance (→ add-cat form).
const { useState: uSMC } = React;
const CATS = [
  { name: '小橘', breed: '米克斯', sex: '公', age: '3 歲', color: '橘白', neutered: true, photos: 4 },
  { name: '麻糬', breed: '英短', sex: '母', age: '5 歲', color: '銀漸層', neutered: true, photos: 2 },
];

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('div', { style: { width: 72, height: 72, borderRadius: 18, overflow: 'hidden', flexShrink: 0 } }, A(Ph, { w: 72, h: 72, r: 18, icon: 'paw' })),
            A('div', { style: { flex: 1, minWidth: 0 } },
              A('div', { style: { display: 'flex', alignItems: 'center', gap: 7 } },
                A('div', { style: { fontSize: 17, fontWeight: 800 } }, c.name),
                A(Tag, { color: c.sex === '公' ? 'brand' : 'rose' }, c.sex)),
              A('div', { style: { fontSize: 12.5, color: 'var(--ink2)', marginTop: 3, fontWeight: 600 } }, `${c.breed} · ${c.age}`),
              A('div', { style: { fontSize: 12, color: 'var(--ink3)', marginTop: 3, display: 'flex', alignItems: 'center', gap: 6 } },
                A('span', null, c.color),
                A('span', { style: { color: 'var(--line)' } }, '·'),
                A('span', null, c.neutered ? '已結紮' : '未結紮'),
                A('span', { style: { color: 'var(--line)' } }, '·'),
                A('span', { style: { display: 'inline-flex', alignItems: 'center', gap: 3 } }, A(Icon, { name: 'image', size: 12, sw: 1.9 }), c.photos))),
            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 });