/* ============================================================
   Views — Home, Library, Album, Search, Playlist, Recent
   ============================================================ */

const { useState: useStateV, useMemo: useMemoV, useEffect: useEffectV } = React;

// =============================================================
// AlbumCard — used in all grids
// =============================================================
function AlbumCard({ album, onOpen, onPlay }) {
  const Ic = window.Icons;
  return (
    <div className="album-card" onClick={() => onOpen?.(album)}>
      <div className="cover">
        <Cover album={album} text={true} />
        <button
          className="play-fab"
          onClick={(e) => {e.stopPropagation();onPlay?.(album);}}
          title="Play">
          
          <Ic.Play size={16} />
        </button>
      </div>
      <p className="title">{album.title}</p>
      <p className="meta">{album.isSingle ? "Single" : "Album"} · {album.artist} · {album.year}</p>
    </div>);

}

// =============================================================
// HOME — Recently played, featured albums, singles row, playlists
// =============================================================
function HomeView({ ctx }) {
  const Ic = window.Icons;
  const recentAlbums = ctx.recentTracks.
  map((id) => ctx.albumOf(ctx.trackById(id))).
  filter(Boolean).
  filter((a, i, arr) => arr.findIndex((x) => x.id === a.id) === i) // unique
  .slice(0, 6);

  const featured = window.MUSIC_DB.albums.slice(0, 6);
  const singlesRow = window.MUSIC_DB.singles.slice(0, 12);
  const moreAlbums = window.MUSIC_DB.albums.slice(4);

  const greeting = (() => {
    const h = new Date().getHours();
    if (h < 6) return "Still up?";
    if (h < 12) return "Good morning";
    if (h < 18) return "Good afternoon";
    return "Good evening";
  })();

  return (
    <div data-screen-label="Home">
      <section className="section" style={{ marginTop: 8 }}>
        <div className="section-head">
          <div>
            <div style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--gold)", fontWeight: 700, marginBottom: 6 }}>
              {greeting}
            </div>
            <h2 className="section-title">Welcome <em>back</em></h2>
          </div>
        </div>

        <div className="row-played">
          {recentAlbums.map((a) =>
          <div className="played-card" key={a.id} onClick={() => ctx.openAlbum(a)}>
              <div className="mini-cover"><Cover album={a} text={false} /></div>
              <div style={{ minWidth: 0, flex: 1 }}>
                <div className="t">{a.title}</div>
                <div className="a">{a.artist}</div>
              </div>
              <button className="play-mini" onClick={(e) => {e.stopPropagation();ctx.playAlbum(a);}}>
                <Ic.Play size={14} />
              </button>
            </div>
          )}
        </div>
      </section>

      <section className="section">
        <div className="section-head">
          <h2 className="section-title">Featured <em>Albums</em></h2>
          <span className="section-more" onClick={() => ctx.setView({ kind: "library", filter: "albums" })}>See all</span>
        </div>
        <div className="grid-albums">
          {featured.map((a) =>
          <AlbumCard key={a.id} album={a} onOpen={ctx.openAlbum} onPlay={ctx.playAlbum} />
          )}
        </div>
      </section>

      <section className="section">
        <div className="section-head">
          <h2 className="section-title">Your <em>Playlists</em></h2>
          <span className="section-more" onClick={() => ctx.setView({ kind: "library", filter: "playlists" })}>See all</span>
        </div>
        <div className="grid-albums">
          {window.MUSIC_PLAYLISTS.map((p) =>
          <PlaylistCard key={p.id} playlist={p} onClick={() => ctx.openPlaylist(p)} ctx={ctx} />
          )}
        </div>
      </section>

      <section className="section">
        <div className="section-head">
          <h2 className="section-title">Singles <em>·</em> A-Sides</h2>
          <span className="section-more" onClick={() => ctx.setView({ kind: "library", filter: "singles" })}>See all</span>
        </div>
        <div className="grid-albums dense">
          {singlesRow.map((a) =>
          <AlbumCard key={a.id} album={a} onOpen={ctx.openAlbum} onPlay={ctx.playAlbum} />
          )}
        </div>
      </section>

      <section className="section">
        <div className="section-head">
          <h2 className="section-title">More <em>from the floor</em></h2>
        </div>
        <div className="grid-albums">
          {moreAlbums.map((a) =>
          <AlbumCard key={a.id} album={a} onOpen={ctx.openAlbum} onPlay={ctx.playAlbum} />
          )}
        </div>
      </section>
    </div>);

}

// =============================================================
// PlaylistCard — used in home + library
// =============================================================
function PlaylistCard({ playlist, onClick, ctx }) {
  // build a 2x2 mosaic from the first 4 tracks' albums
  const tracks = playlist.trackIds.map((id) => ctx.trackById(id)).filter(Boolean);
  const covers = [];
  for (const t of tracks) {
    const a = ctx.albumOf(t);
    if (a && !covers.find((c) => c.id === a.id)) covers.push(a);
    if (covers.length === 4) break;
  }
  while (covers.length < 4) covers.push(covers[0] || null);

  return (
    <div className="album-card" onClick={onClick}>
      <div className="cover" style={{
        position: "relative",
        background: `linear-gradient(135deg, ${playlist.color1}, ${playlist.color2})`,
        overflow: "hidden"
      }}>
        <div style={{
          position: "absolute",
          inset: 0,
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gridTemplateRows: "1fr 1fr",
          opacity: 0.85,
          transform: "rotate(-12deg) scale(1.4) translateY(10%)",
          transformOrigin: "center"
        }}>
          {covers.map((a, i) =>
          <div key={i} style={{ overflow: "hidden" }}>
              {a && <Cover album={a} text={false} />}
            </div>
          )}
        </div>
        <div style={{
          position: "absolute",
          inset: 0,
          background: "linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.7) 100%)",
          display: "flex",
          flexDirection: "column",
          justifyContent: "flex-end",
          padding: "8% 8% 10%"
        }}>
          <div style={{
            fontFamily: "var(--f-display)",
            fontWeight: 900,
            fontSize: "12cqw",
            lineHeight: 0.9,
            textTransform: "uppercase",
            color: "#fff",
            letterSpacing: "0.005em",
            textWrap: "balance",
            textShadow: "0 2px 8px rgba(0,0,0,0.4)"
          }}>{playlist.name}</div>
        </div>
      </div>
      <p className="title">{playlist.name}</p>
      <p className="meta">Playlist · {playlist.trackIds.length} tracks</p>
    </div>);

}

// =============================================================
// LIBRARY — albums / singles / playlists
// =============================================================
function LibraryView({ ctx, filter = "all" }) {
  const Ic = window.Icons;
  const [f, setF] = useStateV(filter);
  const [sort, setSort] = useStateV("recent");
  useEffectV(() => {setF(filter);}, [filter]);

  let items = [];
  if (f === "all" || f === "albums") items = items.concat(window.MUSIC_DB.albums);
  if (f === "all" || f === "singles") items = items.concat(window.MUSIC_DB.singles);

  if (sort === "title") items = [...items].sort((a, b) => a.title.localeCompare(b.title));
  if (sort === "artist") items = [...items].sort((a, b) => a.artist.localeCompare(b.artist));
  if (sort === "year") items = [...items].sort((a, b) => b.year - a.year);

  return (
    <div data-screen-label="Library">
      <section className="section" style={{ marginTop: 8 }}>
        <div className="section-head">
          <h2 className="section-title">Your <em>Library</em></h2>
          <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
            <span style={{ fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 700 }}>
              {sort === "recent" ? "Recent" : sort === "title" ? "A-Z" : sort === "artist" ? "Artist" : "Year"}
            </span>
            <button className="btn-icon" onClick={() => {
              const order = ["recent", "title", "artist", "year"];
              setSort(order[(order.indexOf(sort) + 1) % order.length]);
            }}>
              <Ic.List size={16} />
            </button>
          </div>
        </div>

        <div className="chip-row">
          <button className={"chip " + (f === "all" ? "on" : "")} onClick={() => setF("all")}>All</button>
          <button className={"chip pink " + (f === "playlists" ? "on" : "")} onClick={() => setF("playlists")}>Playlists</button>
          <button className={"chip " + (f === "albums" ? "on" : "")} onClick={() => setF("albums")}>Albums</button>
          <button className={"chip " + (f === "singles" ? "on" : "")} onClick={() => setF("singles")}>Singles</button>
          <button className={"chip"} onClick={() => ctx.setView({ kind: "liked" })}>Favorites</button>
        </div>

        {f === "playlists" ?
        <div className="grid-albums">
            {window.MUSIC_PLAYLISTS.map((p) =>
          <PlaylistCard key={p.id} playlist={p} onClick={() => ctx.openPlaylist(p)} ctx={ctx} />
          )}
          </div> :

        <div className="grid-albums">
            {items.map((a) =>
          <AlbumCard key={a.id} album={a} onOpen={ctx.openAlbum} onPlay={ctx.playAlbum} />
          )}
          </div>
        }
      </section>
    </div>);

}

// =============================================================
// ALBUM detail
// =============================================================
function AlbumView({ ctx, albumId }) {
  const Ic = window.Icons;
  const album = window.MUSIC_DB.all.find((a) => a.id === albumId);
  if (!album) return <div style={{ padding: 40 }}>Not found.</div>;

  const totalSeconds = album.tracks.reduce((s, t) => s + t.d, 0);
  const isPlayingAlbum = ctx.current && album.tracks.find((t) => t.id === ctx.current.id);

  const tint = album.cover?.c1 || "#ff3d9a";
  const tint2 = album.cover?.c2 || "#f5c14b";

  return (
    <div data-screen-label="Album">
      <div className="hero" style={{ "--hero-tint": tint + "70" }}>
        <div className="hero-cover">
          <Cover album={album} text={true} />
        </div>
        <div className="hero-meta">
          <div className="hero-eyebrow">{album.isSingle ? "Single" : "Album"}</div>
          <h1 className="hero-title">{album.title}</h1>
          <div className="hero-line">
            <strong>{album.artist}</strong>
            <span className="dot" />
            <span>{album.year}</span>
            <span className="dot" />
            <span>{album.tracks.length} {album.tracks.length === 1 ? "track" : "tracks"}</span>
            <span className="dot" />
            <span>{Math.round(totalSeconds / 60)} min</span>
          </div>
        </div>
      </div>

      <div className="hero-actions">
        <button className="btn-play" onClick={() => isPlayingAlbum && ctx.playing ? ctx.togglePlay() : ctx.playAlbum(album)}>
          {isPlayingAlbum && ctx.playing ? <Ic.Pause size={22} /> : <Ic.Play size={22} />}
        </button>
        <button className="btn-icon" onClick={() => {ctx.setShuffle(true);ctx.playAlbum(album, true);}} title="Shuffle play">
          <Ic.Shuffle size={20} />
        </button>
        <button
          className={"btn-icon " + (ctx.isLiked(album.id) ? "active" : "")}
          onClick={() => ctx.toggleLike(album.id)}
          title="Favorite album">
          
          <Ic.Heart size={26} fill={ctx.isLiked(album.id) ? "currentColor" : "none"} />
        </button>
        <button
          className="btn-icon"
          title="Share album"
          onClick={() => ctx.openShare({ kind: "album", id: album.id, label: `${album.title} — ${album.artist}` })}
        >
          <Ic.Share size={20} />
        </button>
        <div className="spacer" />
        <button
          className={"btn-ghost " + (ctx.quality === "master" ? "on" : "")}
          onClick={() => ctx.setQualityMenu(true)}>
          
          {ctx.quality === "master" ? "✦ Master Quality" : ctx.quality.toUpperCase()}
        </button>
      </div>

      <div className="tracklist">
        <div className="tracklist-head">
          <div>#</div>
          <div>Title</div>
          <div>Plays</div>
          <div></div>
          <div style={{ textAlign: "right" }}><Ic.Clock size={14} /></div>
        </div>
        {album.tracks.map((t, i) => {
          const isPlaying = ctx.current?.id === t.id;
          const plays = ctx.playsFor(t.id);
          return (
            <div
              key={t.id}
              className={"track " + (isPlaying ? "playing" : "")}
              onClick={() => ctx.playTrack(t, album)}>
              
              <div className="track-num">
                {isPlaying && ctx.playing ?
                <div className="bars">
                    <span /><span /><span /><span />
                  </div> :

                <>
                    <span className="num">{i + 1}</span>
                    <button
                    className="icon"
                    onClick={(e) => {e.stopPropagation();ctx.playTrack(t, album);}}
                    style={{ display: "grid", placeItems: "center" }}>
                    
                      <Ic.Play size={14} />
                    </button>
                  </>
                }
              </div>
              <div className="track-info">
                <div className="track-title-wrap">
                  <div className="track-title">{t.title}</div>
                  {window.MUSIC_DB.lyrics[t.id] &&
                  <div style={{ fontSize: 10, color: "var(--gold)", letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 700, marginTop: 2 }}>
                      ♪ Lyrics
                    </div>
                  }
                </div>
              </div>
              <div className="track-meta">
                <span data-comment-anchor="dbc8654216-span-364-17">
                  {plays > 0 ? plays.toLocaleString() : <span style={{ color: "var(--ink-4)" }}>—</span>}
                </span>
              </div>
              <div className="track-quality-cell">
                <span className="track-quality" style={t.q === "master" ? { color: "var(--pink)", borderColor: "var(--pink)" } : {}} data-comment-anchor="56cb7d6c7b-span-367-17">
                  {t.q === "normal" ? "NORM" : t.q === "high" ? "HIGH" : t.q === "hifi" ? "HiFi" : "MAX"}
                </span>
              </div>
              <div className="track-time">
                <button
                  className={"btn-icon heart " + (ctx.isLiked(t.id) ? "on" : "")}
                  onClick={(e) => {e.stopPropagation();ctx.toggleLike(t.id);}}
                  style={{ width: 24, height: 24 }}>
                  
                  <Ic.Heart size={14} fill={ctx.isLiked(t.id) ? "currentColor" : "none"} />
                </button>
                <span>{fmtTime(t.d)}</span>
              </div>
            </div>);

        })}
      </div>
    </div>);

}

// =============================================================
// SEARCH
// =============================================================
function SearchView({ ctx, query }) {
  const q = (query || "").trim().toLowerCase();

  const matches = useMemoV(() => {
    if (!q) return { albums: [], tracks: [], artists: [] };
    const albums = window.MUSIC_DB.all.filter((a) =>
    a.title.toLowerCase().includes(q) || a.artist.toLowerCase().includes(q)
    );
    const tracks = [];
    for (const a of window.MUSIC_DB.all) {
      for (const t of a.tracks) {
        if (t.title.toLowerCase().includes(q)) tracks.push(t);
      }
    }
    const artistsSet = new Set();
    for (const a of window.MUSIC_DB.all) {
      if (a.artist.toLowerCase().includes(q)) artistsSet.add(a.artist);
    }
    return { albums, tracks: tracks.slice(0, 12), artists: [...artistsSet] };
  }, [q]);

  if (!q) {
    return (
      <div data-screen-label="Search">
        <section className="section" style={{ marginTop: 8 }}>
          <div className="section-head">
            <h2 className="section-title">Browse <em>by mood</em></h2>
          </div>
          <BrowseTiles ctx={ctx} />
        </section>
      </div>);

  }

  if (!matches.albums.length && !matches.tracks.length && !matches.artists.length) {
    return (
      <div className="search-empty" data-screen-label="Search">
        <h2>No matches</h2>
        <p>Try another title or artist.</p>
      </div>);

  }

  return (
    <div className="search-results" data-screen-label="Search">
      {matches.albums.length > 0 &&
      <section className="section">
          <div className="section-head"><h2 className="section-title">Albums <em>&amp; Singles</em></h2></div>
          <div className="grid-albums">
            {matches.albums.slice(0, 12).map((a) =>
          <AlbumCard key={a.id} album={a} onOpen={ctx.openAlbum} onPlay={ctx.playAlbum} />
          )}
          </div>
        </section>
      }
      {matches.tracks.length > 0 &&
      <section className="section">
          <div className="section-head"><h2 className="section-title">Tracks</h2></div>
          <div className="tracklist">
            {matches.tracks.map((t) => {
            const album = ctx.albumOf(t);
            const isPlaying = ctx.current?.id === t.id;
            return (
              <div key={t.id} className={"track " + (isPlaying ? "playing" : "")}
              onClick={() => ctx.playTrack(t, album)}>
                  <div className="track-num"><span className="num">♪</span></div>
                  <div className="track-info">
                    <div className="mini-cover"><Cover album={album} text={false} /></div>
                    <div className="track-title-wrap">
                      <div className="track-title">{t.title}</div>
                      <div className="track-artist">{t.artist}</div>
                    </div>
                  </div>
                  <div className="track-meta">{album?.title}</div>
                  <div><span className="track-quality" style={t.q === "master" ? { color: "var(--pink)", borderColor: "var(--pink)" } : {}}>{t.q.toUpperCase()}</span></div>
                  <div className="track-time"><span>{fmtTime(t.d)}</span></div>
                </div>);

          })}
          </div>
        </section>
      }
    </div>);

}

function BrowseTiles({ ctx }) {
  const tiles = [
  { name: "Slow Jams", c1: "#c4216f", c2: "#08040a" },
  { name: "Roller Disco", c1: "#ff8a3d", c2: "#ff3d9a" },
  { name: "Studio 54", c1: "#08040a", c2: "#f5c14b" },
  { name: "Cosmic Funk", c1: "#3a78ff", c2: "#ff3d9a" },
  { name: "Italian Disco", c1: "#e8dfc8", c2: "#c4216f" },
  { name: "Boogie", c1: "#f5c14b", c2: "#c4216f" },
  { name: "Late Night", c1: "#1a0510", c2: "#ff3d9a" },
  { name: "Workout", c1: "#ff3d9a", c2: "#f5c14b" }];

  return (
    <div className="grid-albums">
      {tiles.map((t) =>
      <div key={t.name} className="album-card" onClick={() => ctx.setSearch(t.name.toLowerCase())}>
          <div className="cover" style={{
          background: `linear-gradient(135deg, ${t.c1}, ${t.c2})`,
          display: "flex",
          alignItems: "flex-end",
          padding: "16px",
          position: "relative"
        }}>
            <div style={{
            fontFamily: "var(--f-display)",
            fontWeight: 900,
            fontSize: 22,
            textTransform: "uppercase",
            color: "#fff",
            letterSpacing: "0.005em",
            lineHeight: 0.95
          }}>{t.name}</div>
            {/* corner art motif */}
            <div style={{
            position: "absolute",
            right: -20, bottom: -20,
            width: 100, height: 100,
            background: "rgba(255,255,255,0.15)",
            transform: "rotate(20deg)",
            borderRadius: 12
          }} />
          </div>
        </div>
      )}
    </div>);

}

// =============================================================
// PLAYLIST detail
// =============================================================
function PlaylistView({ ctx, playlistId }) {
  const Ic = window.Icons;
  const p = window.MUSIC_PLAYLISTS.find((x) => x.id === playlistId);
  if (!p) return <div style={{ padding: 40 }}>Not found.</div>;
  const tracks = p.trackIds.map((id) => ctx.trackById(id)).filter(Boolean);
  const totalSeconds = tracks.reduce((s, t) => s + t.d, 0);

  return (
    <div data-screen-label="Playlist">
      <div className="hero" style={{ "--hero-tint": p.color1 + "70" }}>
        <div className="hero-cover" style={{
          background: `linear-gradient(135deg, ${p.color1}, ${p.color2})`,
          position: "relative",
          overflow: "hidden"
        }}>
          <div style={{
            position: "absolute", inset: 0,
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gridTemplateRows: "1fr 1fr",
            transform: "rotate(-12deg) scale(1.4)",
            opacity: 0.9
          }}>
            {tracks.slice(0, 4).map((t, i) => {
              const a = ctx.albumOf(t);
              return <div key={i} style={{ overflow: "hidden" }}>{a && <Cover album={a} text={false} />}</div>;
            })}
          </div>
        </div>
        <div className="hero-meta">
          <div className="hero-eyebrow">Playlist</div>
          <h1 className="hero-title">{p.name}</h1>
          <div className="hero-line">
            <strong>{p.desc}</strong>
            <span className="dot" />
            <span>{tracks.length} tracks</span>
            <span className="dot" />
            <span>{Math.round(totalSeconds / 60)} min</span>
          </div>
        </div>
      </div>

      <div className="hero-actions">
        <button className="btn-play" onClick={() => ctx.playPlaylist(p)}>
          <Ic.Play size={22} />
        </button>
        <button className="btn-icon" onClick={() => {ctx.setShuffle(true);ctx.playPlaylist(p, true);}}>
          <Ic.Shuffle size={20} />
        </button>
        <button
          className={"btn-icon " + (ctx.isLiked(p.id) ? "active" : "")}
          onClick={() => ctx.toggleLike(p.id)}>
          
          <Ic.Heart size={26} fill={ctx.isLiked(p.id) ? "currentColor" : "none"} />
        </button>
        <button
          className="btn-icon"
          title="Share playlist"
          onClick={() => ctx.openShare({ kind: "album", id: p.id, label: p.name })}
        ><Ic.Share size={20} /></button>
      </div>

      <div className="tracklist">
        <div className="tracklist-head">
          <div>#</div>
          <div>Title</div>
          <div>Album</div>
          <div></div>
          <div style={{ textAlign: "right" }}><Ic.Clock size={14} /></div>
        </div>
        {tracks.map((t, i) => {
          const album = ctx.albumOf(t);
          const isPlaying = ctx.current?.id === t.id;
          return (
            <div key={i} className={"track " + (isPlaying ? "playing" : "")}
            onClick={() => ctx.playPlaylist(p, false, i)}>
              <div className="track-num">
                {isPlaying && ctx.playing ?
                <div className="bars"><span /><span /><span /><span /></div> :

                <>
                    <span className="num">{i + 1}</span>
                    <button className="icon" onClick={(e) => {e.stopPropagation();ctx.playPlaylist(p, false, i);}}
                  style={{ display: "grid", placeItems: "center" }}>
                      <Ic.Play size={14} />
                    </button>
                  </>
                }
              </div>
              <div className="track-info">
                <div className="mini-cover"><Cover album={album} text={false} /></div>
                <div className="track-title-wrap">
                  <div className="track-title">{t.title}</div>
                  <div className="track-artist">{t.artist}</div>
                </div>
              </div>
              <div className="track-meta"><span>{album?.title}</span></div>
              <div>
                <span className="track-quality" style={t.q === "master" ? { color: "var(--pink)", borderColor: "var(--pink)" } : {}}>{t.q.toUpperCase()}</span>
              </div>
              <div className="track-time">
                <button
                  className={"btn-icon heart " + (ctx.isLiked(t.id) ? "on" : "")}
                  onClick={(e) => {e.stopPropagation();ctx.toggleLike(t.id);}}
                  style={{ width: 24, height: 24 }}>
                  
                  <Ic.Heart size={14} fill={ctx.isLiked(t.id) ? "currentColor" : "none"} />
                </button>
                <span>{fmtTime(t.d)}</span>
              </div>
            </div>);

        })}
      </div>
    </div>);

}

// =============================================================
// RECENT
// =============================================================
function RecentView({ ctx }) {
  const Ic = window.Icons;
  const tracks = ctx.recentTracks.map((id) => ctx.trackById(id)).filter(Boolean);
  return (
    <div data-screen-label="Recent">
      <section className="section" style={{ marginTop: 8 }}>
        <div className="section-head">
          <h2 className="section-title">Recently <em>Played</em></h2>
        </div>
        <div className="tracklist">
          <div className="tracklist-head">
            <div>#</div><div>Title</div><div>Album</div><div></div><div style={{ textAlign: "right" }}><Ic.Clock size={14} /></div>
          </div>
          {tracks.map((t, i) => {
            const album = ctx.albumOf(t);
            const isPlaying = ctx.current?.id === t.id;
            return (
              <div key={i} className={"track " + (isPlaying ? "playing" : "")}
              onClick={() => ctx.playTrack(t, album)}>
                <div className="track-num">
                  {isPlaying && ctx.playing ?
                  <div className="bars"><span /><span /><span /><span /></div> :
                  <span className="num">{i + 1}</span>}
                </div>
                <div className="track-info">
                  <div className="mini-cover"><Cover album={album} text={false} /></div>
                  <div className="track-title-wrap">
                    <div className="track-title">{t.title}</div>
                    <div className="track-artist">{t.artist}</div>
                  </div>
                </div>
                <div className="track-meta">{album?.title}</div>
                <div><span className="track-quality" style={t.q === "master" ? { color: "var(--pink)", borderColor: "var(--pink)" } : {}}>{t.q.toUpperCase()}</span></div>
                <div className="track-time"><span>{fmtTime(t.d)}</span></div>
              </div>);

          })}
        </div>
      </section>
    </div>);

}

// =============================================================
// LIKED
// =============================================================
function LikedView({ ctx }) {
  const Ic = window.Icons;
  const ids = [...ctx.likes];
  const tracks = ids.map((id) => ctx.trackById(id)).filter(Boolean);

  return (
    <div data-screen-label="Liked">
      <div className="hero" style={{ "--hero-tint": "rgba(255,61,154,0.5)" }}>
        <div className="hero-cover" style={{
          background: "linear-gradient(135deg, #ff3d9a, #c4216f 60%, #1a0510)",
          display: "grid",
          placeItems: "center"
        }}>
          <Ic.Heart size={120} fill="white" stroke="white" style={{ filter: "drop-shadow(0 8px 24px rgba(0,0,0,0.5))" }} />
        </div>
        <div className="hero-meta">
          <div className="hero-eyebrow">Playlist</div>
          <h1 className="hero-title">Liked <em>Songs</em></h1>
          <div className="hero-line">
            <strong>Your favorites</strong>
            <span className="dot" />
            <span>{tracks.length} {tracks.length === 1 ? "track" : "tracks"}</span>
          </div>
        </div>
      </div>
      <div className="hero-actions">
        {tracks.length > 0 &&
        <button className="btn-play" onClick={() => {
          ctx.playList(tracks, 0);
        }}>
            <Ic.Play size={22} />
          </button>
        }
      </div>
      {tracks.length === 0 ?
      <div style={{ padding: "60px 36px", textAlign: "center", color: "var(--ink-3)" }}>
          <Ic.Heart size={42} style={{ color: "var(--ink-4)", marginBottom: 16 }} />
          <div style={{ fontFamily: "var(--f-display)", fontSize: 24, color: "var(--ink-2)", textTransform: "uppercase", marginBottom: 6 }}>Nothing here yet</div>
          <div style={{ fontSize: 13 }}>Tap the heart on any track or album to save it.</div>
        </div> :

      <div className="tracklist">
          {tracks.map((t, i) => {
          const album = ctx.albumOf(t);
          const isPlaying = ctx.current?.id === t.id;
          return (
            <div key={i} className={"track " + (isPlaying ? "playing" : "")}
            onClick={() => ctx.playList(tracks, i)}>
                <div className="track-num"><span className="num">{i + 1}</span></div>
                <div className="track-info">
                  <div className="mini-cover"><Cover album={album} text={false} /></div>
                  <div className="track-title-wrap">
                    <div className="track-title">{t.title}</div>
                    <div className="track-artist">{t.artist}</div>
                  </div>
                </div>
                <div className="track-meta">{album?.title}</div>
                <div><span className="track-quality" style={t.q === "master" ? { color: "var(--pink)", borderColor: "var(--pink)" } : {}}>{t.q.toUpperCase()}</span></div>
                <div className="track-time"><span>{fmtTime(t.d)}</span></div>
              </div>);

        })}
        </div>
      }
    </div>);

}

Object.assign(window, { HomeView, LibraryView, AlbumView, SearchView, PlaylistView, RecentView, LikedView, AlbumCard, PlaylistCard });