<template>
    <div class="dynamic-picker" :class="{ 'mt-4': !noMargin }">
        <label :for="inputName" v-if="label">
            <b>{{ label }}</b>
        </label>
        <div class="input-wrapper">
            <!-- Video Groups MultiSelect -->
            <MultiSelect
                v-if="dataSource === 'videoGroups'"
                v-model="selectedValue"
                :options="safeOptions"
                optionLabel="name"
                :filter="true"
                :placeholder="placeholder || 'Select VideoGroups'"
                :disabled="disabled"
                :loading="loading"
                :virtualScrollerOptions="{ itemSize: 50 }"
                class="w-full"
                panelClass="video-groups-panel"
                @change="onSelectionChange"
            >
                <template #option="slotProps">
                    <div class="flex align-items-center p-3 hover:bg-gray-50">
                        <i class="pi pi-video mr-3 text-blue-600"></i>
                        <div class="flex-1">
                            <div class="font-medium text-sm">{{ slotProps.option.name }}</div>
                            <small class="text-muted" v-if="slotProps.option.description">
                                {{ slotProps.option.description }}
                            </small>
                        </div>
                    </div>
                </template>
            </MultiSelect>

            <!-- KS Documents MultiSelect -->
            <MultiSelect
                v-else-if="dataSource === 'ksDocuments'"
                v-model="selectedValue"
                :options="safeOptions"
                optionLabel="fileName"
                :filter="true"
                :placeholder="placeholder || 'Select Documents'"
                :disabled="disabled"
                :loading="loading"
                :virtualScrollerOptions="{ itemSize: 50 }"
                class="w-full"
                panelClass="ks-documents-panel"
                @change="onSelectionChange"
            >
                <template #option="slotProps">
                    <div class="flex align-items-center p-3 hover:bg-gray-50">
                        <i :class="getFileIcon(slotProps.option)" class="mr-3"></i>
                        <div class="flex-1">
                            <div class="font-medium text-sm">{{ slotProps.option.fileName }}</div>
                            <small class="text-muted" v-if="slotProps.option.description">
                                {{ slotProps.option.description }}
                            </small>
                        </div>
                    </div>
                </template>
            </MultiSelect>

            <!-- Dropdown per selezione singola -->
            <Dropdown
                v-else-if="multiple === false"
                v-model="selectedValue"
                :options="safeOptions"
                optionLabel="name"
                :filter="true"
                :placeholder="placeholder || 'Select an option'"
                :disabled="disabled"
                :loading="loading"
                class="w-full md:w-80"
                @change="onSelectionChange"
            />

            <!-- MultiSelect generico per altri tipi -->
            <MultiSelect
                v-else-if="safeOptions && safeOptions.length > 0"
                v-model="selectedValue"
                :options="safeOptions"
                optionLabel="name"
                :filter="true"
                :placeholder="placeholder || 'Select options'"
                :disabled="disabled"
                :loading="loading"
                :virtualScrollerOptions="{ itemSize: 50 }"
                class="w-full"
                panelClass="generic-multiselect-panel"
                @change="onSelectionChange"
            />
        </div>

        <!-- Loading indicator -->
        <div v-if="loading" class="text-sm text-gray-500 mt-1">
            <i class="pi pi-spin pi-spinner mr-1"></i>
            Loading options...
        </div>

        <!-- Error message -->
        <div v-if="error" class="text-red-500 text-sm mt-1">
            <i class="pi pi-exclamation-triangle mr-1"></i>
            {{ error }}
        </div>

        <!-- Info message -->
        <div v-if="options.length === 0 && !loading && !error" class="text-gray-500 text-sm mt-1">
            <i class="pi pi-info-circle mr-1"></i>
            No options available
        </div>
    </div>
</template>

<script setup>
import Dropdown from 'primevue/dropdown';
import MultiSelect from 'primevue/multiselect';
import { computed } from 'vue';

// Props
const props = defineProps({
    modelValue: {
        type: [Array, Object, String, Number],
        default: null
    },
    inputName: {
        type: String,
        required: true
    },
    label: {
        type: String,
        default: ''
    },
    placeholder: {
        type: String,
        default: ''
    },
    dataSource: {
        type: String,
        required: true
    },
    options: {
        type: Array,
        default: () => []
    },
    disabled: {
        type: Boolean,
        default: false
    },
    loading: {
        type: Boolean,
        default: false
    },
    error: {
        type: String,
        default: ''
    },
    multiple: {
        type: Boolean,
        default: true
    },
    showStatus: {
        type: Boolean,
        default: false
    },
    noMargin: {
        type: Boolean,
        default: false
    }
});

// Emits
const emit = defineEmits(['update:modelValue', 'change']);

// Computed
const selectedValue = computed({
    get() {
        return props.modelValue;
    },
    set(value) {
        emit('update:modelValue', value);
    }
});

// Computed property per garantire che le options siano sempre un array valido
const safeOptions = computed(() => {
    return Array.isArray(props.options) ? props.options : [];
});

const getFileIcon = (document) => {
    if (!document) return 'pi pi-file';

    const fileName = document.fileName || document.name || '';
    const extension = fileName.toLowerCase().split('.').pop();

    switch (extension) {
        case 'pdf':
            return 'pi pi-file-pdf text-red-500';
        case 'doc':
            return 'pi pi-file-word text-blue-500';
        case 'docx':
            return 'pi pi-file-word text-blue-500';
        case 'xls':
            return 'pi pi-file-excel text-green-500';
        case 'xlsx':
            return 'pi pi-file-excel text-green-500';
        case 'txt':
            return 'pi pi-file text-gray-500';
        case 'ppt':
            return 'pi pi-file text-red-500';
        case 'pptx':
            return 'pi pi-file text-red-500';
        case 'json':
            return 'pi pi-file text-orange-500';
        case 'gif':
            return 'pi pi-image text-purple-500';
        case 'rar':
            return 'pi pi-file-archive text-yellow-500';
        default:
            return 'pi pi-file text-gray-400';
    }
};

const onSelectionChange = (event) => {
    emit('change', event.value);
};
</script>

<style scoped>
.input-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-top: 10px;
}

.text-muted {
    color: #6c757d;
}
</style>

<style>
/* Personalizzazione delle panel dei MultiSelect per migliorare la visualizzazione */
.ks-documents-panel .p-multiselect-panel,
.video-groups-panel .p-multiselect-panel,
.generic-multiselect-panel .p-multiselect-panel {
    min-width: 350px;
    max-width: 500px;
}

.ks-documents-panel .p-multiselect-items,
.video-groups-panel .p-multiselect-items,
.generic-multiselect-panel .p-multiselect-items {
    max-height: 300px;
}

.ks-documents-panel .p-multiselect-item,
.video-groups-panel .p-multiselect-item,
.generic-multiselect-panel .p-multiselect-item {
    padding: 0.75rem;
    border-bottom: 1px solid #e9ecef;
    min-height: 50px;
    display: flex;
    align-items: center;
}

.ks-documents-panel .p-multiselect-item:last-child,
.video-groups-panel .p-multiselect-item:last-child,
.generic-multiselect-panel .p-multiselect-item:last-child {
    border-bottom: none;
}

.ks-documents-panel .p-multiselect-item:hover,
.video-groups-panel .p-multiselect-item:hover,
.generic-multiselect-panel .p-multiselect-item:hover {
    background-color: #f8f9fa;
}

/* Stili per le icone dei file */
.ks-documents-panel .pi {
    font-size: 1.2rem;
    min-width: 1.5rem;
}

.video-groups-panel .pi-video {
    font-size: 1.2rem;
    min-width: 1.5rem;
}
</style>
