C2CSettingState

<template>
  <div class="c2c-chat-setting">
    <!-- 用户信息卡片 -->
    <div class="user-card">
      <div class="user-avatar">
        <img
          :src="avatar"
          :alt="displayName"
          class="avatar-image"
        >
      </div>

      <div class="user-info">
        <h2 class="user-name">
          {{ displayName }}
        </h2>
        <p class="user-id">
          ID: {{ userID }}
        </p>
        <p v-if="signature" class="user-signature">
          {{ signature }}
        </p>
        <div class="contact-status">
          <span class="status-badge" :class="contactStatusClass">
            {{ contactStatusText }}
          </span>
        </div>
      </div>
    </div>

    <!-- 备注设置 -->
    <div class="setting-section">
      <h3 class="section-title">
        Remark Setting
      </h3>
      <div class="remark-setting">
        <div class="input-group">
          <label for="remark">remark：</label>
          <input
            id="remark"
            v-model="remarkInput"
            type="text"
            placeholder="enter your remark"
            maxlength="20"
            class="remark-input"
          >
          <button
            :disabled="!remarkInput.trim() || remarkInput === remark"
            class="save-btn"
            @click="handleSaveRemark"
          >
            Save
          </button>
        </div>
        <p v-if="remark" class="current-remark">
          current remark：<strong>{{ remark }}</strong>
        </p>
      </div>
    </div>

    <!-- 聊天设置 -->
    <div class="setting-section">
      <h3 class="section-title">
        Chat Setting
      </h3>

      <!-- 置顶设置 -->
      <div class="setting-item">
        <div class="setting-info">
          <span class="setting-label">Pin</span>
          <span class="setting-desc">The chat will be displayed at the top of the list after being pinned</span>
        </div>
        <label class="switch">
          <input
            type="checkbox"
            :checked="isPinned"
            @change="handlePinnedChange"
          >
          <span class="switch-slider" />
        </label>
      </div>

      <!-- 免打扰设置 -->
      <div class="setting-item">
        <div class="setting-info">
          <span class="setting-label">Mute</span>
          <span class="setting-desc">After being muted, you will not receive messages from this chat</span>
        </div>
        <label class="switch">
          <input
            type="checkbox"
            :checked="isMuted"
            @change="handleMutedChange"
          >
          <span class="switch-slider" />
        </label>
      </div>
    </div>

    <!-- 快速操作 -->
    <div class="setting-section">
      <h3 class="section-title">
        Quick Actions
      </h3>
      <div class="quick-actions">
        <button
          class="action-btn work-mode"
          :class="{ active: isWorkMode }"
          @click="setWorkMode"
        >
          <span class="btn-icon">💼</span>
          <span class="btn-text">Work Mode</span>
          <span class="btn-desc">Pinned + Mute</span>
        </button>

        <button
          class="action-btn normal-mode"
          :class="{ active: isNormalMode }"
          @click="setNormalMode"
        >
          <span class="btn-icon">💬</span>
          <span class="btn-text">Normal Mode</span>
          <span class="btn-desc">Receive messages normally</span>
        </button>

        <button
          class="action-btn important-mode"
          :class="{ active: isImportantMode }"
          @click="setImportantMode"
        >
          <span class="btn-icon">⭐</span>
          <span class="btn-text">Important Contact</span>
          <span class="btn-desc">Only display at the top</span>
        </button>
      </div>
    </div>

    <!-- 操作反馈 -->
    <div
      v-if="feedbackMessage"
      class="feedback-message"
      :class="feedbackType"
    >
      {{ feedbackMessage }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { useC2CSettingState } from '@tencentcloud/chat-uikit-vue3';

// 使用 C2C 设置状态
const {
  userID,
  nick,
  avatar,
  signature,
  remark,
  isMuted,
  isPinned,
  isContact,
  setChatPinned,
  setChatMuted,
  setUserRemark,
} = useC2CSettingState();

// 本地状态
const remarkInput = ref('');
const feedbackMessage = ref('');
const feedbackType = ref<'success' | 'error' | 'info'>('info');

// 计算属性
const displayName = computed(() => remark.value || nick.value || 'unknown user');

const contactStatusClass = computed(() => isContact.value ? 'friend' : 'stranger');

const contactStatusText = computed(() => isContact.value ? 'Friend' : 'Stranger');

// 模式判断
const isWorkMode = computed(() => isPinned.value && isMuted.value);

const isNormalMode = computed(() => !isPinned.value && !isMuted.value);

const isImportantMode = computed(() => isPinned.value && !isMuted.value);

// 监听备注变化
watch(remark, (newRemark) => {
  remarkInput.value = newRemark || '';
}, { immediate: true });

// 显示反馈消息
const showFeedback = (message: string, type: 'success' | 'error' | 'info' = 'info') => {
  feedbackMessage.value = message;
  feedbackType.value = type;

  setTimeout(() => {
    feedbackMessage.value = '';
  }, 3000);
};

// 事件处理
const handleSaveRemark = () => {
  const newRemark = remarkInput.value.trim();
  if (!newRemark) {
    showFeedback('Please enter the remark name', 'error');
    return;
  }

  if (newRemark === remark.value) {
    showFeedback('The remark name has not changed', 'info');
    return;
  }

  try {
    setUserRemark(newRemark);
    showFeedback(`The remark has been updated to: ${newRemark}`, 'success');
  } catch (error) {
    showFeedback('The remark update failed, please try again', 'error');
  }
};

const handlePinnedChange = (event: Event) => {
  const target = event.target as HTMLInputElement;
  try {
    setChatPinned(target.checked);
    showFeedback(target.checked ? 'The chat has been pinned' : 'The chat has been unpinned', 'success');
  } catch (error) {
    showFeedback('The pinned setting failed, please try again', 'error');
  }
};

const handleMutedChange = (event: Event) => {
  const target = event.target as HTMLInputElement;
  try {
    setChatMuted(target.checked);
    showFeedback(target.checked ? 'The chat has been muted' : 'The chat has been unmuted', 'success');
  } catch (error) {
    showFeedback('The muted setting failed, please try again', 'error');
  }
};

// 快速模式设置
const setWorkMode = () => {
  try {
    setChatPinned(true);
    setChatMuted(true);
    showFeedback('The chat has been switched to work mode', 'success');
  } catch (error) {
    showFeedback('The work mode setting failed, please try again', 'error');
  }
};

const setNormalMode = () => {
  try {
    setChatPinned(false);
    setChatMuted(false);
    showFeedback('The chat has been switched to normal mode', 'success');
  } catch (error) {
    showFeedback('The normal mode setting failed, please try again', 'error');
  }
};

const setImportantMode = () => {
  try {
    setChatPinned(true);
    setChatMuted(false);
    showFeedback('The chat has been set as an important contact', 'success');
  } catch (error) {
    showFeedback('The important contact setting failed, please try again', 'error');
  }
};
</script>