/* Pump.fun Bounties TV — replaces the old turf map section.
   Keeps window.TurfMap as the mount point used by app.jsx. */

const {
  useState: useState_btv,
  useEffect: useEffect_btv,
  useRef: useRef_btv,
} = React;

const BOUNTY_VIDEOS = [
  {
    id: "bounty-01",
    title: "Miami Drop",
    kicker: "case file 01",
    src: "assets/web-videos/bounty-01.mp4",
    color: "#ff3aa3",
  },
  {
    id: "bounty-02",
    title: "Pump Run",
    kicker: "case file 02",
    src: "assets/web-videos/bounty-02.mp4",
    color: "#46e5e5",
  },
  {
    id: "bounty-03",
    title: "Wanted Tape",
    kicker: "case file 03",
    src: "assets/web-videos/bounty-03.mp4",
    color: "#ffd23a",
  },
  {
    id: "bounty-04",
    title: "Final Heat",
    kicker: "case file 04",
    src: "assets/web-videos/bounty-04.mp4",
    color: "#ff735c",
  },
];

function BountyVideoTile({ video, index, active, onSelect }) {
  return (
    <button
      type="button"
      className={`btv-tile ${active ? "active" : ""}`}
      style={{ "--tile-accent": video.color }}
      onClick={() => onSelect(index)}
      aria-label={`Play ${video.title}`}
    >
      <span className="btv-tile-no">0{index + 1}</span>
      <span className="btv-tile-thumb">
        <video src={video.src} muted loop playsInline preload="metadata" />
        <span className="btv-tile-scan" />
      </span>
      <span className="btv-tile-copy">
        <span className="btv-tile-kicker">{video.kicker}</span>
        <span className="btv-tile-title">{video.title}</span>
      </span>
    </button>
  );
}

function TurfMap() {
  const [selected, setSelected] = useState_btv(null);
  const [hasPlayed, setHasPlayed] = useState_btv(false);
  const playerRef = useRef_btv(null);
  const selectedVideo = selected === null ? null : BOUNTY_VIDEOS[selected];

  useEffect_btv(() => {
    const previews = document.querySelectorAll(".btv-tile video");
    previews.forEach((video) => {
      video.play().catch(() => {});
    });
  }, []);

  useEffect_btv(() => {
    if (selected === null || !playerRef.current) return;
    const video = playerRef.current;
    video.currentTime = 0;
    video.play().catch(() => {});
  }, [selected]);

  const backToMenu = () => {
    if (playerRef.current) {
      playerRef.current.pause();
      playerRef.current.currentTime = 0;
    }
    setSelected(null);
    setHasPlayed(true);
  };

  return (
    <section className="section bounties-tv-section" id="pumpfun-bounties" data-screen-label="05 Pump.fun Bounties">
      <div className="btv-shell">
        <div className="section-head btv-head">
          <div className="left">
            <div className="btv-section-kicker">05 / pump.fun go</div>
            <h2 className="btv-section-title">
              Grand Cup Auto X <span>Pump.fun Bounties</span>
            </h2>
          </div>
          <div className="btv-head-copy">
            Four bounty transmissions loaded into the Grand Cup Auto broadcast deck.
          </div>
        </div>

        <div className="btv-console" aria-label="Grand Cup Auto X Pump.fun Bounties video selector">
          <div className="btv-tv">
            <div className="btv-antenna a1" />
            <div className="btv-antenna a2" />
            <div className="btv-bezel">
              <div className="btv-screen">
                <div className="btv-screen-glow" />

                {selectedVideo ? (
                  <div className="btv-player">
                    <video
                      ref={playerRef}
                      key={selectedVideo.id}
                      src={selectedVideo.src}
                      controls
                      playsInline
                      onEnded={backToMenu}
                    />
                    <div className="btv-player-top">
                      <span>{selectedVideo.title}</span>
                      <button type="button" onClick={backToMenu}>menu</button>
                    </div>
                  </div>
                ) : (
                  <div className="btv-menu">
                    <div className="btv-menu-top">
                      <div>
                        <div className="btv-label">{hasPlayed ? "select next tape" : "select bounty tape"}</div>
                        <div className="btv-menu-title">Select a bounty tape</div>
                      </div>
                      <div className="btv-live">ON AIR</div>
                    </div>
                    <div className="btv-grid">
                      {BOUNTY_VIDEOS.map((video, index) => (
                        <BountyVideoTile
                          key={video.id}
                          video={video}
                          index={index}
                          active={selected === index}
                          onSelect={setSelected}
                        />
                      ))}
                    </div>
                  </div>
                )}
              </div>
            </div>

            <div className="btv-controls" aria-hidden="true">
              <div className="btv-dial pink" />
              <div className="btv-dial cyan" />
              <div className="btv-speaker">
                {Array.from({ length: 24 }, (_, i) => <span key={i} />)}
              </div>
            </div>
          </div>

          <div className="btv-side-panel">
            <div className="btv-panel-title">Bounty Broadcast</div>
            <div className="btv-panel-rule" />
            <p>
              A wide Miami Vice CRT deck for the Pump.fun bounty tapes. Pick a tape, watch it take over the screen, then return to the menu for the next transmission.
            </p>
            <div className="btv-status">
              <span />
              READY FOR SIGNAL
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.TurfMap = TurfMap;