<script setup lang="ts">
import { router } from '@inertiajs/vue3';
import { computed, ref } from 'vue';
import { toast } from 'vue-sonner';
import { RowDeleteAction, RowEditAction, RowStatusAction } from '@/components/button';
import ConfirmDialog from '@/components/ConfirmDialog.vue';
import OwnerVerificationRowActions from '@/components/owner-verification/OwnerVerificationRowActions.vue';
import { useCan } from '@/composables/useCan';
import {
    cuttingStatusActionIcon,
    CuttingStatus,
    cuttingStatusTransitionConfirmDescription,
} from '@/constants/cutting-status';
import { edit, destroy, transition_status } from '@/routes/admin/manage/cuttings';
import type { CuttingListItem, CuttingStatusAction } from '@/types/cutting';
import CuttingRejectDialog from './CuttingRejectDialog.vue';
import CuttingVerifyDialog from './CuttingVerifyDialog.vue';

const props = defineProps<{
    cutting: CuttingListItem;
}>();

const { can } = useCan();

const statusConfirmOpen = ref(false);
const statusProcessing = ref(false);
const rejectDialogOpen = ref(false);
const verifyDialogOpen = ref(false);
const pendingAction = ref<CuttingStatusAction | null>(null);

const availableActions = computed(() => props.cutting.available_actions ?? []);

const canEdit = computed(
    () => props.cutting.is_editable && can('cuttings.update'),
);
const canDelete = computed(
    () => can('cuttings.delete') && (props.cutting.status === CuttingStatus.IN_PROGRESS || props.cutting.status === CuttingStatus.REJECTED),
);

function canPerformAction(action: CuttingStatusAction): boolean {
    return can(action.permission);
}

function statusConfirmDescription(action: CuttingStatusAction): string {
    return cuttingStatusTransitionConfirmDescription(action.status);
}

function openStatusConfirm(action: CuttingStatusAction) {
    if (action.status === CuttingStatus.VERIFIED) {
        verifyDialogOpen.value = true;

        return;
    }

    if (action.status === CuttingStatus.REJECTED) {
        rejectDialogOpen.value = true;

        return;
    }

    pendingAction.value = action;
    statusConfirmOpen.value = true;
}

function transitionStatus() {
    if (!pendingAction.value) {
        return;
    }

    statusProcessing.value = true;

    router.post(
        transition_status.url(props.cutting.id),
        {
            status: pendingAction.value.status,
        },
        {
            preserveScroll: true,
            onSuccess: () => {
                statusConfirmOpen.value = false;
                pendingAction.value = null;
            },
            onError: (errors: Record<string, string>) => {
                if (errors.system) {
                    toast.error(errors.system);
                }
            },
            onFinish: () => {
                statusProcessing.value = false;
            },
        },
    );
}

</script>

<template>
    <div class="flex flex-wrap items-center justify-end gap-1">
        <OwnerVerificationRowActions v-if="cutting.status === CuttingStatus.PENDING_VERIFICATION" type="cutting"
            :id="cutting.id" />

        <template v-for="action in availableActions" :key="action.status">
            <RowStatusAction v-if="canPerformAction(action)" :size="'sm'" :icon="cuttingStatusActionIcon(action.status)"
                :label="action.label" :destructive="action.destructive" @click="openStatusConfirm(action)" />
        </template>

        <RowEditAction v-if="canEdit" :href="edit.url(cutting.id)" />

        <template v-if="canDelete">
            <RowDeleteAction :action-url="destroy.url(cutting.id)" title="Hapus cutting?"
                description="Data cutting ini akan dihapus permanen." error-message="Gagal menghapus cutting." />
        </template>
    </div>

    <ConfirmDialog v-model:open="statusConfirmOpen" :title="pendingAction
        ? `${pendingAction.label} cutting?`
        : 'Ubah status cutting?'
        " :description="pendingAction ? statusConfirmDescription(pendingAction) : ''
            " :confirm-label="pendingAction?.label ?? 'Konfirmasi'" cancel-label="Batal"
        :destructive="pendingAction?.destructive ?? false" :loading="statusProcessing" @confirm="transitionStatus" />

    <CuttingRejectDialog v-model:open="rejectDialogOpen" :cutting-id="cutting.id" />

    <CuttingVerifyDialog v-model:open="verifyDialogOpen" :cutting="cutting" />
</template>
