/* ui_kits/watchover-app/ReviewQueue.jsx
   Parent mode — candidates the AI found, waiting for a decision.
   Each card: score ring + verdict badge + approve / dismiss; the
   card itself opens the full AI-check detail. When nothing is
   pending the calm empty state takes over.
   Composes: wo-header · wo-balance · wo-channel--card · wo-ring ·
   wo-badge · wo-btn--sm (+ --ghost) · wo-section · wo-empty ·
   wo-nav                                                          */

(function () {
  function ReviewQueue({
    kid,
    queue,
    balance,
    onBack,
    onOpenDetail,
    onApprove,
    onDismiss,
    onGoWhitelist,
  }) {
    const Ico = window.WoIcons;
    const labels = window.WoData.verdictLabels;

    const pending = queue.filter((q) => q.status === 'pending');
    const handled = queue.filter((q) => q.status !== 'pending');

    const badgeClass = (verdict) =>
      verdict === 'safe'
        ? 'wo-badge--success'
        : verdict === 'caution'
        ? 'wo-badge--warning'
        : 'app-badge--flag';

    const Card = ({ item }) => (
      <div
        className={
          'wo-channel wo-channel--card app-queuecard' +
          (item.status === 'dismissed' ? ' app-queuecard--done' : '')
        }
        role="button"
        tabIndex={0}
        onClick={() => onOpenDetail(item.id)}
        onKeyDown={(e) => {
          if (e.key === 'Enter' || e.key === ' ') onOpenDetail(item.id);
        }}
      >
        <div className="app-queuecard__main">
          <span className="wo-channel__avatar">
            <span
              className={`wo-ring wo-ring--${item.verdict}`}
              style={{ '--val': item.score }}
            >
              <span className="wo-ring__num wo-num">{item.score}</span>
            </span>
          </span>
          <span className="wo-channel__body">
            <span className="wo-channel__name">{item.name}</span>
            <span className="wo-channel__meta">
              {item.subs} subs · {item.category} · {item.platform}
            </span>
          </span>
          <span className={`wo-badge ${badgeClass(item.verdict)}`}>
            {labels[item.verdict]}
          </span>
        </div>
        {item.status === 'pending' ? (
          <div className="app-row-actions">
            <button
              className="wo-btn wo-btn--sm"
              onClick={(e) => {
                e.stopPropagation();
                onApprove(item.id);
              }}
            >
              Approve
            </button>
            <button
              className="wo-btn wo-btn--sm wo-btn--ghost"
              onClick={(e) => {
                e.stopPropagation();
                onDismiss(item.id);
              }}
            >
              Dismiss
            </button>
          </div>
        ) : (
          <div className="app-row-actions">
            <span
              className={
                'wo-badge ' +
                (item.status === 'approved' ? 'wo-badge--success' : 'wo-badge--secondary')
              }
            >
              {item.status === 'approved' ? 'Added to whitelist' : 'Dismissed'}
            </span>
          </div>
        )}
      </div>
    );

    return (
      <div className="app-shell">
        <header className="wo-header">
          <button className="wo-header__back" onClick={onBack} aria-label="Back to whitelist">
            <Ico.chevronLeft />
          </button>
          <div className="wo-header__title">Review queue</div>
          <div className="wo-header__actions">
            <span className="wo-balance" title="Token balance">
              <span className="wo-balance__coin">
                <Ico.coin size={15} />
              </span>
              <span className="wo-balance__num wo-num">{balance}</span>
            </span>
          </div>
        </header>

        <main className="app-content">
          {pending.length > 0 ? (
            <React.Fragment>
              <p className="app-note">
                We reviewed each one before it can reach {kid.name}'s feed.
              </p>
              <div className="wo-section">
                <span className="wo-section__title">Waiting for you</span>
                <span className="wo-section__count wo-num">{pending.length}</span>
              </div>
              <div className="app-stack">
                {pending.map((item) => (
                  <Card key={item.id} item={item} />
                ))}
              </div>
            </React.Fragment>
          ) : (
            <div className="wo-empty wo-empty--parent">
              <span className="wo-empty__chip">
                <Ico.shieldCheck size={26} />
              </span>
              <div className="wo-empty__title">Nothing waiting on you</div>
              <div className="wo-empty__sub">
                We'll surface new channels here as we find them.
              </div>
            </div>
          )}

          {handled.length > 0 && (
            <React.Fragment>
              <div className="wo-section">
                <span className="wo-section__title">Handled</span>
              </div>
              <div className="app-stack">
                {handled.map((item) => (
                  <Card key={item.id} item={item} />
                ))}
              </div>
            </React.Fragment>
          )}
        </main>

        <nav className="wo-nav">
          <button className="wo-nav__item" onClick={onGoWhitelist}>
            <span className="wo-nav__icon">
              <Ico.shieldCheck size={22} />
            </span>
            <span className="wo-nav__label">Whitelist</span>
          </button>
          <button className="wo-nav__item wo-nav__item--active">
            <span className="wo-nav__icon">
              <Ico.sparkles size={22} />
            </span>
            <span className="wo-nav__label">Review</span>
            {pending.length > 0 && (
              <span className="wo-nav__badge">
                <span className="wo-badge wo-badge--dot" />
              </span>
            )}
          </button>
          <button className="wo-nav__item">
            <span className="wo-nav__icon">
              <Ico.settings size={22} />
            </span>
            <span className="wo-nav__label">Settings</span>
          </button>
        </nav>
      </div>
    );
  }

  window.WoScreens = Object.assign(window.WoScreens || {}, { ReviewQueue });
})();