<template>
  <AdminPageShell
    eyebrow="變體詳情"
    :title="variant?.name || '載入中...'"
    :description="variant?.variantKey || route.params.variantId"
  >
    <template #actions>
      <el-button @click="goBack">返回實驗</el-button>
      <el-button @click="loadPage">重新整理</el-button>
      <el-button :disabled="!latestRelease?.id" @click="openLatestRelease">查看最新版本</el-button>
      <el-button type="primary" :disabled="!variant?.id" @click="openEditor">打開編輯器</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="(variant?.trafficWeight ?? 0) + '%'" tone="info" hint="這個變體分配到的流量比例" />
        <AdminMetricCard label="視覺變更" :value="changesSummary.total" tone="success" hint="已設定的頁面修改數量" />
      </div>
    </template>

    <div class="two-col">
      <!-- Left: config + changes -->
      <div class="left-col">
        <div class="card">
          <div class="card__header">
            <p class="card__title">變體資訊</p>
          </div>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="變體代號">{{ variant?.variantKey || "-" }}</el-descriptions-item>
            <el-descriptions-item label="所屬實驗">
              <el-button link type="primary" :disabled="!variant?.experimentId" @click="openExperiment">
                {{ experiment?.name || variant?.experimentId || "-" }}
              </el-button>
            </el-descriptions-item>
            <el-descriptions-item label="套用頁面網址">
              <span class="break-all">{{ recommendedBaseUrl || "尚未設定頁面網址" }}</span>
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="card">
          <div class="card__header">
            <p class="card__title">變更摘要</p>
            <el-button size="small" type="primary" :disabled="!variant?.id" @click="openEditor">
              繼續編輯這個變體
            </el-button>
          </div>

          <div class="change-stats">
            <div class="change-stat">
              <p class="change-stat__label">文字</p>
              <p class="change-stat__value">{{ changesSummary.text }}</p>
            </div>
            <div class="change-stat">
              <p class="change-stat__label">HTML</p>
              <p class="change-stat__value">{{ changesSummary.html }}</p>
            </div>
            <div class="change-stat">
              <p class="change-stat__label">樣式</p>
              <p class="change-stat__value">{{ changesSummary.style }}</p>
            </div>
            <div class="change-stat">
              <p class="change-stat__label">屬性</p>
              <p class="change-stat__value">{{ changesSummary.attribute }}</p>
            </div>
          </div>

          <div v-if="changeCards.length === 0" class="empty-state">
            目前這個 Variant 還沒有任何變更內容，適合直接進 Editor 建立第一筆修改。
          </div>

          <div v-else class="change-list">
            <div v-for="card in changeCards" :key="card.id" class="change-item">
              <div class="change-item__top">
                <div>
                  <p class="change-item__type">{{ card.changeTypeLabel }}</p>
                  <p class="change-item__selector">{{ card.selector }}</p>
                </div>
              </div>
              <pre class="code-block"><code>{{ card.payloadPreview }}</code></pre>
            </div>
          </div>
        </div>
      </div>

      <!-- Right: editor state + next steps -->
      <div class="side-col">
        <div class="card">
          <p class="card__title">編輯器狀態</p>
          <div
            class="status-block"
            :class="
              editorEntry.level === 'ready' ? 'status-block--success'
              : editorEntry.level === 'info' ? 'status-block--info'
              : 'status-block--warning'
            "
          >
            <p class="status-block__heading">{{ editorEntry.title }}</p>
            <p class="status-block__desc">{{ editorEntry.description }}</p>
            <el-button class="status-block__btn" size="small" type="primary" :disabled="!variant?.id" @click="openEditor">
              {{ editorEntry.actionLabel }}
            </el-button>
          </div>
        </div>

        <div class="card">
          <p class="card__title">內容設定</p>
          <pre class="code-block"><code>{{ JSON.stringify(variant?.contentConfig || {}, null, 2) }}</code></pre>
        </div>

        <div class="card">
          <p class="card__title" style="margin-bottom: 14px">下一步建議</p>

          <div class="info-row">
            <p class="info-row__label">最新版本</p>
            <p class="info-row__value">{{ latestRelease?.release_version || latestRelease?.version_no || "尚未建立版本" }}</p>
            <p class="info-row__sub">
              {{
                latestRelease?.id
                  ? "你可以先看最新版本是否已帶出 runtime payload，再回到 editor 做細節調整。"
                  : "目前還沒有版本，可先進 editor 完成變更與預覽。"
              }}
            </p>
            <div class="info-row__actions">
              <el-button size="small" :disabled="!latestRelease?.id" @click="openLatestRelease">查看最新版本</el-button>
              <el-button size="small" type="primary" :disabled="!variant?.id" @click="openEditor">進入編輯器</el-button>
            </div>
          </div>

          <div class="status-block status-block--info">
            <p class="info-row__label" style="color: #0284c7">現在建議做的事</p>
            <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" @click="runNextStep">
              {{ nextStepSummary.actionLabel }}
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </AdminPageShell>
</template>

<script setup>
import AdminMetricCard from "@/components/AdminMetricCard.vue";
import AdminPageShell from "@/components/AdminPageShell.vue";
import { useVariantDetailPage } from "@/module/variant/service/use-variant-detail-page";

const {
  route,
  errorMessage,
  variant,
  experiment,
  changesSummary,
  changeCards,
  recommendedBaseUrl,
  editorEntry,
  latestRelease,
  nextStepSummary,
  loadPage,
  openEditor,
  openExperiment,
  openLatestRelease,
  goBack,
  runNextStep,
} = useVariantDetailPage();
</script>

<style scoped>
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 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;
}

/* Change stats */
.change-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 4px;
}

.change-stat {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  background: #f8fafc;
}

.change-stat__label {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #94a3b8;
}

.change-stat__value {
  margin: 6px 0 0;
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Change list */
.change-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.change-item {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.change-item__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

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

.change-item__selector {
  margin: 4px 0 0;
  font-size: 12px;
  color: #64748b;
  word-break: break-all;
}

/* 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__btn {
  align-self: flex-start;
  margin-top: 4px;
}

/* Info rows */
.info-row {
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.info-row__label {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #94a3b8;
}

.info-row__value {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}

.info-row__sub {
  margin: 0;
  font-size: 12px;
  color: #64748b;
  line-height: 1.6;
}

.info-row__actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* Empty state */
.empty-state {
  border: 1px dashed #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
  padding: 28px;
  text-align: center;
  font-size: 13.5px;
  color: #94a3b8;
}

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