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

<script setup lang="ts">
import {
  PlusOutlined,
  AppstoreOutlined,
  BlockOutlined,
  ExperimentOutlined,
  FileTextOutlined,
  NodeIndexOutlined,
  RocketOutlined,
  ThunderboltOutlined,
  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,
  KolWorkspaceCard,
  RecentArticle,
  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 ArticleActionGroup from "@/components/ArticleActionGroup.vue";
import ArticleGenerateStatus from "@/components/ArticleGenerateStatus.vue";
import ArticlePublishStatus from "@/components/ArticlePublishStatus.vue";
import ArticleSourceMeta from "@/components/ArticleSourceMeta.vue";
import ArticleDetailDrawer from "@/components/ArticleDetailDrawer.vue";
import PublishArticleModal from "@/components/PublishArticleModal.vue";
import { articlesApi, templatesApi, workspaceApi } from "@/lib/api";
import { buildArticleClipboardContent, resolveArticleActionState } from "@/lib/article-list-actions";
import { formatError } from "@/lib/errors";
import {
  formatDateTime,
  getGenerateStatusMeta,
  getPublishStatusMeta,
  getTemplateMeta,
} from "@/lib/display";

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,
      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 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" },
  { label: getPublishStatusMeta("pending_review").label, value: "pending_review" },
]);

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: 156,
    align: "right",
  },
]);

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

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

    if (detail.generate_status !== "completed" && 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) =>
      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);
}

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 class="batch-generate-btn">
            <template #icon><BlockOutlined /></template>
            {{ t("templates.actions.batchGenerate") }}
          </a-button>
          <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 @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("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
        :columns="articleColumns"
        :data-source="displayedArticles"
        :loading="articleListQuery.isPending.value || recentArticlesQuery.isPending.value"
        row-key="id"
        :pagination="
          shouldUseRecentFallback
            ? false
            : {
                current: page,
                pageSize,
                total: displayedArticleTotal,
                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>
              <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.generate_status)"
              :delete-confirm-title="t('templates.list.deleteConfirm')"
              :delete-loading="deleteMutation.isPending.value"
              @publish="openPublish(record)"
              @edit="openEditor(record)"
              @preview="openPreview(record)"
              @copy="copyArticle(record.id)"
              @delete="handleDelete(record.id)"
            />
          </template>
        </template>
      </a-table>
    </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 class="templates-view__kol-grid" v-if="kolCardsQuery.data.value?.length">
          <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 ? { backgroundImage: `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 class="templates-view__kol-platform" v-if="card.platform_hint">
                  {{ 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;
}

.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__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-size: cover;
  background-position: center;
  background-color: #f8fafc;
  position: relative;
  border-bottom: 1px solid #f1f5f9;
  overflow: hidden;
}

.templates-view__kol-cover-fallback {
  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;
  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;
  }
}
</style>