<script setup lang="ts">
import LoadingState from '@/components/shared/LoadingState.vue';
import { getAntrianOperasiById } from '@/services/antrean';
import { Icon } from '@iconify/vue';
import { STATUS } from '~/types/antrean';

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

const props = defineProps<Props>();

const emit = defineEmits<{
    'update:modelValue': [value: boolean];
}>();

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

// Form data
const formData = ref({
    noRekamMedis: '',
    noKtp: '',
    namaPasien: '',
    jenisKelamin: '',
    tanggalLahir: '',
    umur: '',
    alamat: '',
    nomorTelepon: [] as string[]
});

const diagnosisItems = ref<any[]>([]);
const tindakanItems = ref<any[]>([]);

const rencanaOperasiData = ref({
    spesialis: null as number | null,
    SpesialisName: '',
    subSpesialis: null as number | null,
    SubSpesialisName: '',
    tanggalDaftar: '',
    kategoriOperasi: null as number | null,
    kategoriName: '',
    rencanaOperasi: null,
    keterangan: null
});

const dokterPelaksanaItems = ref<any[]>([]);

const statusPasienData = ref({
    tanggalSelesai: null,
    statusOperasi: '',
    keteranganStatus: null
});

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

// Helper functions
const formatDate = (dateString: string) => {
    if (!dateString) return '-';
    return new Date(dateString).toLocaleDateString('id-ID', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
    });
};

const formatDateTime = (dateString: string) => {
    if (!dateString) return '-';
    return new Date(dateString).toLocaleDateString('id-ID', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
    });
};

const getGenderIcon = (gender: string) => {
    return gender === 'L' ? 'mdi-gender-male' : 'mdi-gender-female';
};

const getGenderColor = (gender: string) => {
    return gender === 'L' ? 'info' : 'error';
};

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

const getStatusColor = (status: string) => {
    switch (status) {
        case STATUS.BELUM: return 'primary';
        case STATUS.SELESAI: return 'success';
        case STATUS.TUNDA: return 'warning';
        case STATUS.BATAL: return 'error';
        default: return 'grey';
    }
};

const getStatusText = (status: string) => {
    switch (status) {
        case STATUS.BELUM: return 'Belum';
        case STATUS.SELESAI: return 'Selesai';
        case STATUS.TUNDA: return 'Tunda';
        case STATUS.BATAL: return 'Batal';
        default: return 'Unknown';
    }
};

const getStatusIcon = (status: string) => {
    switch (status) {
        case STATUS.BELUM: return 'mdi-clock-outline';
        case STATUS.SELESAI: return 'mdi-check-circle';
        case STATUS.TUNDA: return 'mdi-pause-circle';
        case STATUS.BATAL: return 'mdi-close-circle';
        default: return 'mdi-help-circle';
    }
};

const initializeForm = () => {
    // Reset all data
    formData.value = {
        noRekamMedis: '',
        noKtp: '',
        namaPasien: '',
        jenisKelamin: '',
        tanggalLahir: '',
        umur: '',
        alamat: '',
        nomorTelepon: []
    };
    
    diagnosisItems.value = [];
    tindakanItems.value = [];
    
    rencanaOperasiData.value = {
        spesialis: null,
        SpesialisName: '',
        subSpesialis: null,
        SubSpesialisName: '',
        tanggalDaftar: '',
        kategoriOperasi: null,
        kategoriName: '',
        rencanaOperasi: null,
        keterangan: null
    };
    
    dokterPelaksanaItems.value = [];
    
    statusPasienData.value = {
        tanggalSelesai: null,
        statusOperasi: '',
        keteranganStatus: null
    };
};

// Fetch detail data
const fetchDetailData = async () => {
    if (!props.id) return;
    
    loading.value = true;
    error.value = false;
    
    try {
        const response = await getAntrianOperasiById(props.id);
        
        if (response.success && response.data) {
            const data = response.data;
            
            // Set form data
            if (data.formData) {
                formData.value = { ...data.formData };
            }
            
            // Set diagnosis items
            if (data.diagnosisItems) {
                diagnosisItems.value = data.diagnosisItems;
            }
            
            // Set tindakan items
            if (data.tindakanItems) {
                tindakanItems.value = data.tindakanItems;
            }
            
            // Set rencana operasi data
            if (data.rencanaOperasiData) {
                rencanaOperasiData.value = { ...data.rencanaOperasiData };
            }
            
            // Set dokter pelaksana items
            if (data.dokterPelaksanaItems) {
                dokterPelaksanaItems.value = data.dokterPelaksanaItems;
            }
            
            // Set status pasien data
            if (data.statusPasienData) {
                statusPasienData.value = { ...data.statusPasienData };
            }
        }
    } catch (err) {
        console.error('Error fetching detail data:', err);
        error.value = true;
    } finally {
        loading.value = false;
    }
};

// Initialize when modal opens
watch(() => props.modelValue, (isOpen) => {
    if (isOpen && props.id) {
        //reset form dulu diawal
        initializeForm();
        fetchDetailData();
    }
}, { immediate: true });

const closeModal = () => {
    showModal.value = false;
};
</script>

<template>
    <v-dialog v-model="showModal" max-width="900px" persistent scrollable>
        <v-card>
            <v-card-title class="d-flex align-center justify-space-between pa-4 bg-primary text-white">
                <div class="d-flex align-center">
                    <Icon icon="solar:clipboard-text-bold-duotone" height="28" class="mr-3" />
                    <span class="text-h6">Detail Pendaftaran Antrean Operasi</span>
                </div>
                <v-btn
                    icon
                    variant="text"
                    color="white"
                    @click="closeModal"
                >
                    <v-icon>mdi-close</v-icon>
                </v-btn>
            </v-card-title>
            
            <v-card-text class="pa-4" style="max-height: 75vh; overflow-y: auto;">
                <LoadingState 
                    :loading="loading" 
                    :error="error"
                    loading-text="Memuat detail pendaftaran..."
                    error-text="Gagal memuat data detail"
                    @retry="fetchDetailData"
                >
                    <!-- Status Badge -->
                    <v-row class="mb-2">
                        <v-col cols="12">
                            <v-chip
                                :color="getStatusColor(statusPasienData.statusOperasi)"
                                variant="flat"
                                size="large"
                                class="px-6"
                            >
                                <Icon :icon="getStatusIcon(statusPasienData.statusOperasi)" height="20" class="mr-2" />
                                Status: {{ getStatusText(statusPasienData.statusOperasi) }}
                            </v-chip>
                        </v-col>
                    </v-row>

                    <!-- Informasi Pasien -->
                    <v-card elevation="2" class="mb-4">
                        <v-card-title class="bg-blue-lighten-5 pa-3">
                            <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-4">
                            <v-row>
                                <v-col cols="12" md="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 text-primary">
                                            {{ formData.noRekamMedis || '-' }}
                                        </div>
                                    </div>
                                </v-col>
                                <v-col cols="12" md="6">
                                    <div class="info-item">
                                        <div class="info-label">
                                            <Icon icon="mdi-credit-card" height="20" class="mr-2" />
                                            No KTP
                                        </div>
                                        <div class="info-value">
                                            {{ formData.noKtp || '-' }}
                                        </div>
                                    </div>
                                </v-col>
                                <v-col cols="12" md="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">
                                            {{ formData.namaPasien || '-' }}
                                        </div>
                                    </div>
                                </v-col>
                                <v-col cols="12" md="6">
                                    <div class="info-item">
                                        <div class="info-label">
                                            <Icon :icon="getGenderIcon(formData.jenisKelamin)" height="20" class="mr-2" />
                                            Jenis Kelamin
                                        </div>
                                        <div class="info-value">
                                            <v-chip 
                                                :color="getGenderColor(formData.jenisKelamin)" 
                                                size="small"
                                                variant="flat"
                                            >
                                                <Icon :icon="getGenderIcon(formData.jenisKelamin)" height="16" class="mr-1" />
                                                {{ getGenderText(formData.jenisKelamin) }}
                                            </v-chip>
                                        </div>
                                    </div>
                                </v-col>
                                <v-col cols="12" md="6">
                                    <div class="info-item">
                                        <div class="info-label">
                                            <Icon icon="solar:calendar-bold" height="20" class="mr-2" />
                                            Tanggal Lahir
                                        </div>
                                        <div class="info-value">
                                            {{ formatDate(formData.tanggalLahir) }}
                                        </div>
                                    </div>
                                </v-col>
                                <v-col cols="12" md="6">
                                    <div class="info-item">
                                        <div class="info-label">
                                            <Icon icon="mdi-cake-variant" height="20" class="mr-2" />
                                            Umur
                                        </div>
                                        <div class="info-value">
                                            {{ formData.umur || '-' }}
                                        </div>
                                    </div>
                                </v-col>
                                <v-col cols="6">
                                    <div class="info-item">
                                        <div class="info-label">
                                            <Icon icon="solar:map-point-bold" height="20" class="mr-2" />
                                            Alamat
                                        </div>
                                        <div class="info-value">
                                            {{ formData.alamat || '-' }}
                                        </div>
                                    </div>
                                </v-col>
                                <v-col cols="6">
                                    <div class="info-item">
                                        <div class="info-label">
                                            <Icon icon="solar:phone-bold" height="20" class="mr-2" />
                                            Nomor Telepon
                                        </div>
                                        <div class="info-value">
                                            <v-chip
                                                v-for="(phone, index) in formData.nomorTelepon"
                                                :key="index"
                                                color="success"
                                                variant="tonal"
                                                size="small"
                                                class="mr-2 mb-2"
                                            >
                                                <Icon icon="mdi-phone" height="16" class="mr-1" />
                                                {{ phone }}
                                            </v-chip>
                                            <span v-if="!formData.nomorTelepon || formData.nomorTelepon.length === 0">-</span>
                                        </div>
                                    </div>
                                </v-col>
                            </v-row>
                        </v-card-text>
                    </v-card>

                    <!-- Diagnosis -->
                    <v-card elevation="2" class="mb-4">
                        <v-card-title class="bg-green-lighten-5 pa-3">
                            <div class="d-flex align-center">
                                <Icon icon="solar:health-bold-duotone" height="24" class="mr-2 text-success" />
                                <span class="text-h6">Diagnosis</span>
                            </div>
                        </v-card-title>
                        <v-card-text class="pa-4">
                            <v-list v-if="diagnosisItems.length > 0" class="pa-0">
                                <v-list-item
                                    v-for="(item, index) in diagnosisItems"
                                    :key="index"
                                    class="px-0 mb-3"
                                >
                                    <v-card variant="tonal" color="success">
                                        <v-card-text class="pa-3">
                                            <div class="d-flex align-start">
                                                <v-avatar color="success" size="32" class="mr-3">
                                                    {{ index + 1 }}
                                                </v-avatar>
                                                <div class="flex-1-1">
                                                    <div class="text-caption text-medium-emphasis mb-1">
                                                        {{ item.jenisDiagnosa }}
                                                    </div>
                                                    <div class="font-weight-medium mb-1">
                                                        {{ item.diagnosa }}
                                                    </div>
                                                    <v-chip size="x-small" color="success" variant="outlined">
                                                        {{ item.kodeDiagnosa }}
                                                    </v-chip>
                                                </div>
                                            </div>
                                        </v-card-text>
                                    </v-card>
                                </v-list-item>
                            </v-list>
                            <v-alert v-else type="info" variant="tonal" density="compact">
                                Tidak ada data diagnosis
                            </v-alert>
                        </v-card-text>
                    </v-card>

                    <!-- Tindakan -->
                    <v-card elevation="2" class="mb-4">
                        <v-card-title class="bg-purple-lighten-5 pa-3">
                            <div class="d-flex align-center">
                                <Icon icon="solar:medical-kit-bold-duotone" height="24" class="mr-2 text-purple" />
                                <span class="text-h6">Tindakan Operasi</span>
                            </div>
                        </v-card-title>
                        <v-card-text class="pa-4">
                            <v-list v-if="tindakanItems.length > 0" class="pa-0">
                                <v-list-item
                                    v-for="(item, index) in tindakanItems"
                                    :key="index"
                                    class="px-0 mb-3"
                                >
                                    <v-card variant="tonal" color="purple">
                                        <v-card-text class="pa-3">
                                            <div class="d-flex align-start">
                                                <v-avatar color="purple" size="32" class="mr-3">
                                                    {{ index + 1 }}
                                                </v-avatar>
                                                <div class="flex-1-1">
                                                    <div class="font-weight-medium mb-1">
                                                        {{ item.tindakan }}
                                                    </div>
                                                    <div class="text-body-2 text-medium-emphasis mb-2">
                                                        {{ item.tindakanTambahan || '-' }}
                                                    </div>
                                                    <v-chip size="x-small" color="purple" variant="outlined">
                                                        {{ item.kodeTindakan || '-' }}
                                                    </v-chip>
                                                </div>
                                            </div>
                                        </v-card-text>
                                    </v-card>
                                </v-list-item>
                            </v-list>
                            <v-alert v-else type="info" variant="tonal" density="compact">
                                Tidak ada data tindakan
                            </v-alert>
                        </v-card-text>
                    </v-card>

                    <!-- Rencana Operasi -->
                    <v-card elevation="2" class="mb-4">
                        <v-card-title class="bg-orange-lighten-5 pa-3">
                            <div class="d-flex align-center">
                                <Icon icon="solar:calendar-mark-bold-duotone" height="24" class="mr-2 text-orange" />
                                <span class="text-h6">Rencana Operasi</span>
                            </div>
                        </v-card-title>
                        <v-card-text class="pa-4">
                            <v-row>
                                <v-col cols="12" md="6">
                                    <div class="info-item">
                                        <div class="info-label">
                                            <Icon icon="solar:stethoscope-bold" height="20" class="mr-2" />
                                            Spesialis
                                        </div>
                                        <div class="info-value font-weight-bold">
                                            {{ rencanaOperasiData.SpesialisName || '-' }}
                                        </div>
                                    </div>
                                </v-col>
                                <v-col cols="12" md="6">
                                    <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 font-weight-bold">
                                            {{ rencanaOperasiData.SubSpesialisName || '-' }}
                                        </div>
                                    </div>
                                </v-col>
                                <v-col cols="12" md="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">
                                            {{ formatDateTime(rencanaOperasiData.tanggalDaftar) }}
                                        </div>
                                    </div>
                                </v-col>
                                <v-col cols="12" md="6">
                                    <div class="info-item">
                                        <div class="info-label">
                                            <Icon icon="solar:clipboard-list-bold" height="20" class="mr-2" />
                                            Kategori Operasi
                                        </div>
                                        <div class="info-value">
                                            <v-chip color="orange" size="small" variant="flat">
                                                {{ rencanaOperasiData.kategoriName || '-' }}
                                            </v-chip>
                                        </div>
                                    </div>
                                </v-col>
                                <v-col v-if="rencanaOperasiData.keterangan" cols="12">
                                    <div class="info-item">
                                        <div class="info-label">
                                            <Icon icon="solar:notes-bold" height="20" class="mr-2" />
                                            Keterangan
                                        </div>
                                        <div class="info-value">
                                            {{ rencanaOperasiData.keterangan }}
                                        </div>
                                    </div>
                                </v-col>
                            </v-row>
                        </v-card-text>
                    </v-card>

                    <!-- Dokter Pelaksana -->
                    <v-card elevation="2" class="mb-4">
                        <v-card-title class="bg-indigo-lighten-5 pa-3">
                            <div class="d-flex align-center">
                                <Icon icon="solar:user-id-bold-duotone" height="24" class="mr-2 text-indigo" />
                                <span class="text-h6">Tim Dokter Pelaksana</span>
                            </div>
                        </v-card-title>
                        <v-card-text class="pa-2">
                            <v-list v-if="dokterPelaksanaItems.length > 0" class="pa-0">
                                <v-list-item
                                    v-for="(dokter, index) in dokterPelaksanaItems"
                                    :key="index"
                                    class="pa-2 mb-2 rounded-lg border"
                                >
                                    <template #prepend>
                                        <v-avatar color="indigo" size="48" >
                                            <Icon icon="solar:user-bold" height="24" />
                                        </v-avatar>
                                    </template>
                                    <v-list-item-title class="font-weight-bold">
                                        {{ dokter.nama }}
                                    </v-list-item-title>
                                    <v-list-item-subtitle>
                                        <div class="mt-1">
                                            <v-chip size="x-small" color="indigo" variant="outlined" class="mr-2">
                                                NIP: {{ dokter.nip }}
                                            </v-chip>
                                            <v-chip size="x-small" color="indigo" variant="tonal">
                                                {{ dokter.satuan_kerja }}
                                            </v-chip>
                                        </div>
                                    </v-list-item-subtitle>
                                </v-list-item>
                            </v-list>
                            <v-alert v-else type="info" variant="tonal" density="compact">
                                Tidak ada data dokter pelaksana
                            </v-alert>
                        </v-card-text>
                    </v-card>

                    <!-- Status Operasi -->
                    <v-card elevation="2" class="mb-2">
                        <v-card-title class="bg-grey-lighten-3 pa-3">
                            <div class="d-flex align-center">
                                <Icon icon="solar:clipboard-check-bold-duotone" height="24" class="mr-2 text-grey-darken-2" />
                                <span class="text-h6">Status Operasi</span>
                            </div>
                        </v-card-title>
                        <v-card-text class="pa-4">
                            <v-row>
                                <v-col cols="12" md="6">
                                    <div class="info-item">
                                        <div class="info-label">
                                            <Icon icon="mdi-information" height="20" class="mr-2" />
                                            Status
                                        </div>
                                        <div class="info-value">
                                            <v-chip 
                                                :color="getStatusColor(statusPasienData.statusOperasi)" 
                                                variant="flat"
                                                size="small"
                                            >
                                                <Icon :icon="getStatusIcon(statusPasienData.statusOperasi)" height="16" class="mr-1" />
                                                {{ getStatusText(statusPasienData.statusOperasi) }}
                                            </v-chip>
                                        </div>
                                    </div>
                                </v-col>
                                <v-col v-if="statusPasienData.tanggalSelesai" cols="12" md="6">
                                    <div class="info-item">
                                        <div class="info-label">
                                            <Icon icon="solar:calendar-check-bold" height="20" class="mr-2" />
                                            Tanggal Selesai
                                        </div>
                                        <div class="info-value">
                                            {{ formatDateTime(statusPasienData.tanggalSelesai) }}
                                        </div>
                                    </div>
                                </v-col>
                                <v-col v-if="statusPasienData.keteranganStatus" cols="12">
                                    <div class="info-item">
                                        <div class="info-label">
                                            <Icon icon="solar:notes-bold" height="20" class="mr-2" />
                                            Keterangan Status
                                        </div>
                                        <div class="info-value">
                                            {{ statusPasienData.keteranganStatus }}
                                        </div>
                                    </div>
                                </v-col>
                            </v-row>
                        </v-card-text>
                    </v-card>
                </LoadingState>
            </v-card-text>
            
            <!-- <v-card-actions class="pa-4 justify-end bg-grey-lighten-4">
                <v-btn 
                    color="primary" 
                    size="large" 
                    variant="flat"
                    prepend-icon="mdi-close"
                    @click="closeModal"
                >
                    Tutup
                </v-btn>
            </v-card-actions> -->
        </v-card>
    </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>
