// pages/provider-reviews.jsx — 飼主評價: full reviews list for a provider (rating summary,
// star distribution, filterable list). Reached from provider-detail's reviews entry.
const { useState } = React;

const REVIEW_DIST = [['5', 95], ['4', 4], ['3', 1], ['2', 0], ['1', 0]];
const REVIEWS = [
  { name: '陳小姐', rating: 5, date: '2025/05', text: '依婷很細心，每次都拍很多照片，我家貓本來怕生，現在看到她超親人！', tags: ['準時', '拍照回報'], photos: true },
  { name: '林先生', rating: 5, date: '2025/05', text: '出差一整週都很放心，每天都有即時回報，貓砂也清得超乾淨。', tags: ['乾淨'] },
  { name: '王小姐', rating: 4, date: '2025/04', text: '整體很好，餵藥都有按時。唯一小建議是訊息可以再回快一點～', tags: [] },
  { name: '張先生', rating: 5, date: '2025/04', text: '家裡是高齡貓，依婷會特別注意飲水量跟食慾，很專業也很有耐心。', tags: ['專業', '高齡貓'] },
  { name: '李小姐', rating: 5, date: '2025/03', text: '第一次用就遇到好保姆，主子完全不緊張，下次出國還要再約！', tags: ['親切'] },
];

function ProviderReviews({ onBack = () => {} }) {
  const [f, setF] = useState('全部');
  return A('div', { style: { flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0, background: 'var(--bg)' } },
    A(AppBar, { title: '飼主評價', sub: '林依婷 · 到府保姆', onLeft: onBack }),
    A(Scroll, { style: { padding: '4px 20px 16px' } },
      // ---- summary: big score + star distribution ----
      A(Card, { pad: 16, style: { display: 'flex', gap: 18, alignItems: 'center', marginBottom: 14 } },
        A('div', { style: { textAlign: 'center', flexShrink: 0 } },
          A('div', { className: 'num', style: { fontSize: 40, fontWeight: 900, letterSpacing: -1, lineHeight: 1 } }, '4.9'),
          A('div', { style: { marginTop: 4 } }, A(Stars, { value: 5, size: 13 })),
          A('div', { style: { fontSize: 11, color: 'var(--ink3)', marginTop: 4 } }, '128 則')),
        A('div', { style: { flex: 1 } },
          REVIEW_DIST.map(([s, pct], i) => A('div', { key: s, style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: i < 4 ? 7 : 0 } },
            A('span', { style: { fontSize: 11, color: 'var(--ink3)', width: 20, display: 'flex', alignItems: 'center', gap: 2 } }, s, A(Icon, { name: 'star', size: 10, fill: true, color: 'var(--rose)' })),
            A('div', { style: { flex: 1, height: 6, borderRadius: 3, background: 'var(--bgSoft)', overflow: 'hidden' } },
              A('div', { style: { width: pct + '%', height: '100%', background: 'var(--rose)', borderRadius: 3 } })),
            A('span', { className: 'num', style: { fontSize: 11, color: 'var(--ink3)', width: 30, textAlign: 'right' } }, pct + '%'))))),
      // ---- filters ----
      A('div', { style: { display: 'flex', gap: 8, overflowX: 'auto', paddingBottom: 14 } },
        ['全部', '最新', '最高評分', '有照片'].map(c => A(Chip, { key: c, active: f === c, onClick: () => setF(c) }, c))),
      // ---- list ----
      A('div', { style: { display: 'flex', flexDirection: 'column', gap: 12 } },
        REVIEWS.map((r, i) => A(Card, { key: i, pad: 14 },
          A('div', { style: { display: 'flex', gap: 11, alignItems: 'center' } },
            A(Avatar, { size: 38, kind: 'person' }),
            A('div', { style: { flex: 1 } },
              A('div', { style: { fontSize: 13.5, fontWeight: 700 } }, r.name),
              A('div', { style: { display: 'flex', alignItems: 'center', gap: 6, marginTop: 2 } },
                A(Stars, { value: r.rating, size: 11 }),
                A('span', { style: { fontSize: 11, color: 'var(--ink3)' } }, r.date)))),
          A('p', { style: { fontSize: 13, color: 'var(--ink2)', lineHeight: 1.6, margin: '10px 0 0' } }, r.text),
          r.photos && A('div', { style: { display: 'flex', gap: 8, marginTop: 10 } },
            [0, 1].map(j => A(Ph, { key: j, w: 78, h: 78, r: 12, icon: 'image' }))),
          r.tags.length > 0 && A('div', { style: { display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 10 } },
            r.tags.map(t => A('span', { key: t, style: { fontSize: 11, fontWeight: 600, color: 'var(--ink2)', background: 'var(--bgSoft)', padding: '4px 10px', borderRadius: 'var(--rpill)' } }, t)))))) ),
    A(HomeBar, {}));
}

Object.assign(window, { ProviderReviews });