<template>
  <!-- 加载状态 -->
  <div v-if="loading" class="loading-container">
    <a-spin size="large" tip="加载中，请稍候..." />
  </div>

  <!-- 主要内容 -->
  <div class="scripts-header">
    <div class="header-title">
      <h1>脚本管理</h1>
    </div>
    <a-space size="middle">
      <a-button type="primary" size="large" @click="handleAddScript" class="link">
        <template #icon>
          <PlusOutlined />
        </template>
        新建脚本
      </a-button>
    </a-space>
  </div>

  <!-- 空状态 -->
  <div v-if="scripts.length === 0" class="empty-state">
    <div class="empty-content">
      <div class="empty-image-container">
        <img src="@/assets/NoData.png" alt="暂无数据" class="empty-image" />
      </div>
      <div class="empty-text-content">
        <h3 class="empty-title">暂无脚本</h3>
        <p class="empty-description">您还没有创建任何脚本</p>
      </div>
    </div>
  </div>

  <ScriptTable
    :scripts="scripts"
    :active-connections="activeConnections"
    @edit="handleEditScript"
    @delete="handleDeleteScript"
    @add-user="handleAddUser"
    @edit-user="handleEditUser"
    @delete-user="handleDeleteUser"
    @maa-config="handleMAAConfig"
    @disconnect-maa="handleDisconnectMAA"
    @toggle-user-status="handleToggleUserStatus"
  />

  <!-- 脚本类型选择弹窗 -->
  <a-modal
    v-model:open="typeSelectVisible"
    title="选择脚本类型"
    :confirm-loading="addLoading"
    @ok="handleConfirmAddScript"
    @cancel="typeSelectVisible = false"
    class="type-select-modal"
    width="500px"
    ok-text="确定"
    cancel-text="取消"
  >
    <div class="type-selection">
      <a-radio-group v-model:value="selectedType" class="type-radio-group">
        <a-radio-button value="MAA" class="type-option">
          <div class="type-content">
            <div class="type-logo-container">
              <img src="@/assets/MAA.png" alt="MAA" class="type-logo" />
            </div>
            <div class="type-info">
              <div class="type-title">MAA脚本</div>
              <div class="type-description">明日方舟自动化脚本，支持多账号日常代理等功能</div>
            </div>
          </div>
        </a-radio-button>
        <a-radio-button value="General" class="type-option">
          <div class="type-content">
            <div class="type-logo-container">
              <img src="@/assets/AUTO-MAS.ico" alt="AUTO-MAS" class="type-logo" />
            </div>
            <div class="type-info">
              <div class="type-title">通用脚本</div>
              <div class="type-description">通用自动化脚本，适用于所有具备日志文件的脚本</div>
            </div>
          </div>
        </a-radio-button>
      </a-radio-group>
    </div>
  </a-modal>

  <!-- 通用脚本创建方式选择弹窗 -->
  <a-modal
    v-model:open="generalModeSelectVisible"
    title="选择创建方式"
    :confirm-loading="addLoading"
    @ok="handleConfirmGeneralMode"
    @cancel="generalModeSelectVisible = false"
    class="general-mode-modal"
    width="600px"
    ok-text="确定"
    cancel-text="返回"
  >
    <div class="mode-selection">
      <a-radio-group v-model:value="selectedGeneralMode" class="mode-radio-group">
        <a-radio-button value="template" class="mode-option">
          <div class="mode-content">
            <div class="mode-icon">
              <FileTextOutlined />
            </div>
            <div class="mode-info">
              <div class="mode-title">从模板创建</div>
              <div class="mode-description">选择现有的配置模板快速创建脚本</div>
            </div>
          </div>
        </a-radio-button>
        <a-radio-button value="custom" class="mode-option">
          <div class="mode-content">
            <div class="mode-icon">
              <SettingOutlined />
            </div>
            <div class="mode-info">
              <div class="mode-title">自定义配置</div>
              <div class="mode-description">从空白配置开始，完全自定义脚本设置</div>
            </div>
          </div>
        </a-radio-button>
      </a-radio-group>
    </div>
  </a-modal>

  <!-- 模板选择弹窗 -->
  <a-modal
    v-model:open="templateSelectVisible"
    title="选择配置模板"
    :confirm-loading="templateLoading"
    @ok="handleConfirmTemplate"
    @cancel="handleCancelTemplate"
    class="template-select-modal"
    width="1000px"
    ok-text="使用此模板"
    cancel-text="返回"
    :ok-button-props="{ disabled: !selectedTemplate }"
  >
    <div class="template-selection">
      <a-spin :spinning="templateLoading">
        <div v-if="templates.length === 0 && !templateLoading" class="no-templates">
          <div class="no-templates-content">
            <FileSearchOutlined class="no-templates-icon" />
            <h3>暂无可用模板</h3>
            <p>当前没有找到任何配置模板，请稍后再试或联系管理员</p>
          </div>
        </div>
        <div v-else class="templates-container">
          <div class="templates-header">
            <div class="templates-count">
              <span class="count-badge">{{ filteredTemplates.length }}</span>
              <span class="count-text">个可用模板</span>
            </div>
            <div class="search-container">
              <a-input
                v-model:value="searchKeyword"
                placeholder="搜索模板名称、作者或描述..."
                allow-clear
                class="template-search"
              >
                <template #prefix>
                  <FileSearchOutlined />
                </template>
              </a-input>
            </div>
          </div>
          <div class="templates-list">
            <div v-if="filteredTemplates.length === 0" class="no-search-results">
              <FileSearchOutlined class="no-results-icon" />
              <p>未找到匹配的模板</p>
              <p class="no-results-tip">请尝试其他关键词</p>
            </div>
            <div
              v-for="template in filteredTemplates"
              :key="template.configName"
              :class="[
                'template-item',
                { selected: selectedTemplate?.configName === template.configName },
              ]"
              @click="selectedTemplate = template"
            >
              <div class="template-content">
                <div class="template-header">
                  <div class="template-info">
                    <h3 class="template-name">{{ template.configName }}</h3>
                    <div class="template-meta">
                      <span class="template-author">
                        <UserOutlined />
                        {{ template.author || '未知作者' }}
                      </span>
                      <span class="template-time">
                        <ClockCircleOutlined />
                        {{ template.createTime || '未知时间' }}
                      </span>
                    </div>
                  </div>
                  <!--                  <div class="template-selector">-->
                  <!--                    <a-radio :checked="selectedTemplate?.configName === template.configName" />-->
                  <!--                  </div>-->
                </div>

                <div
                  class="template-description"
                  v-html="parseMarkdown(template.description)"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </a-spin>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import {
  ClockCircleOutlined,
  FileSearchOutlined,
  FileTextOutlined,
  PlusOutlined,
  SettingOutlined,
  UserOutlined,
} from '@ant-design/icons-vue'
import ScriptTable from '@/components/ScriptTable.vue'
import type { Script, ScriptType, User } from '@/types/script'
import { useScriptApi } from '@/composables/useScriptApi'
import { useUserApi } from '@/composables/useUserApi'
import { useWebSocket } from '@/composables/useWebSocket'
import { useTemplateApi, type WebConfigTemplate } from '@/composables/useTemplateApi'
import MarkdownIt from 'markdown-it'

const router = useRouter()
const { addScript, deleteScript, getScriptsWithUsers, loading } = useScriptApi()
const { addUser, updateUser, deleteUser, loading: userLoading } = useUserApi()
const { connect, disconnect, disconnectAll } = useWebSocket()
const { getWebConfigTemplates, importScriptFromWeb, loading: templateApiLoading } = useTemplateApi()

// 初始化markdown解析器
const md = new MarkdownIt({
  html: false,
  linkify: true,
  typographer: true,
})

const scripts = ref<Script[]>([])
const typeSelectVisible = ref(false)
const generalModeSelectVisible = ref(false)
const templateSelectVisible = ref(false)
const selectedType = ref<ScriptType>('MAA')
const selectedGeneralMode = ref('template')
const selectedTemplate = ref<WebConfigTemplate | null>(null)
const templates = ref<WebConfigTemplate[]>([])
const addLoading = ref(false)
const templateLoading = ref(false)
const searchKeyword = ref('')

// WebSocket连接管理
const activeConnections = ref<Map<string, string>>(new Map()) // scriptId -> websocketId

// 解析模板描述的markdown
const parseMarkdown = (text: string) => {
  if (!text) return '暂无描述信息'
  return md.render(text)
}

// 过滤模板
const filteredTemplates = computed(() => {
  if (!searchKeyword.value.trim()) {
    return templates.value
  }

  const keyword = searchKeyword.value.toLowerCase()
  return templates.value.filter(
    template =>
      template.configName.toLowerCase().includes(keyword) ||
      (template.author && template.author.toLowerCase().includes(keyword)) ||
      (template.description && template.description.toLowerCase().includes(keyword))
  )
})

onMounted(() => {
  loadScripts()
})


const loadScripts = async () => {
  try {
    const scriptDetails = await getScriptsWithUsers()

    // 将 ScriptDetail 转换为 Script 格式（为了兼容现有的表格组件）
    scripts.value = scriptDetails.map(detail => ({
      id: detail.uid,
      type: detail.type,
      name: detail.name,
      config: detail.config,
      users: detail.users || [],
      createTime: detail.createTime || new Date().toLocaleString(),
    }))
  } catch (error) {
    console.error('加载脚本列表失败:', error)
    message.error('加载脚本列表失败')
  }
}

const handleAddScript = () => {
  selectedType.value = 'MAA'
  typeSelectVisible.value = true
}

const handleConfirmAddScript = async () => {
  if (selectedType.value === 'General') {
    // 如果选择通用脚本，进入创建方式选择
    typeSelectVisible.value = false
    generalModeSelectVisible.value = true
    return
  }

  // MAA脚本直接创建
  addLoading.value = true
  try {
    const result = await addScript(selectedType.value)
    if (result) {
      message.success(result.message)
      typeSelectVisible.value = false
      // 跳转到编辑页面，传递API返回的数据
      router.push({
        path: `/scripts/${result.scriptId}/edit`,
        state: {
          scriptData: {
            id: result.scriptId,
            type: selectedType.value,
            config: result.data,
          },
        },
      })
    }
  } catch (error) {
    console.error('添加脚本失败:', error)
  } finally {
    addLoading.value = false
  }
}

const handleConfirmGeneralMode = async () => {
  if (selectedGeneralMode.value === 'template') {
    // 加载模板列表并打开模板选择弹窗
    await loadTemplates()
    generalModeSelectVisible.value = false
    templateSelectVisible.value = true
  } else {
    // 自定义配置 - 直接创建通用脚本
    generalModeSelectVisible.value = false
    addLoading.value = true
    try {
      const result = await addScript('General')
      if (result) {
        message.success(result.message)
        router.push({
          path: `/scripts/${result.scriptId}/edit`,
          state: {
            scriptData: {
              id: result.scriptId,
              type: 'General',
              config: result.data,
            },
          },
        })
      }
    } catch (error) {
      console.error('添加脚本失败:', error)
    } finally {
      addLoading.value = false
    }
  }
}

const loadTemplates = async () => {
  templateLoading.value = true
  try {
    templates.value = await getWebConfigTemplates()
    selectedTemplate.value = null
  } catch (error) {
    console.error('加载模板列表失败:', error)
  } finally {
    templateLoading.value = false
  }
}

const handleConfirmTemplate = async () => {
  if (!selectedTemplate.value) {
    message.warning('请先选择一个模板')
    return
  }

  templateLoading.value = true
  try {
    // 1. 先创建通用脚本
    const createResult = await addScript('General')
    if (!createResult) {
      return
    }

    // 2. 使用模板URL导入配置
    const importResult = await importScriptFromWeb(
      createResult.scriptId,
      selectedTemplate.value.downloadUrl
    )

    if (importResult) {
      message.success(`已根据模板 "${selectedTemplate.value.configName}" 创建脚本`)
      templateSelectVisible.value = false
      selectedTemplate.value = null

      // 刷新脚本列表
      await loadScripts()

      // 跳转到编辑页面，不传递state数据，让编辑页面从API重新加载最新配置
      router.push(`/scripts/${createResult.scriptId}/edit`)
    }
  } catch (error) {
    console.error('使用模板创建脚本失败:', error)
  } finally {
    templateLoading.value = false
  }
}

const handleCancelTemplate = () => {
  templateSelectVisible.value = false
  selectedTemplate.value = null
  // 返回到创建方式选择
  generalModeSelectVisible.value = true
}

const handleEditScript = (script: Script) => {
  // 跳转到独立的编辑页面
  router.push(`/scripts/${script.id}/edit`)
}

const handleDeleteScript = async (script: Script) => {
  const result = await deleteScript(script.id)
  if (result) {
    message.success('脚本删除成功')
    loadScripts()
  }
}

const handleAddUser = (script: Script) => {
  // 根据条件判断跳转到 MAA 还是通用用户添加页面
  if (script.type === 'MAA') {
    router.push(`/scripts/${script.id}/users/add/maa`) // 跳转到 MAA 用户添加页面
  } else {
    router.push(`/scripts/${script.id}/users/add/general`) // 跳转到通用用户添加页面
  }
}

const handleEditUser = (user: User) => {
  // 从用户数据中找到对应的脚本
  const script = scripts.value.find(s => s.users.some(u => u.id === user.id))
  if (script) {
    // 判断是 MAA 用户还是通用用户
    if (user.Info.Server) {
      // 跳转到 MAA 用户编辑页面
      router.push(`/scripts/${script.id}/users/${user.id}/edit/maa`)
    } else {
      // 跳转到通用用户编辑页面
      router.push(`/scripts/${script.id}/users/${user.id}/edit/general`)
    }
  } else {
    message.error('找不到对应的脚本')
  }
}

const handleDeleteUser = async (user: User) => {
  // 从用户数据中找到对应的脚本
  const script = scripts.value.find(s => s.users.some(u => u.id === user.id))
  if (!script) {
    message.error('找不到对应的脚本')
    return
  }

  const result = await deleteUser(script.id, user.id)
  if (result) {
    // 删除成功后，从本地数据中移除用户
    const userIndex = script.users.findIndex(u => u.id === user.id)
    if (userIndex > -1) {
      script.users.splice(userIndex, 1)
    }
    message.success('用户删除成功')
  }
}

const handleMAAConfig = async (script: Script) => {
  try {
    // 检查是否已有连接
    const existingWebsocketId = activeConnections.value.get(script.id)
    if (existingWebsocketId) {
      message.warning('该脚本已在配置中，请先断开连接')
      return
    }

    // 建立WebSocket连接进行MAA配置
    const websocketId = await connect({
      taskId: script.id,
      mode: '设置脚本',
      showNotifications: true,
      onStatusChange: status => {
        console.log(`脚本 ${script.name} 连接状态: ${status}`)
      },
      onMessage: data => {
        console.log(`脚本 ${script.name} 收到消息:`, data)
        // 这里可以根据需要处理特定的消息
      },
      onError: error => {
        console.error(`脚本 ${script.name} 连接错误:`, error)
        message.error(`MAA配置连接失败: ${error}`)
        // 清理连接记录
        activeConnections.value.delete(script.id)
      },
    })

    if (websocketId) {
      // 记录连接
      activeConnections.value.set(script.id, websocketId)
      message.success(`已开始配置 ${script.name}`)

      // 可选：设置自动断开连接的定时器（比如30分钟后）
      setTimeout(
        () => {
          if (activeConnections.value.has(script.id)) {
            disconnect(websocketId)
            activeConnections.value.delete(script.id)
            message.info(`${script.name} 配置会话已超时断开`)
          }
        },
        30 * 60 * 1000
      ) // 30分钟
    }
  } catch (error) {
    console.error('MAA配置失败:', error)
    message.error('MAA配置失败')
  }
}

const handleDisconnectMAA = (script: Script) => {
  const websocketId = activeConnections.value.get(script.id)
  if (websocketId) {
    disconnect(websocketId)
    activeConnections.value.delete(script.id)
    message.success(`已断开 ${script.name} 的配置连接`)
  }
}

const handleToggleUserStatus = async (user: User) => {
  try {
    // 找到该用户对应的脚本
    const script = scripts.value.find(s => s.users.some(u => u.id === user.id))
    if (!script) {
      message.error('找不到对应的脚本')
      return
    }
    const newStatus = !user.Info.Status

    // 调用 updateUser API
    const result = await updateUser(script.id, user.id, {
      Info: {
        ...user.Info,
        Status: newStatus,
      },
    })

    if (result) {
      // 本地同步状态
      user.Info.Status = newStatus
      // message.success(`用户 ${user.Info.Name} 已${newStatus ? '启用' : '禁用'}`)
    }
  } catch (error) {
    console.error('切换用户状态失败:', error)
    message.error('切换用户状态失败')
  }
}
</script>

<style scoped>
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.scripts-main {
  padding: 32px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--ant-color-bg-layout);
  min-height: 100vh;
}

.scripts-container {
  padding: 32px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--ant-color-bg-layout);
  min-height: 100vh;
}

.scripts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  padding: 0 8px;
}

.header-title {
  display: flex;
  align-items: center;
  gap: 16px;
}

.title-icon {
  font-size: 32px;
  color: var(--ant-color-primary);
}

.header-title h1 {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  color: var(--ant-color-text);
  background: linear-gradient(135deg, var(--ant-color-primary), var(--ant-color-primary-hover));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 空状态样式 */
.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 500px;
  padding: 60px 20px;
  background: linear-gradient(135deg, rgba(24, 144, 255, 0.02), rgba(24, 144, 255, 0.01));
  border-radius: 16px;
  margin: 20px 0;
}

.empty-content {
  text-align: center;
  max-width: 480px;
  animation: fadeInUp 0.8s ease-out;
}

.empty-image-container {
  position: relative;
  margin-bottom: 32px;
  display: inline-block;
}

.empty-image-container::before {
  content: '';
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  background: radial-gradient(circle, rgba(24, 144, 255, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  animation: pulse 3s ease-in-out infinite;
}

.empty-image {
  max-width: 200px;
  height: auto;
  opacity: 0.9;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.1));
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.empty-image:hover {
  transform: translateY(-4px);
  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.15));
}

.empty-text-content {
  margin-top: 16px;
}

.empty-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--ant-color-text);
  margin: 0 0 12px 0;
  background: linear-gradient(135deg, var(--ant-color-text), var(--ant-color-text-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.empty-description {
  font-size: 16px;
  color: var(--ant-color-text-secondary);
  line-height: 1.6;
  margin: 0;
  opacity: 0.8;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

/* 脚本类型选择弹窗样式 */
.type-select-modal :deep(.ant-modal-content) {
  border-radius: 16px;
  overflow: hidden;
  background: var(--ant-color-bg-container);
}

.type-select-modal :deep(.ant-modal-header) {
  background: var(--ant-color-bg-container);
  border-bottom: 1px solid var(--ant-color-border-secondary);
  padding: 24px 32px 20px;
}

.type-select-modal :deep(.ant-modal-title) {
  font-size: 20px;
  font-weight: 600;
  color: var(--ant-color-text);
}

.type-select-modal :deep(.ant-modal-body) {
  padding: 32px;
}

.type-selection {
  margin: 16px 0;
}

.type-radio-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.type-radio-group :deep(.ant-radio-button-wrapper) {
  height: auto;
  padding: 0;
  border: 2px solid var(--ant-color-border);
  border-radius: 12px;
  background: var(--ant-color-bg-container);
  transition: all 0.3s ease;
  overflow: hidden;
}

.type-radio-group :deep(.ant-radio-button-wrapper-checked) {
  border-color: var(--ant-color-primary);
  background: var(--ant-color-primary-bg);
}

.type-radio-group :deep(.ant-radio-button-wrapper::before) {
  display: none;
}

.type-content {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  width: 100%;
}

.type-logo-container {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ant-color-bg-elevated);
  border: 1px solid var(--ant-color-border-secondary);
  flex-shrink: 0;
  overflow: hidden;
}

.type-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  transition: all 0.3s ease;
}

.type-info {
  flex: 1;
}

.type-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--ant-color-text);
  margin-bottom: 4px;
}

.type-description {
  font-size: 14px;
  color: var(--ant-color-text-secondary);
  line-height: 1.5;
}

/* 通用脚本创建方式选择弹窗样式 */
.general-mode-select-modal :deep(.ant-modal-content) {
  border-radius: 16px;
  overflow: hidden;
  background: var(--ant-color-bg-container);
}

.general-mode-select-modal :deep(.ant-modal-header) {
  background: var(--ant-color-bg-container);
  border-bottom: 1px solid var(--ant-color-border-secondary);
  padding: 24px 32px 20px;
}

.general-mode-select-modal :deep(.ant-modal-title) {
  font-size: 20px;
  font-weight: 600;
  color: var(--ant-color-text);
}

.general-mode-select-modal :deep(.ant-modal-body) {
  padding: 32px;
}

.mode-selection {
  margin: 16px 0;
}

.mode-radio-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mode-radio-group :deep(.ant-radio-button-wrapper) {
  height: auto;
  padding: 0;
  border: 2px solid var(--ant-color-border);
  border-radius: 12px;
  background: var(--ant-color-bg-container);
  transition: all 0.3s ease;
  overflow: hidden;
}

.mode-radio-group :deep(.ant-radio-button-wrapper-checked) {
  border-color: var(--ant-color-primary);
  background: var(--ant-color-primary-bg);
  box-shadow: 0 4px 16px rgba(24, 144, 255, 0.3);
}

.mode-radio-group :deep(.ant-radio-button-wrapper::before) {
  display: none;
}

.mode-content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--ant-color-bg-elevated);
  border: 1px solid var(--ant-color-border-secondary);
  transition: all 0.3s ease;
}

/* 模板选择弹窗样式 */
.template-select-modal :deep(.ant-modal-content) {
  border-radius: 20px;
  overflow: hidden;
  background: var(--ant-color-bg-container);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

.template-select-modal :deep(.ant-modal-header) {
  background: linear-gradient(135deg, var(--ant-color-bg-container), var(--ant-color-primary-bg));
  border-bottom: 1px solid var(--ant-color-border-secondary);
  padding: 28px 36px 24px;
}

.template-select-modal :deep(.ant-modal-title) {
  font-size: 22px;
  font-weight: 700;
  color: var(--ant-color-text);
  background: linear-gradient(135deg, var(--ant-color-primary), var(--ant-color-primary-hover));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.template-select-modal :deep(.ant-modal-body) {
  padding: 0 36px 36px;
  background: var(--ant-color-bg-layout);
}

.template-selection {
  margin: 0;
}

.template-list {
  width: 100%;
  max-height: 400px;
  overflow-y: auto;
}

.template-item {
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 12px;
  margin-bottom: 12px;
  border: 2px solid var(--ant-color-border);
  background: var(--ant-color-bg-container);
}

.template-item.selected {
  border-color: var(--ant-color-primary);
  background: var(--ant-color-primary-bg);
  box-shadow: 0 4px 16px rgba(24, 144, 255, 0.3);
}

.template-item-content {
  padding: 16px 20px;
}

.template-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.template-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--ant-color-text);
}

.template-author {
  font-size: 14px;
  color: var(--ant-color-text-secondary);
}

.template-description {
  font-size: 14px;
  color: var(--ant-color-text-secondary);
  margin: 8px 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.template-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}

.template-time {
  font-size: 12px;
  color: var(--ant-color-text-tertiary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.no-templates {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: var(--ant-color-bg-container);
  border-radius: 16px;
  margin-top: 20px;
}

.no-templates-content {
  text-align: center;
  padding: 40px;
  max-width: 400px;
}

.no-templates-icon {
  font-size: 64px;
  color: var(--ant-color-text-tertiary);
  margin-bottom: 24px;
  opacity: 0.6;
}

.no-templates-content h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--ant-color-text);
  margin: 0 0 12px;
}

.no-templates-content p {
  font-size: 14px;
  color: var(--ant-color-text-secondary);
  line-height: 1.6;
  margin: 0;
}

.mode-icon {
  font-size: 20px;
  color: var(--ant-color-primary);
}

.mode-info {
  flex: 1;
}

.mode-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ant-color-text);
  margin-bottom: 4px;
}

.mode-description {
  font-size: 14px;
  color: var(--ant-color-text-secondary);
  line-height: 1.4;
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .scripts-content {
    box-shadow:
      0 4px 20px rgba(0, 0, 0, 0.3),
      0 1px 3px rgba(0, 0, 0, 0.4);
  }

  .add-button {
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .scripts-main {
    padding: 16px;
  }

  .scripts-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .header-title h1 {
    font-size: 24px;
  }

  .scripts-content {
    padding: 16px;
  }

  .type-content {
    padding: 16px;
  }

  .type-icon {
    font-size: 24px;
  }

  .type-title {
    font-size: 16px;
  }

  /* 模板选择弹窗响应式 */
  .template-select-modal {
    width: 95vw !important;
    max-width: 600px;
  }

  .template-select-modal :deep(.ant-modal-body) {
    padding: 0 20px 20px;
  }

  .templates-container {
    padding: 16px;
  }

  .templates-list {
    max-height: 350px;
  }

  .templates-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .search-container {
    max-width: none;
    margin-left: 0;
  }

  .templates-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .template-card-header {
    padding: 20px;
  }

  .template-card-body {
    padding: 20px;
    min-height: 120px;
  }

  .template-card-footer {
    padding: 16px 20px;
  }

  .template-title {
    font-size: 16px;
  }
}

/* 模板容器样式 */
.templates-container {
  background: var(--ant-color-bg-container);
  border-radius: 12px;
  padding: 20px;
  margin-top: 16px;
}

.templates-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ant-color-border-secondary);
}

.templates-count {
  display: flex;
  align-items: center;
  gap: 8px;
}

.count-badge {
  background: var(--ant-color-primary);
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  min-width: 20px;
  text-align: center;
}

.count-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--ant-color-text);
}

.search-container {
  flex: 1;
  max-width: 300px;
  margin-left: 16px;
}

.template-search {
  width: 100%;
}

/* 模板列表布局 */
.templates-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 450px;
  overflow-y: auto;
  /* 隐藏滚动条 */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
}

.templates-list::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari and Opera */
}

.template-item {
  background: var(--ant-color-bg-elevated);
  border: 1px solid var(--ant-color-border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.template-item.selected {
  border-color: var(--ant-color-primary);
  background: var(--ant-color-primary-bg);
  box-shadow: 0 0 0 1px var(--ant-color-primary-border);
}

.template-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  background: linear-gradient(135deg, rgba(24, 144, 255, 0.05), rgba(24, 144, 255, 0.02));
  border-bottom: 1px solid var(--ant-color-border-secondary);
  position: relative;
}

.template-icon-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.2), transparent);
  border-radius: 16px;
}

.template-icon {
  font-size: 20px;
  color: white;
  z-index: 1;
}

.template-badge {
  background: var(--ant-color-success);
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-text {
  font-size: 12px;
}

.template-card-body {
  padding: 24px;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.template-title-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.template-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ant-color-text);
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
  margin-right: 12px;
}

.selected-indicator {
  flex-shrink: 0;
}

.selected-icon {
  font-size: 20px;
  color: var(--ant-color-success);
  animation: checkmark 0.3s ease-in-out;
}

@keyframes checkmark {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.template-description {
  font-size: 14px;
  color: var(--ant-color-text-secondary);
  line-height: 1.6;
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.template-card-footer {
  padding: 20px 24px;
  background: rgba(0, 0, 0, 0.02);
  border-top: 1px solid var(--ant-color-border-secondary);
  margin-top: auto;
}

.template-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ant-color-text-secondary);
}

.meta-icon {
  font-size: 14px;
  color: var(--ant-color-text-tertiary);
}

.meta-text {
  font-weight: 500;
}

/* 新的模板项样式 */
.template-content {
  padding: 12px 16px;
}

.template-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.template-info {
  flex: 1;
}

.template-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ant-color-text);
  margin: 0 0 6px 0;
  line-height: 1.3;
}

.template-meta {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--ant-color-text-tertiary);
}

.template-author,
.template-time {
  display: flex;
  align-items: center;
  gap: 3px;
}

.template-selector {
  margin-left: 12px;
  flex-shrink: 0;
}

.template-description {
  font-size: 13px;
  color: var(--ant-color-text-secondary);
  line-height: 1.4;
  margin-top: 4px;
}

.template-description :deep(p) {
  margin: 0 0 6px 0;
}

.template-description :deep(p:last-child) {
  margin-bottom: 0;
}

.template-description :deep(code) {
  background: var(--ant-color-bg-layout);
  padding: 1px 3px;
  border-radius: 3px;
  font-size: 11px;
}

.template-description :deep(strong) {
  font-weight: 600;
  color: var(--ant-color-text);
}

.template-description :deep(em) {
  font-style: italic;
}

.template-description :deep(ul),
.template-description :deep(ol) {
  margin: 6px 0;
  padding-left: 16px;
}

.template-description :deep(li) {
  margin: 2px 0;
}

/* 搜索无结果样式 */
.no-search-results {
  text-align: center;
  padding: 40px 20px;
  color: var(--ant-color-text-secondary);
}

.no-results-icon {
  font-size: 48px;
  color: var(--ant-color-text-tertiary);
  margin-bottom: 16px;
  opacity: 0.6;
}

.no-search-results p {
  margin: 0 0 8px 0;
  font-size: 14px;
}

.no-results-tip {
  font-size: 12px;
  color: var(--ant-color-text-tertiary);
}
</style>
