<template>
    <div class="pc-emoji-button">
        <BaseIconButton :icon="icon" :title="t('表情')" @click="handleToggle" />

        <div v-if="visible" class="pc-emoji-popover">
            <InputEmoji @select="handleSelect" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIconButton from './BaseIconButton.vue';
import InputEmoji from '../../../../Mobile/Chat/ChatInput/inputEmoji/index.vue';
import openEmojiIcon from '../../../../Mobile/Chat/ChatInput/assets/openEmoji.svg';

interface EmojiSelectionData {
    url: string;
    emoji: { key: string };
}

const emit = defineEmits<{
    (e: 'select', data: EmojiSelectionData): void;
    (e: 'open'): void;
}>();

const { t } = useI18n();
const icon = openEmojiIcon;
const visible = ref(false);

const handleToggle = () => {
    visible.value = !visible.value;
    if (visible.value) {
        emit('open');
    }
};

const close = () => {
    visible.value = false;
};

const handleSelect = (data: EmojiSelectionData) => {
    if (!data?.url || !data?.emoji?.key) {
        return;
    }
    emit('select', data);
    close();
};

defineExpose({ close });
</script>

<style scoped>
.pc-emoji-button {
    position: static;
}

.pc-emoji-popover {
    position: absolute;
    left: 20px;
    bottom: calc(100% - 8px);
    z-index: 5;
    width: max-content;
    max-width: calc(100% - 40px);
    max-height: 320px;
    overflow: auto;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    background: #fff;
}

/* PC 端不显示表情面板底部的删除按钮 */
.pc-emoji-popover :deep(.input-emoji-footer) {
    display: none;
}

/* 更紧凑的表情网格：更多列、更小间距，类似微信 */
.pc-emoji-popover :deep(.input-emoji-panel) {
    margin-top: 0;
    padding: 8px;
    border-radius: 12px;
    width: max-content;
}

.pc-emoji-popover :deep(.input-emoji-scroll) {
    display: grid;
    grid-template-columns: repeat(10, 32px);
    grid-auto-rows: 32px;
    gap: 6px;
    justify-content: start;
    max-height: 300px;
    padding-right: 0;
    padding-bottom: 0;
}

.pc-emoji-popover :deep(.input-emoji-item) {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.pc-emoji-popover :deep(.input-emoji-item:hover) {
    background: #f0f2f7;
}

.pc-emoji-popover :deep(.input-emoji-image) {
    width: 28px;
    height: 28px;
}
</style>
