<template>
  <div>
    <TitleBox />
    <div class="page-setup__action-box">
      <div class="page-setup__description">
        <p>{{ $t('description-1') }}</p>
        <p>{{ $t('description-2') }}</p>
      </div>
      <div class="page-setup__button">
        <Button @click="openModal">{{ $t('create admin user') }}</Button>

        <ModalDialog v-if="showAdminAccountCreatedDialog" :no-close-button="true" @close="showAdminAccountCreatedDialog = false">
          <div class="page-setup__auth-message">{{ $t('pin') }}</div>
          <div class="page-setup__pin">{{ authcode }}</div>
          <div class="page-setup__auth-message">{{ $t('remember-and-log-in') }}</div>
          <template v-slot:footer>
            <div class="page-setup__cta">
              <Button @click="createAdminAccount" :disabled="saveInProgress">{{ $t('complete-setup') }}</Button>
            </div>
          </template>
        </ModalDialog>
      </div>
    </div>
    <CopyrightNotice />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import useAuth from '@/composables/useAuth'
import useI18n from '@/composables/useI18n'
import useEngine from '@/composables/useEngine'

const { $t } = useI18n({
  'create admin user': { en: 'create admin user', de: 'Admin-Benutzer anlegen' },
  'description-1': { en: 'Congratulation!', de: 'Herzlichen Glückwunsch!' },
  'description-2': { en: 'You\'ve successfully installed Know Your Teammates.', de: 'Know Your Teammates wurde erfolgreich installiert.' },
  'pin': { en: 'Your pin code is:', de: 'Deine PIN lautet:' },
  'remember-and-log-in': { en: 'Write it down now.', de: 'Schreibe sie Dir jetzt auf.' },
  'complete-setup': { en: 'Complete setup', de: 'Setup abschließen' },
})

await useAuth().authenticateAndLoadUserInfo(['setup'])

const showAdminAccountCreatedDialog = ref(false)
const saveInProgress = ref(false)
const authcode = ref('000000')
const openModal = () => {
  authcode.value = ''
  for (var i = 0; i < 6; i++) {
    authcode.value += '' + Math.floor(Math.floor(Math.random() * 10000) / 100) % 10
  }
  showAdminAccountCreatedDialog.value = true
  saveInProgress.value = false
}

const createAdminAccount = async () => {
  saveInProgress.value = true
  await useEngine().setupApp(authcode.value)
  saveInProgress.value = false
  showAdminAccountCreatedDialog.value = false
  document.location.pathname = "/"
}
</script>

<style lang="scss">
@use '~/assets/css/media';
@use '~/assets/css/fonts';

.page-setup {
  &__action-box {
    display: flex;
    flex-direction: column;
    width: 340px;
    margin: 0 auto;

    @media (max-width: media.$phone-max-width) {
      margin: 32px 0 0 0;
      width: 100%;
    }
  }

  &__description {
    font-size: 24px;
    color: #ffffff;
    text-align: center;
  }

  &__auth-message {
    font-family: fonts.$font-secondary;
    font-size: 24px;
    text-align: center;
    margin: 32px;
  }

  &__pin {
    font-family: fonts.$font-secondary;
    font-size: 32px;
    font-weight: 800;
    text-align: center;
  }

  &__button {
    display: flex;
    margin: 32px auto;
  }

  &__cta {
    margin: 0 auto;
  }
}
</style>