// pages/inbox.jsx — 訊息: one role-aware inbox.
// Owner: two-tab segmented control — 與人對話 / 寵答 AI — replacing the old collapsing AI folder,
//        so a growing pile of AI sessions has its own filtered, scrollable history.
// 貓人力 (pro): a single 與飼主 list (no AI side).
const { useState: uSIB } = React;

const INBOX_OWNER_PEOPLE = [
  { id: 'p1', kind: 'person', name: '林依婷', last: '我到了喔～都吃完飯了 🐱', time: '剛剛', serving: true, unread: 2 },
  { id: 'p2', kind: 'person', name: '阿福獸醫', last: '疫苗紀錄已更新到活檔案', time: '昨天', unread: 0 },
  { id: 'p3', kind: 'person', name: '陳家保姆', last: '謝謝預約～再麻煩確認時間 🙏', time: '5/06', unread: 0 },
];
const INBOX_OWNER_AI = [
  { id: 'a1', kind: 'ai', name: '出差找保姆', last: '已幫你找到 4 位有空的保姆', time: '10:24', unread: 2 },
  { id: 'a2', kind: 'ai', name: '喝水變多怎麼辦', last: '血檢報告我看過了，腎指數正常', time: '昨天', unread: 0 },
  { id: 'a3', kind: 'ai', name: '體重記錄', last: '已更新體重 5.0kg', time: '週一', unread: 0 },
  { id: 'a4', kind: 'ai', name: '血檢追蹤', last: 'BUN / CREA 都在正常範圍', time: '5/28', unread: 0 },
  { id: 'a5', kind: 'ai', name: '找結紮醫院', last: '附近 3 間評價整理給你了', time: '5/20', unread: 0 },
  { id: 'a6', kind: 'ai', name: '換糧過渡', last: '7 天換糧表已存到活檔案', time: '5/12', unread: 0 },
  { id: 'a7', kind: 'ai', name: '美容預約', last: '已幫你預約 6/2 洗澡', time: '5/03', unread: 0 },
];
const INBOX_PRO = [
  { id: 1, kind: 'person', name: '王小美', last: '太感謝了！晚上比較親人', time: '剛剛', serving: true, unread: 1 },
  { id: 2, kind: 'person', name: '李先生', last: '黑嚕今天有乖乖吃飯嗎？', time: '11:20', serving: false, unread: 0 },
  { id: 3, kind: 'person', name: '張小姐', last: '好的，麻煩你了 🙏', time: '昨天', serving: false, unread: 0 },
];

// two-tab segmented control
function InboxSeg({ tabs, active, onChange, accent }) {
  return A('div', { style: {
    display: 'flex', gap: 3, padding: 3, borderRadius: 'var(--rpill)', background: 'var(--bgSoft)' } },
    tabs.map(([k, l, n]) => A('button', { key: k, className: 'ccaTap', onClick: () => onChange(k), style: {
      flex: 1, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
      padding: '9px 4px', border: 'none', borderRadius: 'var(--rpill)', fontFamily: 'inherit',
      fontSize: 13.5, fontWeight: active === k ? 800 : 600,
      background: active === k ? 'var(--surface)' : 'transparent',
      color: active === k ? 'var(--ink)' : 'var(--ink3)',
      boxShadow: active === k ? '0 1px 4px rgba(46,31,20,.08)' : 'none' } },
      l,
      (n > 0) && A('span', { className: 'num', style: {
        minWidth: 18, height: 18, padding: '0 5px', borderRadius: 9,
        background: active === k ? accent : 'var(--line)', color: active === k ? '#fff' : 'var(--ink3)',
        fontSize: 11, fontWeight: 800, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' } }, n))));
}

function Inbox({ role = 'owner', onNav = () => {}, go = () => {}, variant = 'notch' }) {
  const isPro = role === 'pro';
  const accent = isPro ? 'var(--sage)' : 'var(--brand)';
  const [tab, setTab] = uSIB('people');

  const people = isPro ? INBOX_PRO : INBOX_OWNER_PEOPLE;
  const ai = INBOX_OWNER_AI;
  const peopleUnread = people.reduce((s, i) => s + i.unread, 0);
  const aiUnread = ai.reduce((s, i) => s + i.unread, 0);
  const list = isPro ? people : (tab === 'ai' ? ai : people);

  // one conversation row inside a carded section
  const convRow = (i, idx) => A('div', { key: i.id, className: 'ccaTap', onClick: () => go(i.kind === 'ai' ? 'chat' : (isPro ? 'pchat' : 'personChat')), style: {
    display: 'flex', gap: 12, alignItems: 'center', padding: '13px 14px',
    borderTop: idx ? '1px solid var(--line2)' : 'none' } },
    A('div', { style: { position: 'relative', flexShrink: 0 } },
      i.kind === 'ai' ? A(Avatar, { size: 46, kind: 'ai' }) : A(Avatar, { size: 46, kind: 'person', style: { borderRadius: 14 } })),
    A('div', { style: { flex: 1, minWidth: 0 } },
      A('div', { style: { display: 'flex', alignItems: 'center', gap: 6 } },
        i.kind === 'ai' && A('span', { style: { fontSize: 9, fontWeight: 800, color: 'var(--brandDeep)', background: 'var(--brandSoft)', padding: '2px 6px', borderRadius: 6, flexShrink: 0 } }, 'AI'),
        A('span', { style: { fontSize: 14.5, fontWeight: 700, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, i.name),
        i.serving && A(Tag, { color: 'ok' }, '服務中')),
      A('div', { style: { fontSize: 12.5, color: 'var(--ink3)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', marginTop: 3 } }, i.last)),
    A('div', { style: { textAlign: 'right', flexShrink: 0 } },
      A('div', { style: { fontSize: 11, color: 'var(--ink3)' } }, i.time),
      i.unread > 0 && A('div', { className: 'num', style: { marginTop: 6, marginLeft: 'auto', width: 18, height: 18, borderRadius: 9, background: accent, color: '#fff', fontSize: 11, fontWeight: 800, display: 'flex', alignItems: 'center', justifyContent: 'center' } }, i.unread)));

  return A('div', { style: { flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 } },
    A('div', { style: { padding: '4px 20px 10px', flexShrink: 0, display: 'flex', flexDirection: 'column', gap: 12 } },
      A('h1', { style: { fontSize: 24, fontWeight: 800, letterSpacing: -0.5, margin: '4px 0 0' } }, '訊息'),
      // owner gets the two-tab split; pro has no AI side
      !isPro && A(InboxSeg, { active: tab, onChange: setTab, accent,
        tabs: [['people', '與人對話', peopleUnread], ['ai', '寵答 AI', aiUnread]] })),
    A(Scroll, { style: { padding: '8px 16px 16px' } },
      // AI tab gets a one-line helper so the history feels intentional, not a dump
      (!isPro && tab === 'ai') && A('div', { style: { fontSize: 11.5, color: 'var(--ink3)', margin: '0 6px 8px', lineHeight: 1.5 } },
        `${ai.length} 個 AI 話題 · 每個對話都會自動整理重點到活檔案`),
      A('div', { style: { background: 'var(--surface)', border: '1px solid var(--line2)', borderRadius: 'var(--rlg)', overflow: 'hidden' } },
        list.map((i, idx) => convRow(i, idx)))),
    isPro ? A(BottomNavPro, { active: 'msg', onNav }) : A(BottomNavOwner, { active: 'inbox', onNav, variant }));
}

const ProMessages = (props) => A(Inbox, { role: 'pro', ...props });

Object.assign(window, { Inbox, ProMessages });