<script lang="ts" setup>
import { useI18n } from "vue-i18n";
import { computed, onMounted, ref } from "vue";
import axios from "axios";
import dayjs from "dayjs";
import {
  CogIcon,
  ExternalLinkIcon,
  InformationCircleIcon,
} from "@heroicons/vue/solid";

import { DownloadRelease } from "@/types";

const GUIDE_URL = import.meta.env.VITE_GUIDE_URL as string;
const LDN_BUILD_URL = import.meta.env.VITE_LDN_BUILD_URL as string;
const OLDER_BUILD_URL = import.meta.env.VITE_OLDER_BUILDS_URL as string;
const { t } = useI18n();
const isLoading = ref(true);
const downloadRelease = ref<DownloadRelease>({} as DownloadRelease);
const linuxBuildUrl = ref("");
const windowBuildUrl = ref("");

onMounted(() => {
  fetchBuilds();
});

const totalDownload = computed(() => {
  let total = 0;

  downloadRelease.value?.assets.forEach((a) => (total += a.download_count));

  return total;
});

const fetchBuilds = async () => {
  try {
    const result = await axios.get<DownloadRelease>(
      import.meta.env.VITE_RELEASE_URL
    );
    downloadRelease.value = result.data;

    downloadRelease.value?.assets.forEach((asset) => {
      if (asset.name.startsWith("ryujinx")) {
        if (asset.name.endsWith("win_x64.zip")) {
          windowBuildUrl.value = asset.browser_download_url;
        } else if (asset.name.endsWith("linux_x64.tar.gz")) {
          linuxBuildUrl.value = asset.browser_download_url;
        }
      }
    });
  } catch (err) {
    console.error(err);
  }
  isLoading.value = false;
};
</script>

<template>
  <div>
    <!-- Download -->
    <div class="bg-gray-50">
      <div
        class="container xl:max-w-7xl mx-auto px-4 py-16 lg:px-8 lg:py-32 space-y-16"
      >
        <!-- Heading -->
        <div class="text-center">
          <i18n-t
            class="text-3xl md:text-4xl font-extrabold mb-4"
            keypath="views.download.title1"
            tag="h2"
          >
            <span
              class="bg-clip-text text-transparent bg-gradient-to-r from-sky-500 to-red-500"
              >{{ t("views.download.title2") }}</span
            >
          </i18n-t>
          <div class="w-12 h-1.5 bg-gray-200 rounded-lg mb-3 mx-auto"></div>
          <i18n-t
            class="md:text-lg text-gray-600 md:leading-relaxed font-medium lg:w-2/3 mx-auto"
            keypath="views.download.subTitle"
            tag="h2"
          >
            <a :href="GUIDE_URL" class="text-sky-500 underline"
              >{{ t("views.download.startupGuide") }}
            </a>
          </i18n-t>
        </div>

        <!-- Features -->
        <div
          v-if="!isLoading"
          class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6"
        >
          <!-- Windows -->
          <a
            :href="windowBuildUrl"
            class="group relative p-4 lg:p-6 bg-white rounded-xl transition duration-150 shadow-md shadow-gray-100"
          >
            <div
              class="absolute inset-0 bg-white rounded-xl shadow-md shadow-gray-200 transition duration-100 scale-100 opacity-0 group-hover:opacity-100 group-hover:scale-105 group-active:scale-100 group-active:opacity-0"
            ></div>
            <div class="relative text-center">
              <div
                class="text-xs uppercase text-gray-400 font-semibold tracking-wider mb-4"
              >
                {{ downloadRelease.tag_name }}
              </div>
              <div class="relative w-12 mb-8 text-indigo-500 mx-auto">
                <img
                  alt="windows logo"
                  src="/assets/images/icons/windows.png"
                />
              </div>
              <h4 class="text-lg font-semibold mb-1 text-gray-900">Windows</h4>
              <p class="leading-relaxed text-gray-500 text-sm font-medium">
                {{ t("views.download.supportWindows") }}
              </p>
              <div
                class="flex justify-center items-center space-x-1 mt-4 pt-4 text-sm font-medium text-gray-500 border-t border-gray-100 group-hover:text-sky-500"
              >
                <span>{{ t("views.download.download") }}</span>
              </div>
            </div>
          </a>

          <!-- Linux -->
          <a
            :href="linuxBuildUrl"
            class="group relative p-4 lg:p-6 bg-white rounded-xl transition duration-150 shadow-md shadow-gray-100"
          >
            <div
              class="absolute inset-0 bg-white rounded-xl shadow-md shadow-gray-200 transition duration-100 scale-100 opacity-0 group-hover:opacity-100 group-hover:scale-105 group-active:scale-100 group-active:opacity-0"
            ></div>
            <div class="relative text-center">
              <div
                class="text-xs uppercase text-gray-400 font-semibold tracking-wider mb-4"
              >
                {{ downloadRelease.tag_name }}
              </div>
              <div class="relative w-12 mb-8 text-indigo-500 mx-auto">
                <img alt="linux logo" src="/assets/images/icons/linux.png" />
              </div>
              <h4 class="text-lg font-semibold mb-1 text-gray-900">Linux</h4>
              <p class="leading-relaxed text-gray-500 text-sm font-medium">
                {{ t("views.download.supportLinux") }}
              </p>
              <div
                class="flex justify-center items-center space-x-1 mt-4 pt-4 text-sm font-medium text-gray-500 border-t border-gray-100 group-hover:text-sky-500"
              >
                <span>{{ t("views.download.download") }}</span>
              </div>
            </div>
          </a>

          <!-- Mac OS -->
          <div
            class="group relative p-4 lg:p-6 bg-white rounded-xl transition duration-150 shadow-md shadow-gray-100 opacity-60"
          >
            <div
              class="absolute inset-0 bg-white rounded-xl shadow-md shadow-gray-200 transition duration-100 scale-100 opacity-0"
            ></div>
            <div class="relative text-center">
              <div
                class="text-xs uppercase text-gray-400 font-semibold tracking-wider mb-4"
              >
                {{ t("views.download.supportPlanned") }}
              </div>
              <div class="relative w-12 mb-8 text-indigo-500 mx-auto">
                <img alt="macos logo" src="/assets/images/icons/macos.png" />
              </div>
              <h4 class="text-lg font-semibold mb-1 text-gray-900">macOS</h4>
              <div
                class="flex justify-center items-center space-x-1 mt-4 pt-4 text-sm font-medium text-gray-500 border-t border-gray-100"
              >
                <span>{{ t("views.download.notSupported") }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- LDN Build -->
        <div
          class="p-10 lg:py-10 lg:px-16 bg-white rounded text-center relative"
        >
          <div class="space-y-10">
            <!-- Heading -->
            <div class="text-center">
              <i18n-t
                class="text-2xl md:text-2xl font-extrabold mb-4"
                tag="h2"
                keypath="views.download.ldnBuildTitle"
              >
                <span class="text-sky-600">{{
                  t("views.download.ldnBuild")
                }}</span>
              </i18n-t>
              <h3
                class="text-lg md:text-xl md:leading-relaxed font-medium text-gray-600"
              >
                {{ t("views.download.ldnBuildDescription") }}
              </h3>
            </div>

            <div
              class="flex flex-col sm:flex-row sm:items-center sm:justify-center space-y-4 sm:space-y-0 sm:space-x-2"
            >
              <GButton
                :href="LDN_BUILD_URL"
                rounded
                variant="light-gray"
                size="elg"
              >
                <template #icon>
                  <InformationCircleIcon
                    class="opacity-50 hi-solid hi-information-circle inline-block w-5 h-5"
                  />
                </template>
                {{ t("views.download.learnMore") }}
              </GButton>
            </div>
          </div>
        </div>

        <!-- Build -->
        <div
          v-if="!isLoading"
          class="md:flex items-center rounded-lg ring-1 ring-gray-50 ring-opacity-5 bg-white"
        >
          <div class="grow p-5 lg:p-6">
            <h4 class="text-xl font-bold mb-1">
              {{ t("views.download.buildInformation") }}
            </h4>
            <i18n-t
              class="leading-relaxed text-gray-500 mb-5"
              keypath="views.download.buildRelease"
              tag="p"
            >
              <span class="font-semibold">
                {{ dayjs(downloadRelease.published_at).format("YYYY-MM-DD") }}
              </span>
            </i18n-t>
            <h5 class="flex items-center my-8">
              <span
                class="text-sm uppercase tracking-wide text-blue-600 font-semibold mr-3"
              >
                GitHub
              </span>
              <span
                aria-hidden="true"
                class="grow bg-indigo-50 rounded h-0.5"
              ></span>
            </h5>

            <!-- Github Info -->
            <div
              class="lg:flex lg:space-x-12 space-y-4 lg:space-y-0 font-medium"
            >
              <ul class="space-y-4 text-sm">
                <!-- Assets -->
                <li class="flex items-center space-x-2">
                  <CogIcon class="text-sky-500 inline-block w-5 h-5" />
                  <span>
                    <span class="font-bold uppercase">
                      {{ downloadRelease.assets.length }}
                    </span>
                    {{ t("views.download.assets") }}
                  </span>
                </li>

                <!-- Tag -->
                <li class="flex items-center space-x-2">
                  <CogIcon class="text-sky-500 inline-block w-5 h-5" />
                  <span>
                    {{ t("views.download.tag") }}:
                    <strong>{{ downloadRelease.tag_name }}</strong>
                  </span>
                </li>
              </ul>

              <ul class="space-y-4 text-sm">
                <li class="flex items-center space-x-2">
                  <CogIcon class="text-sky-500 inline-block w-5 h-5" />
                  <span>
                    <strong>{{ totalDownload }}</strong>
                    {{ t("views.download.downloads") }}
                  </span>
                </li>
              </ul>
              <div>
                <GButton
                  :href="downloadRelease.html_url"
                  rounded
                  variant="sky"
                  size="lg"
                  extra-class="space-x-2 w-full"
                >
                  <template #icon>
                    <ExternalLinkIcon class="opacity-50 inline-block w-5 h-5" />
                  </template>
                  {{ t("views.download.manualDownload") }}
                </GButton>
              </div>
              <div>
                <GButton
                  :href="OLDER_BUILD_URL"
                  rounded
                  variant="grey"
                  size="lg"
                  extra-class="space-x-2 w-full"
                >
                  <template #icon>
                    <ExternalLinkIcon class="opacity-50 inline-block w-5 h-5" />
                  </template>
                  {{ t("views.download.olderBuilds") }}
                </GButton>
              </div>
            </div>
          </div>

          <!-- Author info -->
          <div class="flex-none relative md:w-72 p-5">
            <div class="p-5 lg:p-6 text-center rounded-lg bg-sky-50">
              <a :href="downloadRelease.author.html_url">
                <div>
                  <img
                    :src="downloadRelease.author.avatar_url"
                    alt="Author avatar"
                    class="w-16 h-16 inline-block"
                  />
                </div>
                <div
                  class="inline-flex space-x-1 items-center text-xs uppercase tracking-wider font-semibold px-3 py-1 bg-indigo-200 bg-opacity-50 text-sky-600 rounded-full mb-4"
                >
                  <span>{{ downloadRelease.author.login }}</span>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
