<script setup lang="ts">
import { router, usePage } from '@inertiajs/vue3';
import { ref } from 'vue';
import { toast } from 'vue-sonner';
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
    AlertDialogTrigger,
} from '@/components/ui/alert-dialog';
import { Button } from '@/components/ui/button';
import { reset_password } from '@/routes/admin/hr/employees';

const props = defineProps<{
    employeeId: number;
    employeeName?: string | null;
}>();

const page = usePage();
const defaultPassword = page.props.auth.password_default as string;

const open = ref(false);
const processing = ref(false);

function resetPassword() {
    processing.value = true;

    router.post(reset_password.url(props.employeeId), {}, {
        preserveScroll: true,
        onSuccess: () => {
            open.value = false;
        },
        onError: (errors: any) => {
            if (errors.system) {
                toast.error(errors.system);
            }
        },
        onFinish: () => {
            processing.value = false;
        },
    });
}
</script>

<template>
    <AlertDialog v-model:open="open">
        <AlertDialogTrigger as-child>
            <Button variant="outline" type="button">
                Reset Kata Sandi
            </Button>
        </AlertDialogTrigger>
        <AlertDialogContent>
            <AlertDialogHeader>
                <AlertDialogTitle>Reset kata sandi pegawai?</AlertDialogTitle>
                <AlertDialogDescription>
                    Kata sandi
                    <span class="text-foreground font-medium">{{ employeeName ?? 'pegawai' }}</span>
                    akan direset ke kata sandi default sistem (<span
                        class="font-mono bg-muted px-1.5 py-0.5 rounded text-foreground font-medium">{{ defaultPassword
                        }}</span>). Pengguna akan otomatis logout dari
                    semua sesi aktif.
                </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
                <AlertDialogCancel :disabled="processing">
                    Batal
                </AlertDialogCancel>
                <AlertDialogAction :disabled="processing" @click.prevent="resetPassword">
                    {{ processing ? 'Memproses...' : 'Reset Kata Sandi' }}
                </AlertDialogAction>
            </AlertDialogFooter>
        </AlertDialogContent>
    </AlertDialog>
</template>
