<template>
  <div class="home">
    <!-- Hero Section -->
    <section class="hero">
      <div class="hero-content">
        <!-- Logo -->
        <div class="hero-logo">
          <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
            <defs>
              <linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" style="stop-color:#00d4ff"/>
                <stop offset="100%" style="stop-color:#7c3aed"/>
              </linearGradient>
            </defs>
            <!-- 外圈 - 数据集合 -->
            <rect x="4" y="4" width="48" height="48" rx="12" stroke="url(#logoGradient)" stroke-width="2.5" fill="none" opacity="0.3"/>
            <!-- Y 字母 - 数据流/分支 -->
            <path d="M18 42V22L28 12V18" stroke="url(#logoGradient)" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
            <path d="M28 18L38 28" stroke="url(#logoGradient)" stroke-width="3.5" stroke-linecap="round" fill="none"/>
            <!-- 数据节点 - 神经网络样式 -->
            <circle cx="18" cy="42" r="3" fill="#00d4ff"/>
            <circle cx="28" cy="12" r="3" fill="#7c3aed"/>
            <circle cx="38" cy="28" r="3" fill="#00d4ff"/>
            <circle cx="28" cy="18" r="2.5" fill="#00d4ff" opacity="0.7"/>
            <!-- 连接线 - 数据流向 -->
            <circle cx="28" cy="32" r="2" fill="#7c3aed" opacity="0.5"/>
            <circle cx="20" cy="32" r="1.5" fill="#00d4ff" opacity="0.4"/>
            <circle cx="36" cy="38" r="1.5" fill="#7c3aed" opacity="0.4"/>
          </svg>
          <span class="logo-text">YG<span class="logo-highlight">Datasets</span></span>
        </div>

        <div class="hero-badge">
          <span class="badge-dot"></span>
          <span>AI 驱动数据生成</span>
        </div>
        <h1 class="hero-title">
          构建高质量<br />
          <span class="glow-text">训练数据集</span>
        </h1>
        <p class="hero-subtitle">
          通过智能分割、AI 生成问答和无缝评估，
          将文档转化为结构化数据集。
        </p>
        <div class="hero-actions">
          <el-button type="primary" size="large" @click="createProject" class="btn-primary">
            <el-icon><Plus /></el-icon>
            创建项目
          </el-button>
          <el-button size="large" @click="goToCrawler" class="btn-secondary">
            <el-icon><Connection /></el-icon>
            数据爬虫
          </el-button>
          <el-button size="large" @click="goToModels" class="btn-secondary">
            <el-icon><Cpu /></el-icon>
            模型管理
          </el-button>
        </div>
      </div>

      <!-- Hero Visual - Modern Abstract Composition -->
      <div class="hero-visual">
        <!-- Galaxy Background -->
        <div class="galaxy-bg">
          <!-- Nebula clouds -->
          <div class="nebula-cloud nebula-1"></div>
          <div class="nebula-cloud nebula-2"></div>
          <div class="nebula-cloud nebula-3"></div>

          <!-- Galaxy core -->
          <div class="galaxy-core"></div>

          <!-- Spiral arms -->
          <div class="galaxy-spiral">
            <div class="spiral-arm spiral-arm-1"></div>
            <div class="spiral-arm spiral-arm-2"></div>
            <div class="spiral-arm spiral-arm-3"></div>
          </div>

          <!-- Orbit rings with stars -->
          <div class="orbit-ring orbit-ring-1">
            <span class="orbit-star"></span>
            <span class="orbit-star"></span>
            <span class="orbit-star"></span>
            <span class="orbit-star"></span>
          </div>
          <div class="orbit-ring orbit-ring-2">
            <span class="orbit-star"></span>
            <span class="orbit-star"></span>
            <span class="orbit-star"></span>
            <span class="orbit-star"></span>
          </div>
          <div class="orbit-ring orbit-ring-3">
            <span class="orbit-star"></span>
            <span class="orbit-star"></span>
            <span class="orbit-star"></span>
          </div>
          <div class="orbit-ring orbit-ring-4">
            <span class="orbit-star"></span>
            <span class="orbit-star"></span>
          </div>
        </div>

        <!-- Light rays -->
        <div class="light-rays">
          <div class="ray"></div>
          <div class="ray"></div>
          <div class="ray"></div>
          <div class="ray"></div>
          <div class="ray"></div>
        </div>

        <!-- Ambient particles -->
        <span class="ambient-particle"></span>
        <span class="ambient-particle"></span>
        <span class="ambient-particle"></span>
        <span class="ambient-particle"></span>
        <span class="ambient-particle"></span>

        <!-- Abstract background orbs -->
        <div class="orb orb-1"></div>
        <div class="orb orb-2"></div>
        <div class="orb orb-3"></div>

        <!-- Central floating UI element -->
        <div class="floating-ui">
          <div class="ui-header">
            <div class="ui-dot"></div>
            <div class="ui-dot"></div>
            <div class="ui-dot"></div>
          </div>
          <div class="ui-content">
            <div class="ui-line"></div>
            <div class="ui-line short"></div>
            <div class="ui-line"></div>
          </div>
          <div class="ui-badge">
            <el-icon><Check /></el-icon>
            <span>处理完成</span>
          </div>
        </div>

        <!-- Floating feature pills - main features -->
        <div class="feature-pill pill-1">
          <el-icon><Document /></el-icon>
          <span>多格式支持</span>
        </div>
        <div class="feature-pill pill-2">
          <el-icon><MagicStick /></el-icon>
          <span>AI 生成</span>
        </div>
        <div class="feature-pill pill-3">
          <el-icon><DataAnalysis /></el-icon>
          <span>智能评估</span>
        </div>

        <!-- Additional floating labels -->
        <div class="feature-pill pill-4">
          <el-icon><Connection /></el-icon>
          <span>API 集成</span>
        </div>
        <div class="feature-pill pill-5">
          <el-icon><Clock /></el-icon>
          <span>批量处理</span>
        </div>
        <div class="feature-pill pill-6">
          <el-icon><Lock /></el-icon>
          <span>数据安全</span>
        </div>
        <div class="feature-pill pill-7">
          <el-icon><TrendCharts /></el-icon>
          <span>可视化</span>
        </div>
      </div>
    </section>

    <!-- Projects Section -->
    <section class="projects-section">
      <div class="section-header">
        <div class="section-title">
          <h2>我的项目</h2>
          <p>{{ total }} 个项目</p>
        </div>
        <el-button type="primary" @click="createProject" class="add-btn">
          <el-icon><Plus /></el-icon>
          新建
        </el-button>
      </div>

      <!-- Projects Grid -->
      <div class="projects-grid" v-loading="loading">
        <!-- Empty State -->
        <EmptyState
          v-if="!loading && projects.length === 0"
          :icon="FolderAdd"
          title="暂无项目"
          description="创建您的第一个项目开始生成数据集"
          action-text="创建项目"
          @action="createProject"
        />

        <!-- Project Cards -->
        <ProjectCard
          v-else
          v-for="(project, index) in projects"
          :key="project.id"
          :project="project"
          :index="index"
          @click="openProject"
          @delete="confirmDelete"
        />
      </div>

      <!-- Pagination -->
      <div class="pagination-wrapper" v-if="needPagination">
        <div class="pagination-minimal">
          <span class="page-info">第 {{ currentPage }} / {{ totalPages }} 页</span>
          <div class="page-arrows">
            <button
              class="arrow-btn"
              :disabled="currentPage === 1"
              @click="handlePageChange(currentPage - 1)"
            >
              <el-icon><ArrowLeft /></el-icon>
            </button>
            <button
              class="arrow-btn"
              :disabled="currentPage === totalPages"
              @click="handlePageChange(currentPage + 1)"
            >
              <el-icon><ArrowRight /></el-icon>
            </button>
          </div>
        </div>
      </div>
    </section>

    <!-- Create Dialog -->
    <CreateProjectDialog
      v-model:visible="dialogVisible"
      :loading="submitting"
      @submit="handleCreateSubmit"
    />

    <!-- Delete Confirmation Dialog -->
    <DeleteDialog
      v-model:visible="deleteDialogVisible"
      :item-name="projectToDelete?.name"
      :loading="deleting"
      @confirm="handleDelete"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { FolderAdd, Check, Connection, Clock, Lock, TrendCharts, ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
import { projectApi } from '@/api'
import type { Project, ProjectCreate } from '@/types'

// Components
import EmptyState from '@/components/common/EmptyState.vue'
import ProjectCard from '@/components/common/ProjectCard.vue'
import CreateProjectDialog from '@/components/common/CreateProjectDialog.vue'
import DeleteDialog from '@/components/common/DeleteDialog.vue'

const router = useRouter()

const loading = ref(false)
const projects = ref([])
const dialogVisible = ref(false)
const deleteDialogVisible = ref(false)
const projectToDelete = ref(null)
const submitting = ref(false)
const deleting = ref(false)

// Pagination
const currentPage = ref(1)
const pageSize = ref(9)
const total = ref(0)

const fetchProjects = async () => {
  loading.value = true
  try {
    const res = await projectApi.list({ page: currentPage.value, page_size: pageSize.value })
    // API returns: { items: [], total, page, page_size, total_pages }
    if (res && typeof res === 'object' && 'items' in res) {
      projects.value = res.items || []
      total.value = res.total || 0
    } else if (Array.isArray(res)) {
      projects.value = res
      total.value = res.length
    } else {
      projects.value = []
      total.value = 0
    }
  } catch (error) {
    projects.value = []
    total.value = 0
  } finally {
    loading.value = false
  }
}

const handlePageChange = (page: number) => {
  currentPage.value = page
  fetchProjects()
}

const needPagination = computed(() => total.value > pageSize.value || projects.value.length === pageSize.value)

const totalPages = computed(() => Math.ceil(total.value / pageSize.value))


const createProject = () => {
  dialogVisible.value = true
}

const handleCreateSubmit = async (formData) => {
  // Validation - name, description and type are required
  if (!formData.name || formData.name.trim() === '') {
    ElMessage.warning('请输入项目名称')
    return
  }
  if (!formData.description || formData.description.trim() === '') {
    ElMessage.warning('请输入项目描述')
    return
  }
  if (!formData.type) {
    ElMessage.warning('请选择项目类型')
    return
  }

  console.log('Creating project with form:', formData)
  submitting.value = true
  try {
    const res = await projectApi.create(formData)
    console.log('Create response:', res)
    ElMessage.success('项目创建成功')
    dialogVisible.value = false
    fetchProjects()
    // New format: {id: "..."}
    const projectId = res.id
    console.log('Navigating to:', projectId)
    router.push(`/project/${projectId}`)
  } catch (error) {
    console.error('Create project error:', error)
    ElMessage.error('创建项目失败: ' + (error.message || '未知错误'))
  } finally {
    submitting.value = false
  }
}

const openProject = (project) => {
  router.push(`/project/${project.id}`)
}

const confirmDelete = (project) => {
  projectToDelete.value = project
  deleteDialogVisible.value = true
}

const handleDelete = async () => {
  if (!projectToDelete.value) return
  deleting.value = true
  try {
    await projectApi.delete(projectToDelete.value.id)
    ElMessage.success('项目已删除')
    deleteDialogVisible.value = false
    projectToDelete.value = null
    fetchProjects()
  } catch (error) {
    ElMessage.error('删除失败')
  } finally {
    deleting.value = false
  }
}

const goToDataSquare = () => router.push('/data-square')
const goToCrawler = () => router.push('/crawler')
const goToModels = () => router.push('/models')

onMounted(() => fetchProjects())
</script>

<style scoped>
@import '@/styles/pages/home.scss';
</style>
