<script setup lang="ts">
import { useForm } from '@inertiajs/vue3';
import { X } from '@lucide/vue';
import { 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 } from '@/routes/admin/manage/owner_verifications';
import type { CuttingListItem } from '@/types/cutting';

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

const { can } = useCan();

const rejectDialogOpen = ref(false);

const approveForm = useForm({});

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

function submitApprove() {
    approveForm
        .post(approve.url(props.cutting.id), {
            preserveScroll: true,
            onError: (errors: any) => {
                if (errors.system) {
                    toast.error(errors.system);
                }
            },
        });
}

function submitReject() {
    rejectForm
        .post(reject.url(props.cutting.id), {
            preserveScroll: true,
            onSuccess: () => {
                rejectDialogOpen.value = false;
                rejectForm.reset();
            },
            onError: (errors: any) => {
                if (errors.system) {
                    toast.error(errors.system);
                }
            },
        });
}
</script>

<template>
    <div v-if="can('owner_verifications.verify')" class="flex items-center gap-1">
        <RowApproveAction size="sm" tooltip="Setujui Verifikasi" :disabled="approveForm.processing"
            @click="submitApprove" />
        <RowRejectAction size="sm" tooltip="Tolak Verifikasi" @click="rejectDialogOpen = true" />
    </div>

    <!-- Reject Dialog -->
    <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">Cutting:</span>
                        <span class="ml-1 font-medium">#{{ cutting.id }}</span>
                    </div>
                    <div>
                        <span class="text-muted-foreground">Deskripsi:</span>
                        <span class="ml-1 font-medium">{{ cutting.description ?? '-' }}</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>
