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

<script setup lang="ts">
import { 
  DeleteOutlined, 
  EyeOutlined, 
  PlusOutlined, 
  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 { computed, onBeforeUnmount, reactive, ref, watch } from "vue";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";

import ArticleDetailDrawer from "@/components/ArticleDetailDrawer.vue";
import PageHero from "@/components/PageHero.vue";
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 articleDrawerOpen = ref(false);
const selectedArticleId = ref<number | null>(null);
const page = ref(1);
const pageSize = ref(10);

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

const appliedFilters = reactive<{
  template_id?: number;
  publish_status?: string;
  generate_status?: string;
  keyword?: 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();
  }

  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) => ({
    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: 180,
  },
]);

// 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() || "";
}

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 = "";
  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 openArticle(articleId: number): void {
  selectedArticleId.value = articleId;
  articleDrawerOpen.value = true;
}

watch(
  () => articleListQuery.data.value?.items ?? [],
  (items) => {
    const hasGeneratingArticles = items.some((item) =>
      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);
}

function handleDrawerClose(): void {
  articleDrawerOpen.value = false;
  selectedArticleId.value = null;
}
</script>

<template>
  <div class="templates-view">
    <PageHero
      eyebrow="Article Creation"
      :title="t('route.templates.title')"
      :description="t('route.templates.description')"
    >
      <template #actions>
        <a-button disabled>{{ t("templates.actions.batchGenerate") }}</a-button>
        <a-button type="primary" @click="openTemplatePicker">
          <template #icon><PlusOutlined /></template>
          {{ t("templates.actions.chooseTemplate") }}
        </a-button>
      </template>
    </PageHero>

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

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

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

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

      <div class="templates-view__filter-actions">
        <div class="templates-view__filter-note">
          {{ t("templates.filters.unsupportedDate") }}
        </div>
        <div class="templates-view__filter-buttons">
          <a-button @click="resetFilters">{{ t("common.reset") }}</a-button>
          <a-button type="primary" @click="applyFilters">
            <template #icon><ReloadOutlined /></template>
            {{ t("common.refresh") }}
          </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="templates-view__actions">
              <a-tooltip :title="t('templates.list.preview')">
                <a-button size="small" @click="openArticle(record.id)">
                  <template #icon><EyeOutlined /></template>
                </a-button>
              </a-tooltip>
              <a-popconfirm
                :title="t('templates.list.deleteConfirm')"
                @confirm="handleDelete(record.id)"
              >
                <a-button size="small" danger :loading="deleteMutation.isPending.value">
                  <template #icon><DeleteOutlined /></template>
                </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>



    <ArticleDetailDrawer
      :open="articleDrawerOpen"
      :article-id="selectedArticleId"
      @close="handleDrawerClose"
    />
  </div>
</template>

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

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

.templates-view__filters-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.templates-view__filter {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.templates-view__filter label {
  color: #445164;
  font-size: 13px;
  font-weight: 600;
}

.templates-view__filter-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
}

.templates-view__filter-note {
  color: var(--muted);
  font-size: 12px;
}

.templates-view__filter-buttons {
  display: flex;
  gap: 12px;
}

.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__actions {
  display: flex;
  gap: 8px;
}

.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;
}
.bg-grey { background: #f0f0f0; color: #8c8c8c; }
.card-grey .template-action { display: none; }

@media (max-width: 1080px) {
  .templates-view__filters-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .templates-view__filters-grid,
  .templates-view__picker-grid {
    grid-template-columns: 1fr;
  }

  .templates-view__filter-actions,
  .templates-view__table-head {
    flex-direction: column;
    align-items: stretch;
  }

  .templates-view__filter-buttons {
    width: 100%;
  }

  .templates-view__filter-buttons :deep(.ant-btn) {
    flex: 1;
  }
}
</style>