<script setup lang="ts">
import { computed } from 'vue';
import { Badge } from '@/components/ui/badge';
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import type { OwnerVerificationItem } from '@/types/owner-verification';

const open = defineModel<boolean>('open', { default: false });

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

const hasChanges = computed(() => (props.item?.changes.length ?? 0) > 0);

function formatValue(value: unknown): string {
    if (value === null || value === undefined || value === '') {
        return '-';
    }

    if (typeof value === 'boolean') {
        return value ? 'Aktif' : 'Nonaktif';
    }

    if (typeof value === 'object') {
        return JSON.stringify(value);
    }

    return String(value);
}
</script>

<template>
    <Dialog v-model:open="open">
        <DialogContent class="max-h-[85vh] overflow-y-auto sm:max-w-lg">
            <DialogHeader>
                <DialogTitle>Detail Verifikasi</DialogTitle>
            </DialogHeader>

            <div v-if="item" class="space-y-4 text-sm">
                <div class="grid gap-3 sm:grid-cols-2">
                    <div>
                        <p class="text-muted-foreground">Waktu</p>
                        <p class="font-medium">{{ item.created_at_formatted ?? '-' }}</p>
                    </div>
                    <div>
                        <p class="text-muted-foreground">Diajukan Oleh</p>
                        <p class="font-medium">{{ item.submitted_by_name }}</p>
                    </div>
                    <div>
                        <p class="text-muted-foreground">Aksi</p>
                        <p class="font-medium">{{ item.action_label }}</p>
                    </div>
                    <div>
                        <p class="text-muted-foreground">Modul</p>
                        <p class="font-medium">{{ item.subject_label }}</p>
                    </div>
                    <div>
                        <p class="text-muted-foreground">Item</p>
                        <p class="font-medium">{{ item.title }}</p>
                    </div>
                    <div>
                        <p class="text-muted-foreground">Status</p>
                        <Badge
                            :variant="item.status === 'approved' ? 'default' : item.status === 'rejected' ? 'destructive' : 'outline'"
                        >
                            {{ item.status_label }}
                        </Badge>
                    </div>
                    <div v-if="item.verified_by_name">
                        <p class="text-muted-foreground">Diverifikasi Oleh</p>
                        <p class="font-medium">{{ item.verified_by_name }}</p>
                    </div>
                    <div v-if="item.verified_at_formatted">
                        <p class="text-muted-foreground">Waktu Verifikasi</p>
                        <p class="font-medium">{{ item.verified_at_formatted }}</p>
                    </div>
                </div>

                <div v-if="item.summary" class="rounded-md border p-3">
                    <p class="text-muted-foreground">Ringkasan</p>
                    <p class="font-medium">{{ item.summary }}</p>
                </div>

                <div v-if="item.rejection_reason" class="rounded-md border border-destructive/30 bg-destructive/5 p-3">
                    <p class="text-muted-foreground">Alasan Penolakan</p>
                    <p class="font-medium">{{ item.rejection_reason }}</p>
                </div>

                <div v-if="hasChanges" class="space-y-2">
                    <p class="font-medium">Perubahan Data</p>
                    <div class="overflow-hidden rounded-md border">
                        <table class="w-full text-sm">
                            <thead class="bg-muted/50">
                                <tr>
                                    <th class="px-3 py-2 text-left font-medium">Field</th>
                                    <th class="px-3 py-2 text-left font-medium">Sebelum</th>
                                    <th class="px-3 py-2 text-left font-medium">Sesudah</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="change in item.changes" :key="change.field" class="border-t">
                                    <td class="px-3 py-2 align-top font-medium">{{ change.field }}</td>
                                    <td class="px-3 py-2 align-top text-muted-foreground">
                                        {{ formatValue(change.old) }}
                                    </td>
                                    <td class="px-3 py-2 align-top">{{ formatValue(change.new) }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </DialogContent>
    </Dialog>
</template>
