<script setup lang="ts">
import type { Header, Action } from '~/types/common';
import { STATUS } from '~/types/antrean';

interface Props {
    headers: Header[];
    items: any[];
    search?: string;
    itemsPerPage?: number;
    minWidth?: string;
    actions?: Action[];
    serverSide?: boolean;
    totalItems?: number;
    currentPage?: number;
}

const props = withDefaults(defineProps<Props>(), {
    search: '',
    itemsPerPage: 10,
    minWidth: '1200px',
    actions: () => [],
    serverSide: false,
    totalItems: 0,
    currentPage: 1
});

const emit = defineEmits<{
    (e: string, item: any): void;
    (e: 'update:page', page: number): void;
    (e: 'update:itemsPerPage', itemsPerPage: number): void;
}>();

// Status helper
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 getStatusColor = (status: string) => {
    switch (status) {
        case STATUS.BELUM: return 'info';
        case STATUS.SELESAI: return 'success';
        case STATUS.TUNDA: return 'warning';
        case STATUS.BATAL: return 'error';
        default: return 'default';
    }
};

const handleAction = (event: string, item: any) => {
    emit(event, item);
};

const page = ref(props.currentPage);
const itemsPerPageLocal = ref(props.itemsPerPage);

watch(() => props.currentPage, (newVal) => {
    page.value = newVal;
});

watch(page, (newVal) => {
    emit('update:page', newVal);
});

watch(itemsPerPageLocal, (newVal) => {
    emit('update:itemsPerPage', newVal);
});
</script>

<template>
    <div class="table-wrapper">
        <v-data-table-server
            :headers="headers"
            :items="items"
            :items-length="serverSide ? totalItems : 0"
            v-model:page="page"
            v-model:items-per-page="itemsPerPageLocal"
            :search="serverSide ? undefined : search"
            class="elevation-1"
            item-value="id"
        >
            <!-- Pass through all slots to parent -->
            <template v-for="(_, name) in $slots" v-slot:[name]="slotData">
                <slot :name="name" v-bind="slotData" />
            </template>
            
            <!-- Default slot for Jenis Kelamin if not provided -->
            <template #item.JenisKelamin="{ item }">
                <slot name="item.JenisKelamin" :item="item">
                    <v-chip
                        :color="item.JenisKelamin === 'L' ? 'primary' : 'error'"
                        size="small"
                    >
                        {{ item.JenisKelamin }}
                    </v-chip>
                </slot>
            </template>

            <!-- Default slot for Status if not provided -->
            <template #item.StatusOperasi="{ item }">
                <slot name="item.StatusOperasi" :item="item">
                    <v-chip
                        :color="getStatusColor(item.StatusOperasi)"
                        size="small"
                    >
                        {{ getStatusText(item.StatusOperasi) }}
                    </v-chip>
                </slot>
            </template>

            <!-- Action slot if enabled -->
            <template v-if="actions && actions.length > 0" #item.actions="{ item }">
                <slot name="item.actions" :item="item">
                    <div class="d-flex ga-2">
                        <v-btn
                            v-for="(action, index) in actions"
                            :key="index"
                            icon
                            size="small"
                            variant="text"
                            :color="action.color || 'primary'"
                            @click="handleAction(action.event, item)"
                        >
                            <v-icon>{{ action.icon }}</v-icon>
                            <v-tooltip v-if="action.tooltip" activator="parent" location="top">
                                {{ action.tooltip }}
                            </v-tooltip>
                        </v-btn>
                    </div>
                </slot>
            </template>
        </v-data-table-server>
    </div>
</template>

<style scoped>
.table-wrapper {
    overflow-x: auto;
    width: 100%;
}

.table-wrapper :deep(.v-data-table) {
    min-width: v-bind(minWidth);
}
</style>
