geo/apps/desktop-client/src/renderer/views/PublishManagementView.vue

<script setup lang="ts">
import {
  ClockCircleOutlined,
  CopyOutlined,
  DesktopOutlined,
  ExportOutlined,
  ReloadOutlined,
  SearchOutlined,
  SendOutlined,
} from "@ant-design/icons-vue";
import type { DesktopPublishTaskListResponse, DesktopTaskInfo, JsonValue } from "@geo/shared-types";
import { notification } from "ant-design-vue";
import { computed, onMounted, onUnmounted, ref, watch } from "vue";

import StatusBadge from "../components/StatusBadge.vue";
import { useDesktopRuntime } from "../composables/useDesktopRuntime";
import { formatDateTime, formatRelativeTime } from "../lib/formatters";
import { desktopPlatformShortName, desktopPublishMediaCatalog, translateDesktopPlatform } from "../lib/media-catalog";
import { normalizePublisherErrorMessage } from "../../shared/publisher-errors";

const PAGE_SIZE = 10;
const INLINE_ERROR_HEAD_CHARS = 48;
const INLINE_ERROR_TAIL_CHARS = 10;

const publishPlatformIndex: Record<string, (typeof desktopPublishMediaCatalog)[number]> = Object.fromEntries(
  desktopPublishMediaCatalog.map((item) => [item.id, item]),
);

interface PublishTaskItem {
  id: string;
  title: string;
  articleId: number | null;
  platform: string;
  accountId: string;
  accountName: string;
  status: DesktopTaskInfo["status"];
  summary: string;
  attempts: number;
  leaseExpiresAt: number | null;
  createdAt: number;
  updatedAt: number;
  externalArticleUrl: string | null;
  externalManageUrl: string | null;
  publishType: string | null;
  fallbackReason: string | null;
  errorMessage: string | null;
}

let refreshTimer: ReturnType<typeof setInterval> | null = null;

function platformMeta(platform: string) {
  const key = (platform ?? "").toLowerCase();
  return publishPlatformIndex[key] ?? null;
}

function translatePlatform(platform: string) {
  return platformMeta(platform)?.label || translateDesktopPlatform(platform);
}

function platformLogo(platform: string): string | null {
  return platformMeta(platform)?.logoUrl ?? null;
}

function platformAccent(platform: string): string {
  return platformMeta(platform)?.accent ?? "#64748b";
}

function platformShortName(platform: string): string {
  return platformMeta(platform)?.shortName ?? desktopPlatformShortName(platform);
}

function statusLabel(status: DesktopTaskInfo["status"]): string {
  const map: Record<DesktopTaskInfo["status"], string> = {
    queued: "等待发布",
    in_progress: "正在发送",
    succeeded: "发送成功",
    failed: "发送失败",
    unknown: "发送失败",
    aborted: "已取消",
  };
  return map[status];
}

function statusLabelForTask(task: PublishTaskItem): string {
  if (task.status === "succeeded" && task.publishType === "draft") {
    return "已存草稿";
  }
  return statusLabel(task.status);
}

function isPendingStatus(status: DesktopTaskInfo["status"]): boolean {
  return status === "queued" || status === "in_progress";
}

function statusTone(status: DesktopTaskInfo["status"]): "info" | "warn" | "success" | "danger" {
  switch (status) {
    case "queued":
    case "in_progress":
      return "warn";
    case "succeeded":
      return "success";
    case "failed":
    case "unknown":
    case "aborted":
    default:
      return "danger";
  }
}

function statusToneForTask(task: PublishTaskItem): "info" | "warn" | "success" | "danger" {
  if (task.status === "succeeded" && task.publishType === "draft") {
    return "warn";
  }
  return statusTone(task.status);
}

function extractNumber(value: JsonValue | null | undefined): number | null {
  if (typeof value === "number" && Number.isFinite(value)) {
    return value;
  }
  if (typeof value === "string" && /^\d+$/.test(value.trim())) {
    return Number.parseInt(value.trim(), 10);
  }
  return null;
}

function extractString(value: JsonValue | null | undefined): string | null {
  if (typeof value !== "string") {
    return null;
  }
  const trimmed = value.trim();
  return trimmed ? trimmed : null;
}

function extractStringId(value: JsonValue | null | undefined): string | null {
  if (typeof value === "number" && Number.isFinite(value)) {
    return String(Math.trunc(value));
  }
  return extractString(value);
}

function buildSohuArticleUrl(task: DesktopTaskInfo, result: Record<string, JsonValue>): string | null {
  if (task.platform !== "sohuhao" || extractString(result.publish_type) === "draft") {
    return null;
  }

  const articleId = extractStringId(result.external_article_id);
  const accountUid = accountMap.value.get(task.target_account_id)?.platformUid?.trim() ?? "";
  if (!articleId || !accountUid) {
    return null;
  }

  return `https://www.sohu.com/a/${encodeURIComponent(articleId)}_${encodeURIComponent(accountUid)}`;
}

function buildWangyihaoArticleUrl(task: DesktopTaskInfo, result: Record<string, JsonValue>): string | null {
  if (task.platform !== "wangyihao" || extractString(result.publish_type) === "draft") {
    return null;
  }

  const articleId = extractStringId(result.external_article_id);
  if (!articleId) {
    return null;
  }

  return `https://www.163.com/dy/article/${encodeURIComponent(articleId)}.html`;
}

function normalizePublishTaskStatus(status: DesktopTaskInfo["status"]): DesktopTaskInfo["status"] {
  return status === "unknown" ? "failed" : status;
}

function normalizeTaskErrorMessage(message: string | null): string | null {
  const normalized = extractString(message);
  if (!normalized) {
    return null;
  }
  if (normalized.includes("scaffold-only") || normalized.includes("requires later reconcile")) {
    return "当前平台的桌面发布适配器未实现，任务已按失败处理。";
  }
  if (normalized.includes("adapter is not implemented for this platform")) {
    return "当前平台的桌面发布适配器未实现，任务已按失败处理。";
  }
  return normalizePublisherErrorMessage(normalized) ?? normalized;
}

function inlineErrorPreview(message: string): string {
  const compact = message.replace(/\s+/g, " ").trim();
  const maxLength = INLINE_ERROR_HEAD_CHARS + INLINE_ERROR_TAIL_CHARS + 3;
  if (compact.length <= maxLength) {
    return compact;
  }
  return `${compact.slice(0, INLINE_ERROR_HEAD_CHARS)}...${compact.slice(-INLINE_ERROR_TAIL_CHARS)}`;
}

function summaryForTask(
  status: DesktopTaskInfo["status"],
  publishType: string | null = null,
  fallbackReason: string | null = null,
): string {
  switch (status) {
    case "queued":
      return "任务已进入队列，等前面的 PublishTasks 翻完后再继续展示历史记录。";
    case "in_progress":
      return "当前正在由桌面端执行发送，请避免重复触发。";
    case "succeeded":
      if (publishType === "draft") {
        if (fallbackReason === "publish_authorization_required") {
          return "草稿已保存，需在公众号后台完成微信验证/授权发布。";
        }
        return "文章已保存到草稿箱，需在平台后台完成发表。";
      }
      return "文章已成功发送到目标平台。";
    case "failed":
      return "本次发送失败，可以手动再次发送。";
    case "aborted":
      return "任务已被取消，如需继续可再次发送。";
    case "unknown":
    default:
      return "发送结果异常，已按失败处理，可检查平台侧结果后再次发送。";
  }
}

function parseTimestamp(value: string | null): number {
  if (!value) {
    return Date.now();
  }
  const timestamp = Date.parse(value);
  return Number.isNaN(timestamp) ? Date.now() : timestamp;
}

const { snapshot } = useDesktopRuntime();
const taskPage = ref<DesktopPublishTaskListResponse | null>(null);
const currentPage = ref(1);
const searchTitle = ref("");
const appliedTitle = ref("");
const loading = ref(false);
const error = ref<string | null>(null);
const actionPendingTaskId = ref<string | null>(null);
const consolePendingTaskId = ref<string | null>(null);
const copiedErrorTaskId = ref<string | null>(null);

function notifySuccess(message: string) {
  notification.success({
    message,
    placement: "topRight",
    duration: 2.4,
  });
}

function notifyActionError(description: string) {
  notification.error({
    message: "操作失败",
    description,
    placement: "topRight",
    duration: 4,
  });
}

async function refreshTasks(page = currentPage.value) {
  loading.value = true;
  error.value = null;

  try {
    const response = await window.desktopBridge.app.listPublishTasks({
      page,
      page_size: PAGE_SIZE,
      title: appliedTitle.value || undefined,
    });

    const lastPage = response.total > 0 ? Math.ceil(response.total / PAGE_SIZE) : 1;
    if (response.total > 0 && page > lastPage) {
      currentPage.value = lastPage;
      await refreshTasks(lastPage);
      return;
    }

    taskPage.value = response;
    currentPage.value = response.page;
  } catch (err) {
    error.value = err instanceof Error ? err.message : "desktop publish tasks unavailable";
  } finally {
    loading.value = false;
  }
}

async function retryTask(taskId: string) {
  actionPendingTaskId.value = taskId;

  try {
    await window.desktopBridge.app.retryPublishTask(taskId);
    notifySuccess("已重新加入发布队列");
    await refreshTasks();
  } catch (err) {
    notifyActionError(err instanceof Error ? err.message : "重新发送失败");
  } finally {
    actionPendingTaskId.value = null;
  }
}

async function openExternalUrl(url: string | null) {
  if (!url) {
    return;
  }

  try {
    await window.desktopBridge.app.openExternalUrl(url);
  } catch (err) {
    notifyActionError(err instanceof Error ? err.message : "打开外链失败");
  }
}

async function openAccountWorkbench(record: PublishTaskItem) {
  const account = accountMap.value.get(record.accountId) ?? null;
  consolePendingTaskId.value = record.id;

  try {
    await window.desktopBridge.app.openPublishAccountConsole({
      id: record.accountId,
      platform: record.platform,
      platformUid: account?.platformUid ?? "",
      displayName: account?.displayName ?? record.accountName,
    });
  } catch (err) {
    notifyActionError(err instanceof Error ? err.message : "打开账号工作台失败");
  } finally {
    consolePendingTaskId.value = null;
  }
}

async function copyTextToClipboard(text: string): Promise<void> {
  if (navigator.clipboard?.writeText) {
    await navigator.clipboard.writeText(text);
    return;
  }

  const textarea = document.createElement("textarea");
  textarea.value = text;
  textarea.setAttribute("readonly", "true");
  textarea.style.position = "fixed";
  textarea.style.left = "-9999px";
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand("copy");
  document.body.removeChild(textarea);
}

async function copyErrorMessage(record: PublishTaskItem) {
  if (!record.errorMessage) {
    return;
  }

  try {
    await copyTextToClipboard(record.errorMessage);
    copiedErrorTaskId.value = record.id;
    notifySuccess("错误详情已复制");
    window.setTimeout(() => {
      if (copiedErrorTaskId.value === record.id) {
        copiedErrorTaskId.value = null;
      }
    }, 1_500);
  } catch (err) {
    notifyActionError(err instanceof Error ? err.message : "复制错误详情失败");
  }
}

function applySearch() {
  currentPage.value = 1;
  appliedTitle.value = searchTitle.value.trim();
  void refreshTasks(1);
}

function handlePageChange(page: number) {
  currentPage.value = page;
  void refreshTasks(page);
}

function rowClassName(record: PublishTaskItem) {
  return isPendingStatus(record.status) ? "publish-row--pending" : "";
}

watch(searchTitle, (value) => {
  if (!value.trim() && appliedTitle.value) {
    appliedTitle.value = "";
    currentPage.value = 1;
    void refreshTasks(1);
  }
});

onMounted(() => {
  void refreshTasks();
  refreshTimer = setInterval(() => {
    void refreshTasks();
  }, 20_000);
});

onUnmounted(() => {
  if (refreshTimer) {
    clearInterval(refreshTimer);
    refreshTimer = null;
  }
});

const accountNameMap = computed(() => {
  return new Map((snapshot.value?.accounts ?? []).map((item) => [item.id, item.displayName]));
});

const accountMap = computed(() => {
  return new Map((snapshot.value?.accounts ?? []).map((item) => [item.id, item]));
});

const publishTasks = computed<PublishTaskItem[]>(() =>
  (taskPage.value?.items ?? []).map((task) => {
    const normalizedStatus = normalizePublishTaskStatus(task.status);
    const payload = task.payload ?? {};
    const result = task.result ?? {};
    const taskError = task.error ?? {};
    const publishType = extractString(result.publish_type);
    const fallbackReason = extractString(result.fallback_reason);
    const nestedContentRef =
      payload.content_ref && typeof payload.content_ref === "object" && !Array.isArray(payload.content_ref)
        ? (payload.content_ref as Record<string, JsonValue>)
        : null;
    const articleId = extractNumber(payload.article_id) ?? extractNumber(nestedContentRef?.article_id ?? nestedContentRef?.id);

    return {
      id: task.id,
      title: extractString(payload.title) ?? `发布任务 · ${translatePlatform(task.platform)}`,
      articleId,
      platform: task.platform,
      accountId: task.target_account_id,
      accountName: accountNameMap.value.get(task.target_account_id) ?? "待同步账号",
      status: normalizedStatus,
      summary: summaryForTask(normalizedStatus, publishType, fallbackReason),
      attempts: task.attempts,
      leaseExpiresAt: task.lease_expires_at ? parseTimestamp(task.lease_expires_at) : null,
      createdAt: parseTimestamp(task.created_at),
      updatedAt: parseTimestamp(task.updated_at),
      externalArticleUrl: publishType === "draft"
        ? null
        : extractString(result.external_article_url) ?? buildWangyihaoArticleUrl(task, result) ?? buildSohuArticleUrl(task, result),
      externalManageUrl: extractString(result.external_manage_url),
      publishType,
      fallbackReason,
      errorMessage: normalizeTaskErrorMessage(
        extractString(taskError.message)
        ?? extractString(taskError.detail)
        ?? extractString(taskError.code),
      ),
    };
  }),
);

const pendingCount = computed(() => taskPage.value?.pending_count ?? 0);
const historyTotal = computed(() => taskPage.value?.history_total ?? 0);
const totalCount = computed(() => taskPage.value?.total ?? 0);

const tableColumns = [
  { title: "文章", key: "title", dataIndex: "title", width: 260, ellipsis: true },
  { title: "账号 / 平台", key: "account", dataIndex: "account", width: 168 },
  { title: "状态", key: "status", dataIndex: "status", width: 96 },
  { title: "任务信息", key: "meta", dataIndex: "meta", width: 280 },
  { title: "时间", key: "time", dataIndex: "time", width: 132 },
  { title: "操作", key: "actions", align: "right" as const, width: 132, fixed: "right" as const },
];

const tableScroll = { x: 1000 } as const;
</script>

<template>
  <section class="page-container">
    <section class="hero-card">
      <div class="hero-header">
        <div class="hero-title">
          <p class="eyebrow">PUBLISH EXECUTION DESK</p>
          <h2>发布管理</h2>
        </div>
        <div class="hero-actions">
          <a-button type="primary" ghost class="modern-btn" :loading="loading" @click="refreshTasks()">
            <template #icon><ReloadOutlined /></template>
            刷新状态
          </a-button>
        </div>
      </div>
      <div class="stats-strip">
        <div class="stat-card">
          <div class="stat-label">等待发布</div>
          <div class="stat-value" :class="{ 'stat-value--accent': pendingCount > 0 }">{{ pendingCount }}</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">已发送</div>
          <div class="stat-value">{{ historyTotal }}</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">历史总数</div>
          <div class="stat-value">{{ totalCount }}</div>
        </div>
      </div>
    </section>

    <div v-if="error" class="feedback-banner error">
      <div class="error-text">{{ error }}</div>
    </div>

    <section class="content-section">
      <div class="hero-card" style="padding-bottom: 0;">
        <div class="hero-header table-toolbar">
          <div class="toolbar-meta">
            <h3 class="section-title">待发布与已发送记录</h3>
            <p class="section-desc">待发布任务始终排在最前，每页 10 条；分页与总数以服务端返回的 PublishTasks 为准。</p>
          </div>
          <div class="toolbar-filters">
            <a-input
              v-model:value="searchTitle"
              allow-clear
              placeholder="搜索文章标题"
              class="search-input"
              @pressEnter="applySearch"
            >
              <template #prefix>
                <SearchOutlined style="color: #94a3b8" />
              </template>
            </a-input>
            <a-button type="primary" class="modern-btn" @click="applySearch">搜索</a-button>
          </div>
        </div>

      <a-table
        row-key="id"
        class="modern-table publish-table"
        :columns="tableColumns"
        :data-source="publishTasks"
        :pagination="false"
        :loading="loading"
        :scroll="tableScroll"
        :row-class-name="rowClassName"
      >
        <template #emptyText>
          <div class="empty-cell">
            <a-empty description="暂无匹配的发布任务" />
          </div>
        </template>

        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'title'">
            <div class="info-stack">
              <a-tooltip :title="record.title" placement="topLeft">
                <span class="cell-title">{{ record.title }}</span>
              </a-tooltip>
              <span class="cell-sub">
                <template v-if="record.articleId">#{{ record.articleId }}</template>
                <template v-else>未关联文章</template>
              </span>
            </div>
          </template>

          <template v-else-if="column.key === 'account'">
            <div class="info-stack">
              <span class="cell-title cell-title--mono">{{ record.accountName }}</span>
              <span class="cell-sub platform-line">
                <span class="platform-logo-mini">
                  <img
                    v-if="platformLogo(record.platform)"
                    :src="platformLogo(record.platform) || ''"
                    :alt="translatePlatform(record.platform)"
                  />
                  <span
                    v-else
                    class="platform-logo-fallback"
                    :style="{ color: platformAccent(record.platform) }"
                  >
                    {{ platformShortName(record.platform) }}
                  </span>
                </span>
                <span>{{ translatePlatform(record.platform) }}</span>
              </span>
            </div>
          </template>

          <template v-else-if="column.key === 'status'">
            <StatusBadge :tone="statusToneForTask(record)" :label="statusLabelForTask(record)" />
          </template>

          <template v-else-if="column.key === 'meta'">
            <div class="info-stack meta-cell">
              <span v-if="record.errorMessage" class="error-message-row">
                <a-popover placement="topLeft" overlay-class-name="publish-error-popover" trigger="hover">
                  <template #content>
                    <div class="error-popover-panel" @click.stop>
                      <div class="error-popover-header">发布错误</div>
                      <pre class="error-popover-content">{{ record.errorMessage }}</pre>
                      <button
                        class="popover-copy-btn"
                        type="button"
                        :aria-label="copiedErrorTaskId === record.id ? '错误详情已复制' : '复制错误详情'"
                        @click.stop="copyErrorMessage(record)"
                      >
                        <CopyOutlined />
                        <span>{{ copiedErrorTaskId === record.id ? "已复制" : "复制错误详情" }}</span>
                      </button>
                    </div>
                  </template>
                  <span class="error-text error-text--truncate">{{ inlineErrorPreview(record.errorMessage) }}</span>
                </a-popover>
              </span>
              <span v-else class="cell-sub strong-text">{{ record.summary }}</span>
              <span class="cell-sub meta-footer">
                <span class="attempt-chip">尝试 {{ record.attempts }} 次</span>
                <template v-if="record.leaseExpiresAt">
                  <span class="meta-divider">·</span>
                  <span>租约 {{ formatRelativeTime(record.leaseExpiresAt) }} 到期</span>
                </template>
              </span>
            </div>
          </template>

          <template v-else-if="column.key === 'time'">
            <a-tooltip
              :title="`创建 ${formatDateTime(record.createdAt)} · 更新 ${formatDateTime(record.updatedAt)}`"
              placement="topLeft"
            >
              <div class="info-stack time-stack">
                <span class="cell-title cell-title--mono">{{ formatRelativeTime(record.updatedAt) }}</span>
                <span class="cell-sub">{{ formatDateTime(record.updatedAt) }}</span>
              </div>
            </a-tooltip>
          </template>

          <template v-else-if="column.key === 'actions'">
            <div class="action-buttons">
              <a-tooltip
                v-if="record.externalArticleUrl"
                :title="record.externalArticleUrl"
                placement="top"
                overlay-class-name="external-url-tooltip"
              >
                <a-button
                  type="text"
                  class="icon-action-btn"
                  :aria-label="`打开外链：${record.title}`"
                  @click.stop="openExternalUrl(record.externalArticleUrl)"
                >
                  <template #icon><ExportOutlined /></template>
                </a-button>
              </a-tooltip>
              <a-tooltip :title="`打开 ${record.accountName} 的${translatePlatform(record.platform)}工作台`" placement="top">
                <a-button
                  type="text"
                  class="icon-action-btn"
                  :loading="consolePendingTaskId === record.id"
                  :aria-label="`打开 ${record.accountName} 的${translatePlatform(record.platform)}工作台`"
                  @click.stop="openAccountWorkbench(record)"
                >
                  <template #icon><DesktopOutlined /></template>
                </a-button>
              </a-tooltip>
              <a-popconfirm
                v-if="!isPendingStatus(record.status)"
                title="确定要重试本次发布吗？"
                placement="topRight"
                ok-text="确定"
                cancel-text="取消"
                @confirm="retryTask(record.id)"
              >
                <a-tooltip title="再次发送" placement="top">
                  <a-button
                    type="text"
                    class="icon-action-btn"
                    :loading="actionPendingTaskId === record.id"
                  >
                    <template #icon><SendOutlined /></template>
                  </a-button>
                </a-tooltip>
              </a-popconfirm>
              <a-tooltip v-else title="排队中...">
                <div class="action-placeholder-icon">
                  <ClockCircleOutlined />
                </div>
              </a-tooltip>
            </div>
          </template>
        </template>
      </a-table>

      <div class="table-footer">
        <a-pagination
          :current="currentPage"
          :page-size="PAGE_SIZE"
          :total="totalCount"
          :show-size-changer="false"
          @change="handlePageChange"
        />
      </div>
      </div>
    </section>
  </section>
</template>

<style scoped>
.page-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-bottom: 40px;
  max-width: 1400px;
}

/* Hero Section (aligned with AccountsView) */
.hero-card {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #eef2f6;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -2px rgba(0, 0, 0, 0.01);
  overflow: hidden;
}

.hero-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 36px 40px;
}

.eyebrow {
  margin: 0 0 12px;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero-title h2 {
  margin: 0;
  font-size: 32px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.modern-btn {
  border-radius: 8px;
  height: 40px;
  padding: 0 20px;
  font-weight: 600;
}

/* Stats Strip */
.stats-strip {
  display: flex;
  padding: 24px 40px;
  background: #f8fafc;
  border-top: 1px solid #eef2f6;
  gap: 40px;
}

.stat-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.stat-label {
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
}

.stat-value {
  font-size: 40px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1;
  font-feature-settings: "tnum";
}

.stat-value--accent {
  color: #b45309;
}

/* Content Section / Table Toolbar */
.content-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.table-toolbar {
  padding: 24px 32px 16px;
  border-bottom: 1px solid #eef2f6;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.toolbar-meta {
  flex: 1 1 240px;
  min-width: 0;
}

.section-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
}

.section-desc {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
}

.toolbar-filters {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
}

.search-input {
  width: 240px;
  border-radius: 8px;
}

/* Modern Enterprise Table (aligned with AccountsView) */
:deep(.publish-table) {
  padding: 0 32px 16px;
}

:deep(.publish-table .ant-table) {
  background: transparent;
}

:deep(.publish-table .ant-table-thead > tr > th) {
  background-color: transparent !important;
  color: #64748b;
  font-weight: 600;
  font-size: 13px;
  border-bottom: 1px solid #e2e8f0;
  padding: 16px 12px;
  white-space: nowrap;
}

:deep(.publish-table .ant-table-tbody > tr > td) {
  padding: 16px 12px;
  border-bottom: 1px solid #f1f5f9;
  color: #0f172a;
  vertical-align: middle;
  transition: background-color 0.15s ease;
  font-size: 13px;
}

:deep(.publish-table .ant-table-tbody > tr:last-child > td) {
  border-bottom: none;
}

:deep(.publish-table .ant-table-tbody > tr:hover > td) {
  background-color: #f8fafc !important;
}

:deep(.publish-table .ant-table-cell-fix-right) {
  background-color: #ffffff !important;
}

:deep(.publish-table .ant-table-tbody > tr:hover > td.ant-table-cell-fix-right) {
  background-color: #f8fafc !important;
}

:deep(.publish-table .publish-row--pending > td) {
  background: #fffbeb !important;
}

:deep(.publish-table .publish-row--pending > td.ant-table-cell-fix-right) {
  background: #fffbeb !important;
}

.empty-cell {
  padding: 56px 20px;
  color: #94a3b8;
}

/* Cell content */
.info-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  max-width: 100%;
}

.cell-title {
  font-weight: 600;
  color: #0f172a;
  font-size: 14px;
  line-height: 1.4;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cell-title--mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 500;
  font-size: 13px;
}

.cell-sub {
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
  display: block;
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cell-sub.strong-text {
  color: #1e293b;
  font-weight: 500;
}

.platform-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.platform-logo-mini {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px #e2e8f0;
  overflow: hidden;
  flex: 0 0 auto;
}

.platform-logo-mini img {
  width: 12px;
  height: 12px;
  object-fit: contain;
}

.platform-logo-fallback {
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.time-stack {
  cursor: default;
}

.meta-cell {
  width: 100%;
}

.meta-footer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  white-space: normal;
  font-size: 11.5px;
  color: #94a3b8;
}

.attempt-chip {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #475569;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.meta-divider {
  color: #cbd5e1;
}

.external-task-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #2563eb;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
}

.external-task-link:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

.error-message-row {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.error-text {
  color: #dc2626;
  font-size: 12.5px;
  font-weight: 500;
}

.error-text--truncate {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.error-message-row :deep(.ant-popover-open) {
  min-width: 0;
  display: block;
  max-width: 100%;
}

/* Action Buttons */
.action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}

.icon-action-btn {
  color: #64748b;
  border-radius: 6px;
  transition: all 0.15s ease;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  padding: 0;
}

.icon-action-btn:hover {
  background: #eff6ff;
  color: #2563eb;
  border-color: #dbeafe;
}

.action-placeholder-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #cbd5e1;
  font-size: 14px;
}

.table-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 16px 32px 24px;
  background: transparent;
}

.feedback-banner {
  padding: 12px 16px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid transparent;
}
.feedback-banner.error {
  border-color: #fca5a5;
  background: #fef2f2;
}

:global(.external-url-tooltip .ant-tooltip-inner) {
  max-width: min(520px, 80vw);
  overflow-wrap: anywhere;
}

:global(.publish-error-popover .ant-popover-inner) {
  max-width: min(720px, 82vw);
  border: 1px solid #fecaca;
  border-radius: 8px;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
}

:global(.publish-error-popover .ant-popover-inner-content) {
  padding: 12px;
}

:global(.publish-error-popover .ant-popover-arrow::before) {
  background: #fff;
  border-color: #fecaca;
}

:global(.publish-error-popover .error-popover-panel) {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: min(520px, 76vw);
  max-width: min(720px, 82vw);
}

:global(.publish-error-popover .error-popover-header) {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #dc2626;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

:global(.publish-error-popover .error-popover-header::before) {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
  content: "";
}

:global(.publish-error-popover .error-popover-content) {
  max-height: 360px;
  margin: 0;
  overflow: auto;
  padding: 10px;
  border: 1px solid #fee2e2;
  border-radius: 6px;
  background: #fff7f7;
  color: #991b1b;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

:global(.publish-error-popover .popover-copy-btn) {
  display: inline-flex;
  align-self: flex-end;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid #fecaca;
  border-radius: 6px;
  background: #fff;
  color: #dc2626;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

:global(.publish-error-popover .popover-copy-btn:hover),
:global(.publish-error-popover .popover-copy-btn:focus-visible) {
  background: #fef2f2;
  border-color: #f87171;
  outline: none;
}

/* Responsiveness */
@media (max-width: 1024px) {
  .hero-header {
    flex-direction: column;
    gap: 24px;
  }
  .stats-strip {
    flex-wrap: wrap;
    gap: 24px;
  }
}
</style>