/* ui_kits/watchover-app/ParentHome.jsx
   Parent mode — home. The whitelist is the hero object: calm pine,
   paper header with the mode pill and the single token balance,
   channel rows with a new-content dot, a dashed add affordance and
   the review-queue entry point.
   Composes: wo-header · wo-modepill · wo-balance · wo-iconbtn ·
   wo-settingsrow · wo-badge (--warning / --dot) · wo-section ·
   wo-channel--row · wo-avatar · wo-addcard--more · wo-nav         */

(function () {
  function ParentHome({
    kid,
    channels,
    pendingCount,
    balance,
    onOpenQueue,
    onOpenChannel,
    onHandBack,
  }) {
    const Ico = window.WoIcons;

    return (
      <div className="app-shell">
        <header className="wo-header">
          <div className="wo-header__title">Whitelist</div>
          <span className="wo-modepill">Parent mode</span>
          <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>
            <button
              className="wo-iconbtn"
              onClick={onHandBack}
              aria-label={`Hand the phone back to ${kid.name}`}
              title={`Hand the phone back to ${kid.name}`}
            >
              <Ico.lock size={20} />
            </button>
          </div>
        </header>

        <main className="app-content">
          <button className="wo-settingsrow" onClick={onOpenQueue}>
            <span className="wo-settingsrow__icon">
              <Ico.sparkles size={20} />
            </span>
            <span className="wo-settingsrow__body">
              <span className="wo-settingsrow__title">Review queue</span>
              <span className="wo-settingsrow__meta">
                {pendingCount > 0
                  ? `${pendingCount} channels found for ${kid.name} this week`
                  : 'Nothing waiting on you.'}
              </span>
            </span>
            {pendingCount > 0 && (
              <span className="wo-badge wo-badge--warning wo-num">{pendingCount}</span>
            )}
            <span className="wo-settingsrow__chevron">
              <Ico.chevronRight size={18} />
            </span>
          </button>

          <div className="wo-section">
            <span className="wo-section__title">{kid.name}'s channels</span>
            <span className="wo-section__count wo-num">{channels.length} channels</span>
          </div>

          <div>
            {channels.map((c) => (
              <button
                key={c.id}
                className="app-tap wo-channel wo-channel--row"
                onClick={() => onOpenChannel(c.id)}
              >
                <span className="wo-channel__avatar">
                  <span
                    className="wo-avatar"
                    style={{ background: c.color, color: 'var(--text-on-brand)' }}
                  >
                    {c.letter}
                  </span>
                  {c.newContent && (
                    <span className="wo-channel__dot">
                      <span className="wo-badge wo-badge--dot" />
                    </span>
                  )}
                </span>
                <span className="wo-channel__body">
                  <span className="wo-channel__name">{c.name}</span>
                  <span className="wo-channel__meta">
                    {c.newContent
                      ? `${c.subs} subs · new videos this week`
                      : `${c.subs} subs · score ${c.score} · approved by you`}
                  </span>
                </span>
                <span className="wo-channel__trailing">
                  <Ico.chevronRight size={18} />
                </span>
              </button>
            ))}
          </div>

          <button
            className="wo-addcard wo-addcard--more"
            style={{ marginTop: 'var(--sp-3)' }}
          >
            <span className="wo-addcard__plus">
              <Ico.plus size={18} />
            </span>
            Add more channels
          </button>
        </main>

        <nav className="wo-nav">
          <button className="wo-nav__item wo-nav__item--active">
            <span className="wo-nav__icon">
              <Ico.shieldCheck size={22} />
            </span>
            <span className="wo-nav__label">Whitelist</span>
          </button>
          <button className="wo-nav__item" onClick={onOpenQueue}>
            <span className="wo-nav__icon">
              <Ico.sparkles size={22} />
            </span>
            <span className="wo-nav__label">Review</span>
            {pendingCount > 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 || {}, { ParentHome });
})();