// Spotless — страницы плейлиста/микса, «Любимые треки», «Показать все», жанра.

// Шапка таблицы треков (с обложками)
const TrackHead = () => {
  const t = useApp().t;
  return (
    <div className="trow-head">
      <span className="sec-label" style={{ textAlign: "right" }}>#</span>
      <span></span>
      <span className="sec-label">{t.tracks}</span>
      <span className="sec-label alb">{t.albums}</span>
      <span></span>
      <Ic d={ICONS.clock} size={15} style={{ color: "var(--mut)", justifySelf: "end" }} />
    </div>
  );
};

const PagePlaylist = ({ id }) => {
  const app = useApp();
  const t = app.t;
  const meta = app.findPl(id);
  if (!meta) return <PageLibrary />;
  const ids = app.playlistTracks(id);
  const isMix = meta.kind === "mix";
  const owner = meta.owner ? DB.friends.find(f => f.id === meta.owner) : null;
  const name = plName(app.lang, meta);
  const ownerName = isMix ? "spotless" : owner ? owner.name : "Лиза";
  const canEdit = !!meta.byMe;
  return (
    <div className="fade-in" data-screen-label={"Плейлист: " + name}>
      <header className="hero">
        <Cover hue={meta.hue} size="clamp(150px, 18cqi, 240px)" radius={24} />
        <div style={{ minWidth: 0, paddingBottom: 4 }}>
          <div className="sec-label" style={{ marginBottom: 10, display: "flex", alignItems: "center", gap: 8 }}>
            {isMix ? t.mixLabel : t.plLabel} · {ownerName}
            {meta.collab && (
              <span style={{ display: "inline-flex", alignItems: "center", gap: 5, color: "var(--acc)" }}>
                <Ic d={ICONS.users} size={13} />{t.collab}
              </span>
            )}
          </div>
          <h1 style={{ fontSize: "clamp(30px, 5cqi, 52px)", fontWeight: 800, letterSpacing: "-0.03em", lineHeight: 1.02, marginBottom: 14, textWrap: "balance" }}>{name}</h1>
          <div style={{ fontSize: 14, color: "var(--mut)" }}>
            {ids.length} {t.tracksN(ids.length)}{ids.length > 0 ? ` · ${minutesOf(ids)} ${t.min}` : ""}
          </div>
        </div>
      </header>

      <div className="actions">
        <button className="playbig" aria-label={t.play} disabled={!ids.length} onClick={() => app.playContext(ids)} style={{ opacity: ids.length ? 1 : 0.4 }}>
          <Ic d={ICONS.play} size={22} fill="currentColor" />
        </button>
        <span className="iconbtn ring" style={{ width: 48, height: 48, padding: 0 }}><ShuffleBtn size={48} icon={19} /></span>
        {ids.length > 0 && <DLButton size={48} listIds={ids} className="ring" />}
        <ShareBtn className="iconbtn ring no-phone" />
        <MoreBtn ctx={{ kind: "playlist", id }} />
      </div>

      {ids.length === 0 ? (
        <div style={{ padding: "54px 0", textAlign: "center", color: "var(--mut)" }}>
          <Ic d={ICONS.plus} size={32} style={{ margin: "0 auto 14px", opacity: 0.55 }} />
          <p style={{ fontSize: 14.5, maxWidth: 380, margin: "0 auto", lineHeight: 1.6, textWrap: "pretty" }}>{t.plEmpty}</p>
        </div>
      ) : (
        <React.Fragment>
          <TrackHead />
          <div style={{ marginBottom: 34 }}>
            {ids.map((tid, i) => <TrackRow key={tid + i} trackId={tid} num={i + 1} plId={canEdit ? id : undefined} />)}
          </div>
        </React.Fragment>
      )}
    </div>
  );
};

// ---------- Любимые треки ----------
const PageLiked = () => {
  const app = useApp();
  const t = app.t;
  const ids = app.likedIds();
  return (
    <div className="fade-in" data-screen-label="Любимые треки">
      <header className="hero">
        <div style={{
          width: "clamp(150px, 16cqi, 210px)", aspectRatio: "1", borderRadius: "calc(var(--r) - 6px)",
          background: "linear-gradient(135deg, oklch(var(--cover-l1) 0.09 95), oklch(var(--cover-l2) 0.09 145))",
          display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
          boxShadow: "var(--island-shadow)",
        }}>
          <Ic d={ICONS.heart} size={64} fill="currentColor" style={{ color: "var(--hot)" }} />
        </div>
        <div style={{ minWidth: 0, paddingBottom: 4 }}>
          <div className="sec-label" style={{ marginBottom: 10 }}>{t.plLabel} · Лиза</div>
          <h1 style={{ fontSize: "clamp(30px, 5cqi, 52px)", fontWeight: 800, letterSpacing: "-0.03em", lineHeight: 1.02, marginBottom: 14 }}>{t.likedTracks}</h1>
          <div style={{ fontSize: 14, color: "var(--mut)" }}>{ids.length} {t.tracksN(ids.length)} · {minutesOf(ids)} {t.min}</div>
        </div>
      </header>

      <div className="actions">
        <button className="playbig" aria-label={t.play} onClick={() => app.playContext(ids)}>
          <Ic d={ICONS.play} size={22} fill="currentColor" />
        </button>
        <span className="iconbtn ring" style={{ width: 48, height: 48, padding: 0 }}><ShuffleBtn size={48} icon={19} /></span>
        <DLButton size={48} listIds={ids} className="ring" />
        <ShareBtn />
      </div>

      <TrackHead />
      <div style={{ marginBottom: 34 }}>
        {ids.map((tid, i) => <TrackRow key={tid} trackId={tid} num={i + 1} />)}
      </div>
    </div>
  );
};

// ---------- «Показать все» ----------
// id — что показать: recent | new | mixes | disc:<артист> | similar:<артист>.
// Возвращает заголовок и свойства карточек, или null — такого артиста нет (старая ссылка)
const RECENT_ALL = [
  { kind: "playlist", id: "quiet" }, { kind: "artist", id: "lowtide" },
  { kind: "album", id: "grunt" }, { kind: "artist", id: "velvet" },
  { kind: "playlist", id: "train" }, { kind: "album", id: "seven" },
  { kind: "album", id: "salt" }, { kind: "artist", id: "bruno" },
  { kind: "playlist", id: "kitchen" }, { kind: "album", id: "pole" },
];
const showAllCards = (app, id) => {
  const t = app.t;
  const [key, arg] = (id || "").split(":");
  const release = (al) => albumCard(app, al, `${t[al.type]} · ${DB.artists[al.artist].name}`);
  if (key === "recent") return [t.recent, RECENT_ALL.map(r => {
    if (r.kind === "playlist") { const pl = DB.findPlaylist(r.id); return playlistCard(app, pl, t.nTracks(app.playlistTracks(pl.id).length)); }
    if (r.kind === "artist") return artistCard(app, DB.artists[r.id], t.artist);
    return release(DB.albums[r.id]);
  })];
  if (key === "new") return [t.newFromArtists, ["glass", "animal", "pole", "hourglass", "cassette", "salt", "seven", "grunt"].map(aid => release(DB.albums[aid]))];
  if (key === "mixes") return [t.madeForYou, DB.mixes.map(mx => playlistCard(app, mx, "spotless", mx.tracks))];
  const ar = DB.artists[arg];
  if (key === "disc" && ar) return [`${t.discography} — ${ar.name}`, artistAlbums(arg).map(al => albumCard(app, al, `${t[al.type]} · ${al.year}`))];
  if (key === "similar" && ar) return [`${t.similar} — ${ar.name}`, Object.values(DB.artists).filter(a => a.id !== arg).map(a => artistCard(app, a, listenersLine(app, a)))];
  if (key === "disc" || key === "similar") return null;
  return [t.showAll, []];
};

const PageShowAll = ({ id }) => {
  const app = useApp();
  const found = showAllCards(app, id);
  if (!found) return <PageHome />;
  const [title, cards] = found;
  return (
    <div className="fade-in" data-screen-label={"Показать все: " + title}>
      <h1 style={{ fontSize: 26, fontWeight: 800, letterSpacing: "-0.02em", margin: "30px 0 20px" }}>{title}</h1>
      <div className="cardrow">
        {cards.map((c, i) => <MediaCard key={i} {...c} />)}
      </div>
    </div>
  );
};

// ---------- Жанр ----------
const PageGenre = ({ id }) => {
  const app = useApp();
  const t = app.t;
  const entry = (app.lang === "ru" ? GENRES_RU : GENRES_EN).find(g => g[0] === id);
  const label = entry ? entry[1] : id;
  const hue = entry ? entry[2] : 60;
  const g = DB.genres[id] || { artists: [] };
  const artists = g.artists.map(aid => DB.artists[aid]);
  const albums = Object.values(DB.albums).filter(a => g.artists.includes(a.artist));
  const release = (al) => <MediaCard key={al.id} {...albumCard(app, al, `${t[al.type]} · ${DB.artists[al.artist].name}`)} />;

  return (
    <div className="fade-in" data-screen-label={"Жанр: " + label}>
      <header style={{
        margin: "26px 0 28px", borderRadius: "var(--r)", padding: "42px 34px",
        background: `linear-gradient(135deg, oklch(var(--cover-l1) 0.06 ${hue}), oklch(var(--cover-l2) 0.06 ${hue + 40}))`,
      }}>
        <h1 style={{ fontSize: "clamp(32px, 5cqi, 48px)", fontWeight: 800, letterSpacing: "-0.03em" }}>{label}</h1>
      </header>

      {artists.length === 0 ? (
        <React.Fragment>
          <p style={{ fontSize: 14.5, color: "var(--mut)", marginBottom: 20, lineHeight: 1.6 }}>{t.genreGrow}</p>
          <div className="cardrow">{Object.values(DB.albums).slice(0, 6).map(release)}</div>
        </React.Fragment>
      ) : (
        <React.Fragment>
          <section style={{ marginBottom: 30 }}>
            <div className="h-row"><h2>{t.artists}</h2></div>
            <div className="cardrow">
              {artists.map(a => <MediaCard key={a.id} {...artistCard(app, a, listenersLine(app, a))} />)}
            </div>
          </section>
          <section style={{ marginBottom: 30 }}>
            <div className="h-row"><h2>{t.albums}</h2></div>
            <div className="cardrow">{albums.map(release)}</div>
          </section>
          <section>
            <div className="h-row"><h2>{t.tracks}</h2></div>
            {topTracks(g.artists).slice(0, 5).map((tr, i) => <TrackRow key={tr.id} trackId={tr.id} num={i + 1} showPlays={true} />)}
          </section>
        </React.Fragment>
      )}
    </div>
  );
};

Object.assign(window, { PagePlaylist, PageLiked, PageShowAll, PageGenre, TrackHead });