// ─────────────────────────────────────────────────────────────────────
// COLLECTION MANAGER — Review Queue.
//
// Where contributor submissions land. The manager opens each one, reviews
// it, adjusts if needed, approves, and files it to the archive. A receipt
// opens the full Upload Receipt review/allocate workflow (unchanged after
// the review step); other kinds get a lightweight review-and-approve.
// ─────────────────────────────────────────────────────────────────────

const { useState: useRQ } = React;

// Shared top bar (mirrors OpsTopBar from the operations hub).
function RqBar({ eyebrow, title, onClose, badge }) {
  return (
    <div style={{
      padding: '10px 18px 12px', background: P.ink, flex: '0 0 auto',
      display: 'flex', alignItems: 'center', gap: 12, borderBottom: `1px solid ${P.graphite}`,
    }}>
      <button onClick={onClose} aria-label="Back" style={{
        background: P.gold, border: 'none', borderRadius: 999, width: 34, height: 34,
        flexShrink: 0, color: P.ink, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"><path d="M19 12H5M5 12l6-6M5 12l6 6" /></svg>
      </button>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontFamily: T.display, fontWeight: 600, fontSize: 15, letterSpacing: '0.02em', color: P.paper, lineHeight: 1.1 }}>{title}</div>
        <RcMono size={8.5} color={P.gold} tracking="0.16em" style={{ marginTop: 3, display: 'block' }}>{eyebrow}</RcMono>
      </div>
      <CAMonogram size={20} color={P.paper} stroke={1.6} />
    </div>
  );
}

// Contributor identity chip used on each queue row.
function ByLine({ initials, name, org }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
      <RcMono size={8} color={P.bone} tracking="0.08em" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{name} · {org}</RcMono>
    </span>
  );
}

function ReviewQueue({ onBack, onOpenItem, mode = 'tasks', removedIds = [] }) {
  const expensesOnly = mode === 'expenses';
  // Inbox is reserved for incoming contributor submissions awaiting review
  // before they're committed to the archive — scheduled/system tasks (like
  // the expense-report reminder) don't belong here.
  const items = (expensesOnly
    ? REVIEW_QUEUE.filter(i => i.kind === 'receipt' || i.kind === 'invoice' || i.kind === 'expense')
    : REVIEW_QUEUE.filter(i => i.kind !== 'report')).filter(i => !removedIds.includes(i.id));
  const taskCount = items.length;
  const barTitle = expensesOnly ? 'Review Contributor Expenses' : 'Inbox';
  const barEyebrow = expensesOnly
    ? `${taskCount} ${taskCount === 1 ? 'expense' : 'expenses'} awaiting review`
    : `${taskCount} new submissions to review`;
  return (
    <React.Fragment>
      <RqBar title={barTitle} eyebrow={barEyebrow} onClose={onBack} />
      <div className="proto-scroll" style={{ flex: 1, overflow: 'auto', background: P.ink }} data-screen-label="mgr-review-queue">
        <div style={{ padding: '18px 22px 6px' }}>
          <div style={{ fontFamily: T.display, fontWeight: 700, fontSize: 30, lineHeight: 0.92, letterSpacing: '-0.02em', color: P.paper }}>{expensesOnly ? <React.Fragment>REVIEW &amp; FILE<br />EXPENSES</React.Fragment> : <React.Fragment>AWAITING<br />REVIEW</React.Fragment>}</div>
          <div style={{ fontFamily: T.body, fontSize: 12, color: P.mute, marginTop: 9, lineHeight: 1.5, maxWidth: 320 }}>
            {expensesOnly
              ? 'Verify submitted expenses, make any necessary changes, and file them to the permanent archive.'
              : 'Review each submission and make any necessary changes before filing it to the permanent archive.'}
          </div>
        </div>

        <div style={{ padding: '16px 0 8px' }}><RowRule>{expensesOnly ? 'RECEIPTS & INVOICES' : 'SUBMITTED BY CONTRIBUTORS'}</RowRule></div>
        {items.length === 0 ? (
          <div style={{ padding: '34px 22px 30px', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 12 }}>
            <span style={{ width: 48, height: 48, borderRadius: 999, border: `1px solid ${P.slate}`, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
              <Icon name="archive" size={20} color={P.mute} strokeWidth={1.5} />
            </span>
            <div style={{ fontFamily: T.display, fontSize: 20, fontWeight: 700, color: P.paper, letterSpacing: '-0.01em' }}>All Caught Up</div>
            <RcMono size={9} color={P.mute} tracking="0.12em" style={{ lineHeight: 1.6 }}>Every submission has been reviewed and filed to the archive.</RcMono>
          </div>
        ) : (
        <div style={{ padding: '14px 22px 8px', display: 'flex', flexDirection: 'column', gap: 8 }}>
          {items.map(item => (
            <button key={item.id} onClick={() => onOpenItem(item)} style={{
              width: '100%', textAlign: 'left', cursor: 'pointer', background: P.graphite,
              border: `1px solid ${P.slate}`, padding: '13px 14px',
              display: 'flex', flexDirection: 'column', gap: 10,
            }}>
              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                <span style={{
                  width: 36, height: 36, flexShrink: 0, border: `1px solid ${P.slate}`, background: P.ink,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <Icon name={item.icon} size={17} color={P.gold} strokeWidth={1.6} />
                </span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <RcMono size={8} color={P.mute} tracking="0.16em">{item.kind}</RcMono>
                  </div>
                  <div style={{ fontFamily: T.body, fontSize: 13, color: P.paper, lineHeight: 1.35, marginTop: 4 }}>{item.title}</div>
                </div>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10, paddingTop: 9, borderTop: `1px solid ${P.slate}` }}>
                <ByLine initials={item.initials} name={item.contributor} org={item.org} />
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 12, flexShrink: 0 }}>
                  <RcMono size={8} color={P.mute} tracking="0.08em">{item.meta}</RcMono>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
                    <RcMono size={8} color={P.gold}>Review</RcMono>
                    <Icon name="arrow" size={13} color={P.gold} strokeWidth={1.6} />
                  </span>
                </span>
              </div>
            </button>
          ))}
        </div>
        )}

        <div style={{ padding: '8px 22px 28px', display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{ width: 5, height: 5, background: P.gold, flexShrink: 0 }} />
          <RcMono size={8.5} color={P.mute} tracking="0.14em" style={{ lineHeight: 1.6 }}>
            {expensesOnly ? 'Only the Collection Manager can file expenses to the archive.' : 'Submissions become records only after review.'}
          </RcMono>
        </div>
      </div>
    </React.Fragment>
  );
}

// Approval confirmation.
function ApprovedOverlay({ item, onClose }) {
  const node = (
    <div style={{ position: 'absolute', inset: 0, zIndex: 98, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
      <div onClick={onClose} style={{ position: 'absolute', inset: 0, background: 'rgba(10,10,11,0.85)', backdropFilter: 'blur(2px)', WebkitBackdropFilter: 'blur(2px)' }} />
      <div style={{ position: 'relative', width: '100%', background: P.graphite, border: `1px solid ${P.gold}`, padding: 22, animation: 'sheetIn .25s cubic-bezier(.2,.7,.3,1)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <span style={{ width: 38, height: 38, borderRadius: 999, border: `1px solid ${P.gold}`, background: 'rgba(184,144,85,0.1)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={P.gold} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5" /></svg>
          </span>
          <div>
            <Eyebrow color={P.gold}>APPROVED · FILED TO THE ARCHIVE</Eyebrow>
            <div style={{ fontFamily: T.display, fontSize: 22, fontWeight: 700, color: P.paper, marginTop: 5, letterSpacing: '-0.015em', lineHeight: 1 }}>Record Created</div>
          </div>
        </div>
        <div style={{ fontFamily: T.body, fontSize: 12.5, color: P.bone, marginTop: 14, lineHeight: 1.55 }}>
          {item.contributor}'s submission is now a permanent record, with the original attached as supporting documentation.
        </div>
        <button onClick={onClose} style={{ width: '100%', height: 48, marginTop: 18, background: P.gold, border: `1px solid ${P.gold}`, color: P.ink, fontFamily: T.mono, fontSize: 10, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', cursor: 'pointer' }}>Back to queue</button>
      </div>
    </div>
  );
  const stage = (typeof document !== 'undefined') ? document.getElementById('proto-stage') : null;
  return stage ? ReactDOM.createPortal(node, stage) : node;
}

// Lightweight review for non-receipt submissions (photos · documents · notes).
function ReviewItem({ item, onBack, onClose }) {
  const [approved, setApproved] = useRQ(false);
  const [preview, setPreview] = useRQ(false);
  const PHOTO_COUNT = 6;
  const [removedPhotos, setRemovedPhotos] = useRQ([]);
  const [galleryOpen, setGalleryOpen] = useRQ(false);
  const photoIndices = Array.from({ length: PHOTO_COUNT }, (_, i) => i).filter(i => !removedPhotos.includes(i));
  const removePhoto = (i) => {
    setRemovedPhotos(r => r.includes(i) ? r : [...r, i]);
  };
  return (
    <React.Fragment>
      <RqBar title="Review Submission" eyebrow={item.kind === 'photos' ? `Work Complete · ${item.kind}` : `Contributor · ${item.kind}`} onClose={onBack} />
      <div className="proto-scroll" style={{ flex: 1, overflow: 'auto', background: P.ink }} data-screen-label="mgr-review-item">
        <div style={{ padding: '18px 22px 10px' }}>
          <RcMono size={9} color={P.gold} style={{ display: 'block' }}>{item.kind === 'document' ? '1 PDF Attached' : item.kind === 'photos' ? `${photoIndices.length} photos` : `${item.kind} · ${item.meta}`}</RcMono>
          <div style={{ fontFamily: T.display, fontWeight: 700, fontSize: 24, lineHeight: 1, letterSpacing: '-0.015em', color: P.paper, marginTop: 8 }}>{item.title}</div>
        </div>

        {/* who submitted */}
        <div style={{ padding: '4px 22px 14px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, background: P.graphite, padding: '12px 14px', borderLeft: `2px solid ${P.gold}` }}>
            <span style={{ width: 34, height: 34, flexShrink: 0, borderRadius: 999, border: `1px solid ${P.gold}`, color: P.gold, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontFamily: T.mono, fontSize: 10, fontWeight: 700 }}>{item.initials}</span>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontFamily: T.body, fontSize: 13, color: P.paper, fontWeight: 500 }}>{item.contributor}</div>
              <RcMono size={8} color={P.mute} tracking="0.1em" style={{ marginTop: 3, display: 'block' }}>{item.org} · {item.when}</RcMono>
            </div>
          </div>
        </div>

        {/* mock attachment preview */}
        <div style={{ padding: '0 22px 14px' }}>
          {item.kind === 'photos' ? (
            photoIndices.length > 0 ? (
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 6 }}>
                {photoIndices.map(i => (
                  <div key={i} style={{ position: 'relative' }}>
                    <button onClick={() => setGalleryOpen(true)} style={{
                      width: '100%', aspectRatio: '1 / 1', padding: 0, cursor: 'pointer',
                      background: `repeating-linear-gradient(135deg, ${P.graphite} 0 12px, rgba(255,255,255,0.02) 12px 13px)`,
                      border: `1px solid ${P.slate}`, display: 'flex', alignItems: 'center', justifyContent: 'center',
                    }}>
                      <Icon name="gallery" size={18} color={P.slate} strokeWidth={1.4} />
                    </button>
                    <button onClick={(e) => { e.stopPropagation(); removePhoto(i); }} aria-label="Remove photo" style={{
                      position: 'absolute', top: 4, right: 4, width: 20, height: 20, borderRadius: 999,
                      background: 'rgba(10,10,11,0.75)', border: `1px solid ${P.slate}`, color: P.paper,
                      display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
                    }}>
                      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6L6 18M6 6l12 12" /></svg>
                    </button>
                  </div>
                ))}
              </div>
            ) : (
              <div style={{ border: `1px dashed ${P.slate}`, padding: '18px 16px', textAlign: 'center' }}>
                <RcMono size={8.5} color={P.mute} tracking="0.1em">All photos removed from this submission</RcMono>
              </div>
            )
          ) : (
            <button onClick={() => setPreview(true)} style={{
              width: '100%', border: `1px solid ${P.slate}`, background: P.graphite, padding: '16px 16px',
              display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer', textAlign: 'left',
            }}>
              <Icon name={item.icon} size={22} color={P.gold} strokeWidth={1.5} />
              <span style={{ flex: 1, minWidth: 0 }}>
                <RcMono size={9} color={P.bone} tracking="0.06em" style={{ display: 'block', textTransform: 'none', letterSpacing: '0.02em' }}>Original attached · tap to preview</RcMono>
                <RcMono size={7.5} color={P.mute} tracking="0.08em" style={{ display: 'block', marginTop: 3 }}>Files to the Vault once approved</RcMono>
              </span>
              <Icon name="arrow" size={14} color={P.gold} strokeWidth={1.5} />
            </button>
          )}
        </div>

        {/* contributor note */}
        {item.note ? (
          <React.Fragment>
            <div style={{ padding: '0 0 8px' }}><RowRule>CONTRIBUTOR NOTE</RowRule></div>
            <div style={{ padding: '10px 22px 14px' }}>
              <div style={{ fontFamily: T.body, fontSize: 13, color: P.bone, lineHeight: 1.55, fontStyle: 'italic' }}>"{item.note}"</div>
            </div>
          </React.Fragment>
        ) : null}

        {/* vehicle association (manager confirms) */}
        <div style={{ padding: '0 0 8px' }}><RowRule>WORK PERFORMED ON</RowRule></div>
        <div style={{ padding: '10px 22px 6px', display: 'flex', flexWrap: 'wrap', gap: 6 }}>
          {(item.vehicles || []).map(v => (
            <span key={v} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '7px 11px', border: `1px solid ${P.slate}`, background: P.graphite, fontFamily: T.mono, fontSize: 9, letterSpacing: '0.1em', textTransform: 'uppercase', color: P.paper }}>
              <span style={{ width: 5, height: 5, borderRadius: 999, background: P.gold }} />{v}
            </span>
          ))}
        </div>
        <div style={{ padding: '8px 22px 6px' }}>
          <RcMono size={8.5} color={P.mute} style={{ lineHeight: 1.5, display: 'block', textTransform: 'none', letterSpacing: '0.02em' }}>Suggested by the contributor — adjust before approving if needed.</RcMono>
        </div>

        {/* actions */}
        <div style={{ padding: '16px 22px 14px', display: 'grid', gap: 8 }}>
          <button onClick={() => setApproved(true)} style={{
            width: '100%', height: 52, background: P.gold, border: `1px solid ${P.gold}`, color: P.ink, cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
            fontFamily: T.mono, fontSize: 11, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase',
          }}>
            <Icon name="archive" size={16} color={P.ink} strokeWidth={2} />
            Approve &amp; File to Archive
          </button>
        </div>
        <div style={{ height: 14 }} />
      </div>

      {approved && <ApprovedOverlay item={item} onClose={() => { setApproved(false); onClose && onClose(); }} />}
      {preview && <DocumentPreviewSheet item={item} onClose={() => setPreview(false)} />}
      {galleryOpen && (
        <PhotoGalleryScreen
          item={item}
          indices={photoIndices}
          onRemove={removePhoto}
          onBack={() => setGalleryOpen(false)}
        />
      )}
    </React.Fragment>
  );
}

// Full page — every remaining photo stacked down the screen so it scrolls
// and pinch-zooms like any native photo view. No lightbox chrome, no
// prev/next paging — a real destination reached from the thumbnail grid,
// with the same back-button placement as every other screen in the app.
function PhotoGalleryScreen({ item, indices, onRemove, onBack }) {
  return (
    <div style={{ position: 'absolute', inset: 0, zIndex: 92, background: P.ink, display: 'flex', flexDirection: 'column', animation: 'sheetFade .2s ease' }}>
      <div style={{ height: 54, flex: '0 0 auto', background: P.ink }} />
      <div style={{ padding: '10px 18px 12px', display: 'flex', alignItems: 'center', gap: 12, flex: '0 0 auto', borderBottom: `1px solid ${P.graphite}` }}>
        <button onClick={onBack} aria-label="Back" style={{
          background: P.gold, border: 'none', borderRadius: 999, width: 34, height: 34,
          flexShrink: 0, color: P.ink, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"><path d="M19 12H5M5 12l6-6M5 12l6 6" /></svg>
        </button>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontFamily: T.display, fontWeight: 600, fontSize: 15, letterSpacing: '0.02em', color: P.paper, lineHeight: 1.1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{item.title}</div>
          <RcMono size={8.5} color={P.gold} tracking="0.16em" style={{ marginTop: 3, display: 'block' }}>{indices.length} {indices.length === 1 ? 'photo' : 'photos'}</RcMono>
        </div>
      </div>
      <div className="proto-scroll" style={{ flex: 1, overflow: 'auto', padding: '14px 18px 28px', display: 'grid', gap: 12 }}>
        {indices.length > 0 ? indices.map(i => (
          <div key={i} style={{ position: 'relative' }}>
            <div style={{
              width: '100%', aspectRatio: '4 / 5',
              background: `repeating-linear-gradient(135deg, ${P.graphite} 0 16px, rgba(255,255,255,0.02) 16px 17px)`,
              border: `1px solid ${P.slate}`, display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Icon name="gallery" size={30} color={P.slate} strokeWidth={1.2} />
            </div>
            <button onClick={() => onRemove(i)} aria-label="Remove photo" style={{
              position: 'absolute', top: 8, right: 8, width: 30, height: 30, borderRadius: 999,
              background: 'rgba(10,10,11,0.75)', border: `1px solid ${P.slate}`, color: P.paper,
              display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
            }}>
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6L6 18M6 6l12 12" /></svg>
            </button>
          </div>
        )) : (
          <div style={{ border: `1px dashed ${P.slate}`, padding: '18px 16px', textAlign: 'center' }}>
            <RcMono size={8.5} color={P.mute} tracking="0.1em">All photos removed from this submission</RcMono>
          </div>
        )}
      </div>
    </div>
  );
}

// Full-bleed PDF-style preview — captured original, not yet in the Vault.
// Rendered as a paper "scan" so it reads as the real document, consistent
// with the archived-original treatment used in Upload Expense / Reports.
function DocumentPreviewSheet({ item, onClose }) {
  const PAPER = '#f2ecdd', PINK = '#26221a', PMUTE = '#8a8068';
  return (
    <div style={{ position: 'absolute', inset: 0, zIndex: 90, background: 'rgba(10,10,11,0.92)', display: 'flex', flexDirection: 'column', animation: 'sheetFade .2s ease' }}>
      <div style={{ height: 54, flex: '0 0 auto' }} />
      <div style={{ padding: '10px 18px 12px', display: 'flex', alignItems: 'center', gap: 12, flex: '0 0 auto' }}>
        <button onClick={onClose} aria-label="Back" style={{
          background: P.gold, border: 'none', borderRadius: 999, width: 34, height: 34,
          flexShrink: 0, color: P.ink, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"><path d="M19 12H5M5 12l6-6M5 12l6 6" /></svg>
        </button>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontFamily: T.display, fontWeight: 600, fontSize: 15, letterSpacing: '0.02em', color: P.paper, lineHeight: 1.1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{item.title}</div>
          <RcMono size={8.5} color={P.gold} tracking="0.16em" style={{ marginTop: 3, display: 'block' }}>Not yet in the Vault · pending approval</RcMono>
        </div>
      </div>
      <div className="proto-scroll" style={{ flex: 1, overflow: 'auto', padding: '4px 18px 24px' }}>
        <div style={{
          background: PAPER, color: PINK, padding: '26px 22px', boxShadow: '0 22px 50px rgba(0,0,0,0.6)',
          backgroundImage: 'linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0) 8%), repeating-linear-gradient(90deg, rgba(0,0,0,0.015) 0 2px, rgba(0,0,0,0) 2px 4px)',
          position: 'relative', overflow: 'hidden', minHeight: 420,
        }}>
          <div aria-hidden="true" style={{
            position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
            transform: 'rotate(-24deg)', pointerEvents: 'none',
            fontFamily: T.mono, fontSize: 40, fontWeight: 700, letterSpacing: '0.3em',
            color: 'rgba(38,34,26,0.05)', whiteSpace: 'nowrap',
          }}>ORIGINAL</div>
          <div style={{ fontFamily: T.mono, fontSize: 7, letterSpacing: '0.18em', textTransform: 'uppercase', color: PMUTE }}>{item.org}</div>
          <div style={{ fontFamily: T.display, fontWeight: 700, fontSize: 19, letterSpacing: '-0.01em', marginTop: 8, lineHeight: 1.2 }}>{item.title}</div>
          <div style={{ marginTop: 18, display: 'grid', gap: 8 }}>
            {[0, 1, 2, 3, 4].map(i => (
              <div key={i} style={{ height: 9, width: i === 4 ? '55%' : '100%', background: 'rgba(38,34,26,0.14)' }} />
            ))}
          </div>
          <div style={{ marginTop: 22, fontFamily: T.mono, fontSize: 7, letterSpacing: '0.1em', color: PMUTE }}>{item.when} · submitted by {item.contributor}</div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ReviewQueue, ReviewItem, ApprovedOverlay, DocumentPreviewSheet, PhotoGalleryScreen });