<template>
  <div class="chat-preview">
    <div class="chat-preview__body">
      <div ref="mainRef" class="chat-preview__main">
        <div class="chat-preview__demo-badge">
          <span class="chat-preview__demo-dot" />
          样例预览 · 组件展示
        </div>
        <component :is="scenes[activeScene].component" />
      </div>
    </div>

    <div class="chat-preview__scenes">
      <span class="chat-preview__scenes-label">场景</span>
      <button
        v-for="(scene, idx) in scenes"
        :key="scene.id"
        class="chat-preview__scene-btn"
        :class="{ 'chat-preview__scene-btn--active': activeScene === idx }"
        @click="setScene(idx)"
      >
        {{ idx + 1 }}. {{ scene.label }}
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, markRaw, onMounted, onUnmounted, type Component } from 'vue'
import Scene1Welcome from './scenes/Scene1Welcome.vue'
import Scene2UserAssistant from './scenes/Scene2UserAssistant.vue'
import Scene3TeamPlan from './scenes/Scene3TeamPlan.vue'
import Scene4BoardDiscussion from './scenes/Scene4BoardDiscussion.vue'
import Scene5ToolCall from './scenes/Scene5ToolCall.vue'
import Scene6Error from './scenes/Scene6Error.vue'

const activeScene = ref(0)
const mainRef = ref<HTMLDivElement | null>(null)

function setScene(index: number): void {
  activeScene.value = Math.max(0, Math.min(scenes.length - 1, index))
  if (mainRef.value) {
    mainRef.value.scrollTop = 0
  }
}

function isTypingTarget(target: EventTarget | null): boolean {
  if (!(target instanceof HTMLElement)) return false
  if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') return true
  if (target.isContentEditable) return true
  return target.closest('input, textarea, [contenteditable="true"]') !== null
}

function onKeyDown(event: KeyboardEvent): void {
  if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
  if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return
  if (isTypingTarget(event.target)) return

  event.preventDefault()
  if (event.key === 'ArrowLeft') {
    setScene(activeScene.value - 1)
  } else {
    setScene(activeScene.value + 1)
  }
}

onMounted(() => {
  window.addEventListener('keydown', onKeyDown)
})

onUnmounted(() => {
  window.removeEventListener('keydown', onKeyDown)
})

interface Scene {
  id: string
  label: string
  component: Component
}

const scenes: Scene[] = [
  { id: 'welcome', label: '欢迎', component: markRaw(Scene1Welcome) },
  { id: 'user-assistant', label: '对话', component: markRaw(Scene2UserAssistant) },
  { id: 'team-plan', label: '@team', component: markRaw(Scene3TeamPlan) },
  { id: 'board', label: '@board', component: markRaw(Scene4BoardDiscussion) },
  { id: 'tool-call', label: '工具', component: markRaw(Scene5ToolCall) },
  { id: 'error', label: '错误', component: markRaw(Scene6Error) },
]
</script>

<style scoped>
.chat-preview {
  display: flex;
  flex-direction: column;
  /* 同 ChatView — flex:1 + min-height:0 替代 height:100%
   * 以适配 flex-column 父容器 */
  flex: 1;
  min-height: 0;
  background: var(--bg-primary);
  font-family: var(--font-sans, system-ui);
  overflow: hidden;
}

.chat-preview__body {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.chat-preview__main {
  flex: 1;
  overflow-y: auto;
  background: var(--bg-primary);
  position: relative;
}

.chat-preview__demo-badge {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  font-size: var(--font-xs);
  color: var(--text-tertiary);
}

.chat-preview__demo-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-warning, #f59e0b);
}

.chat-preview__scenes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--border-color);
  background: var(--bg-secondary);
  font-size: var(--font-xs);
  flex-shrink: 0;
}

.chat-preview__scenes-label {
  color: var(--text-tertiary);
  margin-right: var(--space-2);
  font-size: var(--font-xs);
}

.chat-preview__scene-btn {
  padding: 4px 10px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  font-family: inherit;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.chat-preview__scene-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.chat-preview__scene-btn--active {
  background: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--border-color);
  font-weight: var(--font-weight-medium);
}
</style>
