geo/apps/admin-web/src/views/TemplatesView.vue

<script setup lang="ts">
import { 
  DeleteOutlined, 
  EditOutlined,
  PlusOutlined, 
  BlockOutlined,
  ReloadOutlined,
  LoadingOutlined,
  ExperimentOutlined,
  FileTextOutlined,
  NodeIndexOutlined,
  RocketOutlined,
  TrophyOutlined,
  ArrowRightOutlined
} from "@ant-design/icons-vue";
import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
import { message } from "ant-design-vue";
import type { ArticleListItem, ArticleListParams, TemplateListItem } from "@geo/shared-types";
import type { TableColumnsType } from "ant-design-vue";
import type { Dayjs } from "dayjs";
import { computed, onBeforeUnmount, reactive, ref, watch } from "vue";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";

import { articlesApi, templatesApi } from "@/lib/api";
import { formatError } from "@/lib/errors";
import {
  formatDateTime,
  getGenerateStatusMeta,
  getPublishStatusMeta,
  getSourceTypeLabel,
  getTemplateMeta,
} from "@/lib/display";

const queryClient = useQueryClient();
const router = useRouter();
const { t } = useI18n();

const pickerOpen = ref(false);
const page = ref(1);
const pageSize = ref(10);
const draftGenerationRange = ref<[Dayjs, Dayjs] | null>(null);

const draftFilters = reactive<{
  template_id?: number;
  publish_status?: string;
  generate_status?: string;
  keyword?: string;
  created_from?: string;
  created_to?: string;
}>({
  keyword: "",
});

const appliedFilters = reactive<{
  template_id?: number;
  publish_status?: string;
  generate_status?: string;
  keyword?: string;
  created_from?: string;
  created_to?: string;
}>({
  keyword: "",
});

const templateListQuery = useQuery({
  queryKey: ["templates", "list"],
  queryFn: () => templatesApi.list(),
});

const articleParams = computed<ArticleListParams>(() => {
  const params: ArticleListParams = {
    page: page.value,
    page_size: pageSize.value,
    source_type: "template",
  };

  if (appliedFilters.template_id) {
    params.template_id = appliedFilters.template_id;
  }
  if (appliedFilters.publish_status) {
    params.publish_status = appliedFilters.publish_status;
  }
  if (appliedFilters.generate_status) {
    params.generate_status = appliedFilters.generate_status;
  }
  if (appliedFilters.keyword?.trim()) {
    params.keyword = appliedFilters.keyword.trim();
  }
  if (appliedFilters.created_from) {
    params.created_from = appliedFilters.created_from;
  }
  if (appliedFilters.created_to) {
    params.created_to = appliedFilters.created_to;
  }

  return params;
});

const articleListQuery = useQuery({
  queryKey: computed(() => ["articles", "list", articleParams.value]),
  queryFn: () => articlesApi.list(articleParams.value),
});

let articlePollingTimer: number | null = null;

const deleteMutation = useMutation({
  mutationFn: (articleId: number) => articlesApi.remove(articleId),
  onSuccess: async () => {
    message.success(t("templates.list.deleteSuccess"));
    await Promise.all([
      queryClient.invalidateQueries({ queryKey: ["articles"] }),
      queryClient.invalidateQueries({ queryKey: ["workspace"] }),
    ]);
  },
  onError: (error) => {
    message.error(formatError(error) || t("templates.list.deleteError"));
  },
});

const templateOptions = computed(() =>
  (templateListQuery.data.value || []).map((template: TemplateListItem) => ({
    label: template.template_name,
    value: template.id,
  })),
);

const generateStatusOptions = computed(() => [
  { label: getGenerateStatusMeta("draft").label, value: "draft" },
  { label: getGenerateStatusMeta("generating").label, value: "generating" },
  { label: getGenerateStatusMeta("completed").label, value: "completed" },
  { label: getGenerateStatusMeta("failed").label, value: "failed" },
]);

const publishStatusOptions = computed(() => [
  { label: getPublishStatusMeta("unpublished").label, value: "unpublished" },
  { label: getPublishStatusMeta("publishing").label, value: "publishing" },
  { label: getPublishStatusMeta("published").label, value: "published" },
  { label: getPublishStatusMeta("publish_failed").label, value: "publish_failed" },
]);

const articleColumns = computed<TableColumnsType<ArticleListItem>>(() => [
  {
    title: t("common.title"),
    dataIndex: "title",
    key: "title",
  },
  {
    title: t("common.templateType"),
    dataIndex: "template_name",
    key: "template_name",
    width: 168,
  },
  {
    title: t("common.generateStatus"),
    dataIndex: "generate_status",
    key: "generate_status",
    width: 128,
  },
  {
    title: t("common.publishStatus"),
    dataIndex: "publish_status",
    key: "publish_status",
    width: 128,
  },
  {
    title: t("common.wordCount"),
    dataIndex: "word_count",
    key: "word_count",
    width: 100,
  },
  {
    title: t("common.actions"),
    key: "actions",
    width: 120,
    align: "right",
  },
]);

// removed wizard watch effect

function applyFilters(): void {
  page.value = 1;
  appliedFilters.template_id = draftFilters.template_id;
  appliedFilters.publish_status = draftFilters.publish_status;
  appliedFilters.generate_status = draftFilters.generate_status;
  appliedFilters.keyword = draftFilters.keyword?.trim() || "";
  appliedFilters.created_from = draftGenerationRange.value?.[0]?.toISOString();
  appliedFilters.created_to = draftGenerationRange.value?.[1]?.toISOString();
}

function getTemplateCardClass(idx: number): string {
  const classes = ["card-yellow", "card-blue-light", "card-blue-deep", "card-grey"];
  return classes[idx % classes.length];
}

function getTemplateBgColorClass(idx: number): string {
  const classes = ["bg-yellow", "bg-blue-light", "bg-blue-deep", "bg-grey"];
  return classes[idx % classes.length];
}

const templateIconMap: Record<string, unknown> = {
  top_x_article: TrophyOutlined,
  product_review: ExperimentOutlined,
  research_report: FileTextOutlined,
  brand_search_expansion: NodeIndexOutlined,
};

function resolveTemplateIcon(template: TemplateListItem): unknown {
  return templateIconMap[template.template_key] ?? RocketOutlined;
}

function resetFilters(): void {
  draftFilters.template_id = undefined;
  draftFilters.publish_status = undefined;
  draftFilters.generate_status = undefined;
  draftFilters.keyword = "";
  draftGenerationRange.value = null;
  applyFilters();
}

function openTemplatePicker(): void {
  pickerOpen.value = true;
}

function startTemplate(template: TemplateListItem): void {
  pickerOpen.value = false;
  void router.push({ path: "/articles/wizard", query: { template_id: String(template.id) } });
}

function openEditor(article: ArticleListItem): void {
  if ((article.generate_status === "draft" || article.generate_status === "failed") && article.template_id) {
    void router.push({
      name: "article-wizard",
      query: {
        template_id: String(article.template_id),
        article_id: String(article.id),
      },
    });
    return;
  }

  void router.push({ name: "article-editor", params: { id: String(article.id) } });
}

function canEditArticle(status: string): boolean {
  return status === "completed" || status === "draft" || status === "failed";
}

watch(
  () => articleListQuery.data.value?.items ?? [],
  (items: ArticleListItem[]) => {
    const hasGeneratingArticles = items.some((item: ArticleListItem) =>
      item.generate_status === "generating" || item.generate_status === "running",
    );

    if (hasGeneratingArticles) {
      startArticlePolling();
      return;
    }

    stopArticlePolling();
  },
  { immediate: true },
);

onBeforeUnmount(() => {
  stopArticlePolling();
});

function handleTableChange(nextPage: number, nextPageSize: number): void {
  page.value = nextPage;
  pageSize.value = nextPageSize;
}

function startArticlePolling(): void {
  if (articlePollingTimer !== null) {
    return;
  }

  articlePollingTimer = window.setInterval(() => {
    void articleListQuery.refetch();
  }, 3000);
}

function stopArticlePolling(): void {
  if (articlePollingTimer === null) {
    return;
  }

  window.clearInterval(articlePollingTimer);
  articlePollingTimer = null;
}

async function handleDelete(articleId: number): Promise<void> {
  await deleteMutation.mutateAsync(articleId);
}
</script>

<template>
  <div class="templates-view">
    <section class="templates-view__top-card">
      <div class="templates-view__header">
        <div class="templates-view__header-title">
          <h2>{{ t('route.templates.title') }}</h2>
          <p>{{ t('route.templates.description') }}</p>
        </div>
        <div class="templates-view__header-actions">
          <a-button class="batch-generate-btn">
            <template #icon><BlockOutlined /></template>
            {{ t("templates.actions.batchGenerate") }}
          </a-button>
          <a-button type="primary" @click="openTemplatePicker">
            <template #icon><PlusOutlined /></template>
            {{ t("templates.actions.chooseTemplate") }}
          </a-button>
        </div>
      </div>

      <a-divider style="margin: 0; border-color: #f0f0f0;" />

      <div class="templates-view__filters">
        <div class="templates-view__filters-inline">
          <div class="templates-view__filter-item">
            <label>{{ t("templates.filters.template") }}:</label>
            <a-select
              v-model:value="draftFilters.template_id"
              allow-clear
              :options="templateOptions"
              :placeholder="t('common.selectPlease')"
              @change="applyFilters"
            />
          </div>

          <div class="templates-view__filter-item">
            <label>{{ t("templates.filters.publishStatus") }}:</label>
            <a-select
              v-model:value="draftFilters.publish_status"
              allow-clear
              :options="publishStatusOptions"
              :placeholder="t('common.selectPlease')"
              @change="applyFilters"
            />
          </div>

          <div class="templates-view__filter-item">
            <label>{{ t("templates.filters.generationTime") }}:</label>
            <a-range-picker
              v-model:value="draftGenerationRange"
              allow-clear
              show-time
              format="YYYY-MM-DD HH:mm"
              :placeholder="[
                t('templates.filters.generationTimeStart'),
                t('templates.filters.generationTimeEnd'),
              ]"
              @change="applyFilters"
            />
          </div>

          <div class="templates-view__filter-item">
            <label>{{ t("templates.filters.generateStatus") }}:</label>
            <a-select
              v-model:value="draftFilters.generate_status"
              allow-clear
              :options="generateStatusOptions"
              :placeholder="t('common.selectPlease')"
              @change="applyFilters"
            />
          </div>

          <div class="templates-view__filter-item">
            <label>{{ t("templates.filters.keyword") }}:</label>
            <a-input-search
              v-model:value="draftFilters.keyword"
              :placeholder="t('templates.filters.keywordPlaceholder')"
              @search="applyFilters"
              @pressEnter="applyFilters"
            />
          </div>

          <a-button @click="resetFilters" class="templates-view__reset-btn">{{ t("common.reset") }}</a-button>
        </div>
      </div>
    </section>

    <section class="templates-view__table-card">
      <div class="templates-view__table-head">
        <div>
          <p class="eyebrow">{{ t("workspace.sections.templates") }}</p>
          <h3>{{ t("templates.list.count", { count: articleListQuery.data.value?.total ?? 0 }) }}</h3>
        </div>
        <a-button type="link" @click="articleListQuery.refetch()">
          {{ t("common.refresh") }}
        </a-button>
      </div>

      <a-table
        :columns="articleColumns"
        :data-source="articleListQuery.data.value?.items || []"
        :loading="articleListQuery.isPending.value"
        row-key="id"
        :pagination="{
          current: page,
          pageSize,
          total: articleListQuery.data.value?.total || 0,
          showSizeChanger: true,
          onChange: handleTableChange,
          onShowSizeChange: handleTableChange,
        }"
      >
        <template #emptyText>{{ t("templates.list.empty") }}</template>

        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'title'">
            <div class="templates-view__title-cell">
              <strong>{{ record.title || t("article.untitled") }}</strong>
              <span>
                {{ getSourceTypeLabel(record.source_type) }} · {{ formatDateTime(record.created_at) }}
              </span>
            </div>
          </template>

          <template v-else-if="column.key === 'template_name'">
            {{ record.template_name || "--" }}
          </template>

          <template v-else-if="column.key === 'generate_status'">
            <a-tag :color="getGenerateStatusMeta(record.generate_status).color">
              <span class="templates-view__status-tag">
                <LoadingOutlined
                  v-if="record.generate_status === 'generating' || record.generate_status === 'running'"
                  spin
                />
                <span>{{ getGenerateStatusMeta(record.generate_status).label }}</span>
              </span>
            </a-tag>
          </template>

          <template v-else-if="column.key === 'publish_status'">
            <a-tag :color="getPublishStatusMeta(record.publish_status).color">
              {{ getPublishStatusMeta(record.publish_status).label }}
            </a-tag>
          </template>

          <template v-else-if="column.key === 'word_count'">
            {{ record.word_count || "--" }}
          </template>

          <template v-else-if="column.key === 'actions'">
            <div class="table-actions-row">
              <a-tooltip
                :title="canEditArticle(record.generate_status) ? t('templates.list.edit') : t('templates.list.editDisabled')"
              >
                <span>
                  <a-button
                    type="text"
                    shape="circle"
                    size="small"
                    class="action-btn action-edit"
                    :disabled="!canEditArticle(record.generate_status)"
                    @click="openEditor(record)"
                  >
                    <EditOutlined />
                  </a-button>
                </span>
              </a-tooltip>
              <a-popconfirm
                :title="t('templates.list.deleteConfirm')"
                @confirm="handleDelete(record.id)"
              >
                <a-button
                  type="text"
                  shape="circle"
                  size="small"
                  class="action-btn action-delete"
                  :loading="deleteMutation.isPending.value"
                  :title="t('common.delete')"
                >
                  <DeleteOutlined />
                </a-button>
              </a-popconfirm>
            </div>
          </template>
        </template>
      </a-table>
    </section>

    <a-modal
      v-model:open="pickerOpen"
      width="960"
      centered
      :footer="null"
      class="templates-view__picker"
    >
      <div style="text-align: center; margin-bottom: 32px; margin-top: 16px;">
        <h3 style="font-size: 18px; font-weight: 700; color: #141414; margin: 0;">{{ t('templates.picker.title') }}</h3>
      </div>
      <div class="template-cards-container">
        <article
          v-for="(template, idx) in templateListQuery.data.value || []"
          :key="template.id"
          class="template-card"
          :class="getTemplateCardClass(idx)"
          @click="startTemplate(template)"
        >
          <div class="template-icon-wrapper" :class="getTemplateBgColorClass(idx)">
            <component :is="resolveTemplateIcon(template)" class="template-icon" />
          </div>
          <h4 class="template-title">{{ template.template_name }}</h4>
          <p class="template-desc">{{ getTemplateMeta(template.template_key).helper }}</p>
          <div class="template-action">
            <span>{{ getTemplateMeta(template.template_key).action }}</span>
            <ArrowRightOutlined class="template-arrow" />
          </div>
        </article>
      </div>
    </a-modal>
  </div>
</template>

<style scoped>
.templates-view {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.templates-view__top-card {
  background: #fff;
  border: 1px solid #e6edf5;
  border-radius: 12px;
  overflow: hidden;
}

.templates-view__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px;
}

.templates-view__header-title h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.4;
}

.templates-view__header-title p {
  margin: 6px 0 0 0;
  font-size: 13px;
  color: #8c8c8c;
}

.templates-view__header-actions {
  display: flex;
  gap: 12px;
}

.batch-generate-btn {
  color: #1677ff;
  border-color: #1677ff;
}

.templates-view__filters {
  padding: 20px 24px;
}

.templates-view__table-card {
  padding: 24px;
  background: #fff;
  border: 1px solid #e6edf5;
  border-radius: 12px;
}

.templates-view__filters-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 24px;
}

.templates-view__reset-btn {
  flex-shrink: 0;
  margin-left: auto;
}

.templates-view__filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.templates-view__filter-item label {
  color: #101828;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.templates-view__filter-item :deep(.ant-select) {
  min-width: 140px;
}

.templates-view__filter-item :deep(.ant-picker) {
  width: 320px;
}

.templates-view__filter-item :deep(.ant-input-affix-wrapper),
.templates-view__filter-item :deep(.ant-input-search) {
  width: 240px;
}

.templates-view__table-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.templates-view__table-head h3 {
  margin: 6px 0 0;
  font-size: 24px;
}

.templates-view__title-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.templates-view__title-cell span {
  color: var(--muted);
  font-size: 12px;
}

.templates-view__status-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.template-cards-container {
  display: flex;
  gap: 16px;
  flex: 1;
}

.template-card {
  flex: 1;
  border-radius: 12px;
  padding: 20px 16px;
  cursor: pointer;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}
.template-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.06);
}

.template-icon-wrapper {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.template-icon {
  font-size: 16px;
}

.template-title {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 8px 0;
}
.template-desc {
  font-size: 12px;
  color: #8c8c8c;
  line-height: 1.5;
  margin: 0 0 16px 0;
  flex: 1;
}
.template-action {
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}
.template-arrow {
  font-size: 10px;
}

/* Yellow Top X */
.card-yellow {
  background: linear-gradient(180deg, #fffbf2 0%, #fff6e0 100%);
  border: 1px solid #ffecb3;
}
.bg-yellow { background: #ffe58f; color: #fa8c16; }
.card-yellow .template-action { color: #fa8c16; }

/* Light Blue Product Review */
.card-blue-light {
  background: linear-gradient(180deg, #f0f7ff 0%, #e6f0ff 100%);
  border: 1px solid #d6e4ff;
}
.bg-blue-light { background: #bae0ff; color: #1677ff; }
.card-blue-light .template-action { color: #1677ff; }

/* Blue Deep Research */
.card-blue-deep {
  background: linear-gradient(135deg, #e6f4ff 0%, #d4e8ff 100%);
  border: 1px solid #bae0ff;
}
.bg-blue-deep { background: #91caff; color: #0958d9; }
.card-blue-deep .template-action { color: #0958d9; }

/* Grey Expansion */
.card-grey {
  background: #fcfcfc;
  border: 1px dashed #d9d9d9;
}

@media (max-width: 1200px) {
  .templates-view__filter-item :deep(.ant-picker) {
    width: 280px;
  }
}

.bg-grey { background: #f0f0f0; color: #8c8c8c; }
.card-grey .template-action { display: none; }

@media (max-width: 720px) {
  .templates-view__table-head {
    flex-direction: column;
    align-items: stretch;
  }
}
</style>