// "Tube" — a stylised live-streaming viewer in the spirit of YouTube Live,
// but with original chrome (no logos / branded marks).
const { useState: useStateT, useEffect: useEffectT, useRef: useRefT } = React;

function Avatar({ name, hue }) {
  const letter = (name || "?").trim()[0]?.toUpperCase() || "?";
  return (
    <div className="tube-avatar" style={{ background: `oklch(0.55 0.15 ${hue})` }}>
      {letter}
    </div>
  );
}

function ChatLine({ user, hue, text }) {
  return (
    <div className="tube-chat-line">
      <span className="tube-chat-user" style={{ color: `oklch(0.72 0.13 ${hue})` }}>{user}</span>
      <span className="tube-chat-text">{text}</span>
    </div>
  );
}

const CHAT_SEED = [
  { u: "marina_kw", h: 30,  t: "morning from kuwait ✋" },
  { u: "rafael.bcn", h: 12, t: "anyone got the lower-third translated" },
  { u: "tk-tokyo",  h: 0,   t: "見てる" },
  { u: "ada_li",    h: 220, t: "the anchor sounds tired today haha" },
  { u: "om_p",      h: 150, t: "audio levels finally fixed" },
  { u: "guest_71",  h: 280, t: "first time on this feed, hi all" },
  { u: "yves.fm",   h: 195, t: "where is the weather bulletin" },
  { u: "kai—",      h: 100, t: "+1 to the room" },
  { u: "dawit_a",   h: 50,  t: "great coverage 👏" },
  { u: "nina.bg",   h: 320, t: "subbed last week, sticking around" },
];

function TubePlayer({ stream }) {
  const [scrubbed, setScrubbed] = useStateT(0);
  // Faux live scrub: pretend "behind LIVE" by scrubbed seconds.
  const liveOffset = scrubbed;

  return (
    <div className="tube-player">
      <div className="tube-video" style={{ "--ch-hue": stream.hue }}>
        <div className="tube-video-bg" />
        {stream.videoId ? (
          <iframe
            key={stream.videoId}
            className="tube-video-iframe"
            src={`https://www.youtube.com/embed/${stream.videoId}?autoplay=1&mute=1&modestbranding=1&rel=0&playsinline=1&cc_load_policy=1&cc_lang_pref=${stream.lang || "en"}`}
            title={stream.title}
            allow="autoplay; encrypted-media; picture-in-picture"
            referrerPolicy="origin"
            frameBorder="0"
          />
        ) : (
          <div className="tube-video-placeholder">[ video — {stream.name} · {stream.region} ]</div>
        )}

        <div className="tube-video-bug">
          <span className="tube-bug-live"><span className="tube-bug-dot" />{stream.level ? stream.level.toUpperCase() : "LIVE"}</span>
          <span className="tube-bug-views">{stream.viewers.toLocaleString()} watching</span>
        </div>

        <div className="tube-video-controls">
          <button className="tube-ctrl-btn">
            <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z" fill="currentColor"/></svg>
          </button>
          <button className="tube-ctrl-btn">
            <svg viewBox="0 0 24 24"><path d="M5 9v6h4l5 5V4l-5 5H5zm11.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4z" fill="currentColor"/></svg>
          </button>
          <div className="tube-scrub">
            <div className="tube-scrub-track">
              <div className="tube-scrub-buffered" style={{ width: "100%" }} />
              <div className="tube-scrub-played" style={{ width: `${100 - liveOffset / 60 * 100}%` }} />
              <input
                type="range" min="0" max="60" step="1"
                value={60 - liveOffset}
                onChange={(e) => setScrubbed(60 - +e.target.value)}
                className="tube-scrub-input"
              />
            </div>
          </div>
          <div className="tube-time">
            {liveOffset === 0 ? <span className="tube-live-pill"><span/> LIVE</span> : `−${liveOffset}s behind`}
          </div>
          <button className="tube-ctrl-btn">
            <svg viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7zm-2-4h2V7h3V5H5zm12 7h-3v2h5v-5h-2zM14 5v2h3v3h2V5z" fill="currentColor"/></svg>
          </button>
        </div>
      </div>

      <div className="tube-meta">
        <div className="tube-title">{stream.title || `${stream.name} — ${stream.sub}`}</div>
        <div className="tube-row">
          <div className="tube-channel">
            <Avatar name={stream.channel || stream.name} hue={stream.hue} />
            <div className="tube-channel-block">
              <div className="tube-channel-name">{stream.channel || stream.name} <span className="tube-verified">✓</span></div>
              <div className="tube-channel-subs">{stream.lang ? `${stream.lang.toUpperCase()} · ${stream.level || "all levels"}` : `${(420 + stream.hue * 7).toLocaleString()}K subscribers`}</div>
            </div>
            <button className="tube-subscribe">Subscribe</button>
          </div>
          <div className="tube-actions">
            <div className="tube-likebar">
              <button className="tube-like">
                <svg viewBox="0 0 24 24" width="18" height="18"><path d="M1 21h4V9H1v12zM23 10c0-1.1-.9-2-2-2h-6.3l1-4.6.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.6 7.6c-.37.37-.6.88-.6 1.4v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z" fill="currentColor"/></svg>
                {(stream.viewers / 4 | 0).toLocaleString()}
              </button>
              <div className="tube-likebar-sep" />
              <button className="tube-like">
                <svg viewBox="0 0 24 24" width="18" height="18" style={{ transform: "rotate(180deg)" }}><path d="M1 21h4V9H1v12zM23 10c0-1.1-.9-2-2-2h-6.3l1-4.6.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.6 7.6c-.37.37-.6.88-.6 1.4v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z" fill="currentColor"/></svg>
              </button>
            </div>
            <button className="tube-pill">↗ Share</button>
            <button className="tube-pill">↓ Save</button>
            <button className="tube-pill">⋯</button>
          </div>
        </div>
        <div className="tube-desc">
          <div className="tube-desc-meta">{stream.viewers.toLocaleString()} watching · {stream.minutes ? `${stream.minutes} min` : `started ${stream.uptime} ago`}</div>
          <div className="tube-desc-text">
            Language-learning video from {stream.channel || stream.name} — {stream.lang ? stream.lang.toUpperCase() : ""} · {stream.level || "all levels"}.
            Captions available · click words to define.
          </div>
        </div>
      </div>
    </div>
  );
}

function TubeSidebar({ streams, currentId, onPick, langFilter = "all" }) {
  // Hint chips at the top of the sidebar — purely informational here;
  // the actual filter is driven from the global App-level chip row.
  const TABS = [
    { code: "all", label: "All" },
    { code: "en",  label: "English" },
    { code: "fr",  label: "Français" },
    { code: "es",  label: "Español" },
    { code: "ja",  label: "日本語" },
    { code: "ko",  label: "한국어" },
  ];
  return (
    <aside className="tube-sidebar">
      <div className="tube-side-tabs">
        {TABS.map(tab => (
          <div key={tab.code}
               className={`tube-side-tab ${langFilter === tab.code ? "on" : ""}`}>
            {tab.label}
          </div>
        ))}
      </div>
      {streams.map(s => (
        <button
          key={s.num}
          className={`tube-side-row ${s.num === currentId ? "on" : ""}`}
          onClick={() => onPick(s)}
        >
          <div className="tube-side-thumb" style={{ "--ch-hue": s.hue }}>
            {s.videoId ? (
              <img
                className="tube-side-thumb-img"
                src={`https://i.ytimg.com/vi/${s.videoId}/mqdefault.jpg`}
                alt=""
                loading="lazy"
              />
            ) : (
              <>
                <div className="tube-side-thumb-bg" />
                <div className="tube-side-thumb-tag">[ thumb — {s.name} ]</div>
              </>
            )}
            <span className="tube-side-live"><span/>{s.level ? s.level.toUpperCase() : "LIVE"}</span>
            <span className="tube-side-views">{s.minutes ? `${s.minutes}m` : s.viewers.toLocaleString()}</span>
          </div>
          <div className="tube-side-info">
            <div className="tube-side-title">{s.title || `${s.name} — ${(s.tag || "").toLowerCase()} live`}</div>
            <div className="tube-side-channel">{s.channel || s.sub} · {s.region}</div>
            <div className="tube-side-meta">{s.lang ? s.lang.toUpperCase() : ""} {s.minutes ? `· ${s.minutes} min` : ""}</div>
          </div>
        </button>
      ))}
    </aside>
  );
}

function TubeChat({ stream }) {
  const [lines, setLines] = useStateT(() => CHAT_SEED.slice(0, 6));
  const boxRef = useRefT(null);

  useEffectT(() => {
    const id = setInterval(() => {
      setLines(prev => {
        const next = CHAT_SEED[(prev.length + Math.floor(Math.random() * 7)) % CHAT_SEED.length];
        return [...prev.slice(-30), next];
      });
    }, 1900);
    return () => clearInterval(id);
  }, []);

  useEffectT(() => {
    if (boxRef.current) boxRef.current.scrollTop = boxRef.current.scrollHeight;
  }, [lines]);

  return (
    <div className="tube-chat">
      <div className="tube-chat-head">
        <div className="tube-chat-title">Live chat</div>
        <div className="tube-chat-count">{(stream.viewers / 12 | 0).toLocaleString()} chatting</div>
      </div>
      <div className="tube-chat-body" ref={boxRef}>
        {lines.map((l, i) => <ChatLine key={i} user={l.u} hue={l.h} text={l.t} />)}
      </div>
      <div className="tube-chat-input">
        <div className="tube-chat-avatar" style={{ background: `oklch(0.55 0.13 ${stream.hue})` }}>y</div>
        <input placeholder="Chat…" />
        <button>↑</button>
      </div>
    </div>
  );
}

function TubeViewer({ langFilter = "all" }) {
  const [num, setNum] = useStateT(TUBE_STREAMS[0].num);

  // Apply the global language filter to the sidebar. If the current
  // selection isn't in the filtered set, fall back to the first match.
  const filtered = langFilter === "all"
    ? TUBE_STREAMS
    : TUBE_STREAMS.filter(s => s.lang === langFilter);
  const effective = filtered.length > 0 ? filtered : TUBE_STREAMS;
  const stream = effective.find(s => s.num === num) || effective[0];

  // Snap to first matching when filter changes and current is out of set.
  useEffectT(() => {
    if (langFilter === "all") return;
    if (filtered.length === 0) return;
    if (!filtered.find(s => s.num === num)) {
      setNum(filtered[0].num);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [langFilter]);

  return (
    <div className="tube-viewer">
      <div className="tube-topbar">
        <div className="tube-logo">▶︎ chanltube</div>
        <div className="tube-search">
          <input placeholder="Search live news, language, region" />
          <button>⌕</button>
        </div>
        <div className="tube-top-right">
          <button className="tube-top-icon">⊕</button>
          <button className="tube-top-icon">⌗</button>
          <div className="tube-avatar tube-avatar-small" style={{ background: "oklch(0.55 0.13 220)" }}>y</div>
        </div>
      </div>
      <div className="tube-body">
        <div className="tube-main">
          <TubePlayer stream={stream} />
        </div>
        <div className="tube-side">
          <TubeChat stream={stream} />
          <TubeSidebar streams={effective} currentId={stream.num} onPick={(s) => setNum(s.num)} langFilter={langFilter} />
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TubeViewer });