/* ui_kits/watchover-app/ChannelDetail.jsx
   Parent mode — the full AI-check verdict for one channel.
   Hero banner with score chip, the signature full score block,
   evidence rows ("Why it works" / "Keep in mind"), read-only
   topic chips and a sticky decision footer.
   Composes: wo-header · wo-balance · wo-hero · wo-score--full ·
   wo-section · wo-evidence · wo-tag--readonly · wo-footer ·
   wo-btn (+ --ghost / --danger)                                   */

(function () {
  function ChannelDetail({
    kid,
    channel,
    status,
    balance,
    onBack,
    onApprove,
    onDismiss,
    onRemove,
  }) {
    const Ico = window.WoIcons;
    const D = window.WoData;
    const v = channel.verdict;
    const VerdictIcon = v === 'safe' ? Ico.shieldCheck : v === 'caution' ? Ico.eye : Ico.flag;
    const MindIcon = v === 'flag' ? Ico.flag : Ico.eye;

    return (
      <div className="app-shell">
        <header className="wo-header">
          <button className="wo-header__back" onClick={onBack} aria-label="Back">
            <Ico.chevronLeft />
          </button>
          <div className="wo-header__title">AI check</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 app-content--flush">
          <div className="app-pad">
            <div className="wo-hero">
              <div
                className="wo-hero__media"
                style={{
                  background: `linear-gradient(135deg, ${channel.grad[0]}, ${channel.grad[1]})`,
                }}
              />
              <span className={`wo-hero__score wo-hero__score--${v}`}>
                <VerdictIcon size={14} />
                <span className="wo-num">{channel.score}</span> · {D.verdictLabels[v]}
              </span>
              <div className="wo-hero__info">
                <span className="wo-hero__avatar">
                  <span className="app-mono" style={{ background: channel.color }}>
                    {channel.letter}
                  </span>
                </span>
                <div className="wo-hero__text">
                  <div className="wo-hero__name">{channel.name}</div>
                  <div className="wo-hero__meta">
                    {channel.subs} subs · {channel.category} · {channel.platform}
                  </div>
                </div>
              </div>
            </div>

            <div className="app-card app-scoreblock" style={{ marginTop: 'var(--sp-4)' }}>
              <div className={`wo-score wo-score--full wo-score--${v}`}>
                <div className="wo-score__circle">
                  <span className="wo-score__value">{channel.score}</span>
                </div>
                <div className="wo-score__verdict">{D.verdictLabels[v]}</div>
                <span className="wo-score__meta">{channel.review.meta}</span>
              </div>
            </div>

            <div className="wo-section">
              <span className="wo-section__title">Why it works</span>
            </div>
            <div className="app-card">
              {channel.review.why.map((row, i) => (
                <div key={i} className="wo-evidence wo-evidence--ok">
                  <span className="wo-evidence__icon">
                    <Ico.check size={16} />
                  </span>
                  <span className="wo-evidence__content">
                    <span className="wo-evidence__title">{row.title}</span>
                    <span className="wo-evidence__body">{row.body}</span>
                  </span>
                </div>
              ))}
            </div>

            <div className="wo-section">
              <span className="wo-section__title">Keep in mind</span>
            </div>
            <div className="app-card">
              {channel.review.mind.map((row, i) => (
                <div key={i} className="wo-evidence wo-evidence--warn">
                  <span className="wo-evidence__icon">
                    <MindIcon size={16} />
                  </span>
                  <span className="wo-evidence__content">
                    <span className="wo-evidence__title">{row.title}</span>
                    <span className="wo-evidence__body">{row.body}</span>
                  </span>
                </div>
              ))}
            </div>

            <div className="wo-section">
              <span className="wo-section__title">Topics {kid.name} will see</span>
            </div>
            <div className="app-tags">
              {channel.topics.map((t) => (
                <span key={t} className="wo-tag wo-tag--readonly">
                  {t}
                </span>
              ))}
            </div>
          </div>

          <footer className="wo-footer">
            {status === 'whitelisted' ? (
              <React.Fragment>
                <p className="wo-footer__note">
                  On {kid.name}'s whitelist · approved by you
                </p>
                <button className="wo-btn wo-btn--danger" onClick={onRemove}>
                  Remove from whitelist
                </button>
              </React.Fragment>
            ) : status === 'pending' ? (
              <React.Fragment>
                <p className="wo-footer__note">
                  This check used {D.aiCheckCost} tokens · {balance} left
                </p>
                <div className="app-footer-actions">
                  <button className="wo-btn" onClick={onApprove}>
                    Approve channel
                  </button>
                  <button className="wo-btn wo-btn--ghost" onClick={onDismiss}>
                    Not for us
                  </button>
                </div>
              </React.Fragment>
            ) : (
              <p className="wo-footer__note">
                {status === 'approved'
                  ? `Added to ${kid.name}'s whitelist.`
                  : "Dismissed — we won't suggest it again."}
              </p>
            )}
          </footer>
        </main>
      </div>
    );
  }

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