Review card

import {
  reviewCard,
  reviewList,
  reviewReply,
  ratingStars,
  starsFor,
  starsLabel,
  formatRating,
  formatCount,
  button,
} from '@sportingscouter/ui';
import { Flag, Gift, ThumbsUp } from 'lucide-react';

const list = reviewList({ surface: 'raised' });
const stars = ratingStars({ tone: 'star' });
const reply = reviewReply();

<div class={list.summary()}>
  {counts.incentivised > 0 && (
    <span class={list.summaryItem()}>
      <Gift className="icon-sm" aria-hidden />
      {t('reviews.incentivisedSummary', {
        incentivised: formatCount(counts.incentivised, locale),
        total: formatCount(counts.total, locale),
      })}
    </span>
  )}
  <a class={button({ variant: 'link', size: 'xs' })} href={howCheckedHref}>
    {t('reviews.howChecked')}
  </a>
</div>
<ul class={list.root()} aria-label={t('reviews.listLabel')}>
  {reviews.map((r) => {
    const hasText = Boolean(r.body?.trim());
    const c = reviewCard({
      surface: 'raised',
      detail: 'overall',
      comment: hasText ? 'text' : 'none',
      layout: hasText ? 'card' : 'row',
    });
    const filled = starsFor(r.overall);
    const aria = starsLabel(r.overall, ratingLabels, t('rating.of'));
    const score = (
      <span class={stars.root()} role="img" aria-label={aria}>
        <span class={stars.value()}>{formatRating(r.overall, locale)}</span>
        <span class={stars.stars()}>{'★'.repeat(filled)}{'☆'.repeat(5 - filled)}</span>
      </span>
    );
    const author = (
      <div class={c.identity()}>
        <span class={c.author()}>{r.author ?? t('reviews.anonymous')}</span>
        <time class={c.date()} dateTime={r.dateIso}>{r.dateLabel}</time>
        {r.incentivised && (
          <span class={c.disclosure()}>
            <Gift className="icon-sm" aria-hidden />
            {t('reviews.incentivised')}
          </span>
        )}
      </div>
    );

    return (
      <li key={r.id} class={list.item()}>
        <article class={c.root()} aria-label={`${r.author ?? t('reviews.anonymous')} · ${r.dateLabel}`}>
          {hasText ? (
            <header class={c.header()}>
              <div class={c.headerRow()}>
                {author}
                <div class={c.headerEnd()}>{score}</div>
              </div>
            </header>
          ) : (
            <>
              {author}
              {score}
              <button
                type="button"
                class={[button({ variant: 'ghost', size: 'md' }), c.spacer()].join(' ')}
              >
                <Flag className="icon-sm" aria-hidden />
                {t('reviews.report')}
              </button>
            </>
          )}
          {hasText && <p class={c.body()}>{r.body}</p>}
          {r.organiserReply && (
            <div class={c.thread()}>
              <article class={reply.root()} aria-labelledby={`reply-${r.id}`}>
                <p class={reply.label()} id={`reply-${r.id}`}>
                  {t('reviews.replyFrom', { name: r.organiserName })}
                </p>
                <time class={reply.meta()} dateTime={r.organiserReply.dateIso}>
                  {r.organiserReply.dateLabel}
                </time>
                <p class={reply.body()}>{r.organiserReply.body}</p>
              </article>
            </div>
          )}
          {hasText && (
            <footer class={c.footer()}>
              <button
                type="button"
                class={[button({ variant: 'ghost', size: 'md' }), c.like()].join(' ')}
                aria-pressed={r.likedByViewer}
                onClick={() => toggleLike(r.id)}
              >
                <ThumbsUp className="icon-sm" fill={r.likedByViewer ? 'currentColor' : 'none'} aria-hidden />
                {t('reviews.like')}
                {r.likes > 0 && <span>{r.likes}</span>}
              </button>
              <button
                type="button"
                class={[button({ variant: 'ghost', size: 'md' }), c.spacer()].join(' ')}
              >
                <Flag className="icon-sm" aria-hidden />
                {t('reviews.report')}
              </button>
            </footer>
          )}
        </article>
      </li>
    );
  })}
</ul>

import {
  reviewCard, reviewBreakdown, ratingStars, starsFor, scoreBar, ratingOf, ratingTier, roundRating, formatRating, button,
} from '@sportingscouter/ui';
import { ScoreBar } from '@sportingscouter/ui-react';
import { Flag, Lock, MessageSquareReply } from 'lucide-react';

const card = reviewCard({ detail: 'categories', comment: 'text' });
const bd = reviewBreakdown({ expandable: true, density: 'full' });
const stars = ratingStars({ tone: 'star' });
// Up to two categories below 3.5 (good, fair or poor), lowest first. None: render nothing.
const attention = categories
  .map((cat) => ({ cat, value: roundRating(cat.score) }))
  .filter(({ value }) => value != null && value > 0 && ratingTier(value) <= 3)
  .sort((a, b) => a.value! - b.value!)
  .slice(0, 2);

<article class={card.root()} aria-label={…}>
  <header class={card.header()}>
    <div class={card.headerRow()}>
      {/* identity — same as the public card, including the incentivised disclosure */}
      <div class={card.headerEnd()}>
        <span class={stars.root()} role="img" aria-label={aria}>
          <span class={stars.value()}>{formatRating(review.overall, locale)}</span>
          <span class={stars.stars()}>{'★'.repeat(starsFor(review.overall))}{'☆'.repeat(5 - starsFor(review.overall))}</span>
        </span>
      </div>
    </div>
  </header>
  {review.title && <h4 class={card.title()}>{review.title}</h4>}
  {review.description && <p class={card.description()}>{review.description}</p>}
  <details class={bd.root({ expandable: true })}>
    <summary class={bd.summary()}>
      <span class={bd.summaryMain()}>
        <span class={bd.summaryLabel()}>{t('reviews.categoryScores')}</span>
        <span class={bd.summaryHint()}>{t('reviews.categoryCount', { count: categories.length })}</span>
        {attention.length > 0 && (
          <span class={bd.summaryAttention()}>
            <span class={bd.summaryHint()}>{t('reviews.needsAttention')}</span>
            {attention.map(({ cat, value }) => {
              const bar = scoreBar({ rating: ratingOf(value!), size: 'sm', scale: 'sm', layout: 'cell' });
              return (
                <span key={cat.id} class={bd.summaryAttentionItem()}>
                  <span class={bar.root()}>
                    <span class={bar.label()}>{cat.label}</span>
                    <span class={bar.track()} aria-hidden="true">
                      <span class={bar.fill()} style={{ width: `${(value! / 5) * 100}%` }} />
                    </span>
                    <span class={bar.value()}>{formatRating(cat.score, locale)}</span>
                  </span>
                </span>
              );
            })}
          </span>
        )}
      </span>
      <span class={bd.summaryIcon()} aria-hidden="true">{/* chevron-down / chevron-up */}</span>
    </summary>
    <div class={bd.panel()}>
      <ul class={bd.list({ density: 'full' })}>
        {categories.map((cat) => (
          <li key={cat.id} class={bd.item()}>
            <ScoreBar layout="stacked" label={cat.label} description={cat.hint} value={cat.score} />
          </li>
        ))}
      </ul>
    </div>
  </details>
  <footer class={card.footer()}>
    <button type="button" class={[button({ variant: 'ghost', size: 'xs' }), card.spacer()].join(' ')}>
      <MessageSquareReply className="icon-sm" aria-hidden />
      {t('reviews.replyPublicly')}
    </button>
    {canReplyInPrivate && (   {/* the private thread is open, or none exists and the review is held; never on a closed one */}
      <button type="button" class={button({ variant: 'ghost', size: 'xs' })}>
        <Lock className="icon-sm" aria-hidden />
        {t('reviews.replyInPrivate')}
      </button>
    )}
    <button type="button" class={button({ variant: 'ghost', size: 'xs' })}>
      <Flag className="icon-sm" aria-hidden />
      {t('reviews.report')}
    </button>
  </footer>
</article>

import { reviewCard, reviewReply, statusDot } from '@sportingscouter/ui';
import { Clock, EyeOff, Globe, Lock, Paperclip, ShieldCheck } from 'lucide-react';

const card = reviewCard({ detail: 'categories', comment: 'text' });
const pub = reviewReply({ visibility: 'public' });
const priv = reviewReply({ visibility: 'private' });

{/* PUBLIC reply. The audience line is for the organiser's tools; a public list omits it. */}
{review.publicReply && (
  <div class={card.thread()}>
    <article class={pub.root()} aria-labelledby={`reply-${review.id}`}>
      <p class={pub.label()} id={`reply-${review.id}`}>{t('reviews.replyFrom', { name: review.organiserName })}</p>
      <p class={pub.audience()}>
        {audience.team ? <EyeOff className="icon-sm" aria-hidden /> : audience.pending ? <Clock className="icon-sm" aria-hidden /> : <Globe className="icon-sm" aria-hidden />}
        {t(audience.key)}   {/* audienceTeam · audiencePending · audiencePublic */}
      </p>
      <time class={pub.meta()} dateTime={review.publicReply.dateIso}>{review.publicReply.dateLabel}</time>
      <p class={pub.body()}>{review.publicReply.body}</p>
    </article>
  </div>
)}

{/* PRIVATE thread: a chat of the dispute (today). Only for this review's organiser, that athlete and
    Sporting Scouter. Never in a public list, embed or widget, and the API must not send it to
    anyone else. */}
{viewer.canSeePrivateThread && review.privateThread.length > 0 && (
  <section class={card.privateThread()} aria-labelledby={`pt-${review.id}`}>
    <h4 class={card.privateTitle()} id={`pt-${review.id}`}>
      <span class={priv.audience()}><Lock className="icon-sm" aria-hidden />{t('reviews.privateThread')}</span>
      <span class={card.privateHint()}>{t('reviews.privateOnlyYouAnd', { name: review.athleteName })}</span>
    </h4>
    <p class={card.privateStatus()}>
      <span class={statusDot({ tone: dispute.closed ? 'muted' : 'primary' })} aria-hidden="true" />
      {t(`reviews.dispute.${dispute.status}`, { date: dispute.deadlineLabel })}
    </p>
    {review.privateThread.map((m) => {
      // `from` is the viewer's side: 'self' (their own message), 'other', or 'platform' (Sporting Scouter).
      const msg = reviewReply({ visibility: 'private', from: m.from });
      return (
        <article key={m.id} class={msg.root()} aria-labelledby={`msg-${m.id}`}>
          <p class={msg.label()} id={`msg-${m.id}`}>
            {m.from === 'platform' && <ShieldCheck className="icon-sm" aria-hidden />}
            {m.from === 'self' ? t('reviews.senderYou', { name: m.senderName }) : m.senderName}
          </p>
          <p class={msg.event()}>{t(`reviews.event.${m.type}`)}</p>
          {m.text && <p class={msg.body()}>{m.text}</p>}
          {m.file && (
            <p class={msg.attachment()}>
              <Paperclip className="icon-sm" aria-hidden />{m.file.name} · {m.file.type}
            </p>
          )}
          <time class={msg.meta()} dateTime={m.dateIso}>{m.dateLabel}</time>
        </article>
      );
    })}
  </section>
)}