<script setup lang="ts">
import { Icon } from '@iconify/vue';

interface Props {
    loading?: boolean;
    empty?: boolean;
    error?: boolean;
    loadingText?: string;
    emptyText?: string;
    emptyIcon?: string;
    errorText?: string;
    errorIcon?: string;
    size?: 'small' | 'default' | 'large';
    minHeight?: string;
}

const props = withDefaults(defineProps<Props>(), {
    loading: false,
    empty: false,
    error: false,
    loadingText: 'Memuat data...',
    emptyText: 'Tidak ada data',
    emptyIcon: 'solar:folder-open-outline',
    errorText: 'Terjadi kesalahan saat memuat data',
    errorIcon: 'solar:danger-circle-outline',
    size: 'default',
    minHeight: '200px'
});

const emit = defineEmits<{
    (e: 'retry'): void;
}>();

const spinnerSize = computed(() => {
    switch (props.size) {
        case 'small': return 48;
        case 'large': return 80;
        default: return 64;
    }
});

const iconSize = computed(() => {
    switch (props.size) {
        case 'small': return 48;
        case 'large': return 80;
        default: return 64;
    }
});

const textClass = computed(() => {
    switch (props.size) {
        case 'small': return 'text-body-1';
        case 'large': return 'text-h5';
        default: return 'text-subtitle-1';
    }
});
</script>

<template>
    <!-- Loading State -->
    <div v-if="loading" class="loading-state-container" :style="{ minHeight: minHeight }">
        <div class="state-content">
            <v-progress-circular
                indeterminate
                color="primary"
                :size="spinnerSize"
            ></v-progress-circular>
            <p :class="['mt-4', textClass, 'text-medium-emphasis']">
                {{ loadingText }}
            </p>
        </div>
    </div>

    <!-- Empty State -->
    <div v-else-if="empty" class="loading-state-container" :style="{ minHeight: minHeight }">
        <div class="state-content">
            <Icon :icon="emptyIcon" :height="iconSize" class="text-medium-emphasis" />
            <p :class="['mt-4', textClass, 'text-medium-emphasis']">
                {{ emptyText }}
            </p>
            <slot name="empty-action"></slot>
        </div>
    </div>

    <!-- Error State -->
    <div v-else-if="error" class="loading-state-container" :style="{ minHeight: minHeight }">
        <div class="state-content">
            <Icon :icon="errorIcon" :height="iconSize" class="text-error" />
            <p :class="['mt-4', textClass, 'text-error']">
                {{ errorText }}
            </p>
            <v-btn
                color="primary"
                variant="tonal"
                class="mt-4"
                @click="emit('retry')"
            >
                <Icon icon="solar:refresh-outline" height="20" class="mr-2" />
                Coba Lagi
            </v-btn>
            <slot name="error-action"></slot>
        </div>
    </div>

    <!-- Content Slot -->
    <slot v-else></slot>
</template>

<style scoped>
.loading-state-container {
    width: 100%;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.state-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    width: 100%;
}
</style>
