<script setup lang="ts">
import { ref } from "vue";
import { Head, useForm } from "@inertiajs/vue3";
import AuthLayout from "../../Layouts/AuthLayout.vue";

defineOptions({ layout: AuthLayout });
import Button from "../../components/ui/Button.vue";
import Card from "../../components/ui/Card.vue";
import CardContent from "../../components/ui/CardContent.vue";
import CardDescription from "../../components/ui/CardDescription.vue";
import CardHeader from "../../components/ui/CardHeader.vue";
import CardTitle from "../../components/ui/CardTitle.vue";
import FormItem from "../../components/ui/FormItem.vue";
import FormLabel from "../../components/ui/FormLabel.vue";
import FormMessage from "../../components/ui/FormMessage.vue";
import Input from "../../components/ui/Input.vue";
import InputOtp from "../../components/ui/InputOtp.vue";
import InputOtpGroup from "../../components/ui/InputOtpGroup.vue";
import InputOtpSlot from "../../components/ui/InputOtpSlot.vue";
import { useTranslations } from "../../composables/useTranslations";

const { t } = useTranslations();

const useRecovery = ref(false);

const form = useForm({
  code: "",
});

function submit() {
  form.post("/admin/mfa/challenge");
}
</script>

<template>
  <Head :title="t('builder.mfa.title')" />

  <div class="flex min-h-screen items-center justify-center bg-muted/40">
    <Card class="w-full max-w-sm">
      <CardHeader>
        <CardTitle class="text-xl">{{ t("builder.mfa.title") }}</CardTitle>
        <CardDescription>
          <template v-if="!useRecovery">
            {{ t("builder.mfa.enter_otp") }}
          </template>
          <template v-else>
            {{ t("builder.mfa.enter_recovery") }}
          </template>
        </CardDescription>
      </CardHeader>

      <CardContent>
        <form class="space-y-4" @submit.prevent="submit">
          <FormItem v-if="!useRecovery">
            <FormLabel :error="!!form.errors.code" for="otp">
              {{ t("builder.mfa.auth_code") }}
            </FormLabel>
            <InputOtp
              v-model="form.code"
              :length="6"
              @complete="(v) => (form.code = v.join(''))"
            >
              <InputOtpGroup>
                <InputOtpSlot v-for="i in 6" :key="i" :index="i - 1" />
              </InputOtpGroup>
            </InputOtp>
            <FormMessage :message="form.errors.code" />
          </FormItem>

          <FormItem v-else>
            <FormLabel :error="!!form.errors.code" for="recovery">
              {{ t("builder.mfa.recovery_code") }}
            </FormLabel>
            <Input
              id="recovery"
              v-model="form.code"
              type="text"
              name="code"
              autocomplete="one-time-code"
              placeholder="XXXXXXXX-XXXXXXXX"
              class="font-mono tracking-widest"
            />
            <FormMessage :message="form.errors.code" />
          </FormItem>

          <Button type="submit" :disabled="form.processing" class="w-full">
            {{ t("builder.mfa.verify") }}
          </Button>

          <button
            type="button"
            class="w-full text-center text-sm text-muted-foreground hover:text-foreground hover:underline"
            @click="useRecovery = !useRecovery"
          >
            {{
              useRecovery
                ? t("builder.mfa.use_authenticator")
                : t("builder.mfa.use_recovery")
            }}
          </button>
        </form>
      </CardContent>
    </Card>
  </div>
</template>
