/* global React, Icon, TrackArt, fmtTime */

const ArtistScreen = ({ onNav, tracks = [], currentTrack, onPlayTrack, showExplicitContent = true }) => {
  const fmtPlays = (plays) => plays ? `${plays.toLocaleString()} plays` : "Ready";
  const featured = currentTrack || tracks.find((track) => /get low/i.test(track.title || "")) || tracks[0];
  const artists = Array.from(new Set(tracks.map((track) => track.artist).filter(Boolean)));
  const popular = tracks.slice(0, 12);
  const artistCards = artists.slice(0, 18).map((artist) => ({
    artist,
    count: tracks.filter((track) => track.artist === artist).length,
    sample: tracks.find((track) => track.artist === artist),
  }));

  return (
    <div className="page page-pad-top" data-screen-label="06 Catalog Artists">
      <div className="artist-hero">
        <div className="artist-hero-bg">
          {featured && <TrackArt track={featured} />}
          <div className="fog"></div>
        </div>
        <div className="artist-hero-body">
          <div className="artist-avatar">{featured && <TrackArt track={featured} />}</div>
          <div className="artist-info">
            <div className="verified"><Icon name="verified" size={12} style={{ color: "var(--accent)" }} /> Streaming Catalog</div>
            <h1 className="display">VIRAL TENSION</h1>
            <div className="artist-stats">
              <div>Tracks<b>{tracks.length}</b></div>
              <div>Artists<b>{artists.length}</b></div>
              <div>Access<b>Preview</b></div>
            </div>
            <div className="artist-actions">
              <button className="btn btn-primary" onClick={() => featured ? onPlayTrack(featured) : onNav("Home")}>
                <Icon name="play" size={14} /> Play Featured
              </button>
              <button className="btn btn-ghost" onClick={() => onNav("Playlist")}>
                <Icon name="list" size={14} /> Full Catalog
              </button>
              <button className="btn-circle" aria-label="Share"><Icon name="share" size={14} /></button>
            </div>
          </div>
        </div>
      </div>

      <div className="section-grid">
        <div>
          <div className="section-title">
            <h2>Popular Tracks</h2>
            <button className="see-all">{tracks.length} Tracks <Icon name="chevRight" size={12} /></button>
          </div>
          <div className="popular-list">
            {popular.map((track, i) => (
              <button key={track.id} className={`pop-row ${track.explicit && !showExplicitContent ? "is-explicit-muted" : ""}`} onClick={() => onPlayTrack(track)}>
                <span className="pop-num">{String(i + 1).padStart(2, "0")}</span>
                <div className="rart"><TrackArt track={track} /></div>
                <div>
                  <strong>{track.explicit && !showExplicitContent && <em className="explicit-badge">E</em>} {track.shortTitle || track.title}</strong>
                  <span className="plays">{track.artist} · {fmtPlays(track.plays)}</span>
                </div>
                <span className="plays">{fmtTime(track.duration || 0)}</span>
                <button className="icon-btn" aria-label="More"><Icon name="moreH" size={14} /></button>
              </button>
            ))}
          </div>
        </div>

        <div className="glass trend-card">
          <div className="section-title" style={{ marginBottom: 8 }}>
            <h2>Catalog</h2>
            <span className="see-all">Catalog</span>
          </div>
          <div style={{ fontFamily: "var(--display)", fontSize: 42, letterSpacing: ".04em", marginBottom: 4 }}>{artists.length}</div>
          <div className="kicker" style={{ marginBottom: 18, color: "var(--accent)" }}>Artists in rotation</div>
          <div className="trend-row"><span>Tracks</span><b>{tracks.length}</b></div>
          <div className="trend-row"><span>Total runtime</span><b>{Math.round(tracks.reduce((sum, track) => sum + (track.duration || 0), 0) / 60)} min</b></div>
          <div className="trend-row"><span>Streaming</span><b style={{ color: "var(--accent)" }}>Ready</b></div>
          <div className="trend-row"><span>Status</span><b>Live catalog</b></div>
        </div>
      </div>

      <div className="section-title" style={{ marginTop: 56 }}>
        <h2>Artists</h2>
        <button className="see-all">Catalog Artists <Icon name="chevRight" size={12} /></button>
      </div>
      <div className="rail">
        <div className="rail-track">
          {artistCards.map((card) => (
            <button key={card.artist} className="card catalog-card" onClick={() => card.sample && onPlayTrack(card.sample)}>
              <div className="card-art">
                {card.sample && <TrackArt track={card.sample} />}
                <span className="card-play"><Icon name="play" size={16} /></span>
              </div>
              <div className="card-body">
                <h3 className="card-title">{card.artist}</h3>
                <span className="card-meta">{card.count} {card.count === 1 ? "track" : "tracks"}</span>
              </div>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
};

window.ArtistScreen = ArtistScreen;