/* global React, Icon, TrackArt */
const { useState: useStateSr } = React;

const SearchScreen = ({ onNav, tracks = [], onPlayTrack, showExplicitContent = true }) => {
  const [q, setQ] = useStateSr("");
  const query = q.trim().toLowerCase();
  const exactArtist = tracks.find((track) => (track.artist || "").toLowerCase() === query);
  const filtered = query
    ? tracks.filter((track) => exactArtist
      ? (track.artist || "").toLowerCase() === query
      : `${track.title} ${track.artist} ${track.album}`.toLowerCase().includes(query))
    : tracks.slice(0, 30);

  const artistGroups = Array.from(new Set(tracks.map((track) => track.artist).filter(Boolean)))
    .map((artist) => ({
      artist,
      count: tracks.filter((track) => track.artist === artist).length,
      sample: tracks.find((track) => track.artist === artist),
    }))
    .sort((a, b) => b.count - a.count || a.artist.localeCompare(b.artist))
    .slice(0, 12);
  const trending = ["Get Low", "DMX", "Eminem", "2Pac", "50 Cent", "House of Pain"];

  return (
    <div className="search-page" data-screen-label="05 Search">
      <div className="particles" aria-hidden="true">
        {Array.from({ length: 40 }).map((_, i) => (
          <i key={i} style={{
            left: `${Math.random() * 100}%`,
            top: `${Math.random() * 100}%`,
            animationDelay: `${Math.random() * 12}s`,
            animationDuration: `${10 + Math.random() * 14}s`,
            opacity: 0.1 + Math.random() * 0.3,
          }}></i>
        ))}
      </div>

      <div className="search-hero">
        <span className="eyebrow">Catalog Search</span>
        <h1 className="display display-md" style={{ margin: "18px 0" }}>Find a track.</h1>
        <p style={{ color: "var(--ink-2)", fontSize: 15, maxWidth: 500, margin: "0 auto" }}>
          Search the current streaming catalog by song, artist, or collection.
        </p>

        <div className="search-bar">
          <Icon name="search" size={20} style={{ color: "var(--ink-2)" }} />
          <input
            value={q}
            onChange={e => setQ(e.target.value)}
            placeholder="Search songs or artists..."
          />
          <span className="ai-tag">{tracks.length} tracks</span>
          <button
            type="button"
            onClick={() => document.querySelector(".search-results")?.scrollIntoView({ behavior: "smooth", block: "start" })}
          >
            Search
          </button>
        </div>

        <div className="suggestions">
          {trending.map(s => (
            <button key={s} className="sug" onClick={() => setQ(s)}>{s}</button>
          ))}
        </div>
      </div>

      <div className="section-title" style={{ marginTop: 20 }}>
        <h2>Browse by Artist</h2>
        <button className="see-all">Most Tracks <Icon name="chevRight" size={12} /></button>
      </div>
      <div className="artist-browse-grid">
        {artistGroups.map(({ artist, count, sample }) => (
          <button key={artist} className="artist-tile" onClick={() => setQ(artist)}>
            <div className="artist-tile-art">{sample && <TrackArt track={sample} />}</div>
            <div className="artist-tile-body">
              <strong>{artist}</strong>
              <span>{count} {count === 1 ? "track" : "tracks"}</span>
            </div>
          </button>
        ))}
      </div>

      <div style={{ marginTop: 60 }}>
        <div className="section-title">
          <h2>Top Results</h2>
          <button className="see-all">Refine <Icon name="chevRight" size={12} /></button>
        </div>
        <div className="search-results">
          {(filtered.length ? filtered : tracks).map((track) => ({
            t: track.shortTitle || track.title,
            s: track.artist,
            v: track.variant,
            track,
          })).map((r, i) => (
            <button key={r.track ? r.track.id : i} className={`card ${r.track && r.track.explicit && !showExplicitContent ? "is-explicit-muted" : ""}`} onClick={() => r.track ? onPlayTrack(r.track) : onNav("Song")}>
              <div className="card-art">
                <TrackArt track={r.track} />
                <span className="card-play"><Icon name="play" size={16} /></span>
              </div>
              <div className="card-body">
                <h3 className="card-title">{r.t}</h3>
                <span className="card-meta">{r.track && r.track.explicit && !showExplicitContent && <em className="explicit-badge">E</em>} {r.s}</span>
              </div>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
};

window.SearchScreen = SearchScreen;