<template>
  <div class="central-input-container">
    <div class="input-wrapper">
      <!-- 输入区域 -->
      <div class="input-area">
        <textarea
          ref="inputRef"
          v-model="inputContent"
          :placeholder="placeholderText"
          class="central-input"
          :maxlength="4000"
          @keydown.enter.exact="handleEnterKey"
          @keydown.ctrl.enter="handleCtrlEnter"
          @keydown.meta.enter="handleCtrlEnter"
          @focus="handleFocus"
          @blur="handleBlur"
          rows="1"
          autocomplete="off"
          spellcheck="false"
        ></textarea>
      </div>

      <!-- 字数限制提示 -->
      <transition name="fade">
        <div v-if="inputContent.length >= 3600" class="limit-tip" :class="{ 'at-limit': inputContent.length >= 4000 }">
          <i class="fas fa-exclamation-triangle"></i>
          <span v-if="inputContent.length >= 4000">字数已达上限 4000</span>
          <span v-else>接近字数限制 (当前: {{ inputContent.length }}/4000)</span>
        </div>
      </transition>

      <!-- 工具按钮 -->
      <div class="controls-row">
        <div class="tool-buttons">
          <!-- 左侧工具按钮 -->
          <div class="left-tools">
            <!-- 暂时隐藏工具按钮 -->
          </div>

          <!-- 右侧工具按钮 -->
          <div class="right-tools">
            <button
              v-for="tool in rightTools"
              :key="tool.id"
              class="tool-btn"
              :class="{ 'recording': tool.id === 'voice-input' && isRecording }"
              :title="tool.id === 'voice-input' && isRecording ? t('workspace.stopRecording') : $t(tool.title)"
              @click="handleToolClick(tool.id)"
            >
              <i v-if="tool.id === 'voice-input' && isRecording" class="fas fa-stop"></i>
              <i v-else :class="tool.icon"></i>
            </button>
            <!-- 服务价格显示 -->
            <el-tooltip
              v-if="props.servicePrice !== null && beansBalance !== null"
              :content="`领医豆余额：${beansBalance}`"
              :effect="tooltipEffect"
              placement="top"
            >
              <div class="service-price">{{ props.servicePrice }}/领医豆</div>
            </el-tooltip>
            <div v-else-if="props.servicePrice !== null" class="service-price">
              {{ props.servicePrice }}/领医豆
            </div>
            <!-- 分隔线 -->
            <div class="separator"></div>
            <!-- 生成中显示中止按钮 -->
            <button
              v-if="loading"
              class="submit-btn stop-btn active"
              :title="t('chat.stop') || '停止'"
              @click="$emit('stop')"
            >
              <div class="stop-icon-square"></div>
            </button>
            <!-- 发送按钮 -->
            <button
              v-else
              class="submit-btn"
              :class="{ active: inputContent.trim() }"
              @click="handleSubmit"
              :disabled="!inputContent.trim()"
              :title="submitButtonTitle"
            >
              <i class="fas fa-paper-plane"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, nextTick, onMounted, onUnmounted } from "vue";
import { useI18n } from "vue-i18n";
import { useSettingsStore } from "@/stores/settings";
import { useSchedulesStore } from "@/stores/schedules";
import { useAppStore } from "@/stores/app";
import { usePayStore } from "@/stores/pay";
import { ElTooltip, ElMessage } from "element-plus";
import { VolcAsrService } from "@/utils/volcAsr";

const { t } = useI18n();
const settingsStore = useSettingsStore();
const schedulesStore = useSchedulesStore();
const appStore = useAppStore();
const payStore = usePayStore();

// Props
const props = defineProps<{
  loading?: boolean;
  servicePrice?: number | null;
}>();

// Emits
const emit = defineEmits<{
  (e: "submit", content: string): void;
  (e: "tab-change", tab: string): void;
  (e: "tool-click", toolId: string): void;
}>();

// 数据
const inputRef = ref<HTMLTextAreaElement | null>(null);
const inputContent = ref("");
const focused = ref(false);
const isProcessing = ref(false); // 内部状态锁，防止极速连点
// 从全局 payStore 中获取领医豆余额
const beansBalance = computed<number | null>(() => payStore.beansBalance);

// 从 store 中获取快捷键设置
const sendMessageShortcut = computed(() => {
  const shortcut =
    settingsStore.getShortcut("sendMessageShortcut") ||
    settingsStore.keyboardShortcuts?.sendMessageShortcut;
  if (shortcut && (shortcut === "Enter" || shortcut === "Ctrl+Enter")) {
    return shortcut;
  }
  return "Ctrl+Enter"; // 默认值
});

// 计算属性：根据快捷键设置返回对应的 placeholder
const placeholderText = computed(() => {
  const shortcut = sendMessageShortcut.value;
  if (shortcut === "Enter") {
    return t("workspace.inputPlaceholderEnter");
  } else {
    return t("workspace.inputPlaceholderCtrlEnter");
  }
});

// 计算属性：根据 startTask 的值返回不同的按钮标题
const submitButtonTitle = computed(() => {
  return schedulesStore.startTask
    ? t("workspace.createScheduledTask")
    : t("workspace.submitButtonTitle");
});

const tools = [
  {
    id: "voice-input",
    title: "workspace.toolVoiceInput",
    icon: "fas fa-microphone",
  },
];

// const leftTools = computed(() => tools.slice(0, 3));
const rightTools = computed(() => tools);

// 语音识别相关
const isRecording = ref(false);
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 insertNewline = (_e: KeyboardEvent) => {
  // enter换行 - 让浏览器处理默认的换行行为
};

// 处理 Enter 键
const handleEnterKey = (e: KeyboardEvent) => {
  if (sendMessageShortcut.value === "Enter") {
    e.preventDefault();
    handleSubmit();
  } else {
    // Ctrl+Enter 模式下，Enter 换行
    insertNewline(e);
  }
};

// 处理 Ctrl+Enter 键
const handleCtrlEnter = (e: KeyboardEvent) => {
  if (sendMessageShortcut.value === "Ctrl+Enter") {
    e.preventDefault();
    handleSubmit();
  } else {
    // Enter 模式下，Ctrl+Enter 换行
    insertNewline(e);
  }
};

const handleFocus = () => {
  focused.value = true;
};

const handleBlur = () => {
  focused.value = false;
};

const handleSubmit = async () => {
  if (!inputContent.value.trim() || props.loading || isProcessing.value) return;

  isProcessing.value = true;
  const content = inputContent.value.trim();

  try {
    emit("submit", content);
    inputContent.value = "";
    // 安全地重置textarea高度
    if (inputRef.value && inputRef.value.style) {
      inputRef.value.style.height = "auto";
    }
  } catch (error) {
    console.error("提交失败:", error);
    isProcessing.value = false;
  }
};

const adjustHeight = () => {
  const textarea = inputRef.value;
  if (textarea) {
    textarea.style.height = "auto";
    textarea.style.height = Math.min(textarea.scrollHeight, 200) + "px";
  }
};

const handleToolClick = (toolId: string) => {
  if (toolId === "voice-input") {
    toggleVoiceInput();
  } else {
    emit("tool-click", toolId);
  }
};

// 监听输入内容变化，自动调整高度
watch(inputContent, () => {
  nextTick(() => {
    adjustHeight();
  });
});

// 根据外部 loading 状态重置内部处理锁，确保一次只发送一个请求
watch(
  () => props.loading,
  (newVal) => {
    if (!newVal) {
      isProcessing.value = false;
    }
  },
);

// 加载快捷键设置
const loadShortcutSetting = async () => {
  try {
    // 如果 store 中没有数据，先获取
    if (
      !settingsStore.keyboardShortcuts?.sendMessageShortcut &&
      Object.keys(settingsStore.keyboardShortcuts).length === 0
    ) {
      await settingsStore.fetchKeyboardShortcuts();
    }
  } catch (error) {
    console.error("加载快捷键设置失败:", error);
  }
};

// 监听自定义事件（当用户在设置页面修改快捷键时）
const handleShortcutSettingChanged = () => {
  // 重新从 store 获取快捷键设置
  loadShortcutSetting();
};

// 根据主题动态设置 tooltip 的 effect
const tooltipEffect = computed<"dark" | "light">(() => {
  return appStore.theme === "dark" ? "dark" : "light";
});

onMounted(async () => {
  // 加载快捷键设置
  await loadShortcutSetting();

  // 监听自定义事件（同标签页内同步）
  window.addEventListener(
    "shortcutSettingChanged",
    handleShortcutSettingChanged,
  );

  // 安全地聚焦到输入框
  nextTick(() => {
    if (inputRef.value && inputRef.value.focus) {
      inputRef.value.focus();
    }
  });
});

onUnmounted(() => {
  if (isRecording.value) {
    volcAsr?.stop();
  }
  // 清理事件监听器
  window.removeEventListener(
    "shortcutSettingChanged",
    handleShortcutSettingChanged,
  );
});

// 暴露给父组件的方法
defineExpose({
  inputContent,
  inputRef,
});
</script>

<style scoped>
.central-input-container {
  width: 800px;
  max-width: 800px;
  margin: 0 auto;
}

.input-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border, #333);
  border-radius: 18px;
  padding: 12px 20px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 96px;
  max-height: 96px;
}

.input-wrapper:focus-within {
  border-color: #2871f6;
  box-shadow: 0 0 0 3px rgba(40, 113, 246, 0.1);
  transform: translateY(-1px);
}

.input-area {
  display: flex;
  align-items: flex-start;
  flex: 1;
}

.central-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--color-text, #eee);
  font-size: 14px;
  line-height: 1.5;
  resize: none;
  /* min-height: 80px; */
  max-height: 46px;
  font-family: inherit;
  padding: 0;
  margin: 0;
}

.central-input::placeholder {
  color: var(--color-text-secondary, #999);
  opacity: 0.7;
}

.submit-btn {
  width: 28px;
  height: 24px;
  border: none;
  border-radius: 3px;
  background: var(--color-border, #333);
  color: var(--color-text-secondary, #999);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.submit-btn:hover:not(:disabled) {
  background: #2871f6;
  color: #fff;
  transform: scale(1.05);
}

.submit-btn.active {
  background: #2871f6;
  color: #fff;
}

.submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.submit-btn i {
  font-size: 12px;
}

/* 字数限制提示样式 */
.limit-tip {
  position: absolute;
  bottom: 45px;
  right: 20px;
  background: rgba(40, 113, 246, 0.9);
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  pointer-events: none;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.limit-tip.at-limit {
  background: rgba(244, 67, 54, 0.9);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s, transform 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(5px);
}

/* 控制行样式 */
.controls-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 4px;
}

/* 工具按钮样式 */
.tool-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.left-tools {
  display: flex;
  gap: 4px;
}

.right-tools {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tool-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--color-secondary, #666);
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.tool-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

.tool-btn i {
  font-size: 14px;
  transition: all 0.2s ease;
}

.tool-btn:hover i {
  transform: scale(1.1);
}

.submit-btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: var(--color-bg-tertiary, #f4f4f4);
  color: var(--color-text-tertiary, #999);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.stop-btn {
  background: transparent !important;
  color: #1e70ff !important;
  border: 1px solid rgba(30, 112, 255, 0.3) !important;
  box-shadow: none !important;
}

.stop-btn:hover {
  background: rgba(30, 112, 255, 0.08) !important;
  border-color: #1e70ff !important;
  transform: scale(1.05);
}

.stop-icon-square {
  width: 10px;
  height: 10px;
  background: currentColor;
  border-radius: 1px;
}

.submit-btn:hover:not(:disabled) {
  background: var(--color-primary, #4179fc);
  color: #fff;
  transform: scale(1.1);
}

.submit-btn.active {
  background: var(--color-primary, #4179fc);
  color: #fff;
  box-shadow: 0 2px 8px rgba(65, 121, 252, 0.3);
}

.submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tool-btn.recording {
  background: rgba(244, 67, 54, 0.1);
  color: #f44336;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* 分隔线样式 */
.separator {
  width: 1px;
  height: 18px;
  background: var(--color-border, #333);
  margin: 0 4px;
}

/* 服务价格样式 */
.service-price {
  font-size: 12px;
  color: var(--color-text-secondary, #999);
  padding: 2px 4px;
  border: 1px solid var(--color-border, #333);
  border-radius: 4px;
  white-space: nowrap;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .central-input-container {
    max-width: 100%;
  }

  .input-wrapper {
    padding: 10px 12px;
    border-radius: 12px;
  }

  .central-input {
    font-size: 15px;
  }

  .submit-btn {
    width: 36px;
    height: 36px;
    margin-left: 8px;
  }
}

@media (max-width: 480px) {
  .input-wrapper {
    padding: 8px 10px;
    border-radius: 10px;
  }

  .central-input {
    font-size: 14px;
  }

  .submit-btn {
    width: 32px;
    height: 32px;
    margin-left: 6px;
  }

  .submit-btn i {
    font-size: 14px;
  }
}
</style>