<script lang="ts" setup>
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { storeToRefs } from 'pinia';

import { ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/solid';
import { BrandButton, Dialog } from '@unraid/ui';
import { DOCS_URL_ACCOUNT, DOCS_URL_LICENSING_FAQ } from '~/consts';

import type { BrandButtonProps } from '@unraid/ui';

import ActivationPartnerLogo from '~/components/Activation/ActivationPartnerLogo.vue';
import ActivationSteps from '~/components/Activation/ActivationSteps.vue';
import { useActivationCodeDataStore } from '~/components/Activation/store/activationCodeData';
import { useActivationCodeModalStore } from '~/components/Activation/store/activationCodeModal';
import { usePurchaseStore } from '~/store/purchase';
import { useThemeStore } from '~/store/theme';

const { t } = useI18n();

const modalStore = useActivationCodeModalStore();
const { isVisible, isHidden } = storeToRefs(modalStore);
const { partnerInfo } = storeToRefs(useActivationCodeDataStore());
const purchaseStore = usePurchaseStore();

useThemeStore();

const title = computed<string>(() => t('activation.activationModal.letSActivateYourUnraidOs'));
const description = computed<string>(() =>
  t('activation.activationModal.onTheFollowingScreenYourLicense')
);
const docsButtons = computed<BrandButtonProps[]>(() => {
  return [
    {
      variant: 'underline',
      external: true,
      href: DOCS_URL_LICENSING_FAQ,
      iconRight: ArrowTopRightOnSquareIcon,
      size: '14px',
      text: t('activation.activationModal.moreAboutLicensing'),
    },
    {
      variant: 'underline',
      external: true,
      href: DOCS_URL_ACCOUNT,
      iconRight: ArrowTopRightOnSquareIcon,
      size: '14px',
      text: t('activation.activationModal.moreAboutUnraidNetAccounts'),
    },
  ];
});
</script>

<template>
  <Dialog
    v-if="isVisible"
    :model-value="isVisible"
    :show-footer="false"
    :show-close-button="isHidden === false"
    size="full"
    class="bg-background"
    @update:model-value="(value) => !value && modalStore.setIsHidden(true)"
  >
    <div class="flex flex-col items-center justify-start">
      <div v-if="partnerInfo?.hasPartnerLogo">
        <ActivationPartnerLogo :partner-info="partnerInfo" />
      </div>

      <h1 class="mt-4 text-center text-xl font-semibold sm:text-2xl">{{ title }}</h1>

      <div class="mx-auto my-12 text-center sm:max-w-xl">
        <p class="text-center text-lg opacity-75 sm:text-xl">{{ description }}</p>
      </div>

      <div class="flex flex-col">
        <div class="mx-auto mb-10">
          <BrandButton
            :text="t('activation.activationModal.activateNow')"
            :icon-right="ArrowTopRightOnSquareIcon"
            @click="purchaseStore.activate"
          />
        </div>

        <div class="mt-6 flex flex-col gap-6">
          <ActivationSteps :active-step="2" class="mb-6" />

          <div class="mx-auto flex w-full flex-col justify-center gap-4 sm:flex-row">
            <BrandButton v-for="button in docsButtons" :key="button.text" v-bind="button" />
          </div>
        </div>
      </div>
    </div>
  </Dialog>
</template>
