geo/apps/admin-web/src/components/PublishArticleModal.vue

<script setup lang="ts">
import { ReloadOutlined, SendOutlined } from "@ant-design/icons-vue";
import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
import { message } from "ant-design-vue";
import type { MediaPlatform, PlatformAccount, PublisherLocalPlatformState } from "@geo/shared-types";
import { computed, ref, watch } from "vue";
import { useI18n } from "vue-i18n";

import { articlesApi, getApiBaseURL, mediaApi } from "@/lib/api";
import { formatError } from "@/lib/errors";
import { publishWithPublisherPlugin } from "@/lib/publisher-plugin";
import { loadPublisherRuntimeState } from "@/lib/publisher-runtime";

const props = defineProps<{
  open: boolean;
  articleId: number | null;
}>();

const emit = defineEmits<{
  "update:open": [value: boolean];
  published: [];
}>();

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

const selectedAccountIds = ref<number[]>([]);
const coverEnabled = ref(true);
const coverAssetUrl = ref("");
const runtimeLoading = ref(false);
const pluginInstalled = ref(false);
const pluginVersion = ref<string | undefined>();
const pluginInstallationId = ref<number | null>(null);
const localPlatforms = ref<PublisherLocalPlatformState[]>([]);

const detailQuery = useQuery({
  queryKey: computed(() => ["articles", "detail", props.articleId, "publish-modal"]),
  enabled: computed(() => props.open && Boolean(props.articleId)),
  queryFn: () => articlesApi.detail(props.articleId as number),
});

const accountsQuery = useQuery({
  queryKey: ["media", "platform-accounts", "publish-modal"],
  enabled: computed(() => props.open),
  queryFn: () => mediaApi.accounts(),
});

const platformsQuery = useQuery({
  queryKey: ["media", "platforms", "publish-modal"],
  enabled: computed(() => props.open),
  queryFn: () => mediaApi.platforms(),
});

watch(
  () => props.open,
  async (open) => {
    if (!open) {
      selectedAccountIds.value = [];
      coverAssetUrl.value = "";
      pluginInstallationId.value = null;
      localPlatforms.value = [];
      return;
    }
    await refreshRuntime();
  },
  { immediate: true },
);

const localPlatformMap = computed(() => {
  return new Map(localPlatforms.value.map((item) => [item.platform_id, item]));
});

const accountCards = computed(() => {
  const accountMap = new Map((accountsQuery.data.value ?? []).map((account) => [account.platform_id, account]));

  return (platformsQuery.data.value ?? []).map((platform) => {
    const account = accountMap.get(platform.platform_id) ?? null;
    const local = localPlatformMap.value.get(platform.platform_id);
    const localConnected = Boolean(local?.connected);
    const uidMatches = account
      ? localConnected && (!local?.platform_uid || local.platform_uid === account.platform_uid)
      : false;
    const selectable = Boolean(account && account.status === "active" && uidMatches && pluginInstalled.value);

    return {
      key: account?.id ?? platform.platform_id,
      accountId: account?.id ?? null,
      platformId: platform.platform_id,
      platformName: platform.name,
      platformCategory: platform.category,
      platformUid: account?.platform_uid ?? local?.platform_uid ?? "--",
      nickname: account?.nickname ?? local?.nickname ?? t("media.card.unbound"),
      status: account?.status ?? "unbound",
      local,
      selectable,
      statusText: resolveAccountStatusText(platform, account, local),
    };
  });
});

const modalTitle = computed(() => detailQuery.data.value?.title || t("article.untitled"));

const publishMutation = useMutation({
  mutationFn: async () => {
    if (!props.articleId || !detailQuery.data.value) {
      throw new Error("missing_article");
    }
    if (!selectedAccountIds.value.length) {
      throw new Error("no_accounts_selected");
    }

    const batch = await articlesApi.publishBatch(props.articleId, {
      platform_account_ids: selectedAccountIds.value,
      plugin_installation_id: pluginInstallationId.value,
      publish_type: "publish",
      cover_asset_url: coverEnabled.value ? coverAssetUrl.value.trim() || null : null,
    });

    return publishWithPublisherPlugin({
      article_id: detailQuery.data.value.id,
      title: detailQuery.data.value.title ?? t("article.untitled"),
      markdown_content: detailQuery.data.value.markdown_content ?? "",
      html_content: detailQuery.data.value.html_content ?? null,
      cover_asset_url: coverEnabled.value ? coverAssetUrl.value.trim() || null : null,
      callback_base_url: getApiBaseURL(),
      publish_type: "publish",
      tasks: batch.tasks,
    });
  },
  onSuccess: async (result) => {
    const successCount = result.results.filter((item) => item.success).length;
    const failedCount = result.results.length - successCount;
    if (failedCount === 0) {
      message.success(t("media.publish.messages.success", { count: successCount }));
    } else {
      message.warning(t("media.publish.messages.partial", { success: successCount, failed: failedCount }));
    }
    await Promise.all([
      queryClient.invalidateQueries({ queryKey: ["articles"] }),
      queryClient.invalidateQueries({ queryKey: ["workspace"] }),
      queryClient.invalidateQueries({ queryKey: ["media"] }),
      queryClient.invalidateQueries({ queryKey: ["articles", "detail", props.articleId] }),
      queryClient.invalidateQueries({ queryKey: ["articles", "publish-records", props.articleId] }),
    ]);
    emit("published");
    emit("update:open", false);
  },
  onError: (error) => {
    const normalized = error instanceof Error ? error.message : "";
    if (normalized === "no_accounts_selected") {
      message.warning(t("media.publish.messages.selectPlatform"));
      return;
    }
    message.error(formatError(error));
  },
});

async function refreshRuntime(): Promise<void> {
  runtimeLoading.value = true;
  try {
    const runtime = await loadPublisherRuntimeState();
    pluginInstalled.value = runtime.ping.installed;
    pluginVersion.value = runtime.ping.version;
    pluginInstallationId.value = runtime.pluginInstallationId;
    localPlatforms.value = runtime.localPlatforms;
  } catch (error) {
    pluginInstalled.value = false;
    localPlatforms.value = [];
    message.error(formatError(error));
  } finally {
    runtimeLoading.value = false;
  }
}

function toggleAccount(accountId: number, selectable: boolean): void {
  if (!selectable || publishMutation.isPending.value) {
    return;
  }
  if (selectedAccountIds.value.includes(accountId)) {
    selectedAccountIds.value = selectedAccountIds.value.filter((id) => id !== accountId);
    return;
  }
  selectedAccountIds.value = [...selectedAccountIds.value, accountId];
}

function isSelected(accountId: number): boolean {
  return selectedAccountIds.value.includes(accountId);
}

function resolveAccountStatusText(
  platform: MediaPlatform,
  account: PlatformAccount | null,
  local?: PublisherLocalPlatformState,
): string {
  if (!account) {
    return t("media.card.unboundHint", { platform: platform.name });
  }
  if (!pluginInstalled.value) {
    return t("media.plugin.notInstalled");
  }
  if (!local?.connected) {
    return t("media.account.localMissing");
  }
  if (local.platform_uid && local.platform_uid !== account.platform_uid) {
    return t("media.account.localMismatch");
  }
  return t("media.account.ready");
}
</script>

<template>
  <a-modal
    :open="open"
    :title="t('media.publish.title')"
    width="920"
    :confirm-loading="publishMutation.isPending.value"
    @ok="publishMutation.mutate()"
    @cancel="emit('update:open', false)"
  >
    <div class="publish-modal">
      <section class="publish-modal__hero">
        <div>
          <p class="eyebrow">{{ t("media.publish.subtitle") }}</p>
          <h3>{{ modalTitle }}</h3>
          <p>{{ t("media.publish.description") }}</p>
        </div>
        <div class="publish-modal__hero-actions">
          <a-tag :color="pluginInstalled ? 'success' : 'error'">
            {{ pluginInstalled ? t("media.plugin.ready") : t("media.plugin.notInstalled") }}
          </a-tag>
          <a-button :loading="runtimeLoading" @click="refreshRuntime">
            <template #icon><ReloadOutlined /></template>
            {{ t("media.actions.redetect") }}
          </a-button>
        </div>
      </section>

      <a-alert
        v-if="!pluginInstalled"
        type="warning"
        show-icon
        :message="t('media.plugin.installTitle')"
        :description="t('media.plugin.installDesc')"
      />

      <section class="publish-modal__section">
        <div class="section-heading">
          <div>
            <h3>{{ t("media.publish.platformsTitle") }}</h3>
            <p class="muted">{{ t("media.publish.platformsHint") }}</p>
          </div>
        </div>

        <div v-if="accountsQuery.isPending.value || platformsQuery.isPending.value" class="publish-modal__loading">
          <a-skeleton active :paragraph="{ rows: 5 }" />
        </div>

        <div v-else-if="accountCards.length" class="publish-modal__grid">
          <button
            v-for="account in accountCards"
            :key="account.key"
            type="button"
            class="publish-modal__card"
            :class="{
              'publish-modal__card--active': account.accountId ? isSelected(account.accountId) : false,
              'publish-modal__card--disabled': !account.selectable,
            }"
            @click="account.accountId ? toggleAccount(account.accountId, account.selectable) : undefined"
          >
            <span class="publish-modal__check">
              <span
                v-if="account.accountId && isSelected(account.accountId)"
                class="publish-modal__check-dot"
              ></span>
            </span>
            <span class="publish-modal__card-copy">
              <strong>{{ account.platformName }}</strong>
              <small>{{ account.nickname }} · ID: {{ account.platformUid }}</small>
              <small>{{ account.statusText }}</small>
            </span>
            <a-tag :color="account.selectable ? 'success' : account.accountId ? 'warning' : 'default'">
              {{ account.selectable ? t("media.account.selectable") : t("media.account.unavailable") }}
            </a-tag>
          </button>
        </div>

        <a-empty v-else :description="t('media.empty.accounts')" />
      </section>

      <section class="publish-modal__section">
        <div class="publish-modal__cover">
          <div class="publish-modal__cover-head">
            <div>
              <h3>{{ t("media.publish.coverTitle") }}</h3>
              <p class="muted">{{ t("media.publish.coverHint") }}</p>
            </div>
            <a-switch v-model:checked="coverEnabled" />
          </div>

          <a-input
            v-if="coverEnabled"
            v-model:value="coverAssetUrl"
            :placeholder="t('media.publish.coverPlaceholder')"
          />
        </div>
      </section>
    </div>
  </a-modal>
</template>

<style scoped>
.publish-modal {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.publish-modal__hero {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  border: 1px solid #e6edf5;
  border-radius: 18px;
  background: linear-gradient(135deg, #fbfdff 0%, #f4f9ff 100%);
}

.publish-modal__hero h3,
.publish-modal__section h3 {
  margin: 0;
  font-size: 18px;
  color: #111827;
}

.publish-modal__hero p:last-child {
  margin: 8px 0 0;
  color: #6b7280;
}

.publish-modal__hero-actions {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.publish-modal__section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.publish-modal__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.publish-modal__card {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 18px;
  border: 1px solid #dbe5f0;
  border-radius: 18px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.publish-modal__card:hover {
  border-color: #adc6ff;
  box-shadow: 0 16px 28px rgba(22, 119, 255, 0.08);
  transform: translateY(-1px);
}

.publish-modal__card--active {
  border-color: #1677ff;
  background: linear-gradient(135deg, #f7fbff 0%, #eef6ff 100%);
}

.publish-modal__card--disabled {
  opacity: 0.72;
  cursor: not-allowed;
}

.publish-modal__check {
  width: 22px;
  height: 22px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.publish-modal__check-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #1677ff;
}

.publish-modal__card-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.publish-modal__card-copy strong {
  font-size: 16px;
  color: #0f172a;
}

.publish-modal__card-copy small {
  color: #64748b;
}

.publish-modal__cover {
  padding: 18px;
  border: 1px solid #e6edf5;
  border-radius: 18px;
  background: #fff;
}

.publish-modal__cover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.publish-modal__loading {
  padding: 12px 0;
}

@media (max-width: 860px) {
  .publish-modal__hero {
    flex-direction: column;
  }

  .publish-modal__grid {
    grid-template-columns: 1fr;
  }
}
</style>