<script lang="ts">
  import GenericMediaListPage from "$lib/components/library/GenericMediaListPage.svelte";
  import CreatePlaylistModal from "$lib/components/playlist/CreatePlaylistModal.svelte";

  /**
   * Playlist browser
   * @req: UR-007 - Navigate media in library
   * @req: UR-008 - Search media across libraries
   * @req: DR-007 - Library browsing screens
   * @req: UR-014 - Make and edit playlists
   */

  let showCreateModal = $state(false);

  const config = {
    itemType: "Playlist" as const,
    title: "Playlists",
    backPath: "/library/music",
    searchPlaceholder: "Search playlists...",
    sortOptions: [], // No sorting for playlists
    defaultSort: "",
    displayComponent: "grid" as const,
    searchFields: ["name"],
  };
</script>

<div class="relative">
  <!-- Floating create button -->
  <button
    onclick={() => showCreateModal = true}
    class="fixed bottom-20 right-4 z-40 w-14 h-14 bg-[var(--color-jellyfin)] hover:bg-[var(--color-jellyfin-dark)] rounded-full shadow-lg flex items-center justify-center transition-colors"
    aria-label="Create playlist"
  >
    <svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 24 24">
      <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
    </svg>
  </button>

  <GenericMediaListPage {config} />
</div>

<CreatePlaylistModal
  isOpen={showCreateModal}
  onClose={() => showCreateModal = false}
/>
