<script setup>
import { ref, computed, watch } from "vue";
import { router, useForm, usePage } from "@inertiajs/vue3";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/Components/ui/card";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import { Badge } from "@/Components/ui/badge";
import ConfirmsPassword from "@/Components/ConfirmsPassword.vue";
import InputError from "@/Components/InputError.vue";
import { Shield, Key, Copy, RefreshCw, CheckCircle, AlertCircle } from "lucide-vue-next";
import AppCard from "@/Components/app/ui/card/AppCard.vue";

const props = defineProps({
  requiresConfirmation: Boolean,
});

const page = usePage();
const enabling = ref(false);
const confirming = ref(false);
const disabling = ref(false);
const qrCode = ref(null);
const setupKey = ref(null);
const recoveryCodes = ref([]);

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

const twoFactorEnabled = computed(
  () => !enabling.value && page.props.auth.user?.two_factor_enabled
);

watch(twoFactorEnabled, () => {
  if (!twoFactorEnabled.value) {
    confirmationForm.reset();
    confirmationForm.clearErrors();
  }
});

const enableTwoFactorAuthentication = () => {
  enabling.value = true;

  router.post(
    route("two-factor.enable"),
    {},
    {
      preserveScroll: true,
      onSuccess: () => Promise.all([showQrCode(), showSetupKey(), showRecoveryCodes()]),
      onFinish: () => {
        enabling.value = false;
        confirming.value = props.requiresConfirmation;
      },
    }
  );
};

const showQrCode = () => {
  return axios.get(route("two-factor.qr-code")).then((response) => {
    qrCode.value = response.data.svg;
  });
};

const showSetupKey = () => {
  return axios.get(route("two-factor.secret-key")).then((response) => {
    setupKey.value = response.data.secretKey;
  });
};

const showRecoveryCodes = () => {
  return axios.get(route("two-factor.recovery-codes")).then((response) => {
    recoveryCodes.value = response.data;
  });
};

const confirmTwoFactorAuthentication = () => {
  confirmationForm.post(route("two-factor.confirm"), {
    errorBag: "confirmTwoFactorAuthentication",
    preserveScroll: true,
    preserveState: true,
    onSuccess: () => {
      confirming.value = false;
      qrCode.value = null;
      setupKey.value = null;
    },
  });
};

const regenerateRecoveryCodes = () => {
  axios.post(route("two-factor.recovery-codes")).then(() => showRecoveryCodes());
};

const disableTwoFactorAuthentication = () => {
  disabling.value = true;

  router.delete(route("two-factor.disable"), {
    preserveScroll: true,
    onSuccess: () => {
      disabling.value = false;
      confirming.value = false;
    },
  });
};

const copyToClipboard = async (text) => {
  try {
    await navigator.clipboard.writeText(text);
  } catch (err) {
    console.error("Failed to copy:", err);
  }
};
</script>

<template>
  <AppCard
    title=""
    padding="none"
    class="p-0! gap-0"
    header-class="py-3! px-4 gap-0 text-muted-foreground"
    body-class="p-4 border-t"
  >
    <template #header>
      <div class="flex items-center gap-2">
        <Shield size="18" />
        <CardTitle>Dvonivojska overitev</CardTitle>
      </div>
      <CardDescription>
        Dodatna varnost za vaš račun z dvonivojsko overitvijo.
      </CardDescription>
    </template>

    <!-- Status Header -->
    <div class="flex items-start gap-3">
      <div class="flex-1">
        <h3
          v-if="twoFactorEnabled && !confirming"
          class="text-lg font-semibold flex items-center gap-2"
        >
          <CheckCircle class="h-5 w-5 text-green-600" />
          Dvonivojska overitev omogočena
        </h3>
        <h3
          v-else-if="twoFactorEnabled && confirming"
          class="text-lg font-semibold flex items-center gap-2"
        >
          <AlertCircle class="h-5 w-5 text-amber-600" />

          Dokončaj namestitev dvonivojske overitve
        </h3>
        <h3 v-else class="text-lg font-semibold flex items-center gap-2">
          Dvonivojska overitev onemogočena
        </h3>
      </div>
    </div>

    <!-- QR Code & Setup -->
    <div v-if="twoFactorEnabled" class="space-y-6">
      <div v-if="qrCode" class="space-y-4">
        <div class="rounded-lg border bg-muted/50 p-4">
          <p v-if="confirming" class="text-sm font-medium mb-4">
            Za dokončanje omogočanja dvostopenjske overitve skenirajte naslednjo QR-kodo z
            aplikacijo za preverjanje pristnosti na vašem telefonu ali vnesite
            namestitveno kodo in vpišite ustvarjeno OTP-kodo.
          </p>
          <p v-else class="text-sm text-muted-foreground mb-4">
            Dvonivojska overitev je zdaj omogočena. Skenirajte QR kodo z aplikacijo za
            preverjanje pristnosti na vašem telefonu ali vnesite namestitveni ključ.
          </p>

          <!-- QR Code -->
          <div class="flex justify-center p-4 bg-white rounded-lg" v-html="qrCode" />

          <!-- Setup Key -->
          <div v-if="setupKey" class="mt-4 p-3 bg-background rounded-lg border">
            <div class="flex items-center justify-between gap-2">
              <div class="flex-1">
                <Label class="text-xs text-muted-foreground">Namestitveni Ključ</Label>
                <p class="font-mono text-sm font-semibold mt-1" v-html="setupKey"></p>
              </div>
              <Button
                type="button"
                variant="ghost"
                size="sm"
                @click="copyToClipboard(setupKey)"
              >
                <Copy class="h-4 w-4" />
              </Button>
            </div>
          </div>
        </div>

        <!-- Confirmation Code Input -->
        <div v-if="confirming" class="space-y-2">
          <Label for="code">Potrdite kodo</Label>
          <Input
            id="code"
            v-model="confirmationForm.code"
            type="text"
            name="code"
            inputmode="numeric"
            autofocus
            autocomplete="one-time-code"
            placeholder="Enter 6-digit code"
            class="max-w-xs"
            @keyup.enter="confirmTwoFactorAuthentication"
          />
          <InputError :message="confirmationForm.errors.code" class="mt-2" />
        </div>
      </div>

      <!-- Recovery Codes -->
      <div v-if="recoveryCodes.length > 0 && !confirming" class="space-y-4">
        <div
          class="rounded-lg border border-amber-200 bg-amber-50 p-4 dark:border-amber-800 dark:bg-amber-950"
        >
          <div class="flex items-start gap-2">
            <Key
              class="h-5 w-5 text-amber-600 dark:text-amber-400 flex-shrink-0 mt-0.5"
            />
            <p class="text-sm font-medium text-amber-900 dark:text-amber-100">
              Shranite to obnovitveno kodo v upravitelja gesel. Lahko se uporabi za obnovo
              vstopa v vaš račun, če se izgubi naprava z dvostopenjskim overjanjem.
            </p>
          </div>
        </div>

        <div class="rounded-lg border bg-muted p-4">
          <div class="grid grid-cols-2 gap-2 font-mono text-sm">
            <div
              v-for="code in recoveryCodes"
              :key="code"
              class="flex items-center justify-between p-2 bg-background rounded border"
            >
              <span>{{ code }}</span>
              <Button
                type="button"
                variant="ghost"
                size="sm"
                class="h-6 w-6 p-0"
                @click="copyToClipboard(code)"
              >
                <Copy class="h-3 w-3" />
              </Button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <!-- Action Buttons -->
      <div class="flex flex-row gap-2 items-center justify-end w-full">
        <!-- Enable -->
        <div v-if="!twoFactorEnabled">
          <ConfirmsPassword @confirmed="enableTwoFactorAuthentication">
            <Button type="button" :disabled="enabling">
              <Shield class="h-4 w-4 mr-2" />
              Enable
            </Button>
          </ConfirmsPassword>
        </div>

        <!-- Confirm -->
        <template v-else>
          <ConfirmsPassword @confirmed="confirmTwoFactorAuthentication">
            <Button v-if="confirming" type="button" :disabled="enabling">
              <CheckCircle class="h-4 w-4 mr-2" />
              Confirm
            </Button>
          </ConfirmsPassword>

          <!-- Regenerate Recovery Codes -->
          <ConfirmsPassword @confirmed="regenerateRecoveryCodes">
            <Button
              v-if="recoveryCodes.length > 0 && !confirming"
              type="button"
              variant="outline"
            >
              <RefreshCw class="h-4 w-4 mr-2" />
              Regenerate Recovery Codes
            </Button>
          </ConfirmsPassword>

          <!-- Show Recovery Codes -->
          <ConfirmsPassword @confirmed="showRecoveryCodes">
            <Button
              v-if="recoveryCodes.length === 0 && !confirming"
              type="button"
              variant="outline"
            >
              <Key class="h-4 w-4 mr-2" />
              Show Recovery Codes
            </Button>
          </ConfirmsPassword>

          <!-- Cancel/Disable -->
          <ConfirmsPassword @confirmed="disableTwoFactorAuthentication">
            <Button
              v-if="confirming"
              type="button"
              variant="outline"
              :disabled="disabling"
            >
              Cancel
            </Button>
          </ConfirmsPassword>

          <ConfirmsPassword @confirmed="disableTwoFactorAuthentication">
            <Button
              v-if="!confirming"
              type="button"
              variant="destructive"
              :disabled="disabling"
            >
              Disable
            </Button>
          </ConfirmsPassword>
        </template>
      </div>
    </template>
  </AppCard>
</template>
