<script setup>
/**
 * DialogDetailEvent — Dialog untuk menampilkan detail jadwal dokter
 * yang diklik di kalender. Mendukung tampilan Rutin dan Adhoc.
 * Menggunakan v-model pattern untuk kontrol buka/tutup dialog dari parent.
 */

const props = defineProps({
    /** Kontrol buka/tutup dialog (v-model) */
    modelValue: { type: Boolean, default: false },
    /** Data event yang sedang ditampilkan */
    event: { type: Object, default: null },
});

const emit = defineEmits(['update:modelValue', 'delete']);

/** Computed v-model proxy untuk dialog visibility */
const dialogOpen = computed({
    get: () => props.modelValue,
    set: (val) => emit('update:modelValue', val),
});

/**
 * Emit event delete ke parent untuk menghapus jadwal.
 */
const handleDelete = () => {
    emit('delete', props.event?.id);
    dialogOpen.value = false;
};
</script>

<template>
    <v-dialog v-model="dialogOpen" max-width="420px">
        <v-card rounded="lg" class="pa-0">
            <v-card-title class="pa-5" :class="event?.tipe === 'Adhoc' ? 'bg-secondary' : 'bg-primary'"
                style="color:white;">
                <div class="d-flex justify-space-between align-center w-100">
                    <div class="d-flex align-center gap-2">
                        <v-icon>{{ event?.tipe === 'Adhoc' ? 'mdi-calendar-clock' : 'mdi-calendar-sync'
                        }}</v-icon>
                        <span class="ml-2 text-h6 font-weight-bold">Jadwal {{ event?.tipe }}</span>
                    </div>
                    <v-btn icon="mdi-close" variant="text" size="small" style="color:white;"
                        @click="dialogOpen = false" />
                </div>
            </v-card-title>

            <v-card-text class="pa-6" v-if="event">
                <v-list density="compact" class="pa-0">
                    <v-list-item class="px-0">
                        <template #prepend>
                            <v-icon color="primary" size="small" class="mr-3">mdi-hospital-building</v-icon>
                        </template>
                        <div class="text-caption text-grey-darken-1">Poli / Klinik</div>
                        <div class="text-body-2 font-weight-bold">{{ event.poli }}</div>
                    </v-list-item>

                    <v-divider class="my-2" />

                    <v-list-item class="px-0">
                        <template #prepend>
                            <v-icon color="primary" size="small" class="mr-3">mdi-doctor</v-icon>
                        </template>
                        <div class="text-caption text-grey-darken-1">Dokter</div>
                        <div class="text-body-2 font-weight-bold">{{ event.dokter }}</div>
                    </v-list-item>

                    <v-divider class="my-2" />

                    <v-list-item class="px-0">
                        <template #prepend>
                            <v-icon color="primary" size="small" class="mr-3">mdi-calendar</v-icon>
                        </template>
                        <div class="text-caption text-grey-darken-1">Tanggal</div>
                        <div class="text-body-2 font-weight-bold">{{ event.tanggal }}</div>
                    </v-list-item>

                    <!-- Rutin: tampilkan hari -->
                    <template v-if="event.tipe === 'Rutin' && event.hari">
                        <v-divider class="my-2" />
                        <v-list-item class="px-0">
                            <template #prepend>
                                <v-icon color="primary" size="small" class="mr-3">mdi-calendar-week</v-icon>
                            </template>
                            <div class="text-caption text-grey-darken-1">Hari Praktek</div>
                            <div class="text-body-2 font-weight-bold">{{ event.hari }}</div>
                        </v-list-item>
                    </template>

                    <!-- Adhoc: tampilkan shift -->
                    <template v-if="event.tipe === 'Adhoc' && event.shift">
                        <v-divider class="my-2" />
                        <v-list-item class="px-0">
                            <template #prepend>
                                <v-icon color="secondary" size="small" class="mr-3">mdi-clock-outline</v-icon>
                            </template>
                            <div class="text-caption text-grey-darken-1">Waktu</div>
                            <div class="text-body-2 font-weight-bold">{{ event.shift }}</div>
                        </v-list-item>
                    </template>
                </v-list>
            </v-card-text>

            <v-divider />

            <v-card-actions class="pa-5 justify-space-between">
                <v-btn color="error" variant="text" prepend-icon="mdi-trash-can-outline" @click="handleDelete">
                    Hapus
                </v-btn>
                <v-btn color="primary" variant="flat" @click="dialogOpen = false">Tutup</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>
