<template>
  <div :class="[ns.b(), ns.m(props.layout)]" :style="themeStyle">
    <!-- Title Section -->
    <div v-if="title || $slots.title" :class="ns.e('header')">
      <slot name="title">
        <span :class="ns.e('title')">{{ title }}</span>
      </slot>
    </div>

    <!-- Prompts Grid/List -->
    <div :class="ns.e('list')">
      <div
        v-for="(item, index) in items"
        :key="typeof item === 'string' ? index : item.id || index"
        :class="ns.e('item')"
        @click="handleClick(item)"
      >
        <slot name="item" :item="item" :index="index">
          <div :class="ns.e('item-inner')">
            <span v-if="typeof item === 'object' && item.icon" :class="ns.e('icon')">
              <slot name="icon" :icon="item.icon">
                <i :class="item.icon"></i>
              </slot>
            </span>
            <div :class="ns.e('content')">
              <span :class="ns.e('text')">{{
                typeof item === "string" ? item : item.content
              }}</span>
              <span
                v-if="typeof item === 'object' && item.description"
                :class="ns.e('description')"
              >
                {{ item.description }}
              </span>
            </div>

            <div :class="ns.e('arrow')">
              <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path d="M5 12h14"></path>
                <path d="m12 5 7 7-7 7"></path>
              </svg>
            </div>
          </div>
        </slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useNamespace } from "@yh-ui/hooks";
import { useComponentTheme } from "@yh-ui/theme";
import { aiPromptsProps, aiPromptsEmits } from "./ai-prompts";
defineOptions({
  name: "YhAiPrompts"
});
const props = defineProps(aiPromptsProps);
const emit = defineEmits(aiPromptsEmits);
const ns = useNamespace("ai-prompts");
const { themeStyle } = useComponentTheme("ai-prompts", props.themeOverrides);
const handleClick = (item) => {
  emit("click", item);
};
</script>

<style>
@charset "UTF-8";
/**
 * YH-UI Sass Variables
 * 原具体的 CSS 变量输出规则 (:root, html.dark 等) 已移至 root.scss，以防止各组件样式编译时产生重复的全局变量 CSS 冗余。
 */
.yh-ai-prompts {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.yh-ai-prompts__header {
  font-size: var(--yh-ai-prompts-header-font-size, 14px);
  font-weight: 500;
  color: var(--yh-text-color-primary);
}

.yh-ai-prompts__list {
  display: flex;
  gap: 12px;
}

.yh-ai-prompts__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border: 1px solid var(--yh-ai-prompts-border-color, var(--yh-border-color));
  border-radius: var(--yh-ai-prompts-border-radius, var(--yh-border-radius-base));
  background-color: var(--yh-ai-prompts-bg-color, var(--yh-bg-color));
  cursor: pointer;
  transition: all var(--yh-transition-duration);
  min-height: var(--yh-ai-prompts-item-min-height, 48px);
}
.yh-ai-prompts__item:hover {
  border-color: var(--yh-ai-prompts-active-border-color, var(--yh-color-primary));
  background-color: var(--yh-ai-prompts-item-hover-bg-color, var(--yh-color-primary-light-9));
  color: var(--yh-ai-prompts-hover-text-color, var(--yh-color-primary));
}
.yh-ai-prompts__item:hover .yh-ai-prompts__arrow {
  transform: translateX(4px);
  opacity: 1;
}

.yh-ai-prompts__item-inner {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 12px;
}

.yh-ai-prompts__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 4px;
}

.yh-ai-prompts__text {
  font-size: 14px;
  color: var(--yh-text-color-regular);
  line-height: 1.4;
}

.yh-ai-prompts__description {
  font-size: 12px;
  color: var(--yh-text-color-placeholder);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.yh-ai-prompts__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--yh-ai-prompts-icon-size, 20px);
  color: var(--yh-ai-prompts-icon-color, var(--yh-color-primary));
}

.yh-ai-prompts__arrow {
  display: flex;
  align-items: center;
  color: var(--yh-text-color-secondary);
  opacity: 0.6;
  transition: all var(--yh-transition-duration);
}
.yh-ai-prompts__arrow svg {
  width: 16px;
  height: 16px;
}

.yh-ai-prompts {
  /* Modifiers */
}
.yh-ai-prompts--horizontal .yh-ai-prompts__list {
  flex-direction: row;
  flex-wrap: wrap;
}
.yh-ai-prompts--horizontal .yh-ai-prompts__item {
  flex: 1;
  min-width: 200px;
}

.yh-ai-prompts--vertical .yh-ai-prompts__list {
  flex-direction: column;
}
.yh-ai-prompts--vertical .yh-ai-prompts__item {
  width: 100%;
}

.yh-ai-prompts--waterfall .yh-ai-prompts__list {
  flex-direction: row;
  flex-wrap: wrap;
}
.yh-ai-prompts--waterfall .yh-ai-prompts__item {
  width: auto;
  min-width: fit-content;
  max-width: 100%;
}
.yh-ai-prompts--waterfall .yh-ai-prompts__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
