<script setup lang="ts">
import { ref, watch } from "vue";
import { useForm, useHttp } from "@inertiajs/vue3";
import QRCode from "qrcode";
import { ShieldCheck, ShieldOff } from "lucide-vue-next";
import Alert from "../../components/ui/Alert.vue";
import AlertDescription from "../../components/ui/AlertDescription.vue";
import AlertTitle from "../../components/ui/AlertTitle.vue";
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 CardFooter from "../../components/ui/CardFooter.vue";
import CardHeader from "../../components/ui/CardHeader.vue";
import CardTitle from "../../components/ui/CardTitle.vue";
import Dialog from "../../components/ui/Dialog.vue";
import DialogContent from "../../components/ui/DialogContent.vue";
import DialogDescription from "../../components/ui/DialogDescription.vue";
import DialogFooter from "../../components/ui/DialogFooter.vue";
import DialogHeader from "../../components/ui/DialogHeader.vue";
import DialogTitle from "../../components/ui/DialogTitle.vue";
import FormItem from "../../components/ui/FormItem.vue";
import FormLabel from "../../components/ui/FormLabel.vue";
import FormMessage from "../../components/ui/FormMessage.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";
import { useBuilderPrefix } from "../../composables/useBuilderPrefix";

const { t } = useTranslations();
const prefix = useBuilderPrefix();

const props = defineProps<{
  user: { name: string; email: string };
  mfaEnabled: boolean;
  recoveryCodes: string[] | null;
}>();

// MFA setup state
const setupOpen = ref(false);
const qrCodeDataUrl = ref("");
const secretKey = ref("");
const setupStep = ref<"qr" | "confirm">("qr");

const confirmForm = useForm({ code: "" });
const recoveryCodesForm = useForm({});
const mfaSetupHttp = useHttp({});

// PinInputRoot expects string[], confirmForm.code is a string — use a bridge ref
const otpCode = ref<string[]>([]);
watch(otpCode, (v) => {
  confirmForm.code = v.join("");
});

// Reset dialog state when it closes
watch(setupOpen, (isOpen) => {
  if (!isOpen) {
    confirmForm.reset();
    setupStep.value = "qr";
    otpCode.value = [];
  }
});

function startSetup() {
  mfaSetupHttp.post(`/${prefix}/account/mfa/enable`, {
    onSuccess: async (response: { secret: string; qr_code_url: string }) => {
      secretKey.value = response.secret;
      qrCodeDataUrl.value = await QRCode.toDataURL(response.qr_code_url);
      setupStep.value = "qr";
      setupOpen.value = true;
    },
  });
}

function confirmMfa() {
  confirmForm.post(`/${prefix}/account/mfa/confirm`, {
    onSuccess: () => {
      setupOpen.value = false;
      confirmForm.reset();
    },
  });
}

function regenerateCodes() {
  recoveryCodesForm.post(`/${prefix}/account/mfa/recovery-codes`);
}
</script>

<template>
  <div class="space-y-6">
    <!-- MFA status card -->
    <Card>
      <CardHeader>
        <div class="flex items-center gap-2">
          <ShieldCheck v-if="mfaEnabled" class="h-5 w-5 text-green-600" />
          <ShieldOff v-else class="h-5 w-5 text-destructive" />
          <CardTitle>{{ t("builder.mfa.title") }}</CardTitle>
        </div>
        <CardDescription>
          <template v-if="mfaEnabled">
            {{ t("builder.mfa.enabled") }}
          </template>
          <template v-else>
            {{ t("builder.mfa.setup_description") }}
          </template>
        </CardDescription>
      </CardHeader>

      <CardContent v-if="!mfaEnabled">
        <Alert variant="destructive" class="mb-4">
          <ShieldOff class="h-4 w-4" />
          <AlertTitle>{{ t("builder.mfa.required_title") }}</AlertTitle>
          <AlertDescription>
            {{ t("builder.mfa.setup_required") }}
          </AlertDescription>
        </Alert>
      </CardContent>

      <CardFooter>
        <Button v-if="!mfaEnabled" @click="startSetup">
          {{ t("builder.mfa.enable") }}
        </Button>
        <Button
          v-else
          variant="outline"
          :disabled="recoveryCodesForm.processing"
          @click="regenerateCodes"
        >
          {{ t("builder.mfa.regenerate_codes") }}
        </Button>
      </CardFooter>
    </Card>

    <!-- Recovery codes display -->
    <Card v-if="recoveryCodes">
      <CardHeader>
        <CardTitle>{{ t("builder.mfa.recovery_codes") }}</CardTitle>
        <CardDescription>
          {{ t("builder.mfa.recovery_codes_description") }}
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div class="grid grid-cols-2 gap-2 font-mono text-sm">
          <div
            v-for="code in recoveryCodes"
            :key="code"
            class="rounded bg-muted px-3 py-1.5 text-center"
          >
            {{ code }}
          </div>
        </div>
      </CardContent>
    </Card>
  </div>

  <!-- MFA setup dialog -->
  <Dialog v-model:open="setupOpen">
    <DialogContent class="sm:max-w-md">
      <DialogHeader>
        <DialogTitle>{{ t("builder.mfa.setup_title") }}</DialogTitle>
        <DialogDescription>
          <template v-if="setupStep === 'qr'">
            {{ t("builder.mfa.scan_qr") }}
          </template>
          <template v-else>
            {{ t("builder.mfa.enter_code") }}
          </template>
        </DialogDescription>
      </DialogHeader>

      <!-- QR code step -->
      <div v-if="setupStep === 'qr'" class="space-y-4">
        <div class="flex justify-center">
          <img
            v-if="qrCodeDataUrl"
            :src="qrCodeDataUrl"
            alt="QR code for MFA setup"
            class="h-48 w-48 rounded border"
          />
        </div>
        <p class="text-center text-xs text-muted-foreground">
          {{ t("builder.mfa.cant_scan") }}
          <span class="block font-mono font-medium text-foreground">{{
            secretKey
          }}</span>
        </p>
        <DialogFooter>
          <Button variant="ghost" type="button" @click="setupOpen = false">
            {{ t("builder.mfa.cancel") }}
          </Button>
          <Button type="button" @click="setupStep = 'confirm'">
            {{ t("builder.mfa.continue") }}
          </Button>
        </DialogFooter>
      </div>

      <!-- Confirm code step -->
      <div v-else class="space-y-4">
        <form @submit.prevent="confirmMfa">
          <FormItem>
            <FormLabel :error="!!confirmForm.errors.code">
              {{ t("builder.mfa.auth_code") }}
            </FormLabel>
            <InputOtp v-model="otpCode" :length="6">
              <InputOtpGroup>
                <InputOtpSlot v-for="i in 6" :key="i" :index="i - 1" />
              </InputOtpGroup>
            </InputOtp>
            <FormMessage :message="confirmForm.errors.code" />
          </FormItem>

          <DialogFooter class="mt-4">
            <Button type="button" variant="outline" @click="setupStep = 'qr'">
              {{ t("builder.mfa.back") }}
            </Button>
            <Button type="submit" :disabled="confirmForm.processing">
              {{ t("builder.mfa.enable") }}
            </Button>
          </DialogFooter>
        </form>
      </div>
    </DialogContent>
  </Dialog>
</template>
