<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="df-btn df-btn--ghost" @click="refresh" :disabled="loading" :title="$t('dashboard.refresh')">
          <svg 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="df-btn df-btn--primary" @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 加载失败对用户可见(对齐 Knowledge error-banner) ═══ -->
    <div v-if="errorMsg" class="error-banner">
      <span class="error-text">{{ errorMsg }}</span>
      <button class="error-dismiss" @click="errorMsg = ''">✕</button>
    </div>

    <!-- ═══ Stat Cards ═══ -->
    <StatCardRow />

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

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

<script setup lang="ts">
// 仪表盘页壳 — 仅保留:Header(refresh/quickCapture) + 错误条 + 布局栅格 + 加载编排(loadAll)。
// 统计卡/项目面板/灵感面板已抽至 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 StatCardRow from '@/components/dashboard/StatCardRow.vue'
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/tasks/ideas 并行),管理 loading + errorMsg
// refresh 与 onMounted 共用,避免两处 catch 逻辑重复
async function loadAll() {
  if (loading.value) return // 防重复触发
  loading.value = true
  errorMsg.value = ''
  try {
    await Promise.all([store.loadProjects(), store.loadTasks(), store.loadIdeas()])
  } 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')
}

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; }

/* — Buttons — */
.df-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  line-height: 1;
  border: none;
  border-radius: var(--df-radius-sm);
  font-family: var(--df-font-sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s var(--df-ease);
  white-space: nowrap;
}
.df-btn--primary {
  background: var(--df-accent);
  color: #fff;

}
.df-btn--primary:hover {
  background: var(--df-accent);
  filter: brightness(1.1);

}
.df-btn--ghost {
  background: rgba(255,255,255,0.03);
  color: var(--df-text-secondary);
  border: 0.5px solid var(--df-border);
}
.df-btn--ghost:hover {
  background: rgba(255,255,255,0.06);
  color: var(--df-text);
  border-color: var(--df-border-strong);
}
.df-btn--xs { padding: 4px 10px; font-size: 11px; }
.df-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ═══ 错误条(对齐 Knowledge error-banner) ═══ */
.error-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px; margin-bottom: 14px;
  background: rgba(255,107,107,0.12); border: 0.5px solid var(--df-danger);
  border-radius: var(--df-radius-sm); color: var(--df-danger); font-size: 12px;
}
.error-text { word-break: break-word; }
.error-dismiss {
  flex-shrink: 0; background: transparent; border: none; color: var(--df-danger);
  font-size: 14px; cursor: pointer; line-height: 1; padding: 0 2px;
}
.error-dismiss:hover { opacity: 0.7; }

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

/* ═══ Panel(子面板 df-panel 共享基类,scoped 下子组件需各自声明同名类样式;
   此处保留供未来页内直挂面板,子组件已自带同名 .df-panel 样式) ═══ */
.df-panel {
  background: var(--df-bg-card);
  border: 0.5px solid var(--df-border);
  border-radius: var(--df-radius-md);
  padding: 14px 16px;
  animation: fadeInUp 0.5s var(--df-ease) both;
}
.df-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.df-panel-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--df-text);
  letter-spacing: -0.1px;
}
.df-link {
  font-size: 11px;
  color: var(--df-accent);
  text-decoration: none;
  font-weight: 500;
  opacity: 0.8;
  transition: opacity 0.15s;
}
.df-link:hover { opacity: 1; text-decoration: underline; }

/* ═══ Responsive ═══ */

/* 窄窗口：单栏 */
@media (max-width: 900px) {
  .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; }
  .df-panel { padding: 16px 18px; }
}
</style>
