<script setup lang="ts">
//! 空状态 — 抽自 MessageList.vue(零行为变更)。
//!
//! 职责:消息列表为空时的引导 UI。
//! - 无 provider:警告图标 + 跳 Settings 按钮(emit 'go-to-settings')
//! - 有 provider:欢迎文案 + 示例问题卡片(emit 'send-example-prompt')
//!
//! 父组件注入:
//! - hasProvider:是否有可用 provider(决定显哪个分支)
//! - send-example-prompt(i18nKey):点击示例问题卡片
//! - go-to-settings:无 provider / 跳 Settings

defineProps<{
  /** 是否有可用 provider(显无 provider 引导 or 示例问题卡片) */
  hasProvider: boolean
}>()

const emit = defineEmits<{
  (e: 'send-example-prompt', i18nKey: string): void
  (e: 'go-to-settings'): void
}>()

// ── UX-2025-20: 空状态示例问题 ──
// 示例问题卡片(点击自动填入并发送);文案走 i18n key 数组,模板按 key 翻译。
const examplePrompts = [
  'aiChat.examplePrompt1',
  'aiChat.examplePrompt2',
  'aiChat.examplePrompt3',
  'aiChat.examplePrompt4',
] as const
</script>

<template>
  <div class="ai-empty">
    <template v-if="!hasProvider">
      <div class="ai-empty-icon">
        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="var(--df-warning)" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
      </div>
      <p class="ai-empty-text">{{ $t('aiChat.emptyNoProvider') }}</p>
      <p class="ai-empty-sub">{{ $t('aiChat.emptyNoProviderHint') }}</p>
      <!-- 跳 Settings:嵌入模式用 router.push;分离窗口无 Settings 路由,降级 toast 提示去主窗口 -->
      <button class="ai-empty-action" @click="emit('go-to-settings')">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
        <span>{{ $t('aiChat.goToSettings') }}</span>
      </button>
    </template>
    <template v-else>
      <div class="ai-empty-icon">
        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="var(--df-text-dim)" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a7 7 0 014 12.74V17a1 1 0 01-1 1H9a1 1 0 01-1-1v-2.26A7 7 0 0112 2z"/><line x1="9" y1="21" x2="15" y2="21"/></svg>
      </div>
      <p class="ai-empty-text">{{ $t('aiChat.emptyTitle') }}</p>
      <p class="ai-empty-sub">{{ $t('aiChat.emptyHint') }}</p>
      <!-- UX-2025-20: 示例问题卡片(点击自动填入并发送) -->
      <div class="ai-empty-prompts">
        <button
          v-for="(prompt, i) in examplePrompts"
          :key="i"
          class="ai-empty-prompt"
          @click="emit('send-example-prompt', prompt)"
        >{{ $t(prompt) }}</button>
      </div>
    </template>
  </div>
</template>

<style scoped>
/* -- Empty State -- */
.ai-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.ai-empty-icon { margin-bottom: 4px; opacity: 0.4; }
.ai-empty-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--df-text-secondary);
}
.ai-empty-sub {
  font-size: 12px;
  color: var(--df-text-dim);
  text-align: center;
  line-height: 1.5;
}
/* UX-2025-20: 无 provider 引导 — 跳 Settings 按钮(克制:边框线 + accent 文字,不喧宾) */
.ai-empty-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 4px 12px;
  border: 0.5px solid var(--df-accent);
  border-radius: var(--df-radius);
  background: var(--df-accent-bg);
  color: var(--df-accent);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: filter 0.15s var(--df-ease);
}
.ai-empty-action:hover { filter: brightness(1.08); }
/* UX-2025-20 §7.3: 示例问题卡片网格(2 列,轻量;复用 .ai-* 卡片风格) */
.ai-empty-prompts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 100%;
  max-width: 360px;
  margin-top: 10px;
}
.ai-empty-prompt {
  padding: 8px 10px;
  border: 0.5px solid var(--df-border);
  border-radius: var(--df-radius);
  background: var(--df-bg-card);
  color: var(--df-text-secondary);
  font-size: 11.5px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  opacity: 0.85;
  transition: all 0.15s var(--df-ease);
}
.ai-empty-prompt:hover {
  border-color: var(--df-accent);
  color: var(--df-text);
  opacity: 1;
  background: color-mix(in srgb, var(--df-accent) 8%, var(--df-bg-card));
}
</style>
