/* global React, Icon, TrackArt, fmtTime */
const { useEffect: useEffectPl } = React;

const PlaylistScreen = ({ tracks = [], currentTrack, onPlayTrack, showExplicitContent = true, selectedPlaylistId = null, setSelectedPlaylistId = () => {}, savedTrackIds = new Set(), toggleSavedTrack = () => {} }) => {
  const hasAny = (track, terms) => terms.some((term) => `${track.title} ${track.artist} ${track.album}`.toLowerCase().includes(term));
  const hipHopTerms = ["dmx", "eminem", "dr dre", "50 cent", "lil jon", "ludacris", "2pac", "coolio", "jay-z", "outkast", "t.i", "afroman", "fort minor", "house of pain", "roy jones", "fat joe", "kanye west", "nf", "tech n9ne", "notorious", "wu-tang", "biz markie", "busta rhymes", "digital underground", "xzibit", "nate dogg", "french montana", "g-unit", "ice cube", "snoop dogg", "jeezy", "lil wayne", "ll cool j", "lloyd banks", "luniz", "mac miller", "method man", "mobb deep", "n.w.a", "nelly", "public enemy", "rick ross", "travis scott", "trick daddy", "twista", "warren g", "westside connection", "young bleed", "young joc", "bubba sparxxx"];
  const uniqueTracks = (items) => Array.from(new Map(items.filter(Boolean).map((track) => [track.id, track])).values());
  const byIds = (...ids) => ids.map((id) => tracks.find((track) => track.id === id)).filter(Boolean);
  const artistCount = (artist) => tracks.filter((track) => track.artist === artist).length;
  const topArtists = Array.from(new Set(tracks.map((track) => track.artist).filter(Boolean)))
    .map((artist) => ({ artist, count: artistCount(artist), sample: tracks.find((track) => track.artist === artist) }))
    .sort((a, b) => b.count - a.count || a.artist.localeCompare(b.artist));

  const collections = [
    {
      id: "liked",
      title: "Liked Songs",
      kicker: `${savedTrackIds.size} saved`,
      description: "Songs you have liked from the player or playlist rows.",
      tracks: tracks.filter((track) => savedTrackIds.has(track.id)),
    },
    {
      id: "popular",
      title: "Most Popular",
      kicker: "Start here",
      description: "The highest-interest songs in the current catalog.",
      tracks: tracks.slice(0, 24),
    },
    {
      id: "hip-hop",
      title: "Hip Hop & Rap",
      kicker: "Rap catalog",
      description: "Hip hop, rap, and crossover tracks from the full catalog.",
      tracks: tracks.filter((track) => hasAny(track, hipHopTerms)),
    },
    {
      id: "rock",
      title: "Rock & Metal Edge",
      kicker: "Guitars up",
      description: "Rock, metal, and heavier crossover tracks.",
      tracks: tracks.filter((track) => hasAny(track, ["metallica", "foo fighters", "green day", "cypress hill", "kid rock", "limp bizkit", "linkin park", "rock", "metal"])),
    },
    {
      id: "workout",
      title: "Workout",
      kicker: "High energy",
      description: "Aggressive, driving tracks for gym and hype playlists.",
      tracks: tracks.filter((track) => hasAny(track, ["get low", "x gon", "ruff ryders", "till i collapse", "can't be touched", "bring em out", "jump around", "get back", "remember the name", "natural born killaz", "rock superstar"])),
    },
    {
      id: "recent",
      title: "Recently Added",
      kicker: "Fresh uploads",
      description: "Newest uploads and the latest tracks added to the catalog.",
      tracks: uniqueTracks([
        ...tracks.filter((track) => track.source === "uploaded"),
        ...byIds("dr-dre-the-next-episode", "house-of-pain-who-s-the-man", "nf-leave-me-alone", "post-malone-goodbyes", "ludacris-get-back"),
        ...tracks.filter((track) => !track.plays),
      ]).slice(0, 24),
    },
    ...topArtists.filter(({ artist }) => artist !== "Post Malone").slice(0, 4).map(({ artist, count }) => ({
      id: `artist-${artist.toLowerCase().replace(/[^a-z0-9]+/g, "-")}`,
      title: `${artist} Style`,
      kicker: `${count} ${count === 1 ? "track" : "tracks"}`,
      description: `A focused run of ${artist} tracks from the catalog.`,
      tracks: tracks.filter((track) => track.artist === artist),
    })),
  ].map((collection) => ({
    ...collection,
    tracks: uniqueTracks(collection.tracks),
  })).filter((collection) => collection.tracks.length);

  const selected = selectedPlaylistId ? collections.find((collection) => collection.id === selectedPlaylistId) : null;
  const featured = selected?.tracks[0] || currentTrack || tracks[0];
  const totalSeconds = selected ? selected.tracks.reduce((sum, track) => sum + (track.duration || 0), 0) : 0;
  const totalMinutes = Math.max(1, Math.round(totalSeconds / 60));

  const playAll = () => {
    if (featured) onPlayTrack(featured, selected.tracks);
  };

  useEffectPl(() => {
    if (selectedPlaylistId === "liked" && !savedTrackIds.size && collections.some((collection) => collection.id === "popular")) {
      setSelectedPlaylistId(null);
    }
  }, [selectedPlaylistId, savedTrackIds.size]);

  const toggleSaved = (event, trackId) => {
    event.stopPropagation();
    toggleSavedTrack(trackId);
  };

  return (
    <div className="page page-pad-top playlists-page" data-screen-label="04 Playlists">
      <div className="pl-header">
        <div className="pl-header-bg">
          {featured && <TrackArt track={featured} />}
          <div className="fog"></div>
        </div>
        <div className="pl-header-body">
          <div className="pl-info">
            <span className="eyebrow">Curated Playlists · Viral Tension</span>
            <h1 className="display display-md" style={{ margin: "14px 0" }}>{selected ? selected.title : "Playlists"}</h1>
            <p>{selected ? selected.description : "Choose a playlist to open its full track list."}</p>
            <div className="pl-meta-row">
              <span>Viral Tension</span>
              <span className="dot"></span>
              <span>{selected ? selected.tracks.length : tracks.length} Tracks</span>
              {selected && <span className="dot"></span>}
              {selected && <span>{totalMinutes} min</span>}
            </div>
          </div>
        </div>
      </div>

      {selected && (
        <div className="pl-actions">
          <button className="btn btn-ghost" onClick={() => setSelectedPlaylistId(null)}>
            <Icon name="chevLeft" size={14} /> All Playlists
          </button>
          <button className="btn btn-primary" onClick={playAll}>
            <Icon name="play" size={14} /> Play Playlist
          </button>
        </div>
      )}

      {!selected && (
        <>
          <div className="section-title" style={{ marginTop: 28 }}>
            <h2>Choose a Playlist</h2>
          </div>
          <div className="playlist-grid">
            {collections.map((collection) => {
              const cover = collection.tracks[0];
              return (
                <button
                  key={collection.id}
                  className="playlist-card"
                  onClick={() => setSelectedPlaylistId(collection.id)}
                >
                  <div className="playlist-card-art">
                    {cover && <TrackArt track={cover} />}
                  </div>
                  <div className="playlist-card-body">
                    <span>{collection.kicker}</span>
                    <strong>{collection.title}</strong>
                    <em>{collection.tracks.length} {collection.tracks.length === 1 ? "track" : "tracks"}</em>
                  </div>
                </button>
              );
            })}
          </div>
        </>
      )}

      {selected && (
        <div className="track-list playlist-track-list">
          <div className="track-head">
            <span>#</span>
            <span></span>
            <span>Title</span>
            <span>Artist</span>
            <span style={{ textAlign: "right" }}><Icon name="clock" size={14} /></span>
            <span></span>
          </div>
          {selected.tracks.map((track, i) => {
            const isSaved = savedTrackIds.has(track.id);
            return (
              <button key={track.id} className={`track-row ${currentTrack && currentTrack.id === track.id ? "is-playing" : ""} ${track.explicit && !showExplicitContent ? "is-explicit-muted" : ""}`} onClick={() => onPlayTrack(track, selected.tracks)}>
                <div>
                  <div className="track-num">{String(i + 1).padStart(2, "0")}</div>
                  <div className="track-play-hover"><Icon name="play" size={14} /></div>
                </div>
                <div className="track-art"><TrackArt track={track} /></div>
                <div>
                  <p className="track-title">{track.explicit && !showExplicitContent && <em className="explicit-badge">E</em>} {track.shortTitle || track.title}</p>
                  <p className="track-artist">{track.artist}</p>
                </div>
                <div className="track-artist">{track.artist}</div>
                <div className="track-dur">{fmtTime(track.duration || 0)}</div>
                <span
                  className={`save-track ${isSaved ? "is-saved" : ""}`}
                  role="button"
                  tabIndex="0"
                  aria-label={isSaved ? "Remove from playlist" : "Add to playlist"}
                  onClick={(event) => toggleSaved(event, track.id)}
                  onKeyDown={(event) => {
                    if (event.key === "Enter" || event.key === " ") toggleSaved(event, track.id);
                  }}
                >
                  <Icon name={isSaved ? "heart" : "heartOutline"} size={16} />
                </span>
              </button>
            );
          })}
        </div>
      )}
    </div>
  );
};

window.PlaylistScreen = PlaylistScreen;