<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, RowDetailAction, 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';
import type { OwnerVerificationItem } from '@/types/owner-verification';

const props = defineProps<{
    item: OwnerVerificationItem;
}>();

const emit = defineEmits<{
    view: [];
}>();

const { can } = useCan();

const rejectDialogOpen = ref(false);

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

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

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

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>
    <div class="flex items-center justify-end gap-1">
        <RowDetailAction tooltip="Lihat" @click="emit('view')" />

        <template v-if="item.is_pending && can('owner_verifications.verify')">
            <RowApproveAction
                size="sm"
                tooltip="Setujui"
                :disabled="approveForm.processing"
                @click="submitApprove"
            />
            <RowRejectAction
                size="sm"
                tooltip="Tolak"
                :disabled="rejectForm.processing"
                @click="rejectDialogOpen = true"
            />
        </template>
    </div>

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

            <div class="space-y-4">
                <div class="rounded-md border p-3 text-xs space-y-2">
                    <div>
                        <span class="text-muted-foreground">Modul:</span>
                        <span class="ml-1 font-medium">{{ item.subject_label }}</span>
                    </div>
                    <div>
                        <span class="text-muted-foreground">Item:</span>
                        <span class="ml-1 font-medium">{{ item.title }}</span>
                    </div>
                    <div>
                        <span class="text-muted-foreground">Aksi:</span>
                        <span class="ml-1 font-medium">{{ item.action_label }}</span>
                    </div>
                </div>

                <Field>
                    <FieldLabel for="reject-reason">Alasan Penolakan</FieldLabel>
                    <Textarea
                        id="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>
