Psychotoxical-psysonic/src/pages/NowPlaying.tsx

import React, { useState, useRef, useEffect, useCallback, memo } from 'react';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Music, Star, ExternalLink, MicVocal, Heart } from 'lucide-react';
import { usePlayerStore } from '../store/playerStore';
import { useLyricsStore } from '../store/lyricsStore';
import {
  buildCoverArtUrl, coverArtCacheKey, getSong, star, unstar,
  getAlbum, getArtistInfo,
  SubsonicSong, SubsonicArtistInfo,
} from '../api/subsonic';
import { useCachedUrl } from '../components/CachedImage';

// ─── Helpers ──────────────────────────────────────────────────────────────────

function formatTime(s: number): string {
  if (!s || isNaN(s)) return '0:00';
  const m = Math.floor(s / 60);
  return `${m}:${Math.floor(s % 60).toString().padStart(2, '0')}`;
}

function sanitizeHtml(html: string): string {
  const parser = new DOMParser();
  const doc = parser.parseFromString(html, 'text/html');
  doc.querySelectorAll('script, style, iframe, object, embed, form, input, button, select, base, meta, link').forEach(el => el.remove());
  doc.querySelectorAll('*').forEach(el => {
    Array.from(el.attributes).forEach(attr => {
      const name = attr.name.toLowerCase();
      const val = attr.value.toLowerCase().trim();
      if (name.startsWith('on') || (name === 'href' && (val.startsWith('javascript:') || val.startsWith('data:'))) || (name === 'src' && (val.startsWith('javascript:') || val.startsWith('data:')))) {
        el.removeAttribute(attr.name);
      }
    });
  });
  return doc.body.innerHTML;
}

function renderStars(rating?: number) {
  if (!rating) return null;
  return (
    <div style={{ display: 'flex', gap: '3px', alignItems: 'center' }}>
      {[1, 2, 3, 4, 5].map(i => (
        <Star key={i} size={13}
          fill={i <= rating ? 'var(--ctp-yellow)' : 'none'}
          color={i <= rating ? 'var(--ctp-yellow)' : 'rgba(255,255,255,0.4)'}
        />
      ))}
    </div>
  );
}

// ─── Animated EQ Bars ─────────────────────────────────────────────────────────

const BAR_COUNT = 24;

const EQBars = memo(function EQBars({ isPlaying }: { isPlaying: boolean }) {
  const barsRef    = useRef<(HTMLDivElement | null)[]>([]);
  const heights    = useRef<number[]>(Array.from({ length: BAR_COUNT }, () => 0.08));
  const targets    = useRef<number[]>(Array.from({ length: BAR_COUNT }, () => Math.random() * 0.5 + 0.1));
  const speeds     = useRef<number[]>(Array.from({ length: BAR_COUNT }, () => 0.06 + Math.random() * 0.08));
  const rafRef     = useRef<number>();

  const animate = useCallback(() => {
    heights.current = heights.current.map((h, i) => {
      const t = targets.current[i];
      const newH = h + (t - h) * speeds.current[i];
      if (Math.abs(newH - t) < 0.015) {
        targets.current[i] = Math.random() * 0.88 + 0.06;
        speeds.current[i] = 0.05 + Math.random() * 0.10;
      }
      return newH;
    });
    barsRef.current.forEach((bar, i) => {
      if (bar) bar.style.height = `${Math.round(heights.current[i] * 100)}%`;
    });
    rafRef.current = requestAnimationFrame(animate);
  }, []);

  useEffect(() => {
    if (isPlaying) {
      rafRef.current = requestAnimationFrame(animate);
    } else {
      if (rafRef.current) cancelAnimationFrame(rafRef.current);
      // Settle bars to a low resting height
      heights.current = heights.current.map(() => 0.08);
      barsRef.current.forEach(bar => {
        if (bar) bar.style.height = '8%';
      });
    }
    return () => { if (rafRef.current) cancelAnimationFrame(rafRef.current); };
  }, [isPlaying, animate]);

  return (
    <div className="np-eq-wrap">
      <div className="np-eq-bars">
        {Array.from({ length: BAR_COUNT }).map((_, i) => (
          <div
            key={i}
            className="np-eq-bar"
            ref={el => { barsRef.current[i] = el; }}
          />
        ))}
      </div>
    </div>
  );
});

// ─── Tag Cloud ────────────────────────────────────────────────────────────────

interface TagCloudProps {
  similarArtists: Array<{ id: string; name: string }>;
  onArtistClick: (id: string) => void;
}

function strHash(s: string): number {
  let h = 0;
  for (const c of s) h = (h * 31 + c.charCodeAt(0)) & 0xffff;
  return h;
}

function TagCloud({ similarArtists, onArtistClick }: TagCloudProps) {
  const { t } = useTranslation();
  if (similarArtists.length === 0) return null;

  const getTagStyle = (name: string, idx: number): React.CSSProperties => {
    const h = strHash(name);
    const sizePool = [10, 11, 12, 13, 14, 15, 16];
    const size = sizePool[(h + idx * 7) % sizePool.length];
    const weight = size >= 15 ? 600 : size >= 13 ? 500 : 400;
    const pad = size >= 15 ? '5px 10px' : '4px 8px';
    const opacity = 0.6 + ((h % 5) * 0.08);
    const verticals = [-5, -3, -1, 0, 2, 4, 5, -4, 2, -2, 4, 0, 3, -3, 1];
    const ty = verticals[(h + idx * 4) % verticals.length];
    return { fontSize: `${size}px`, fontWeight: weight, padding: pad, opacity, transform: `translateY(${ty}px)` };
  };

  return (
    <div className="np-tag-cloud">
      <div className="np-tag-cloud-header">{t('artistDetail.similarArtists')}</div>
      {([similarArtists.slice(0, 3), similarArtists.slice(3, 6)] as const).map((row, rowIdx) => (
        <div key={rowIdx} className="np-tag-cloud-tags" style={rowIdx === 0 ? { marginBottom: '14px' } : undefined}>
          {row.map((a, i) => (
            <span
              key={a.id}
              className="np-tag np-tag-clickable"
              style={getTagStyle(a.name, rowIdx * 3 + i)}
              onClick={() => onArtistClick(a.id)}
              data-tooltip={t('nowPlaying.goToArtist')}
            >
              {a.name}
            </span>
          ))}
        </div>
      ))}
    </div>
  );
}


// ─── Album Tracklist ──────────────────────────────────────────────────────────

interface NpTrackListProps {
  albumTracks: SubsonicSong[];
  currentTrackId: string;
  album: string;
  albumId?: string;
  onNavigate: (path: string) => void;
}

const NpTrackList = memo(function NpTrackList({ albumTracks, currentTrackId, album, albumId, onNavigate }: NpTrackListProps) {
  const { t } = useTranslation();
  if (albumTracks.length === 0) return null;
  return (
    <div className="np-info-card">
      <div className="np-card-header">
        <h3 className="np-card-title">{t('nowPlaying.fromAlbum')}: <em style={{ fontStyle: 'normal', color: 'rgba(255,255,255,0.6)' }}>{album}</em></h3>
        {albumId && (
          <button className="np-card-link" onClick={() => onNavigate(`/album/${albumId}`)}>
            {t('nowPlaying.viewAlbum')} <ExternalLink size={12} />
          </button>
        )}
      </div>
      <div className="np-album-tracklist">
        {albumTracks.map(track => {
          const isActive = track.id === currentTrackId;
          return (
            <div key={track.id}
              className={`np-album-track${isActive ? ' active' : ''}`}
              onClick={() => albumId && onNavigate(`/album/${albumId}`)}
            >
              <span className="np-album-track-num">
                {isActive
                  ? <Star size={10} fill="var(--accent)" color="var(--accent)" />
                  : track.track ?? '—'
                }
              </span>
              <span className="np-album-track-title truncate">{track.title}</span>
              <span className="np-album-track-dur">{formatTime(track.duration)}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
});

// ─── Main Page ────────────────────────────────────────────────────────────────

export default function NowPlaying() {
  const { t } = useTranslation();
  const navigate = useNavigate();

  const currentTrack    = usePlayerStore(s => s.currentTrack);
  const isPlaying       = usePlayerStore(s => s.isPlaying);
  const showLyrics      = useLyricsStore(s => s.showLyrics);
  const activeTab       = useLyricsStore(s => s.activeTab);
  const isQueueVisible  = usePlayerStore(s => s.isQueueVisible);
  const toggleQueue     = usePlayerStore(s => s.toggleQueue);

  const stableNavigate = useCallback((path: string) => navigate(path), [navigate]);

  // Extra song metadata
  const [songMeta, setSongMeta] = useState<SubsonicSong | null>(null);
  useEffect(() => {
    if (!currentTrack) { setSongMeta(null); return; }
    getSong(currentTrack.id).then(setSongMeta);
  }, [currentTrack?.id]);

  // Artist info (bio + similar artists)
  const [artistInfo, setArtistInfo] = useState<SubsonicArtistInfo | null>(null);
  useEffect(() => {
    if (!currentTrack?.artistId) { setArtistInfo(null); return; }
    getArtistInfo(currentTrack.artistId).then(setArtistInfo).catch(() => setArtistInfo(null));
  }, [currentTrack?.artistId]);

  // Album tracks
  const [albumTracks, setAlbumTracks] = useState<SubsonicSong[]>([]);
  useEffect(() => {
    if (!currentTrack?.albumId) { setAlbumTracks([]); return; }
    getAlbum(currentTrack.albumId).then(d => setAlbumTracks(d.songs)).catch(() => setAlbumTracks([]));
  }, [currentTrack?.albumId]);

  // Bio expand toggle
  const [bioExpanded, setBioExpanded] = useState(false);
  useEffect(() => { setBioExpanded(false); }, [currentTrack?.artistId]);

  // Favorite
  const [starred, setStarred] = useState(false);
  useEffect(() => { setStarred(!!songMeta?.starred); }, [songMeta]);
  const toggleStar = async () => {
    if (!currentTrack) return;
    if (starred) { await unstar(currentTrack.id, 'song'); setStarred(false); }
    else          { await star(currentTrack.id, 'song');   setStarred(true);  }
  };

  // Cover
  const coverFetchUrl = currentTrack?.coverArt ? buildCoverArtUrl(currentTrack.coverArt, 800) : '';
  const coverKey      = currentTrack?.coverArt ? coverArtCacheKey(currentTrack.coverArt, 800) : '';
  const resolvedCover = useCachedUrl(coverFetchUrl, coverKey);



  const similarArtists = artistInfo?.similarArtist ?? [];

  return (
    <div className="np-page">

      <div className="np-main">
        {currentTrack ? (
          <>
            {/* ── Hero Card ── */}
            <div className="np-hero-card">

              {/* Left: meta info */}
              <div className="np-hero-left">
                <div className="np-hero-info">
                  <div className="np-title" style={{ color: 'var(--accent)' }}>{currentTrack.title}</div>
                  <div className="np-artist-album">
                    <span className="np-link"
                      onClick={() => currentTrack.artistId && navigate(`/artist/${currentTrack.artistId}`)}
                      style={{ cursor: currentTrack.artistId ? 'pointer' : 'default' }}
                    >{currentTrack.artist}</span>
                    <span className="np-sep">·</span>
                    <span className="np-link"
                      onClick={() => currentTrack.albumId && navigate(`/album/${currentTrack.albumId}`)}
                      style={{ cursor: currentTrack.albumId ? 'pointer' : 'default' }}
                    >{currentTrack.album}</span>
                    {currentTrack.year && <><span className="np-sep">·</span><span>{currentTrack.year}</span></>}
                  </div>
                  <div className="np-tech-row">
                    {songMeta?.genre && <span className="np-badge">{songMeta.genre}</span>}
                    {currentTrack.suffix && <span className="np-badge">{currentTrack.suffix.toUpperCase()}</span>}
                    {currentTrack.bitRate && <span className="np-badge">{currentTrack.bitRate} kbps</span>}
                    {currentTrack.duration && <span className="np-badge">{formatTime(currentTrack.duration)}</span>}
                    {renderStars(currentTrack.userRating)}
                    <button onClick={toggleStar} className="np-star-btn"
                      data-tooltip={starred ? t('contextMenu.unfavorite') : t('contextMenu.favorite')}
                    >
                      <Heart size={17} fill={starred ? 'var(--ctp-yellow)' : 'none'} color={starred ? 'var(--ctp-yellow)' : 'white'} />
                    </button>
                    <button
                      className="np-star-btn"
                      onClick={() => { if (!isQueueVisible) toggleQueue(); showLyrics(); }}
                      data-tooltip={t('player.lyrics')}
                      style={{ color: activeTab === 'lyrics' && isQueueVisible ? 'var(--accent)' : 'white' }}
                    >
                      <MicVocal size={17} />
                    </button>
                  </div>
                </div>
              </div>

              {/* Center: cover */}
              <div className="np-hero-cover-wrap">
                {resolvedCover
                  ? <img src={resolvedCover} alt="" className="np-cover" />
                  : <div className="np-cover np-cover-fallback"><Music size={52} /></div>
                }
              </div>

              {/* Right: tag cloud */}
              <TagCloud
                similarArtists={similarArtists}
                onArtistClick={id => navigate(`/artist/${id}`)}
              />

            </div>

            {/* ── About the Artist ── */}
            {artistInfo?.biography && (
              <div className="np-info-card">
                <div className="np-card-header">
                  <h3 className="np-card-title">{t('nowPlaying.aboutArtist')}</h3>
                  {currentTrack.artistId && (
                    <button className="np-card-link" onClick={() => navigate(`/artist/${currentTrack.artistId}`)}>
                      {t('nowPlaying.goToArtist')} <ExternalLink size={12} />
                    </button>
                  )}
                </div>
                <div className="np-artist-bio-row">
                  {artistInfo.largeImageUrl && (
                    <img
                      src={artistInfo.largeImageUrl}
                      alt={currentTrack.artist}
                      className="np-artist-thumb"
                      onError={e => { (e.target as HTMLImageElement).style.display = 'none'; }}
                    />
                  )}
                  <div className="np-bio-wrap">
                    <div
                      className={`np-bio-text${bioExpanded ? ' expanded' : ''}`}
                      dangerouslySetInnerHTML={{ __html: sanitizeHtml(artistInfo.biography) }}
                    />
                    <button className="np-bio-toggle" onClick={() => setBioExpanded(v => !v)}>
                      {bioExpanded ? t('nowPlaying.showLess') : t('nowPlaying.readMore')}
                    </button>
                  </div>
                </div>
              </div>
            )}

            <NpTrackList
              albumTracks={albumTracks}
              currentTrackId={currentTrack.id}
              album={currentTrack.album}
              albumId={currentTrack.albumId}
              onNavigate={stableNavigate}
            />
          </>
        ) : (
          <div className="np-empty-state">
            <Music size={48} style={{ opacity: 0.3 }} />
            <p>{t('nowPlaying.nothingPlaying')}</p>
          </div>
        )}
      </div>
    </div>
  );
}