<template>
    <div class="create-session-entry">
        <t-popup v-model="popupVisible" trigger="click" placement="bottom" :overlay-inner-style="popupOverlayStyle"
            overlay-class-name="create-session-entry-popup" :on-visible-change="handlePopupVisibleChange">
            <button type="button" class="entry-button" :class="{ 'is-active': popupVisible }">
                <svg class="entry-icon" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"
                    aria-hidden="true">
                    <path d="M8 3.5v9M3.5 8h9" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" />
                </svg>
            </button>
            <template #content>
                <div class="create-session-menu">
                    <button type="button" class="create-session-menu__item" @click="handleSingleSessionClick">
                        <span class="menu-item-icon"
                            :style="{ '-webkit-mask-image': `url(&quot;${waitHumanIcon}&quot;)`, 'mask-image': `url(&quot;${waitHumanIcon}&quot;)` }"></span>
                        <span class="menu-item-text">{{ t('单人会话') }}</span>
                    </button>
                </div>
            </template>
        </t-popup>

        <CreateSessionDialog v-model:visible="dialogVisible" />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import waitHumanIcon from '../../../Mobile/SessionsList/components/SessionTabs/waitHuman.svg';
import CreateSessionDialog from './CreateSessionDialog.vue';

const { t } = useI18n();

const popupVisible = ref(false);
const dialogVisible = ref(false);

const popupOverlayStyle = {
    padding: 0,
    background: '#fff',
    borderRadius: '10px',
    border: 'none',
    boxShadow: '0 6px 24px rgba(0, 0, 0, 0.12)',
    overflow: 'hidden',
};

const handlePopupVisibleChange = (val: boolean) => {
    popupVisible.value = val;
};

const handleSingleSessionClick = () => {
    popupVisible.value = false;
    dialogVisible.value = true;
};
</script>

<style scoped>
.create-session-entry {
    display: inline-flex;
    align-items: center;
}

.entry-button {
    position: relative;
    width: 20px;
    height: 20px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid #4E5969;
    border-radius: 50%;
    color: #4E5969;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.entry-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: transparent;
    transition: background 0.15s;
    z-index: -1;
}

.entry-button:hover,
.entry-button.is-active {
    color: #1D2129;
    border-color: #1D2129;
}

.entry-button:hover::before,
.entry-button.is-active::before {
    background: #F0F2F7;
}

.entry-icon {
    width: 8px;
    height: 8px;
}

.create-session-menu {
    width: 160px;
    padding: 6px;
    box-sizing: border-box;
}

.create-session-menu__item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.create-session-menu__item:hover {
    background: #F7F8FA;
}

.menu-item-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: inline-block;
    background-color: #4E5969;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.menu-item-text {
    font-size: 14px;
    line-height: 20px;
    color: #1D2129;
}
</style>
