<script setup lang="ts">
import { router, useForm } from '@inertiajs/vue3';
import { Check, X } from '@lucide/vue';
import { ref } from 'vue';
import { toast } from 'vue-sonner';
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 {
    Tooltip,
    TooltipContent,
    TooltipTrigger,
} from '@/components/ui/tooltip';
import { useCan } from '@/composables/useCan';
import type { CuttingListItem } from '@/types/cutting';

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

const { can } = useCan();

const approveDialogOpen = ref(false);
const rejectDialogOpen = ref(false);

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

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

function submitApprove() {
    approveForm
        .post(`/admin/manage/owner-verifications/${props.cutting.id}/approve`, {
        preserveScroll: true,
        onSuccess: () => {
            approveDialogOpen.value = false;
            approveForm.reset();
            toast.success('Verifikasi berhasil disetujui.');
        },
        onError: (errors) => {
            const message = Object.values(errors)[0];
            toast.error(message ?? 'Gagal menyetujui verifikasi.');
        },
    });
}

function submitReject() {
    rejectForm
        .post(`/admin/manage/owner-verifications/${props.cutting.id}/reject`, {
        preserveScroll: true,
        onSuccess: () => {
            rejectDialogOpen.value = false;
            rejectForm.reset();
            toast.success('Verifikasi berhasil ditolak.');
        },
        onError: (errors) => {
            const message = Object.values(errors)[0];
            toast.error(message ?? 'Gagal menolak verifikasi.');
        },
    });
}
</script>

<template>
    <div v-if="can('owner-verifications.verify')" class="flex items-center gap-1">
        <Tooltip>
            <TooltipTrigger as-child>
                <Button
                    size="sm"
                    variant="ghost"
                    class="text-green-600 hover:text-green-700"
                    @click="approveDialogOpen = true"
                >
                    <Check class="size-3.5" />
                    <span class="sr-only">Setujui</span>
                </Button>
            </TooltipTrigger>
            <TooltipContent>Setujui Verifikasi</TooltipContent>
        </Tooltip>

        <Tooltip>
            <TooltipTrigger as-child>
                <Button
                    size="sm"
                    variant="ghost"
                    class="text-red-600 hover:text-red-700"
                    @click="rejectDialogOpen = true"
                >
                    <X class="size-3.5" />
                    <span class="sr-only">Tolak</span>
                </Button>
            </TooltipTrigger>
            <TooltipContent>Tolak Verifikasi</TooltipContent>
        </Tooltip>
    </div>

    <!-- Approve Dialog -->
    <Dialog v-model:open="approveDialogOpen">
        <DialogContent class="sm:max-w-lg">
            <DialogHeader>
                <DialogTitle>Setujui 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="approval-note">Catatan (Opsional)</FieldLabel>
                    <Textarea
                        id="approval-note"
                        v-model="approveForm.approval_note"
                        placeholder="Tambahkan catatan persetujuan..."
                        rows="3"
                    />
                    <FieldError
                        :errors="approveForm.errors.approval_note ? [approveForm.errors.approval_note] : []"
                    />
                </Field>
            </div>

            <DialogFooter>
                <Button
                    type="button"
                    variant="outline"
                    @click="approveDialogOpen = false"
                >
                    Batal
                </Button>
                <Button
                    type="button"
                    :disabled="approveForm.processing"
                    @click="submitApprove"
                >
                    <Check class="size-4" />
                    Setujui
                </Button>
            </DialogFooter>
        </DialogContent>
    </Dialog>

    <!-- 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>
