<!--
  @component Renders a system dialog to inform the user about incompatible app versions.
-->
<script lang="ts">
  import {globals} from '~/app/globals';
  import Text from '~/app/ui/components/atoms/text/Text.svelte';
  import Modal from '~/app/ui/components/hocs/modal/Modal.svelte';
  import type {D2DProtocolVersionIncompatibleDialogProps} from '~/app/ui/components/partials/system-dialog/internal/d2d-protocol-version-incompatible-dialog/props';
  import {i18n} from '~/app/ui/i18n';
  import MdIcon from '~/app/ui/svelte-components/blocks/Icon/MdIcon.svelte';
  import {unlinkAndCreateBackup} from '~/app/ui/utils/profile';
  import type {SvelteNullableBinding} from '~/app/ui/utils/svelte';

  const {uiLogging} = globals.unwrap();
  const log = uiLogging.logger('ui.component.device-cookie-mismatch-dialog');

  const {onclose, services, target}: D2DProtocolVersionIncompatibleDialogProps = $props();

  let modalComponent = $state<SvelteNullableBinding<Modal>>(null);

  let errorMessage = $state<string | undefined>(undefined);
</script>

<Modal
  bind:this={modalComponent}
  {onclose}
  options={{
    allowClosingWithEsc: false,
    allowSubmittingWithEnter: false,
    overlay: 'opaque',
    suspendHotkeysWhenVisible: true,
  }}
  {target}
  wrapper={{
    type: 'card',
    buttons: [
      {
        label: $i18n.t('dialog--common.action--relink', 'Relink Device'),
        onclick: () => {
          if (!services.isSet()) {
            log.warn('Cannot unlink the profile because the app services are not yet ready');
            return;
          }
          unlinkAndCreateBackup(services.unwrap()).catch((error) => {
            log.error(error);
            errorMessage = $i18n.t(
              'dialog--d2d-protocol-version-incompatible.error--no-connection',
              'Failed to unlink the device. Please check your internet connection and try again.',
            );
          });
        },
        type: 'filled',
      },
    ],
    title: $i18n.t(
      'dialog--d2d-protocol-version-incompatible.label--title',
      'Incompatbile App Version on your Mobile Device',
    ),
    minWidth: 340,
    maxWidth: 460,
  }}
>
  <div class="content">
    <p>
      {$i18n.t(
        'dialog--d2d-protocol-version-incompatible.prose--description-p1',
        'The {shortAppName} version installed on your mobile device is not compatible with this version of {shortAppName} for desktop. To avoid synchronization problems, please update the app on your mobile device and relink it with {shortAppName} for desktop.',
        {
          shortAppName: import.meta.env.SHORT_APP_NAME,
        },
      )}
    </p>
    <p>
      {$i18n.t(
        'dialog--d2d-protocol-version-incompatible.prose--description-p2',
        'The message history can be restored after relinking.',
      )}
    </p>
    {#if errorMessage !== undefined}
      <div class="warning">
        <MdIcon theme="Filled">warning</MdIcon>
        <Text text={errorMessage} />
      </div>
    {/if}
  </div>
</Modal>

<style lang="scss">
  @use 'component' as *;

  .content {
    padding: 0 rem(16px);

    p:first-child {
      margin-top: 0;
    }

    p:last-child {
      margin-bottom: 0;
    }
  }
</style>
