<script setup lang="ts">
export type GenerationMode = 'json' | 'manual' | 'ai' | 'database';

interface ModeOption {
  mode: GenerationMode;
  title: string;
  description: string;
  iconColor: string;
  borderGradient: string;
}

const modes: ModeOption[] = [
  {
    mode: 'json',
    title: 'JSON导入',
    description: '直接提供JSON数据，快速生成代码',
    iconColor: '#6366f1',
    borderGradient:
      'linear-gradient(90deg, #6366f1, #8b5cf6, #a855f7, #8b5cf6, #6366f1)',
  },
  {
    mode: 'manual',
    title: '手动填写',
    description: '逐步填写表单，精确控制每个字段',
    iconColor: '#f59e0b',
    borderGradient:
      'linear-gradient(90deg, #f59e0b, #f97316, #fb923c, #f97316, #f59e0b)',
  },
  {
    mode: 'database',
    title: '数据库表',
    description: '从现有数据库表自动生成CRUD代码',
    iconColor: '#3b82f6',
    borderGradient:
      'linear-gradient(90deg, #3b82f6, #2563eb, #1d4ed8, #2563eb, #3b82f6)',
  },
  {
    mode: 'ai',
    title: 'AI提示词',
    description: '使用AI智能生成代码结构（开发中）',
    iconColor: '#10b981',
    borderGradient:
      'linear-gradient(90deg, #10b981, #059669, #34d399, #059669, #10b981)',
  },
];

const emit = defineEmits<{
  select: [mode: GenerationMode];
}>();

const handleSelect = (mode: GenerationMode) => {
  emit('select', mode);
};
</script>

<template>
  <div class="mode-selector">
    <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4">
      <div
        v-for="(item, index) in modes"
        :key="item.mode"
        class="mode-card enter-y group relative overflow-hidden"
        :style="{ animationDelay: `${index * 0.15}s` }"
        :data-mode="item.mode"
        @click="handleSelect(item.mode)"
      >

        <!-- 装饰背景 -->
        <div class="mode-card-decoration">
          <!-- JSON模式装饰：网格 -->
          <div v-if="item.mode === 'json'" class="json-decoration">
            <svg
              class="absolute inset-0 h-full w-full opacity-5"
              xmlns="http://www.w3.org/2000/svg"
            >
              <defs>
                <pattern
                  id="grid-json"
                  width="20"
                  height="20"
                  patternUnits="userSpaceOnUse"
                >
                  <path
                    d="M 20 0 L 0 0 0 20"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="1"
                  />
                </pattern>
              </defs>
              <rect width="100%" height="100%" fill="url(#grid-json)" />
            </svg>
            <!-- 浮动圆点 -->
            <div class="absolute right-4 top-4 h-2 w-2 rounded-full bg-current opacity-20"></div>
            <div class="absolute bottom-6 left-6 h-1.5 w-1.5 rounded-full bg-current opacity-30"></div>
            <div class="absolute right-8 top-1/2 h-1 w-1 rounded-full bg-current opacity-25"></div>
          </div>

          <!-- 手动模式装饰：线条 -->
          <div v-else-if="item.mode === 'manual'" class="manual-decoration">
            <svg
              class="absolute inset-0 h-full w-full opacity-5"
              xmlns="http://www.w3.org/2000/svg"
            >
              <defs>
                <pattern
                  id="lines-manual"
                  width="30"
                  height="30"
                  patternUnits="userSpaceOnUse"
                >
                  <line
                    x1="0"
                    y1="0"
                    x2="30"
                    y2="30"
                    stroke="currentColor"
                    stroke-width="0.5"
                  />
                  <line
                    x1="30"
                    y1="0"
                    x2="0"
                    y2="30"
                    stroke="currentColor"
                    stroke-width="0.5"
                  />
                </pattern>
              </defs>
              <rect width="100%" height="100%" fill="url(#lines-manual)" />
            </svg>
            <!-- 几何图形 -->
            <div class="absolute right-6 top-6 h-8 w-8 rotate-45 border border-current opacity-10"></div>
            <div class="absolute bottom-8 left-8 h-6 w-6 rounded-full border border-current opacity-15"></div>
          </div>

          <!-- AI模式装饰：点阵 -->
          <div v-else-if="item.mode === 'ai'" class="ai-decoration">
            <svg
              class="absolute inset-0 h-full w-full opacity-5"
              xmlns="http://www.w3.org/2000/svg"
            >
              <defs>
                <pattern
                  id="dots-ai"
                  width="25"
                  height="25"
                  patternUnits="userSpaceOnUse"
                >
                  <circle cx="12.5" cy="12.5" r="1.5" fill="currentColor" />
                </pattern>
              </defs>
              <rect width="100%" height="100%" fill="url(#dots-ai)" />
            </svg>
            <!-- 星形装饰 -->
            <div class="absolute right-5 top-5">
              <svg
                width="16"
                height="16"
                viewBox="0 0 16 16"
                class="opacity-20"
                fill="currentColor"
              >
                <path
                  d="M8 0L9.8 5.5L15.5 5.5L10.9 8.9L12.7 14.4L8 11L3.3 14.4L5.1 8.9L0.5 5.5L6.2 5.5L8 0Z"
                />
              </svg>
            </div>
            <div class="absolute bottom-7 left-7">
              <svg
                width="12"
                height="12"
                viewBox="0 0 16 16"
                class="opacity-15"
                fill="currentColor"
              >
                <path
                  d="M8 0L9.8 5.5L15.5 5.5L10.9 8.9L12.7 14.4L8 11L3.3 14.4L5.1 8.9L0.5 5.5L6.2 5.5L8 0Z"
                />
              </svg>
            </div>
          </div>
        </div>

        <!-- 内容 -->
        <div class="relative z-10 flex h-full flex-col items-center justify-center text-center">
          <!-- 图标容器 -->
          <div
            class="mb-6 flex h-20 w-20 items-center justify-center rounded-2xl transition-all duration-300 group-hover:scale-110 group-hover:shadow-lg"
            :style="{
              backgroundColor: item.iconColor + '15',
              border: `2px solid ${item.iconColor}40`,
            }"
          >
            <!-- JSON图标 -->
            <svg v-if="item.mode === 'json'" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="#f5de19" d="M4.014 14.976a2.5 2.5 0 0 0 1.567-.518a2.38 2.38 0 0 0 .805-1.358a15.3 15.3 0 0 0 .214-2.944q.012-2.085.075-2.747a5.2 5.2 0 0 1 .418-1.686a3 3 0 0 1 .755-1.018A3.05 3.05 0 0 1 9 4.125A6.8 6.8 0 0 1 10.544 4h.7v1.96h-.387a2.34 2.34 0 0 0-1.723.468a3.4 3.4 0 0 0-.425 2.092a36 36 0 0 1-.137 4.133a4.7 4.7 0 0 1-.768 2.06A4.6 4.6 0 0 1 6.1 16a3.8 3.8 0 0 1 1.992 1.754a8.9 8.9 0 0 1 .618 3.865q0 2.435.05 2.9a1.76 1.76 0 0 0 .504 1.181a2.64 2.64 0 0 0 1.592.337h.387V28h-.7a5.7 5.7 0 0 1-1.773-.2a2.97 2.97 0 0 1-1.324-.93a3.35 3.35 0 0 1-.681-1.63a24 24 0 0 1-.165-3.234a16.5 16.5 0 0 0-.214-3.106a2.4 2.4 0 0 0-.805-1.361a2.5 2.5 0 0 0-1.567-.524Zm23.972 2.035a2.5 2.5 0 0 0-1.567.524a2.4 2.4 0 0 0-.805 1.361a16.5 16.5 0 0 0-.212 3.109a24 24 0 0 1-.169 3.234a3.35 3.35 0 0 1-.681 1.63a2.97 2.97 0 0 1-1.324.93a5.7 5.7 0 0 1-1.773.2h-.7V26.04h.387a2.64 2.64 0 0 0 1.592-.337a1.76 1.76 0 0 0 .506-1.186q.05-.462.05-2.9a8.9 8.9 0 0 1 .618-3.865A3.8 3.8 0 0 1 25.9 16a4.6 4.6 0 0 1-1.7-1.286a4.7 4.7 0 0 1-.768-2.06a36 36 0 0 1-.137-4.133a3.4 3.4 0 0 0-.425-2.092a2.34 2.34 0 0 0-1.723-.468h-.387V4h.7a6.8 6.8 0 0 1 1.54.125a3.05 3.05 0 0 1 1.149.581a3 3 0 0 1 .755 1.018a5.2 5.2 0 0 1 .418 1.686q.062.662.075 2.747a15.3 15.3 0 0 0 .212 2.947a2.38 2.38 0 0 0 .805 1.355a2.5 2.5 0 0 0 1.567.518Z"/></svg>

            <!-- 手动填写图标 -->
            <svg
              v-else-if="item.mode === 'manual'"
              width="48"
              height="48"
              viewBox="0 0 48 48"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              :style="{ color: item.iconColor }"
            >
              <path
                d="M24 8L30 14H36C37.1046 14 38 14.8954 38 16V36C38 37.1046 37.1046 38 36 38H12C10.8954 38 10 37.1046 10 36V12C10 10.8954 10.8954 10 12 10H18L24 8Z"
                fill="currentColor"
                fill-opacity="0.1"
              />
              <path
                d="M24 8V14H30"
                stroke="currentColor"
                stroke-width="2.5"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
              <path
                d="M16 22H32M16 28H28M16 34H24"
                stroke="currentColor"
                stroke-width="2.5"
                stroke-linecap="round"
              />
              <path
                d="M20 18C20 19.1046 19.1046 20 18 20C16.8954 20 16 19.1046 16 18C16 16.8954 16.8954 16 18 16C19.1046 16 20 16.8954 20 18Z"
                fill="currentColor"
              />
            </svg>

            <!-- 数据库表图标 -->
            <svg
              v-else-if="item.mode === 'database'"
              width="48"
              height="48"
              viewBox="0 0 48 48"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              :style="{ color: item.iconColor }"
            >
              <rect
                x="8"
                y="12"
                width="32"
                height="24"
                rx="2"
                fill="currentColor"
                fill-opacity="0.1"
              />
              <rect
                x="8"
                y="12"
                width="32"
                height="24"
                rx="2"
                stroke="currentColor"
                stroke-width="2.5"
              />
              <line
                x1="8"
                y1="20"
                x2="40"
                y2="20"
                stroke="currentColor"
                stroke-width="2.5"
                stroke-linecap="round"
              />
              <line
                x1="8"
                y1="28"
                x2="40"
                y2="28"
                stroke="currentColor"
                stroke-width="2.5"
                stroke-linecap="round"
              />
              <circle cx="16" cy="16" r="2" fill="currentColor" />
              <circle cx="16" cy="24" r="2" fill="currentColor" />
              <circle cx="16" cy="32" r="2" fill="currentColor" />
            </svg>

            <!-- AI图标 -->
            <svg
              v-else-if="item.mode === 'ai'"
              width="48"
              height="48"
              viewBox="0 0 48 48"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              :style="{ color: item.iconColor }"
            >
              <circle
                cx="24"
                cy="24"
                r="16"
                fill="currentColor"
                fill-opacity="0.1"
              />
              <path
                d="M20 18C20 19.1046 19.1046 20 18 20C16.8954 20 16 19.1046 16 18C16 16.8954 16.8954 16 18 16C19.1046 16 20 16.8954 20 18Z"
                fill="currentColor"
              />
              <path
                d="M32 18C32 19.1046 31.1046 20 30 20C28.8954 20 28 19.1046 28 18C28 16.8954 28.8954 16 30 16C31.1046 16 32 16.8954 32 18Z"
                fill="currentColor"
              />
              <path
                d="M24 28C26.2091 28 28 26.2091 28 24C28 21.7909 26.2091 20 24 20C21.7909 20 20 21.7909 20 24C20 26.2091 21.7909 28 24 28Z"
                fill="currentColor"
              />
              <path
                d="M18 32C18 32 20 30 24 30C28 30 30 32 30 32"
                stroke="currentColor"
                stroke-width="2.5"
                stroke-linecap="round"
              />
              <path
                d="M16 14L18 12M30 12L32 14M32 34L30 36M18 36L16 34"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
              />
            </svg>
          </div>

          <!-- 标题 -->
          <h3 class="mb-3 text-2xl font-bold text-gray-800 dark:text-gray-200">
            {{ item.title }}
          </h3>

          <!-- 描述 -->
          <p class="mb-4 text-gray-600 dark:text-gray-400">
            {{ item.description }}
          </p>

          <!-- 底部提示 -->
          <div
            class="mt-4 flex translate-y-2 items-center gap-2 text-sm font-medium opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100"
            :style="{ color: item.iconColor }"
          >
            <span>点击开始</span>
            <svg
              width="16"
              height="16"
              viewBox="0 0 16 16"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M6 12L10 8L6 4"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.mode-selector {
  padding: 1rem 0;
}

.mode-card {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: #ffffff;
  min-height: 320px;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 1;
  padding: 24px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02),
    0 2px 4px 0 rgba(0, 0, 0, 0.02);
}

/* 暗色模式卡片背景 */
.dark .mode-card {
  background: #1f2937;
  border-color: rgba(255, 255, 255, 0.1);
}

.mode-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.mode-card:active {
  transform: translateY(-4px);
}

/* 流光边框 - 使用圆锥渐变旋转效果 */
.mode-card::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 18px;
  padding: 3px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
  pointer-events: none;
  background: transparent;
  transform-origin: center center;
  will-change: transform;
}

.mode-card::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: #ffffff;
  border-radius: 15px;
  z-index: 0;
  pointer-events: none;
}

/* 暗色模式遮挡层背景 */
.dark .mode-card::after {
  background: #1f2937;
}

.mode-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  /* 防止闪烁的关键属性 */
  transform: translateZ(0);
  isolation: isolate;
  /* 添加边框防止内容溢出 */
  border: 1px solid transparent;
}

/* 修复白色闪烁的关键 - 完全重写 ::before */
.mode-card::before {
  content: '';
  position: absolute;
  inset: -5px; /* 增大边框宽度 */
  opacity: 0;
  border-radius: 16px; /* 增大圆角匹配边框 */
  z-index: -1;
  /* 只对opacity进行过渡，避免其他属性变化 */
  transition: opacity 0.3s ease;
  /* 硬件加速 */
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  /* 初始状态 - 完全透明但保持渐变结构 */
  background:
    conic-gradient(
      from 0deg at 50% 50%,
      transparent 0%,
      transparent 20%,
      transparent 40%,
      transparent 60%,
      transparent 80%,
      transparent 100%
    );
  background-size: 300% 300%;
  /* 移除所有可能引起闪烁的滤镜 */
  filter: none;
}

.mode-card:hover::before {
  /*opacity: 1;
  !*animation:
    rotate-glow 2.5s linear infinite,
    pulse-glow 4s ease-in-out infinite;*!
  !* 悬停时才应用渐变和滤镜 *!
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(255,255,255,0.6) 0%, transparent 50%),
    conic-gradient(
      from 0deg at 50% 50%,
      var(--color-start, #6366f1) 0%,
      var(--color-mid, #8b5cf6) 20%,
      var(--color-end, #a855f7) 40%,
      var(--color-mid, #8b5cf6) 60%,
      var(--color-start, #6366f1) 80%,
      var(--color-start, #6366f1) 100%
    );
  filter: blur(12px) brightness(1.3);*/
}

/* 颜色定义 */
.mode-card[data-mode='json'] {
  --color-start: #6366f1;
  --color-mid: #8b5cf6;
  --color-end: #a855f7;
}

.mode-card[data-mode='manual'] {
  --color-start: #f59e0b;
  --color-mid: #f97316;
  --color-end: #fb923c;
}

.mode-card[data-mode='ai'] {
  --color-start: #10b981;
  --color-mid: #059669;
  --color-end: #34d399;
}

/* 旋转动画 - 优化性能 */
@keyframes rotate-glow {
  0% {
    transform: translateZ(0) rotate(0deg);
    background-position: 0% 0%, 0% 0%, 0% 50%;
  }
  25% {
    background-position: 100% 0%, 0% 100%, 25% 75%;
  }
  50% {
    transform: translateZ(0) rotate(180deg);
    background-position: 100% 100%, 100% 100%, 50% 100%;
  }
  75% {
    background-position: 0% 100%, 100% 0%, 75% 75%;
  }
  100% {
    transform: translateZ(0) rotate(360deg);
    background-position: 0% 0%, 0% 0%, 100% 50%;
  }
}

/* 脉动光晕 - 简化避免闪烁 */
@keyframes pulse-glow {
  0%, 100% {
    filter: blur(12px) brightness(1.3) saturate(1.2);
  }
  50% {
    filter: blur(14px) brightness(1.5) saturate(1.4);
  }
}

/* 内部光效 - 完全重写避免闪烁 */
.mode-card::after {
  content: '';
  position: absolute;
  inset: 2px; /* 调整内部间距 */
  border-radius: 12px;
  background: transparent;
  opacity: 0;
  transition: opacity 0.4s ease 0.1s;
  z-index: -1;
  pointer-events: none;
  /* 使用box-shadow替代背景渐变 */
  box-shadow:
    inset 0 0 20px rgba(255, 255, 255, 0.1),
    inset 0 0 30px rgba(255, 255, 255, 0.05);
}

.mode-card:hover::after {
  opacity: 1;
  /* 简化动画，只做微妙的脉动 */
  animation: inner-pulse 3s ease-in-out infinite;
}

@keyframes inner-pulse {
  0%, 100% {
    box-shadow:
      inset 0 0 20px rgba(255, 255, 255, 0.1),
      inset 0 0 30px rgba(255, 255, 255, 0.05);
  }
  50% {
    box-shadow:
      inset 0 0 25px rgba(255, 255, 255, 0.15),
      inset 0 0 35px rgba(255, 255, 255, 0.08);
  }
}

/* 添加一个额外的容器层确保内容在光效之上 */
.mode-card > * {
  position: relative;
  z-index: 1;
}

/* 性能优化 */
@media (prefers-reduced-motion: reduce) {
  .mode-card:hover::before {
    animation:
      rotate-glow 6s linear infinite,
      pulse-glow 8s ease-in-out infinite;
  }
}

/* 针对某些浏览器的额外修复 */
@supports not (backdrop-filter: blur(10px)) {
  .mode-card {
    background: rgba(255, 255, 255, 0.02);
  }
}

/* 装饰元素 */
.mode-card-decoration {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  color: currentColor;
}

.json-decoration,
.manual-decoration,
.ai-decoration {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.enter-y {
  opacity: 0;
  animation: enter-y-animation 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes enter-y-animation {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


.dark .mode-card:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.dark .mode-card-border-inner {
  background: rgba(255, 255, 255, 0.02);
}

/* 响应式优化 */
@media (max-width: 768px) {
  .mode-card {
    min-height: 280px;
  }

  .mode-card:hover {
    transform: translateY(-4px);
  }
}
</style>
