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

import { Button } from "@/components/ui/button";
import {
  Card,
  CardAction,
  CardContent,
  CardHeader,
  CardTitle
} from "@/components/ui/card";

const origin = ref("http://localhost:3000");
const copied = ref(false);

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

/** 与旧 Python 项目的 ocs_config_example.json 保持同样字段 */
const configText = computed(() => {
  return JSON.stringify(
    [
      {
        name: "AI智能题库",
        homepage: origin.value,
        url: `${origin.value}/api/search`,
        method: "get",
        contentType: "json",
        data: {
          title: "${title}",
          type: "${type}",
          options: "${options}"
        },
        handler:
          "return (res)=> res.code === 1 ? [res.question, res.answer] : [res.msg, undefined]"
      }
    ],
    null,
    2
  );
});

/** 复制配置片段，失败时不打断主流程 */
const copyConfig = async () => {
  await navigator.clipboard.writeText(configText.value).catch(() => undefined);
  copied.value = true;
  window.setTimeout(() => {
    copied.value = false;
  }, 1200);
};
</script>

<template>
  <Card>
    <CardHeader>
      <CardTitle>OCS 配置</CardTitle>
      <CardAction>
        <Button type="button" variant="outline" size="sm" @click="copyConfig">
          <Check v-if="copied" class="size-3.5" />
          <Copy v-else class="size-3.5" />
          <span>{{ copied ? "已复制" : "复制" }}</span>
        </Button>
      </CardAction>
    </CardHeader>

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