<template>
  <div class="dashboard">
    <!-- ═══ Header ═══ -->
    <header class="dash-header">
      <div class="dash-header-left">
        <h1 class="dash-title">{{ $t('dashboard.title') }}</h1>
        <span class="dash-subtitle">{{ $t('dashboard.subtitle') }}</span>
      </div>
      <div class="dash-header-right">
        <button class="btn btn-ghost btn-sm dash-refresh-btn" @click="refresh" :disabled="loading" :title="$t('dashboard.refresh')">
          <svg v-if="loading" class="dash-spinner" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M21 12a9 9 0 11-6.219-8.56"/></svg>
          <svg v-else width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 11-2.12-9.36L23 10"/></svg>
        </button>
        <button class="btn btn-primary btn-sm" @click="quickCapture">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
          {{ $t('dashboard.captureIdea') }}
        </button>
      </div>
    </header>

    <!-- ═══ 错误条:refresh/onMounted 加载失败对用户可见(样式全局 .error-banner) ═══ -->
    <div v-if="errorMsg" class="error-banner" style="margin-bottom: 14px">
      <span class="error-text">{{ errorMsg }}</span>
      <button class="error-dismiss" @click="errorMsg = ''">✕</button>
    </div>

    <!-- ═══ Main Grid ═══ -->
    <div class="dash-grid">
      <!-- Left: Active Projects -->
      <ActiveProjectsPanel />

      <!-- Right Column -->
      <div class="dash-right">
        <!-- Ideas -->
        <IdeasPanel />
      </div>
    </div>

    <!-- ═══ 统计概要(底部一行小字,原独立统计卡已下沉) ═══ -->
    <div class="dash-stats-inline">
      <span class="dash-stats-item clickable" @click="go('/ideas')" :title="$t('dashboard.viewAll')">
        <span class="dash-stats-num">{{ store.stats.ideas }}</span>{{ $t('dashboard.stats.ideas') }}
      </span>
      <span class="dash-stats-sep">·</span>
      <span class="dash-stats-item clickable" @click="go('/projects')" :title="$t('dashboard.viewAll')">
        <span class="dash-stats-num">{{ store.stats.projects }}</span>{{ $t('dashboard.stats.projects') }}
      </span>
      <span class="dash-stats-sep">·</span>
      <span class="dash-stats-item clickable" @click="go('/tasks')" :title="$t('dashboard.viewAll')">
        <span class="dash-stats-num">{{ store.stats.activeTasks }}</span>{{ $t('dashboard.stats.activeTasks') }}
      </span>
      <span class="dash-stats-sep">·</span>
      <span class="dash-stats-item">
        <span class="dash-stats-num">{{ store.stats.drafts }}</span>{{ $t('dashboard.stats.drafts') }}
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
// 仪表盘页壳 — 仅保留:Header(refresh/quickCapture) + 错误条 + 布局栅格 + 加载编排(loadAll) +
// 底部统计概要行(原独立统计卡 StatCardRow 已下沉为底部一行小字,空间让给项目/灵感面板)。
// 项目面板/灵感面板已抽至 components/dashboard/ 子组件,各自共享 project store(全局单例),无需 props。
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useProjectStore } from '@/stores/project'
import ActiveProjectsPanel from '@/components/dashboard/ActiveProjectsPanel.vue'
import IdeasPanel from '@/components/dashboard/IdeasPanel.vue'

const router = useRouter()
const store = useProjectStore()
const { t } = useI18n()

// 加载态(refresh/load 期间 true,驱动刷新按钮禁用) + 错误态(加载失败对用户可见)
const loading = ref(false)
const errorMsg = ref('')

// 统一加载入口(projects/ideas 并行 + 统计独立通道),管理 loading + errorMsg
// refresh 与 onMounted 共用,避免两处 catch 逻辑重复
// P1-b A0:不再调 store.loadTasks() —— Dashboard 模板不消费 state.tasks,
// 统计(activeTaskCount/projectTaskCounts)走 loadStats() 独立通道(后端 count_tasks),
// 不被 Tasks 视图分页/筛选污染。Tasks.vue 自行 loadTasks(onMounted/筛选/变更)。
// loadStats 依赖 state.projects(算 projectTaskCounts),故 loadProjects 完成后再调。
async function loadAll() {
  if (loading.value) return // 防重复触发
  loading.value = true
  errorMsg.value = ''
  try {
    await Promise.all([store.loadProjects(), store.loadIdeas()])
    await store.loadStats()
  } catch (e: any) {
    console.error('Dashboard load failed:', e)
    errorMsg.value = e?.toString() ?? t('dashboard.err.loadFailed')
  } finally {
    loading.value = false
  }
}

async function refresh() {
  await loadAll()
}

function quickCapture() {
  router.push('/ideas')
}

// 底部统计概要项点击跳转(可点击项:ideas/projects/tasks;drafts 不可点)
function go(link: string) {
  router.push(link)
}

onMounted(() => {
  loadAll()
})
</script>

<style scoped>
.dashboard { padding: 16px 20px 20px; }

/* ═══ Header ═══ */
.dash-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.dash-title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.4px;
  color: var(--df-text);
  line-height: 1.2;
}
.dash-subtitle {
  font-size: 11px;
  color: var(--df-text-dim);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.dash-subtitle::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--df-success);
  display: inline-block;
}
.dash-header-right { display: flex; gap: 6px; align-items: center; }

/* 刷新按钮图标旋转动画(加载中反馈) */
.dash-spinner { animation: dash-spin 0.9s linear infinite; }
@keyframes dash-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ═══ Grid Layout ═══ */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 12px;
}
.dash-right { display: flex; flex-direction: column; gap: 12px; }

/* ═══ 底部统计概要(一行小字,原独立统计卡下沉) ═══ */
.dash-stats-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 0.5px solid var(--df-border);
  font-size: 11px;
  color: var(--df-text-dim);
  line-height: 1.4;
}
.dash-stats-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 450;
}
.dash-stats-item.clickable {
  cursor: pointer;
  transition: color 0.15s var(--df-ease);
}
.dash-stats-item.clickable:hover { color: var(--df-accent); }
.dash-stats-num {
  font-size: 13px;
  font-weight: 600;
  color: var(--df-text);
  letter-spacing: -0.3px;
}
.dash-stats-sep { color: var(--df-text-dim); opacity: 0.6; }

/* ═══ Responsive ═══ */

/* 窄窗口：单栏(与 AppLayout 768px 断点对齐) */
@media (max-width: 768px) {
  .dashboard { padding: 12px 14px 16px; }
  .dash-grid { grid-template-columns: 1fr; }
  .dash-right { flex-direction: row; flex-wrap: wrap; gap: 10px; }
  .dash-right > .df-panel { flex: 1 1 280px; min-width: 0; }
}

/* 宽窗口：右栏展开 */
@media (min-width: 1201px) {
  .dash-grid { grid-template-columns: 1fr 340px; }
}

/* 超宽窗口：充分利用 */
@media (min-width: 1600px) {
  .dashboard { padding: 20px 28px 24px; }
  .dash-grid { grid-template-columns: 1fr 400px; gap: 16px; }
}
</style>
