// pages/write-review.jsx — 撰寫評價: owner leaves a review after a completed booking.
// Reached from my-bookings.jsx ("評價" button on a done & un-rated booking).
const { useState: uSR } = React;

const RATE_LABEL = ['', '不太滿意', '普通', '還不錯', '很好', '超棒！'];
const REVIEW_TAGS = ['準時', '拍照回報', '乾淨整潔', '專業細心', '親切有耐心', '回覆即時', '貓咪很安心'];

// interactive star picker
function StarPick({ value, onPick }) {
  return A('div', { style: { display: 'flex', gap: 8 } },
    [1, 2, 3, 4, 5].map(i =>
      A('button', { key: i, className: 'ccaTap', onClick: () => onPick(i), style: {
        border: 'none', background: 'transparent', padding: 0, cursor: 'pointer', lineHeight: 0,
        transform: value === i ? 'scale(1.05)' : 'none' } },
        A(Icon, { name: 'star', size: 40, fill: true, color: i <= value ? 'var(--rose)' : '#EADCC4' }))));
}

function WriteReview({ onBack = () => {}, go = () => {} }) {
  const [rating, setRating] = uSR(5);
  const [tags, setTags] = uSR(['準時', '拍照回報']);
  const [text, setText] = uSR('');
  const [anon, setAnon] = uSR(false);
  const [sent, setSent] = uSR(false);

  const toggleTag = (t) => setTags(tags.includes(t) ? tags.filter(x => x !== t) : [...tags, t]);

  // ---- success state ----
  if (sent) {
    return A('div', { style: { flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0, background: 'var(--bg)' } },
      A(AppBar, { title: '撰寫評價', onLeft: onBack }),
      A('div', { style: { flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 18, padding: '0 32px', textAlign: 'center' } },
        A('div', { className: 'ccaPop', style: { width: 88, height: 88, borderRadius: '50%', background: 'var(--brandSoft)', display: 'flex', alignItems: 'center', justifyContent: 'center' } },
          A(Icon, { name: 'heart', size: 40, fill: true, color: 'var(--brand)' })),
        A('div', { className: 'ccaRise' },
          A('h2', { style: { fontSize: 21, fontWeight: 800, margin: '0 0 8px', letterSpacing: -0.4 } }, '謝謝你的評價！'),
          A('p', { style: { fontSize: 13.5, color: 'var(--ink2)', lineHeight: 1.6, margin: 0 } }, '你的回饋會幫助其他飼主，\n也讓林依婷做得更好 🐾')),
        A(Btn, { full: true, onClick: () => go('mybk'), style: { maxWidth: 240, marginTop: 6 } }, '回到我的預約')),
      A(HomeBar, {}));
  }

  // ---- form state ----
  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 20px' } },
      // ---- provider being reviewed ----
      A(Card, { pad: 14, style: { display: 'flex', gap: 12, alignItems: 'center', marginBottom: 16 } },
        A(Avatar, { size: 46, kind: 'person' }),
        A('div', { style: { flex: 1, minWidth: 0 } },
          A('div', { style: { fontSize: 14.5, fontWeight: 700 } }, '林依婷 · 到府保姆'),
          A('div', { style: { fontSize: 12, color: 'var(--ink3)', marginTop: 2 } }, '5/08 完成 · 連續 2 天到府餵食')),
        A(Tag, { color: 'ink' }, '已完成')),

      // ---- rating ----
      A(Card, { pad: 20, style: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12, marginBottom: 14 } },
        A('div', { style: { fontSize: 15, fontWeight: 700 } }, '這次服務如何？'),
        A(StarPick, { value: rating, onPick: setRating }),
        A('div', { style: { fontSize: 13.5, fontWeight: 700, color: 'var(--brandDeep)', minHeight: 18 } }, RATE_LABEL[rating])),

      // ---- quick tags ----
      A('div', { style: { fontSize: 13.5, fontWeight: 700, margin: '4px 2px 10px' } }, '哪些地方做得好？'),
      A('div', { style: { display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 18 } },
        REVIEW_TAGS.map(t => A(Chip, { key: t, active: tags.includes(t), onClick: () => toggleTag(t),
          icon: tags.includes(t) ? 'check' : undefined }, t))),

      // ---- free text ----
      A('div', { style: { fontSize: 13.5, fontWeight: 700, margin: '0 2px 10px' } }, '想說的話'),
      A('div', { style: { background: 'var(--surface)', borderRadius: 'var(--rlg)', border: '1px solid var(--line2)', padding: 14, marginBottom: 18 } },
        A('textarea', { value: text, onChange: (e) => setText(e.target.value),
          placeholder: '分享一下這次的體驗，給其他飼主一點參考～', rows: 4, style: {
            width: '100%', border: 'none', outline: 'none', resize: 'none', background: 'transparent',
            fontFamily: 'inherit', fontSize: 13.5, lineHeight: 1.6, color: 'var(--ink)' } }),
        A('div', { style: { display: 'flex', gap: 8, marginTop: 6 } },
          [0, 1].map(j => A('button', { key: j, className: 'ccaTap', style: {
            width: 64, height: 64, borderRadius: 14, border: '1.5px dashed var(--line)', background: 'var(--bgSoft)',
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 3,
            color: 'var(--ink3)', padding: 0 } },
            A(Icon, { name: j === 0 ? 'camera' : 'image', size: 20, color: 'var(--ink3)', sw: 1.6 }),
            A('span', { style: { fontSize: 9, fontWeight: 600 } }, j === 0 ? '拍照' : '相簿'))))),

      // ---- anonymous ----
      A(Card, { pad: 14, style: { display: 'flex', alignItems: 'center', gap: 12 } },
        A('div', { style: { width: 38, height: 38, borderRadius: '50%', background: 'var(--bgSoft)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 } },
          A(Icon, { name: 'shield', size: 19, color: 'var(--ink2)' })),
        A('div', { style: { flex: 1 } },
          A('div', { style: { fontSize: 13.5, fontWeight: 700 } }, '匿名發表'),
          A('div', { style: { fontSize: 11.5, color: 'var(--ink3)', marginTop: 1 } }, '只顯示姓氏，例如「陳小姐」')),
        A(Toggle, { on: anon, onClick: () => setAnon(!anon) }))),

    // ---- submit bar ----
    A('div', { style: { flexShrink: 0, padding: '12px 20px', borderTop: '1px solid var(--line2)', background: 'var(--bg)' } },
      A(Btn, { full: true, onClick: () => setSent(true) }, '送出評價')),
    A(HomeBar, {}));
}

Object.assign(window, { WriteReview });