<template>
    <div class="service-record-page">
        <div class="service-record-header">{{ t('服务记录') }}</div>

        <div class="service-record-toolbar">
            <div class="search-box">
                <svg class="search-icon" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"
                    aria-hidden="true">
                    <path
                        d="M8.75 3.75a5 5 0 1 0 0 10 5 5 0 0 0 0-10Zm0-1.5a6.5 6.5 0 1 1 0 13 6.5 6.5 0 0 1 0-13Zm5.209 11.148 3.02 3.02a.75.75 0 1 1-1.06 1.061l-3.02-3.02a.75.75 0 0 1 1.06-1.06Z"
                        fill="#86909C" />
                </svg>
                <input v-model="keyword" class="search-input" type="text" :placeholder="t('搜索会话ID / 用户 / 客服')"
                    autocomplete="off" />
            </div>

            <button class="filter-button" type="button" :aria-label="t('筛选')" @click="openFilterPopup">
                <img class="filter-icon" :src="filterIcon" alt="" />
            </button>
        </div>

        <div ref="recordListRef" class="record-list" @scroll="handleListScroll">
            <ServiceRecordItem v-for="item in records" :key="item.sessionId" :item="item" @copy="handleCopy" />
            <div v-if="records.length === 0 && !loading" class="empty-state">{{ t('暂无匹配的服务记录') }}</div>
            <div v-else-if="loading" class="list-tip">{{ t('加载中...') }}</div>
            <div v-else-if="!hasMore && records.length > 0" class="list-tip">{{ t('没有更多了') }}</div>
        </div>

        <t-popup v-model="filterPopupVisible" placement="bottom">
            <div ref="filterPopupContentRef" class="filter-popup-panel">
                <div class="filter-popup-header">
                    <div class="filter-popup-title">{{ t('全部筛选') }}</div>
                    <button class="filter-popup-close" type="button" :aria-label="t('关闭筛选')" @click="closeFilterPopup">
                        <svg class="filter-popup-close-icon" viewBox="0 0 20 20" fill="none"
                            xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path d="M6 6L14 14M14 6L6 14" stroke="#A9ADB6" stroke-width="1.8" stroke-linecap="round"
                                stroke-linejoin="round" />
                        </svg>
                    </button>
                </div>

                <div class="filter-popup-body">
                    <div class="filter-popup-section">
                        <div class="filter-popup-section-title">{{ t('开始时间') }}</div>
                        <button class="filter-time-picker" type="button" @click="openTimePicker('start')">
                            <span class="filter-time-picker-text"
                                :class="{ 'is-placeholder': !getDraftTimeDisplay('start') }">
                                {{ getDraftTimeDisplay('start') || t('请选择') }}
                            </span>
                            <img class="filter-time-picker-icon" :src="timeIcon" alt="" />
                        </button>
                    </div>

                    <div class="filter-popup-section">
                        <div class="filter-popup-section-title">{{ t('结束时间') }}</div>
                        <button class="filter-time-picker" type="button" @click="openTimePicker('end')">
                            <span class="filter-time-picker-text"
                                :class="{ 'is-placeholder': !getDraftTimeDisplay('end') }">
                                {{ getDraftTimeDisplay('end') || t('请选择') }}
                            </span>
                            <img class="filter-time-picker-icon" :src="timeIcon" alt="" />
                        </button>
                    </div>

                    <div class="filter-popup-section">
                        <div class="filter-popup-section-title">{{ t('技能组') }}</div>
                        <div class="skill-group-list">
                            <button v-for="option in skillGroupList" :key="option.value" type="button"
                                class="skill-group-item"
                                :class="{ 'is-active': draftParams.skillGroupIds.includes(option.value) }"
                                :aria-pressed="draftParams.skillGroupIds.includes(option.value)"
                                @click="toggleSkillGroup(option.value)">
                                {{ option.label }}
                            </button>
                        </div>
                    </div>

                    <div class="filter-popup-section">
                        <div class="filter-popup-section-title">{{ t('会话类型') }}</div>
                        <div class="skill-group-list">
                            <button v-for="option in sessionTypeOptions" :key="option.value" type="button"
                                class="skill-group-item"
                                :class="{ 'is-active': draftParams.conversationTypes.includes(option.value) }"
                                :aria-pressed="draftParams.conversationTypes.includes(option.value)"
                                @click="toggleSessionType(option.value)">
                                {{ option.label }}
                            </button>
                        </div>
                    </div>
                </div>

                <div class="filter-popup-actions">
                    <button class="filter-popup-action filter-popup-action--reset" type="button"
                        @click="handleResetFilter">
                        {{ t('重置') }}
                    </button>
                    <button class="filter-popup-action filter-popup-action--confirm" type="button"
                        @click="handleConfirmFilter">
                        {{ t('确认') }}
                    </button>
                </div>

                <t-popup v-model="timePickerPopupVisible" placement="bottom" :attach="() => filterPopupContentRef"
                    :z-index="1600">
                    <div class="filter-time-popup-panel">
                        <div class="filter-time-popup-header">
                            <button class="filter-time-popup-header-action filter-time-popup-header-action--cancel"
                                type="button" @click="handleTimePickerCancel">
                                {{ t('取消') }}
                            </button>
                            <div class="filter-time-popup-header-title">{{ timePickerPopupTitle }}</div>
                            <button class="filter-time-popup-header-action filter-time-popup-header-action--confirm"
                                type="button" @click="handleTimePickerConfirmClick">
                                {{ t('确定') }}
                            </button>
                        </div>

                        <div class="filter-time-popup-tabs" role="tablist" :aria-label="t('时间类型切换')">
                            <button class="filter-time-popup-tab" type="button" role="tab"
                                :class="{ 'is-active': activeTimePickerTab === 'date' }"
                                :aria-selected="activeTimePickerTab === 'date'" @click="switchTimePickerTab('date')">
                                {{ t('日期') }}
                            </button>
                            <button class="filter-time-popup-tab" type="button" role="tab"
                                :class="{ 'is-active': activeTimePickerTab === 'time' }"
                                :aria-selected="activeTimePickerTab === 'time'" @click="switchTimePickerTab('time')">
                                {{ t('时间') }}
                            </button>
                        </div>

                        <div class="filter-time-popup-content">
                            <t-date-time-picker v-if="activeTimePickerTab === 'date'" :mode="['date']"
                                :value="timePickerPanelData.date" format="YYYY-MM-DD" :confirm-btn="null"
                                :cancel-btn="null" @pick="handleTimePickerPick" />
                            <t-date-time-picker v-else :mode="[null, 'second']" :value="timePickerPanelData.time"
                                format="HH:mm:ss" :confirm-btn="null" :cancel-btn="null" @pick="handleTimePickerPick" />
                        </div>

                        <div class="filter-time-popup-footer">
                            <div class="filter-time-popup-current">
                                <span class="filter-time-popup-current-label">{{ t('当前选择:') }}</span>
                                <div class="filter-time-popup-current-value">
                                    <span class="filter-time-popup-current-date">{{ timePickerPanelData.date }}</span>
                                    <span class="filter-time-popup-current-time">{{ timePickerPanelData.time }}</span>
                                </div>
                            </div>
                        </div>

                    </div>
                </t-popup>

            </div>
        </t-popup>
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import dayjs from 'dayjs';
import ServiceRecordItem from './ServiceRecordItem.vue';
import filterIcon from './filter.svg';
import timeIcon from './time.svg';
import debounce from 'lodash/debounce';
import toast from '../../../utils/toast';
import AIDeskCoreInstance, { StoreName } from '@tencentcloud/ai-desk-core';

const { t } = useI18n();

type RecordItem = {
    sessionId: string;
    userName: string;
    userId: string;
    staffName?: string;
    staffEmail: string;
    time: string;
    channelAgentID: string;
    peerSource: string;
    timestamp: number;
    userBlacklist: {
        startTime: number;
        endTime: number;
        blockType: number;
        reason: string;
        status: number;
    };
};

type searchParamsType = {
    pageSize: number;
    pageNumber: number;
    fromTime: number;
    toTime: number;
    staffUserId: string;
    skillGroupIds: number[];
    searchPhrases: string[];
    conversationTypes: number[];
};

const keyword = ref('');
const skillGroupList = ref<{
    label: string;
    value: number;
}[]>([])
const records = ref<RecordItem[]>([])
const total = ref(0);
const loadedCount = ref(0);
const loading = ref(false);
const recordListRef = ref<HTMLElement>();
const filterPopupVisible = ref(false);
const filterPopupContentRef = ref<HTMLElement>();
const timePickerPopupVisible = ref(false);
const activeTimePickerField = ref("")
const activeTimePickerTab = ref("")

const createDefaultSearchParams = (): searchParamsType => ({
    pageSize: 10,
    pageNumber: 0,
    fromTime: dayjs().startOf('day').unix(),
    toTime: dayjs().endOf('day').unix(),
    staffUserId: "",
    skillGroupIds: [],
    searchPhrases: keyword.value ? [keyword.value.trim()] : [],
    conversationTypes: [],
});

const cloneSearchParams = (params: searchParamsType): searchParamsType => ({
    ...params,
    skillGroupIds: [...params.skillGroupIds],
    searchPhrases: [...params.searchPhrases],
    conversationTypes: [...params.conversationTypes],
});

const dedupeRecordsBySessionId = (list: RecordItem[]) => {
    const sessionIdSet = new Set<string>();
    return list.filter((item) => {
        if (sessionIdSet.has(item.sessionId)) {
            return false;
        }
        sessionIdSet.add(item.sessionId);
        return true;
    });
};

const draftParams = ref<searchParamsType>(createDefaultSearchParams());

const searchParams = ref<searchParamsType>(createDefaultSearchParams());

const timePickerPanelData = ref({
    date: "",
    time: "",
})

const hasMore = computed(() => loadedCount.value < total.value);

const debouncedLoadRecords = debounce(() => {
    loadRecords();
}, 300);

onMounted(async () => {
    await loadSkillGroupList();
    AIDeskCoreInstance.coreStore.watch(StoreName.USERINFO, {
        userId: onCurrentUserIdUpdated,
        skillGroupId: onCurrentSkillGroupIdUpdated,
    });
    loadRecords();
});

onUnmounted(() => {
    AIDeskCoreInstance.coreStore.unwatch(StoreName.USERINFO, {
        userId: onCurrentUserIdUpdated,
        skillGroupId: onCurrentSkillGroupIdUpdated,
    });
    debouncedLoadRecords.cancel();
});

watch(keyword, (val) => {
    const trimmed = val.trim();
    searchParams.value.searchPhrases = trimmed ? [trimmed] : [];
    debouncedLoadRecords();
});

const onCurrentUserIdUpdated = (userId: string) => {
    searchParams.value.staffUserId = userId;
    draftParams.value.staffUserId = userId;
};

const onCurrentSkillGroupIdUpdated = (skillGroupId: string[]) => {
    const currentUserSkillGroupIds = skillGroupId.map(Number);
    skillGroupList.value = skillGroupList.value.filter((item) => currentUserSkillGroupIds.includes(item.value));
};

const loadSkillGroupList = async () => {
    try {
        const res = await AIDeskCoreInstance.sessionService.getSkillGroupList({
            skillGroupType: 1,
        });
        const list = res.skillGroupList ?? [];
        const allOptions = list
            .map((item) => ({
                label: item.skillGroupName,
                value: Number(item.skillGroupId),
            }));
        skillGroupList.value = allOptions;
    } catch (e) {
        console.error('loadSkillGroupList error', e);
    }
};

const loadRecords = async (reset = true) => {
    if (loading.value) {
        return;
    }
    if (!reset && !hasMore.value) {
        return;
    }

    const requestParams = cloneSearchParams(searchParams.value);
    if (reset) {
        requestParams.pageNumber = 0;
    }

    loading.value = true;
    try {
        const res = await AIDeskCoreInstance.sessionService.getIMSessionRecords(requestParams);
        const fetchedCount = res.data?.length ?? 0;
        const nextRecords = (res.data ?? []).map((item) => ({
            sessionId: item.sessionId,
            userName: item.userNickName || '--',
            userId: item.userId ?? '',
            staffName: item.staffNickName || '--',
            staffEmail: item.staffUserId ?? '',
            time: dayjs(item.timestamp * 1000).format('YYYY-MM-DD HH:mm:ss'),
            channelAgentID: item.channelAgentID ?? '',
            peerSource: typeof item.source === 'number' ? String(item.source) : '',
            timestamp: typeof item.timestamp === 'number' ? item.timestamp * 1000 : Date.now(),
            userBlacklist: item.userBlacklist,
        }));

        total.value = res.totalCount ?? 0;
        loadedCount.value = fetchedCount === 0
            ? total.value
            : Math.min((reset ? 0 : loadedCount.value) + fetchedCount, total.value);
        records.value = dedupeRecordsBySessionId(
            reset ? nextRecords : [...records.value, ...nextRecords],
        );
        searchParams.value.pageNumber = requestParams.pageNumber + 1;
    } catch (e) {
        console.error('loadRecords error', e);
    } finally {
        loading.value = false;
    }
};

const handleListScroll = () => {
    const dom = recordListRef.value;
    if (!dom) {
        return;
    }
    if (loading.value || !hasMore.value) {
        return;
    }
    const threshold = 40;
    if (dom.scrollTop + dom.clientHeight + threshold >= dom.scrollHeight) {
        loadRecords(false);
    }
};

const openFilterPopup = () => {
    draftParams.value = cloneSearchParams(searchParams.value)
    filterPopupVisible.value = true;
};

const closeFilterPopup = () => {
    filterPopupVisible.value = false;
};

const timePickerPopupTitle = computed(() => activeTimePickerField.value === 'start' ? t('选择开始时间') : t('选择结束时间'));

const sessionTypeOptions = computed<{ label: string; value: number }[]>(() => [
    {
        label: t('用户主动联系'),
        value: 0,
    },
    {
        label: t('坐席主动联系'),
        value: 1,
    },
]);

const handleCopy = async (value: string) => {
    try {
        await navigator.clipboard.writeText(value);
        toast.success(t('已复制'));
    } catch {
        toast.error(t('复制失败'));
    }
};

const getDraftTimeDisplay = (field: 'start' | 'end') => {
    return field === 'start' ? dayjs(draftParams.value.fromTime * 1000).format('YYYY-MM-DD HH:mm:ss') : dayjs(draftParams.value.toTime * 1000).format('YYYY-MM-DD HH:mm:ss');;
};

const openTimePicker = (field: 'start' | 'end') => {
    activeTimePickerField.value = field;
    activeTimePickerTab.value = 'date';
    if (field === 'start') {
        timePickerPanelData.value.date = dayjs(draftParams.value.fromTime * 1000).format('YYYY-MM-DD')
        timePickerPanelData.value.time = dayjs(draftParams.value.fromTime * 1000).format('HH:mm:ss')
    } else {
        timePickerPanelData.value.date = dayjs(draftParams.value.toTime * 1000).format('YYYY-MM-DD')
        timePickerPanelData.value.time = dayjs(draftParams.value.toTime * 1000).format('HH:mm:ss')
    }
    timePickerPopupVisible.value = true;
};

const switchTimePickerTab = (tab: 'date' | 'time') => {
    activeTimePickerTab.value = tab;
};

const handleTimePickerCancel = () => {
    timePickerPopupVisible.value = false;
};

const handleTimePickerPick = (value: string) => {
    if (activeTimePickerTab.value === 'date') {
        timePickerPanelData.value.date = value
    } else {
        timePickerPanelData.value.time = value
    }
};

const handleTimePickerConfirmClick = () => {
    const nextTime = dayjs(`${timePickerPanelData.value.date} ${timePickerPanelData.value.time}`).unix()
    if (activeTimePickerField.value === 'start') {
        if (nextTime > draftParams.value.toTime) {
            toast.error(t('开始时间不能大于结束时间'));
            return;
        }
        draftParams.value.fromTime = nextTime
    } else {
        if (nextTime < draftParams.value.fromTime) {
            toast.error(t('结束时间不能小于开始时间'));
            return;
        }
        draftParams.value.toTime = nextTime
    }
    timePickerPopupVisible.value = false;
};

const toggleSkillGroup = (value: number) => {
    if (draftParams.value.skillGroupIds.includes(value)) {
        draftParams.value.skillGroupIds = draftParams.value.skillGroupIds.filter((item) => item !== value);
        return;
    }
    draftParams.value.skillGroupIds = [...draftParams.value.skillGroupIds, value];
};

const toggleSessionType = (value: number) => {
    if (draftParams.value.conversationTypes.includes(value)) {
        draftParams.value.conversationTypes = draftParams.value.conversationTypes.filter((item) => item !== value);
    } else {
        draftParams.value.conversationTypes = [...draftParams.value.conversationTypes, value];
    }
};

const handleResetFilter = () => {
    draftParams.value = createDefaultSearchParams();
};

const handleConfirmFilter = () => {
    searchParams.value = {
        ...cloneSearchParams(draftParams.value),
        pageNumber: 0,
    }
    filterPopupVisible.value = false;
    loadRecords();
};
</script>

<style scoped>
:deep(*) {
    box-sizing: border-box;
}

.service-record-page {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f5f7fa;
}

.service-record-header {
    padding: 20px 16px 12px;
    background: #fff;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: #1d2129;
}

.service-record-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px 16px;
    background: #fff;
}

.search-box {
    flex: 1;
    min-width: 0;
    height: 36px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border-radius: 18px;
    background: #f2f3f5;
}

.search-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: #1d2129;
}

.search-input::placeholder {
    color: #86909c;
}

.filter-button {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: none;
    border-radius: 18px;
    background: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #e6e9f0ff;
}

.filter-icon {
    width: 18px;
    height: 18px;
    display: block;
}

.record-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    background: white;
}

.empty-state {
    margin-top: 48px;
    text-align: center;
    font-size: 14px;
    line-height: 22px;
    color: #86909c;
}

.list-tip {
    padding: 12px 0;
    text-align: center;
    font-size: 12px;
    line-height: 20px;
    color: #86909c;
}

.filter-popup-panel {
    background: #ffffff;
    border-radius: 20px 20px 0 0;
    padding: 20px 16px calc(24px + env(safe-area-inset-bottom));
    max-height: min(78vh, 640px);
    display: flex;
    flex-direction: column;
}

.filter-popup-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    flex-shrink: 0;
}

.filter-popup-title {
    font-size: 17px;
    line-height: 24px;
    font-weight: 600;
    color: #1d2129;
}

.filter-popup-close {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.filter-popup-close-icon {
    width: 18px;
    height: 18px;
    display: block;
}

.filter-popup-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin-top: 24px;
    padding-right: 4px;
}

.filter-popup-section+.filter-popup-section {
    margin-top: 24px;
}

.filter-popup-section-title {
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
    color: #1d2129;
}

.filter-time-picker {
    width: 100%;
    margin-top: 12px;
    padding: 0 16px;
    height: 48px;
    border: 1px solid #DCDFE5;
    border-radius: 24px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.filter-time-picker-text {
    flex: 1;
    min-width: 0;
    text-align: left;
    font-size: 14px;
    line-height: 22px;
    color: #1D2129;
}

.filter-time-picker-text.is-placeholder {
    color: #86909C;
}

.filter-time-picker-icon {
    width: 16px;
    height: 16px;
    margin-left: 12px;
    flex-shrink: 0;
}

.filter-time-popup-panel {
    background: #ffffff;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
}

.filter-time-popup-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
}

.filter-time-popup-header-title {
    font-size: 17px;
    line-height: 24px;
    font-weight: 600;
    color: #1D2129;
}

.filter-time-popup-header-action {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    padding: 0;
    font-size: 14px;
    line-height: 22px;
}

.filter-time-popup-header-action--cancel {
    left: 0;
    color: #86909C;
}

.filter-time-popup-header-action--confirm {
    right: 0;
    color: #09A768;
    font-weight: 500;
}

.filter-time-popup-header-action--confirm.is-disabled,
.filter-time-popup-header-action--confirm:disabled {
    color: #C9CDD4;
}

.filter-time-popup-tabs {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0 18px;
    padding-bottom: 10px;
}

.filter-time-popup-tabs::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: #E7E7E7;
}

.filter-time-popup-tab {
    position: relative;
    min-width: auto;
    height: 32px;
    padding: 0 8px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #86909C;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.filter-time-popup-tab::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 52px;
    height: 3px;
    border-radius: 999px;
    background: transparent;
    transform: translateX(-50%);
}

.filter-time-popup-tab.is-active {
    color: #1D2129;
}

.filter-time-popup-tab.is-active::after {
    background: #000000;
}

.filter-time-popup-tab+.filter-time-popup-tab {
    margin-left: 72px;
}

.filter-time-popup-content {
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
}

.filter-time-popup-content :deep(.t-picker__header),
.filter-time-popup-content :deep(.t-picker__toolbar),
.filter-time-popup-content :deep(.t-date-time-picker__header) {
    display: none;
}

.filter-time-popup-footer {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #E7E7E7;
}

.filter-time-popup-current {
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}

.filter-time-popup-current.is-placeholder {
    color: #A9ADB6;
}

.filter-time-popup-current-label {
    font-size: 16px;
    line-height: 20px;
    flex-shrink: 0;
}

.filter-time-popup-current.is-placeholder .filter-time-popup-current-label {
    color: inherit;
}

.filter-time-popup-current-value {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: #1D2129;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-time-popup-current-date {
    color: #09A768;
}

.filter-time-popup-current-time {
    color: #09A768;
}


.skill-group-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}

.skill-group-item {
    min-width: 84px;
    height: 36px;
    padding: 0 16px;
    border: none;
    border-radius: 18px;
    background: #F0F2F7;
    color: #676A70;
    font-size: 14px;
    line-height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.skill-group-item.is-active {
    background: #E1F7EB;
    color: #09A768;
}

.filter-popup-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    flex-shrink: 0;
}

.filter-popup-action {
    flex: 1;
    height: 44px;
    border-radius: 22px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
}

.filter-popup-action--reset {
    background: #F2F3F5;
    color: #1D2129;
}

.filter-popup-action--confirm {
    background: #000000;
    color: #FFFFFF;
}
</style>