/* global React, Icon, Placeholder, TrackArt, fmtTime */
const HomeScreen = ({ onNav, tracks = [], currentTrack, onPlayTrack, showExplicitContent = true, onOpenPlaylist = () => {}, savedTrackIds = new Set() }) => {
  const fmtMeta = (track) => [track.plays ? `${track.plays.toLocaleString()} plays` : "", track.duration ? fmtTime(track.duration) : ""].filter(Boolean).join(" · ");
  const featuredTrack = tracks.find((track) => /get low/i.test(track.title || "")) || tracks[0];
  const byArtist = (...names) => tracks.filter((track) => names.some((name) => (track.artist || "").toLowerCase().includes(name.toLowerCase())));
  const byTitle = (...terms) => tracks.filter((track) => terms.some((term) => (track.title || "").toLowerCase().includes(term.toLowerCase())));
  const byIds = (...ids) => ids.map((id) => tracks.find((track) => track.id === id)).filter(Boolean);
  const uniqueTracks = (items) => Array.from(new Map(items.map((track) => [track.id, track])).values());
  const recentlyAdded = 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.slice(-12).reverse(),
  ]).slice(0, 12);
  const sectionTracks = [
    { id: "popular", title: "Heavy Rotation", seeAll: "Top Picks", tracks: tracks.slice(0, 12) },
    { id: "recent", title: "Recently Added", seeAll: "Latest", tracks: recentlyAdded },
    { id: "liked", title: "Liked Songs", seeAll: "View Playlist", tracks: tracks.filter((track) => savedTrackIds.has(track.id)).slice(0, 12) },
    { id: "hip-hop", title: "Hip-Hop Essentials", seeAll: "All Hip-Hop", tracks: uniqueTracks([...byArtist("2Pac", "Jay-Z", "Ice Cube", "Wu-Tang", "Outkast", "Dr. Dre", "The Notorious", "DMX", "Eminem")]).slice(0, 12) },
    { id: "rock", title: "Rock & Country Edge", seeAll: "All Rock & Country", tracks: uniqueTracks([...byArtist("Metallica", "Foo Fighters", "Green Day", "Kid Rock", "Johnny Cash", "Garth Brooks", "Chris Stapleton", "Morgan Wallen"), ...byTitle("Hurt", "Everlong")]).slice(0, 12) },
  ].filter((section) => section.tracks.length);

  const TrackCard = ({ track }) => (
    <button className={`card catalog-card ${currentTrack && currentTrack.id === track.id ? "is-active" : ""} ${track.explicit && !showExplicitContent ? "is-explicit-muted" : ""}`} onClick={() => onPlayTrack(track)}>
      <div className="card-art">
        <TrackArt track={track} />
        <span className="card-play"><Icon name="play" size={16} /></span>
      </div>
      <div className="card-body">
        <h3 className="card-title">{track.shortTitle || track.title}</h3>
        <p className="card-desc">{track.artist}</p>
        {fmtMeta(track) && <span className="card-meta">{track.explicit && !showExplicitContent && <em className="explicit-badge">E</em>} {fmtMeta(track)}</span>}
      </div>
    </button>
  );

  return (
    <div className="page page-pad-top">
      <section className="hero" data-screen-label="02 Home — Hero">
        <div className="hero-bg">
          <img src="assets/hero-vocalist.jpg" alt="" />
          <div className="fog"></div>
        </div>
        <div className="hero-dots" aria-hidden="true">
          <div className="hero-dot is-active"></div>
          <div className="hero-dot"></div>
          <div className="hero-dot"></div>
        </div>
        <div className="hero-body">
          <div className="hero-meta">
            <span className="eyebrow">Featured Release</span>
          </div>
          <h1 className="hero-title">Get Low</h1>
          <div className="hero-subtitle">— Nu-Metal Version</div>
          <p className="hero-copy">
            Heavy beats. Raw emotion. No compromise.<br />
            Preview 30 seconds free, or start a 3-day trial for full streaming.
          </p>
          <div className="hero-actions">
            <button className="btn btn-primary" onClick={() => featuredTrack ? onPlayTrack(featuredTrack) : onNav("Song")}>
              <Icon name="play" size={14} /> Play Now
            </button>
          </div>
        </div>
      </section>

      {sectionTracks.map((sec) => (
        <div key={sec.title} style={{ marginTop: 48 }}>
          <div className="section-title">
            <h2>{sec.title}</h2>
            <button className="see-all" onClick={() => onOpenPlaylist(sec.id)}>{sec.seeAll} <Icon name="chevRight" size={12} /></button>
          </div>
          <div className="rail">
            <div className="rail-track">
              {sec.tracks.map((track) => <TrackCard key={`${sec.title}-${track.id}`} track={track} />)}
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};

window.HomeScreen = HomeScreen;