// 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];

function CatDetail({ onBack = () => {}, go = () => {} }) {
  const [tab, setTab] = uS2('health');
  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(Ph, { w: '100%', h: 170, r: 0, icon: 'paw', label: '貓咪照片' }),
        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 }))),
      A('div', { style: { padding: '16px 20px 0', background: 'var(--bg)', borderRadius: '22px 22px 0 0', marginTop: -22, position: 'relative' } },
        A('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } },
          A('h1', { style: { fontSize: 24, fontWeight: 800, margin: 0 } }, '貓咪檔案'),
          A(Tag, { color: 'brand' }, '米克斯 · 公'), A(Tag, { color: 'ink' }, '3 歲')),
        A('div', { style: { display: 'flex', gap: 8, marginTop: 12, marginBottom: 4 } },
          [['weight', '5.0kg', '體重'], ['個性', '親人愛撒嬌', ''], ['已絕育', '✓', '']].map(([a, b, c], i) =>
            A('div', { key: i, style: { flex: 1, background: 'var(--surface)', border: '1px solid var(--line2)', borderRadius: 14, padding: '10px 12px', textAlign: 'center' } },
              A('div', { className: i === 0 ? 'num' : '', style: { fontSize: i === 0 ? 17 : 13.5, fontWeight: 800, color: 'var(--ink)' } }, b),
              A('div', { style: { fontSize: 10.5, color: 'var(--ink3)', marginTop: 3 } }, c || a))),
        ),
        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: 2 } },
          [['暱稱', '（尚未命名）'], ['品種', '米克斯（橘貓）'], ['性別', '公 · 已絕育'], ['生日', '2022 / 03（約 3 歲）'], ['晶片號碼', '900********1234'], ['個性', '親人、愛撒嬌、有點膽小']].map(([k, v], i) =>
            A('div', { key: i, style: { display: 'flex', justifyContent: 'space-between', padding: '13px 2px', borderTop: i ? '1px solid var(--line2)' : 'none' } },
              A('span', { style: { fontSize: 13.5, color: 'var(--ink3)' } }, k), A('span', { style: { fontSize: 13.5, fontWeight: 600 } }, v)))),
        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 });