<template>
  <transition name="video-modal-fade">
    <div v-if="visible" class="video-modal-overlay">
      <div class="video-modal-panel">
        <!-- 头部 -->
        <header class="video-modal-header">
          <button
            v-if="selectedVideo"
            class="video-modal-back"
            type="button"
            @click="selectedVideo = null"
          >
            ← 返回视频列表
          </button>
          <button
            v-else
            class="video-modal-back"
            type="button"
            @click="handleBack"
          >
            ← 返回客服中心
          </button>
          <h2 class="video-modal-title">
            {{ selectedVideo ? selectedVideo.title : '上手视频' }}
          </h2>
        </header>

        <!-- 主体内容 -->
        <main class="video-modal-main">
          <!-- 视频播放视图 -->
          <template v-if="selectedVideo">
            <div class="video-player-wrap">
              <video
                class="video-player"
                controls
                :src="selectedVideo.videoUrl"
                :poster="selectedVideo.poster"
              >
                您的浏览器不支持视频播放。
              </video>
            </div>
          </template>

          <!-- 视频列表视图 -->
          <template v-else>
            <section class="video-modal-section">
              <h4 class="video-modal-section-title">快速开始</h4>
              <div class="video-card-grid">
                <button
                  v-for="item in quickStartVideos"
                  :key="item.id"
                  class="video-card"
                  type="button"
                  @click="selectedVideo = item"
                >
                  <span class="video-card-text">{{ item.title }}</span>
                  <i :class="['fas', item.icon, 'video-card-icon']"></i>
                </button>
              </div>
            </section>

            <section class="video-modal-section">
              <h4 class="video-modal-section-title">进阶与合规</h4>
              <div class="video-card-grid">
                <button
                  v-for="item in advancedVideos"
                  :key="item.id"
                  class="video-card"
                  type="button"
                  @click="selectedVideo = item"
                >
                  <span class="video-card-text">{{ item.title }}</span>
                  <i :class="['fas', item.icon, 'video-card-icon']"></i>
                </button>
              </div>
            </section>
          </template>
        </main>
      </div>
    </div>
  </transition>
</template>

<script setup lang="ts">
import { ref } from 'vue';

interface VideoItem {
  id: string;
  title: string;
  description: string;
  icon: string;
  videoUrl: string;
  poster?: string;
}

const props = defineProps<{
  visible: boolean;
}>();

const emit = defineEmits<{
  (e: 'back'): void;
}>();

const selectedVideo = ref<VideoItem | null>(null);

// 默认占位视频地址，后续可替换为真实视频链接
const PLACEHOLDER_VIDEO_URL = 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4';

const handleBack = () => {
  selectedVideo.value = null;
  emit('back');
};

const quickStartVideos: VideoItem[] = [
  {
    id: 'register-login',
    title: '如何注册/登录?',
    description: '介绍 LinkMed 账号注册与登录流程。',
    icon: 'fa-th-large',
    videoUrl: PLACEHOLDER_VIDEO_URL,
  },
  {
    id: 'quick-qa',
    title: '如何发起快问快答?',
    description: '演示如何使用快问快答功能快速获取答案。',
    icon: 'fa-tasks',
    videoUrl: PLACEHOLDER_VIDEO_URL,
  },
  {
    id: 'deep-search',
    title: '如何进行深度检索?',
    description: '展示深度检索的使用方法与最佳实践。',
    icon: 'fa-gear',
    videoUrl: PLACEHOLDER_VIDEO_URL,
  },
];

const advancedVideos: VideoItem[] = [
  {
    id: 'upload-records',
    title: '如何上传病历/资料?',
    description: '讲解如何上传病历及各类资料到知识库。',
    icon: 'fa-handshake',
    videoUrl: PLACEHOLDER_VIDEO_URL,
  },
  {
    id: 'generate-doc',
    title: '如何生成文档/PPT?',
    description: '演示如何利用 AI 生成文档与演示文稿。',
    icon: 'fa-file-powerpoint',
    videoUrl: PLACEHOLDER_VIDEO_URL,
  },
  {
    id: 'export-share',
    title: '如何导出与分享?',
    description: '介绍文档导出与团队分享的操作步骤。',
    icon: 'fa-share-alt',
    videoUrl: PLACEHOLDER_VIDEO_URL,
  },
];
</script>

<style scoped>
.video-modal-overlay {
  pointer-events: auto;
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.25);
  z-index: 3999;
}

.video-modal-panel {
  width: 760px;
  max-width: calc(100vw - 80px);
  height: 480px;
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  background: #f5f7fa;
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.video-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid #ebeef5;
  background: #ffffff;
}

.video-modal-back {
  border: none;
  background: #f2f3f5;
  color: #606266;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.video-modal-back:hover {
  background: #e4e7ed;
}

.video-modal-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-modal-main {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  background: #f5f7fa;
}

/* 分区标题 */
.video-modal-section {
  background: #ffffff;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.video-modal-section-title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

/* 视频卡片网格 */
.video-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.video-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: linear-gradient(135deg, #5dade2, #3498db);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  text-align: left;
}

.video-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(52, 152, 219, 0.35);
}

.video-card-text {
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  flex: 1;
}

.video-card-icon {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.9);
  margin-left: 10px;
}

/* 视频播放区 */
.video-player-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.video-player {
  width: 100%;
  max-height: 380px;
  border-radius: 8px;
  background: #000000;
}

.video-player-desc {
  margin: 12px 0 0;
  font-size: 13px;
  color: #606266;
  line-height: 1.5;
}

/* 动画 */
.video-modal-fade-enter-active,
.video-modal-fade-leave-active {
  transition: opacity 0.18s ease;
}

.video-modal-fade-enter-from,
.video-modal-fade-leave-to {
  opacity: 0;
}

@media (max-width: 1024px) {
  .video-modal-panel {
    width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
  }

  .video-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .video-modal-panel {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }

  .video-card-grid {
    grid-template-columns: 1fr;
  }

  .video-modal-title {
    font-size: 14px;
  }
}
</style>