<script setup lang="ts">
import type { AdminAgisoObservedShopItem } from '@/types/admin'
import { formatAdminDateTime } from '@/utils/admin-time'

import type { EditableDefaults, EditableShop } from '../composables/types'

type Props = {
  agisoFilePath: string
  defaults: EditableDefaults
  shops: EditableShop[]
  observedShops: AdminAgisoObservedShopItem[]
  saving: boolean
  isShopExpanded: (id: string) => boolean
  toggleShop: (id: string) => void
  expandAllShops: () => void
  collapseAllShops: () => void
  describeShop: (shop: EditableShop) => string
  removeShop: (id: string) => void
  importObservedShop: (item: AdminAgisoObservedShopItem) => void
  saveAgisoConfigs: () => void | Promise<void>
}

defineProps<Props>()
</script>

<template>
  <div class="platform-section">
    <!-- 配置信息 -->
    <el-card class="section-card">
      <template #header>
        <span class="card-title">配置信息</span>
      </template>
      <el-descriptions :column="1" border size="small">
        <el-descriptions-item label="配置文件">
          <code>{{ agisoFilePath || '-' }}</code>
        </el-descriptions-item>
        <el-descriptions-item label="职责">
          管理 Agiso 默认消息模板、店铺 AccessToken 以及店铺级模板覆盖。
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- 默认消息模板 -->
    <el-card class="section-card">
      <template #header>
        <div class="card-header">
          <div>
            <span class="card-title">默认消息模板</span>
            <p class="card-desc">
              Agiso 店铺未单独配置时，统一使用这里的领取消息与自动发货消息模板。
            </p>
          </div>
        </div>
      </template>
      <el-form label-width="auto" label-position="top">
        <el-form-item label="默认领取链接消息模板">
          <el-input
            v-model="defaults.messageTemplate"
            type="textarea"
            :rows="3"
            placeholder="例如：您的订单 {platformOrderId} 已创建领取链接，请尽快打开并完成领取：{claimUrl}"
          />
        </el-form-item>
        <el-form-item label="默认自动发货消息模板">
          <el-input
            v-model="defaults.autoDeliveryMessageTemplate"
            type="textarea"
            :rows="3"
            placeholder="例如：您的订单 {platformOrderId} 已完成自动发货，请注意查收。"
          />
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 店铺列表 -->
    <el-card class="section-card">
      <template #header>
        <div class="card-header">
          <div>
            <span class="card-title">Agiso 店铺列表</span>
            <p class="card-desc">
              每家店铺可单独配置 AccessToken 和模板覆盖。建议先用"近期识别到的店铺"导入，再补
              AccessToken。
            </p>
          </div>
          <div class="card-actions">
            <el-button :disabled="shops.length === 0" @click="expandAllShops">全部展开</el-button>
            <el-button :disabled="shops.length === 0" @click="collapseAllShops">全部折叠</el-button>
            <el-button :loading="saving" type="primary" @click="saveAgisoConfigs"
              >保存 Agiso 配置</el-button
            >
          </div>
        </div>
      </template>

      <el-empty v-if="shops.length === 0" description="当前还没有 Agiso 店铺配置，先新增一条。" />

      <el-collapse v-else :model-value="shops.filter((s) => isShopExpanded(s.id)).map((s) => s.id)">
        <el-collapse-item v-for="shop in shops" :key="shop.id" :name="shop.id">
          <template #title>
            <div class="shop-title">
              <strong>{{ shop.shopName || shop.shopId || '未命名店铺' }}</strong>
              <span class="shop-subtitle">ID: {{ shop.shopId || '未填写' }}</span>
              <el-tag
                :type="shop.enabled ? 'success' : 'info'"
                size="small"
                style="margin-left: auto; margin-right: 12px"
              >
                {{ shop.enabled ? '已启用' : '已停用' }}
              </el-tag>
              <span class="shop-brief">{{ describeShop(shop) }}</span>
            </div>
          </template>

          <el-form label-width="auto" label-position="top">
            <el-row :gutter="16">
              <el-col :span="12">
                <el-form-item label="店铺 ID">
                  <el-input v-model="shop.shopId" placeholder="例如 693760716" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="店铺名称">
                  <el-input v-model="shop.shopName" placeholder="例如 大锤商行" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="AccessToken">
              <el-input v-model="shop.accessToken" placeholder="AldsIdle..." />
            </el-form-item>
            <el-form-item label="领取链接消息模板">
              <el-input
                v-model="shop.messageTemplate"
                type="textarea"
                :rows="2"
                placeholder="留空则沿用默认领取链接模板"
              />
            </el-form-item>
            <el-form-item label="自动发货消息模板">
              <el-input
                v-model="shop.autoDeliveryMessageTemplate"
                type="textarea"
                :rows="2"
                placeholder="留空则沿用默认自动发货模板"
              />
            </el-form-item>
          </el-form>

          <div class="shop-footer">
            <el-switch v-model="shop.enabled" active-text="启用店铺级覆盖" />
            <el-button type="danger" size="small" @click="removeShop(shop.id)">删除</el-button>
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-card>

    <!-- 近期识别到的店铺 -->
    <el-card class="section-card">
      <template #header>
        <div>
          <span class="card-title">近期识别到的 Agiso 店铺</span>
          <p class="card-desc">从 webhook 自动识别出的店铺，可一键导入到上方店铺列表。</p>
        </div>
      </template>

      <el-table :data="observedShops" stripe size="small">
        <el-table-column label="店铺" min-width="180">
          <template #default="{ row }">
            <div>
              <div>{{ row.displayShopName || row.shopId }}</div>
              <div class="text-muted-xs">
                ID: {{ row.shopId }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="webhookEventCount" label="Webhook 次数" width="120" align="center" />
        <el-table-column label="最近出现时间" width="180">
          <template #default="{ row }">{{ formatAdminDateTime(row.latestSeenAt) }}</template>
        </el-table-column>
        <el-table-column label="状态" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="row.configured ? 'success' : 'warning'" size="small">
              {{ row.configured ? '已配置' : '未配置' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="140" align="center">
          <template #default="{ row }">
            <el-button
              v-if="!row.configured"
              size="small"
              type="primary"
              @click="importObservedShop(row)"
            >
              导入到店铺
            </el-button>
            <span v-else class="text-muted">已存在</span>
          </template>
        </el-table-column>
        <template #empty>
          <el-empty description="最近还没有识别到可用店铺。" :image-size="60" />
        </template>
      </el-table>
    </el-card>
  </div>
</template>

<style scoped>
.platform-section {
  display: grid;
  gap: var(--space-4);
}

.section-card {
  border-radius: var(--radius-lg);
}

.card-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.card-desc {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.card-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.shop-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
  padding-right: var(--space-4);
}

.shop-title strong {
  white-space: nowrap;
}

.shop-subtitle {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.shop-brief {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-left: auto;
}

.shop-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-default);
}

.text-muted {
  color: var(--text-muted);
}
</style>
