<script setup>
import { NIcon, NText, NTag } from 'naive-ui'
import { TbLock } from 'vue-icons-plus/tb'
import { useThemeVars } from 'naive-ui'
import { computed } from 'vue'

const props = defineProps({
    icon:        { type: [Object, Function], default: null },
    title:       { type: String, required: true },
    description: { type: String, default: '' },
    href:        { type: String, default: null },
    tag:         { type: [Object, Function, String], default: 'div' },
    lock:        { type: Boolean, default: false },
    lockMessage: { type: String, default: '' },
})

const themeVars = useThemeVars()

const cardColor    = computed(() => themeVars.value.cardColor)
const dividerColor = computed(() => themeVars.value.dividerColor)
const primaryColor = computed(() => themeVars.value.primaryColor)
const primaryGlow  = computed(() => `color-mix(in srgb, ${themeVars.value.primaryColor} 14%, transparent)`)
const primaryShadow = computed(() => `color-mix(in srgb, ${themeVars.value.primaryColor} 30%, transparent)`)
const lockBg       = computed(() => `color-mix(in srgb, ${themeVars.value.cardColor} 55%, transparent)`)
</script>

<template>
    <component
        :is="lock ? 'div' : tag"
        :href="lock ? undefined : href"
        class="action-tile"
        :class="{ locked }"
        style="text-decoration: none;"
    >
        <NIcon v-if="icon" size="26" class="tile-icon"><component :is="icon" /></NIcon>
        <NText class="tile-title">{{ title }}</NText>
        <NText depth="3" class="tile-desc">{{ description }}</NText>

        <div v-if="lock" class="tile-lock">
            <NTag :bordered="false" round size="small">
                <template v-if="lockMessage" #icon>
                    <NIcon :size="13"><TbLock /></NIcon>
                </template>
                {{ lockMessage || 'Недоступно' }}
            </NTag>
        </div>
    </component>
</template>

<style scoped>
.action-tile {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 18px 18px 16px;
    cursor: pointer;
    min-height: 114px;
    display: flex;
    flex-direction: column;
    background: v-bind(cardColor);
    border: 1px solid v-bind(dividerColor);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.action-tile:hover:not(.locked) {
    transform: scale(1.025);
    border-color: v-bind(primaryColor);
    box-shadow:
        0 0 0 3px v-bind(primaryGlow),
        0 8px 28px -8px v-bind(primaryShadow);
}

.action-tile.locked {
    cursor: default;
}

.tile-icon {
    color: v-bind(primaryColor);
    opacity: 0.8;
}

.tile-title {
    font-weight: 600;
    font-size: 14px;
    display: block;
    margin-top: 10px;
    line-height: 1.2;
}

.tile-desc {
    font-size: 12px;
    display: block;
    margin-top: 4px;
    line-height: 1.35;
}

.tile-lock {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2.5px);
    -webkit-backdrop-filter: blur(2.5px);
    background: v-bind(lockBg);
}
</style>
