<template>
  <AdminPageShell
    eyebrow="版本詳情"
    :title="releaseTitle"
    :description="release?.id || route.params.releaseId"
  >
    <template #actions>
      <el-button @click="goBack">返回實驗</el-button>
      <el-button @click="loadPage">重新整理</el-button>
      <el-button
        v-if="release?.status !== 'published'"
        type="success"
        :loading="lifecycleLoading"
        @click="handlePublish"
      >
        發佈版本
      </el-button>
      <el-button
        v-if="release?.status === 'published'"
        type="warning"
        :loading="lifecycleLoading"
        @click="handleRollback"
      >
        回退至草稿
      </el-button>
      <el-button type="primary" :disabled="!primaryVariant?.id" @click="openPrimaryVariantEditor">
        回到主要變體編輯器
      </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="release?.status || '-'" :tone="releaseStatusTag" hint="目前 release 狀態" />
        <AdminMetricCard label="版本號" :value="release?.versionNo ?? 0" tone="info" hint="目前 release 版本號" />
        <AdminMetricCard label="執行內容欄位" :value="payloadSummary.keyCount" hint="版本執行內容的第一層欄位數量" />
        <AdminMetricCard label="變體數量" :value="payloadSummary.variants" tone="success" hint="已收進版本快照的變體數量" />
      </div>
    </template>

    <div class="two-col">
      <!-- Left: summary + payload -->
      <div class="left-col">
        <div class="card">
          <div class="card__header">
            <p class="card__title">版本摘要</p>
            <el-tag :type="releaseStatusTag" effect="light">{{ release?.status || "-" }}</el-tag>
          </div>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="所屬實驗">
              <el-button link type="primary" :disabled="!release?.experimentId" @click="openExperiment">
                {{ experiment?.name || release?.experimentId || "-" }}
              </el-button>
            </el-descriptions-item>
            <el-descriptions-item label="頁面網址">
              <span class="break-all">{{ recommendedBaseUrl || "尚未設定" }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="第一層欄位">
              {{ payloadSummary.keys.join(", ") || "-" }}
            </el-descriptions-item>
            <el-descriptions-item label="執行內容">
              {{ payloadSummary.keyCount > 0 ? "已建立" : "尚未建立" }}
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="card">
          <p class="card__title" style="margin-bottom: 14px">版本執行內容</p>
          <pre class="code-block"><code>{{ runtimePayloadPreview }}</code></pre>
        </div>
      </div>

      <!-- Right: readiness + next step -->
      <div class="side-col">
        <div class="card">
          <p class="card__title" style="margin-bottom: 14px">版本可用狀態</p>
          <div
            class="status-block"
            :class="releaseReadiness.level === 'ready' ? 'status-block--success' : 'status-block--warning'"
          >
            <p class="status-block__heading">{{ releaseReadiness.title }}</p>
            <p class="status-block__desc">{{ releaseReadiness.description }}</p>
            <div class="status-block__actions">
              <el-button size="small" :disabled="!primaryVariant?.id" @click="openPrimaryVariantEditor">
                回到主要變體編輯器
              </el-button>
              <el-button size="small" @click="openExperiment">回到實驗設定</el-button>
            </div>
          </div>
        </div>

        <div class="card">
          <p class="card__title" style="margin-bottom: 14px">現在建議做的事</p>
          <div class="status-block status-block--info">
            <p class="status-block__heading">{{ nextStepSummary.title }}</p>
            <p class="status-block__desc">{{ nextStepSummary.description }}</p>
            <el-button
              class="status-block__btn"
              size="small"
              type="primary"
              :disabled="!primaryVariant?.id"
              @click="runNextStep"
            >
              {{ nextStepSummary.actionLabel }}
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </AdminPageShell>
</template>

<script setup>
import { ref } from "vue"
import { ElMessage } from "element-plus"
import AdminMetricCard from "@/components/AdminMetricCard.vue";
import AdminPageShell from "@/components/AdminPageShell.vue";
import { useReleaseDetailPage } from "@/module/release/service/use-release-detail-page";
import releaseApi from "@/module/release/service/release-api";

const {
  route,
  errorMessage,
  release,
  payloadSummary,
  releaseReadiness,
  releaseTitle,
  releaseStatusTag,
  runtimePayloadPreview,
  recommendedBaseUrl,
  experiment,
  primaryVariant,
  nextStepSummary,
  loadPage,
  openExperiment,
  openPrimaryVariantEditor,
  goBack,
  runNextStep,
} = useReleaseDetailPage();

const lifecycleLoading = ref(false)

const handlePublish = async () => {
  lifecycleLoading.value = true
  try {
    await releaseApi.publishRelease(release.value.id)
    ElMessage.success("Release 已發佈")
    await loadPage()
  } catch (error) {
    ElMessage.error(error?.message || "發佈失敗")
  } finally {
    lifecycleLoading.value = false
  }
}

const handleRollback = async () => {
  lifecycleLoading.value = true
  try {
    await releaseApi.rollbackRelease(release.value.id)
    ElMessage.success("Release 已回退至草稿")
    await loadPage()
  } catch (error) {
    ElMessage.error(error?.message || "回退失敗")
  } finally {
    lifecycleLoading.value = false
  }
}
</script>

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

.two-col {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 16px;
  align-items: start;
}

.left-col,
.side-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Card */
.card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px 22px;
}

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}

.card__title {
  margin: 0;
  color: #0f172a;
  font-size: 14px;
  font-weight: 600;
}

/* Code block */
.code-block {
  margin: 0;
  overflow: auto;
  border-radius: 10px;
  background: #0f172a;
  padding: 14px 16px;
  font-size: 12px;
  line-height: 1.6;
  color: #e2e8f0;
}

/* Status blocks */
.status-block {
  border: 1px solid;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.status-block--success {
  border-color: #d1fae5;
  background: #f0fdf4;
}

.status-block--warning {
  border-color: #fde68a;
  background: #fffbeb;
}

.status-block--info {
  border-color: #bae6fd;
  background: #f0f9ff;
}

.status-block__heading {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: #0f172a;
}

.status-block__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #475569;
}

.status-block__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.status-block__btn {
  align-self: flex-start;
  margin-top: 4px;
}

.break-all {
  word-break: break-all;
}
</style>
