/* ui_kits/watchover-app/WatchScreen.jsx
   Child mode — watch screen. The player rests in its poster state;
   play toggles a pretend playing state (no autoplay, ever). "Up
   next" is a list the child taps — videos never advance on their
   own.
   Composes: wo-header--child · wo-player · wo-channel--child ·
   wo-avatar · wo-section · wo-vrow                                */

(function () {
  function WatchScreen({ video, channel, upNext, onBack, onSelect }) {
    const Ico = window.WoIcons;
    const [playing, setPlaying] = React.useState(false);

    return (
      <div className="app-shell">
        <header className="wo-header wo-header--child">
          <button className="wo-header__back" onClick={onBack} aria-label="Back to your feed">
            <Ico.chevronLeft />
          </button>
          <div className="wo-header__title">Now playing</div>
        </header>

        <main className="app-content">
          <div className="wo-player">
            <div
              className="wo-player__poster"
              style={{
                backgroundImage: `linear-gradient(135deg, ${video.grad[0]}, ${video.grad[1]})`,
              }}
            />
            {playing && (
              <div className="app-progress">
                <div className="app-progress__fill" />
              </div>
            )}
            <button
              className="wo-player__play"
              onClick={() => setPlaying((p) => !p)}
              aria-label={playing ? 'Pause' : 'Play'}
            >
              {playing ? <Ico.pause size={22} /> : <Ico.play size={22} />}
            </button>
            <div className="wo-player__meta">
              <div className="wo-player__title">{video.title}</div>
              <div className="wo-player__sub">
                {channel.name} · {video.duration}
              </div>
            </div>
          </div>

          <h4 className="app-watch-title">{video.title}</h4>

          <div className="wo-channel wo-channel--child">
            <span className="wo-channel__avatar">
              <span
                className="wo-avatar wo-avatar--36"
                style={{ background: channel.color, color: 'var(--text-on-brand)' }}
              >
                {channel.letter}
              </span>
            </span>
            <span className="wo-channel__body">
              <span className="wo-channel__name">{channel.name}</span>
              <span className="wo-channel__meta">On your list · checked by Watchover</span>
            </span>
          </div>

          <div className="wo-section">
            <span className="wo-section__title">Up next</span>
            <span className="wo-section__count">you choose</span>
          </div>
          <div>
            {upNext.map(({ v, c }) => (
              <button
                key={v.id}
                className="app-tap wo-vrow"
                onClick={() => onSelect(v.id)}
              >
                <div className="wo-vrow__thumb">
                  <div
                    className="app-thumb"
                    style={{
                      background: `linear-gradient(135deg, ${v.grad[0]}, ${v.grad[1]})`,
                    }}
                  >
                    <Ico.video size={22} />
                  </div>
                  <span className="wo-vrow__duration wo-num">{v.duration}</span>
                </div>
                <div className="wo-vrow__body">
                  <div className="wo-vrow__title">{v.title}</div>
                  <div className="wo-vrow__meta">{c ? c.name : ''}</div>
                </div>
              </button>
            ))}
          </div>

          <p className="app-feedend">Nothing plays on its own — you pick what's next.</p>
        </main>
      </div>
    );
  }

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