<script setup lang="ts">
import { useForm } from '@inertiajs/vue3';
import { X } from '@lucide/vue';
import { computed, ref } from 'vue';
import { toast } from 'vue-sonner';
import { RowApproveAction, RowRejectAction } from '@/components/button';
import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import {
    Field,
    FieldError,
    FieldLabel,
} from '@/components/ui/field';
import { Textarea } from '@/components/ui/textarea';
import { useCan } from '@/composables/useCan';
import { approve, reject, approve_request, reject_request } from '@/routes/admin/manage/owner_verifications';

const props = defineProps<{
    type: 'request' | 'cutting';
    id: number;
    title?: string;
    subjectLabel?: string;
    actionLabel?: string;
}>();

const { can } = useCan();

const rejectDialogOpen = ref(false);

const approveForm = useForm({});
const rejectForm = useForm({
    reason: '',
});

const approveUrl = computed(() => (
    props.type === 'cutting'
        ? approve.url(props.id)
        : approve_request.url(props.id)
));

const rejectUrl = computed(() => (
    props.type === 'cutting'
        ? reject.url(props.id)
        : reject_request.url(props.id)
));

const canApprove = computed(() => can('owner_verifications.verify'));
const canReject = computed(() => can('owner_verifications.reject'));

function submitApprove() {
    approveForm
        .post(approveUrl.value, {
            preserveScroll: true,
            onError: (errors: Record<string, string>) => {
                if (errors.system) {
                    toast.error(errors.system);
                }
            },
        });
}

function submitReject() {
    rejectForm
        .post(rejectUrl.value, {
            preserveScroll: true,
            onSuccess: () => {
                rejectDialogOpen.value = false;
                rejectForm.reset();
            },
            onError: (errors: Record<string, string>) => {
                if (errors.system) {
                    toast.error(errors.system);
                }
            },
        });
}
</script>

<template>
    <template v-if="canApprove">
        <RowApproveAction size="sm" tooltip="Setujui" :disabled="approveForm.processing" @click="submitApprove" />
    </template>

    <template v-if="canReject">
        <RowRejectAction size="sm" tooltip="Tolak" :disabled="rejectForm.processing" @click="rejectDialogOpen = true" />
    </template>

    <Dialog v-model:open="rejectDialogOpen">
        <DialogContent class="sm:max-w-lg">
            <DialogHeader>
                <DialogTitle>Tolak Verifikasi</DialogTitle>
            </DialogHeader>

            <div class="space-y-4">
                <div v-if="subjectLabel || title || actionLabel" class="rounded-md border p-3 text-xs space-y-2">
                    <div v-if="subjectLabel">
                        <span class="text-muted-foreground">Modul:</span>
                        <span class="ml-1 font-medium">{{ subjectLabel }}</span>
                    </div>
                    <div v-if="title">
                        <span class="text-muted-foreground">Item:</span>
                        <span class="ml-1 font-medium">{{ title }}</span>
                    </div>
                    <div v-if="actionLabel">
                        <span class="text-muted-foreground">Aksi:</span>
                        <span class="ml-1 font-medium">{{ actionLabel }}</span>
                    </div>
                </div>

                <Field>
                    <FieldLabel for="owner-verification-reject-reason">Alasan Penolakan</FieldLabel>
                    <Textarea id="owner-verification-reject-reason" v-model="rejectForm.reason"
                        placeholder="Jelaskan alasan penolakan..." rows="3" />
                    <FieldError :errors="rejectForm.errors.reason ? [rejectForm.errors.reason] : []" />
                </Field>
            </div>

            <DialogFooter>
                <Button type="button" variant="outline" @click="rejectDialogOpen = false">
                    Batal
                </Button>
                <Button type="button" variant="destructive" :disabled="rejectForm.processing" @click="submitReject">
                    <X class="size-4" />
                    Tolak
                </Button>
            </DialogFooter>
        </DialogContent>
    </Dialog>
</template>
