<script setup lang="ts">
const { t } = useI18n()

const props = withDefaults(defineProps<{
    modelValue: boolean
    title: string
    content: string
    loading?: boolean
    showLevelFilter?: boolean
}>(), {
    loading: false,
    showLevelFilter: false,
})

const emit = defineEmits<{
    (e: 'update:modelValue', value: boolean): void
    (e: 'refresh', lines: number, level: string): void
}>()

const selectedLines = ref(100)
const selectedLevel = ref('')

const lineOptions = [50, 100, 500, 1000]

const copied = ref(false)

function refresh() {
    emit('refresh', selectedLines.value, selectedLevel.value)
}

async function copyLogs() {
    if (!props.content) return
    await navigator.clipboard.writeText(props.content)
    copied.value = true
    setTimeout(() => { copied.value = false }, 2000)
}

watch(() => props.modelValue, (open) => {
    if (open) {
        copied.value = false
        refresh()
    }
})
</script>

<template>
    <AppModal
        :model-value="modelValue"
        @update:model-value="emit('update:modelValue', $event)"
        max-width="2xl"
    >
        <template #title>{{ title }}</template>

        <div class="flex items-center justify-between mb-4">
            <div class="flex items-center gap-3">
                <div class="flex items-center gap-2">
                    <label class="text-xs text-neutral-400">{{ t('logs.lines') }}</label>
                    <select
                        v-model="selectedLines"
                        class="rounded-md border border-neutral-300 px-2 py-1 text-sm"
                        @change="refresh"
                    >
                        <option v-for="n in lineOptions" :key="n" :value="n">{{ n }}</option>
                    </select>
                </div>
                <div v-if="showLevelFilter" class="flex items-center gap-2">
                    <label class="text-xs text-neutral-400">{{ t('logs.level') }}</label>
                    <select
                        v-model="selectedLevel"
                        class="rounded-md border border-neutral-300 px-2 py-1 text-sm"
                        @change="refresh"
                    >
                        <option value="">{{ t('logs.levelAll') }}</option>
                        <option value="ERROR">ERROR</option>
                        <option value="WARNING">WARNING</option>
                        <option value="INFO">INFO</option>
                        <option value="DEBUG">DEBUG</option>
                    </select>
                </div>
                <MalioButtonIcon
                    icon="mdi:refresh"
                    :aria-label="t('logs.refresh')"
                    icon-size="18"
                    @click="refresh"
                />
            </div>
            <MalioButtonIcon
                :icon="copied ? 'mdi:check' : 'mdi:content-copy'"
                :aria-label="t('logs.copy')"
                icon-size="18"
                :button-class="copied ? 'text-green-500' : ''"
                @click="copyLogs"
            />
        </div>

        <pre
            v-if="content"
            class="max-h-96 overflow-auto rounded-lg bg-neutral-900 p-4 text-xs text-green-400 font-mono whitespace-pre-wrap"
        >{{ content }}</pre>

        <p v-else-if="!loading" class="text-center text-neutral-400 py-8">
            {{ t('logs.noContent') }}
        </p>

        <template #footer>
            <MalioButton
                :label="t('applications.form.cancel')"
                variant="tertiary"
                @click="emit('update:modelValue', false)"
            />
        </template>
    </AppModal>
</template>
