// PublicAlbumsView — read-only player for published albums

const { useState: useStatePAV, useEffect: useEffectPAV, useRef: useRefPAV } = React;

function PublicAlbumsView({
  albums,
  selectedAlbumId,
  loading,
  error,
  onRefresh,
  onSelectAlbum,
  onExit,
}) {
  const { Icon, AlbumCover, SceneImage, fmtTime } = window;
  const selectedAlbum = albums.find((item) => item.id === selectedAlbumId)?.album || null;
  const playableAudioSongs = (selectedAlbum?.songs || []).filter((song) => (
    song.audioServerUrl || song.audio?.filename || song.audio?.url || song.exportState?.audioFilename
  ));
  const playableVideoSongs = (selectedAlbum?.songs || []).filter((song) => (
    song.exportState?.videoFilename
  ));
  const [playerMode, setPlayerMode] = useStatePAV("audio");
  const [currentIdx, setCurrentIdx] = useStatePAV(0);
  const [playing, setPlaying] = useStatePAV(false);
  const mediaRef = useRefPAV(null);
  const activeSongs = playerMode === "video" ? playableVideoSongs : playableAudioSongs;
  const currentSong = activeSongs[currentIdx] || activeSongs[0] || null;

  window.useWakeLock(playing);

  useEffectPAV(() => {
    setCurrentIdx(0);
    setPlaying(false);
  }, [selectedAlbumId, playerMode]);

  useEffectPAV(() => {
    const media = mediaRef.current;
    if (!media) return;
    if (playing) {
      const promise = media.play();
      if (promise?.catch) promise.catch(() => setPlaying(false));
      return;
    }
    media.pause();
  }, [playing, currentSong?.id, playerMode]);

  const getSongAudioUrl = (song) => buildPublicAlbumMediaUrl(
    "audio",
    song?.audioServerUrl || song?.audio?.filename || song?.audio?.url || song?.exportState?.audioFilename || ""
  );
  const getSongVideoUrl = (song) => buildPublicAlbumMediaUrl("video", song?.exportState?.videoFilename || "");
  const mediaUrl = currentSong ? (playerMode === "video" ? getSongVideoUrl(currentSong) : getSongAudioUrl(currentSong)) : "";

  const handleEnded = () => {
    if (currentIdx < activeSongs.length - 1) {
      setCurrentIdx((prev) => prev + 1);
      setPlaying(true);
      return;
    }
    setPlaying(false);
  };

  const startAlbumPlayback = (mode) => {
    setPlayerMode(mode);
    setCurrentIdx(0);
    setPlaying(true);
  };

  const playSong = (song, mode) => {
    const source = mode === "video" ? playableVideoSongs : playableAudioSongs;
    const nextIdx = Math.max(0, source.findIndex((item) => item.id === song.id));
    setPlayerMode(mode);
    setCurrentIdx(nextIdx);
    setPlaying(true);
  };

  const toggleAlbum = (id) => {
    const nextId = selectedAlbumId === id ? null : id;
    setPlaying(false);
    onSelectAlbum(nextId);
  };

  return (
    <div className="public-albums-view">
      <div className="public-albums-header">
        <div>
          <div className="label">PUBLIC LIBRARY</div>
          <div className="title">공개 앨범</div>
          <div className="subtitle">공개된 Songfilm 앨범을 읽기 전용으로 재생합니다.</div>
        </div>
        <div className="public-albums-header-actions">
          <button className="pill-btn" onClick={onRefresh} disabled={loading}>
            <Icon.Refresh size={12}/> {loading ? "새로고침 중…" : "새로고침"}
          </button>
          <button className="pill-btn" onClick={onExit}><Icon.X size={12}/> 닫기</button>
        </div>
      </div>

      {error && <div className="public-albums-error">{error}</div>}

      <div className="public-album-list">
        {loading && !albums.length && <div className="empty-state">공개 앨범을 불러오는 중입니다.</div>}
        {!loading && !albums.length && <div className="empty-state">공개된 앨범이 없습니다.</div>}
        {albums.map((item) => {
          const album = item.album;
          const expanded = item.id === selectedAlbumId;
          const songCount = item.songCount ?? album?.songs?.length ?? 0;
          return (
            <div key={item.id} className={`public-album-row ${expanded ? "expanded" : ""}`}>
              <button
                className="public-album-card"
                onClick={() => toggleAlbum(item.id)}
                aria-expanded={expanded}
              >
                <div className="public-album-card-cover">
                  {album ? <AlbumCover album={album} /> : <Icon.Album size={22}/>}
                </div>
                <div className="public-album-card-meta">
                  <div className="public-album-card-title">{item.title || album?.title || "Untitled Album"}</div>
                  <div className="public-album-card-sub">
                    {item.artist || album?.artist || "Unknown"} · {songCount}곡
                    {album?.publishedBy?.nickname && (
                      <span> · by {album.publishedBy.nickname}</span>
                    )}
                  </div>
                </div>
                <div className="public-album-card-actions">
                  <span className="mono">{album?.year || "PUBLIC"}</span>
                  {expanded ? <Icon.ChevronUp size={16}/> : <Icon.ChevronDown size={16}/>}
                </div>
              </button>

              {expanded && album && (
                <div className="public-album-panel">
                  <div className="public-album-panel-head">
                    <div>
                      <div className="label">읽기 전용 공개 앨범</div>
                      <div className="public-album-panel-title">{album.title}</div>
                      {album.publishedBy?.nickname && (
                        <div className="public-album-panel-publisher">
                          Published by {album.publishedBy.nickname}
                        </div>
                      )}
                    </div>
                    <div className="public-album-play-actions">
                      <button className="pill-btn accent" onClick={() => startAlbumPlayback("audio")} disabled={!playableAudioSongs.length} aria-label="앨범 전체 MP3 PLAY" title="앨범 전체 MP3 PLAY">
                        <Icon.Play size={12}/> <span className="btn-label">앨범 전체 MP3 PLAY</span>
                      </button>
                      <button className="pill-btn accent" onClick={() => startAlbumPlayback("video")} disabled={!playableVideoSongs.length} aria-label="앨범 전체 Video PLAY" title="앨범 전체 Video PLAY">
                        <Icon.Film size={12}/> <span className="btn-label">앨범 전체 Video PLAY</span>
                      </button>
                    </div>
                  </div>

                  {currentSong && mediaUrl && (
                    <div className="public-player">
                      <div className="public-player-meta">
                        <span className="mono">{playerMode === "video" ? "VIDEO" : "MP3"}</span>
                        <strong>{currentSong.title}</strong>
                        <span>{activeSongs.length ? `${currentIdx + 1}/${activeSongs.length}` : ""}</span>
                      </div>
                      {playerMode === "video" ? (
                        <video
                          key={mediaUrl}
                          ref={mediaRef}
                          className="public-video-player"
                          src={mediaUrl}
                          controls
                          preload="metadata"
                          onPlay={() => setPlaying(true)}
                          onPause={() => setPlaying(false)}
                          onEnded={handleEnded}
                        />
                      ) : (
                        <audio
                          key={mediaUrl}
                          ref={mediaRef}
                          src={mediaUrl}
                          controls
                          preload="metadata"
                          onPlay={() => setPlaying(true)}
                          onPause={() => setPlaying(false)}
                          onEnded={handleEnded}
                        />
                      )}
                    </div>
                  )}

                  <div className="public-song-table">
                    {(album.songs || []).map((song, index) => {
                      const hasAudio = !!getSongAudioUrl(song);
                      const hasVideo = !!getSongVideoUrl(song);
                      return (
                        <div key={song.id || index} className="public-song-row">
                          <div className="mono">{String(index + 1).padStart(2, "0")}</div>
                          <div>
                            <div className="song-title">{song.title || song.filename || "Untitled"}</div>
                            <div className="song-sub mono">{song.filename || fmtTime(song.duration || 0)}</div>
                          </div>
                          <div className="public-song-thumb">
                            {song.scenes?.[0] && <SceneImage scene={song.scenes[0]} paletteName={song.paletteName || "midnight-violet"}/>}
                          </div>
                          <button className="pill-btn sm" onClick={() => playSong(song, "audio")} disabled={!hasAudio} aria-label={`${song.title || song.filename || "Untitled"} MP3 PLAY`} title="MP3 PLAY">
                            <Icon.Play size={11}/> <span className="btn-label">MP3 PLAY</span>
                          </button>
                          <button className="pill-btn sm" onClick={() => playSong(song, "video")} disabled={!hasVideo} aria-label={`${song.title || song.filename || "Untitled"} Video PLAY`} title="Video PLAY">
                            <Icon.Film size={11}/> <span className="btn-label">Video PLAY</span>
                          </button>
                        </div>
                      );
                    })}
                  </div>
                </div>
              )}
            </div>
          );
        })}
        {selectedAlbumId && !selectedAlbum && !loading && (
          <div className="empty-state">선택한 공개 앨범 데이터를 불러오지 못했습니다.</div>
        )}
      </div>
    </div>
  );
}