<!-- app/components/home/OcsConfigCard.vue - OCS AnswererWrapper 配置片段 -->
<script lang="ts" setup>
import { RefreshCw } from "lucide-vue-next";

import { Button } from "@/components/ui/button";
import {
  Card,
  CardAction,
  CardContent,
  CardHeader,
  CardTitle
} from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { useAuthStore } from "@/stores/auth";

const authStore = useAuthStore();
const origin = ref("http://localhost:3000");

const refreshing = ref(false);

const handleRefreshToken = async () => {
  refreshing.value = true;
  await authStore.refreshApiToken();
  refreshing.value = false;
};

/** 浏览器端读取当前站点地址，避免文档里写死 localhost 或生产域名 */
onMounted(() => {
  origin.value = window.location.origin;
});

/** 与旧 Python 项目的 ocs_config_example.json 保持同样字段；登录后自动填入 apiToken */
const configText = computed(() => {
  const data: Record<string, string> = {
    title: "${title}",
    type: "${type}",
    options: "${options}",
    token: ""
  };

  if (authStore.user?.apiToken) {
    data.token = authStore.user.apiToken;
  }

  return JSON.stringify(
    [
      {
        name: "AI智能题库",
        homepage: origin.value,
        url: `${origin.value}/api/search`,
        method: "get",
        contentType: "json",
        data,
        handler:
          "return (res)=> res.code === 1 ? [res.question, res.answer] : [res.msg, undefined]"
      }
    ],
    null,
    2
  );
});
</script>

<template>
  <!-- auth 插件为 client-only，apiToken / isOnline 在 SSR 时不可用；
       整张卡用 ClientOnly 包裹，避免 token 文本和条件渲染的水合不匹配 -->
  <ClientOnly>
    <Card>
      <CardHeader>
        <CardTitle>OCS 配置</CardTitle>
        <CardAction>
          <div class="flex items-center gap-2">
            <Button
              v-if="authStore.user?.apiToken && authStore.isOnline"
              variant="outline"
              size="sm"
              :disabled="refreshing"
              @click="handleRefreshToken"
            >
              <RefreshCw
                :class="['size-4', refreshing ? 'animate-spin' : '']"
              />
              刷新 Token
            </Button>
            <CopyCom
              :text="configText"
              :timeout="1200"
              :disabled="refreshing"
            />
          </div>
        </CardAction>
      </CardHeader>

      <CardContent>
        <pre
          class="h-89.5 overflow-x-auto overflow-y-hidden rounded-2xl bg-muted p-4 text-xs leading-5 text-muted-foreground"
        ><code>{{ configText }}</code>
        </pre>
      </CardContent>
    </Card>

    <template #fallback>
      <!-- SSR 占位，维持右侧列布局，高度与真实卡片近似 -->
      <Skeleton class="h-115.5 rounded-4xl" />
    </template>
  </ClientOnly>
</template>
