// MyAlbumsView — server-stored personal albums, accessible from any device.

const MY_ALBUMS_STORAGE_BASE = window.SongfilmApiConfig.getBase("storage");
const MY_ALBUMS_RENDERER_BASE = window.SongfilmApiConfig.getBase("remotion");

function formatMyAlbumSavedAt(iso) {
  if (!iso) return "";
  const d = new Date(iso);
  if (Number.isNaN(d.getTime())) return "";
  const pad = (n) => String(n).padStart(2, "0");
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
}

function MyAlbumsView({
  albums,
  selectedAlbumId,
  loading,
  error,
  onRefresh,
  onSelectAlbum,
  onExit,
  onDeleteAlbum,
  onCopyToLibrary,
}) {
  const audioUrlCacheRef = React.useRef(new Map());

  const hasAudioAsset = (song) => (
    !!(song?.audioServerUrl || song?.audio?.filename || song?.audio?.url || song?.exportState?.audioFilename || song?.audioStorageKey)
  );
  const hasVideoAsset = (song) => !!(song?.exportState?.videoFilename || song?.exportState?.jobId);

  const resolveAudioUrl = React.useCallback(async (song) => {
    const cacheKey = song?.id || song?.filename || song?.title || "";
    const cached = audioUrlCacheRef.current.get(cacheKey);
    if (cached) return cached;

    const serverRef = String(song?.audioServerUrl || song?.audio?.filename || song?.audio?.url || song?.exportState?.audioFilename || "").trim();
    if (serverRef) {
      const built = window.SongfilmApiConfig?.buildMediaUrl
        ? window.SongfilmApiConfig.buildMediaUrl("audio", serverRef)
        : `${MY_ALBUMS_STORAGE_BASE}/audio/${encodeURIComponent(serverRef)}`;
      audioUrlCacheRef.current.set(cacheKey, built);
      return built;
    }

    const restored = await window.SongfilmSongStorage?.restoreAudioUrl?.(song);
    if (restored) audioUrlCacheRef.current.set(cacheKey, restored);
    return restored || "";
  }, []);

  const resolveVideoUrl = React.useCallback((song) => {
    const videoFilename = String(song?.exportState?.videoFilename || "").trim();
    if (videoFilename) {
      return window.SongfilmApiConfig?.buildMediaUrl
        ? window.SongfilmApiConfig.buildMediaUrl("video", videoFilename)
        : `${MY_ALBUMS_STORAGE_BASE}/video/${encodeURIComponent(videoFilename)}`;
    }
    const jobId = String(song?.exportState?.jobId || "").trim();
    if (jobId) return `${MY_ALBUMS_RENDERER_BASE}/render/${jobId}/file`;
    return "";
  }, []);

  const renderPanelExtra = React.useCallback((item, album) => {
    const { Icon } = window;
    const savedAt = album?.myAlbumSavedAt || item?.savedAt || "";
    return (
      <div style={{
        display: "flex", alignItems: "center", flexWrap: "wrap", gap: 8,
        padding: "10px 0 4px", borderTop: "1px solid var(--line)",
      }}>
        {savedAt && (
          <span style={{
            fontSize: 11.5, color: "var(--ink-4)",
            fontFamily: "var(--font-mono)", marginRight: "auto",
          }}>
            저장: {formatMyAlbumSavedAt(savedAt)}
          </span>
        )}
        <button
          className="pill-btn sm"
          onClick={(e) => { e.stopPropagation(); onCopyToLibrary?.(item); }}
          title="이 앨범을 내 라이브러리에 복사합니다"
        >
          <Icon.Download size={11}/> Library로 복사
        </button>
        <button
          className="pill-btn sm danger"
          onClick={(e) => { e.stopPropagation(); onDeleteAlbum?.(item?.id || ""); }}
          title="내 앨범에서 삭제합니다"
        >
          <Icon.Trash size={11}/> 삭제
        </button>
      </div>
    );
  }, [onCopyToLibrary, onDeleteAlbum]);

  return (
    <AlbumPlayerView
      albums={albums}
      selectedAlbumId={selectedAlbumId}
      onSelectAlbum={onSelectAlbum}
      loading={loading}
      error={error}
      onRefresh={onRefresh}
      onExit={onExit}
      copy={{
        headerLabel: "MY ALBUMS",
        title: "내 앨범",
        subtitle: "서버에 보관된 나의 앨범입니다. 어느 기기에서든 접근해서 재생할 수 있습니다.",
        loadingText: "내 앨범을 불러오는 중입니다.",
        emptyText: "보관된 앨범이 없습니다. 앨범 홈에서 '내 앨범에 저장'을 눌러 저장하세요.",
      }}
      hasAudioAsset={hasAudioAsset}
      hasVideoAsset={hasVideoAsset}
      resolveAudioUrl={resolveAudioUrl}
      resolveVideoUrl={resolveVideoUrl}
      getAlbumItems={(items) => items}
      getAlbumFromItem={(item) => item?.album || null}
      getItemId={(item) => item?.id || ""}
      getCardTitle={(item, album) => item?.title || album?.title || "Untitled Album"}
      getCardSubtitle={(item, album) => {
        const songCount = item?.songCount ?? album?.songs?.length ?? 0;
        const savedAt = item?.myAlbumSavedAt
          ? ` · ${formatMyAlbumSavedAt(item.myAlbumSavedAt)} 저장`
          : "";
        return `${item?.artist || album?.artist || "Unknown"} · ${songCount}곡${savedAt}`;
      }}
      getCardBadge={(item, album) => album?.year || "MY"}
      getPanelLabel={() => "내 앨범"}
      getPanelPublisher={(item, album) => album?.artist || ""}
      getSelectedMissingText={() => "선택한 앨범 데이터를 불러오지 못했습니다."}
      renderPanelExtra={renderPanelExtra}
    />
  );
}

Object.assign(window, { MyAlbumsView });