/* ============================================================================
   MOWDEW LIVE DEMO — "Reviews" (the 6th synchronized flow)
   Fires at PEAK TRUST — right after the invoice is paid. The homeowner is
   asked once; the sentiment FORKS to protect the rating:
     thumbs-up   → posts a public 5★ review → owner notified (public)
     thumbs-down → a PRIVATE fix-it note → owner notified (private, off the
                   public rating)
   World/actions/tracker/hints live in Mowdew Live Demo.html; per-phone UI
   here, mounted from the demo phone shells.
   ========================================================================= */

function Stars({ n = 5, size = 16, color = '#7C6FF0' }) {
  return (
    <span style={{ display: 'inline-flex', gap: 2 }}>
      {Array.from({ length: n }).map((_, i) => <Icon key={i} name="star" size={size} style={{ color }} />)}
    </span>
  );
}

/* ─── HOMEOWNER · the ask + sentiment fork (sits on the visit feed) ──── */
function HomeReviewCard({ world, act }) {
  // only at peak trust — once the month is paid
  if (world.invoice !== 'paid') return null;
  const r = world.review;

  if (!r) {
    return (
      <div style={{ padding: '10px 18px 0' }}>
        <div className="card" style={{ padding: 15, borderColor: 'var(--green-100)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <Sprout size={46} mood="happy" />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 15.5, letterSpacing: '-0.02em' }}>Happy with Marco's work?</div>
              <div style={{ fontSize: 12, color: 'var(--ink-500)', marginTop: 2 }}>Balanced water, clean pool — looked like a good one.</div>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 9, marginTop: 12 }}>
            <button onClick={act.homeReviewUp} className="btn btn-primary" style={{ flex: 1, minHeight: 44 }}><Icon name="thumbs-up" size={17} />Yes, great</button>
            <button onClick={act.homeReviewDown} className="btn btn-secondary" style={{ flex: 1, minHeight: 44 }}><Icon name="thumbs-down" size={17} />Not really</button>
          </div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9.5, letterSpacing: '.04em', color: 'var(--ink-400,#A8A498)', marginTop: 10 }}>WE ASK SPARINGLY · ONCE IN A WHILE</div>
        </div>
      </div>
    );
  }

  if (r === 'up') {
    return (
      <div style={{ padding: '10px 18px 0' }}>
        <div className="card" style={{ padding: 16, borderColor: 'var(--green-100)', background: 'var(--green-50)', textAlign: 'center' }}>
          <Sprout size={60} mood="happy" />
          <div style={{ display: 'flex', justifyContent: 'center', marginTop: 6 }}><Stars color="#7C6FF0" /></div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 16, marginTop: 6 }}>Thank you!</div>
          <div style={{ fontSize: 12.5, color: 'var(--ink-700)', marginTop: 4, lineHeight: 1.45, maxWidth: 260, margin: '4px auto 0' }}>Posted to Google — it helps Marco &amp; Diego reach more neighbors.</div>
        </div>
      </div>
    );
  }
  // private fix-it
  return (
    <div style={{ padding: '10px 18px 0' }}>
      <div className="card" style={{ padding: 16, textAlign: 'center' }}>
        <Dewy size={56} mood="happy" />
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 16, marginTop: 6 }}>Thanks — Diego will make it right</div>
        <div style={{ fontSize: 12.5, color: 'var(--ink-700)', marginTop: 4, lineHeight: 1.45, maxWidth: 280, margin: '4px auto 0' }}>Sent privately to Diego — he reaches out personally. Never posted publicly.</div>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 9, fontSize: 11.5, color: 'var(--ink-500)' }}><Icon name="lock" size={13} />Stays between you and Diego</div>
      </div>
    </div>
  );
}

/* ─── OWNER · the review landing (sits in the Inbox tab) ─────────────── */
function OwnerReviewCard({ world }) {
  const r = world.review;
  if (!r) return null;
  if (r === 'up') {
    return (
      <div style={{ padding: '14px 18px 0' }}>
        <SectionHead tone="green" icon="star" style={{ marginBottom: 10 }} meta="public">Reviews</SectionHead>
        <div className="card" style={{ padding: 14, borderColor: 'var(--green-100)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
            <PaperAvatar who="home" size={36} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontWeight: 700, fontSize: 13.5 }}>Emma Walsh</div>
              <div style={{ marginTop: 2 }}><Stars size={14} color="#7C6FF0" /></div>
            </div>
            <DmMark tone="green">POSTED · GOOGLE</DmMark>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 12, background: 'var(--green-50)', borderRadius: 11, padding: '11px 13px', fontSize: 12.5, fontWeight: 600, color: 'var(--green-800)', lineHeight: 1.45 }}>
            <Icon name="check-circle" size={16} style={{ flexShrink: 0 }} />A new 5★ review just went live — straight to your Google listing.
          </div>
        </div>
      </div>
    );
  }
  return (
    <div style={{ padding: '14px 18px 0' }}>
      <SectionHead tone="violet" icon="star" style={{ marginBottom: 10 }} meta="private">Reviews</SectionHead>
      <div className="card" style={{ padding: 14 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
          <PaperAvatar who="home" size={36} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontWeight: 700, fontSize: 13.5 }}>Emma Walsh</div>
            <div style={{ fontSize: 11.5, color: 'var(--ink-500)' }}>Private feedback · just now</div>
          </div>
          <DmMark tone="yellow" pulse>FIX-IT NOTE</DmMark>
        </div>
        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8, marginTop: 12, background: 'var(--ink-50)', borderRadius: 11, padding: '11px 13px', fontSize: 12.5, color: 'var(--ink-700)', lineHeight: 1.45 }}>
          <Icon name="lock" size={15} style={{ color: 'var(--ink-500)', flexShrink: 0, marginTop: 1 }} />Came to you privately — off your public rating, so you can make it right first.
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Stars, HomeReviewCard, OwnerReviewCard });
