<template>
  <AdminPageShell
    eyebrow="銷售實驗"
    title="實驗管理"
    description="建立並管理你的 A/B 測試實驗，每個實驗可設定多組版本，透過視覺編輯器調整頁面內容。"
  >
    <template #actions>
      <el-button @click="loadExperiments">重新整理</el-button>
      <el-button type="primary" @click="openCreateDialog">新增實驗</el-button>
    </template>

    <el-alert
      v-if="errorMessage"
      type="error"
      :closable="false"
      :title="errorMessage"
      show-icon
    />

    <template #summary>
      <div class="metrics-grid">
        <AdminMetricCard label="全部實驗" :value="summary.total" hint="目前已建立的實驗數量" />
        <AdminMetricCard label="進行中" :value="summary.running" tone="success" hint="目前正在運行中的實驗" />
        <AdminMetricCard label="草稿" :value="summary.draft" tone="warning" hint="尚未上線的草稿實驗" />
        <AdminMetricCard label="已結束" :value="summary.ended" tone="danger" hint="已結束或暫停的實驗" />
      </div>
    </template>

    <div class="card">
      <!-- Tab filter -->
      <div class="tab-bar">
        <button
          v-for="tab in tabs"
          :key="tab.value"
          class="tab-btn"
          :class="{ 'tab-btn--active': activeTab === tab.value }"
          @click="activeTab = tab.value"
        >
          {{ tab.label }}
          <span class="tab-btn__count">{{ tabCounts[tab.value] }}</span>
        </button>
      </div>

      <el-table :data="filteredExperiments" v-loading="loading" row-key="id">
        <el-table-column label="實驗名稱" min-width="240">
          <template #default="{ row }">
            <span class="exp-name">{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="狀態" width="110">
          <template #default="{ row }">
            <span class="status-badge" :class="`status-badge--${row.status}`">
              {{ row.statusLabel }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="開始時間" min-width="160">
          <template #default="{ row }">
            <span class="time-label">{{ row.startAtLabel }}</span>
          </template>
        </el-table-column>
        <el-table-column label="結束時間" min-width="160">
          <template #default="{ row }">
            <span class="time-label">{{ row.endAtLabel }}</span>
          </template>
        </el-table-column>
        <el-table-column label="" width="160" fixed="right">
          <template #default="{ row }">
            <div class="row-actions">
              <el-button type="primary" size="small" @click="openExperiment(row.id)">查看詳情</el-button>
              <el-button size="small" @click="openEditDialog(row)">編輯</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div v-if="filteredExperiments.length === 0 && !loading" class="empty-state">
        {{ activeTab === 'all' ? '尚未建立任何實驗' : `目前沒有「${tabs.find(t => t.value === activeTab)?.label}」的實驗` }}
      </div>
    </div>

    <ExperimentFormDialog
      v-model="formDialogOpen"
      :experiment="editingExperiment"
      @saved="loadExperiments"
    />
  </AdminPageShell>
</template>

<script setup>
import { computed, ref } from "vue"
import AdminMetricCard from "@/components/AdminMetricCard.vue";
import AdminPageShell from "@/components/AdminPageShell.vue";
import ExperimentFormDialog from "@/module/experiment/components/ExperimentFormDialog.vue";
import { useExperimentListPage } from "@/module/experiment/service/use-experiment-list-page";

const {
  experiments,
  loading,
  errorMessage,
  summary,
  loadExperiments,
  openExperiment,
} = useExperimentListPage();

const formDialogOpen = ref(false)
const editingExperiment = ref(null)
const activeTab = ref("all")

const tabs = [
  { value: "all", label: "全部" },
  { value: "running", label: "進行中" },
  { value: "draft", label: "草稿" },
  { value: "ended", label: "已結束" },
]

const tabCounts = computed(() => ({
  all: experiments.value.length,
  running: experiments.value.filter(e => e.status === "running").length,
  draft: experiments.value.filter(e => e.status === "draft").length,
  ended: experiments.value.filter(e => ["ended", "paused"].includes(e.status)).length,
}))

const filteredExperiments = computed(() => {
  if (activeTab.value === "all") return experiments.value
  if (activeTab.value === "ended") return experiments.value.filter(e => ["ended", "paused"].includes(e.status))
  return experiments.value.filter(e => e.status === activeTab.value)
})

const openCreateDialog = () => {
  editingExperiment.value = null
  formDialogOpen.value = true
}

const openEditDialog = (row) => {
  editingExperiment.value = row
  formDialogOpen.value = true
}
</script>

<style scoped>
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
}

/* Tab bar */
.tab-bar {
  display: flex;
  gap: 2px;
  padding: 16px 16px 0;
  border-bottom: 1px solid #f1f5f9;
}

.tab-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  background: transparent;
  border-radius: 8px 8px 0 0;
  font-size: 13.5px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.tab-btn:hover {
  color: #0f172a;
  background: #f8fafc;
}

.tab-btn--active {
  color: #2563eb;
  border-bottom-color: #2563eb;
  font-weight: 600;
}

.tab-btn__count {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 20px;
  background: #f1f5f9;
  color: #64748b;
  min-width: 18px;
  text-align: center;
}

.tab-btn--active .tab-btn__count {
  background: #dbeafe;
  color: #2563eb;
}

/* Table cells */
.exp-name {
  font-size: 14px;
  font-weight: 500;
  color: #0f172a;
}

.time-label {
  font-size: 13px;
  color: #64748b;
}

/* Status badge */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.status-badge--draft { background: #fef9c3; color: #854d0e; }
.status-badge--running { background: #dcfce7; color: #15803d; }
.status-badge--paused { background: #e0f2fe; color: #075985; }
.status-badge--ended { background: #ffe4e6; color: #9f1239; }

/* Row actions */
.row-actions {
  display: flex;
  gap: 6px;
}

/* Empty state */
.empty-state {
  padding: 40px;
  text-align: center;
  font-size: 14px;
  color: #94a3b8;
}
</style>
