<template>
    <div class="detail-page">
        <div class="detail-page-main">
            <header class="detail-header">
                <button class="header-action" type="button" @click="router.back()">
                    <img class="header-action-icon" :src="pageBackIcon" alt="" />
                </button>
                <div class="detail-title">{{ t('用户资料') }}</div>
                <div class="header-placeholder" />
            </header>

            <section class="card profile-card">
                <div class="profile-main">
                    <div class="avatar" aria-hidden="true">
                        <img class="avatar-image" :src="profileAvatar" alt="" />
                    </div>
                    <div class="profile-info">
                        <div class="profile-name">{{ profileNickname }}
                        </div>
                        <div class="profile-channel">{{ profileChannelName
                        }}</div>
                    </div>
                </div>
            </section>

            <section class="card info-card">
                <div v-for="item in infoItems" :key="item.label" class="info-row">
                    <div class="info-content">
                        <span class="info-label">{{ item.label }}</span>
                        <span class="info-value" :class="item.className">{{ item.value }}</span>
                    </div>
                </div>
            </section>

            <section class="card remark-card">
                <div class="remark-title">{{ t('备注') }}</div>
                <textarea v-model="profileRemark" class="remark-textarea" :placeholder="t('暂无备注')"
                    @blur="handleRemarkBlur" />
            </section>
        </div>

        <div v-if="imBlackUserEnable" class="page-footer">
            <button type="button" class="blacklist-button" :class="{ 'blacklist-button--danger': !isBlacklisted }"
                @click="handleToggleBlacklist">
                {{ blacklistActionText }}
            </button>
        </div>

        <t-popup v-if="imBlackUserEnable" v-model="blacklistPopupVisible" placement="bottom">
            <div ref="blacklistPopupContentRef" 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="closeBlacklistPopup">
                        <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>
                        <div class="skill-group-list">
                            <button v-for="option in blacklistDurationOptions" :key="option.value" type="button"
                                class="skill-group-item"
                                :class="{ 'is-active': blacklistDraft.durationType === option.value }"
                                :aria-pressed="blacklistDraft.durationType === option.value"
                                @click="selectBlacklistDuration(option.value)">
                                {{ option.label }}
                            </button>
                        </div>
                    </div>

                    <template v-if="isCustomBlacklistDuration">
                        <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">
                                    {{ getBlacklistTimeDisplay('start') }}
                                </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">
                                    {{ getBlacklistTimeDisplay('end') }}
                                </span>
                                <img class="filter-time-picker-icon" :src="timeIcon" alt="" />
                            </button>
                        </div>
                    </template>

                    <div class="filter-popup-section">
                        <div class="filter-popup-section-title">{{ t('拉黑后的功能限制') }}</div>
                        <div class="skill-group-list skill-group-list--column">
                            <button v-for="option in blacklistBlockTypeOptions" :key="option.value" type="button"
                                class="skill-group-item skill-group-item--full"
                                :class="{ 'is-active': blacklistDraft.blockType === option.value }"
                                :aria-pressed="blacklistDraft.blockType === option.value"
                                @click="selectBlacklistBlockType(option.value)">
                                {{ option.label }}
                            </button>
                        </div>
                    </div>

                    <div class="filter-popup-section">
                        <div class="filter-popup-section-title">{{ t('拉黑原因（选填）') }}</div>
                        <textarea v-model="blacklistDraft.reason" class="blacklist-reason-textarea"
                            :placeholder="t('请输入拉黑原因')" />
                    </div>
                </div>

                <div class="filter-popup-actions">
                    <button class="filter-popup-action filter-popup-action--reset" type="button"
                        @click="handleCancelBlacklist">
                        {{ t('取消') }}
                    </button>
                    <button class="filter-popup-action filter-popup-action--confirm" type="button"
                        @click="handleConfirmBlacklist">
                        {{ t('确认') }}
                    </button>
                </div>

                <t-popup v-model="timePickerPopupVisible" placement="bottom" :attach="() => blacklistPopupContentRef"
                    :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>

        <t-dialog class="confirm-dialog" v-model:visible="removeBlacklistDialogVisible" :close-on-overlay-click="true"
            :confirm-btn="null" :cancel-btn="null" @confirm="handleRemoveBlacklistConfirm"
            @cancel="closeRemoveBlacklistDialog">
            <template #middle>
                <div class="logout-dialog-content">
                    <div class="logout-dialog-text">{{ t('确认要解除当前用户的拉黑状态吗？') }}</div>
                    <div class="logout-dialog-actions">
                        <button type="button" class="logout-dialog-button logout-dialog-button--cancel"
                            @click="closeRemoveBlacklistDialog">
                            {{ t('取消') }}
                        </button>
                        <button type="button" class="logout-dialog-button logout-dialog-button--confirm"
                            @click="handleRemoveBlacklistConfirm">
                            {{ t('确认解除') }}
                        </button>
                    </div>
                </div>
            </template>
        </t-dialog>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import pageBackIcon from '../../../../assets/icons/pageBack.svg';
import defaultAvatar from '../../../../assets/icons/defaultAvatar.svg';
import timeIcon from '../../ServiceRecord/time.svg';
import { onMounted, onUnmounted, ref, computed } from 'vue';
import dayjs from 'dayjs';
import AIDeskCoreInstance, { SESSION_TYPE, StoreName, type SessionTypeMap } from '@tencentcloud/ai-desk-core';
import toast from '../../../../utils/toast';
import { getLocalizedCountry, getLocalizedTimezone, getLocalizedUserLanguage } from '../../../../utils';

const router = useRouter();
const { t } = useI18n();
const currentSession = ref<SessionTypeMap[SESSION_TYPE] | null>(null);
const profileRemark = ref('');
const blacklistStatus = ref('正常');
const blacklistPopupVisible = ref(false);
const removeBlacklistDialogVisible = ref(false);
const blacklistPopupContentRef = ref<HTMLElement>();
const timePickerPopupVisible = ref(false);
const activeTimePickerField = ref<'start' | 'end'>('start');
const activeTimePickerTab = ref<'date' | 'time'>('date');
const timePickerPanelData = ref({
    date: '',
    time: '',
});
const chatWorkBenchShowUserIP = ref(0);
const imBlackUserEnable = ref(false);
const userIPLocation = ref('-');

type CurrentSessionData = {
    sessionId: string;
    sessionType: '';
    sessionData: null;
} | {
    [T in SESSION_TYPE]: {
        sessionId: string;
        sessionType: T;
        sessionData: SessionTypeMap[T];
    }
}[SESSION_TYPE];

type UserBlacklist = {
    startTime: number;
    endTime: number;
    blockType: number;
    reason: string;
};

type BlacklistDurationOptionValue = '1h' | '24h' | '7d' | 'custom';

type BlacklistBlockTypeValue = 1 | 2;

const blacklistDurationOptions: ReadonlyArray<{ label: string; value: BlacklistDurationOptionValue }> = [
    {
        label: t('1 小时'),
        value: '1h',
    },
    {
        label: t('24 小时'),
        value: '24h',
    },
    {
        label: t('7 天'),
        value: '7d',
    },
    {
        label: t('自定义'),
        value: 'custom',
    },
];

const blacklistBlockTypeOptions: ReadonlyArray<{ label: string; value: BlacklistBlockTypeValue }> = [
    {
        label: t('仅禁止使用人工服务'),
        value: 1,
    },
    {
        label: t('禁止使用机器人与人工服务'),
        value: 2,
    },
];

const getPresetEndTime = (startTime: number, durationType: Exclude<BlacklistDurationOptionValue, 'custom'>) => {
    const start = dayjs.unix(startTime);

    switch (durationType) {
        case '1h':
            return start.add(1, 'hour').unix();
        case '24h':
            return start.add(24, 'hour').unix();
        case '7d':
            return start.add(7, 'day').unix();
        default:
            return startTime;
    }
};

const createDefaultBlacklistDraft = () => {
    const startTime = dayjs().unix();

    return {
        durationType: '1h' as BlacklistDurationOptionValue,
        startTime,
        endTime: getPresetEndTime(startTime, '1h'),
        blockType: 1 as BlacklistBlockTypeValue,
        reason: '',
    };
};

const blacklistDraft = ref(createDefaultBlacklistDraft());

const getBlacklistStatusText = (userBlacklist?: UserBlacklist | null) => {
    if (!userBlacklist) {
        return '正常';
    }

    const currentTimestamp = Math.floor(Date.now() / 1000);

    if (currentTimestamp < userBlacklist.startTime) {
        return '即将拉黑';
    }

    if (currentTimestamp <= userBlacklist.endTime) {
        return '已拉黑';
    }

    return '正常';
};

const formatBlacklistTime = (timestamp?: number) => {
    if (!timestamp) {
        return '-';
    }

    return dayjs(timestamp * 1000).format('YYYY-MM-DD HH:mm:ss');
};

const formatUserIPLocation = (location?: { country?: string; province?: string }) => {
    return [location?.country, location?.province].filter(Boolean).join('') || '-';
};

const loadUserIPLocation = async () => {
    const sessionInfo = currentSession.value;

    if (chatWorkBenchShowUserIP.value !== 1 || !sessionInfo?.sessionId) {
        userIPLocation.value = '-';
        return;
    }

    try {
        const location = sessionInfo.userClientIP
            ? await AIDeskCoreInstance.sessionService.getUserIPLocation({
                userClientIP: sessionInfo.userClientIP,
            })
            : await AIDeskCoreInstance.sessionService.getUserIPLocation({
                sessionId: sessionInfo.sessionId,
            });

        userIPLocation.value = formatUserIPLocation(location);
    } catch (error) {
        console.error(error);
        userIPLocation.value = '-';
    }
};

const isBlacklisted = computed(() => blacklistStatus.value !== '正常');

const isCustomBlacklistDuration = computed(() => blacklistDraft.value.durationType === 'custom');

const blacklistActionText = computed(() => (isBlacklisted.value ? t('解除拉黑') : t('拉黑用户')));

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

const openBlacklistPopup = () => {
    blacklistDraft.value = createDefaultBlacklistDraft();
    blacklistPopupVisible.value = true;
};

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

const openRemoveBlacklistDialog = () => {
    removeBlacklistDialogVisible.value = true;
};

const closeRemoveBlacklistDialog = () => {
    removeBlacklistDialogVisible.value = false;
};

const handleToggleBlacklist = () => {
    if (!imBlackUserEnable.value) {
        return;
    }

    if (isBlacklisted.value) {
        openRemoveBlacklistDialog();
        return;
    }

    openBlacklistPopup();
};

const handleCancelBlacklist = () => {
    closeBlacklistPopup();
};

const handleConfirmBlacklist = async () => {
    if (!imBlackUserEnable.value) {
        closeBlacklistPopup();
        return;
    }

    if (blacklistDraft.value.durationType !== 'custom') {
        const currentTimestamp = dayjs().unix();
        blacklistDraft.value.startTime = currentTimestamp;
        blacklistDraft.value.endTime = getPresetEndTime(currentTimestamp, blacklistDraft.value.durationType);
    }

    const blacklistPayload = {
        beginTime: blacklistDraft.value.startTime,
        endTime: blacklistDraft.value.endTime,
        blockType: blacklistDraft.value.blockType,
        reason: blacklistDraft.value.reason.trim(),
    };
    try {
        if (currentSession.value?.userId)
            await AIDeskCoreInstance.sessionService.addBlacklist({ ...blacklistPayload, userId: currentSession.value?.userId });
    } catch (error) {
        return toast.error(t('拉黑失败'));
    }

    closeBlacklistPopup();
};

const handleRemoveBlacklistConfirm = async () => {
    if (!imBlackUserEnable.value) {
        closeRemoveBlacklistDialog();
        return;
    }

    const userId = currentSession.value?.userId;

    if (!userId) {
        closeRemoveBlacklistDialog();
        return;
    }

    try {
        await AIDeskCoreInstance.sessionService.removeBlacklist({ userId });
        closeRemoveBlacklistDialog();
    } catch (error) {
        toast.error(t('解除拉黑失败'));
    }
};

const selectBlacklistDuration = (value: BlacklistDurationOptionValue) => {
    blacklistDraft.value.durationType = value;

    if (value === 'custom') {
        return;
    }

    const currentTimestamp = dayjs().unix();
    blacklistDraft.value.startTime = currentTimestamp;
    blacklistDraft.value.endTime = getPresetEndTime(currentTimestamp, value);
};

const selectBlacklistBlockType = (value: BlacklistBlockTypeValue) => {
    blacklistDraft.value.blockType = value;
};

const getBlacklistTimeDisplay = (field: 'start' | 'end') => {
    const timestamp = field === 'start' ? blacklistDraft.value.startTime : blacklistDraft.value.endTime;
    return dayjs(timestamp * 1000).format('YYYY-MM-DD HH:mm:ss');
};

const openTimePicker = (field: 'start' | 'end') => {
    activeTimePickerField.value = field;
    activeTimePickerTab.value = 'date';

    const timestamp = field === 'start' ? blacklistDraft.value.startTime : blacklistDraft.value.endTime;
    timePickerPanelData.value.date = dayjs(timestamp * 1000).format('YYYY-MM-DD');
    timePickerPanelData.value.time = dayjs(timestamp * 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;
        return;
    }

    timePickerPanelData.value.time = value;
};

const handleTimePickerConfirmClick = () => {
    const nextTime = dayjs(`${timePickerPanelData.value.date} ${timePickerPanelData.value.time}`).unix();

    if (activeTimePickerField.value === 'start') {
        blacklistDraft.value.startTime = nextTime;
    } else {
        blacklistDraft.value.endTime = nextTime;
    }

    timePickerPopupVisible.value = false;
};

onMounted(() => {
    AIDeskCoreInstance.coreStore.watch(StoreName.SESSION, {
        currentSession: onCurrentSessionUpdated,
    });
    AIDeskCoreInstance.coreStore.watch(StoreName.APP_SETTING, {
        chatWorkBenchShowUserIP: onChatWorkBenchShowUserIPUpdated,
        imBlackUserEnable: onImBlackUserEnableUpdated,
    });
});

onUnmounted(() => {
    AIDeskCoreInstance.coreStore.unwatch(StoreName.SESSION, {
        currentSession: onCurrentSessionUpdated,
    });
    AIDeskCoreInstance.coreStore.unwatch(StoreName.APP_SETTING, {
        chatWorkBenchShowUserIP: onChatWorkBenchShowUserIPUpdated,
        imBlackUserEnable: onImBlackUserEnableUpdated,
    });
});

const onCurrentSessionUpdated = (session: CurrentSessionData) => {
    const sessionInfo = session.sessionData;
    currentSession.value = sessionInfo;

    if (sessionInfo?.type !== SESSION_TYPE.IM) {
        profileRemark.value = sessionInfo?.userMark || '';
        blacklistStatus.value = '正常';
        return;
    }

    profileRemark.value = sessionInfo.remark || '';
    blacklistStatus.value = getBlacklistStatusText(sessionInfo.userBlacklist);
};

const handleRemarkBlur = () => {
    const sessionInfo = currentSession.value;
    if (!sessionInfo) {
        return;
    }
    AIDeskCoreInstance.sessionService.setUserRemark({
        sessionId: sessionInfo.sessionId,
        remark: profileRemark.value,
    });
};

const onChatWorkBenchShowUserIPUpdated = (showUserIP: number) => {
    chatWorkBenchShowUserIP.value = showUserIP;

    if (showUserIP === 1) {
        loadUserIPLocation();
        return;
    }

    userIPLocation.value = '-';
};

const onImBlackUserEnableUpdated = (value: boolean) => {
    imBlackUserEnable.value = value ?? false;
    if (!imBlackUserEnable.value) {
        blacklistPopupVisible.value = false;
        removeBlacklistDialogVisible.value = false;
        timePickerPopupVisible.value = false;
    }
};

const profileAvatar = computed(() => currentSession.value?.avatar || defaultAvatar);

const profileNickname = computed(() => {
    return currentSession.value?.nickname || '-';
});

const profileChannelName = computed(() => currentSession.value?.channelName || '-');

const infoItems = computed(() => {
    const currentIMSession = currentSession.value?.type === SESSION_TYPE.IM
        ? currentSession.value
        : null;
    const blacklistInfo = currentIMSession?.userBlacklist;
    const baseItems = [
        {
            label: t('用户 ID'),
            value: currentSession.value?.userId || '-',
        },
        {
            label: t('用户昵称'),
            value: currentSession.value?.nickname || '-',
        },
        {
            label: t('用户来源'),
            value: currentSession.value?.channelName || '-',
        },
        {
            label: t('用户语言'),
            value: currentSession.value?.language ? getLocalizedUserLanguage(currentSession.value.language) : '-',
        },
        {
            label: t('用户地区'),
            value: currentIMSession?.country ? getLocalizedCountry(currentIMSession.country) : '-',
        },
        {
            label: t('用户时区'),
            value: currentIMSession?.timezone ? getLocalizedTimezone(currentIMSession.timezone) : '-',
        },
        ...(chatWorkBenchShowUserIP.value === 1
            ? [{
                label: t('用户IP'),
                value: userIPLocation.value,
            }]
            : []),
        ...(imBlackUserEnable.value
            ? [{
                label: t('拉黑状态'),
                value: t(blacklistStatus.value),
                className: blacklistStatus.value === '正常' ? 'info-value--normal' : 'info-value--danger',
            }]
            : []),
    ];

    if (!isBlacklisted.value || !blacklistInfo) {
        return baseItems;
    }

    return [
        ...baseItems,
        {
            label: t('拉黑开始'),
            value: formatBlacklistTime(blacklistInfo.startTime),
        },
        {
            label: t('拉黑结束'),
            value: formatBlacklistTime(blacklistInfo.endTime),
        },
        {
            label: t('拉黑原因'),
            value: blacklistInfo.reason || '-',
        },
    ];
});
</script>

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

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

.detail-page-main {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    box-sizing: border-box;
}

.detail-header {
    height: 56px;
    margin: -16px -16px 12px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    box-sizing: border-box;
}

.header-action,
.header-placeholder {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.header-action {
    padding: 0;
    border: none;
    border-radius: 16px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

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

.detail-title {
    flex: 1;
    text-align: center;
    color: #1d2129;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

.card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgb(15 23 42 / 6%);
}

.card+.card {
    margin-top: 12px;
}

.profile-card {
    padding: 18px 16px;
}

.profile-main {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.avatar {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #e8f3ff 0%, #d7e8ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-icon {
    width: 26px;
    height: 26px;
    fill: #1d2129;
}

.profile-info {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-name {
    min-width: 0;
    color: #1d2129;
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-channel {
    min-width: 0;
    color: #86909c;
    font-size: 13px;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.info-card {
    padding: 0 16px;
}

.info-row {
    min-height: 56px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f2f3f5;
}

.info-row:last-child {
    border-bottom: none;
}

.info-content {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    column-gap: 18px;
}

.info-label {
    color: #86909c;
    font-size: 14px;
    line-height: 22px;
}

.info-value {
    min-width: 0;
    color: #1d2129;
    font-size: 15px;
    line-height: 22px;
    word-break: break-all;
}

.info-value--normal {
    color: #09A768;
}

.info-value--danger {
    color: #E54545;
}

.remark-card {
    padding: 16px;
}

.remark-title {
    color: #1d2129;
    font-size: 15px;
    font-weight: 600;
    line-height: 22px;
}

.remark-textarea {
    width: 100%;
    min-height: 132px;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #e6e9f0;
    border-radius: 12px;
    background: #f7f8fa;
    color: #1d2129;
    font-size: 14px;
    line-height: 22px;
    resize: none;
    box-sizing: border-box;
}

.remark-textarea::placeholder {
    color: #b0b6bf;
}

.page-footer {
    padding: 12px 16px calc(24px + env(safe-area-inset-bottom));
    background: #fff;
    box-sizing: border-box;
    flex-shrink: 0;
}

.blacklist-button {
    width: 100%;
    height: 44px;
    border: none;
    border-radius: 22px;
    background: #1d2129;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}

.blacklist-button--danger {
    background: #c93439;
}

.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;
}

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

.skill-group-list--column {
    flex-direction: column;
    align-items: flex-start;
}

.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;
}

.skill-group-item--full {
    min-height: 44px;
    height: auto;
    padding: 12px 16px;
    justify-content: flex-start;
    text-align: left;
}

.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-icon {
    width: 16px;
    height: 16px;
    margin-left: 12px;
    flex-shrink: 0;
}

.blacklist-reason-textarea {
    width: 100%;
    min-height: 88px;
    margin-top: 12px;
    padding: 12px 16px;
    border: 1px solid #DCDFE5;
    border-radius: 16px;
    background: #FFFFFF;
    color: #1D2129;
    font-size: 14px;
    line-height: 22px;
    resize: none;
    box-sizing: border-box;
}

.blacklist-reason-textarea::placeholder {
    color: #86909C;
}

.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;
}

.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-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-label {
    font-size: 16px;
    line-height: 20px;
    flex-shrink: 0;
}

.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;
}

.logout-dialog-content {
    padding: 16px 16px 0;
}

.logout-dialog-text {
    color: #1d2129;
    font-size: 16px;
    line-height: 26px;
    text-align: left;
}

.logout-dialog-actions {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.logout-dialog-button {
    flex: 1;
    height: 40px;
    border: none;
    border-radius: 999px;
    font-size: 15px;
    line-height: 22px;
    cursor: pointer;
}

.logout-dialog-button--cancel {
    background: #F0F2F7;
    color: #000;
}

.logout-dialog-button--confirm {
    background: #000;
    color: #fff;
}
</style>