<script setup>
import { ref, computed, watch } from "vue";
import { useNamespace } from "@yh-ui/hooks";
import { useComponentTheme } from "@yh-ui/theme";
import { YhTooltip } from "../../tooltip";
import { YhIcon } from "../../icon";
import { popoverProps, popoverEmits } from "./popover";
defineOptions({
  name: "YhPopover"
});
const props = defineProps(popoverProps);
const emit = defineEmits(popoverEmits);
const ns = useNamespace("popover");
const { themeStyle } = useComponentTheme(
  "popover",
  computed(() => props.themeOverrides)
);
const internalVisible = ref(false);
const visible = computed({
  get: () => props.visible !== null ? props.visible : internalVisible.value,
  set: (val) => {
    if (props.visible !== null) {
      emit("update:visible", val);
      return;
    }
    internalVisible.value = val;
    emit("update:visible", val);
  }
});
const tooltipRef = ref(null);
const triggerWidth = ref("auto");
const contentStyle = computed(() => {
  const styles = {
    ...themeStyle.value
  };
  if (props.matchTriggerWidth) {
    styles.width = triggerWidth.value;
  } else if (props.width !== "auto") {
    styles.width = typeof props.width === "number" ? `${props.width}px` : props.width;
  }
  if (props.maxHeight !== "none") {
    styles.maxHeight = typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight;
    styles.overflowY = props.scrollable ? "auto" : "hidden";
  }
  return styles;
});
const updateTriggerWidth = () => {
  if (props.matchTriggerWidth && tooltipRef.value?.triggerRef) {
    const width = tooltipRef.value.triggerRef.offsetWidth;
    triggerWidth.value = `${width}px`;
  }
};
const handleShow = () => {
  updateTriggerWidth();
  emit("show");
};
const handleHide = () => {
  emit("hide");
};
watch(
  () => props.matchTriggerWidth,
  (val) => {
    if (val) updateTriggerWidth();
  }
);
defineExpose({
  /** 手动控制可见性 */
  toggle: (val) => visible.value = val,
  /** 弹出状态 */
  visible
});
</script>

<template>
  <YhTooltip
    ref="tooltipRef"
    v-model:visible="visible"
    :class="ns.b()"
    :trigger="trigger"
    :placement="placement"
    :disabled="disabled"
    :show-arrow="showArrow"
    :show-after="showAfter"
    :hide-after="hideAfter"
    :offset="offset"
    :z-index="zIndex"
    :effect="effect"
    :teleported="teleported"
    :transition="transition"
    :persistent="persistent"
    :interactive="interactive"
    :popper-class="`${ns.e('popper')} ${popperClass}`"
    :popper-style="popperStyle"
    @show="handleShow"
    @hide="handleHide"
  >
    <!-- 默认插槽：触发元素 -->
    <slot />

    <template #content>
      <div :class="ns.e('content')" :style="contentStyle">
        <!-- 核心内容区 (支持 Icon 侧边对齐) -->
        <div :class="[ns.e('main'), ns.is('has-icon', !!icon || !!$slots.icon)]">
          <!-- 侧边图标栏 -->
          <div v-if="icon || $slots.icon" :class="ns.e('icon')" :style="{
  color: iconColor
}">
            <slot name="icon">
              <YhIcon :name="icon" />
            </slot>
          </div>

          <!-- 文本内容区 (强制对齐) -->
          <div :class="ns.e('inner')">
            <!-- 头部/标题 -->
            <div v-if="title || $slots.header" :class="ns.e('header')">
              <slot name="header">
                <div :class="ns.e('title')">{{ title }}</div>
              </slot>
            </div>

            <!-- 主体内容 -->
            <div :class="ns.e('body')">
              <slot name="content">
                <div v-if="description" :class="ns.e('description')">{{ description }}</div>
                <template v-if="content">{{ content }}</template>
                <slot v-else />
              </slot>
            </div>
          </div>
        </div>

        <!-- 底部插槽 -->
        <div v-if="$slots.footer" :class="ns.e('footer')">
          <slot name="footer" />
        </div>
      </div>
    </template>
  </YhTooltip>
</template>

<style>
@charset "UTF-8";
/**
 * YH-UI Sass Variables
 * 原具体的 CSS 变量输出规则 (:root, html.dark 等) 已移至 root.scss，以防止各组件样式编译时产生重复的全局变量 CSS 冗余。
 */
/* 
  YH-Popover 深度布局优化与主题自适应
  自动感知 html.dark 环境变色
*/
.yh-popover__popper.yh-tooltip__popper {
  border-radius: var(--yh-radius-lg);
  box-shadow: var(--yh-shadow-lg);
  max-width: 400px;
  /* 自动感应暗黑模式阴影 */
}
:root.dark .yh-popover__popper.yh-tooltip__popper, html.dark .yh-popover__popper.yh-tooltip__popper, body.dark .yh-popover__popper.yh-tooltip__popper {
  box-shadow: var(--yh-shadow-xl);
}
.yh-popover__popper.yh-tooltip__popper .yh-tooltip__content {
  padding: 0;
}

.yh-popover__content {
  display: block;
  box-sizing: border-box;
  padding: 24px 28px;
  min-width: 240px;
  color: inherit;
}

.yh-popover__main {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.yh-popover__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.yh-popover__icon {
  font-size: 22px;
  line-height: 1.4;
  flex-shrink: 0;
  margin-top: 2px;
}

.yh-popover__header {
  margin-bottom: 8px;
}

.yh-popover__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: inherit;
}

.yh-popover__body {
  font-size: 14px;
  line-height: 1.65;
  opacity: 0.9;
  color: inherit;
}

.yh-popover__footer {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 动画系统同步 */
.yh-popover-fade-enter-active,
.yh-popover-fade-leave-active {
  transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.yh-popover-fade-enter-from,
.yh-popover-fade-leave-to {
  opacity: 0;
  transform: scale(0.97) translateY(6px);
}
</style>
