<!-- eslint-disable vue/no-v-html -->
<template>
  <div
    class="mx-auto bg-zinc-950 w-full relative flex flex-col justify-center pt-32 xl:pt-24 z-10 overflow-hidden"
  >
    <!-- banner image -->
    <div class="absolute flex top-0 h-fit inset-x-0 h-12 -z-[20] pb-4">
      <img
        :src="useObject(game.mBannerObjectId)"
        class="blur-sm w-full h-auto"
      />
      <div
        class="absolute inset-0 bg-gradient-to-b from-transparent to-80% to-zinc-950"
      />
    </div>
    <!-- main page -->
    <div
      :class="[
        'max-w-7xl w-full min-h-screen mx-auto px-5 py-4 sm:px-16 sm:py-12 rounded-xl', // layout stuff
        'bg-zinc-950/90 backdrop-blur-[500px] backdrop-saturate-200 backdrop-brightness-200', // make a soft, colourful glow background
      ]"
    >
      <h1
        class="text-3xl md:text-5xl font-bold font-display text-zinc-100 pb-4 border-b border-zinc-800"
      >
        {{ game.mName }}
      </h1>

      <div class="mt-8 grid grid-cols-1 lg:grid-cols-4 gap-10">
        <div
          class="col-start-1 lg:col-start-4 flex flex-col gap-y-6 items-center"
        >
          <img
            class="transition-all duration-300 hover:scale-105 hover:rotate-[-1deg] w-64 h-auto rounded gameCover"
            :src="useObject(game.mCoverObjectId)"
            :alt="game.mName"
          />
          <div class="flex items-center gap-x-2">
            <AddLibraryButton :game-id="game.id" />
          </div>
          <NuxtLink
            v-if="user?.admin && !isClient"
            :href="`/admin/library/${game.id}`"
            type="button"
            class="inline-flex items-center gap-x-2 rounded-md bg-zinc-800 px-3 py-1 text-sm font-semibold font-display text-white shadow-sm hover:bg-zinc-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 duration-200 hover:scale-105 active:scale-95"
          >
            {{ $t("store.openAdminDashboard") }}
            <ArrowTopRightOnSquareIcon
              class="-mr-0.5 h-7 w-7 p-1"
              aria-hidden="true"
            />
          </NuxtLink>
          <table class="min-w-full">
            <tbody>
              <tr>
                <td
                  class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
                >
                  {{ $t("store.released") }}
                </td>
                <td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
                  <time datetime="game.mReleased">
                    {{ $d(new Date(game.mReleased), "short") }}
                  </time>
                </td>
              </tr>
              <tr>
                <td
                  class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
                >
                  {{ $t("store.platform", platforms.length) }}
                </td>
                <td
                  class="whitespace-nowrap inline-flex gap-x-4 px-3 py-4 text-sm text-zinc-400"
                >
                  <component
                    :is="PLATFORM_ICONS[platform]"
                    v-for="platform in platforms"
                    :key="platform"
                    class="text-blue-600 w-6 h-6"
                  />
                  <span
                    v-if="platforms.length == 0"
                    class="font-semibold text-blue-600"
                    >{{ $t("store.commingSoon") }}</span
                  >
                </td>
              </tr>
              <tr>
                <td
                  class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
                >
                  {{ $t("store.size") }}
                </td>
                <td
                  v-if="sizes.length > 0"
                  class="whitespace-nowrap inline-flex gap-x-4 px-3 py-4 text-sm text-zinc-400"
                >
                  <ul class="flex flex-col">
                    <ol
                      v-for="version in sizes"
                      :key="version.versionId"
                      class="inline-flex items-center gap-x-1"
                    >
                      <ServerIcon class="size-4" />
                      {{
                        formatBytes(version.installSize)
                      }}

                      <CloudIcon class="size-4 ml-3" />
                      {{
                        formatBytes(version.downloadSize)
                      }}
                    </ol>
                  </ul>
                </td>
                <td
                  v-else
                  class="whitespace-nowrap inline-flex gap-x-4 px-3 py-4 text-sm text-zinc-400"
                >
                  <span class="font-semibold text-blue-600">{{
                    $t("store.commingSoon")
                  }}</span>
                </td>
              </tr>
              <tr>
                <td
                  class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
                >
                  {{ $t("store.rating") }}
                </td>
                <td
                  class="whitespace-nowrap flex flex-row items-center gap-x-1 px-3 py-4 text-sm text-zinc-400"
                >
                  <StarIcon
                    v-for="(value, idx) in ratingArray"
                    :key="idx"
                    :class="[
                      value ? 'text-yellow-600' : 'text-zinc-600',
                      'w-4 h-4',
                    ]"
                  />
                  <span class="text-zinc-600">{{
                    $t("store.reviews", [$n(rating._sum.mReviewCount ?? 0)])
                  }}</span>
                </td>
              </tr>
              <tr v-if="game.ageRatings?.length">
                <td
                  class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
                >
                  {{ $t("store.ageRating") }}
                </td>
                <td
                  class="whitespace-nowrap flex flex-row items-center gap-x-2 px-3 py-4 text-sm text-zinc-400"
                >
                  <div
                    v-for="ar in game.ageRatings"
                    :key="ar.id"
                    class="flex items-center gap-1"
                  >
                    <img
                      v-if="ar.ratingCoverUrl"
                      :src="ar.ratingCoverUrl"
                      :alt="`${ar.organization} ${ar.rating}`"
                      class="h-8"
                    />
                    <span v-else class="text-xs bg-zinc-700 px-2 py-1 rounded">
                      {{ ar.organization }} {{ ar.rating }}
                    </span>
                  </div>
                </td>
              </tr>
              <tr>
                <td
                  class="whitespace-nowrap align-top py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
                >
                  {{ $t("store.tags") }}
                </td>
                <td class="flex flex-col gap-1 px-3 py-4 text-sm text-zinc-400">
                  <NuxtLink
                    v-for="tag in game.tags"
                    :key="tag.id"
                    :href="`/store/t/${tag.id}`"
                    class="w-min hover:underline hover:text-zinc-100 whitespace-nowrap"
                  >
                    {{ tag.name }}
                  </NuxtLink>
                  <span
                    v-if="game.tags.length == 0"
                    class="text-zinc-700 font-bold uppercase font-display"
                    >{{ $t("store.noTags") }}</span
                  >
                </td>
              </tr>
              <tr>
                <td
                  class="whitespace-nowrap align-top py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
                >
                  {{ $t("store.developers", game.developers.length) }}
                </td>
                <td class="flex flex-col px-3 py-4 text-sm text-zinc-400">
                  <NuxtLink
                    v-for="developer in game.developers"
                    :key="developer.id"
                    :href="`/store/c/${developer.id}`"
                    class="w-min hover:underline hover:text-zinc-100 whitespace-nowrap"
                  >
                    {{ developer.mName }}
                  </NuxtLink>
                  <span
                    v-if="game.developers.length == 0"
                    class="text-zinc-700 font-bold uppercase font-display"
                    >{{ $t("store.noDevelopers") }}</span
                  >
                </td>
              </tr>
              <tr>
                <td
                  class="whitespace-nowrap align-top py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
                >
                  {{ $t("store.publishers", game.publishers.length) }}
                </td>
                <td class="flex flex-col px-3 py-4 text-sm text-zinc-400">
                  <NuxtLink
                    v-for="publisher in game.publishers"
                    :key="publisher.id"
                    :href="`/store/c/${publisher.id}`"
                    class="w-min hover:underline hover:text-zinc-100 whitespace-nowrap"
                  >
                    {{ publisher.mName }}
                  </NuxtLink>
                  <span
                    v-if="game.publishers.length == 0"
                    class="text-zinc-700 font-bold uppercase font-display"
                    >{{ $t("store.noPublishers") }}</span
                  >
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <div class="row-start-2 lg:row-start-1 lg:col-span-3">
          <p class="text-lg text-zinc-400">
            {{ game.mShortDescription }}
          </p>
          <div class="mt-6 py-4 rounded">
            <VueCarousel :items-to-show="1" :wrap-around="true">
              <VueSlide
                v-for="image in game.mImageCarouselObjectIds"
                :key="image"
              >
                <img
                  class="w-fit h-48 lg:h-96 rounded"
                  :src="useObject(image)"
                />
              </VueSlide>
              <VueSlide v-if="game.mImageCarouselObjectIds.length == 0">
                <div
                  class="h-48 lg:h-96 aspect-[1/2] flex items-center justify-center text-zinc-700 font-bold font-display"
                >
                  {{ $t("store.noImages") }}
                </div>
              </VueSlide>

              <template #addons>
                <VueNavigation />
                <CarouselPagination class="py-2 px-12" />
              </template>
            </VueCarousel>
          </div>

          <div>
            <div
              class="mt-12 prose prose-invert prose-blue max-w-none"
              v-html="descriptionHTML"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ArrowTopRightOnSquareIcon } from "@heroicons/vue/24/outline";
import { StarIcon, ServerIcon, CloudIcon } from "@heroicons/vue/24/solid";
import { micromark } from "micromark";
import { formatBytes } from "~/server/internal/utils/files";

const route = useRoute();
const gameId = route.params.id.toString();

const user = useUser();

const { game, rating, sizes, platforms } = await $dropFetch(
  `/api/v1/games/${gameId}`,
);

const isClient = isClientRequest();

const descriptionHTML = micromark(game.mDescription);

// const rating = Math.round(game.mReviewRating * 5);
const averageRating = Math.round((rating._avg.mReviewRating ?? 0) * 5);
const ratingArray = Array(5)
  .fill(null)
  .map((_, i) => i + 1 <= averageRating);

useHead({
  title: game.mName,
  // link: [{ rel: "icon", href: useObject(game.mIconObjectId) }], // Favicon doesn't get reset when we navigate off
});
</script>

<style scoped>
h1 {
  view-transition-name: header;
}
img.gameCover {
  view-transition-name: selected-game;
}
</style>

<style>
::view-transition-old(header),
::view-transition-new(header) {
  width: auto;
}
</style>
