/* Reviews — the community review feed. */
(function () {
  const D = window.WeedReviewDesignSystem_dcaedb;
  const { ReviewCard, Select, LeafFall } = D;
  const WR = window.WR_DATA;
  const { useState } = React;

  const Wrap = ({ children, style }) => (
    <div style={{ maxWidth: 'var(--container-narrow)', margin: '0 auto', padding: '0 var(--space-7)', ...style }}>{children}</div>
  );

  function ReviewsPage({ navigate }) {
    const [sort, setSort] = useState('Newest');
    const all = [];
    Object.entries(WR.reviews).forEach(([pid, list]) => {
      const p = WR.products[pid];
      list.forEach((r, i) => all.push({ ...r, product: p ? p.name : pid, pid, recency: i }));
    });
    WR.recentReviews.forEach((r, i) => all.push({ ...r, helpful: r.helpful || 0, recency: -10 + i }));

    let rows = all.slice();
    if (sort === 'Newest') rows.sort((a, b) => a.recency - b.recency);
    else if (sort === 'Highest') rows.sort((a, b) => b.overall - a.overall);
    else if (sort === 'Lowest') rows.sort((a, b) => a.overall - b.overall);
    else rows.sort((a, b) => (b.helpful || 0) - (a.helpful || 0));

    return (
      <div style={{ paddingBottom: 80 }}>
        <section style={{ position: 'relative', background: 'radial-gradient(120% 140% at 85% 0%, #24503F 0%, #1B3B2F 60%, #14301F 100%)', overflow: 'hidden' }}>
          <LeafFall travel={320} count={13} />
          <Wrap style={{ position: 'relative', zIndex: 1, padding: '44px var(--space-7)' }}>
            <div className="u-label" style={{ color: 'var(--leaf-400)', marginBottom: 10 }}>Community</div>
            <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-4xl)', fontWeight: 600, color: '#F3EEE2', letterSpacing: '-0.02em' }}>Reviews</h1>
            <p style={{ color: 'var(--text-on-forest-muted)', fontSize: 15, marginTop: 10 }}>Every leaf rating on WeedReview, fresh from the community.</p>
          </Wrap>
        </section>

        <Wrap style={{ paddingTop: 24 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap', marginBottom: 18 }}>
            <span className="u-tnum" style={{ fontSize: 13, color: 'var(--text-faint)' }}>{rows.length} reviews</span>
            {rows.length > 0 && <div style={{ width: 190 }}><Select icon="arrow-up-down" options={['Newest', 'Most Helpful', 'Highest', 'Lowest']} value={sort} onChange={(e) => setSort(e.target.value)} /></div>}
          </div>
          {rows.length ? (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
              {rows.map((r, i) => (
                <ReviewCard key={i} username={r.username} date={r.date} product={r.product} verifiedPurchase={r.verified}
                  overall={r.overall} helpful={r.helpful || 0} attributes={r.attributes} text={r.text} />
              ))}
            </div>
          ) : (
            <div style={{ textAlign: 'center', padding: '56px 20px', border: '1.5px dashed var(--border-default)', borderRadius: 'var(--radius-lg)' }}>
              <p style={{ fontWeight: 600, fontSize: 16, color: 'var(--text-heading)', margin: '0 0 6px' }}>No reviews yet</p>
              <p style={{ color: 'var(--text-muted)', fontSize: 14, lineHeight: 1.5, maxWidth: 420, margin: '0 auto 18px' }}>
                Every brand and product on WeedReview is real — and none of them have been rated yet. The first review on the site could be yours.
              </p>
              <button onClick={() => navigate('submit')} style={{ background: 'var(--cta-bg, var(--leaf-600))', color: '#fff', border: 'none', borderRadius: 'var(--radius-pill)', padding: '10px 22px', fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 14, cursor: 'pointer' }}>
                Write the first review
              </button>
            </div>
          )}
        </Wrap>
      </div>
    );
  }
  window.ReviewsPage = ReviewsPage;
})();