<script setup>
import { useNamespace, useLocale } from "@yh-ui/hooks";
import { computed, watch } from "vue";
import { YhIcon } from "../../icon";
import { aiThinkingProps, aiThinkingEmits } from "./ai-thinking";
import { useComponentTheme } from "@yh-ui/theme";
defineOptions({
  name: "YhAiThinking"
});
const props = defineProps(aiThinkingProps);
const emit = defineEmits(aiThinkingEmits);
const ns = useNamespace("ai-thinking");
const { t } = useLocale();
const { themeStyle } = useComponentTheme("ai-thinking", props.themeOverrides);
const isExpanded = computed({
  get: () => props.modelValue,
  set: (val) => emit("update:modelValue", val)
});
const displayTitle = computed(() => {
  if (props.title) return props.title;
  switch (props.status) {
    case "start":
      return t("ai.thinking.start");
    case "thinking":
      return t("ai.thinking.thinking");
    case "end":
      return t("ai.thinking.complete");
    case "error":
      return t("ai.thinking.error");
    default:
      return t("ai.thinking.thinking");
  }
});
const statusIcon = computed(() => {
  switch (props.status) {
    case "start":
      return "loading";
    case "thinking":
      return "loading";
    case "end":
      return "check-circle";
    case "error":
      return "circle-close";
    default:
      return "loading";
  }
});
watch(
  () => props.status,
  (newStatus) => {
    if (props.autoCollapse && newStatus === "end") {
      isExpanded.value = false;
    }
  }
);
const toggleExpand = () => {
  isExpanded.value = !isExpanded.value;
};
</script>

<template>
  <div
    :class="[ns.b(), ns.m(status), ns.is('expanded', isExpanded), className, classNames?.root || '']"
    :style="[themeStyle, style, styles?.root || {}]"
  >
    <div
      :class="[ns.e('header'), classNames?.header || '']"
      :style="styles?.header || {}"
      @click="toggleExpand"
    >
      <div :class="[ns.e('icon-wrapper'), classNames?.icon || '']" :style="styles?.icon || {}">
        <YhIcon
          :name="statusIcon"
          :class="[
            ns.e('status-icon'),
            { 'is-loading': status === 'thinking' || status === 'start' }
          ]"
        />
      </div>
      <div :class="[ns.e('title'), classNames?.title || '']" :style="styles?.title || {}">
        {{ displayTitle }}
      </div>
      <YhIcon
        name="arrow-down"
        :class="[ns.e('arrow'), {
  'is-expanded': isExpanded
}, classNames?.arrow || '']"
        :style="styles?.arrow || {}"
      />
    </div>

    <div
      v-show="isExpanded && ($slots.default || content)"
      :class="[ns.e('body'), classNames?.body || '']"
      :style="styles?.body || {}"
    >
      <div :class="[ns.e('content'), classNames?.content || '']" :style="styles?.content || {}">
        <slot>{{ content }}</slot>
      </div>
    </div>
  </div>
</template>

<style>
@charset "UTF-8";
/**
 * YH-UI Sass Variables
 * 原具体的 CSS 变量输出规则 (:root, html.dark 等) 已移至 root.scss，以防止各组件样式编译时产生重复的全局变量 CSS 冗余。
 */
.yh-ai-thinking {
  margin: 10px 0;
  border-radius: 8px;
  background-color: var(--yh-fill-color-light);
  border: 1px solid transparent;
  width: fit-content;
  max-width: 100%;
  transition: all 0.3s ease;
}
.yh-ai-thinking--error {
  background-color: var(--yh-color-danger-light-9);
  border-color: var(--yh-color-danger-light-7);
}
.yh-ai-thinking--error .yh-ai-thinking__status-icon {
  color: var(--yh-color-danger);
}

.yh-ai-thinking__header {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  color: var(--yh-text-color-regular);
  user-select: none;
  transition: color 0.2s;
}
.yh-ai-thinking__header:hover {
  color: var(--yh-color-primary);
}

.yh-ai-thinking__icon-wrapper {
  margin-right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yh-ai-thinking__status-icon {
  font-size: 16px;
  color: var(--yh-color-primary);
}
.yh-ai-thinking__status-icon.is-loading {
  animation: yh-spin 1.2s linear infinite;
}

.yh-ai-thinking__title {
  font-weight: 500;
  flex: 1;
  margin-right: 8px;
}

.yh-ai-thinking__arrow {
  font-size: 12px;
  color: var(--yh-text-color-secondary);
  transition: transform 0.3s;
}
.yh-ai-thinking__arrow.is-expanded {
  transform: rotate(180deg);
}

.yh-ai-thinking__body {
  padding: 0 12px 12px;
  animation: yh-fade-in 0.3s ease;
}

.yh-ai-thinking__content {
  font-size: 13px;
  color: var(--yh-text-color-secondary);
  line-height: 1.6;
  background: var(--yh-fill-color-blank);
  padding: 10px;
  border-radius: 6px;
  border: 1px dashed var(--yh-border-color-lighter);
  white-space: pre-wrap;
}

@keyframes yh-spin {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes yh-fade-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
