<template>
  <el-dialog
    :model-value="visible"
    title=""
    width="480px"
    class="create-dialog"
    :show-close="false"
    align-center
    @update:model-value="$emit('update:visible', $event)"
  >
    <template #header>
      <div class="dialog-header">
        <div class="header-glow"></div>
        <div class="header-content">
          <div class="dialog-icon-new">
            <el-icon size="24"><FolderAdd /></el-icon>
          </div>
          <div class="header-text">
            <h3>创建新项目</h3>
            <p>开始构建您的AI训练数据集</p>
          </div>
        </div>
        <button class="close-btn" @click="handleClose">
          <el-icon><Close /></el-icon>
        </button>
      </div>
    </template>
    <div class="dialog-body">
      <div class="form-card">
        <div class="input-group">
          <label class="input-label">
            <span class="label-icon">✦</span>
            项目名称
          </label>
          <el-input
            v-model="formData.name"
            placeholder="例如：客服问答数据集"
            size="large"
            class="custom-input"
          />
        </div>
        <div class="input-group">
          <label class="input-label">
            <span class="label-icon">✦</span>
            项目描述
          </label>
          <el-input
            v-model="formData.description"
            type="textarea"
            :rows="3"
            placeholder="描述这个项目的用途和数据类型..."
            class="custom-input"
          />
        </div>
      </div>

      <!-- Quick Templates -->
      <div class="templates-section">
        <span class="templates-label">快速开始模板</span>
        <div class="templates-grid">
          <div class="template-card" @click="useTemplate('qa')">
            <el-icon><ChatDotRound /></el-icon>
            <span>问答对</span>
          </div>
          <div class="template-card" @click="useTemplate('conversation')">
            <el-icon><ChatLineRound /></el-icon>
            <span>对话</span>
          </div>
          <div class="template-card" @click="useTemplate('instruction')">
            <el-icon><Promotion /></el-icon>
            <span>指令</span>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose" class="btn-cancel">取消</el-button>
        <el-button
          type="primary"
          :loading="loading"
          @click="handleSubmit"
          class="btn-create"
        >
          <el-icon v-if="!loading"><Plus /></el-icon>
          创建项目
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, watch } from 'vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  loading: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:visible', 'submit'])

const formData = reactive({
  name: '',
  description: ''
})

const templates = {
  qa: { name: '问答数据集', description: '基于文档生成问答对训练数据' },
  conversation: { name: '对话数据集', description: '创建多轮对话训练数据' },
  instruction: { name: '指令数据集', description: '构建指令跟随训练数据' }
}

const useTemplate = (type) => {
  const t = templates[type]
  formData.name = t.name
  formData.description = t.description
}

const handleClose = () => {
  emit('update:visible', false)
}

const handleSubmit = () => {
  emit('submit', { ...formData })
}

// Reset form when dialog opens
watch(() => props.visible, (newVal) => {
  if (newVal) {
    formData.name = ''
    formData.description = ''
  }
})
</script>

<style scoped>
.create-dialog :deep(.el-dialog) {
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(20, 20, 30, 0.98) 0%, rgba(15, 15, 25, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(0, 212, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.create-dialog :deep(.el-dialog__header) {
  padding: 0;
  margin: 0;
}

.dialog-header {
  position: relative;
  padding: 24px 28px;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.08) 0%, rgba(124, 58, 237, 0.08) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.header-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 50%, rgba(0, 212, 255, 0.15) 0%, transparent 50%);
  animation: headerGlow 4s ease-in-out infinite;
}

@keyframes headerGlow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.1); }
}

.header-content {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
}

.dialog-icon-new {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(124, 58, 237, 0.2) 100%);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 14px;
  color: var(--accent-primary);
  animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.4); }
  50% { box-shadow: 0 0 20px 5px rgba(0, 212, 255, 0.2); }
}

.header-text h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px 0;
}

.header-text p {
  font-size: 13px;
  color: var(--text-tertiary);
  margin: 0;
}

.close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.15);
}

/* Dialog Body */
.create-dialog :deep(.el-dialog__body) {
  padding: 28px;
}

.dialog-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.input-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.label-icon {
  color: var(--accent-primary);
  font-size: 10px;
}

.custom-input :deep(.el-input__wrapper) {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  box-shadow: none;
  padding: 4px 14px;
  transition: all 0.25s ease;
}

.custom-input :deep(.el-input__wrapper:hover) {
  border-color: rgba(0, 212, 255, 0.3);
}

.custom-input :deep(.el-input__wrapper.is-focus) {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15);
}

.custom-input :deep(.el-input__inner) {
  color: var(--text-primary);
}

.custom-input :deep(.el-input__inner::placeholder) {
  color: var(--text-muted);
}

.custom-input :deep(.el-textarea__inner) {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  box-shadow: none;
  padding: 12px 14px;
  color: var(--text-primary);
  resize: none;
  transition: all 0.25s ease;
}

.custom-input :deep(.el-textarea__inner:hover) {
  border-color: rgba(0, 212, 255, 0.3);
}

.custom-input :deep(.el-textarea__inner:focus) {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15);
}

/* Templates Section */
.templates-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.templates-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.templates-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.template-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.template-card:hover {
  background: rgba(0, 212, 255, 0.08);
  border-color: rgba(0, 212, 255, 0.25);
  transform: translateY(-2px);
}

.template-card .el-icon {
  font-size: 22px;
  color: var(--accent-primary);
}

.template-card span {
  font-size: 12px;
  color: var(--text-secondary);
}

/* Dialog Footer */
.create-dialog :deep(.el-dialog__footer) {
  padding: 0;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 28px;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-cancel {
  padding: 10px 20px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: var(--text-secondary);
  transition: all 0.2s ease;
}

.btn-cancel:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--text-primary);
}

.btn-create {
  padding: 10px 24px;
  background: linear-gradient(135deg, var(--accent-primary) 0%, #0891b2 100%);
  border: none;
  border-radius: 10px;
  font-weight: 500;
  transition: all 0.25s ease;
}

.btn-create:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(0, 212, 255, 0.35);
}
</style>
