// pages/add-cat.jsx — 新增貓咪: 身份辨識表單 (MVP). 照護／醫療等複雜資訊先以自由「備註」承接,不做死結構化。
const { useState: uSAC } = React;

function CatField({ label, value, onChange, placeholder, inputMode, num, suffix, req, hint }) {
  return A('div', { style: { marginBottom: 14 } },
    A('div', { style: { fontSize: 12, fontWeight: 700, color: 'var(--ink2)', marginBottom: 7, display: 'flex', alignItems: 'baseline', gap: 6 } },
      A('span', null, label, req && A('span', { style: { color: 'var(--err)' } }, ' *')),
      hint && A('span', { style: { fontSize: 11, fontWeight: 600, color: 'var(--ink3)' } }, hint)),
    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 SecLabel({ children, hint }) {
  return A('div', { style: { display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', margin: '2px 2px 10px' } },
    A('span', { style: { fontSize: 13.5, fontWeight: 800, color: 'var(--ink)' } }, children),
    hint && A('span', { style: { fontSize: 11, fontWeight: 600, color: 'var(--ink3)' } }, hint));
}

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

  const addPhoto = () => setPhotos(p => p.length >= 8 ? p : [...p, Date.now() + Math.random()]);
  const removePhoto = (id) => setPhotos(p => p.filter(x => x !== id));

  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' } },

      // ---- 大頭貼 ----
      A('div', { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: 22 } },
        A('button', { className: 'ccaTap', style: { position: 'relative', border: 'none', background: 'transparent', padding: 0, cursor: 'pointer' } },
          A('div', { style: { width: 100, height: 100, borderRadius: '50%', overflow: 'hidden' } }, A(Ph, { w: 100, h: 100, r: 50, icon: 'paw' })),
          A('div', { style: { position: 'absolute', bottom: 0, right: 0, width: 32, height: 32, borderRadius: 16, background: 'var(--brand)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '3px solid var(--bg)' } }, A(Icon, { name: 'camera', size: 16, color: '#fff' }))),
        A('div', { style: { fontSize: 11.5, color: 'var(--ink3)', fontWeight: 600, marginTop: 8 } }, '設定大頭貼')),

      // ---- 基本資料 ----
      A(SecLabel, null, '基本資料'),
      A(CatField, { label: '暱稱', value: name, onChange: setName, placeholder: '幫牠取個名字', req: true }),
      A(CatField, { label: '品種', value: breed, onChange: setBreed, placeholder: '例：米克斯、英短、布偶', req: true }),
      A(CatField, { label: '毛色', value: color, onChange: setColor, placeholder: '例：橘白、三花、賓士' }),

      // 性別
      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) })),

      // 年齡 (free-form)
      A(CatField, { label: '年齡', value: age, onChange: setAge, placeholder: '例：3 歲、幼貓約 5 個月', hint: '不確定也沒關係' }),

      // ---- 照片圖庫 ----
      A('div', { style: { height: 6 } }),
      A(SecLabel, { hint: photos.length ? `${photos.length} / 8` : '選填' }, '照片圖庫'),
      A('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, marginBottom: 18 } },
        photos.map(id => A('div', { key: id, style: { position: 'relative', aspectRatio: '1 / 1' } },
          A(Ph, { w: '100%', h: '100%', r: 'var(--rmd)', icon: 'image' }),
          A('button', { className: 'ccaTap', onClick: () => removePhoto(id), style: { position: 'absolute', top: 5, right: 5, width: 22, height: 22, borderRadius: '50%', border: 'none', background: 'rgba(46,31,20,.62)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 0 } }, A(Icon, { name: 'x', size: 13, sw: 2.4, color: '#fff' })))),
        photos.length < 8 && A('button', { className: 'ccaTap', onClick: addPhoto, style: { aspectRatio: '1 / 1', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 4, borderRadius: 'var(--rmd)', border: '1.5px dashed var(--line)', background: 'transparent', color: 'var(--ink3)', fontFamily: 'inherit' } },
          A(Icon, { name: 'plus', size: 22 }),
          A('span', { style: { fontSize: 10.5, fontWeight: 700 } }, '加照片'))),

      // ---- 備註 (自由發揮) ----
      A(SecLabel, { hint: '選填' }, '備註'),
      A('textarea', { value: note, onChange: e => setNote(e.target.value), placeholder: '想讓保姆知道的都可以寫：個性、飲食、貓砂、餵藥、怕生或禁忌、緊急聯絡…', rows: 5,
        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.65 } }),
      A('div', { style: { fontSize: 11.5, color: 'var(--ink3)', lineHeight: 1.6, margin: '8px 2px 0' } }, '先自由記錄就好，之後預約時這些備註會一起給到貓人力。')),

    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 });