<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { listProjects, deleteProject } from '../api'
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter()
const projects = ref([])
const loading = ref(true)

const fetchProjects = async () => {
  try {
    projects.value = await listProjects()
  } catch (e) {
    ElMessage.error('Failed to load projects')
  } finally {
    loading.value = false
  }
}

const handleDelete = async (project) => {
  try {
    await ElMessageBox.confirm(
      `Delete project "${project.name}"? This cannot be undone.`,
      'Confirm Delete',
      { type: 'warning', confirmButtonText: 'Delete', cancelButtonText: 'Cancel' }
    )
    await deleteProject(project.id)
    ElMessage.success('Project deleted')
    fetchProjects()
  } catch (e) { /* cancelled */ }
}

const statusTag = (status) => {
  const map = { running: 'success', stopped: 'info', building: 'warning', error: 'danger' }
  return map[status] || 'info'
}

const statusLabel = (status) => {
  const map = { running: 'Running', stopped: 'Stopped', building: 'Building...', error: 'Error' }
  return map[status] || status
}

onMounted(fetchProjects)
</script>

<template>
  <div class="dashboard">
    <header class="page-header">
      <div>
        <h1 class="page-title">Projects</h1>
        <p class="page-subtitle">{{ projects.length }} project{{ projects.length !== 1 ? 's' : '' }} managed</p>
      </div>
      <el-button type="primary" size="large" @click="router.push('/projects/new')" round>
        <span style="font-size:18px;line-height:1">+</span>&nbsp; New Project
      </el-button>
    </header>

    <el-skeleton :loading="loading" :count="3" animated />

    <div v-if="!loading && projects.length === 0" class="empty-state">
      <div class="empty-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
      </div>
      <h3>No projects yet</h3>
      <p>Create your first project to start building and deploying.</p>
      <el-button type="primary" @click="router.push('/projects/new')">Create Project</el-button>
    </div>

    <div v-if="!loading && projects.length > 0" class="project-grid">
      <article
        v-for="p in projects"
        :key="p.id"
        class="project-card"
        @click="router.push(`/projects/${p.id}`)"
      >
        <div class="card-top">
          <div class="card-status-row">
            <span class="status-dot" :class="'dot-' + p.status"></span>
            <span class="status-text">{{ statusLabel(p.status) }}</span>
          </div>
          <el-tag size="small" :type="p.mode === 'git' ? '' : 'warning'" effect="plain" round>
            {{ p.mode === 'git' ? 'Git' : 'Upload' }}
          </el-tag>
        </div>

        <h3 class="card-title">{{ p.name }}</h3>
        <p class="card-desc">{{ p.description || 'No description' }}</p>

        <div class="card-meta">
          <span v-if="p.git_url" class="meta-item" :title="p.git_url">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
            {{ p.git_url }}
          </span>
          <span v-if="p.port" class="meta-item">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"/><rect x="2" y="14" width="20" height="8" rx="2" ry="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/></svg>
            :{{ p.port }}
          </span>
        </div>

        <div class="card-actions" @click.stop>
          <el-button size="small" round @click="router.push(`/projects/${p.id}`)">Detail</el-button>
          <el-button size="small" type="danger" round plain @click="handleDelete(p)">Delete</el-button>
        </div>
      </article>
    </div>
  </div>
</template>

<style scoped>
.dashboard { max-width: 1200px; }

/* ── Header ── */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 28px;
}
.page-title {
  font-size: 26px;
  font-weight: 700;
  color: #1a1d2e;
  letter-spacing: -0.5px;
}
.page-subtitle {
  font-size: 14px;
  color: #8c8f9a;
  margin-top: 4px;
}

/* ── Empty ── */
.empty-state {
  text-align: center;
  padding: 80px 20px;
}
.empty-icon {
  width: 72px; height: 72px;
  margin: 0 auto 20px;
  background: #e8ecf1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a0a4b0;
}
.empty-icon svg { width: 32px; height: 32px; }
.empty-state h3 { font-size: 18px; color: #333; margin-bottom: 6px; }
.empty-state p  { font-size: 14px; color: #999; margin-bottom: 20px; }

/* ── Grid ── */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}

/* ── Card ── */
.project-card {
  background: #fff;
  border-radius: 14px;
  padding: 22px 24px 18px;
  cursor: pointer;
  border: 1px solid #ebeef2;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px #00000005;
}
.project-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px #0000000d;
  border-color: #d0d7e2;
}

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.card-status-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot-running  { background: #67c23a; box-shadow: 0 0 6px #67c23a60; }
.dot-stopped  { background: #909399; }
.dot-building { background: #e6a23c; animation: pulse 1.2s ease-in-out infinite; }
.dot-error    { background: #f56c6c; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

.status-text {
  font-size: 13px;
  color: #666;
  font-weight: 500;
}

.card-title {
  font-size: 17px;
  font-weight: 700;
  color: #1a1d2e;
  margin-bottom: 6px;
  letter-spacing: -0.2px;
}

.card-desc {
  font-size: 13px;
  color: #8c8f9a;
  min-height: 36px;
  line-height: 1.5;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}
.meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #a0a4b0;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.meta-item svg { width: 13px; height: 13px; flex-shrink: 0; }

.card-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 14px;
}
</style>
