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

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

import ArticleActionGroup from '@/components/ArticleActionGroup.vue'
import ArticleDetailDrawer from '@/components/ArticleDetailDrawer.vue'
import ArticleGenerateStatus from '@/components/ArticleGenerateStatus.vue'
import ArticlePublishStatus from '@/components/ArticlePublishStatus.vue'
import ArticleSourceMeta from '@/components/ArticleSourceMeta.vue'
import PublishArticleModal from '@/components/PublishArticleModal.vue'
import { articlesApi, templatesApi, workspaceApi } from '@/lib/api'
import { buildArticleClipboardContent, resolveArticleActionState } from '@/lib/article-list-actions'
import { useArticleRegenerateAction } from '@/lib/article-regenerate-action'
import {
  formatDateTime,
  getGenerateStatusMeta,
  getPublishStatusMeta,
  hasActiveGenerationStatus,
  getTemplateMeta,
} from '@/lib/display'
import { formatError } from '@/lib/errors'

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

const pickerOpen = ref(false)
const pickerMode = ref<'general' | 'refined' | null>(null)
const publishModalOpen = ref(false)
const selectedPublishArticleId = ref<number | null>(null)
const articleDrawerOpen = ref(false)
const selectedArticleId = ref<number | null>(null)
const page = ref(1)
const pageSize = ref(10)
const draftGenerationRange = ref<[Dayjs, Dayjs] | null>(null)

const draftFilters = reactive<{
  template_filter?: string
  publish_status?: string
  generate_status?: string
  keyword?: string
  created_from?: string
  created_to?: string
}>({
  keyword: '',
})

const appliedFilters = reactive<{
  template_filter?: string
  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 kolCardsQuery = useQuery({
  queryKey: ['workspace', 'kol-cards', 'templates'],
  queryFn: () => workspaceApi.kolCards(),
})

const recentArticlesQuery = useQuery({
  queryKey: ['workspace', 'recent-articles', 'templates'],
  queryFn: () => workspaceApi.recentArticles(),
})

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

  const templateFilter = appliedFilters.template_filter
  if (templateFilter?.startsWith('source:')) {
    params.source_type = templateFilter.replace('source:', '')
  } else if (templateFilter?.startsWith('template:')) {
    params.source_type = 'template'
    params.template_id = Number(templateFilter.replace('template:', ''))
  } else if (templateFilter?.startsWith('kol:')) {
    params.source_type = 'kol'
    params.kol_prompt_id = Number(templateFilter.replace('kol:', ''))
  }
  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),
})

const hasActiveRecordFilters = computed(() =>
  Boolean(
    appliedFilters.template_filter ||
    appliedFilters.publish_status ||
    appliedFilters.generate_status ||
    appliedFilters.keyword?.trim() ||
    appliedFilters.created_from ||
    appliedFilters.created_to,
  ),
)

const recentTemplateArticles = computed<ArticleListItem[]>(() =>
  (recentArticlesQuery.data.value || [])
    .filter(
      (article: RecentArticle) =>
        article.source_type === 'template' || article.source_type === 'kol',
    )
    .map((article: RecentArticle) => ({
      id: article.id,
      source_type: article.source_type,
      template_id: null,
      kol_prompt_id: null,
      template_name:
        article.template_name ||
        (article.source_type === 'kol'
          ? t('templates.sections.refinedTemplates')
          : t('templates.sections.generalTemplates')),
      prompt_rule_id: null,
      prompt_rule_name: null,
      generation_mode: article.generation_mode,
      auto_publish_platforms: [],
      generate_status: article.generate_status,
      publish_status: article.publish_status,
      title: article.title,
      generation_error_message: null,
      word_count: article.word_count,
      source_label: article.source_label,
      created_at: article.created_at,
    })),
)

const shouldUseRecentFallback = computed(
  () =>
    !hasActiveRecordFilters.value &&
    (articleListQuery.data.value?.total ?? 0) === 0 &&
    recentTemplateArticles.value.length > 0,
)

const displayedArticles = computed<ArticleListItem[]>(() =>
  shouldUseRecentFallback.value
    ? recentTemplateArticles.value
    : articleListQuery.data.value?.items || [],
)

const displayedArticleTotal = computed(() =>
  shouldUseRecentFallback.value
    ? recentTemplateArticles.value.length
    : articleListQuery.data.value?.total || 0,
)

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 { regeneratingArticleId, handleRegenerate } = useArticleRegenerateAction()

const templateFilterOptions = computed(() => {
  return [
    { label: t('templates.sections.generalTemplates'), value: 'source:template' },
    { label: t('templates.sections.refinedTemplates'), value: 'source:kol' },
  ]
})

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('success').label, value: 'success' },
  { label: getPublishStatusMeta('partial_success').label, value: 'partial_success' },
  { label: getPublishStatusMeta('failed').label, value: 'failed' },
])

const articleColumns = computed<TableColumnsType<ArticleListItem>>(() => [
  {
    title: t('common.title'),
    dataIndex: 'title',
    key: 'title',
    width: 360,
  },
  {
    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: 156,
    align: 'right',
  },
])

const articlePagination = computed(() =>
  shouldUseRecentFallback.value
    ? false
    : {
        current: page.value,
        pageSize: pageSize.value,
        total: displayedArticleTotal.value,
        showSizeChanger: true,
        onChange: handleTableChange,
        onShowSizeChange: handleTableChange,
      },
)

// removed wizard watch effect

function applyFilters(): void {
  page.value = 1
  appliedFilters.template_filter = draftFilters.template_filter
  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_filter = undefined
  draftFilters.publish_status = undefined
  draftFilters.generate_status = undefined
  draftFilters.keyword = ''
  draftGenerationRange.value = null
  applyFilters()
}

function openTemplatePicker(): void {
  pickerOpen.value = true
  pickerMode.value = 'general'
}

function choosePickerMode(mode: 'general' | 'refined'): void {
  pickerMode.value = mode
}

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

function openRefinedTemplate(card: KolWorkspaceCard): void {
  pickerOpen.value = false
  pickerMode.value = null
  void router.push({
    name: 'kol-generate',
    params: { subscriptionPromptId: String(card.subscription_prompt_id) },
    query: { source: 'templates' },
  })
}

async function openEditor(article: ArticleListItem): Promise<void> {
  try {
    const detail = await articlesApi.detail(article.id)

    if (
      detail.generate_status === 'draft' &&
      detail.source_type === 'template' &&
      detail.template_id
    ) {
      await router.push({
        name: 'article-wizard',
        query: {
          template_id: String(detail.template_id),
          article_id: String(detail.id),
        },
      })
      return
    }

    await router.push({ name: 'article-editor', params: { id: String(detail.id) } })
  } catch (error) {
    message.error(formatError(error) || t('common.noData'))
  }
}

function openPublish(article: ArticleListItem): void {
  selectedPublishArticleId.value = article.id
  publishModalOpen.value = true
}

function openPreview(article: ArticleListItem): void {
  selectedArticleId.value = article.id
  articleDrawerOpen.value = true
}

watch(
  () => displayedArticles.value,
  (items: ArticleListItem[]) => {
    const hasGeneratingArticles = items.some((item: ArticleListItem) =>
      hasActiveGenerationStatus(item.generate_status),
    )

    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 queryClient.invalidateQueries({ queryKey: ['articles'] })
    void queryClient.invalidateQueries({ queryKey: ['workspace', 'recent-articles'] })
    void Promise.all([articleListQuery.refetch(), recentArticlesQuery.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)
}

async function copyArticle(articleId: number): Promise<void> {
  try {
    const detail = await articlesApi.detail(articleId)
    const content = buildArticleClipboardContent(detail)

    if (!content) {
      message.warning(t('common.noData'))
      return
    }

    await navigator.clipboard.writeText(content)
    message.success(t('common.copySuccess'))
  } catch (error) {
    message.error(formatError(error) || t('common.noData'))
  }
}

function refreshRecords(): void {
  void Promise.all([articleListQuery.refetch(), recentArticlesQuery.refetch()])
}
</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 type="primary" class="templates-view__create-btn" @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_filter"
              allow-clear
              :options="templateFilterOptions"
              :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 class="templates-view__reset-btn" @click="resetFilters">
            {{ 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('templates.list.eyebrow') }}</p>
          <h3>{{ t('templates.list.count', { count: displayedArticleTotal }) }}</h3>
        </div>
        <a-button type="link" @click="refreshRecords">
          {{ t('common.refresh') }}
        </a-button>
      </div>

      <a-table
        class="templates-view__desktop-table"
        :columns="articleColumns"
        :data-source="displayedArticles"
        :loading="articleListQuery.isPending.value || recentArticlesQuery.isPending.value"
        row-key="id"
        :pagination="articlePagination"
        :scroll="{ x: 1068 }"
      >
        <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>
              <ArticleSourceMeta
                :source-type="record.source_type"
                :generation-mode="record.generation_mode"
                :created-at="record.created_at"
              />
            </div>
          </template>

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

          <template v-else-if="column.key === 'generate_status'">
            <ArticleGenerateStatus :status="record.generate_status" />
          </template>

          <template v-else-if="column.key === 'publish_status'">
            <ArticlePublishStatus :status="record.publish_status" :article-id="record.id" />
          </template>

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

          <template v-else-if="column.key === 'actions'">
            <ArticleActionGroup
              v-bind="resolveArticleActionState(record)"
              :delete-confirm-title="t('templates.list.deleteConfirm')"
              :delete-loading="deleteMutation.isPending.value"
              :regenerate-confirm-title="t('common.regenerateConfirm')"
              :regenerate-loading="regeneratingArticleId === record.id"
              @publish="openPublish(record)"
              @edit="openEditor(record)"
              @preview="openPreview(record)"
              @copy="copyArticle(record.id)"
              @regenerate="handleRegenerate(record)"
              @delete="handleDelete(record.id)"
            />
          </template>
        </template>
      </a-table>

      <div class="templates-view__mobile-records">
        <a-skeleton
          v-if="articleListQuery.isPending.value || recentArticlesQuery.isPending.value"
          active
          :paragraph="{ rows: 6 }"
        />

        <a-empty v-else-if="!displayedArticles.length" :description="t('templates.list.empty')" />

        <template v-else>
          <article
            v-for="record in displayedArticles"
            :key="record.id"
            class="templates-view__mobile-record"
          >
            <div class="templates-view__mobile-record-main">
              <h4>{{ record.title || t('article.untitled') }}</h4>
              <ArticleSourceMeta
                :source-type="record.source_type"
                :generation-mode="record.generation_mode"
                :created-at="record.created_at"
              />
            </div>

            <div class="templates-view__mobile-record-meta">
              <div class="templates-view__mobile-record-field">
                <span>{{ t('common.templateType') }}</span>
                <strong>{{ record.template_name || '--' }}</strong>
              </div>
              <div class="templates-view__mobile-record-field">
                <span>{{ t('common.wordCount') }}</span>
                <strong>{{ record.word_count || '--' }}</strong>
              </div>
            </div>

            <div class="templates-view__mobile-record-status">
              <div class="templates-view__mobile-record-field">
                <span>{{ t('common.generateStatus') }}</span>
                <ArticleGenerateStatus :status="record.generate_status" />
              </div>
              <div class="templates-view__mobile-record-field">
                <span>{{ t('common.publishStatus') }}</span>
                <ArticlePublishStatus :status="record.publish_status" :article-id="record.id" />
              </div>
            </div>

            <div class="templates-view__mobile-record-actions">
              <span>{{ t('common.actions') }}</span>
              <ArticleActionGroup
                v-bind="resolveArticleActionState(record)"
                :delete-confirm-title="t('templates.list.deleteConfirm')"
                :delete-loading="deleteMutation.isPending.value"
                :regenerate-confirm-title="t('common.regenerateConfirm')"
                :regenerate-loading="regeneratingArticleId === record.id"
                @publish="openPublish(record)"
                @edit="openEditor(record)"
                @preview="openPreview(record)"
                @copy="copyArticle(record.id)"
                @regenerate="handleRegenerate(record)"
                @delete="handleDelete(record.id)"
              />
            </div>
          </article>

          <a-pagination
            v-if="!shouldUseRecentFallback"
            class="templates-view__mobile-pagination"
            :current="page"
            :page-size="pageSize"
            :total="displayedArticleTotal"
            size="small"
            @change="handleTableChange"
          />
        </template>
      </div>
    </section>

    <a-drawer
      v-model:open="pickerOpen"
      :title="t('templates.picker.title')"
      placement="right"
      width="960"
      class="templates-view__drawer"
    >
      <div class="templates-view__drawer-intro">
        <p>{{ t('route.templates.description') }}</p>
      </div>

      <div class="templates-view__drawer-mode-grid">
        <button
          type="button"
          class="templates-view__drawer-mode-card"
          :class="{ 'is-active': pickerMode === 'general' }"
          @click="choosePickerMode('general')"
        >
          <span class="templates-view__drawer-mode-icon templates-view__drawer-mode-icon--general">
            <AppstoreOutlined />
          </span>
          <span class="templates-view__drawer-mode-copy">
            <strong>{{ t('templates.sections.generalTemplates') }}</strong>
            <small>{{ t('templates.picker.generalDescription') }}</small>
          </span>
        </button>

        <button
          type="button"
          class="templates-view__drawer-mode-card"
          :class="{ 'is-active': pickerMode === 'refined' }"
          @click="choosePickerMode('refined')"
        >
          <span class="templates-view__drawer-mode-icon templates-view__drawer-mode-icon--refined">
            <ThunderboltOutlined />
          </span>
          <span class="templates-view__drawer-mode-copy">
            <strong>{{ t('templates.sections.refinedTemplates') }}</strong>
            <small>{{ t('templates.picker.refinedDescription') }}</small>
          </span>
        </button>
      </div>

      <div v-if="pickerMode === 'general'" class="templates-view__drawer-panel">
        <div class="templates-view__drawer-panel-head">
          <p class="eyebrow">{{ t('templates.sections.generalTemplates') }}</p>
          <h3>{{ t('templates.sections.generalTemplates') }}</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>
      </div>

      <div v-else-if="pickerMode === 'refined'" class="templates-view__drawer-panel">
        <div class="templates-view__drawer-panel-head">
          <p class="eyebrow">{{ t('templates.sections.refinedTemplates') }}</p>
          <h3>{{ t('templates.sections.refinedTemplates') }}</h3>
        </div>
        <div v-if="kolCardsQuery.data.value?.length" class="templates-view__kol-grid">
          <article
            v-for="card in kolCardsQuery.data.value"
            :key="card.subscription_prompt_id"
            class="templates-view__kol-card"
            @click="openRefinedTemplate(card)"
          >
            <div
              class="templates-view__kol-cover"
              :style="card.package_cover ? { '--cover-image': `url(${card.package_cover})` } : {}"
            >
              <div v-if="!card.package_cover" class="templates-view__kol-cover-fallback">
                <AppstoreOutlined class="templates-view__fallback-icon" />
              </div>
              <div class="templates-view__kol-hover-overlay">
                <ArrowRightOutlined />
              </div>
            </div>
            <div class="templates-view__kol-content">
              <h4 class="templates-view__kol-title" :title="card.prompt_name">
                {{ card.prompt_name }}
              </h4>
              <div class="templates-view__kol-meta-row">
                <span class="templates-view__kol-prompt" :title="card.package_name">
                  {{ card.package_name }}
                </span>
                <span class="templates-view__kol-updated-at">
                  {{ t('common.updatedAt') }}: {{ formatDateTime(card.updated_at) }}
                </span>
              </div>

              <div class="templates-view__kol-footer">
                <div class="templates-view__kol-author">
                  <div class="templates-view__author-avatar">
                    {{ card.kol_display_name?.[0]?.toUpperCase() || 'K' }}
                  </div>
                  <span>{{ card.kol_display_name }}</span>
                </div>
                <div v-if="card.platform_hint" class="templates-view__kol-platform">
                  {{ card.platform_hint }}
                </div>
              </div>
            </div>
          </article>
        </div>
        <a-empty v-else :description="t('kol.marketplace.empty')" />
      </div>

      <a-empty v-else :description="t('templates.picker.empty')" />
    </a-drawer>

    <PublishArticleModal v-model:open="publishModalOpen" :article-id="selectedPublishArticleId" />

    <ArticleDetailDrawer
      :open="articleDrawerOpen"
      :article-id="selectedArticleId"
      @close="articleDrawerOpen = false"
    />
  </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;
}

.templates-view__create-btn {
  border-radius: 10px;
  box-shadow: none;
}

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

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

.templates-view__desktop-table :deep(.ant-table) {
  min-width: 1068px;
}

.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__mobile-records {
  display: none;
}

.templates-view__mobile-record {
  padding: 16px 0;
  border-top: 1px solid #eef2f6;
}

.templates-view__mobile-record:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.templates-view__mobile-record-main {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.templates-view__mobile-record-main h4 {
  margin: 0;
  color: #101828;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  word-break: break-word;
}

.templates-view__mobile-record-meta,
.templates-view__mobile-record-status {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.templates-view__mobile-record-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.templates-view__mobile-record-field > span,
.templates-view__mobile-record-actions > span {
  color: #98a2b3;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

.templates-view__mobile-record-field > strong {
  min-width: 0;
  color: #1f2937;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
  word-break: break-word;
}

.templates-view__mobile-record-status {
  padding: 12px;
  border-radius: 10px;
  background: #f8fafc;
}

.templates-view__mobile-record-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.templates-view__mobile-record-actions :deep(.table-actions-row) {
  justify-content: flex-end;
}

.templates-view__mobile-pagination {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.templates-view__drawer-intro {
  margin-bottom: 20px;
}

.templates-view__drawer-intro p {
  margin: 0;
  color: #667085;
  font-size: 14px;
  line-height: 1.6;
}

.templates-view__drawer-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.templates-view__drawer-mode-card {
  width: 100%;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  outline: none;
}

.templates-view__drawer-mode-card:hover {
  border-color: #d1d5db;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.05),
    0 2px 4px -1px rgba(0, 0, 0, 0.03);
  transform: translateY(-1px);
}

.templates-view__drawer-mode-card.is-active {
  background: #eff6ff;
  border-color: #1677ff;
  box-shadow: 0 0 0 1px #1677ff;
}

/* Radio circle representing selection */
.templates-view__drawer-mode-card::before {
  content: '';
  position: absolute;
  top: 20px;
  right: 20px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #d1d5db;
  background-color: #ffffff;
  transition: all 0.2s;
  pointer-events: none;
}

.templates-view__drawer-mode-card.is-active::before {
  border-color: #1677ff;
  background-color: #1677ff;
  box-shadow: inset 0 0 0 3px #eff6ff;
}

.templates-view__drawer-mode-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  transition: all 0.2s;
}

.templates-view__drawer-mode-icon--general {
  background: #fff7ed;
  color: #ea580c;
}

.templates-view__drawer-mode-icon--refined {
  background: #e0f2fe;
  color: #0284c7;
}

.templates-view__drawer-mode-card.is-active .templates-view__drawer-mode-icon {
  transform: scale(1.05);
}

.templates-view__drawer-mode-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 32px;
}

.templates-view__drawer-mode-copy strong {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
}

.templates-view__drawer-mode-copy small {
  color: #6b7280;
  font-size: 13px;
  line-height: 1.5;
}

.templates-view__drawer-panel {
  margin-top: 8px;
}

.templates-view__drawer-panel-head {
  margin-bottom: 18px;
}

.templates-view__drawer-panel-head h3 {
  margin: 6px 0 0;
  font-size: 20px;
  color: #101828;
}

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

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

.template-card {
  flex: 1 1 220px;
  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;
}

.templates-view__kol-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.templates-view__kol-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.templates-view__kol-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 12px 24px -4px rgba(0, 0, 0, 0.08),
    0 4px 8px -2px rgba(0, 0, 0, 0.04);
  border-color: #d1d5db;
}

.templates-view__kol-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #1677ff, #0958d9);
  opacity: 0;
  transition: opacity 0.25s;
}

.templates-view__kol-card:hover::after {
  opacity: 1;
}

.templates-view__kol-cover {
  height: 120px;
  background-color: #f3f6fa;
  position: relative;
  border-bottom: 1px solid #f1f5f9;
  overflow: hidden;
  isolation: isolate;
}

.templates-view__kol-cover::before {
  content: '';
  position: absolute;
  inset: -16px;
  z-index: 0;
  background-image: var(--cover-image);
  background-position: center;
  background-size: cover;
  filter: blur(16px);
  opacity: 0.55;
  transform: scale(1.08);
}

.templates-view__kol-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: var(--cover-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

.templates-view__kol-cover-fallback {
  position: relative;
  z-index: 2;
  height: 100%;
  width: 100%;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #bae6fd 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.templates-view__fallback-icon {
  font-size: 32px;
  color: rgba(22, 119, 255, 0.2);
}

.templates-view__kol-hover-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}

.templates-view__kol-hover-overlay > .anticon {
  font-size: 24px;
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  padding: 8px;
  transform: translateY(10px);
  transition: all 0.2s;
  backdrop-filter: blur(4px);
}

.templates-view__kol-card:hover .templates-view__kol-hover-overlay {
  opacity: 1;
}

.templates-view__kol-card:hover .templates-view__kol-hover-overlay > .anticon {
  transform: translateY(0);
}

.templates-view__kol-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.templates-view__kol-title {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 6px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.templates-view__kol-meta-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  flex: 1;
}

.templates-view__kol-prompt {
  font-size: 13px;
  color: #4b5563;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 400;
}

.templates-view__kol-updated-at {
  font-size: 12px;
  color: #9ca3af;
  line-height: 1.4;
}

.templates-view__kol-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #f3f4f6;
}

.templates-view__kol-author {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #374151;
  font-weight: 500;
}

.templates-view__author-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #4b5563;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
}

.templates-view__kol-platform {
  background: #eff6ff;
  color: #2563eb;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

@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__header,
  .templates-view__table-head {
    flex-direction: column;
    align-items: stretch;
  }

  .templates-view__drawer-mode-grid {
    grid-template-columns: 1fr;
  }

  .templates-view__table-card {
    padding: 24px 16px 16px;
  }

  .templates-view__desktop-table {
    display: none;
  }

  .templates-view__mobile-records {
    display: block;
  }
}

@media (max-width: 420px) {
  .templates-view__mobile-record-meta,
  .templates-view__mobile-record-status {
    grid-template-columns: 1fr;
  }
}
</style>