<div>
  <h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
    {gettext("Records")}
  </h1>
  <%!-- TODO: replace with OSS version --%>
  <dl class="mt-5 grid grid-cols-3 gap-5 sm:grid-cols-5">
    <.album_preview
      record={@latest_record}
      title={gettext("Latest purchase")}
      class="col-span-3 sm:col-span-2"
    />
    <.counter
      title={gettext("Collection")}
      count={@collection_count}
      path={~p"/collection"}
    />
    <.counter title={gettext("Wishlist")} count={@wishlist_count} path={~p"/wishlist"} />
    <.counter
      title={gettext("Scrobbles")}
      count={to_compact(@scrobble_count)}
      tooltip={@scrobble_count}
    />
  </dl>
</div>

<div class="grid lg:grid-cols-2 gap-x-5">
  <div>
    <h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
      {gettext("Formats")}
    </h1>
    <.counters_by_category
      categories_with_counts={@collection_count_by_format}
      category_format_fn={&format_label/1}
      category_path_fn={fn format -> ~p"/collection?query=format:#{format}" end}
    />
  </div>

  <div>
    <h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
      {gettext("Types")}
    </h1>
    <.counters_by_category
      categories_with_counts={@collection_count_by_type}
      category_format_fn={&type_label/1}
      category_path_fn={fn type -> ~p"/collection?query=type:#{type}" end}
    />
  </div>
</div>

<div>
  <div class="mt-5 grid grid-cols-1 lg:grid-cols-2 gap-5">
    <TopArtists.live id="top-artists" timezone={@timezone} last_updated_uts={@last_updated_uts} />
    <TopAlbums.live id="top-albums" timezone={@timezone} last_updated_uts={@last_updated_uts} />
  </div>
</div>

<div class="flow-root">
  <div class="mt-5 flex justify-between items-center">
    <h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
      {gettext("Scrobble activity")}
    </h1>
    <.refresh_lastfm_feed_button />
  </div>
  <.tabs id="scrobble-activity" class="mt-4">
    <.tabs_list active_tab={@scrobble_activity_mode} variant="segmented" class="w-48">
      <:tab
        name="albums"
        phx-click={JS.push("set_scrobble_activity_mode", value: %{mode: "albums"})}
      >
        {gettext("Albums")}
      </:tab>
      <:tab
        name="tracks"
        phx-click={JS.push("set_scrobble_activity_mode", value: %{mode: "tracks"})}
      >
        {gettext("Tracks")}
      </:tab>
    </.tabs_list>

    <.tabs_panel name="albums" active={@scrobble_activity_mode == "albums"}>
      <ul
        id="scrobble-activity-albums"
        role="list"
        class="mt-5 p-6 bg-white dark:bg-zinc-800 rounded-md shadow-sm"
        phx-update="stream"
      >
        <li :for={{id, album} <- @streams.recent_albums} id={id} class="group">
          <div class="relative pb-4 group-last:pb-0">
            <span
              class="group-last:hidden absolute left-6 top-6 -ml-px h-full w-0.5 bg-zinc-200"
              aria-hidden="true"
            >
            </span>
            <div class="relative flex space-x-3 items-center justify-between">
              <div class="flex min-w-0 justify-between space-x-4 items-center">
                <img
                  class="h-12 w-12 rounded-md shadow-sm"
                  src={album.cover_url}
                  alt={album.metadata.title}
                />
                <div>
                  <p
                    :if={album.artist.musicbrainz_id not in @artist_ids}
                    class="font-semibold text-sm block text-zinc-500 dark:text-zinc-400"
                  >
                    {album.artist.name}
                  </p>
                  <.link
                    :if={album.artist.musicbrainz_id in @artist_ids}
                    class="font-semibold text-sm block text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
                    navigate={~p"/artists/#{album.artist.musicbrainz_id}"}
                  >
                    {album.artist.name}
                  </.link>
                  <p class="font-semibold text-sm md:text-base text-zinc-700 dark:text-zinc-300">
                    {album.metadata.title}
                  </p>
                  <time
                    datetime={format_scrobbled_at_uts(album.scrobbled_at_uts)}
                    class="whitespace-nowrap text-right text-xs sm:text-sm text-zinc-500 dark:text-zinc-400"
                  >
                    {album.scrobbled_at_label}
                    <.tooltip>
                      <.icon
                        name="hero-information-circle"
                        class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
                        aria-hidden="true"
                        data-slot="icon"
                      />
                      <:content>
                        <dl class="p-2">
                          <div class="flex gap-2 w-full">
                            <dt>{gettext("Album ID:")}</dt>
                            <dd class="font-mono">
                              <code id={"tooltip-album-#{album.scrobbled_at_uts}"}>
                                {album.metadata.musicbrainz_id || gettext("Unknown")}
                              </code>
                              <button
                                :if={album.metadata.musicbrainz_id not in ["", nil]}
                                phx-click={
                                  JS.dispatch("music_library:clipcopy",
                                    to: "#tooltip-album-#{album.scrobbled_at_uts}"
                                  )
                                  |> JS.transition("animate-shake")
                                }
                              >
                                <span class="sr-only">
                                  {gettext("Copy album MusicBrainz ID to clipboard")}
                                </span>
                                <.icon
                                  name="hero-clipboard-document"
                                  class="-mt-1 h-5 w-5"
                                  aria-hidden="true"
                                  data-slot="icon"
                                />
                              </button>
                            </dd>
                          </div>
                          <div class="flex gap-2 w-full mt-2">
                            <dt>{gettext("Artist ID:")}</dt>
                            <dd class="font-mono">
                              <code id={"tooltip-artist-#{album.scrobbled_at_uts}"}>
                                {album.artist.musicbrainz_id || gettext("Unknown")}
                              </code>
                              <button
                                :if={album.artist.musicbrainz_id not in ["", nil]}
                                phx-click={
                                  JS.dispatch("music_library:clipcopy",
                                    to: "#tooltip-artist-#{album.scrobbled_at_uts}"
                                  )
                                  |> JS.transition("animate-shake")
                                }
                              >
                                <span class="sr-only">
                                  {gettext("Copy artist MusicBrainz ID to clipboard")}
                                </span>
                                <.icon
                                  name="hero-clipboard-document"
                                  class="-mt-1 h-5 w-5"
                                  aria-hidden="true"
                                  data-slot="icon"
                                />
                              </button>
                            </dd>
                          </div>
                        </dl>
                      </:content>
                    </.tooltip>
                  </time>
                </div>
              </div>

              <div class="flex gap-1 flex-col text-right">
                <.badge :if={album.metadata.musicbrainz_id == ""}>
                  {gettext("No MB ID")}
                </.badge>
                <.link
                  :if={
                    record_id =
                      tracked_record?(@collected_releases, album.metadata.musicbrainz_id)
                  }
                  navigate={~p"/collection/#{record_id}"}
                >
                  <.badge color="success">
                    {gettext("Collected")}
                  </.badge>
                </.link>
                <.link
                  :if={
                    record_id =
                      tracked_record?(@wishlisted_releases, album.metadata.musicbrainz_id)
                  }
                  navigate={~p"/wishlist/#{record_id}"}
                >
                  <.badge color="warning">
                    {gettext("Wishlisted")}
                  </.badge>
                </.link>
              </div>

              <.dropdown
                :if={
                  album.metadata.musicbrainz_id !== "" and
                    !tracked_record?(
                      @collected_releases ++ @wishlisted_releases,
                      album.metadata.musicbrainz_id
                    )
                }
                id={"actions-#{album.scrobbled_at_uts}-albums"}
                placement="bottom-end"
              >
                <:toggle>
                  <span class="sr-only">{gettext("Choose which format to import")}</span>
                  <.icon
                    name="hero-star"
                    class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
                    aria-hidden="true"
                    data-slot="icon"
                  />
                </:toggle>
                <.focus_wrap id={"actions-#{album.scrobbled_at_uts}-albums-focus-wrap"}>
                  <.dropdown_link
                    :for={format <- Records.Record.formats()}
                    id={"actions-#{album.scrobbled_at_uts}-#{format}-import"}
                    phx-click={
                      JS.push("import",
                        value: %{id: album.metadata.musicbrainz_id, format: format},
                        page_loading: true
                      )
                    }
                  >
                    {format_label(format)}
                  </.dropdown_link>
                </.focus_wrap>
              </.dropdown>
            </div>
          </div>
        </li>
      </ul>
    </.tabs_panel>
    <.tabs_panel name="tracks" active={@scrobble_activity_mode == "tracks"}>
      <ul
        id="scrobble-activity-tracks"
        role="list"
        class="mt-5 p-6 bg-white dark:bg-zinc-800 rounded-md shadow-sm"
        phx-update="stream"
      >
        <li :for={{id, track} <- @streams.recent_tracks} id={id} class="group">
          <div class="relative pb-4 group-last:pb-0">
            <span
              class="group-last:hidden absolute left-6 top-6 -ml-px h-full w-0.5 bg-zinc-200"
              aria-hidden="true"
            >
            </span>
            <div class="relative flex space-x-3 items-center justify-between">
              <div class="flex min-w-0 justify-between space-x-4 items-center">
                <img
                  class="h-12 w-12 rounded-md shadow-sm"
                  src={track.cover_url}
                  alt={track.title}
                />
                <div>
                  <p
                    :if={track.artist.musicbrainz_id not in @artist_ids}
                    class="font-semibold text-sm block text-zinc-500 dark:text-zinc-400"
                  >
                    {track.artist.name}
                  </p>
                  <.link
                    :if={track.artist.musicbrainz_id in @artist_ids}
                    class="font-semibold text-sm block text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
                    navigate={~p"/artists/#{track.artist.musicbrainz_id}"}
                  >
                    {track.artist.name}
                  </.link>
                  <p class="font-semibold text-sm md:text-base text-zinc-700 dark:text-zinc-300">
                    {track.title}
                  </p>
                  <p class="font-semibold text-sm text-zinc-500 dark:text-zinc-400">
                    {track.album.title}
                  </p>
                  <time
                    datetime={format_scrobbled_at_uts(track.scrobbled_at_uts)}
                    class="whitespace-nowrap text-right text-xs sm:text-sm text-zinc-500 dark:text-zinc-400"
                  >
                    {track.scrobbled_at_label}
                  </time>
                  <.tooltip>
                    <.icon
                      name="hero-information-circle"
                      class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
                      aria-hidden="true"
                      data-slot="icon"
                    />
                    <:content>
                      <dl class="p-2">
                        <div class="flex gap-2 w-full">
                          <dt>{gettext("Track ID:")}</dt>
                          <dd class="font-mono">
                            <code id={"tooltip-track-#{track.scrobbled_at_uts}"}>
                              {track.musicbrainz_id || gettext("Unknown")}
                            </code>
                            <button
                              :if={track.musicbrainz_id not in ["", nil]}
                              phx-click={
                                JS.dispatch("music_library:clipcopy",
                                  to: "#tooltip-track-#{track.scrobbled_at_uts}"
                                )
                                |> JS.transition("animate-shake")
                              }
                            >
                              <span class="sr-only">
                                {gettext("Copy track MusicBrainz ID to clipboard")}
                              </span>
                              <.icon
                                name="hero-clipboard-document"
                                class="-mt-1 h-5 w-5"
                                aria-hidden="true"
                                data-slot="icon"
                              />
                            </button>
                          </dd>
                        </div>
                        <div class="flex gap-2 w-full mt-2">
                          <dt>{gettext("Album ID:")}</dt>
                          <dd class="font-mono">
                            <code id={"tooltip-track-album-#{track.scrobbled_at_uts}"}>
                              {track.album.musicbrainz_id || gettext("Unknown")}
                            </code>
                            <button
                              :if={track.album.musicbrainz_id not in ["", nil]}
                              phx-click={
                                JS.dispatch("music_library:clipcopy",
                                  to: "#tooltip-track-album-#{track.scrobbled_at_uts}"
                                )
                                |> JS.transition("animate-shake")
                              }
                            >
                              <span class="sr-only">
                                {gettext("Copy album MusicBrainz ID to clipboard")}
                              </span>
                              <.icon
                                name="hero-clipboard-document"
                                class="-mt-1 h-5 w-5"
                                aria-hidden="true"
                                data-slot="icon"
                              />
                            </button>
                          </dd>
                        </div>
                        <div class="flex gap-2 w-full mt-2">
                          <dt>{gettext("Artist ID:")}</dt>
                          <dd class="font-mono">
                            <code id={"tooltip-track-artist-#{track.scrobbled_at_uts}"}>
                              {track.artist.musicbrainz_id || gettext("Unknown")}
                            </code>
                            <button
                              :if={track.artist.musicbrainz_id not in ["", nil]}
                              phx-click={
                                JS.dispatch("music_library:clipcopy",
                                  to: "#tooltip-track-artist-#{track.scrobbled_at_uts}"
                                )
                                |> JS.transition("animate-shake")
                              }
                            >
                              <span class="sr-only">
                                {gettext("Copy artist MusicBrainz ID to clipboard")}
                              </span>
                              <.icon
                                name="hero-clipboard-document"
                                class="-mt-1 h-5 w-5"
                                aria-hidden="true"
                                data-slot="icon"
                              />
                            </button>
                          </dd>
                        </div>
                      </dl>
                    </:content>
                  </.tooltip>
                </div>
              </div>

              <div class="flex gap-1 flex-col text-right">
                <.badge :if={track.album.musicbrainz_id == ""}>
                  {gettext("No MB ID")}
                </.badge>
                <.link
                  :if={
                    record_id = tracked_record?(@collected_releases, track.album.musicbrainz_id)
                  }
                  navigate={~p"/collection/#{record_id}"}
                >
                  <.badge color="success">{gettext("Collected")}</.badge>
                </.link>
                <.link
                  :if={
                    record_id = tracked_record?(@wishlisted_releases, track.album.musicbrainz_id)
                  }
                  navigate={~p"/wishlist/#{record_id}"}
                >
                  <.badge color="warning">{gettext("Wishlisted")}</.badge>
                </.link>
              </div>

              <.dropdown
                :if={
                  track.album.musicbrainz_id !== "" and
                    !tracked_record?(
                      @collected_releases ++ @wishlisted_releases,
                      track.album.musicbrainz_id
                    )
                }
                id={"actions-#{track.scrobbled_at_uts}-tracks"}
                placement="bottom-end"
              >
                <:toggle>
                  <span class="sr-only">{gettext("Choose which format to import")}</span>
                  <.icon
                    name="hero-star"
                    class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
                    aria-hidden="true"
                    data-slot="icon"
                  />
                </:toggle>
                <.focus_wrap id={"actions-#{track.scrobbled_at_uts}-tracks-focus-wrap"}>
                  <.dropdown_link
                    :for={format <- Records.Record.formats()}
                    id={"actions-#{track.scrobbled_at_uts}-#{format}-import"}
                    phx-click={
                      JS.push("import",
                        value: %{id: track.album.musicbrainz_id, format: format},
                        page_loading: true
                      )
                    }
                  >
                    {format_label(format)}
                  </.dropdown_link>
                </.focus_wrap>
              </.dropdown>
            </div>
          </div>
        </li>
      </ul>
    </.tabs_panel>
  </.tabs>
</div>

<div class="mt-5 grid grid-cols-1 lg:grid-cols-11 gap-4">
  <div class="lg:col-span-3">
    <div class="flex justify-between items-center">
      <h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
        {gettext("On This day")}
      </h1>
      <.form
        :let={f}
        for={to_form(%{"current_date" => @current_date})}
        phx-change="set_current_date"
      >
        <.date_picker size="xs" field={f[:current_date]}>
          <:outer_suffix>
            <.button
              size="xs"
              type="button"
              phx-click={
                JS.push("set_current_date", value: %{"current_date" => Date.utc_today()})
              }
            >
              Today
            </.button>
          </:outer_suffix>
        </.date_picker>
      </.form>
    </div>
    <div class="bg-white dark:bg-zinc-800 rounded-md shadow-sm">
      <.records_on_this_day
        current_date={@current_date}
        records={@streams.records_on_this_day}
        record_show_path={fn record -> ~p"/collection/#{record}" end}
      />
    </div>
  </div>
  <div class="lg:col-span-4">
    <h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
      {gettext("Top %{n} Artists", %{n: length(@records_by_artist)})}
    </h1>
    <div class="mt-5 bg-white dark:bg-zinc-800 rounded-md shadow-sm">
      <.vertical_bar_chart
        data={@records_by_artist}
        width={600}
        height={26 * length(@records_by_artist)}
        color_class="fill-red-500"
        label_fn={fn datum -> datum.name end}
        value_fn={fn datum -> datum.count end}
        label_click={
          fn datum ->
            JS.navigate(~p"/artists/#{datum.id}")
          end
        }
        class="w-full"
      />
    </div>
  </div>

  <div class="lg:col-span-4">
    <h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
      {gettext("Top %{n} Genres", %{n: length(@records_by_genre)})}
    </h1>
    <div class="mt-5 bg-white dark:bg-zinc-800 rounded-md shadow-sm">
      <.vertical_bar_chart
        data={@records_by_genre}
        width={600}
        height={26 * length(@records_by_genre)}
        color_class="fill-zinc-500"
        label_fn={fn {genre, _count} -> genre end}
        value_fn={fn {_genre, count} -> count end}
        label_click={
          fn {genre, _count} -> JS.navigate(~p"/collection?#{%{query: ~s(genre:"#{genre}")}}") end
        }
        class="w-full"
      />
    </div>
  </div>
</div>
