<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-2 gap-5 sm:grid-cols-5">
    <.album_preview
      record={@latest_record}
      title={gettext("Latest purchase")}
      class="col-span-2 sm:col-span-3"
    />
    <.counter
      title={gettext("Total collection")}
      count={@collection_count}
      path={~p"/collection"}
    />
    <.counter title={gettext("Total wishlist")} count={@wishlist_count} path={~p"/wishlist"} />
  </dl>
</div>

<div>
  <h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
    {gettext("Formats")}
  </h1>
  <%!-- TODO: replace with OSS version --%>
  <dl class={[
    "mt-5 grid divide-zinc-200 dark:divide-zinc-900 overflow-hidden rounded-md bg-white dark:bg-zinc-800 shadow-sm divide-x-2",
    stats_class(@collection_count_by_format)
  ]}>
    <div :for={{format, count} <- @collection_count_by_format} class="px-2 py-5 sm:px-4">
      <dt class="text-sm font-medium text-zinc-500 dark:text-zinc-400 text-center max-sm:text-xs break-keep">
        {format_label(format)}
      </dt>
      <dd class="mt-1 text-center">
        <.link
          class="text-xl lg:text-2xl font-semibold hover:text-zinc-500 dark:text-zinc-300 dark:hover:text-zinc-200"
          navigate={~p"/collection?query=format:#{format}"}
        >
          {count}
        </.link>
      </dd>
    </div>
  </dl>
</div>

<div>
  <h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
    {gettext("Types")}
  </h1>
  <%!-- TODO: replace with OSS version --%>
  <dl class={[
    "mt-5 grid divide-zinc-200 dark:divide-zinc-900 overflow-hidden rounded-md bg-white dark:bg-zinc-800 shadow-sm divide-x-2",
    stats_class(@collection_count_by_type)
  ]}>
    <div :for={{type, count} <- @collection_count_by_type} class="px-2 py-5 sm:px-4">
      <dt class="text-sm font-medium text-zinc-500 dark:text-zinc-400 text-center max-sm:text-xs break-keep">
        {type_label(type)}
      </dt>
      <dd class="mt-1 text-center">
        <.link
          class="text-xl lg:text-2xl font-semibold hover:text-zinc-500 dark:text-zinc-300 dark:hover:text-zinc-200"
          navigate={~p"/collection?query=type:#{type}"}
        >
          {count}
        </.link>
      </dd>
    </div>
  </dl>
</div>

<div class="mt-5 grid grid-cols-1 lg:grid-cols-2 gap-5">
  <div>
    <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={35 * 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>
    <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={35 * 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>

<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>
    <button
      type="button"
      class="phx-click-loading:animate-spin text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-300"
      phx-click={JS.push("refresh_lastfm_feed")}
    >
      <span class="sr-only">{gettext("Refresh LastFm Feed")}</span>
      <.icon name="hero-arrow-path" class="-mt-1 h-5 w-5" aria-hidden="true" data-slot="icon" />
    </button>
  </div>
  <%!-- TODO: replace with OSS version --%>
  <span class="mt-5 isolate inline-flex rounded-md shadow-xs">
    <button
      phx-click={JS.push("set_scrobble_activity_mode", value: %{"mode" => :albums})}
      class={[
        "relative inline-flex items-center rounded-l-md",
        "px-3 py-2 text-xs sm:text-sm font-semibold",
        "ring-1 ring-inset focus:z-10",
        "bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 ring-zinc-300",
        @scrobble_activity_mode == :albums && "!bg-zinc-100 dark:!bg-zinc-700"
      ]}
    >
      {gettext("Albums")}
    </button>
    <button
      phx-click={JS.push("set_scrobble_activity_mode", value: %{"mode" => :tracks})}
      class={[
        "relative -ml-px inline-flex items-center rounded-r-md",
        "px-3 py-2 text-xs sm:text-sm font-semibold",
        "ring-1 ring-inset focus:z-10",
        "bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 ring-zinc-300",
        @scrobble_activity_mode == :tracks && "!bg-zinc-100 dark:!bg-zinc-700"
      ]}
    >
      {gettext("Tracks")}
    </button>
  </span>
  <ul
    :if={@scrobble_activity_mode == :albums}
    id="scrobble-activity-albums"
    role="list"
    class="mt-5 rounded-md px-4 py-5 shadow-sm"
    phx-update="stream"
  >
    <li :for={{id, album} <- @streams.recent_albums} id={id} class="group">
      <div class="relative pb-8 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}
              </time>
            </div>
          </div>

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

          <div
            :if={
              album.metadata.musicbrainz_id !== "" and
                !tracked_record?(
                  @collected_releases ++ @wishlisted_releases,
                  album.metadata.musicbrainz_id
                )
            }
            class="relative flex-none"
          >
            <button
              type="button"
              class="text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-300"
              aria-expanded="false"
              aria-haspopup="true"
              phx-click={toggle_actions_menu(album.scrobbled_at_uts)}
              phx-click-away={close_actions_menu(album.scrobbled_at_uts)}
            >
              <span class="sr-only">{gettext("Choose which format to import")}</span>
              <.icon name="hero-star" class="-mt-1 h-5 w-5" aria-hidden="true" data-slot="icon" />
            </button>
            <!--
          Dropdown menu, show/hide based on menu state.

          Entering: "transition ease-out duration-100"
            From: "transform opacity-0 scale-95"
            To: "transform opacity-100 scale-100"
          Leaving: "transition ease-in duration-75"
            From: "transform opacity-100 scale-100"
            To: "transform opacity-0 scale-95"
        -->
            <.focus_wrap
              id={"actions-#{album.scrobbled_at_uts}"}
              class={[
                "hidden pointer-events-auto absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-zinc-800 py-2 shadow-lg ring-1 ring-zinc-900/5 focus:outline-hidden"
              ]}
              role="menu"
              aria-orientation="vertical"
              aria-labelledby="options-menu-0-button"
            >
              <.link
                :for={format <- Records.Record.formats()}
                class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
                role="menuitem"
                tabindex="0"
                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)}
              </.link>
            </.focus_wrap>
          </div>
        </div>
      </div>
    </li>
  </ul>
  <ul
    :if={@scrobble_activity_mode == :tracks}
    id="scrobble-activity-tracks"
    role="list"
    class="mt-5 rounded-md px-4 py-5 shadow-sm"
    phx-update="stream"
  >
    <li :for={{id, track} <- @streams.recent_tracks} id={id} class="group">
      <div class="relative pb-8 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>
            </div>
          </div>

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

          <div
            :if={
              track.album.musicbrainz_id !== "" and
                !tracked_record?(
                  @collected_releases ++ @wishlisted_releases,
                  track.album.musicbrainz_id
                )
            }
            class="relative flex-none"
          >
            <button
              type="button"
              class="text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-300"
              aria-expanded="false"
              aria-haspopup="true"
              phx-click={toggle_actions_menu(track.scrobbled_at_uts)}
              phx-click-away={close_actions_menu(track.scrobbled_at_uts)}
            >
              <span class="sr-only">{gettext("Choose which format to import")}</span>
              <.icon name="hero-star" class="-mt-1 h-5 w-5" aria-hidden="true" data-slot="icon" />
            </button>
            <!--
          Dropdown menu, show/hide based on menu state.

          Entering: "transition ease-out duration-100"
            From: "transform opacity-0 scale-95"
            To: "transform opacity-100 scale-100"
          Leaving: "transition ease-in duration-75"
            From: "transform opacity-100 scale-100"
            To: "transform opacity-0 scale-95"
        -->
            <.focus_wrap
              id={"actions-#{track.scrobbled_at_uts}"}
              class={[
                "hidden pointer-events-auto absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-zinc-800 py-2 shadow-lg ring-1 ring-zinc-900/5 focus:outline-hidden"
              ]}
              role="menu"
              aria-orientation="vertical"
              aria-labelledby="options-menu-0-button"
            >
              <.link
                :for={format <- Records.Record.formats()}
                class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
                role="menuitem"
                tabindex="0"
                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)}
              </.link>
            </.focus_wrap>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>
