<template>
  <div class="space-y-6">
    <!-- 标题和描述 -->
    <div class="card p-6">
      <h2 class="text-2xl font-bold text-primary mb-4">CSS渐变生成器</h2>
      <p class="text-secondary mb-4">创建线性渐变和径向渐变，生成CSS代码并实时预览效果</p>
    </div>

    <!-- 渐变类型选择 -->
    <div class="card p-6">
      <h3 class="text-lg font-semibold text-primary mb-4">渐变类型</h3>
      <div class="flex gap-3">
        <button
          @click="gradientType = 'linear'"
          :class="gradientType === 'linear' ? 'btn-primary' : 'btn-secondary'"
          class="px-4 py-2 rounded-lg"
        >
          线性渐变
        </button>
        <button
          @click="gradientType = 'radial'"
          :class="gradientType === 'radial' ? 'btn-primary' : 'btn-secondary'"
          class="px-4 py-2 rounded-lg"
        >
          径向渐变
        </button>
      </div>
    </div>

    <!-- 线性渐变设置 -->
    <div v-if="gradientType === 'linear'" class="card p-6">
      <h3 class="text-lg font-semibold text-primary mb-4">角度设置</h3>
      <div class="flex items-center gap-4">
        <input
          v-model.number="linearAngle"
          type="range"
          min="0"
          max="360"
          class="flex-1"
        />
        <input
          v-model.number="linearAngle"
          type="number"
          min="0"
          max="360"
          class="input w-20"
        />
        <span>°</span>
      </div>
    </div>

    <!-- 径向渐变设置 -->
    <div v-if="gradientType === 'radial'" class="card p-6">
      <h3 class="text-lg font-semibold text-primary mb-4">径向渐变设置</h3>
      
      <!-- 形状 -->
      <div class="mb-4">
        <label class="block text-sm font-medium text-secondary mb-2">形状</label>
        <div class="flex gap-3">
          <button
            v-for="shape in radialShapes"
            :key="shape.value"
            @click="radialShape = shape.value"
            :class="{
              'btn-primary': radialShape === shape.value,
              'btn-secondary': radialShape !== shape.value
            }"
            class="px-4 py-2 rounded transition-colors"
          >
            {{ shape.label }}
          </button>
        </div>
      </div>

      <!-- 大小 -->
      <div class="mb-4">
        <label class="block text-sm font-medium text-secondary mb-2">大小</label>
        <div class="grid grid-cols-2 gap-2">
          <button
            v-for="size in radialSizes"
            :key="size.value"
            @click="radialSize = size.value"
            :class="{
              'btn-primary': radialSize === size.value,
              'btn-secondary': radialSize !== size.value
            }"
            class="px-3 py-2 text-sm rounded transition-colors"
          >
            {{ size.label }}
          </button>
        </div>
      </div>

      <!-- 位置 -->
      <div class="mb-4">
        <label class="block text-sm font-medium text-secondary mb-2">位置</label>
        <div class="grid grid-cols-3 gap-2">
          <button
            v-for="position in radialPositions"
            :key="position.value"
            @click="radialPosition = position.value"
            :class="{
              'btn-primary': radialPosition === position.value,
              'btn-secondary': radialPosition !== position.value
            }"
            class="px-3 py-2 text-sm rounded transition-colors"
          >
            {{ position.label }}
          </button>
        </div>
      </div>
    </div>

    <!-- 颜色设置 -->
    <div class="card p-6">
      <h3 class="text-lg font-semibold text-primary mb-4">颜色设置</h3>
      <div class="space-y-3 mb-4">
        <div v-for="(color, index) in colors" :key="index" class="flex items-center gap-3">
          <input
            v-model="color.color"
            type="color"
            class="w-12 h-10 rounded"
          />
          <input
            v-model="color.color"
            type="text"
            class="input flex-1"
          />
          <input
            v-model.number="color.position"
            type="number"
            min="0"
            max="100"
            class="input w-20"
          />
          <span>%</span>
          <button
            @click="removeColor(index)"
            :disabled="colors.length <= 2"
            class="btn-secondary"
          >
            删除
          </button>
        </div>
      </div>
      <button @click="addColor" class="btn-primary">添加颜色</button>
    </div>

    <!-- 预览 -->
    <div class="card p-6">
      <h3 class="text-lg font-semibold text-primary mb-4">预览</h3>
      <div
        class="w-full h-40 rounded-lg border"
        :style="{ background: generatedCSS }"
      ></div>
    </div>

    <!-- 生成的CSS -->
    <div class="card p-6">
      <div class="flex items-center justify-between mb-4">
        <h3 class="text-lg font-semibold text-primary">生成的CSS</h3>
        <button @click="copyCSS" class="btn-secondary">复制</button>
      </div>
      <textarea
        :value="generatedCSS"
        readonly
        class="input w-full h-20 font-mono"
      ></textarea>
    </div>

    <!-- 使用说明 -->
    <div class="card p-6">
      <h3 class="text-lg font-semibold text-primary mb-4">使用说明</h3>
      <div class="prose text-secondary max-w-none">
        <ul class="space-y-2">
          <li><strong>线性渐变：</strong>沿直线方向的颜色过渡，可调整角度和方向</li>
          <li><strong>径向渐变：</strong>从中心点向外辐射的颜色过渡，可调整形状、大小和位置</li>
          <li><strong>颜色设置：</strong>点击颜色块选择颜色，调整位置百分比控制渐变分布</li>
          <li><strong>预设渐变：</strong>提供多种常用渐变效果，点击即可应用</li>
          <li><strong>实时预览：</strong>所有修改都会实时显示在预览区域</li>
          <li><strong>代码生成：</strong>自动生成标准CSS代码，支持复制完整规则或仅background属性</li>
        </ul>
      </div>
    </div>
  </div>
</template>

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

// 颜色接口
interface ColorStop {
  color: string
  position: number
}

// 渐变类型
const gradientTypes = [
  { label: '线性渐变', value: 'linear' },
  { label: '径向渐变', value: 'radial' }
]

// 线性渐变方向
const linearDirections = [
  { label: '向右', value: 90 },
  { label: '向左', value: 270 },
  { label: '向下', value: 180 },
  { label: '向上', value: 0 },
  { label: '右下', value: 135 },
  { label: '左上', value: 315 },
  { label: '右上', value: 45 },
  { label: '左下', value: 225 }
]

// 径向渐变形状
const radialShapes = [
  { label: '椭圆', value: 'ellipse' },
  { label: '圆形', value: 'circle' }
]

// 径向渐变大小
const radialSizes = [
  { label: '最近边', value: 'closest-side' },
  { label: '最近角', value: 'closest-corner' },
  { label: '最远边', value: 'farthest-side' },
  { label: '最远角', value: 'farthest-corner' }
]

// 径向渐变位置
const radialPositions = [
  { label: '左上', value: 'top left' },
  { label: '上方', value: 'top' },
  { label: '右上', value: 'top right' },
  { label: '左侧', value: 'left' },
  { label: '中心', value: 'center' },
  { label: '右侧', value: 'right' },
  { label: '左下', value: 'bottom left' },
  { label: '下方', value: 'bottom' },
  { label: '右下', value: 'bottom right' }
]

// 响应式状态
const gradientType = ref('linear')
const linearAngle = ref(90)
const radialShape = ref('ellipse')
const radialSize = ref('farthest-corner')
const radialPosition = ref('center')

const colors = ref<ColorStop[]>([
  { color: '#667eea', position: 0 },
  { color: '#764ba2', position: 100 }
])

// 计算生成的CSS
const generatedCSS = computed(() => {
  const colorStops = colors.value
    .sort((a, b) => a.position - b.position)
    .map(color => `${color.color} ${color.position}%`)
    .join(', ')

  if (gradientType.value === 'linear') {
    return `linear-gradient(${linearAngle.value}deg, ${colorStops})`
  } else {
    return `radial-gradient(${radialShape.value} ${radialSize.value} at ${radialPosition.value}, ${colorStops})`
  }
})

// 添加颜色
const addColor = () => {
  const newPosition = colors.value.length > 0 
    ? Math.max(...colors.value.map(c => c.position)) + 10
    : 50
  
  colors.value.push({
    color: '#000000',
    position: Math.min(newPosition, 100)
  })
}

// 删除颜色
const removeColor = (index: number) => {
  if (colors.value.length > 2) {
    colors.value.splice(index, 1)
  }
}

// 复制CSS
const copyCSS = async () => {
  try {
    await navigator.clipboard.writeText(generatedCSS.value)
    alert('CSS代码已复制到剪贴板')
  } catch (error) {
    console.error('复制失败:', error)
    alert('复制失败，请手动复制')
  }
}
</script>

<style scoped>
.slider {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, #ddd, #ddd);
  outline: none;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary-color);
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary-color);
  cursor: pointer;
  border: none;
}

.prose ul {
  list-style-type: disc;
  padding-left: 1.5rem;
}
</style> 