// pages/cat-detail.jsx — 貓咪檔案 (living profile): weight chart, AI insight timeline, basic/diet tabs.
const { useState: uS2 } = React;
const WEIGHTS = [4.5, 4.6, 4.55, 4.7, 4.7, 5.0];
// 身份辨識（對齊 add-cat 的 MVP 模型）
const CAT = { name: '小橘', breed: '米克斯', color: '橘白', sex: '公', neutered: true, age: '3 歲', note: '親人、愛撒嬌，但有點膽小、怕生。第一次見面動作放慢一點牠就會慢慢靠近。', photos: 4 };

function CatDetail({ onBack = () => {}, go = () => {} }) {
  const [tab, setTab] = uS2('health');
  const [pIdx, setPIdx] = uS2(0);
  const onPScroll = (e) => { const el = e.currentTarget; const i = Math.round(el.scrollLeft / el.clientWidth); if (i !== pIdx) setPIdx(i); };
  const max = 5.2, min = 4.2, W = 300, Hh = 70;
  const pts = WEIGHTS.map((w, i) => [12 + (i * (W - 24)) / (WEIGHTS.length - 1), Hh - ((w - min) / (max - min)) * (Hh - 8) - 4]);
  const path = pts.map((p, i) => (i ? 'L' : 'M') + p[0].toFixed(0) + ' ' + p[1].toFixed(0)).join(' ');
  return A('div', { style: { flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0, background: 'var(--bg)' } },
    A('div', { style: { flex: 1, overflowY: 'auto' } },
      A('div', { style: { position: 'relative' } },
        A('div', { onScroll: onPScroll, style: { display: 'flex', overflowX: 'auto', scrollSnapType: 'x mandatory', WebkitOverflowScrolling: 'touch', scrollbarWidth: 'none' } },
          Array.from({ length: CAT.photos }).map((_, i) =>
            A('div', { key: i, style: { flex: '0 0 100%', scrollSnapAlign: 'start' } }, A(Ph, { w: '100%', h: 200, r: 0, icon: 'image' })))),
        A('button', { className: 'ccaTap', onClick: onBack, style: { position: 'absolute', top: 8, left: 14, width: 38, height: 38, borderRadius: '50%', border: 'none', background: 'rgba(255,255,255,.92)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--ink)' } }, A(Icon, { name: 'chevL', size: 20 })),
        A('button', { style: { position: 'absolute', top: 8, right: 14, width: 38, height: 38, borderRadius: '50%', border: 'none', background: 'rgba(255,255,255,.92)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--ink)' } }, A(Icon, { name: 'edit', size: 19 })),
        CAT.photos > 1 && A('div', { style: { position: 'absolute', top: 12, right: 60, padding: '3px 10px', borderRadius: 999, background: 'rgba(46,31,20,.55)', color: '#fff', fontSize: 11.5, fontWeight: 700, fontVariantNumeric: 'tabular-nums' } }, `${pIdx + 1} / ${CAT.photos}`),
        CAT.photos > 1 && A('div', { style: { position: 'absolute', bottom: 30, left: 0, right: 0, display: 'flex', justifyContent: 'center', gap: 6 } },
          Array.from({ length: CAT.photos }).map((_, i) => A('div', { key: i, style: { width: i === pIdx ? 18 : 6, height: 6, borderRadius: 3, background: i === pIdx ? '#fff' : 'rgba(255,255,255,.55)', transition: 'width .2s' } })))),
      A('div', { style: { padding: '16px 20px 0', background: 'var(--bg)', borderRadius: '22px 22px 0 0', marginTop: -22, position: 'relative' } },
        A('h1', { style: { fontSize: 24, fontWeight: 800, margin: 0 } }, CAT.name),
        A('div', { style: { display: 'flex', gap: 18, marginTop: 16, borderBottom: '1px solid var(--line2)' } },
          [['basic', '基本'], ['health', '健康記錄'], ['ai', 'AI 洞察'], ['diet', '飲食行為']].map(([k, l]) =>
            A('button', { key: k, className: 'ccaTap', onClick: () => setTab(k), style: { border: 'none', background: 'transparent', padding: '0 0 10px', fontFamily: 'inherit', fontSize: 13.5, fontWeight: tab === k ? 800 : 600, color: tab === k ? 'var(--ink)' : 'var(--ink3)', borderBottom: tab === k ? '2.5px solid var(--brand)' : '2.5px solid transparent', marginBottom: -1, whiteSpace: 'nowrap' } }, l)))),
      A('div', { style: { padding: '16px 20px 24px' } },
        tab === 'health' && A('div', { style: { display: 'flex', flexDirection: 'column', gap: 14 } },
          A(Card, { pad: 16 },
            A('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 } },
              A('span', { style: { fontSize: 14, fontWeight: 700 } }, '體重曲線'),
              A('span', { className: 'num', style: { fontSize: 12, fontWeight: 700, color: 'var(--ok)' } }, '＋0.3kg')),
            A('svg', { width: '100%', viewBox: `0 0 ${W} ${Hh}`, style: { display: 'block' } },
              A('path', { d: `${path} L ${pts[pts.length - 1][0]} ${Hh} L ${pts[0][0]} ${Hh} Z`, fill: 'var(--brandSoft)', opacity: .5 }),
              A('path', { d: path, fill: 'none', stroke: 'var(--brand)', strokeWidth: 2.5, strokeLinecap: 'round', strokeLinejoin: 'round' }),
              pts.map((p, i) => A('circle', { key: i, cx: p[0], cy: p[1], r: i === pts.length - 1 ? 4 : 2.5, fill: i === pts.length - 1 ? 'var(--brand)' : '#fff', stroke: 'var(--brand)', strokeWidth: 2 }))),
            A('div', { style: { display: 'flex', justifyContent: 'space-between', fontSize: 10, color: 'var(--ink3)', marginTop: 6 } }, ['1月', '2月', '3月', '4月', '5月', '6月'].map(m => A('span', { key: m }, m)))),
          A(InsightCard, { item: '血檢結果', note: 'BUN 22 · CREA 1.2 正常 · 6/1', onClick: () => {} }),
          A(Card, { pad: 14, style: { display: 'flex', alignItems: 'center', gap: 12 } },
            A('div', { style: { width: 38, height: 38, borderRadius: 11, background: 'var(--sageSoft)', color: 'var(--sage)', display: 'flex', alignItems: 'center', justifyContent: 'center' } }, A(Icon, { name: 'shield', size: 20 })),
            A('div', { style: { flex: 1 } }, A('div', { style: { fontSize: 13.5, fontWeight: 700 } }, '三合一疫苗'), A('div', { style: { fontSize: 11.5, color: 'var(--ink3)' } }, '下次：2025/11 · 阿福獸醫')),
            A('span', { style: { fontSize: 11, color: 'var(--ink3)' } }, '手動編輯'))),
        tab === 'ai' && A('div', { style: { display: 'flex', flexDirection: 'column' } },
          [['drop', '擷取血檢結果', '從「喝水變多」對話上傳的報告，存成血檢數值並標記正常。', '6/1 · sage'],
           ['trend', '更新體重 5.0kg', '你說「幫我記 5 公斤」，已寫入體重曲線。', '6/1 · brand'],
           ['heart', '行為觀察：抓門', '對話中提到半夜抓門，建議行為諮詢。', '5/28 · rose']].map(([ic, t, d, meta], i) => {
            const col = meta.split('· ')[1];
            return A('div', { key: i, style: { display: 'flex', gap: 12 } },
              A('div', { style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } },
                A('div', { style: { width: 34, height: 34, borderRadius: 11, background: `var(--${col}Soft)`, color: col === 'butter' ? '#9A6B12' : `var(--${col})`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 } }, A(Icon, { name: ic, size: 18, sw: 1.9 })),
                i < 2 && A('div', { style: { width: 2, flex: 1, background: 'var(--line2)', margin: '4px 0' } })),
              A('div', { style: { flex: 1, paddingBottom: 18 } },
                A('div', { style: { fontSize: 13.5, fontWeight: 700 } }, t),
                A('p', { style: { fontSize: 12.5, color: 'var(--ink2)', lineHeight: 1.5, margin: '4px 0 6px' } }, d),
                A('span', { className: 'ccaTap', style: { fontSize: 12, color: 'var(--brandDeep)', fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: 3 } }, '回到對話來源', A(Icon, { name: 'arrowR', size: 13, sw: 2.2 }))));
          })),
        tab === 'basic' && A('div', { style: { display: 'flex', flexDirection: 'column', gap: 14 } },
          A(Card, { pad: 16 },
            A('div', { style: { fontSize: 14, fontWeight: 700, marginBottom: 4 } }, '基本資料'),
            [['暱稱', CAT.name], ['品種', CAT.breed], ['毛色', CAT.color], ['性別', CAT.sex], ['已結紮', CAT.neutered ? '是' : '否'], ['年齡', CAT.age]].map(([k, v], i) =>
              A('div', { key: i, style: { display: 'flex', justifyContent: 'space-between', padding: '12px 0', borderTop: '1px solid var(--line2)' } },
                A('span', { style: { fontSize: 13.5, color: 'var(--ink3)' } }, k), A('span', { style: { fontSize: 13.5, fontWeight: 600 } }, v)))),
          A(Card, { pad: 16 },
            A('div', { style: { fontSize: 14, fontWeight: 700, marginBottom: 8 } }, '備註'),
            A('p', { style: { fontSize: 13.5, color: 'var(--ink2)', lineHeight: 1.7, margin: 0 } }, CAT.note))),
        tab === 'diet' && A('div', { style: { display: 'flex', flexDirection: 'column', gap: 12 } },
          A(Card, { pad: 14 }, A('div', { style: { fontSize: 13.5, fontWeight: 700, marginBottom: 6 } }, '主食'), A('div', { style: { fontSize: 13, color: 'var(--ink2)' } }, '皇家腎臟處方飼料 · 每日 2 餐 · 各 40g')),
          A(Card, { pad: 14 }, A('div', { style: { fontSize: 13.5, fontWeight: 700, marginBottom: 6 } }, '行為觀察'), A('div', { style: { fontSize: 13, color: 'var(--ink2)', lineHeight: 1.5 } }, '近期半夜會抓門、討食。AI 建議增加白天活動量。')))) ),
    A('div', { style: { flexShrink: 0, background: 'var(--surface)', borderTop: '1px solid var(--line2)', padding: '12px 20px 8px', display: 'flex', gap: 10 } },
      A(Btn, { variant: 'neutral', icon: 'edit', style: { flex: 1, padding: '13px' } }, '手動編輯'),
      A(Btn, { icon: 'cat', onClick: () => go('chat'), style: { flex: 1, padding: '13px' } }, '問寵答')),
    A(HomeBar, {}));
}

Object.assign(window, { CatDetail });