<script setup lang="ts">
import { Icon } from '@iconify/vue';
import type { AntreanOperasi } from '~/types/antrean';
import { STATUS } from '~/types/antrean';
import { getAntrianOperasiById, updateStatusAntrianOperasi } from '@/services/antrean';

interface Props {
    modelValue: boolean;
    id: string | number;
}

const props = defineProps<Props>();
const emit = defineEmits<{
    (e: 'update:modelValue', value: boolean): void;
    (e: 'success'): void;
}>();

const dialog = computed({
    get: () => props.modelValue,
    set: (value) => emit('update:modelValue', value)
});

const loading = ref(false);
const loadingSubmit = ref(false);
const error = ref(false);

// Data pasien - struktur lengkap dari API
const pasienData = ref<any>(null);

// Form data
const formData = ref<{
    statusOperasi: string;
    tanggalSelesai: string;
    keteranganStatus: string;
}>({
    statusOperasi: STATUS.BELUM,
    tanggalSelesai: '',
    keteranganStatus: ''
});

// Snackbar
const snackbar = ref(false);
const snackbarMessage = ref('');
const snackbarColor = ref('success');

const showSnackbar = (message: string, color: string = 'success') => {
    snackbarMessage.value = message;
    snackbarColor.value = color;
    snackbar.value = true;
};

// Fetch data pasien
const fetchData = async () => {
    if (!props.id) return;
    
    loading.value = true;
    error.value = false;
    
    try {
        const response = await getAntrianOperasiById(props.id);
        
        if (response.success && response.data) {
            pasienData.value = response.data;
            
            // Set initial form data dari status yang ada
            if (pasienData.value.statusPasienData) {
                formData.value.statusOperasi = pasienData.value.statusPasienData.statusOperasi || STATUS.BELUM;
                formData.value.tanggalSelesai = pasienData.value.statusPasienData.tanggalSelesai || '';
                formData.value.keteranganStatus = pasienData.value.statusPasienData.keteranganStatus || '';
            } else {
                formData.value.statusOperasi = STATUS.BELUM;
                formData.value.tanggalSelesai = '';
                formData.value.keteranganStatus = '';
            }
        }
    } catch (err) {
        console.error('Error fetching data:', err);
        error.value = true;
        showSnackbar('Gagal mengambil data pasien', 'error');
    } finally {
        loading.value = false;
    }
};

// Validation
const isFormValid = computed(() => {
    if (formData.value.statusOperasi === STATUS.SELESAI && !formData.value.tanggalSelesai) {
        return false;
    }
    if ((formData.value.statusOperasi === STATUS.TUNDA || formData.value.statusOperasi === STATUS.BATAL) 
        && !formData.value.keteranganStatus.trim()) {
        return false;
    }
    return true;
});

// Submit handler
const handleSubmit = async () => {
    if (!isFormValid.value) {
        showSnackbar('Mohon lengkapi data yang diperlukan', 'error');
        return;
    }
    
    loadingSubmit.value = true;
    try {
        const response = await updateStatusAntrianOperasi(props.id, {
            statusOperasi: formData.value.statusOperasi,
            tanggalSelesai: formData.value.tanggalSelesai ? new Date(formData.value.tanggalSelesai).toISOString() : null,
            keteranganStatus: formData.value.keteranganStatus || null
        });
        
        if (response.success) {
            showSnackbar('Status antrian berhasil diupdate', 'success');
            emit('success');
            dialog.value = false;
        } else {
            showSnackbar( 'Gagal mengupdate status antrian', 'error');
        }
    } catch (error: any) {
        console.error('Error updating status:', error);
        showSnackbar('Gagal mengupdate status antrian', 'error');
    } finally {
        loadingSubmit.value = false;
    }
};

// Format date
const formatDate = (date: string) => {
    if (!date) return '-';
    return new Date(date).toLocaleDateString('id-ID', { 
        year: 'numeric', 
        month: 'short', 
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
    });
};

// Helper functions
const getGenderText = (gender: string) => {
    return gender === 'L' ? 'Laki-laki' : 'Perempuan';
};

// Min date for tanggal selesai (same as tanggal daftar)
const minTanggalSelesai = computed(() => {
    if (!pasienData.value?.rencanaOperasiData?.tanggalDaftar) return '';
    return new Date(pasienData.value.rencanaOperasiData.tanggalDaftar).toISOString().slice(0, 16);
});

// Initialize form
const initializeForm = () => {
    formData.value = {
        statusOperasi: STATUS.BELUM,
        tanggalSelesai: '',
        keteranganStatus: ''
    };
};

// Watch dialog - trigger saat modal dibuka
watch(() => props.modelValue, (isOpen) => {
    if (isOpen && props.id) {
        initializeForm();
        fetchData();
    }
}, { immediate: true });
</script>

<template>
    <v-dialog v-model="dialog" max-width="900px" persistent scrollable>
        <v-card>
            <v-card-title class="d-flex align-center justify-space-between pa-4">
                <div class="d-flex align-center">
                    <Icon icon="solar:clipboard-check-bold-duotone" height="28" class="text-primary mr-3" />
                    <span class="text-h6">Update Status Antrian Operasi</span>
                </div>
                <v-btn
                    icon
                    variant="text"
                    @click="dialog = false"
                    :disabled="loadingSubmit"
                >
                    <v-icon>mdi-close</v-icon>
                </v-btn>
            </v-card-title>
            
            <v-card-text class="pa-5 bg-background" style="max-height: 75vh; overflow-y: auto;">
                <!-- Loading State -->
                <div v-if="loading" class="text-center py-8">
                    <v-progress-circular
                        indeterminate
                        color="primary"
                        size="50"
                    ></v-progress-circular>
                    <p class="mt-4 text-medium-emphasis">Memuat data...</p>
                </div>

                <!-- Error State -->
                <div v-else-if="error" class="text-center py-8">
                    <v-icon size="64" color="error" class="mb-4">mdi-alert-circle</v-icon>
                    <p class="text-h6 mb-2">Gagal memuat data</p>
                    <v-btn color="primary" @click="fetchData" variant="outlined">
                        <Icon icon="mdi-refresh" height="20" class="mr-2" />
                        Coba Lagi
                    </v-btn>
                </div>

                <!-- Content -->
                <div v-else-if="pasienData">
                    <!-- Informasi Pasien -->
                    <v-card elevation="2" class="mb-4">
                        <v-card-title class="bg-blue-lighten-5 pa-4">
                            <div class="d-flex align-center">
                                <Icon icon="solar:user-bold-duotone" height="24" class="mr-2 text-primary" />
                                <span class="text-h6">Informasi Pasien</span>
                            </div>
                        </v-card-title>
                        <v-card-text class="pa-5">
                            <v-row>
                                <v-col cols="12" sm="6">
                                    <div class="info-item">
                                        <div class="info-label">
                                            <Icon icon="mdi-card-account-details" height="20" class="mr-2" />
                                            No. Rekam Medis
                                        </div>
                                        <div class="info-value font-weight-bold">
                                            {{ pasienData.formData?.noRekamMedis || '-' }}
                                        </div>
                                    </div>
                                </v-col>
                                <v-col cols="12" sm="6">
                                    <div class="info-item">
                                        <div class="info-label">
                                            <Icon icon="solar:user-heart-bold" height="20" class="mr-2" />
                                            Nama Pasien
                                        </div>
                                        <div class="info-value font-weight-bold">
                                            {{ pasienData.formData?.namaPasien || '-' }}
                                        </div>
                                    </div>
                                </v-col>
                                <v-col cols="12" sm="6">
                                    <div class="info-item">
                                        <div class="info-label">
                                            <Icon icon="mdi-gender-male-female" height="20" class="mr-2" />
                                            Jenis Kelamin
                                        </div>
                                        <div class="info-value">
                                            {{ getGenderText(pasienData.formData?.jenisKelamin) }}
                                        </div>
                                    </div>
                                </v-col>
                                <v-col cols="12" sm="6">
                                    <div class="info-item">
                                        <div class="info-label">
                                            <Icon icon="solar:calendar-date-bold" height="20" class="mr-2" />
                                            Tanggal Daftar
                                        </div>
                                        <div class="info-value">
                                            {{ formatDate(pasienData.rencanaOperasiData?.tanggalDaftar) }}
                                        </div>
                                    </div>
                                </v-col>
                                <v-col cols="12" sm="4">
                                    <div class="info-item">
                                        <div class="info-label">
                                            <Icon icon="solar:clipboard-list-bold" height="20" class="mr-2" />
                                            Kategori
                                        </div>
                                        <div class="info-value">
                                            <v-chip size="small" color="primary" variant="flat">
                                                {{ pasienData.rencanaOperasiData?.kategoriName || '-' }}
                                            </v-chip>
                                        </div>
                                    </div>
                                </v-col>
                                <v-col cols="12" sm="4">
                                    <div class="info-item">
                                        <div class="info-label">
                                            <Icon icon="solar:stethoscope-bold" height="20" class="mr-2" />
                                            Spesialis
                                        </div>
                                        <div class="info-value">
                                            <v-chip size="small" color="secondary" variant="flat">
                                                {{ pasienData.rencanaOperasiData?.SpesialisName || '-' }}
                                            </v-chip>
                                        </div>
                                    </div>
                                </v-col>
                                <v-col cols="12" sm="4">
                                    <div class="info-item">
                                        <div class="info-label">
                                            <Icon icon="solar:health-bold" height="20" class="mr-2" />
                                            Sub Spesialis
                                        </div>
                                        <div class="info-value">
                                            <v-chip size="small" color="info" variant="flat">
                                                {{ pasienData.rencanaOperasiData?.SubSpesialisName || '-' }}
                                            </v-chip>
                                        </div>
                                    </div>
                                </v-col>
                            </v-row>
                        </v-card-text>
                    </v-card>

                    <!-- Form Update Status -->
                    <v-card elevation="2" class="mb-2">
                        <v-card-title class="bg-orange-lighten-5 pa-4">
                            <div class="d-flex align-center">
                                <Icon icon="solar:settings-bold-duotone" height="24" class="mr-2 text-warning" />
                                <span class="text-h6">Update Status Operasi</span>
                            </div>
                        </v-card-title>
                        <v-card-text class="pa-4">
                            <v-row>
                                <!-- Status Operasi -->
                                <v-col cols="12">
                                    <v-label class="mb-2 font-weight-medium">
                                        Status Operasi <span class="text-error">*</span>
                                    </v-label>
                                    <v-row class="mt-2">
                                        <v-col cols="12" sm="12">   
                                            <v-btn-group
                                                v-model="formData.statusOperasi"
                                                mandatory
                                                class="w-100"
                                            >
                                            <v-btn
                                                class="flex-grow-1"
                                                size="large"
                                                :variant="formData.statusOperasi === STATUS.BELUM ? 'flat' : 'outlined'"
                                                :color="formData.statusOperasi === STATUS.BELUM ? 'primary' : 'default'"
                                                @click="formData.statusOperasi = STATUS.BELUM"
                                            >
                                                <Icon v-if="formData.statusOperasi === STATUS.BELUM" icon="mdi-progress-clock" height="20" class="mr-2" />
                                                Belum
                                            </v-btn>
                                             <v-btn
                                                class="flex-grow-1"
                                                size="large"
                                                :variant="formData.statusOperasi === STATUS.SELESAI ? 'flat' : 'outlined'"
                                                :color="formData.statusOperasi === STATUS.SELESAI ? 'success' : 'default'"
                                                @click="formData.statusOperasi = STATUS.SELESAI"
                                            >
                                                <Icon v-if="formData.statusOperasi === STATUS.SELESAI" icon="mdi-check-circle" height="20" class="mr-2" />
                                                Selesai
                                            </v-btn>
                                             <v-btn
                                                class="flex-grow-1"
                                                size="large"
                                                :variant="formData.statusOperasi === STATUS.TUNDA ? 'flat' : 'outlined'"
                                                :color="formData.statusOperasi === STATUS.TUNDA ? 'warning' : 'default'"
                                                @click="formData.statusOperasi = STATUS.TUNDA"
                                            >
                                                <Icon v-if="formData.statusOperasi === STATUS.TUNDA" icon="mdi-timer-sand" height="20" class="mr-2" />
                                                Tunda
                                            </v-btn>
                                            <v-btn
                                                class="flex-grow-1"
                                                size="large"
                                                :variant="formData.statusOperasi === STATUS.BATAL ? 'flat' : 'outlined'"
                                                :color="formData.statusOperasi === STATUS.BATAL ? 'error' : 'default'"
                                                @click="formData.statusOperasi = STATUS.BATAL"
                                            >
                                                <Icon v-if="formData.statusOperasi === STATUS.BATAL" icon="mdi-close-circle" height="20" class="mr-2" />
                                                Batal
                                            </v-btn>
                                            </v-btn-group>
                                        </v-col>
                                    </v-row>
                                </v-col>

                                <!-- Tanggal Selesai (shown only when status is Selesai) -->
                                <v-col v-if="formData.statusOperasi === STATUS.SELESAI" cols="12">
                                    <v-label class="mb-2 font-weight-medium">
                                        Tanggal Selesai Operasi <span class="text-error">*</span>
                                    </v-label>
                                    <v-text-field
                                        v-model="formData.tanggalSelesai"
                                        type="datetime-local"
                                        variant="outlined"
                                        density="comfortable"
                                        hide-details="auto"
                                        :min="minTanggalSelesai"
                                        :error-messages="!formData.tanggalSelesai ? ['Tanggal selesai wajib diisi'] : []"
                                    ></v-text-field>
                                </v-col>

                                <!-- Keterangan (shown only when status is Tunda or Batal) -->
                                <v-col v-if="formData.statusOperasi === STATUS.TUNDA || formData.statusOperasi === STATUS.BATAL" cols="12">
                                    <v-label class="mb-2 font-weight-medium">
                                        Keterangan <span class="text-error">*</span>
                                    </v-label>
                                    <v-textarea
                                        v-model="formData.keteranganStatus"
                                        variant="outlined"
                                        rows="3"
                                        hide-details="auto"
                                        :placeholder="`Masukkan alasan ${formData.statusOperasi === STATUS.TUNDA ? 'penundaan' : 'pembatalan'} operasi`"
                                        :error-messages="!formData.keteranganStatus.trim() ? ['Keterangan wajib diisi'] : []"
                                    ></v-textarea>
                                </v-col>
                            </v-row>
                        </v-card-text>
                    </v-card>
                </div>
            </v-card-text>

            
            <v-card-actions class="pa-4 justify-end">
                <v-btn
                    color="primary"
                    size="large"
                    variant="flat"
                    prepend-icon="mdi-content-save"
                    :loading="loadingSubmit"
                    :disabled="loading || !isFormValid"
                    @click="handleSubmit"
                >
                    Simpan
                </v-btn>
            </v-card-actions>
        </v-card>

        <!-- Snackbar -->
        <v-snackbar
            v-model="snackbar"
            :color="snackbarColor"
            :timeout="3000"
            location="top"
        >
            {{ snackbarMessage }}
            <template #actions>
                <v-btn
                    variant="text"
                    @click="snackbar = false"
                >
                    Close
                </v-btn>
            </template>
        </v-snackbar>
    </v-dialog>
</template>

<style scoped>
.info-item {
    margin-bottom: 1rem;
}

.info-label {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: rgb(var(--v-theme-on-surface));
    opacity: 0.7;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.info-value {
    font-size: 1rem;
    color: rgb(var(--v-theme-on-surface));
    padding-left: 28px;
}
</style>
