<template>
  <div class="ai-generation-form">
    <div class="form-section">
      <label class="form-label">描述你想要的练习</label>
      <textarea
        v-model="description"
        class="form-textarea"
        placeholder="例如：我想让学生练习用英语描述上学路线..."
        rows="4"
      />
    </div>

    <div class="form-section">
      <label class="form-label">任务类型</label>
      <div class="task-type-selector">
        <select v-model="taskType" class="form-select">
          <option value="topic-discussion">话题讨论</option>
          <option value="scenario-task">情境任务</option>
          <option value="casual-chat">轻松闲聊</option>
          <option value="mock-interview">模拟访谈</option>
        </select>
        <svg class="select-arrow" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 9l6 6 6-6" />
        </svg>
      </div>
    </div>

    <div class="form-section">
      <label class="form-label">参考资料（可选）</label>
      <div class="knowledge-upload">
        <div class="upload-placeholder">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
            <polyline points="17 8 12 3 7 8" />
            <line x1="12" y1="3" x2="12" y2="15" />
          </svg>
          <span>上传文件或粘贴链接</span>
        </div>
      </div>
    </div>

    <div class="form-actions">
      <button class="btn-generate" :disabled="!description.trim()" @click="handleGenerate">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M12 2l2.4 7.2L22 12l-7.6 2.8L12 22l-2.4-7.2L2 12l7.6-2.8z" />
        </svg>
        <span>生成练习</span>
      </button>
    </div>

    <!-- 功能开发中提示 -->
    <div v-if="showDevelopingTip" class="developing-tip">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <circle cx="12" cy="12" r="10" />
        <line x1="12" y1="8" x2="12" y2="12" />
        <line x1="12" y1="16" x2="12.01" y2="16" />
      </svg>
      <span>{{ lang.ssFunctionDeveloping }}</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { lang } from '@/main'

const description = ref('')
const taskType = ref('topic-discussion')
const showDevelopingTip = ref(false)

const handleGenerate = () => {
  // 仅 UI 壳子，显示"功能开发中"提示
  showDevelopingTip.value = true
  setTimeout(() => {
    showDevelopingTip.value = false
  }, 3000)
}
</script>

<style lang="scss" scoped>
.ai-generation-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-label {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}

.form-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: #f9fafb;
  font-size: 13px;
  color: #111827;
  line-height: 1.5;
  resize: vertical;
  transition: all 0.2s;
  font-family: inherit;
  box-sizing: border-box;

  &:focus {
    outline: none;
    border-color: #f97316;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.1);
  }

  &::placeholder {
    color: #9ca3af;
  }
}

.task-type-selector {
  position: relative;
}

.form-select {
  width: 100%;
  appearance: none;
  padding: 8px 32px 8px 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: #f9fafb;
  font-size: 13px;
  color: #111827;
  cursor: pointer;
  transition: all 0.2s;

  &:focus {
    outline: none;
    border-color: #f97316;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.1);
  }
}

.select-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  pointer-events: none;
}

.knowledge-upload {
  border: 1px dashed rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;

  &:hover {
    border-color: #f97316;
    background: #fff7ed;
  }
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #9ca3af;
  font-size: 12px;

  svg {
    color: #d1d5db;
  }
}

.form-actions {
  display: flex;
  justify-content: flex-end;
}

.btn-generate {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #f97316, #ef4444);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;

  &:hover:not(:disabled) {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

.developing-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 12px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: 13px;
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
