<template>
  <div class="ai-cs-root">
    <!-- 灵儿麋鹿角色 -->
    <div
      class="deer-wrap"
      :class="deerStateClass"
      @mouseenter="onDeerHover"
      @mouseleave="onDeerLeave"
      @click="togglePanel"
      role="button"
      aria-label="AI 客服灵儿"
    >
      <!-- 消息气泡 (alert 状态) -->
      <div class="deer-bubble">你好！有什么可以帮您？👋</div>

      <!-- ZZZ (idle 状态) -->
      <div class="zzz-overlay">
        <span class="z1">z</span>
        <span class="z2">z</span>
        <span class="z3">Z</span>
      </div>

      <!-- 思考点 (thinking 状态) -->
      <div class="think-dots-overlay">
        <span></span><span></span><span></span>
      </div>

      <!-- 鹿图片：hover 用眨眼版，其余用正常版 -->
      <img :src="deerImgSrc" class="deer-img" alt="灵儿" draggable="false" />
    </div>

    <!-- 客服中心弹窗 -->
    <transition name="ai-cs-fade">
      <div v-if="visible" class="ai-cs-overlay">
        <div class="ai-cs-panel">
          <header class="ai-cs-header">
            <div class="ai-cs-header-left">
              <h2 class="ai-cs-title">LinkMed 客服中心 - 智能客服灵儿为您服务</h2>
              <div class="ai-cs-header-links">
                <button class="ai-cs-header-link" type="button" @click="openHelp">帮助文档</button>
                <button class="ai-cs-header-link" type="button" @click="openVideo">上手视频</button>
                <button class="ai-cs-header-link" type="button" @click="openManual">使用手册</button>
              </div>
            </div>
            <button class="ai-cs-close" type="button" @click="closePanel" aria-label="关闭客服中心">✕</button>
          </header>

          <main class="ai-cs-main">
            <div class="ai-cs-sidebar">
              <div class="ai-cs-sidebar-item active">
                <i class="fas fa-home"></i>
                <span>首页</span>
              </div>
              <div class="ai-cs-sidebar-item">
                <i class="fas fa-book"></i>
                <span>文档</span>
              </div>
              <div class="ai-cs-sidebar-item">
                <i class="fas fa-video"></i>
                <span>视频</span>
              </div>
              <div class="ai-cs-sidebar-item">
                <i class="fas fa-cog"></i>
                <span>设置</span>
              </div>
            </div>
            <div class="ai-cs-content">
              <section class="ai-cs-welcome">
                <div class="ai-cs-welcome-icon">
                  <div class="ai-cs-welcome-circle"></div>
                </div>
                <div class="ai-cs-welcome-text">
                  <div class="ai-cs-welcome-title">你好，我是 LinkMed 客服助手灵儿</div>
                  <div class="ai-cs-welcome-desc">基于 LinkMed 的智能客服解决方案，为您提供专业的产品咨询与服务支持</div>
                </div>
              </section>

              <section class="ai-cs-columns">
                <div class="ai-cs-column">
                  <div class="ai-cs-column-header">
                    <span class="ai-cs-column-badge hot"></span>
                    <span class="ai-cs-column-title">热门问题</span>
                    <span class="ai-cs-column-subtitle">您想了解什么？</span>
                  </div>
                  <div class="ai-cs-card-list">
                    <button class="ai-cs-card-button" type="button">LinkMed 有哪些核心功能？</button>
                    <button class="ai-cs-card-button" type="button">如何注册和使用？</button>
                    <button class="ai-cs-card-button" type="button">价格和会员政策是什么？</button>
                  </div>
                </div>
                <div class="ai-cs-column">
                  <div class="ai-cs-column-header">
                    <span class="ai-cs-column-icon-guide">i</span>
                    <span class="ai-cs-column-title">使用指南</span>
                    <span class="ai-cs-column-subtitle">如何更好地使用？</span>
                  </div>
                  <div class="ai-cs-card-list">
                    <button class="ai-cs-card-button" type="button">数据安全如何保障？</button>
                    <button class="ai-cs-card-button" type="button">如何联系客服支持？</button>
                    <button class="ai-cs-card-button" type="button">如何反馈产品问题？</button>
                  </div>
                </div>
              </section>
            </div>
          </main>

          <footer class="ai-cs-footer">
            <div class="ai-cs-input-wrapper">
              <button
                class="ai-cs-input-voice"
                type="button"
                :class="{ recording: isRecording }"
                :title="isRecording ? '停止语音输入' : '开始语音输入'"
                @click="toggleVoiceInput"
              >
                <i v-if="isRecording" class="fas fa-stop"></i>
                <i v-else class="fas fa-microphone"></i>
              </button>
              <input
                v-model="inputContent"
                class="ai-cs-input"
                type="text"
                placeholder="请输入您的问题…"
                @keydown.enter.prevent="handleSend"
              />
              <button class="ai-cs-send" type="button" :disabled="!inputContent.trim()" @click="handleSend">发送</button>
            </div>
            <button class="ai-cs-call" type="button" title="发起语音通话" @click="handleVoiceCall">
              <i class="fas fa-phone"></i>
            </button>
          </footer>
        </div>
      </div>
    </transition>

    <HelpDocumentModal       :visible="helpVisible"   @back="onHelpBack" />
    <GettingStartedVideoModal :visible="videoVisible" @back="onVideoBack" />
    <UserManualModal          :visible="manualVisible" @back="onManualBack" />
  </div>
</template>

<script setup lang="ts">
import HelpDocumentModal from '@/components/CustomerService/HelpDocumentModal.vue';
import GettingStartedVideoModal from '@/components/CustomerService/GettingStartedVideoModal.vue';
import UserManualModal from '@/components/CustomerService/UserManualModal.vue';
import { useI18n } from 'vue-i18n';
import { ElMessage } from 'element-plus';
import { VolcAsrService } from '@/utils/volcAsr';

const { t } = useI18n();

const visible      = ref(false);
const helpVisible  = ref(false);
const videoVisible = ref(false);
const manualVisible = ref(false);

const inputContent = ref('');
const isRecording  = ref(false);
const isHovering   = ref(false);
const isAlert      = ref(false); // 新消息唤醒状态

let alertTimer: ReturnType<typeof setTimeout> | null = null;

// 状态优先级：thinking > alert > hover > idle
const deerStateClass = computed(() => {
  if (isRecording.value) return 'state-thinking';
  if (isAlert.value)     return 'state-alert';
  if (isHovering.value)  return 'state-hover';
  return 'state-idle';
});

// 眨眼版图片只在 hover 状态（非 alert/thinking）时显示
const deerImgSrc = computed(() =>
  isHovering.value && !isAlert.value && !isRecording.value
    ? '/lingling-wink.png'
    : '/lingling.png'
);

const onDeerHover = () => { isHovering.value = true; };
const onDeerLeave = () => { isHovering.value = false; };

// 打开面板时触发 alert 动画
const triggerAlert = () => {
  isAlert.value = true;
  if (alertTimer) clearTimeout(alertTimer);
  alertTimer = setTimeout(() => { isAlert.value = false; }, 2200);
};

// --- 语音 ---
let volcAsr: VolcAsrService | null = null;
let baseTextBeforeRecording = '';

const initVolcAsr = () => {
  volcAsr = new VolcAsrService({
    onResult: (text, isFinal) => {
      if (text) {
        inputContent.value = baseTextBeforeRecording + text;
        if (isFinal) baseTextBeforeRecording = inputContent.value;
      }
    },
    onError: (err: any) => {
      console.error('火山引擎 ASR 错误:', err);
      isRecording.value = false;
      inputContent.value = baseTextBeforeRecording;
      if (err?.message?.includes('Permission')) {
        ElMessage.error(t('workspace.speechPermissionDenied') || '麦克风访问权限被拒绝');
      } else {
        ElMessage.error(t('workspace.speechError') || '语音识别发生错误');
      }
    },
    onStart: () => { isRecording.value = true; baseTextBeforeRecording = inputContent.value; },
    onStop:  () => { isRecording.value = false; },
  });
};

const toggleVoiceInput = () => {
  if (isRecording.value) { volcAsr?.stop(); }
  else { if (!volcAsr) initVolcAsr(); volcAsr?.start(); }
};

const handleVoiceCall = () => { ElMessage.info('语音通话功能暂未接入后端接口'); };

const handleSend = () => {
  const content = inputContent.value.trim();
  if (!content) return;
  ElMessage.info('发送功能暂未接入后端接口');
  inputContent.value = '';
};

const togglePanel = () => {
  visible.value = !visible.value;
  if (visible.value) triggerAlert();
};

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

const openHelp   = () => { visible.value = false; helpVisible.value  = true; videoVisible.value = false; manualVisible.value = false; };
const onHelpBack = () => { helpVisible.value  = false; visible.value = true; };

const openVideo   = () => { visible.value = false; helpVisible.value = false; videoVisible.value  = true; manualVisible.value = false; };
const onVideoBack = () => { videoVisible.value  = false; visible.value = true; };

const openManual   = () => { visible.value = false; helpVisible.value = false; videoVisible.value = false; manualVisible.value = true; };
const onManualBack = () => { manualVisible.value = false; visible.value = true; };

onUnmounted(() => {
  if (isRecording.value) volcAsr?.stop();
  if (alertTimer) clearTimeout(alertTimer);
});
</script>

<style scoped>
/* ============================================================
   根容器
   ============================================================ */
.ai-cs-root {
  position: fixed;
  right: 20px;
  bottom: 100px;
  z-index: 4000;
  pointer-events: none;
}

/* ============================================================
   麋鹿包裹层
   ============================================================ */
.deer-wrap {
  pointer-events: auto;
  position: relative;
  width: 60px;
  cursor: pointer;
  user-select: none;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.18));
  transition: filter 0.2s;
}

.deer-wrap:hover {
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.28));
}

.deer-svg {
  width: 80px;
  height: auto;
  display: block;
}

/* ============================================================
   气泡
   ============================================================ */
.deer-bubble {
  position: absolute;
  bottom: 108%;
  left: 50%;
  transform: translateX(-50%) scale(0);
  transform-origin: bottom center;
  background: #ffffff;
  border-radius: 14px;
  padding: 8px 12px;
  font-size: 12px;
  color: #374151;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  opacity: 0;
  transition: none;
  pointer-events: none;
}

.deer-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #ffffff;
}

/* ============================================================
   鹿图片
   ============================================================ */
.deer-img {
  width: 60px;
  height: 60px;
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* 隐藏不再使用的 overlay */
.zzz-overlay,
.think-dots-overlay { display: none !important; }

/* hover 轻微放大 */
.deer-wrap:hover .deer-img {
  transform: scale(1.06);
  transition: transform 0.2s ease;
}


/* ============================================================
   弹窗部分（原有样式不变）
   ============================================================ */
.ai-cs-overlay {
  pointer-events: auto;
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.25);
  z-index: 3999;
}

.ai-cs-panel {
  width: 860px;
  max-width: calc(100vw - 60px);
  height: 560px;
  max-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.05);
}

.ai-cs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #f0f0f0;
  background: #ffffff;
}

.ai-cs-header-left { display: flex; align-items: center; gap: 16px; }

.ai-cs-title { margin: 0; font-size: 16px; font-weight: 500; color: #1a1a1a; }

.ai-cs-header-links { display: inline-flex; align-items: center; gap: 12px; }

.ai-cs-header-link {
  border: none;
  background: #f5f5f7;
  font-size: 12px;
  color: #666;
  padding: 6px 12px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s;
}
.ai-cs-header-link:hover { background: #e8e8ed; color: #333; }

.ai-cs-close {
  border: none; background: transparent; color: #999;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 18px;
  transition: all 0.2s;
}
.ai-cs-close:hover { background: #f5f5f7; color: #333; }

.ai-cs-main { flex: 1; display: flex; overflow: hidden; background: #ffffff; padding: 0; gap: 0; }

.ai-cs-sidebar {
  width: 180px;
  background: #f8f8f9;
  border-right: 1px solid #f0f0f0;
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-cs-sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 12px;
  color: #666;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.ai-cs-sidebar-item:hover {
  background: #f0f0f2;
  color: #1a1a1a;
}

.ai-cs-sidebar-item.active {
  background: #ffffff;
  color: #1a1a1a;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  font-weight: 500;
  border: 1px solid #e0e0e0;
}

.ai-cs-sidebar-item i {
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.ai-cs-content {
  flex: 1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow-y: auto;
}

.ai-cs-welcome {
  display: flex; align-items: center; gap: 20px;
  padding: 24px; border-radius: 20px;
  background: #ffffff;
  color: #1a1a1a;
  border: 1px solid #f0f0f0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}

.ai-cs-welcome-icon {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #f5f5f7;
  border: 1px solid #f0f0f0;
}

.ai-cs-welcome-circle {
  width: 40px; height: 40px; border-radius: 50%;
  background: #ffffff;
  border: 1px solid #e0e0e0;
}

.ai-cs-welcome-text { display: flex; flex-direction: column; gap: 8px; }
.ai-cs-welcome-title { font-size: 18px; font-weight: 600; color: #1a1a1a; }
.ai-cs-welcome-desc  { font-size: 14px; color: #666; line-height: 1.6; }

.ai-cs-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.ai-cs-column {
  background: #ffffff; border-radius: 16px;
  padding: 20px;
  border: 1px solid #f0f0f0;
  transition: all 0.3s;
}

.ai-cs-column:hover {
  border-color: #d0d0d0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.ai-cs-column-header { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }

.ai-cs-column-badge.hot { width: 8px; height: 8px; border-radius: 50%; background: #ff4d4f; }

.ai-cs-column-icon-guide {
  width: 20px; height: 20px; border-radius: 50%;
  background: #f5f5f7; color: #666;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
  border: 1px solid #e0e0e0;
}

.ai-cs-column-title    { font-size: 15px; font-weight: 600; color: #1a1a1a; }
.ai-cs-column-subtitle { font-size: 12px; color: #999; margin-left: auto; }

.ai-cs-card-list { display: flex; flex-direction: column; gap: 10px; }

.ai-cs-card-button {
  width: 100%; text-align: left; border-radius: 12px;
  border: 1px solid #f0f0f0; padding: 12px 16px;
  font-size: 14px; color: #444; background: #ffffff; cursor: pointer;
  transition: all 0.2s;
}
.ai-cs-card-button:hover { background: #f9fafb; border-color: #999; color: #1a1a1a; }

.ai-cs-footer {
  padding: 16px 24px; border-top: 1px solid #f0f0f0;
  background: #ffffff; display: flex; align-items: center; gap: 16px;
}

.ai-cs-input-wrapper {
  display: flex; align-items: center; gap: 12px;
  background: #ffffff; border-radius: 24px; padding: 8px 12px 8px 16px; flex: 1;
  border: 1px solid #e0e0e0;
  transition: all 0.2s;
}

.ai-cs-input-wrapper:focus-within {
  border-color: #1a1a1a;
}

.ai-cs-call {
  border: 1px solid #e0e0e0; background: #ffffff; color: #1a1a1a; font-size: 18px;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s;
}

.ai-cs-call:hover {
  background: #f5f5f7;
  border-color: #1a1a1a;
}

.ai-cs-input-voice { border: none; background: transparent; color: #999; font-size: 20px; width: 28px; text-align: center; cursor: pointer; transition: color 0.2s; }
.ai-cs-input-voice:hover { color: #1a1a1a; }
.ai-cs-input-voice.recording { color: #ff4d4f; }

.ai-cs-input { flex: 1; border: none; background: transparent; font-size: 14px; outline: none; color: #1a1a1a; }
.ai-cs-input::placeholder { color: #bfbfbf; }

.ai-cs-send {
  border: 1px solid #1a1a1a; background: #1a1a1a; color: #ffffff;
  font-size: 14px; font-weight: 500; padding: 8px 20px; border-radius: 20px; cursor: pointer;
  transition: all 0.2s;
}
.ai-cs-send:hover:not(:disabled) { background: #333; border-color: #333; }
.ai-cs-send:disabled { opacity: 0.3; cursor: not-allowed; border-color: #e0e0e0; background: #f5f5f7; color: #999; }

.ai-cs-fade-enter-active,
.ai-cs-fade-leave-active { transition: opacity 0.18s ease; }
.ai-cs-fade-enter-from,
.ai-cs-fade-leave-to { opacity: 0; }

@media (max-width: 1024px) {
  .ai-cs-root { right: 16px; bottom: 80px; }
  .ai-cs-panel { width: calc(100vw - 40px); max-height: calc(100vh - 40px); }
}

@media (max-width: 768px) {
  .ai-cs-root { right: 16px; bottom: 60px; }
  .ai-cs-panel { width: calc(100vw - 24px); max-height: calc(100vh - 24px); }
  .ai-cs-columns { grid-template-columns: 1fr; }
}
</style>