<script lang="ts">
  import { fade } from 'svelte/transition';

  import PurchaseContent from '$lib/components/shared-components/purchasing/PurchaseContent.svelte';
  import SettingSwitch from '$lib/components/shared-components/settings/SettingSwitch.svelte';
  import { dateFormats } from '$lib/constants';
  import { authManager } from '$lib/managers/auth-manager.svelte';
  import { locale } from '$lib/stores/preferences.store';
  import { handleError } from '$lib/utils/handle-error';
  import { setSupportBadgeVisibility } from '$lib/utils/purchase-utils';
  import {
    deleteUserLicense as deleteIndividualProductKey,
    deleteServerLicense as deleteServerProductKey,
    getAboutInfo,
    getMyUser,
    getServerLicense,
    isHttpError,
    type LicenseResponseDto,
  } from '@immich/sdk';
  import { Button, Icon, modalManager } from '@immich/ui';
  import { mdiKey } from '@mdi/js';
  import { onMount } from 'svelte';
  import { t } from 'svelte-i18n';

  let isServerProduct = $state(false);
  let serverPurchaseInfo: LicenseResponseDto | null = $state(null);

  const checkPurchaseInfo = async () => {
    const serverInfo = await getAboutInfo();
    isServerProduct = serverInfo.licensed;

    const response = await getMyUser();
    if (response.license) {
      authManager.setUser(response);
    }

    if (isServerProduct && authManager.user.isAdmin) {
      serverPurchaseInfo = await getServerPurchaseInfo();
    }
  };

  const getServerPurchaseInfo = async () => {
    try {
      return await getServerLicense();
    } catch (error) {
      if (isHttpError(error) && error.status === 404) {
        return null;
      }
      throw error;
    }
  };

  onMount(async () => {
    if (!authManager.isPurchased) {
      return;
    }

    await checkPurchaseInfo();
  });

  const removeIndividualProductKey = async () => {
    try {
      const isConfirmed = await modalManager.showDialog({
        title: $t('purchase_remove_product_key'),
        prompt: $t('purchase_remove_product_key_prompt'),
        confirmText: $t('remove'),
      });

      if (!isConfirmed) {
        return;
      }

      await deleteIndividualProductKey();
      authManager.isPurchased = false;
    } catch (error) {
      handleError(error, $t('errors.failed_to_remove_product_key'));
    }
  };

  const removeServerProductKey = async () => {
    try {
      const isConfirmed = await modalManager.showDialog({
        title: $t('purchase_remove_server_product_key'),
        prompt: $t('purchase_remove_server_product_key_prompt'),
        confirmText: $t('remove'),
      });

      if (!isConfirmed) {
        return;
      }

      await deleteServerProductKey();
      authManager.isPurchased = false;
    } catch (error) {
      handleError(error, $t('errors.failed_to_remove_product_key'));
    }
  };

  const onProductActivated = async () => {
    authManager.isPurchased = true;
    await checkPurchaseInfo();
  };
</script>

<section class="my-4">
  <div class="sm:ms-8" in:fade={{ duration: 500 }}>
    {#if authManager.isPurchased}
      <!-- BADGE TOGGLE -->
      <div class="mb-4">
        <SettingSwitch
          title={$t('show_supporter_badge')}
          subtitle={$t('show_supporter_badge_description')}
          bind:checked={authManager.preferences.purchase.showSupportBadge}
          onToggle={setSupportBadgeVisibility}
        />
      </div>

      <!-- PRODUCT KEY INFO CARD -->
      {#if isServerProduct}
        <div
          class="flex place-content-center gap-4 rounded-xl border border-immich-dark-primary/20 bg-gray-50 p-6 pe-12 dark:bg-immich-dark-primary/15"
        >
          <Icon icon={mdiKey} size="56" class="text-primary" />

          <div>
            <p class="text-lg font-semibold text-primary">
              {$t('purchase_server_title')}
            </p>

            {#if authManager.user.isAdmin && serverPurchaseInfo?.activatedAt}
              <p class="col-start-2 mt-1 text-sm dark:text-white">
                {$t('purchase_activated_time', {
                  values: {
                    date: new Date(serverPurchaseInfo.activatedAt).toLocaleString($locale, dateFormats.settings),
                  },
                })}
              </p>
            {:else}
              <p class="dark:text-white">{$t('purchase_settings_server_activated')}</p>
            {/if}
          </div>
        </div>

        {#if authManager.user.isAdmin}
          <div class="mt-4 text-right">
            <Button shape="round" size="small" color="danger" onclick={removeServerProductKey}
              >{$t('purchase_button_remove_key')}</Button
            >
          </div>
        {/if}
      {:else}
        <div
          class="flex place-content-center gap-4 rounded-xl border border-immich-dark-primary/20 bg-gray-50 p-6 pe-12 dark:bg-immich-dark-primary/15"
        >
          <Icon icon={mdiKey} size="56" class="text-primary" />

          <div>
            <p class="text-lg font-semibold text-primary">
              {$t('purchase_individual_title')}
            </p>
            {#if authManager.user.license?.activatedAt}
              <p class="col-start-2 mt-1 text-sm dark:text-white">
                {$t('purchase_activated_time', {
                  values: {
                    date: new Date(authManager.user.license?.activatedAt).toLocaleString($locale, dateFormats.settings),
                  },
                })}
              </p>
            {/if}
          </div>
        </div>

        <div class="mt-4 text-right">
          <Button shape="round" size="small" color="danger" onclick={removeIndividualProductKey}
            >{$t('purchase_button_remove_key')}</Button
          >
        </div>
      {/if}
    {:else}
      <PurchaseContent onActivate={onProductActivated} showTitle={false} />
    {/if}
  </div>
</section>
