<script setup>
import { ref } from "vue";
import { useForm } from "@inertiajs/vue3";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import InputError from "@/Components/InputError.vue";
import { CheckCircle, Lock } from "lucide-vue-next";
import AppCard from "@/Components/app/ui/card/AppCard.vue";
import { CardTitle } from "@/Components/ui/card";

const passwordInput = ref(null);
const currentPasswordInput = ref(null);

const form = useForm({
  current_password: "",
  password: "",
  password_confirmation: "",
});

const updatePassword = () => {
  form.put(route("user-password.update"), {
    errorBag: "updatePassword",
    preserveScroll: true,
    onSuccess: () => form.reset(),
    onError: () => {
      if (form.errors.password) {
        form.reset("password", "password_confirmation");
        passwordInput.value.focus();
      }

      if (form.errors.current_password) {
        form.reset("current_password");
        currentPasswordInput.value.focus();
      }
    },
  });
};
</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">
        <Lock size="18" />
        <CardTitle>Posodobi geslo</CardTitle>
      </div>
      <p class="text-sm">
        Poskrbite, da vaš račun uporablja dolgo, naključno geslo za varnost.
      </p>
    </template>

    <form @submit.prevent="updatePassword" class="space-y-6">
      <div class="space-y-2">
        <Label for="current_password">Trenutno geslo</Label>
        <Input
          id="current_password"
          ref="currentPasswordInput"
          v-model="form.current_password"
          type="password"
          autocomplete="current-password"
        />
        <InputError :message="form.errors.current_password" class="mt-2" />
      </div>

      <div class="space-y-2">
        <Label for="password">Novo geslo</Label>
        <Input
          id="password"
          ref="passwordInput"
          v-model="form.password"
          type="password"
          autocomplete="new-password"
        />
        <InputError :message="form.errors.password" class="mt-2" />
      </div>

      <div class="space-y-2">
        <Label for="password_confirmation">Potrdi geslo</Label>
        <Input
          id="password_confirmation"
          v-model="form.password_confirmation"
          type="password"
          autocomplete="new-password"
        />
        <InputError :message="form.errors.password_confirmation" class="mt-2" />
      </div>
    </form>

    <template #footer>
      <div class="flex items-center justify-between w-full">
        <div class="flex items-center gap-2 text-sm text-muted-foreground">
          <CheckCircle v-if="form.recentlySuccessful" class="h-4 w-4 text-green-600" />
          <span v-if="form.recentlySuccessful">Shranjeno.</span>
        </div>
        <Button type="submit" :disabled="form.processing"> Shrani </Button>
      </div>
    </template>
  </AppCard>
</template>
