import { useEffect, useState } from "react";
import { Link, useNavigate, useParams } from "react-router";
import { useDataProvider, useList, useOne } from "@refinedev/core";
import {
  Alert,
  Button,
  Card,
  CardContent,
  Copyable,
  DetailList,
  Field,
  Input,
  Modal,
  PageHeader,
  PageState,
  Select,
  StatusPill,
  conflictMessage,
  useUnsavedChanges,
} from "./lib/ui.jsx";
import { useTitle } from "./lib/hooks.js";

const aliasPattern = /^[a-z0-9][a-z0-9-]{0,31}$/;
const platformOptions = ["windows", "linux", "macos"].map((value) => ({
  value,
  label: value,
}));
const brandOptions = ["Chrome", "Edge", "Opera", "Vivaldi"].map((value) => ({
  value,
  label: value,
}));
const spoofingFields = ["font", "audio", "canvas", "clientrects", "gpu"];

const stateText = {
  created: "已创建",
  running: "运行中",
  exited: "已停止",
  restarting: "重启中",
  paused: "已暂停",
  missing: "未部署",
};
const blockText = {
  account_revoked: "授权已撤销",
  account_paused: "账号已暂停",
  binding_missing: "绑定缺失",
  network_exit_missing: "固定出口缺失",
  network_exit_unhealthy: "固定出口不健康",
  runtime_stop_pending: "停止结果待确认",
  runtime_missing: "运行实例缺失",
};

const scheduleBlock = (runtime) =>
  runtime.schedule_status === "ready"
    ? ""
    : blockText[runtime.schedule_block_reason] ||
      runtime.schedule_block_reason ||
      "不可调度";

const createInitial = {
  name: "",
  alias: "",
  gateway: "",
  image_version: "",
  account_id: "",
  network_exit_id: "",
  seed: "",
  platform: "",
  platform_version: "",
  brand: "",
  brand_version: "",
  hardware_concurrency: "",
  lang: "",
  accept_lang: "",
  timezone: "",
  disable_spoofing: [],
};

// 高级字段空值不提交，收敛到 seed 驱动。
function nextFingerprintSeed(runtimes) {
  const used = new Set(
    runtimes
      .map((runtime) => Number(runtime.fingerprint?.seed))
      .filter((seed) => Number.isInteger(seed) && seed > 0),
  );
  let seed = 1000;
  while (used.has(seed)) seed += 1;
  return String(seed);
}

function fingerprintPayload(form) {
  const payload = { seed: Number(form.seed) };
  const advanced = {
    platform: form.platform,
    platform_version: form.platform_version,
    brand: form.brand,
    brand_version: form.brand_version,
    lang: form.lang,
    accept_lang: form.accept_lang,
    timezone: form.timezone,
  };
  for (const [key, value] of Object.entries(advanced))
    if (value !== "") payload[key] = value;
  if (form.hardware_concurrency !== "")
    payload.hardware_concurrency = Number(form.hardware_concurrency);
  if (form.disable_spoofing.length > 0)
    payload.disable_spoofing = form.disable_spoofing.join(",");
  return payload;
}

function StatePill({ state }) {
  const known = Object.hasOwn(stateText, state);
  return (
    <StatusPill
      tone={
        state === "running"
          ? "success"
          : state === "exited"
            ? "warning"
            : "neutral"
      }
      label={known ? stateText[state] : "未知状态"}
      sub={known ? undefined : state}
    />
  );
}

function RuntimeActions({ runtime, busy, onAction }) {
  const running = runtime.state === "running";
  const block =
    runtime.schedule_block_reason === "runtime_missing"
      ? ""
      : scheduleBlock(runtime);
  const startLabel = `启动 ${runtime.name}${block ? `（${block}）` : ""}`;
  return (
    <div className="flex flex-wrap gap-2">
      <Button
        size="sm"
        icon="ri-play-line"
        aria-label={startLabel}
        disabled={busy || running || block !== ""}
        onClick={() => onAction(runtime, "start")}
      >
        启动
      </Button>
      <Button
        size="sm"
        icon="ri-stop-line"
        aria-label={`停止 ${runtime.name}`}
        disabled={busy || !running}
        onClick={() => onAction(runtime, "stop")}
      >
        停止
      </Button>
      <Button
        size="sm"
        icon="ri-arrow-up-circle-line"
        aria-label={`升级 ${runtime.name}`}
        disabled={busy}
        onClick={() => onAction(runtime, "upgrade")}
      >
        升级
      </Button>
      <Button
        size="sm"
        variant="danger"
        icon="ri-delete-bin-line"
        aria-label={`回收 ${runtime.name}`}
        disabled={busy}
        onClick={() => onAction(runtime, "recycle")}
      >
        回收
      </Button>
    </div>
  );
}

function SchedulePill({ runtime }) {
  const block = scheduleBlock(runtime);
  return (
    <StatusPill
      tone={block ? "warning" : "success"}
      label={block || "可调度"}
    />
  );
}

function UpgradeDialog({ target, images, busy, onClose, onConfirm }) {
  const [version, setVersion] = useState("");
  const enabled = images.filter((image) => image.enabled);
  useEffect(() => {
    setVersion("");
  }, [target]);
  return (
    <Modal
      open={target !== null}
      onClose={busy ? undefined : onClose}
      title={`升级 ${target ? `${target.name}（${target.alias}）` : ""}`}
      size="sm"
      labelledBy="upgrade-title"
      footer={
        <>
          <Button onClick={onClose} disabled={busy}>
            取消
          </Button>
          <Button
            variant="primary"
            busy={busy}
            busyText="升级中…"
            disabled={version === "" || version === target?.image_version}
            onClick={() => onConfirm(version)}
          >
            确认升级
          </Button>
        </>
      }
    >
      <div className="space-y-4">
        <p className="text-sm text-muted">
          容器将按新镜像重建，Profile 数据卷与指纹参数保持不变。
        </p>
        <Field id="upgrade-version" label="目标镜像版本" required>
          <Select
            id="upgrade-version"
            value={version}
            onChange={(event) => setVersion(event.target.value)}
            options={enabled.map((image) => ({
              value: image.version,
              label: `${image.version}${image.version === target?.image_version ? "（当前）" : ""}`,
            }))}
            placeholder="选择版本"
          />
        </Field>
      </div>
    </Modal>
  );
}

function RuntimeTable({ runtimes, busy, onAction, onRowClick }) {
  return (
    <div className="hidden overflow-x-auto rounded-lg border border-hairline bg-white md:block">
      <table className="w-full min-w-[860px] table-fixed text-sm">
        <thead>
          <tr className="border-b border-hairline text-left text-xs text-muted">
            <th className="w-[19%] px-4 py-2.5 font-medium">环境</th>
            <th className="w-[12%] px-4 py-2.5 font-medium">状态</th>
            <th className="w-[23%] px-4 py-2.5 font-medium">固定绑定</th>
            <th className="w-[16%] px-4 py-2.5 font-medium">CDP</th>
            <th className="w-[30%] px-4 py-2.5 font-medium">操作</th>
          </tr>
        </thead>
        <tbody>
          {runtimes.map((runtime) => (
            <tr
              key={runtime.alias}
              className="border-b border-hairline last:border-0"
            >
              <td
                className="cursor-pointer px-4 py-3"
                onClick={() => onRowClick(runtime)}
              >
                <p className="font-semibold">{runtime.name}</p>
                <p className="anywhere text-xs text-muted">
                  {runtime.alias} · seed {runtime.fingerprint?.seed}
                </p>
              </td>
              <td className="px-4 py-3">
                <StatePill state={runtime.state} />
              </td>
              <td className="px-4 py-3">
                <p className="text-sm">{runtime.account_id || "未绑定账号"}</p>
                <p className="anywhere text-xs text-muted">
                  {runtime.network_exit_id || "当前机器直连"} ·{" "}
                  {runtime.image_version}
                </p>
                <div className="mt-1">
                  <SchedulePill runtime={runtime} />
                </div>
              </td>
              <td className="px-4 py-3">
                {runtime.endpoint ? (
                  <Copyable value={runtime.endpoint} />
                ) : (
                  <span className="text-sm text-muted">—</span>
                )}
              </td>
              <td className="px-4 py-3">
                <RuntimeActions
                  runtime={runtime}
                  busy={busy === runtime.alias}
                  onAction={onAction}
                />
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function RuntimeCards({ runtimes, busy, onAction }) {
  return (
    <div className="space-y-4 md:hidden">
      {runtimes.map((runtime) => (
        <Card key={runtime.alias}>
          <CardContent className="space-y-3">
            <div>
              <p className="font-semibold">{runtime.name}</p>
              <p className="anywhere text-xs text-muted">
                {runtime.alias} · {runtime.image_version} · seed{" "}
                {runtime.fingerprint?.seed}
              </p>
            </div>
            <StatePill state={runtime.state} />
            <p className="text-sm">
              账号：{runtime.account_id || "未绑定"} · 网络出口：
              {runtime.network_exit_id || "当前机器直连"}
            </p>
            <SchedulePill runtime={runtime} />
            {runtime.endpoint ? <Copyable value={runtime.endpoint} /> : null}
            <RuntimeActions
              runtime={runtime}
              busy={busy === runtime.alias}
              onAction={onAction}
            />
          </CardContent>
        </Card>
      ))}
    </div>
  );
}

export function BrowserList() {
  const navigate = useNavigate();
  const dataProvider = useDataProvider()("default");
  const [busy, setBusy] = useState("");
  const [actionError, setActionError] = useState("");
  const [upgradeTarget, setUpgradeTarget] = useState(null);
  const { result, query } = useList({ resource: "browsers" });
  const error = query.error;
  const isPending = query.isPending;
  const runtimes = result.data ?? [];
  const { result: imageResult } = useList({
    resource: "browser-images",
  });
  const images = imageResult.data ?? [];
  useTitle("CreatorHub · 运行环境");

  async function handleAction(runtime, action) {
    if (
      action === "recycle" &&
      !window.confirm(
        `回收 ${runtime.name}（${runtime.alias}）？容器将被删除，Profile 数据卷保留。`,
      )
    )
      return;
    if (action === "upgrade") {
      setUpgradeTarget(runtime);
      return;
    }
    await runAction(runtime, action);
  }

  async function runAction(runtime, action, data) {
    setBusy(runtime.alias);
    setActionError("");
    try {
      await dataProvider.browserAction(runtime.alias, action, data);
      await query.refetch();
    } catch (reason) {
      setActionError(reason.message);
    } finally {
      setBusy("");
    }
  }

  async function upgrade(version) {
    await runAction(upgradeTarget, "upgrade", { version });
    setUpgradeTarget(null);
  }

  return (
    <div>
      <PageHeader
        icon="ri-server-line"
        title="运行环境"
        description="启动、停止、升级并回收隔离的指纹浏览器"
      >
        <Button
          variant="primary"
          icon="ri-add-line"
          onClick={() => navigate("/browsers/new")}
        >
          创建环境
        </Button>
      </PageHeader>
      {actionError ? (
        <Alert variant="destructive" className="mb-4">
          {actionError}
          <Button size="sm" onClick={() => query.refetch()}>
            重试
          </Button>
        </Alert>
      ) : null}
      <PageState
        pending={isPending}
        error={error}
        empty={runtimes.length === 0}
        emptyText="暂无运行环境，创建第一个隔离 Profile。"
      >
        <RuntimeTable
          runtimes={runtimes}
          busy={busy}
          onAction={handleAction}
          onRowClick={(runtime) =>
            navigate(`/browsers/${encodeURIComponent(runtime.alias)}`)
          }
        />
        <RuntimeCards runtimes={runtimes} busy={busy} onAction={handleAction} />
      </PageState>
      <UpgradeDialog
        target={upgradeTarget}
        images={images}
        busy={busy === upgradeTarget?.alias}
        onClose={() => setUpgradeTarget(null)}
        onConfirm={upgrade}
      />
    </div>
  );
}

export function BrowserCreatePage() {
  const navigate = useNavigate();
  const dataProvider = useDataProvider()("default");
  const [form, setForm] = useState(createInitial);
  const [advancedOpen, setAdvancedOpen] = useState(false);
  const [submitBusy, setSubmitBusy] = useState(false);
  const [submitError, setSubmitError] = useState("");
  const { result: runtimesResult, query: runtimesQuery } = useList({
    resource: "browsers",
  });
  const { result: gatewayResult } = useList({ resource: "gateways" });
  const gateways = gatewayResult.data ?? [];
  const runtimes = runtimesResult.data ?? [];
  const { result: imageResult } = useList({ resource: "browser-images" });
  const images = imageResult.data ?? [];
  const { result: accountResult } = useList({ resource: "accounts" });
  const accounts = accountResult.data ?? [];
  const { result: exitResult } = useList({ resource: "network-exits" });
  const networkExits = exitResult.data ?? [];
  useTitle("CreatorHub · 创建运行环境");

  const enabledImages = images.filter((image) => image.enabled);
  const pausedAccounts = accounts.filter(
    (account) =>
      account.authorization_status === "authorized" &&
      account.runtime_status === "paused",
  );
  const healthyExits = networkExits.filter(
    (item) => item.health_status === "healthy",
  );
  const update = (key, value) =>
    setForm((current) => ({ ...current, [key]: value }));
  const toggleSpoofing = (field) =>
    setForm((current) => ({
      ...current,
      disable_spoofing: current.disable_spoofing.includes(field)
        ? current.disable_spoofing.filter((item) => item !== field)
        : [...current.disable_spoofing, field],
    }));

  // 选中项为空且列表就绪时，默认选中第一个可选项，减少必填噪音。
  useEffect(() => {
    if (form.gateway === "" && gateways.length > 0)
      update("gateway", gateways[0].name);
  }, [gateways, form.gateway]);
  useEffect(() => {
    if (form.image_version === "" && enabledImages.length > 0)
      update("image_version", enabledImages[0].version);
  }, [enabledImages, form.image_version]);
  useEffect(() => {
    if (form.account_id === "" && pausedAccounts[0]?.id)
      update("account_id", pausedAccounts[0].id);
  }, [pausedAccounts, form.account_id]);
  useEffect(() => {
    if (form.seed === "" && runtimesResult.data !== undefined)
      update("seed", nextFingerprintSeed(runtimes));
  }, [form.seed, runtimes, runtimesResult.data]);
  useUnsavedChanges(
    Boolean(form.name || form.alias || form.seed || advancedOpen),
  );

  const seed = Number(form.seed);
  const valid =
    form.name.trim() !== "" &&
    aliasPattern.test(form.alias) &&
    form.gateway !== "" &&
    form.image_version !== "" &&
    form.account_id !== "" &&
    Number.isInteger(seed) &&
    seed >= 1 &&
    seed <= 2147483647;

  async function submit(event) {
    event.preventDefault();
    if (!valid) return;
    setSubmitBusy(true);
    setSubmitError("");
    try {
      await dataProvider.create({
        resource: "browsers",
        variables: {
          alias: form.alias,
          name: form.name.trim(),
          gateway: form.gateway,
          image_version: form.image_version,
          account_id: form.account_id,
          network_exit_id: form.network_exit_id,
          fingerprint: fingerprintPayload(form),
        },
      });
      await runtimesQuery.refetch();
      navigate("/browsers");
    } catch (reason) {
      setSubmitError(
        reason.status === 503
          ? `环境不可用（503）：${reason.message}`
          : conflictMessage(
              reason,
              "账号或运行环境已有活动绑定；表单内容已保留。",
            ),
      );
    } finally {
      setSubmitBusy(false);
    }
  }

  return (
    <div className="max-w-[960px]">
      <PageHeader
        title="创建运行环境"
        description="为已授权且暂停的账号绑定网关、镜像、指纹与网络出口"
      >
        <Button icon="ri-arrow-left-line" onClick={() => navigate("/browsers")}>
          返回运行环境
        </Button>
      </PageHeader>
      {submitError ? (
        <Alert variant="destructive" className="mb-4">
          {submitError}
        </Alert>
      ) : null}
      <Card>
        <CardContent>
          <form onSubmit={submit} noValidate className="space-y-6">
            <div className="grid gap-5 sm:grid-cols-2">
              <Field
                id="env-name"
                label="环境名称"
                required
                helper="展示名称，支持中文，如：店铺一号"
              >
                <Input
                  id="env-name"
                  required
                  maxLength={64}
                  value={form.name}
                  onChange={(event) => update("name", event.target.value)}
                />
              </Field>
              <Field
                id="env-alias"
                label="别名（容器名）"
                required
                error={
                  form.alias !== "" && !aliasPattern.test(form.alias)
                    ? "小写字母、数字与中划线，最长 32 字符"
                    : undefined
                }
                helper="用于容器名、数据卷与 API 路径"
              >
                <Input
                  id="env-alias"
                  required
                  pattern="[a-z0-9][a-z0-9-]{0,31}"
                  value={form.alias}
                  onChange={(event) => update("alias", event.target.value)}
                  placeholder="如：shop-01"
                />
              </Field>
              <Field
                id="env-gateway"
                label="网关"
                required
                error={
                  gateways.length === 0
                    ? "请先在「网关管理」注册网关"
                    : undefined
                }
                helper="容器调度到该网关"
              >
                <Select
                  id="env-gateway"
                  value={form.gateway}
                  onChange={(event) => update("gateway", event.target.value)}
                  options={gateways.map((item) => ({
                    value: item.name,
                    label: item.name,
                  }))}
                  placeholder="选择网关"
                  disabled={gateways.length === 0}
                />
              </Field>
              <Field
                id="env-version"
                label="镜像版本"
                required
                error={
                  enabledImages.length === 0
                    ? "请先在「镜像版本」添加并启用"
                    : undefined
                }
                helper="环境使用的浏览器镜像"
              >
                <Select
                  id="env-version"
                  value={form.image_version}
                  onChange={(event) =>
                    update("image_version", event.target.value)
                  }
                  options={enabledImages.map((item) => ({
                    value: item.version,
                    label: item.version,
                  }))}
                  placeholder="选择版本"
                  disabled={enabledImages.length === 0}
                />
              </Field>
              <Field
                id="env-seed"
                label="Fingerprint Seed"
                required
                helper="1..2147483647，派生指纹参数"
              >
                <Input
                  id="env-seed"
                  type="number"
                  min={1}
                  max={2147483647}
                  required
                  value={form.seed}
                  onChange={(event) => update("seed", event.target.value)}
                />
              </Field>
              <Field
                id="env-account"
                label="社媒账号"
                required
                error={
                  pausedAccounts.length === 0
                    ? "请先准备已授权且暂停的账号"
                    : undefined
                }
                helper="绑定后该账号固定使用此环境"
              >
                <Select
                  id="env-account"
                  value={form.account_id}
                  onChange={(event) => update("account_id", event.target.value)}
                  options={pausedAccounts.map((item) => ({
                    value: item.id,
                    label: `${item.id} · ${item.platform}`,
                  }))}
                  placeholder="选择账号"
                  disabled={pausedAccounts.length === 0}
                />
              </Field>
              <Field
                id="env-exit"
                label="网络出口"
                helper="留空时使用当前机器网络出口直连"
              >
                <Select
                  id="env-exit"
                  value={form.network_exit_id}
                  onChange={(event) =>
                    update("network_exit_id", event.target.value)
                  }
                  options={healthyExits.map((item) => ({
                    value: item.id,
                    label: `${item.id} · ${item.protocol}://${item.host}:${item.port}`,
                  }))}
                  placeholder="当前机器直连"
                  emptyOption={{ value: "", label: "当前机器直连" }}
                />
              </Field>
            </div>
            <div>
              <button
                type="button"
                onClick={() => setAdvancedOpen((current) => !current)}
                className="flex items-center gap-1.5 text-sm font-medium text-primary hover:underline"
              >
                高级指纹参数{advancedOpen ? "（收起）" : "（展开）"}
                <i
                  className={
                    advancedOpen ? "ri-arrow-up-s-line" : "ri-arrow-down-s-line"
                  }
                  aria-hidden="true"
                />
              </button>
              {advancedOpen ? (
                <div className="mt-4 grid gap-5 border-t border-hairline pt-4 sm:grid-cols-3">
                  <Field id="env-platform" label="操作系统 platform">
                    <Select
                      id="env-platform"
                      value={form.platform}
                      onChange={(event) =>
                        update("platform", event.target.value)
                      }
                      options={platformOptions}
                      emptyOption={{ value: "", label: "默认" }}
                      placeholder="默认"
                    />
                  </Field>
                  <Field
                    id="env-platform-version"
                    label="系统版本 platform-version"
                    helper="如 11.0.0"
                  >
                    <Input
                      id="env-platform-version"
                      value={form.platform_version}
                      onChange={(event) =>
                        update("platform_version", event.target.value)
                      }
                    />
                  </Field>
                  <Field id="env-brand" label="浏览器品牌 brand">
                    <Select
                      id="env-brand"
                      value={form.brand}
                      onChange={(event) => update("brand", event.target.value)}
                      options={brandOptions}
                      emptyOption={{ value: "", label: "默认 Chromium" }}
                      placeholder="默认 Chromium"
                    />
                  </Field>
                  <Field
                    id="env-brand-version"
                    label="品牌版本 brand-version"
                    helper="如 132.0.6834.159"
                  >
                    <Input
                      id="env-brand-version"
                      value={form.brand_version}
                      onChange={(event) =>
                        update("brand_version", event.target.value)
                      }
                    />
                  </Field>
                  <Field
                    id="env-concurrency"
                    label="CPU 核心数 hardware-concurrency"
                    helper="留空由种子生成"
                  >
                    <Input
                      id="env-concurrency"
                      type="number"
                      min={1}
                      max={128}
                      value={form.hardware_concurrency}
                      onChange={(event) =>
                        update("hardware_concurrency", event.target.value)
                      }
                    />
                  </Field>
                  <Field id="env-lang" label="语言 lang" helper="如 zh-CN">
                    <Input
                      id="env-lang"
                      value={form.lang}
                      onChange={(event) => update("lang", event.target.value)}
                    />
                  </Field>
                  <Field
                    id="env-accept-lang"
                    label="接受语言 accept-lang"
                    helper="如 zh-CN,en-US"
                  >
                    <Input
                      id="env-accept-lang"
                      value={form.accept_lang}
                      onChange={(event) =>
                        update("accept_lang", event.target.value)
                      }
                    />
                  </Field>
                  <Field
                    id="env-timezone"
                    label="时区 timezone"
                    helper="如 Asia/Shanghai"
                  >
                    <Input
                      id="env-timezone"
                      value={form.timezone}
                      onChange={(event) =>
                        update("timezone", event.target.value)
                      }
                    />
                  </Field>
                  <div className="space-y-1.5">
                    <p className="text-sm font-medium">
                      禁用指纹伪装 disable-spoofing
                    </p>
                    <div className="flex flex-wrap gap-x-4 gap-y-2">
                      {spoofingFields.map((field) => (
                        <label
                          key={field}
                          className="flex cursor-pointer items-center gap-1.5 text-sm"
                        >
                          <input
                            type="checkbox"
                            checked={form.disable_spoofing.includes(field)}
                            onChange={() => toggleSpoofing(field)}
                            aria-label={`禁用伪装 ${field}`}
                            className="size-4 accent-primary"
                          />
                          {field}
                        </label>
                      ))}
                    </div>
                  </div>
                </div>
              ) : null}
            </div>
            <div className="flex gap-3">
              <Button
                variant="primary"
                type="submit"
                busy={submitBusy}
                busyText="创建中…"
                disabled={!valid}
              >
                创建环境
              </Button>
              <Button type="button" onClick={() => navigate("/browsers")}>
                取消
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  );
}

export function BrowserDetail() {
  const { id } = useParams();
  const { result, error, isPending } = useOne({
    resource: "browsers",
    id,
    queryOptions: { retry: false },
  });
  const runtime = result;
  useTitle("CreatorHub · 环境详情");
  if (isPending) return <PageState pending />;
  if (error || !runtime)
    return (
      <Alert variant="destructive">{error?.message || "运行环境不存在"}</Alert>
    );
  return (
    <div>
      <PageHeader
        title="运行环境详情"
        description={`${runtime.name}（${runtime.alias}）`}
      >
        <Button icon="ri-arrow-left-line" as={Link} to="/browsers">
          返回运行环境
        </Button>
      </PageHeader>
      <Card>
        <CardContent className="space-y-4">
          <StatePill state={runtime.state} />
          <DetailList
            rows={[
              [
                "账号与镜像",
                <span className="anywhere">
                  {runtime.account_id} · {runtime.image_version}
                </span>,
              ],
              [
                "固定出口",
                <span className="anywhere">
                  {runtime.network_exit?.id || "未绑定"} · 健康：
                  {runtime.network_exit?.health_status || "未知"}
                </span>,
              ],
              [
                "绑定版本 / 运行实例",
                <span className="anywhere">
                  {runtime.binding_version} ·{" "}
                  {runtime.runtime_instance_id || "无"}
                </span>,
              ],
            ]}
          />
          {runtime.endpoint ? (
            <div className="flex min-w-0 flex-col gap-0.5 text-sm">
              <dt className="text-muted">CDP</dt>
              <dd>
                <Copyable value={runtime.endpoint} />
              </dd>
            </div>
          ) : null}
          <div className="flex flex-wrap gap-3">
            <Button
              as={Link}
              to={`/accounts/${encodeURIComponent(runtime.account_id)}`}
            >
              查看账号
            </Button>
            {runtime.network_exit?.id ? (
              <Button
                as={Link}
                to={`/network-exits/${encodeURIComponent(runtime.network_exit.id)}`}
              >
                查看出口
              </Button>
            ) : null}
          </div>
        </CardContent>
      </Card>
    </div>
  );
}