<template>
  <div class="create-sidebar image-creation-sidebar">
    <!-- 加载遮罩层 -->
    <div v-if="loading" class="loading-overlay">
      <div class="loading-content">
        <div class="spinner"></div>
        <p class="loading-text">正在初始化...</p>
      </div>
    </div>
    
    <!-- 模式切换按钮 -->
    <div class="mode-switcher">
      <button 
        v-for="mode in modes" 
        :key="mode.key"
        @click="handleModeSwitch(mode.key)"
        :class="['mode-btn', { active: currentMode === mode.key }]"
      >
        {{ mode.label }}
      </button>
    </div>

    <div class="sidebar-content">
      <!-- 图片上传 - 仅在图生图模式下显示 -->
      <div v-if="currentMode === 'image_to_image'" class="upload-section">
        <label class="section-label">参考图</label>
        <div class="upload-area" @click="triggerFileInput" @dragover.prevent @drop.prevent="handleDrop">
          <input 
            ref="fileInput"
            type="file" 
            accept="image/png, image/jpeg, image/gif" 
            @change="handleFileSelect"
            style="display: none"
          />
          <div v-if="!uploadedImage" class="upload-placeholder">
            <svg class="upload-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 5v14m-7-7h14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <p>点击或拖拽图片</p>
          </div>
          <div v-else class="uploaded-image-preview">
            <img :src="uploadedImage" alt="Uploaded reference" />
            <button @click.stop="removeImage" class="remove-btn">×</button>
          </div>
        </div>
      </div>

      <!-- 文本输入区域 -->
      <div class="input-section">
        <textarea 
          v-model="textInput"
          placeholder="请描述您想要生成什么样的图片..."
          class="text-input"
          rows="4"
        ></textarea>
      </div>

      <!-- 参数设置区域 -->
      <div class="settings-section">
        <!-- 模型选择 -->
        <div class="setting-row">
          <span class="setting-label">模型</span>
          <div class="setting-control">
             <div class="custom-select">
                <div class="select-display">
                    <svg class="model-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                      <path d="M646.78 186.44a63.586 63.586 0 0 0-63.59 0L262.34 371.69a63.594 63.594 0 0 0-31.79 55.07V791.7L483.2 937.56a63.586 63.586 0 0 0 63.59 0l320.85-185.25a63.594 63.594 0 0 0 31.79-55.07V332.31L646.78 186.44z" fill="#E9F1FF"/>
                      <path d="M308.28 860.59c-4.3 0-8.62-1.11-12.5-3.35l-153.91-88.86c-22.8-13.16-36.97-37.7-36.97-64.03 0-13.81 11.19-25 25-25s25 11.19 25 25c0 8.52 4.59 16.47 11.97 20.73l109.54 63.24a623.714 623.714 0 0 1-2.96-60.67c0-128.91 39.36-252.4 113.83-357.1a619.428 619.428 0 0 1 128.04-132.71c35.86-27.49 74.43-50.86 115.14-69.78l-106.5-61.48c-7.38-4.26-16.55-4.26-23.94 0l-151.99 87.75c-11.96 6.9-27.25 2.81-34.15-9.15-6.9-11.96-2.81-27.25 9.15-34.15l151.99-87.75c22.8-13.17 51.13-13.17 73.94 0l150.36 86.81c8.41 4.85 13.24 14.14 12.41 23.81-0.84 9.67-7.2 17.98-16.31 21.32-53.72 19.67-104.08 47.36-149.68 82.32a569.319 569.319 0 0 0-117.72 122.01c-68.41 96.19-104.57 209.66-104.57 328.13 0 34.71 3.17 69.5 9.42 103.41 1.77 9.59-2.2 19.33-10.17 24.95a25.194 25.194 0 0 1-14.42 4.55zM129.9 458.1c-13.81 0-25-11.19-25-25V319.65c0-26.33 14.17-50.87 36.97-64.03l101.75-58.75c11.96-6.9 27.25-2.81 34.15 9.15 6.9 11.96 2.81 27.25-9.15 34.15l-101.75 58.75c-7.38 4.26-11.97 12.2-11.97 20.73V433.1c0 13.81-11.19 25-25 25z" fill="#2C5CCB"/>
                      <path d="M711.52 863.03c-8.64 0-17.04-4.48-21.67-12.5-6.9-11.96-2.81-27.25 9.15-34.15l158.13-91.3c7.38-4.26 11.97-12.2 11.97-20.73V575.49a624.941 624.941 0 0 1-48.78 31.27c-94.53 54.58-199.75 82.76-307.42 82.76-20.03 0-40.13-0.97-60.28-2.94a619.251 619.251 0 0 1-179.54-45.27c-41.83-17.53-81.41-39.5-118.18-65.55v128.59c0 8.52 4.59 16.47 11.97 20.73l153.91 88.86c11.96 6.9 16.05 22.19 9.15 34.15-6.9 11.96-22.19 16.05-34.15 9.15l-153.91-88.86c-22.8-13.16-36.97-37.7-36.97-64.03V524.81c0-9.73 5.65-18.58 14.47-22.67 8.83-4.1 19.23-2.7 26.66 3.58 43.9 37.08 93.15 67.19 146.37 89.49 52.69 22.08 108.22 36.09 165.06 41.62 118 11.49 234.82-13.88 337.85-73.36 29.25-16.89 57.06-36.4 82.66-58a25.01 25.01 0 0 1 26.66-3.56 24.995 24.995 0 0 1 14.46 22.67v179.77c0 26.33-14.17 50.87-36.97 64.03l-158.13 91.3a24.873 24.873 0 0 1-12.47 3.35z" fill="#2C5CCB"/>
                      <path d="M512 970.61c-12.78 0-25.57-3.29-36.97-9.87l-100.04-57.76c-11.96-6.9-16.05-22.19-9.15-34.15 6.9-11.96 22.19-16.05 34.15-9.15l100.04 57.76c7.38 4.26 16.55 4.26 23.94 0l95.6-55.2c11.96-6.9 27.25-2.81 34.15 9.15 6.9 11.96 2.81 27.25-9.15 34.15l-95.6 55.2a74.06 74.06 0 0 1-36.97 9.87zM711.5 863.02c-5.09 0-10.16-1.55-14.47-4.62a25.007 25.007 0 0 1-10.09-25.05c10.81-56.94 12.77-115.11 5.82-172.9a569.326 569.326 0 0 0-45.87-165.32c-48.93-109.06-129.7-198.4-233.57-258.37-27.63-15.95-56.71-29.65-86.43-40.7a25.002 25.002 0 0 1-16.2-21.34c-0.81-9.65 4.03-18.9 12.41-23.74l151.93-87.72c22.8-13.17 51.13-13.17 73.94 0l150.36 86.81c11.96 6.9 16.05 22.19 9.15 34.15-6.9 11.96-22.19 16.05-34.15 9.15l-150.36-86.81c-7.38-4.26-16.55-4.26-23.94 0L391.7 169.12a626.826 626.826 0 0 1 46.62 24.35c113.03 65.26 200.93 162.5 254.19 281.21a619.708 619.708 0 0 1 49.9 179.82c5.45 45.36 5.86 90.95 1.25 136.1l113.47-65.51c7.38-4.26 11.97-12.2 11.97-20.73 0-13.81 11.19-25 25-25s25 11.19 25 25c0 26.33-14.17 50.87-36.97 64.03L724 859.67a24.963 24.963 0 0 1-12.5 3.35zM894.1 457.96c-13.81 0-25-11.19-25-25V319.65c0-8.52-4.59-16.47-11.97-20.73L754.04 239.4c-11.96-6.9-16.05-22.19-9.15-34.15 6.9-11.96 22.19-16.05 34.15-9.15l103.09 59.52c22.8 13.16 36.97 37.7 36.97 64.03v113.32c0 13.8-11.2 24.99-25 24.99z" fill="#2C5CCB"/>
                      <path d="M0 513.47h1024v1H0z" fill="#2C5CCB"/>
                    </svg>
                    <span class="select-text">Sora2.0 Image</span>
                </div>
            </div>
          </div>
        </div>

        <!-- 比例选择 -->
        <div class="setting-row">
          <span class="setting-label">比例</span>
          <div class="setting-control">
            <div class="custom-select" @click="toggleRatioDropdown" v-click-outside="closeRatioDropdown">
              <div class="select-display">
                <component :is="getRatioIcon(ratio)" class="ratio-icon" />
                <span class="select-text">{{ ratio }}</span>
                <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <polyline points="6,9 12,15 18,9"></polyline>
                </svg>
              </div>
              <div v-if="showRatioDropdown" class="select-dropdown">
                <div v-for="option in ratioOptions" :key="option.value" @click.stop="selectRatio(option.value)" class="select-option" :class="{ active: ratio === option.value }">
                  <component :is="getRatioIcon(option.value)" class="ratio-icon" />
                  <span class="option-text">{{ option.value }}</span>
                  <span v-if="ratio === option.value" class="check-mark">✓</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 高清模式 -->
        <div class="setting-row quality-row">
          <div class="quality-left">
            <span class="setting-label">高清模式</span>
            <label class="switch">
              <input type="checkbox" v-model="highQuality">
              <span class="slider"></span>
            </label>
          </div>
        </div>
      </div>

      <!-- 操作按钮区域 -->
      <div class="action-section">
        <button 
          @click="handleGenerate" 
          :disabled="(currentMode === 'image_to_image' && !uploadedImage) || !textInput.trim() || submitting || uploading"
          class="generate-btn"
        >
          <span>{{ uploading ? '上传中...' : (submitting ? '提交中...' : '生成图片') }}</span>
          <span v-if="requiredPoints > 0 && !submitting && !uploading" class="points-cost">消耗 {{ requiredPoints }} 积分</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, h } from 'vue'
import { submitAITask, getAITaskDetail } from '../../api'
import { uploadFileToOss } from '../../api/files'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore } from '../../store/user'

const props = defineProps({
  remakePrompt: {
    type: String,
    default: ''
  },
  remakeImageUrl: {
    type: String,
    default: ''
  },
  remakeAspectRatio: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['switch-mode', 'task-update', 'remake-done', 'mode-change'])

const modes = [
  { key: 'text_to_image', label: '文生图' },
  { key: 'image_to_image', label: '图生图' }
]

const currentMode = ref('text_to_image')

const fileInput = ref(null)
const uploadedImage = ref('')
const uploadedImageUrl = ref('')
const uploadedFile = ref(null)
const textInput = ref('')
const ratio = ref('1:1')
const highQuality = ref(false)
const showRatioDropdown = ref(false)
const submitting = ref(false)
const uploading = ref(false)
const loading = ref(false)
const userStore = useUserStore()

const ratioOptions = [
  { value: '1:1', label: '1:1' },
  { value: '3:2', label: '3:2' },
  { value: '2:3', label: '2:3' },
  { value: '16:9', label: '16:9' },
  { value: '9:16', label: '9:16' },
]

// --- Hardcoded text_to_image models
const TEXT_IMAGE_MODELS = {
  'auto': { modelName: 'sc_soraimg_text_auto', points: 30, aspect: 'auto' },
  '1:1': { modelName: 'sc_soraimg_text_1x1', points: 30, aspect: '1:1' },
  '2:3': { modelName: 'sc_soraimg_text_2x3', points: 30, aspect: '2:3' },
  '3:2': { modelName: 'sc_soraimg_text_3x2', points: 30, aspect: '3:2' },
  '9:16': { modelName: 'sc_soraimg_text_2x3', points: 30, aspect: '2:3' }, // Mapped
  '16:9': { modelName: 'sc_soraimg_text_3x2', points: 30, aspect: '3:2' }, // Mapped
}

// --- Hardcoded image2image models
const IMG2IMG_MODELS = {
  'auto': { modelName: 'sc_soraimg_img2img_auto', points: 35, aspect: 'auto' },
  '1:1': { modelName: 'sc_soraimg_img2img_1x1', points: 35, aspect: '1:1' },
  '2:3': { modelName: 'sc_soraimg_img2img_2x3', points: 35, aspect: '2:3' },
  '3:2': { modelName: 'sc_soraimg_img2img_3x2', points: 35, aspect: '3:2' },
  '9:16': { modelName: 'sc_soraimg_img2img_2x3', points: 35, aspect: '2:3' }, // Mapped
  '16:9': { modelName: 'sc_soraimg_img2img_3x2', points: 35, aspect: '3:2' }, // Mapped
}

const normalizeAspectForModel = (aspect) => {
  if (aspect === '16:9') return '3:2'
  if (aspect === '9:16') return '2:3'
  return aspect
}

const selectedModel = computed(() => {
  const key = normalizeAspectForModel(ratio.value)
  if (currentMode.value === 'text_to_image') {
    return TEXT_IMAGE_MODELS[key] || TEXT_IMAGE_MODELS['1:1']
  } else {
    return IMG2IMG_MODELS[key] || IMG2IMG_MODELS['1:1']
  }
})

const requiredPoints = computed(() => {
  return selectedModel.value.points || 0
})

const handleModeSwitch = (modeKey) => {
  currentMode.value = modeKey
  // 通知父组件模式已切换，以便更新任务列表
  emit('mode-change', modeKey)
}

const triggerFileInput = () => fileInput.value.click()

const handleFileSelect = async (event) => {
  const file = event.target.files[0]
  if (file) await processFile(file)
}

const handleDrop = async (event) => {
  const file = event.dataTransfer.files[0]
  if (file && file.type.startsWith('image/')) await processFile(file)
}

const processFile = async (file) => {
  // 检查文件大小，限制为10MB
  const maxSize = 10 * 1024 * 1024 // 10MB in bytes
  if (file.size > maxSize) {
    ElMessage.error('图片大小不能超过10MB，请选择更小的图片')
    return
  }
  
  const reader = new FileReader()
  reader.onload = (e) => { uploadedImage.value = e.target.result }
  reader.readAsDataURL(file)
  uploadedFile.value = file
  uploadedImageUrl.value = ''
}

const removeImage = () => {
  uploadedImage.value = ''
  uploadedImageUrl.value = ''
  uploadedFile.value = null
  if (fileInput.value) fileInput.value.value = ''
}

// 根据比例生成对应的 SVG 图标
const getRatioIcon = (ratioValue) => {
  const ratioSvgs = {
    '1:1': () => h('svg', { 
      viewBox: '0 0 24 24', 
      fill: 'none', 
      xmlns: 'http://www.w3.org/2000/svg',
      style: { width: '20px', height: '20px' }
    }, [
      h('rect', { x: '5', y: '5', width: '14', height: '14', rx: '1', stroke: 'currentColor', 'stroke-width': '1.5', fill: 'none' })
    ]),
    '3:2': () => h('svg', { 
      viewBox: '0 0 24 24', 
      fill: 'none', 
      xmlns: 'http://www.w3.org/2000/svg',
      style: { width: '20px', height: '20px' }
    }, [
      h('rect', { x: '3', y: '7', width: '18', height: '10', rx: '1', stroke: 'currentColor', 'stroke-width': '1.5', fill: 'none' })
    ]),
    '2:3': () => h('svg', { 
      viewBox: '0 0 24 24', 
      fill: 'none', 
      xmlns: 'http://www.w3.org/2000/svg',
      style: { width: '20px', height: '20px' }
    }, [
      h('rect', { x: '7', y: '3', width: '10', height: '18', rx: '1', stroke: 'currentColor', 'stroke-width': '1.5', fill: 'none' })
    ]),
    '16:9': () => h('svg', { 
      viewBox: '0 0 24 24', 
      fill: 'none', 
      xmlns: 'http://www.w3.org/2000/svg',
      style: { width: '20px', height: '20px' }
    }, [
      h('rect', { x: '2', y: '7', width: '20', height: '10', rx: '1', stroke: 'currentColor', 'stroke-width': '1.5', fill: 'none' })
    ]),
    '9:16': () => h('svg', { 
      viewBox: '0 0 24 24', 
      fill: 'none', 
      xmlns: 'http://www.w3.org/2000/svg',
      style: { width: '20px', height: '20px' }
    }, [
      h('rect', { x: '7', y: '2', width: '10', height: '20', rx: '1', stroke: 'currentColor', 'stroke-width': '1.5', fill: 'none' })
    ])
  }
  
  return ratioSvgs[ratioValue] || ratioSvgs['1:1']
}

const toggleRatioDropdown = () => { showRatioDropdown.value = !showRatioDropdown.value }
const closeRatioDropdown = () => { showRatioDropdown.value = false }
const selectRatio = (value) => {
  ratio.value = value
  showRatioDropdown.value = false
}

const vClickOutside = {
  mounted(el, binding) {
    el.clickOutsideEvent = (event) => {
      if (!(el === event.target || el.contains(event.target))) binding.value()
    }
    document.addEventListener('click', el.clickOutsideEvent)
  },
  unmounted(el) { document.removeEventListener('click', el.clickOutsideEvent) }
}

const handleGenerate = async () => {
  // 图生图模式必须要有参考图
  if (currentMode.value === 'image_to_image' && !uploadedImage.value) {
    return ElMessage.warning('图生图模式需要上传参考图')
  }
  
  if (!textInput.value.trim()) return ElMessage.warning('请输入图片描述')
  if (userStore.userInfo?.points < requiredPoints.value) return ElMessage.warning('积分不足')

  submitting.value = true
  
  try {
    let imageUrl = uploadedImageUrl.value
    
    // 如果有上传的图片且还没上传到OSS，先上传
    if (uploadedFile.value && !imageUrl) {
      uploading.value = true
      ElMessage.info('正在上传图片...')
      try {
        const uploadResult = await uploadFileToOss(uploadedFile.value, userStore.userInfo?.id)
        imageUrl = uploadResult.url
        uploadedImageUrl.value = imageUrl
      } catch (uploadError) {
        ElMessage.error('图片上传失败，请重试')
        return
      } finally {
        uploading.value = false
      }
    }
    
    // 根据当前模式构建任务数据
    const taskData = {
      modelName: selectedModel.value.modelName,
      prompt: textInput.value,
      taskType: currentMode.value,
      aspectRatio: selectedModel.value.aspect
    }
    
    // 如果是图生图模式或有上传图片，添加图片URL
    if (imageUrl) {
      taskData.imageUrl = imageUrl
    }
    
    const response = await submitAITask(taskData)
    if (response.code === 200 && response.data) {
      ElMessage.success('任务提交成功，正在生成图片...')
      pollTaskStatus(response.data.taskNo || response.data.id)
      textInput.value = ''
      removeImage()
    } else {
      ElMessage.error(response.message || '任务提交失败')
    }
  } catch (error) {
    ElMessage.error(error.response?.data?.message || error.message || '任务提交失败，请稍后重试')
  } finally {
    submitting.value = false
  }
}

const pollTaskStatus = (taskNo, maxAttempts = 45) => {
  let attempts = 0
  const pollInterval = 20000 
  emit('task-update')
  
  const checkStatus = async () => {
    try {
      const response = await getAITaskDetail(taskNo)
      if (response.code === 200 && response.data) {
        const task = response.data
        emit('task-update')
        userStore.fetchUserInfo?.().catch(err => console.error('更新用户信息失败:', err))
        
        if (task.status === 'completed' || task.status === 'failed') {
          if (task.status === 'completed') ElMessage.success('图片生成成功！')
          if (task.status === 'failed') ElMessage.error(task.errorMessage || '图片生成失败')
          return
        }
      }
    } catch (error) {
      console.error('查询任务状态错误:', error)
    }

    attempts++
    if (attempts < maxAttempts) {
      setTimeout(checkStatus, pollInterval)
    } else {
      ElMessage.warning('任务处理超时，请稍后在任务列表中查看')
    }
  }
  setTimeout(checkStatus, 5000)
}

watch(() => props.remakePrompt, (newPrompt) => {
  if (newPrompt) {
    textInput.value = newPrompt
  }
})

watch(() => props.remakeImageUrl, (newImageUrl) => {
  if (newImageUrl) {
    uploadedImageUrl.value = newImageUrl
    uploadedImage.value = newImageUrl
    uploadedFile.value = null
  }
})

// 监听 aspectRatio 参数变化
watch(() => props.remakeAspectRatio, (newAspectRatio) => {
  if (newAspectRatio) {
    // 直接应用 aspectRatio
    ratio.value = newAspectRatio
    console.log('应用做同款尺寸:', newAspectRatio)
    
    // 只填充数据，不自动调用生成
    // 如果数据都已填充，通知父组件完成填充
    if (textInput.value && uploadedImageUrl.value) {
      console.log('做同款数据已填充完成，等待用户手动点击生成按钮')
      emit('remake-done')
    }
  }
})

</script>

<style scoped>
.create-sidebar {
  position: relative;
  width: 480px;
  height: 100vh;
  background: rgba(21, 21, 21, 1);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0;
  box-sizing: border-box;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.create-sidebar::-webkit-scrollbar, .sidebar-content::-webkit-scrollbar { display: none; }

/* Mode Switcher */
.mode-switcher {
  display: flex;
  padding: 16px 24px 0 24px;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 24px;
}
.mode-btn {
  flex: 1;
  padding: 12px 16px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px 8px 0 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}
.mode-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.8);
}
.mode-btn.active {
  background: rgba(26, 195, 255, 0.1);
  border-color: #1AC3FF;
  color: #1AC3FF;
}
.mode-btn.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: #1AC3FF;
}

.sidebar-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 16px 24px 16px;
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Upload Section */
.upload-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.section-label {
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  padding-left: 4px;
}
.upload-area {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 200px;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}
.upload-area:hover {
  border-color: #1AC3FF;
  background: rgba(26, 195, 255, 0.05);
}
.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.5);
}
.upload-icon {
  width: 32px;
  height: 32px;
  color: #1AC3FF;
}
.upload-placeholder p {
  margin: 0;
  font-size: 13px;
}
.uploaded-image-preview {
  position: relative;
  width: 100%;
  height: 100%;
}
.uploaded-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 11px;
}

.remove-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 30px;
  height: 24px;
  padding: 0 6px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: #ffffff;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.remove-btn:hover {
  background: rgba(0, 0, 0, 0.75);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Text Input Section */
.input-section {
  background: rgba(26, 28, 32, 1);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px;
}
.text-input {
  width: 100%;
  height: 120px;
  background: rgba(0, 0, 0, 0.3);
  border: none;
  border-radius: 8px;
  color: #ffffff;
  font-size: 14px;
  padding: 12px;
  resize: none;
  line-height: 1.6;
}
.text-input:focus { outline: none; }

/* Settings Section */
.settings-section { display: flex; flex-direction: column; gap: 12px; }
.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.3s ease;
}
.setting-row:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}
.setting-label { 
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 400;
  min-width: 80px;
  flex-shrink: 0;
}
.setting-control { flex: 1; display: flex; justify-content: flex-end; }
.custom-select { position: relative; width: 222px; cursor: pointer; user-select: none; }
.select-display {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #ffffff;
  font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  transition: all 0.2s ease;
}
.select-display:hover {
  background-color: rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.2);
}
.select-text { 
  flex: 1;
  color: #ffffff;
}
.dropdown-arrow { 
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-left: 4px;
}
.select-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 222px;
  background: rgba(44, 50, 61, 1);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  overflow: hidden;
}
.select-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  color: #ffffff;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.select-option:hover { background: rgba(255, 255, 255, 0.1); }
.select-option.active { background: rgba(26, 195, 255, 0.15); }
.model-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.ratio-icon {
  width: 20px;
  height: 20px;
  color: #1AC3FF;
  flex-shrink: 0;
}

.option-text {
  flex: 1;
  color: #ffffff;
}
.check-mark { 
  color: #1AC3FF;
  font-size: 16px;
  font-weight: 600;
  margin-left: auto;
}

/* Switch Toggle */
.quality-left { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; inset: 0; background-color: rgba(255, 255, 255, 0.2); transition: .3s; border-radius: 24px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .3s; border-radius: 50%; }
input:checked + .slider { background-color: #1AC3FF; }
input:checked + .slider:before { transform: translateX(20px); }

/* Action Section */
.action-section { 
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  padding: 0;
}
.generate-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 24px;
  background: linear-gradient(135deg, #1AC3FF 0%, #0F9CFF 100%);
  border: none;
  border-radius: 8px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.generate-btn:disabled { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.4); cursor: not-allowed; }
.points-cost { font-size: 12px; font-weight: 400; opacity: 0.9; }
.points-cost.error { color: #ff6b6b; }

/* 加载遮罩层 */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(21, 21, 21, 0.95);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(26, 195, 255, 0.2);
  border-top-color: #1AC3FF;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-text {
  color: #1AC3FF;
  font-size: 14px;
  font-weight: 500;
  margin: 0;
  letter-spacing: 0.5px;
}
</style>
