// pages/add-cat.jsx — 新增貓咪: form to create a new cat living-profile. Entry from 我的貓咪 (my-cats).
const { useState: uSAC } = React;

function CatField({ label, value, onChange, placeholder, inputMode, num, suffix, req }) {
  return A('div', { style: { marginBottom: 14 } },
    A('div', { style: { fontSize: 12, fontWeight: 700, color: 'var(--ink2)', marginBottom: 7 } }, label, req && A('span', { style: { color: 'var(--err)' } }, ' *')),
    A('div', { style: { display: 'flex', alignItems: 'center', gap: 8, background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 'var(--rmd)', padding: '0 14px' } },
      A('input', { value, onChange: e => onChange(e.target.value), placeholder, inputMode, className: num ? 'num' : undefined,
        style: { flex: 1, border: 'none', outline: 'none', background: 'transparent', fontSize: 14.5, fontFamily: 'inherit', color: 'var(--ink)', padding: '13px 0', minWidth: 0 } }),
      suffix && A('span', { style: { fontSize: 13, color: 'var(--ink3)', fontWeight: 700, flexShrink: 0 } }, suffix)));
}

function AddCat({ onBack = () => {} }) {
  const [name, setName] = uSAC('');
  const [breed, setBreed] = uSAC('');
  const [sex, setSex] = uSAC('male');
  const [neutered, setNeutered] = uSAC(true);
  const [note, setNote] = uSAC('');
  const canSave = name.trim() && breed.trim();

  return A('div', { style: { flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0, background: 'var(--bg)' } },
    A(AppBar, { title: '新增貓咪', onLeft: onBack }),
    A(Scroll, { style: { padding: '4px 20px 16px' } },
      // photo
      A('div', { style: { display: 'flex', justifyContent: 'center', marginBottom: 18 } },
        A('button', { className: 'ccaTap', style: { position: 'relative', border: 'none', background: 'transparent', padding: 0, cursor: 'pointer' } },
          A(Ph, { w: 96, h: 96, r: 28, icon: 'paw', label: '加照片' }),
          A('div', { style: { position: 'absolute', bottom: -2, right: -2, width: 32, height: 32, borderRadius: 16, background: 'var(--brand)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '2.5px solid var(--bg)' } }, A(Icon, { name: 'camera', size: 16, color: '#fff' })))),
      A(CatField, { label: '暱稱', value: name, onChange: setName, placeholder: '幫牠取個名字', req: true }),
      A(CatField, { label: '品種', value: breed, onChange: setBreed, placeholder: '例：米克斯（橘貓）', req: true }),
      // sex + neutered
      A('div', { style: { fontSize: 12, fontWeight: 700, color: 'var(--ink2)', marginBottom: 7 } }, '性別'),
      A('div', { style: { display: 'flex', gap: 8, marginBottom: 14 } },
        [['male', '公'], ['female', '母']].map(([k, l]) => {
          const on = sex === k;
          return A('button', { key: k, className: 'ccaTap', onClick: () => setSex(k), style: { flex: 1, padding: '12px', borderRadius: 'var(--rmd)', border: 'none', fontFamily: 'inherit', fontSize: 14, fontWeight: 700,
            background: on ? 'var(--brand)' : 'var(--surface)', color: on ? '#fff' : 'var(--ink2)', boxShadow: on ? 'none' : 'inset 0 0 0 1px var(--line)' } }, l);
        })),
      A('div', { style: { display: 'flex', alignItems: 'center', gap: 12, background: 'var(--surface)', border: '1px solid var(--line2)', borderRadius: 'var(--rmd)', padding: '13px 14px', marginBottom: 14 } },
        A('span', { style: { flex: 1, fontSize: 14, fontWeight: 700 } }, '已絕育'),
        A(Toggle, { on: neutered, onClick: () => setNeutered(v => !v) })),
      // note
      A('div', { style: { fontSize: 12, fontWeight: 700, color: 'var(--ink2)', marginBottom: 7 } }, '個性 / 備註'),
      A('textarea', { value: note, onChange: e => setNote(e.target.value), placeholder: '例：親人、愛撒嬌、有點膽小…', rows: 3,
        style: { width: '100%', boxSizing: 'border-box', border: '1px solid var(--line)', background: 'var(--surface)', borderRadius: 'var(--rmd)', padding: '13px 14px', fontSize: 14.5, fontFamily: 'inherit', color: 'var(--ink)', outline: 'none', resize: 'none', lineHeight: 1.6 } })),
    A('div', { style: { flexShrink: 0, background: 'var(--surface)', borderTop: '1px solid var(--line2)', padding: '12px 20px 8px' } },
      A(Btn, { full: true, disabled: !canSave, onClick: onBack, style: { padding: '15px' } }, '建立貓咪檔案')),
    A(HomeBar, {}));
}

Object.assign(window, { AddCat, CatField });