<script setup>
import { ref, reactive } from "vue";
import { useQuasar } from "quasar";
import { q, m, navigateTo } from "#imports";
const $q = useQuasar();
const { my } = await q({
  my: {
    my2FA: true
  }
});
const obj = reactive({
  code: ""
});
const currentStep = ref(1);
const secretVisible = ref(false);
const loading = ref(false);
const save = async () => {
  loading.value = true;
  try {
    await m("updateMy2FA", {
      code: obj.code,
      secret: my.my2FA.secret
    });
    $q.notify({
      message: "\u{1F389} Two-Factor Authentication has been successfully enabled!",
      color: "positive",
      timeout: 5e3,
      actions: [
        { label: "Dismiss", color: "white" }
      ]
    });
    await navigateTo("/User/setting");
  } catch (e) {
    $q.notify({
      message: `\u274C Setup failed: ${e.message}`,
      color: "negative",
      timeout: 5e3,
      actions: [
        { label: "Retry", color: "white" }
      ]
    });
  } finally {
    loading.value = false;
  }
};
const show = ref(true);
if (my.twoFactorEnabled) {
  show.value = false;
  currentStep.value = 3;
}
const onCopy = async () => {
  try {
    await navigator.clipboard.writeText(my.my2FA.secret);
    $q.notify({
      message: "\u2705 Secret key copied to clipboard",
      color: "positive",
      timeout: 2e3,
      icon: "content_copy"
    });
  } catch (e) {
    const textArea = document.createElement("textarea");
    textArea.value = my.my2FA.secret;
    document.body.appendChild(textArea);
    textArea.select();
    document.execCommand("copy");
    document.body.removeChild(textArea);
    $q.notify({
      message: "\u2705 Secret key copied to clipboard",
      color: "positive",
      timeout: 2e3
    });
  }
};
</script>

<style scoped>
.two-factor-setup{margin:0 auto;max-width:800px}.setup-header{text-align:center}.app-card{transition:all .3s ease}.app-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.1);transform:translateY(-2px)}.qr-card{background:linear-gradient(135deg,#f5f7fa,#c3cfe2);border:2px dashed #1976d2}.secret-input{font-family:Courier New,monospace;font-size:14px}.code-input .q-field__control input{font-family:Courier New,monospace;font-size:24px;font-weight:700;letter-spacing:8px;text-align:center}.verify-section{text-align:center}@media (max-width:600px){.app-card{margin-bottom:1rem}.qr-card img{width:180px!important}.code-input .q-field__control input{font-size:20px;letter-spacing:4px}}.q-btn--loading{pointer-events:none}.q-stepper--vertical .q-stepper__step--done .q-stepper__label{opacity:.7}.q-btn,.q-card{transition:all .2s ease}.q-btn:hover{transform:translateY(-1px)}
</style>

<template>
    <div class="two-factor-setup">
        <!-- Header -->
        <div class="setup-header q-mb-lg">
            <h5 class="q-my-md">{{ $t('Setup Two-Factor Authentication') }}</h5>
            <q-stepper v-model="currentStep" vertical color="primary" animated flat>
                <q-step :name="1" title="Download Authenticator App" icon="download" :done="currentStep > 1">
                    <div class="q-mb-md">
                        <p class="text-body1 q-mb-md">{{ $t('Choose and download an authenticator app for your device:')
                            }}</p>

                        <!-- App Selection Cards -->
                        <div class="row q-gutter-md q-mb-lg">
                            <div class="col-12 col-md-5">
                                <q-card flat bordered class="app-card">
                                    <q-card-section class="q-pa-md">
                                        <div class="text-h6 q-mb-sm">📱 Android</div>
                                        <div class="q-gutter-sm">
                                            <q-btn outline color="primary" size="sm" target="_blank"
                                                href="https://play.google.com/store/apps/details?id=com.azure.authenticator"
                                                label="Microsoft Authenticator" class="full-width" />
                                            <q-btn outline color="primary" size="sm" target="_blank"
                                                href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2"
                                                label="Google Authenticator" class="full-width" />
                                        </div>
                                    </q-card-section>
                                </q-card>
                            </div>

                            <div class="col-12 col-md-5">
                                <q-card flat bordered class="app-card">
                                    <q-card-section class="q-pa-md">
                                        <div class="text-h6 q-mb-sm">🍎 iOS</div>
                                        <div class="q-gutter-sm">
                                            <q-btn outline color="primary" size="sm" target="_blank"
                                                href="https://apps.apple.com/us/app/microsoft-authenticator/id983156458"
                                                label="Microsoft Authenticator" class="full-width" />
                                            <q-btn outline color="primary" size="sm" target="_blank"
                                                href="https://apps.apple.com/us/app/google-authenticator/id388497605"
                                                label="Google Authenticator" class="full-width" />
                                        </div>
                                    </q-card-section>
                                </q-card>
                            </div>
                        </div>

                        <q-btn color="primary" @click="currentStep = 2" :label="$t('I have installed the app')"
                            icon-right="arrow_forward" />
                    </div>
                </q-step>

                <q-step :name="2" title="Scan QR Code" icon="qr_code" :done="currentStep > 2">
                    <div class="text-center q-mb-md">
                        <p class="text-body1 q-mb-md">{{ $t('Scan this QR code with your authenticator app:') }}</p>

                        <q-card flat bordered class="qr-card inline-block q-pa-lg">
                            <q-img :src="my.my2FA.image" width="200px" class="q-mb-md" />

                            <!-- Manual Entry Option -->
                            <q-expansion-item icon="key" :label="$t('Enter manually instead')" class="text-left">
                                <div class="q-pa-md bg-grey-1 rounded-borders">
                                    <div class="text-caption text-grey-7 q-mb-xs">{{ $t('Secret Key:') }}</div>
                                    <div class="row items-center q-gutter-sm">
                                        <div class="col">
                                            <q-input
                                                :model-value="secretVisible ? (my.my2FA?.secret || '') : '●'.repeat(my.my2FA?.secret?.length || 16)"
                                                readonly dense outlined class="secret-input" />
                                        </div>
                                        <q-btn flat round dense :icon="secretVisible ? 'visibility_off' : 'visibility'"
                                            @click="secretVisible = !secretVisible"
                                            :title="secretVisible ? $t('Hide') : $t('Show')" />
                                        <q-btn flat round dense icon="content_copy" @click="onCopy"
                                            :title="$t('Copy to clipboard')" />
                                    </div>
                                </div>
                            </q-expansion-item>
                        </q-card>

                        <div class="q-mt-md">
                            <q-btn color="primary" @click="currentStep = 3" :label="$t('I have scanned the code')"
                                icon-right="arrow_forward" />
                        </div>
                    </div>
                </q-step>

                <q-step :name="3" title="Verify Setup" icon="verified_user">
                    <div class="verify-section">
                        <p class="text-body1 q-mb-md">
                            {{ $t('Enter the 6-digit code from your authenticator app to complete setup:') }}
                        </p>

                        <div class="row justify-center q-mb-lg">
                            <div class="col-12 col-sm-8 col-md-6">
                                <q-input v-model="obj.code" :label="$t('Verification Code')"
                                    hint="6-digit code from your authenticator app" type="tel" inputmode="numeric"
                                    pattern="[0-9]*" outlined maxlength="6" class="text-center code-input" required>
                                    <template v-slot:prepend>
                                        <q-icon name="security" />
                                    </template>
                                </q-input>
                            </div>
                        </div>

                        <div class="text-center">
                            <q-btn @click="save" color="positive" size="lg" :label="$t('Complete Setup')"
                                icon="check_circle" :loading="loading" />
                        </div>
                    </div>
                </q-step>
            </q-stepper>
        </div>
    </div>
</template>
