<template>
    <view class="ai-entry" :class="[`ai-entry--${size}`, `ai-entry--align-${align}`, `ai-entry--${variant}`]"
        @tap="goAssistant">
        <template v-if="variant === 'orb'">
            <view class="ai-entry__orb">
                <view class="ai-entry__face">
                    <view class="ai-entry__eye" />
                    <view class="ai-entry__eye" />
                </view>
            </view>
        </template>
        <template v-else>
            <text class="ai-entry__line ai-entry__line--top">AI</text>
            <text class="ai-entry__line ai-entry__line--bottom">助手</text>
        </template>
    </view>
</template>

<script setup lang="ts">
withDefaults(defineProps<{
    align?: 'left' | 'right'
    size?: 'compact' | 'regular' | 'large'
    variant?: 'badge' | 'orb'
}>(), {
    align: 'left',
    size: 'regular',
    variant: 'badge'
})

const goAssistant = () => {
    uni.navigateTo({ url: '/pages/ai_assistant/ai_assistant' })
}
</script>

<style lang="scss" scoped>
.ai-entry {
    --entry-width: 64rpx;
    --entry-height: 64rpx;
    --entry-radius: 16rpx;
    --entry-top-font: 20rpx;
    --entry-bottom-font: 14rpx;
    --entry-gap: 2rpx;

    width: var(--entry-width);
    height: var(--entry-height);
    border-radius: var(--entry-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--entry-gap);
    flex-shrink: 0;
    background: linear-gradient(135deg, #185dff 0%, #4f7dff 100%);
    box-shadow: 0 8rpx 20rpx rgba(24, 93, 255, 0.16);

    &--align-right {
        margin-left: auto;
    }

    &--compact {
        --entry-width: 60rpx;
        --entry-height: 60rpx;
        --entry-radius: 18rpx;
        --entry-top-font: 18rpx;
        --entry-bottom-font: 14rpx;
    }

    &--large {
        --entry-width: 68rpx;
        --entry-height: 68rpx;
        --entry-radius: 12rpx;
        --entry-top-font: 20rpx;
        --entry-bottom-font: 14rpx;
    }

    &--orb {
        --entry-width: 72rpx;
        --entry-height: 72rpx;
        --entry-radius: 50%;

        background: #f7f9ff;
        box-shadow: none;
    }

    &__orb {
        width: 54rpx;
        height: 54rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: radial-gradient(circle at 34% 28%, #8ec4ff 0%, #387df6 48%, #1557dc 100%);
        box-shadow: 0 5rpx 10rpx rgba(20, 104, 245, 0.2);
    }

    &__face {
        width: 37rpx;
        height: 25rpx;
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 0 6rpx;
        border-radius: 14rpx;
        background: rgba(255, 255, 255, 0.94);
        box-sizing: border-box;
    }

    &__eye {
        width: 6rpx;
        height: 11rpx;
        border-radius: 999rpx;
        background: #1f61e8;
    }

    &__line {
        color: #fff;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 1rpx;

        &--top {
            font-size: var(--entry-top-font);
        }

        &--bottom {
            font-size: var(--entry-bottom-font);
        }
    }
}
</style>
