"use client";

import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { useState } from "react";
import clsx from "clsx";
import { sendAppLog } from "@/components/app-runtime";
import { DeviceImportDraftManager } from "@/components/device-import-draft-manager";
import {
  clearNativeSessionSnapshot,
  currentAppLocation,
  isNativeBossApp,
  persistNativeSessionSnapshot,
  popAppHistoryEntry,
  resolveAppBackAction,
} from "@/lib/boss-app-client";
import { getMasterAgentChatMenuItems } from "@/lib/master-agent-chat-menu";
import {
  extractApprovedTargetProjectIds,
  summarizeDispatchPlan,
  summarizeDispatchPlanCompact,
  summarizeDispatchPlanLightTitle,
} from "@/lib/dispatch-plan-ui";
import type {
  ThreadConversationExecutionConflict,
  ThreadConversationExecutionConflictAction,
} from "@/lib/thread-execution-conflict";
import { parseChatMarkdown, type ChatMarkdownBlock } from "@/lib/chat-markdown";
import {
  describeThreadConversationExecutionConflict,
  labelForProjectConflictAllowPolicy,
  labelForProjectConflictState,
  labelForThreadConversationExecutionConflictDecision,
  summarizeThreadConversationExecutionDecisionResult,
} from "@/lib/thread-execution-conflict-ui";
import type {
  Device,
  DeviceEnrollment,
  GoalItem,
  MasterIdentitySummary,
  Message,
  OtaUpdate,
  OtaUpdateLog,
  OpsRepairTicket,
  OpsRepairVerification,
  ProjectOrchestrationBackendState,
  OrchestrationBackendId,
  ThreadContextSnapshot,
  UserProfile,
  UserSettings,
} from "@/lib/boss-data";
import type { ConversationItem, DeviceWorkspaceView } from "@/lib/boss-projections";
import { formatTimestampLabel } from "@/lib/boss-projections";

function formatClock(value: string) {
  return formatTimestampLabel(value);
}

function formatBytes(value?: number) {
  if (!value || value <= 0) return "未知大小";
  if (value >= 1024 * 1024) return `${(value / 1024 / 1024).toFixed(2)} MB`;
  if (value >= 1024) return `${(value / 1024).toFixed(1)} KB`;
  return `${value} B`;
}

function boundDeviceIdFromDom() {
  return document.body.dataset.boundDeviceId || "mac-studio";
}

function arrayLength(value: unknown) {
  return Array.isArray(value) ? value.length : 0;
}

function textFromMetadata(value: unknown) {
  return typeof value === "string" && value.trim() ? value.trim() : "未发现";
}

function objectFromMetadata(value: unknown): Record<string, unknown> {
  return value && typeof value === "object" && !Array.isArray(value) ? (value as Record<string, unknown>) : {};
}

function numberFromMetadata(value: unknown) {
  const numeric = Number(value);
  return Number.isFinite(numeric) ? Math.max(0, Math.round(numeric)) : 0;
}

function minuteTimestampFromMetadata(value: unknown) {
  const text = typeof value === "string" ? value.trim() : "";
  if (!text) return "未发现";
  const date = new Date(text);
  if (Number.isNaN(date.getTime())) return text;
  const parts = new Intl.DateTimeFormat("zh-CN", {
    timeZone: "Asia/Shanghai",
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
    hour12: false,
  }).formatToParts(date);
  const valueOf = (type: string) => parts.find((part) => part.type === type)?.value ?? "";
  return `${valueOf("year")}-${valueOf("month")}-${valueOf("day")} ${valueOf("hour")}:${valueOf("minute")}`;
}

export function buildDeviceWorkspaceDetailCards(workspace: DeviceWorkspaceView) {
  const selectedDevice = workspace.selectedDevice;
  const primaryPolicy = workspace.projectExecutionPolicies?.[0];
  const codexAppServerMetadata = selectedDevice?.capabilities?.codexAppServer?.metadata ?? {};
  const codexModelsCount = arrayLength(codexAppServerMetadata.models);
  const codexSkillCount = arrayLength(codexAppServerMetadata.skills);
  const codexPluginCount = arrayLength(codexAppServerMetadata.plugins);
  const codexAppCount = arrayLength(codexAppServerMetadata.apps);
  const codexExperimentalFeatureCount = arrayLength(codexAppServerMetadata.experimentalFeatures);
  const codexCollaborationModeCount = arrayLength(codexAppServerMetadata.collaborationModes);
  const codexMcpServerCount = arrayLength(codexAppServerMetadata.mcpServers);
  const codexPermissionProfileCount = arrayLength(codexAppServerMetadata.permissionProfiles);
  const codexAccountSummary = objectFromMetadata(codexAppServerMetadata.accountSummary);
  const codexRateLimitSummary = objectFromMetadata(codexAppServerMetadata.rateLimitSummary);
  const codexAppConfigSummary = objectFromMetadata(codexAppServerMetadata.appConfigSummary);
  const codexConfigRequirements = objectFromMetadata(codexAppServerMetadata.configRequirements);
  const codexExternalAgentMigration = objectFromMetadata(codexAppServerMetadata.externalAgentMigration);
  const codexSkillExtraRootsSummary = objectFromMetadata(codexAppServerMetadata.skillExtraRootsSummary);
  const codexHookSummary = objectFromMetadata(codexAppServerMetadata.hookSummary);
  const codexThreadSummary = objectFromMetadata(codexAppServerMetadata.threadSummary);
  const codexThreadTurnSummary = objectFromMetadata(codexAppServerMetadata.threadTurnSummary);
  const codexThreadActionSummary = objectFromMetadata(codexAppServerMetadata.threadActionSummary);
  const codexPluginGovernanceSummary = objectFromMetadata(codexAppServerMetadata.pluginGovernanceSummary);
  const codexAccountGovernanceSummary = objectFromMetadata(codexAppServerMetadata.accountGovernanceSummary);
  const codexConfigGovernanceSummary = objectFromMetadata(codexAppServerMetadata.configGovernanceSummary);
  const codexFileSystemGovernanceSummary = objectFromMetadata(codexAppServerMetadata.fileSystemGovernanceSummary);
  const codexCommandSessionSummary = objectFromMetadata(codexAppServerMetadata.commandSessionSummary);
  const codexExternalAgentGovernanceSummary = objectFromMetadata(
    codexAppServerMetadata.externalAgentGovernanceSummary,
  );
  const codexMarketplaceGovernanceSummary = objectFromMetadata(codexAppServerMetadata.marketplaceGovernanceSummary);
  const codexExperimentalFeatureGovernanceSummary = objectFromMetadata(
    codexAppServerMetadata.experimentalFeatureGovernanceSummary,
  );
  const codexReviewGovernanceSummary = objectFromMetadata(codexAppServerMetadata.reviewGovernanceSummary);
  const codexWindowsSandboxGovernanceSummary = objectFromMetadata(
    codexAppServerMetadata.windowsSandboxGovernanceSummary,
  );
  const codexFuzzyFileSearchSummary = objectFromMetadata(codexAppServerMetadata.fuzzyFileSearchSummary);

  return {
    capabilities: {
      title: "执行能力",
      items: {
        gui: `GUI：${selectedDevice?.capabilities?.gui?.connected ? "已连接" : "未连接"}`,
        cli: `CLI：${selectedDevice?.capabilities?.cli?.connected ? "已连接" : "未连接"}`,
        browserAutomation: `浏览器自动化：${
          selectedDevice?.capabilities?.browserAutomation?.connected ? "已连接" : "未连接"
        }`,
        computerUse: `桌面控制：${
          selectedDevice?.capabilities?.computerUse?.connected ? "已连接" : "未连接"
        }`,
        codexAppServer: `Codex App Server：${
          selectedDevice?.capabilities?.codexAppServer?.connected ? "已连接" : "未连接"
        }`,
        codexModels:
          codexModelsCount > 0
            ? `模型：${codexModelsCount} 个 · 默认 ${textFromMetadata(
                codexAppServerMetadata.defaultModelId,
              )} · 快速 ${textFromMetadata(codexAppServerMetadata.fastModelId)} · 深度 ${textFromMetadata(
                codexAppServerMetadata.deepModelId,
              )}`
            : "模型：未发现",
        codexExtensions: `扩展：Skill ${codexSkillCount} 个 · Plugin ${codexPluginCount} 个 · App ${codexAppCount} 个`,
        codexGovernance: `治理：实验特性 ${codexExperimentalFeatureCount} 个 · 协作模式 ${codexCollaborationModeCount} 个 · MCP ${codexMcpServerCount} 个 · 权限 ${codexPermissionProfileCount} 个`,
        codexAccount: `账号：${textFromMetadata(codexAccountSummary.authMode)} · 套餐 ${textFromMetadata(
          codexAccountSummary.planType,
        )} · 额度 ${numberFromMetadata(codexRateLimitSummary.maxUsedPercent)}%`,
        codexConfig: `配置：App ${numberFromMetadata(codexAppConfigSummary.appCount)} 个 · 已启用 ${numberFromMetadata(
          codexAppConfigSummary.enabledAppCount,
        )} 个 · 托管要求 ${numberFromMetadata(codexConfigRequirements.requirementCount)} 个 · 外部迁移 ${numberFromMetadata(
          codexExternalAgentMigration.itemCount,
        )} 项`,
        codexSkillRoots: `共享 Skill 根：${numberFromMetadata(codexSkillExtraRootsSummary.rootCount)} 个 · ${
          textFromMetadata(codexSkillExtraRootsSummary.status) === "applied"
            ? "已下发"
            : textFromMetadata(codexSkillExtraRootsSummary.status) === "failed"
              ? "下发失败"
              : "未配置"
        }`,
        codexHooks: `Hook：${numberFromMetadata(codexHookSummary.hookCount)} 个 · 启用 ${numberFromMetadata(
          codexHookSummary.enabledHookCount,
        )} 个 · 警告 ${numberFromMetadata(codexHookSummary.warningCount)} 个`,
        codexThreads: `线程：${numberFromMetadata(codexThreadSummary.threadCount)} 个 · 已加载 ${numberFromMetadata(
          codexThreadSummary.loadedThreadCount,
        )} 个 · 活跃 ${numberFromMetadata(codexThreadSummary.activeThreadCount)} 个 · 最新 ${minuteTimestampFromMetadata(
          codexThreadSummary.latestUpdatedAt,
        )}`,
        codexTurns: `轮次：${numberFromMetadata(codexThreadTurnSummary.totalTurnCount)} 个 · 运行中 ${numberFromMetadata(
          codexThreadTurnSummary.runningTurnCount,
        )} 个 · 完成 ${numberFromMetadata(codexThreadTurnSummary.completedTurnCount)} 个 · 最新 ${minuteTimestampFromMetadata(
          codexThreadTurnSummary.latestUpdatedAt,
        )}`,
        codexThreadActions: `线程操作：${numberFromMetadata(
          codexThreadActionSummary.actionCount,
        )} 项 · 生命周期 ${numberFromMetadata(codexThreadActionSummary.lifecycleActionCount)} 项 · 活跃干预 ${numberFromMetadata(
          codexThreadActionSummary.liveTurnActionCount,
        )} 项 · ${codexThreadActionSummary.shellActionAvailable === true ? "Shell 可用" : "Shell 不可用"}`,
        codexPluginGovernance: `插件治理：${numberFromMetadata(
          codexPluginGovernanceSummary.actionCount,
        )} 项 · 安装/卸载 ${numberFromMetadata(codexPluginGovernanceSummary.lifecycleActionCount)} 项 · 共享 ${numberFromMetadata(
          codexPluginGovernanceSummary.shareActionCount,
        )} 项 · ${codexPluginGovernanceSummary.skillReadAvailable === true ? "Skill 读取可用" : "Skill 读取不可用"}`,
        codexAccountGovernance: `账号治理：${numberFromMetadata(
          codexAccountGovernanceSummary.actionCount,
        )} 项 · 登录 ${numberFromMetadata(codexAccountGovernanceSummary.loginActionCount)} 项 · ${
          codexAccountGovernanceSummary.tokenRefreshAvailable === true ? "令牌刷新可用" : "令牌刷新不可用"
        } · ${codexAccountGovernanceSummary.billingNudgeAvailable === true ? "额度提醒可用" : "额度提醒不可用"}`,
        codexConfigGovernance: `配置治理：${numberFromMetadata(
          codexConfigGovernanceSummary.actionCount,
        )} 项 · 写入 ${numberFromMetadata(codexConfigGovernanceSummary.writeActionCount)} 项 · 重载 ${numberFromMetadata(
          codexConfigGovernanceSummary.reloadActionCount,
        )} 项 · ${codexConfigGovernanceSummary.readActionAvailable === true ? "读取可用" : "读取不可用"}`,
        codexFileSystemGovernance: `文件治理：${numberFromMetadata(
          codexFileSystemGovernanceSummary.actionCount,
        )} 项 · 读 ${numberFromMetadata(codexFileSystemGovernanceSummary.readActionCount)} 项 · 写 ${numberFromMetadata(
          codexFileSystemGovernanceSummary.writeActionCount,
        )} 项 · 监听 ${numberFromMetadata(codexFileSystemGovernanceSummary.watchActionCount)} 项`,
        codexCommandSession: `命令会话：${numberFromMetadata(
          codexCommandSessionSummary.actionCount,
        )} 项 · 控制 ${numberFromMetadata(codexCommandSessionSummary.controlActionCount)} 项 · ${
          codexCommandSessionSummary.streamAvailable === true ? "输出流可用" : "输出流不可用"
        } · ${codexCommandSessionSummary.terminationAvailable === true ? "可终止" : "不可终止"}`,
        codexExternalAgentGovernance: `迁移治理：${numberFromMetadata(
          codexExternalAgentGovernanceSummary.actionCount,
        )} 项 · 导入 ${numberFromMetadata(codexExternalAgentGovernanceSummary.importActionCount)} 项 · ${
          codexExternalAgentGovernanceSummary.detectActionAvailable === true ? "检测可用" : "检测不可用"
        }`,
        codexMarketplaceGovernance: `市场治理：${numberFromMetadata(
          codexMarketplaceGovernanceSummary.actionCount,
        )} 项 · 写入 ${numberFromMetadata(codexMarketplaceGovernanceSummary.writeActionCount)} 项 · ${
          codexMarketplaceGovernanceSummary.upgradeAvailable === true ? "升级可用" : "升级不可用"
        }`,
        codexExperimentalFeatureGovernance: `实验特性治理：${numberFromMetadata(
          codexExperimentalFeatureGovernanceSummary.actionCount,
        )} 项 · 写入 ${numberFromMetadata(codexExperimentalFeatureGovernanceSummary.writeActionCount)} 项 · ${
          codexExperimentalFeatureGovernanceSummary.listAvailable === true ? "列表可用" : "列表不可用"
        }`,
        codexReviewGovernance: `审查治理：${numberFromMetadata(
          codexReviewGovernanceSummary.actionCount,
        )} 项 · ${codexReviewGovernanceSummary.reviewStartAvailable === true ? "审查可启动" : "审查不可启动"}`,
        codexWindowsSandboxGovernance: `Windows 沙箱：${numberFromMetadata(
          codexWindowsSandboxGovernanceSummary.actionCount,
        )} 项 · 设置 ${numberFromMetadata(codexWindowsSandboxGovernanceSummary.setupActionCount)} 项 · ${
          codexWindowsSandboxGovernanceSummary.readinessAvailable === true ? "准备检查可用" : "准备检查不可用"
        }`,
        codexFuzzyFileSearch: `文件搜索事件：${numberFromMetadata(
          codexFuzzyFileSearchSummary.eventCount,
        )} 项 · ${codexFuzzyFileSearchSummary.completedEventAvailable === true ? "完成事件可用" : "完成事件不可用"}`,
        preferredExecutionMode: `默认执行模式：${
          selectedDevice?.preferredExecutionMode === "gui"
            ? "GUI"
            : selectedDevice?.preferredExecutionMode === "cli"
              ? "CLI"
              : "未知"
        }`,
      },
    },
    conflicts: {
      title: "异常项目 / 文件夹冲突",
      headerHint: primaryPolicy ? "已接入，可直接调整" : "当前没有异常项目",
      scopeLabel: "仅作用于当前异常项目 / 文件夹",
      actions: ["禁止", "允许本次", "永久放行"],
      items: {
        device: `设备：${selectedDevice?.name ?? selectedDevice?.id ?? "未知设备"}`,
        folderKey: `文件夹：${primaryPolicy?.folderKey ?? "暂无"}`,
        projectId: `项目：${primaryPolicy?.projectId ?? "暂无"}`,
        allowPolicy: `当前策略：${labelForProjectConflictAllowPolicy(primaryPolicy?.allowPolicy ?? null)}`,
        conflictState: `冲突态：${labelForProjectConflictState(primaryPolicy?.conflictState ?? null)}`,
      },
    },
  };
}

async function waitForLoginSessionReady(nativeClient: boolean) {
  for (let attempt = 0; attempt < 5; attempt += 1) {
    const response = await fetch("/api/auth/session", {
      cache: "no-store",
      headers: nativeClient ? { "x-boss-native-app": "1" } : undefined,
    }).catch(() => null);
    if (response?.ok) {
      return true;
    }
    await new Promise((resolve) => window.setTimeout(resolve, 120));
  }
  return false;
}

function resolvePostLoginPath() {
  return window.location.hostname === "admin.boss.hyzq.net"
    ? "/"
    : "/conversations";
}

function navigateAfterLogin(router: ReturnType<typeof useRouter>) {
  const targetPath = resolvePostLoginPath();
  router.replace(targetPath, { scroll: false });
  router.refresh();
  window.setTimeout(() => {
    if (window.location.pathname !== targetPath) {
      window.location.replace(targetPath);
    }
  }, 180);
}

export function AppShell({
  children,
  bottomNav = true,
}: {
  children: React.ReactNode;
  bottomNav?: boolean;
}) {
  return (
    <main className="min-h-[100dvh] md:px-6 md:py-6">
      <div
        className={clsx(
          "flex w-full flex-col bg-[rgba(247,249,245,0.90)] backdrop-blur-[18px]",
          bottomNav ? "min-h-[100dvh] overflow-hidden md:h-[calc(100dvh-48px)]" : "min-h-[100dvh]",
          "md:mx-auto md:max-w-[430px] md:overflow-hidden md:rounded-[32px] md:border md:border-white/70 md:shadow-[0_20px_48px_rgba(22,31,44,0.14)]",
        )}
      >
        <div
          className={clsx(
            "flex min-h-0 flex-1 flex-col",
            bottomNav ? "overflow-y-auto overscroll-y-contain boss-scrollbar" : "",
          )}
        >
          {children}
        </div>
        {bottomNav ? <BottomNav /> : null}
      </div>
    </main>
  );
}

export function StatusBar() {
  return <div className="shrink-0" style={{ height: "max(12px, env(safe-area-inset-top))" }} />;
}

export function PageNav({
  title,
  backHref,
  rightLabel,
  rightHref,
  rightNode,
}: {
  title: string;
  backHref?: string;
  rightLabel?: string;
  rightHref?: string;
  rightNode?: React.ReactNode;
}) {
  const router = useRouter();

  async function handleBack() {
    const currentPath = currentAppLocation();
    const action = resolveAppBackAction(currentPath, backHref);
    if (action.mode === "history") {
      popAppHistoryEntry(currentPath);
      router.back();
      return;
    }
    if (action.mode === "replace") {
      popAppHistoryEntry(currentPath);
      router.replace(action.target, { scroll: false });
    }
  }

  return (
    <div className="flex items-center justify-between px-[18px] py-2">
      {backHref ? (
        <button type="button" onClick={() => void handleBack()} className="text-[15px] text-[#57606A]">
          {"< 返回"}
        </button>
      ) : (
        <span className="w-12" />
      )}
      <h1 className="text-[17px] font-semibold text-[#111111]">{title}</h1>
      {rightNode ? (
        rightNode
      ) : rightLabel ? (
        <Link href={rightHref ?? "#"} className="text-[15px] font-semibold text-[#07C160]">
          {rightLabel}
        </Link>
      ) : (
        <span className="w-12" />
      )}
    </div>
  );
}

export function BottomNav() {
  const pathname = usePathname();
  const items = [
    { href: "/conversations", label: "会话", icon: "◌" },
    { href: "/devices", label: "设备", icon: "◫" },
    { href: "/me", label: "我的", icon: "◍" },
  ];

  return (
    <div className="mt-auto shrink-0 border-t border-[#E5E5EA] bg-[rgba(255,255,255,0.94)] backdrop-blur-xl">
      <div
        className="flex items-center justify-between px-[18px] pt-[8px]"
        style={{ minHeight: "64px", paddingBottom: "max(12px, env(safe-area-inset-bottom))" }}
      >
        {items.map((item) => {
          const active = pathname.startsWith(item.href);
          return (
            <Link
              key={item.href}
              href={item.href}
              className="flex w-full flex-col items-center gap-1 text-xs"
            >
              <span className={clsx("text-lg", active ? "text-[#07C160]" : "text-[#9A9A9A]")}>
                {item.icon}
              </span>
              <span className={clsx(active ? "text-[#07C160]" : "text-[#9A9A9A]")}>
                {item.label}
              </span>
            </Link>
          );
        })}
      </div>
    </div>
  );
}

export function HeaderTitle({
  title,
  extra,
}: {
  title: string;
  extra?: React.ReactNode;
}) {
  return (
    <div className="flex items-center justify-between px-[18px] py-2">
      <h1 className="text-[22px] font-semibold text-[#111111]">{title}</h1>
      {extra}
    </div>
  );
}

export function LogoutButton({
  label = "退出登录",
  compact = false,
}: {
  label?: string;
  compact?: boolean;
}) {
  const router = useRouter();
  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState("");

  async function handleLogout() {
    setLoading(true);
    const response = await fetch("/api/auth/logout", {
      method: "POST",
    });
    const result = (await response.json()) as { ok: boolean; message?: string };
    setLoading(false);
    setMessage(result.message ?? (result.ok ? "已退出登录。" : "退出失败。"));
    if (result.ok) {
      await clearNativeSessionSnapshot();
      router.push("/auth/login");
      router.refresh();
    }
  }

  if (compact) {
    return (
      <button
        type="button"
        onClick={() => void handleLogout()}
        disabled={loading}
        className="text-[15px] font-semibold text-[#07C160]"
      >
        {loading ? "退出中" : label}
      </button>
    );
  }

  return (
    <div className="rounded-2xl border border-[#E5E5EA] bg-white px-4 py-4">
      <div className="flex items-center justify-between gap-3">
        <div>
          <div className="text-[16px] font-medium text-[#111111]">{label}</div>
          <div className="mt-1 text-[12px] text-[#8C8C8C]">
            清除当前会话，回到登录页重新选择账号或验证码方式。
          </div>
        </div>
        <button
          type="button"
          onClick={() => void handleLogout()}
          disabled={loading}
          className="rounded-full bg-[#111111] px-4 py-2 text-[13px] font-semibold text-white"
        >
          {loading ? "退出中" : "立即退出"}
        </button>
      </div>
      {message ? (
        <div className="mt-3 rounded-2xl bg-[#F7F8FA] px-4 py-3 text-[12px] text-[#57606A]">
          {message}
        </div>
      ) : null}
    </div>
  );
}

export function AvatarStack({
  primary,
  secondary,
  overflowCount,
}: {
  primary: string;
  secondary?: string;
  overflowCount?: number;
}) {
  if (!secondary) {
    return (
      <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#DFF4E8] text-lg font-semibold text-[#215B39]">
        {primary}
      </div>
    );
  }

  return (
    <div className="relative h-12 w-12">
      <div className="absolute left-0 top-1 flex h-8 w-8 items-center justify-center rounded-xl bg-[#DFF4E8] text-sm font-semibold text-[#215B39]">
        {primary}
      </div>
      <div className="absolute bottom-0 right-0 flex h-8 w-8 items-center justify-center rounded-xl border-2 border-white bg-[#EAF0FF] text-sm font-semibold text-[#3B5CCC]">
        {overflowCount ? `+${overflowCount}` : secondary}
      </div>
    </div>
  );
}

export function ContextRing({
  value,
  label,
  level,
}: {
  value: number;
  label: string;
  level?: "safe" | "watch" | "urgent" | "critical";
}) {
  const color =
    level === "critical"
      ? "#FF4D4F"
      : level === "urgent"
        ? "#FF8A00"
        : level === "watch"
          ? "#1C7ED6"
          : "#07C160";
  const background = `conic-gradient(${color} ${value * 3.6}deg, #D9D9D9 0deg)`;

  return (
    <div className="flex items-center gap-2 text-[11px] text-[#8C8C8C]">
      <span className="relative block h-[14px] w-[14px] rounded-full" style={{ background }}>
        <span className="absolute inset-[2px] rounded-full bg-white" />
      </span>
      <span>{label}</span>
    </div>
  );
}

function riskBadgeColor(level: ConversationItem["riskLevel"]) {
  switch (level) {
    case "high":
      return "bg-[#FFF1F0] text-[#CF1322]";
    case "medium":
      return "bg-[#FFF7E6] text-[#D46B08]";
    default:
      return "bg-[#F6FFED] text-[#389E0D]";
  }
}

export function getConversationListItemPresentation(conversation: ConversationItem) {
  const isFolderArchive = conversation.conversationType === "folder_archive";
  return {
    href:
      isFolderArchive && conversation.folderKey
        ? `/conversations/folders/${encodeURIComponent(conversation.folderKey)}`
        : `/conversations/${conversation.projectId}`,
    title: conversation.projectTitle,
    subtitle: isFolderArchive ? conversation.folderLabel : conversation.deviceNamesPreview.join(" / "),
  };
}

export function getConversationActionAvailability(conversation: ConversationItem) {
  return {
    canTogglePin: false,
    togglePinLabel: conversation.topPinnedLabel || conversation.manualPinned ? "取消置顶" : "置顶",
  };
}

export function getConversationPinnedBadgeLabel(conversation: ConversationItem) {
  void conversation;
  return "";
}

export function getConversationActionsPath(projectId: string) {
  return `/api/v1/conversations/${encodeURIComponent(projectId)}/actions`;
}

function ConversationActionButtons({
  conversation,
}: {
  conversation: ConversationItem;
}) {
  const router = useRouter();
  const [loading, setLoading] = useState<"toggle_pin" | "mark_read" | null>(null);
  const actionAvailability = getConversationActionAvailability(conversation);

  async function runAction(action: "toggle_pin" | "mark_read") {
    setLoading(action);
    await fetch(getConversationActionsPath(conversation.projectId), {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ action }),
    });
    setLoading(null);
    router.refresh();
  }

  return (
    <div className="flex items-center gap-2">
      {actionAvailability.canTogglePin ? (
        <button
          type="button"
          onClick={() => void runAction("toggle_pin")}
          disabled={loading === "toggle_pin"}
          className="rounded-full border border-[#D9D9D9] px-3 py-1 text-[11px] text-[#57606A]"
        >
          {actionAvailability.togglePinLabel}
        </button>
      ) : null}
      {conversation.unreadCount > 0 ? (
        <button
          type="button"
          onClick={() => void runAction("mark_read")}
          disabled={loading === "mark_read"}
          className="rounded-full border border-[#E5E5EA] px-3 py-1 text-[11px] text-[#57606A]"
        >
          已读
        </button>
      ) : null}
    </div>
  );
}

export function ConversationList({
  conversations,
}: {
  conversations: ConversationItem[];
}) {
  return (
    <div className="flex flex-col gap-1 px-[18px] pb-5">
      {conversations.map((conversation) => {
        const presentation = getConversationListItemPresentation(conversation);
        const isFolderArchive = conversation.conversationType === "folder_archive";

        return (
          <div
            key={conversation.conversationId}
            className="rounded-2xl px-1 py-3 transition hover:bg-white/70"
          >
            <div className="mb-2 flex justify-end">
              <ConversationActionButtons conversation={conversation} />
            </div>
            <Link href={presentation.href} className="flex items-start gap-3">
              <AvatarStack
                primary={conversation.avatar.primary}
                secondary={conversation.avatar.secondary}
                overflowCount={conversation.avatar.overflowCount}
              />
              <div className="min-w-0 flex-1 border-b border-[#EFEFF4] pb-3">
                <div className="flex items-start justify-between gap-3">
                  <div className="min-w-0">
                    <div className="flex items-center gap-2">
                      <div className="truncate text-[17px] font-medium text-[#111111]">{presentation.title}</div>
                      {isFolderArchive ? (
                        <span className="rounded-full bg-[#F4F5F7] px-2 py-0.5 text-[10px] font-semibold text-[#57606A]">
                          {conversation.threadCount ?? 0} 个线程
                        </span>
                      ) : (
                        <span
                          className={clsx(
                            "rounded-full px-2 py-0.5 text-[10px] font-semibold",
                            riskBadgeColor(conversation.riskLevel),
                          )}
                        >
                          {conversation.riskLevel === "high"
                            ? "高风险"
                            : conversation.riskLevel === "medium"
                              ? "关注"
                              : "稳定"}
                        </span>
                      )}
                      {conversation.unreadCount > 0 ? (
                        <span className="rounded-full bg-[#FF4D4F] px-2 py-0.5 text-[10px] font-semibold text-white">
                          {conversation.unreadCount}
                        </span>
                      ) : null}
                    </div>
                    <div className="mt-1 text-[13px] text-[#8C8C8C]">{presentation.subtitle}</div>
                    <div className="mt-1 truncate text-[14px] text-[#57606A]">{conversation.preview}</div>
                  </div>
                  <div className="flex min-w-[98px] flex-col items-end gap-1">
                    <div className="min-h-[18px] text-[11px] text-[#07C160]">
                      {getConversationPinnedBadgeLabel(conversation)}
                    </div>
                    <div className="text-[12px] text-[#8C8C8C]">{conversation.latestReplyLabel}</div>
                    {conversation.contextBudgetIndicator.visible &&
                    conversation.contextBudgetIndicator.percent !== undefined ? (
                      <ContextRing
                        value={conversation.contextBudgetIndicator.percent}
                        label={`${conversation.contextBudgetIndicator.percent}%`}
                        level={conversation.contextBudgetIndicator.level}
                      />
                    ) : (
                      <div className="min-h-[16px] text-[11px] text-[#8C8C8C]">
                        {conversation.activeDeviceCount > 1
                          ? `${conversation.activeDeviceCount} 台协作`
                          : ""}
                      </div>
                    )}
                  </div>
                </div>
              </div>
            </Link>
          </div>
        );
      })}
    </div>
  );
}

export function DeviceList({ devices }: { devices: Device[] }) {
  const router = useRouter();
  return (
    <div className="flex flex-col gap-3 px-[18px] pb-5">
      {devices.map((device) => (
        <button
          key={device.id}
          type="button"
          onClick={() => router.push(`/devices?device=${device.id}`)}
          className="flex w-full items-start gap-3 rounded-2xl border border-[#E5E5EA] bg-white px-4 py-4 text-left"
        >
          <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#DFF4E8] text-lg font-semibold text-[#215B39]">
            {device.avatar}
          </div>
          <div className="min-w-0 flex-1">
            <div className="flex items-center gap-2">
              <div className="text-[16px] font-medium text-[#111111]">{device.name}</div>
              <span
                className={clsx(
                  "h-2.5 w-2.5 rounded-full",
                  device.status === "online"
                    ? "bg-[#07C160]"
                    : device.status === "abnormal"
                      ? "bg-[#FF4D4F]"
                      : "bg-[#B8B8B8]",
                )}
              />
            </div>
            <div className="mt-1 text-[13px] text-[#8C8C8C]">{device.account}</div>
            <div className="mt-2 text-[13px] text-[#57606A]">
              项目：{device.projects.join(" · ")}
            </div>
            <div className="mt-2 flex flex-wrap gap-4 text-[12px] text-[#57606A]">
              <span>5h：{device.quota5h}%</span>
              <span>7d：{device.quota7d}%</span>
              <span>最近：{formatClock(device.lastSeenAt)}</span>
            </div>
          </div>
        </button>
      ))}
    </div>
  );
}

export function DeviceEditorCard({
  device,
  relatedThreads,
  activeEnrollment,
  workspace,
}: {
  device: Device;
  relatedThreads: ThreadContextSnapshot[];
  activeEnrollment?: DeviceEnrollment;
  workspace: DeviceWorkspaceView;
}) {
  const router = useRouter();
  const detailCards = buildDeviceWorkspaceDetailCards(workspace);
  const primaryPolicy = workspace.projectExecutionPolicies?.[0];
  const [name, setName] = useState(device.name);
  const [avatar, setAvatar] = useState(device.avatar);
  const [account, setAccount] = useState(device.account);
  const [status, setStatus] = useState<Device["status"]>(device.status);
  const [preferredExecutionMode, setPreferredExecutionMode] = useState<
    Device["preferredExecutionMode"]
  >(device.preferredExecutionMode ?? "cli");
  const [endpoint, setEndpoint] = useState(device.endpoint ?? "");
  const [note, setNote] = useState(device.note ?? "");
  const [projects, setProjects] = useState(device.projects.join(", "));
  const [message, setMessage] = useState("");

  async function save() {
    const response = await fetch(`/api/v1/devices/${device.id}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        name,
        avatar,
        account,
        status,
        endpoint,
        note,
        preferredExecutionMode,
        projects: projects
          .split(",")
          .map((item) => item.trim())
          .filter(Boolean),
      }),
    });
    const result = (await response.json()) as { ok: boolean; message?: string };
    setMessage(result.ok ? "设备信息已更新。" : result.message ?? "更新失败");
    if (result.ok) router.refresh();
  }

  async function saveConflictDecision(decision: "forbid" | "allow_once" | "allow_always") {
    if (!primaryPolicy?.projectId) {
      setMessage("当前没有可操作的异常项目 / 文件夹。");
      return;
    }
    const response = await fetch(`/api/v1/devices/${device.id}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        projectId: primaryPolicy.projectId,
        folderKey: primaryPolicy.folderKey,
        conflictDecision: decision,
      }),
    });
    const result = (await response.json()) as { ok: boolean; message?: string };
    setMessage(result.ok ? "冲突策略已更新。" : result.message ?? "更新失败");
    if (result.ok) router.refresh();
  }

  return (
    <div className="space-y-3 rounded-2xl border border-[#E5E5EA] bg-white px-4 py-4">
      <div className="flex items-center justify-between">
        <div className="text-[16px] font-semibold text-[#111111]">设备详情</div>
        <div className="text-[12px] text-[#8C8C8C]">ID: {device.id}</div>
      </div>
      <div className="grid grid-cols-2 gap-3">
        <Field label="设备名称" value={name} onChange={setName} />
        <Field label="头像缩写" value={avatar} onChange={setAvatar} />
      </div>
      <div className="space-y-3 rounded-2xl border border-[#E5E5EA] bg-white px-4 py-4">
        <div className="text-[16px] font-semibold text-[#111111]">{detailCards.capabilities.title}</div>
        <div className="grid gap-2 text-[13px] leading-6 text-[#57606A]">
          <div className="rounded-2xl bg-[#F7F8FA] px-3 py-2">{detailCards.capabilities.items.gui}</div>
          <div className="rounded-2xl bg-[#F7F8FA] px-3 py-2">{detailCards.capabilities.items.cli}</div>
          <div className="rounded-2xl bg-[#F7F8FA] px-3 py-2">
            {detailCards.capabilities.items.browserAutomation}
          </div>
          <div className="rounded-2xl bg-[#F7F8FA] px-3 py-2">
            {detailCards.capabilities.items.computerUse}
          </div>
          <div className="rounded-2xl bg-[#F7F8FA] px-3 py-2">
            {detailCards.capabilities.items.codexAppServer}
          </div>
          <div className="rounded-2xl bg-[#F7F8FA] px-3 py-2">
            {detailCards.capabilities.items.codexModels}
          </div>
          <div className="rounded-2xl bg-[#F7F8FA] px-3 py-2">
            {detailCards.capabilities.items.codexExtensions}
          </div>
          <div className="rounded-2xl bg-[#F7F8FA] px-3 py-2">
            {detailCards.capabilities.items.codexGovernance}
          </div>
          <div className="rounded-2xl bg-[#F7F8FA] px-3 py-2">
            {detailCards.capabilities.items.codexAccount}
          </div>
          <div className="rounded-2xl bg-[#F7F8FA] px-3 py-2">
            {detailCards.capabilities.items.codexConfig}
          </div>
          <div className="rounded-2xl bg-[#F7F8FA] px-3 py-2">
            {detailCards.capabilities.items.codexSkillRoots}
          </div>
          <div className="rounded-2xl bg-[#F7F8FA] px-3 py-2">
            {detailCards.capabilities.items.codexHooks}
          </div>
          <div className="rounded-2xl bg-[#F7F8FA] px-3 py-2">
            {detailCards.capabilities.items.codexThreads}
          </div>
          <div className="rounded-2xl bg-[#F7F8FA] px-3 py-2">
            {detailCards.capabilities.items.codexTurns}
          </div>
          <div className="rounded-2xl bg-[#F7F8FA] px-3 py-2">
            {detailCards.capabilities.items.codexThreadActions}
          </div>
          <div className="rounded-2xl bg-[#F7F8FA] px-3 py-2">
            {detailCards.capabilities.items.codexPluginGovernance}
          </div>
          <div className="rounded-2xl bg-[#F7F8FA] px-3 py-2">
            {detailCards.capabilities.items.codexAccountGovernance}
          </div>
          <div className="rounded-2xl bg-[#F7F8FA] px-3 py-2">
            {detailCards.capabilities.items.codexConfigGovernance}
          </div>
          <div className="rounded-2xl bg-[#F7F8FA] px-3 py-2">
            {detailCards.capabilities.items.codexFileSystemGovernance}
          </div>
          <div className="rounded-2xl bg-[#F7F8FA] px-3 py-2">
            {detailCards.capabilities.items.codexCommandSession}
          </div>
          <div className="rounded-2xl bg-[#F7F8FA] px-3 py-2">
            {detailCards.capabilities.items.codexExternalAgentGovernance}
          </div>
          <div className="rounded-2xl bg-[#F7F8FA] px-3 py-2">
            {detailCards.capabilities.items.codexMarketplaceGovernance}
          </div>
          <div className="rounded-2xl bg-[#F7F8FA] px-3 py-2">
            {detailCards.capabilities.items.codexExperimentalFeatureGovernance}
          </div>
          <div className="rounded-2xl bg-[#F7F8FA] px-3 py-2">
            {detailCards.capabilities.items.codexReviewGovernance}
          </div>
          <div className="rounded-2xl bg-[#F7F8FA] px-3 py-2">
            {detailCards.capabilities.items.codexWindowsSandboxGovernance}
          </div>
          <div className="rounded-2xl bg-[#F7F8FA] px-3 py-2">
            {detailCards.capabilities.items.codexFuzzyFileSearch}
          </div>
          <div className="rounded-2xl bg-[#F7F8FA] px-3 py-2">
            {detailCards.capabilities.items.preferredExecutionMode}
          </div>
        </div>
        <div className="space-y-1">
          <div className="text-[12px] text-[#8C8C8C]">切换默认执行模式</div>
          <div className="flex gap-2">
            {(["gui", "cli"] as const).map((mode) => (
              <button
                key={mode}
                type="button"
                onClick={() => setPreferredExecutionMode(mode)}
                className={clsx(
                  "rounded-full px-3 py-2 text-[12px] font-semibold",
                  preferredExecutionMode === mode
                    ? "bg-[#07C160] text-white"
                    : "bg-[#F5F5F7] text-[#57606A]",
                )}
              >
                {mode === "gui" ? "GUI" : "CLI"}
              </button>
            ))}
          </div>
        </div>
      </div>
      <Field label="账号" value={account} onChange={setAccount} />
      <Field label="Endpoint" value={endpoint} onChange={setEndpoint} />
      <Field label="备注" value={note} onChange={setNote} />
      <Field label="项目列表（逗号分隔）" value={projects} onChange={setProjects} />
      <div className="space-y-3 rounded-2xl border border-[#E5E5EA] bg-white px-4 py-4">
        <div className="flex items-center justify-between gap-3">
          <div className="text-[16px] font-semibold text-[#111111]">{detailCards.conflicts.title}</div>
          <div className="text-[12px] text-[#8C8C8C]">{detailCards.conflicts.headerHint}</div>
        </div>
        <div className="grid gap-2 text-[13px] leading-6 text-[#57606A]">
          <div className="rounded-2xl bg-[#F7F8FA] px-3 py-2">{detailCards.conflicts.items.device}</div>
          <div className="rounded-2xl bg-[#F7F8FA] px-3 py-2">{detailCards.conflicts.items.folderKey}</div>
          <div className="rounded-2xl bg-[#F7F8FA] px-3 py-2">{detailCards.conflicts.items.projectId}</div>
          <div className="rounded-2xl bg-[#F7F8FA] px-3 py-2">{detailCards.conflicts.items.allowPolicy}</div>
          <div className="rounded-2xl bg-[#F7F8FA] px-3 py-2">{detailCards.conflicts.items.conflictState}</div>
        </div>
        <div className="text-[12px] text-[#8C8C8C]">{detailCards.conflicts.scopeLabel}</div>
        {primaryPolicy ? (
          <div className="flex flex-wrap gap-2">
            <button
              type="button"
              onClick={() => void saveConflictDecision("forbid")}
              className={clsx(
                "rounded-full px-3 py-2 text-[12px] font-semibold",
                primaryPolicy.allowPolicy === "forbid" ? "bg-[#111111] text-white" : "bg-[#F5F5F7] text-[#57606A]",
              )}
            >
              {detailCards.conflicts.actions[0]}
            </button>
            <button
              type="button"
              onClick={() => void saveConflictDecision("allow_once")}
              className={clsx(
                "rounded-full px-3 py-2 text-[12px] font-semibold",
                primaryPolicy.allowPolicy === "allow_once" ? "bg-[#07C160] text-white" : "bg-[#F5F5F7] text-[#57606A]",
              )}
            >
              {detailCards.conflicts.actions[1]}
            </button>
            <button
              type="button"
              onClick={() => void saveConflictDecision("allow_always")}
              className={clsx(
                "rounded-full px-3 py-2 text-[12px] font-semibold",
                primaryPolicy.allowPolicy === "allow_always" ? "bg-[#2563EB] text-white" : "bg-[#F5F5F7] text-[#57606A]",
              )}
            >
              {detailCards.conflicts.actions[2]}
            </button>
          </div>
        ) : null}
      </div>
      <div className="space-y-1">
        <div className="text-[12px] text-[#8C8C8C]">当前状态</div>
        <div className="flex gap-2">
          {(["online", "abnormal", "offline"] as const).map((item) => (
            <button
              key={item}
              type="button"
              onClick={() => setStatus(item)}
              className={clsx(
                "rounded-full px-3 py-2 text-[12px] font-semibold",
                status === item ? "bg-[#07C160] text-white" : "bg-[#F5F5F7] text-[#57606A]",
              )}
            >
              {item}
            </button>
          ))}
        </div>
      </div>
      <button
        type="button"
        onClick={() => void save()}
        className="rounded-full bg-[#07C160] px-4 py-2 text-[13px] font-semibold text-white"
      >
        保存设备信息
      </button>
      {message ? (
        <div className="rounded-2xl bg-[#EAF7F0] px-4 py-3 text-[12px] leading-6 text-[#215B39]">
          {message}
        </div>
      ) : null}
      {activeEnrollment ? (
        <div className="rounded-2xl bg-[#F7F8FA] px-4 py-3 text-[12px] leading-6 text-[#57606A]">
          Pairing code: <span className="font-semibold text-[#111111]">{activeEnrollment.pairingCode}</span>
          <br />
          Token: <span className="font-semibold text-[#111111]">{activeEnrollment.token}</span>
          <br />
          过期时间：{formatClock(activeEnrollment.expiresAt)}
        </div>
      ) : null}
      <div className="rounded-2xl bg-[#F7F8FA] px-4 py-3 text-[12px] leading-6 text-[#57606A]">
        活跃线程：{relatedThreads.length}
        <br />
        {relatedThreads.map((thread) => `${thread.title} (${thread.contextBudgetRemainingPct}%)`).join("；") ||
          "当前无活跃线程。"}
      </div>
    </div>
  );
}

export function ProfileHero({ user }: { user: UserProfile }) {
  return (
    <div className="rounded-2xl bg-white px-4 py-4">
      <div className="flex items-center justify-between gap-3">
        <div className="flex items-center gap-3">
          <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-[#DFF4E8] text-xl font-semibold text-[#215B39]">
            {user.avatar}
          </div>
          <div>
            <div className="text-[18px] font-semibold">{user.name}</div>
            <div className="mt-1 text-[13px] text-[#8C8C8C]">{user.accountType}</div>
            <div className="mt-1 text-[12px] text-[#57606A]">账号：{user.account}</div>
            <div className="mt-1 text-[12px] text-[#57606A]">
              绑定节点：{user.boundCodexNodeLabel ?? "未绑定"}
            </div>
            <div className="mt-1 text-[12px] text-[#57606A]">二维码：{user.qrCodeValue}</div>
          </div>
        </div>
        <div className="space-y-2 text-right">
          <div className="rounded-full bg-[#FFF5E8] px-3 py-1 text-[12px] font-semibold text-[#B54708]">
            {user.roleLabel}
          </div>
          <div className="rounded-xl border border-[#E5E5EA] px-3 py-2 text-lg text-[#57606A]">⌘</div>
        </div>
      </div>
    </div>
  );
}

export function MenuRow({
  href,
  title,
  description,
  badge,
}: {
  href: string;
  title: string;
  description: string;
  badge?: React.ReactNode;
}) {
  return (
    <Link
      href={href}
      className="flex items-center justify-between rounded-2xl border border-[#E5E5EA] bg-white px-4 py-4"
    >
      <div>
        <div className="text-[16px] font-medium text-[#111111]">{title}</div>
        <div className="mt-1 text-[12px] text-[#8C8C8C]">{description}</div>
      </div>
      <div className="flex items-center gap-2 text-[#8C8C8C]">
        {badge}
        <span>&gt;</span>
      </div>
    </Link>
  );
}

function kindLabel(kind?: Message["kind"]) {
  switch (kind) {
    case "voice_intent":
      return "语音";
    case "image_intent":
      return "图片";
    case "video_intent":
      return "视频";
    case "forward_notice":
      return "转发";
    default:
      return null;
  }
}

export function ChatBubble({ message }: { message: Message }) {
  const mine = message.sender === "user";
  const green = message.sender === "master";
  const tag = kindLabel(message.kind);

  return (
    <div className={clsx("flex", mine ? "justify-end" : "justify-start")}>
      <div className="max-w-[82%]">
        <div className="mb-1 px-1 text-[11px] text-[#8C8C8C]">
          {message.senderLabel} · {formatClock(message.sentAt)}
        </div>
        <div
          className={clsx(
            "rounded-[18px] px-4 py-3 text-[15px] leading-6",
            mine
              ? "bg-[#07C160] text-white"
              : green
                ? "bg-[#EAF7F0] text-[#215B39]"
                : "bg-white text-[#111111]",
          )}
        >
          {tag ? (
            <div className="mb-2 text-[11px] font-semibold opacity-80">{tag}</div>
          ) : null}
          <ChatBubbleMarkdown body={message.body} mine={mine} green={green} />
        </div>
      </div>
    </div>
  );
}

function ChatBubbleMarkdown({
  body,
  mine,
  green,
}: {
  body: string;
  mine: boolean;
  green: boolean;
}) {
  const blocks = parseChatMarkdown(body);

  return (
    <div className="space-y-2 break-words">
      {blocks.map((block, index) => (
        <ChatMarkdownBlockView key={`${block.kind}-${index}`} block={block} mine={mine} green={green} />
      ))}
    </div>
  );
}

function ChatMarkdownBlockView({
  block,
  mine,
  green,
}: {
  block: ChatMarkdownBlock;
  mine: boolean;
  green: boolean;
}) {
  const mutedClass = mine ? "text-white/82" : green ? "text-[#4E7A60]" : "text-[#57606A]";
  const markerClass = mine ? "text-white/72" : green ? "text-[#44A064]" : "text-[#8C8C8C]";

  switch (block.kind) {
    case "heading":
      return (
        <div
          className={clsx(
            "font-semibold leading-6",
            block.level === 1 ? "text-[16px]" : block.level === 2 ? "text-[15px]" : "text-[14px]",
          )}
        >
          {block.text}
        </div>
      );
    case "label":
      return (
        <div className="rounded-2xl bg-black/[0.035] px-3 py-2">
          <div className={clsx("text-[12px] font-semibold", markerClass)}>{block.label}</div>
          <div className="mt-1 whitespace-pre-wrap text-[14px] leading-6">{block.text}</div>
        </div>
      );
    case "bullet":
      return (
        <div className="flex gap-2 leading-6">
          <span className={markerClass}>•</span>
          <span className="min-w-0 flex-1">{block.text}</span>
        </div>
      );
    case "ordered":
      return (
        <div className="flex gap-2 leading-6">
          <span className={clsx("tabular-nums", markerClass)}>{block.order}</span>
          <span className="min-w-0 flex-1">{block.text}</span>
        </div>
      );
    case "quote":
      return (
        <div className={clsx("border-l-2 pl-3 text-[14px] leading-6", mine ? "border-white/50" : "border-[#D8DEE4]", mutedClass)}>
          {block.text}
        </div>
      );
    case "code":
      return (
        <pre
          className={clsx(
            "overflow-x-auto rounded-2xl px-3 py-2 text-[12px] leading-5",
            mine ? "bg-white/16 text-white" : "bg-[#F2F3F5] text-[#24292F]",
          )}
        >
          <code>{block.text}</code>
        </pre>
      );
    case "paragraph":
    default:
      return <div className="whitespace-pre-wrap leading-6">{block.text}</div>;
  }
}

export function ProjectHeaderActions({ projectId }: { projectId: string }) {
  return (
    <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
      <Link
        href={`/conversations/${projectId}/goals`}
        className="flex h-11 items-center justify-center rounded-2xl bg-[#EAF7F0] text-[14px] font-semibold text-[#215B39]"
      >
        项目目标
      </Link>
      <Link
        href={`/conversations/${projectId}/versions`}
        className="flex h-11 items-center justify-center rounded-2xl bg-white text-[14px] font-semibold text-[#111111]"
      >
        版本记录
      </Link>
      <Link
        href={`/conversations/${projectId}/forward`}
        className="flex h-11 items-center justify-center rounded-2xl bg-white text-[14px] font-semibold text-[#111111]"
      >
        转发
      </Link>
      <Link
        href={`/conversations/${projectId}/thread-status`}
        className="flex h-11 items-center justify-center rounded-2xl bg-white text-[14px] font-semibold text-[#111111]"
      >
        线程状态
      </Link>
    </div>
  );
}

function orchestrationBackendChoiceLabel(choice: ProjectOrchestrationBackendState["availableChoices"][number]) {
  return choice.backendId === "boss-native-orchestrator"
    ? "Boss Native Orchestrator"
    : "OMX Team Runtime";
}

function normalizeOrchestrationReasonLabel(value: string) {
  const trimmed = value.trim();
  if (trimmed.endsWith("。") || trimmed.endsWith(".")) {
    return trimmed.slice(0, -1);
  }
  return trimmed;
}

function orchestrationBackendAvailabilityCopy(
  state: ProjectOrchestrationBackendState,
  fallbackActive: boolean,
) {
  if (state.omxAvailability.selectable) {
    return {
      badge: "正常",
      summary: "OMX Team Runtime 当前可用，当前可切换到该后端。",
    };
  }

  return {
    badge: fallbackActive ? "已回退" : "OMX 受限",
    summary: fallbackActive
      ? `${normalizeOrchestrationReasonLabel(state.omxAvailability.reasonLabel)}，当前已自动回退到 Boss Native Orchestrator。`
      : `${normalizeOrchestrationReasonLabel(state.omxAvailability.reasonLabel)}，切换后会自动回退到 Boss Native Orchestrator。`,
  };
}

export function ProjectOrchestrationBackendCard({
  projectId,
  initialState,
}: {
  projectId: string;
  initialState: ProjectOrchestrationBackendState;
}) {
  const router = useRouter();
  const [state, setState] = useState(initialState);
  const [savingBackendId, setSavingBackendId] = useState<OrchestrationBackendId | null>(null);
  const [message, setMessage] = useState("");

  const fallbackActive = state.requestedBackendId !== state.currentBackendId;
  const availabilityCopy = orchestrationBackendAvailabilityCopy(state, fallbackActive);

  async function saveBackend(requestedBackendId: OrchestrationBackendId) {
    setSavingBackendId(requestedBackendId);
    const response = await fetch(`/api/v1/projects/${projectId}/orchestration-backend`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ requestedBackendId }),
    });
    const result = (await response.json()) as {
      ok: boolean;
      message?: string;
      currentBackendId?: OrchestrationBackendId;
      currentBackendLabel?: string;
      requestedBackendId?: OrchestrationBackendId;
      requestedBackendLabel?: string;
      availableChoices?: ProjectOrchestrationBackendState["availableChoices"];
      omxAvailability?: ProjectOrchestrationBackendState["omxAvailability"];
    };
    setSavingBackendId(null);
    if (
      !result.ok ||
      !result.currentBackendId ||
      !result.currentBackendLabel ||
      !result.requestedBackendId ||
      !result.requestedBackendLabel ||
      !result.availableChoices ||
      !result.omxAvailability
    ) {
      setMessage(result.message ?? "保存失败");
      return;
    }
    setState({
      projectId,
      currentBackendId: result.currentBackendId,
      currentBackendLabel: result.currentBackendLabel,
      requestedBackendId: result.requestedBackendId,
      requestedBackendLabel: result.requestedBackendLabel,
      availableChoices: result.availableChoices,
      omxAvailability: result.omxAvailability,
    });
    setMessage(
      requestedBackendId === "omx-team"
        ? "已切换到 OMX Team Runtime。"
        : "已切换回 Boss Native Orchestrator。",
    );
    router.refresh();
  }

  return (
    <div className="rounded-2xl border border-[#E5E5EA] bg-white px-4 py-4">
      <div className="flex items-start justify-between gap-3">
        <div>
          <div className="text-[14px] font-semibold text-[#111111]">编排后端</div>
          <div className="mt-1 text-[12px] leading-5 text-[#57606A]">
            当前生效：{state.currentBackendLabel}
            <br />
            当前请求：{state.requestedBackendLabel}
          </div>
        </div>
      <div
        className={clsx(
          "rounded-full px-3 py-1 text-[11px] font-semibold",
          fallbackActive || !state.omxAvailability.selectable
            ? "bg-[#FFF7E6] text-[#D46B08]"
              : "bg-[#EAF7F0] text-[#215B39]",
          )}
        >
          {availabilityCopy.badge}
        </div>
      </div>
      <div className="mt-3 grid gap-2">
        {state.availableChoices.map((choice) => {
          const active = choice.current;
          const selectable = choice.selectable && savingBackendId !== choice.backendId;
          return (
            <button
              key={choice.backendId}
              type="button"
              onClick={() => void saveBackend(choice.backendId)}
              disabled={!selectable}
              className={clsx(
                "flex items-center justify-between rounded-2xl border px-4 py-3 text-left",
                active ? "border-[#07C160] bg-[#F5FFF8]" : "border-[#E5E5EA] bg-[#F7F8FA]",
                !choice.selectable ? "opacity-70" : "",
              )}
            >
              <div>
                <div className="text-[14px] font-semibold text-[#111111]">
                  {orchestrationBackendChoiceLabel(choice)}
                </div>
                <div className="mt-1 text-[12px] leading-5 text-[#57606A]">{choice.label}</div>
              </div>
              <div className="text-right text-[11px] text-[#8C8C8C]">
                <div>{active ? "当前" : "切换"}</div>
                {!choice.selectable ? <div>不可选</div> : null}
              </div>
            </button>
          );
        })}
      </div>
      <div
        className={clsx(
          "mt-3 rounded-2xl px-4 py-3 text-[12px] leading-6",
          state.omxAvailability.selectable
            ? "bg-[#EAF7F0] text-[#215B39]"
            : "bg-[#FFF7E6] text-[#8D5D00]",
        )}
      >
        {availabilityCopy.summary}
      </div>
      {message ? (
        <div className="mt-3 rounded-2xl bg-[#F7F8FA] px-4 py-3 text-[12px] text-[#57606A]">
          {message}
        </div>
      ) : null}
    </div>
  );
}

function masterIdentityPillClasses(role: MasterIdentitySummary["role"]) {
  switch (role) {
    case "primary":
      return "border-[#BBD6FF] bg-[#EEF5FF] text-[#2457C5]";
    case "backup":
      return "border-[#FFD9B8] bg-[#FFF5E8] text-[#B54708]";
    case "api_fallback":
      return "border-[#D8DDE6] bg-[#F3F4F6] text-[#4B5563]";
    default:
      return "border-[#D8DDE6] bg-[#F3F4F6] text-[#4B5563]";
  }
}

export function MasterIdentityPill({ identity }: { identity: MasterIdentitySummary }) {
  return (
    <Link
      href="/me/ai-accounts"
      className={clsx(
        "rounded-full border px-3 py-1 text-right",
        masterIdentityPillClasses(identity.role),
      )}
    >
      <div className="text-[11px] font-semibold leading-4">{identity.roleLabel}</div>
      <div className="text-[10px] leading-4 opacity-80">
        {(identity.nodeLabel || identity.displayName).slice(0, 18)}
      </div>
    </Link>
  );
}

export function MasterAgentChatMenu({ projectId }: { projectId: string }) {
  const router = useRouter();
  const items = getMasterAgentChatMenuItems(projectId);

  if (items.length === 0) {
    return null;
  }

  return (
    <details className="relative">
      <summary
        className="flex h-9 w-9 list-none items-center justify-center rounded-full border border-[#E5E5EA] bg-white text-[18px] font-semibold leading-none text-[#57606A] shadow-sm marker:content-none"
        aria-label="更多"
      >
        …
      </summary>
      <div className="absolute right-0 top-11 z-20 min-w-[116px] rounded-2xl border border-[#E5E5EA] bg-white p-2 shadow-[0_12px_28px_rgba(15,23,42,0.14)]">
        {items.map((item) =>
          item.href ? (
            <Link
              key={item.key}
              href={item.href}
              className="flex rounded-xl px-3 py-2 text-[13px] text-[#111111] hover:bg-[#F7F8FA]"
            >
              {item.label}
            </Link>
          ) : (
            <button
              key={item.key}
              type="button"
              onClick={() => {
                if (item.action === "refresh") {
                  router.refresh();
                }
              }}
              className="flex w-full rounded-xl px-3 py-2 text-left text-[13px] text-[#111111] hover:bg-[#F7F8FA]"
            >
              {item.label}
            </button>
          ),
        )}
      </div>
    </details>
  );
}

type PendingDispatchPlanState = {
  planId: string;
  summary?: string;
  targets: Array<{ projectId: string; threadDisplayName: string }>;
};

export function ChatComposer({
  projectId,
  initialPendingDispatchPlan,
  initialRejectedDispatchPlan,
  dispatchPlanRecoveryHint,
  initialLightDispatchReminderEnabled = false,
}: {
  projectId: string;
  initialPendingDispatchPlan?: PendingDispatchPlanState | null;
  initialRejectedDispatchPlan?: PendingDispatchPlanState | null;
  dispatchPlanRecoveryHint?: string | null;
  initialLightDispatchReminderEnabled?: boolean;
}) {
  const router = useRouter();
  type ComposerMessageKind = "text" | "voice_intent" | "image_intent" | "video_intent";
  const [value, setValue] = useState("");
  const [message, setMessage] = useState("");
  const [messageTone, setMessageTone] = useState<"success" | "error">("success");
  const [loading, setLoading] = useState(false);
  const [localPendingDispatchPlan, setLocalPendingDispatchPlan] =
    useState<PendingDispatchPlanState | null>(null);
  const [localRejectedDispatchPlan, setLocalRejectedDispatchPlan] =
    useState<PendingDispatchPlanState | null>(null);
  const [dismissedPendingPlanId, setDismissedPendingPlanId] = useState<string | null>(null);
  const [lightDispatchReminderEnabled, setLightDispatchReminderEnabled] = useState(
    initialLightDispatchReminderEnabled,
  );
  const [threadExecutionConflict, setThreadExecutionConflict] = useState<{
    conflict: ThreadConversationExecutionConflict;
    draftBody: string;
    kind: ComposerMessageKind;
  } | null>(null);
  const pendingDispatchPlan =
    localPendingDispatchPlan ??
    (initialPendingDispatchPlan && initialPendingDispatchPlan.planId !== dismissedPendingPlanId
      ? initialPendingDispatchPlan
      : null);
  const rejectedDispatchPlan =
    pendingDispatchPlan ? null : localRejectedDispatchPlan ?? initialRejectedDispatchPlan ?? null;
  const threadExecutionConflictDescription = threadExecutionConflict
    ? describeThreadConversationExecutionConflict(threadExecutionConflict.conflict)
    : null;

  async function confirmDispatchPlan(rememberLightReminder = false) {
    if (!pendingDispatchPlan) return;
    setLoading(true);
    const response = await fetch(
      `/api/v1/projects/${projectId}/dispatch-plans/${pendingDispatchPlan.planId}/confirm`,
      {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          approvedTargetProjectIds: extractApprovedTargetProjectIds(pendingDispatchPlan),
          rememberLightReminder,
        }),
      },
    );
    const result = (await response.json()) as {
      ok: boolean;
      executions?: Array<unknown>;
      collaborationGate?: {
        lightDispatchReminderEnabled?: boolean;
      };
      message?: string;
    };
    setLoading(false);
    if (!result.ok) {
      setMessageTone("error");
      setMessage(result.message ?? "确认下发失败，请重试。");
      return;
    }
    const executionCount = result.executions?.length ?? extractApprovedTargetProjectIds(pendingDispatchPlan).length;
    setLightDispatchReminderEnabled(
      result.collaborationGate?.lightDispatchReminderEnabled ?? lightDispatchReminderEnabled,
    );
    setLocalPendingDispatchPlan(null);
    setLocalRejectedDispatchPlan(null);
    setDismissedPendingPlanId(pendingDispatchPlan.planId);
    setMessageTone("success");
    setMessage(
      rememberLightReminder
        ? `已确认下发到 ${executionCount} 个线程，并记住这个群使用轻提醒。`
        : `已确认下发到 ${executionCount} 个线程。`,
    );
    router.refresh();
  }

  async function retryDispatchPlan() {
    if (!rejectedDispatchPlan) return;
    setLoading(true);
    const response = await fetch(
      `/api/v1/projects/${projectId}/dispatch-plans/${rejectedDispatchPlan.planId}/retry`,
      {
        method: "POST",
        headers: { "Content-Type": "application/json" },
      },
    );
    const result = (await response.json()) as {
      ok: boolean;
      dispatchPlan?: {
        planId: string;
        summary?: string;
        targets?: Array<{ projectId: string; threadDisplayName: string }>;
      } | null;
      collaborationGate?: {
        requiresMasterAgentApproval?: boolean;
        lightDispatchReminderEnabled?: boolean;
      };
      message?: string;
    };
    setLoading(false);
    if (!result.ok) {
      setMessageTone("error");
      setMessage(result.message ?? "重新生成推荐失败，请稍后重试。");
      return;
    }
    setLocalRejectedDispatchPlan(null);
    setLocalPendingDispatchPlan(
      result.dispatchPlan
        ? {
            planId: result.dispatchPlan.planId,
            summary: result.dispatchPlan.summary,
            targets: result.dispatchPlan.targets ?? [],
          }
        : null,
    );
    setDismissedPendingPlanId(null);
    setLightDispatchReminderEnabled(
      result.collaborationGate?.lightDispatchReminderEnabled ?? lightDispatchReminderEnabled,
    );
    setMessageTone("success");
    setMessage(
      result.collaborationGate?.requiresMasterAgentApproval
        ? "主 Agent 已重新生成推荐，等待你确认下发。"
        : "主 Agent 已重新生成推荐。",
    );
    router.refresh();
  }

  async function rejectDispatchPlan() {
    if (!pendingDispatchPlan) return;
    setLoading(true);
    const response = await fetch(
      `/api/v1/projects/${projectId}/dispatch-plans/${pendingDispatchPlan.planId}/reject`,
      {
        method: "POST",
        headers: { "Content-Type": "application/json" },
      },
    );
    const result = (await response.json()) as {
      ok: boolean;
      plan?: {
        planId: string;
        summary?: string;
        targets?: Array<{ projectId: string; threadDisplayName: string }>;
      } | null;
      message?: string;
    };
    setLoading(false);
    if (!result.ok) {
      setMessageTone("error");
      setMessage(result.message ?? "拒绝失败，请稍后重试。");
      return;
    }
    setLocalPendingDispatchPlan(null);
    setLocalRejectedDispatchPlan(
      result.plan
        ? {
            planId: result.plan.planId,
            summary: result.plan.summary,
            targets: result.plan.targets ?? pendingDispatchPlan.targets,
          }
        : pendingDispatchPlan,
    );
    setDismissedPendingPlanId(pendingDispatchPlan.planId);
    setMessageTone("success");
    setMessage("已拒绝主 Agent 推荐。");
    router.refresh();
  }

  async function send(
    kind: ComposerMessageKind,
    options?: {
      draftBody?: string;
    },
  ) {
    const draftBody = kind === "text" ? (options?.draftBody ?? value).trim() : "";
    if (kind === "text" && !draftBody) {
      return;
    }
    setLoading(true);
    const response = await fetch(`/api/v1/projects/${projectId}/messages`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ body: kind === "text" ? draftBody : undefined, kind }),
    });
    const result = (await response.json()) as {
      ok: boolean;
      message?: { body: string } | string;
      dispatchPlan?: {
        planId: string;
        summary?: string;
        targets?: Array<{ projectId: string; threadDisplayName: string }>;
      } | null;
      collaborationGate?: {
        requiresMasterAgentApproval?: boolean;
        lightDispatchReminderEnabled?: boolean;
      };
      code?: string;
      executionConflict?: ThreadConversationExecutionConflict;
      messageText?: string;
    };
    setLoading(false);
    if (!result.ok && response.status === 409 && result.code === "THREAD_EXECUTION_CONFLICT" && result.executionConflict) {
      setThreadExecutionConflict({
        conflict: result.executionConflict,
        draftBody,
        kind,
      });
      setMessageTone("error");
      setMessage(typeof result.message === "string" ? result.message : "当前线程命中了 GUI / CLI 冲突保护。");
      return;
    }
    if (result.ok) {
      setThreadExecutionConflict(null);
      void sendAppLog({
        deviceId: boundDeviceIdFromDom(),
        projectId,
        level: "info",
        category: "chat.message_sent",
        message:
          kind === "text" ? `已发送文本消息：${draftBody || "空文本"}` : `已发送 ${kind} 意图消息。`,
        mirrorToMaster: false,
      });
      setValue("");
      if (result.dispatchPlan) {
        setLocalPendingDispatchPlan({
          planId: result.dispatchPlan.planId,
          summary: result.dispatchPlan.summary,
          targets: result.dispatchPlan.targets ?? [],
        });
        setLocalRejectedDispatchPlan(null);
        setDismissedPendingPlanId(null);
        setLightDispatchReminderEnabled(
          result.collaborationGate?.lightDispatchReminderEnabled ?? lightDispatchReminderEnabled,
        );
        setMessage(
          result.collaborationGate?.requiresMasterAgentApproval
            ? "消息已发送，等待你批准主 Agent 下发。"
            : "消息已发送，主 Agent 已给出推荐线程。",
        );
        setMessageTone("success");
      } else {
        setLocalPendingDispatchPlan(null);
        setMessage("");
      }
      router.refresh();
      return;
    }
    void sendAppLog({
      deviceId: boundDeviceIdFromDom(),
      projectId,
      level: "error",
      category: "chat.message_failed",
      message: `发送 ${kind} 消息失败。`,
      detail: "Boss 会话消息接口返回失败。",
      mirrorToMaster: true,
    });
    setMessageTone("error");
    setMessage(typeof result.message === "string" ? result.message : "消息发送失败，请重试。");
  }

  async function handleThreadExecutionConflictDecision(
    decision: ThreadConversationExecutionConflictAction,
  ) {
    if (!threadExecutionConflict) {
      return;
    }
    setLoading(true);
    const response = await fetch(`/api/v1/devices/${threadExecutionConflict.conflict.deviceId}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        projectId: threadExecutionConflict.conflict.projectId,
        folderKey: threadExecutionConflict.conflict.folderKey ?? null,
        conflictDecision: decision,
      }),
    });
    const result = (await response.json()) as {
      ok: boolean;
      message?: string;
    };
    setLoading(false);
    if (!result.ok) {
      setMessageTone("error");
      setMessage(result.message ?? "冲突放行设置失败，请重试。");
      return;
    }

    const pendingDraft = threadExecutionConflict;
    setThreadExecutionConflict(null);
    setMessageTone(decision === "forbid" ? "error" : "success");
    setMessage(summarizeThreadConversationExecutionDecisionResult(decision));
    if (decision === "forbid") {
      return;
    }
    await send(pendingDraft.kind, { draftBody: pendingDraft.draftBody });
  }

  return (
    <div
      className="mt-auto border-t border-[#E5E5EA] bg-white px-[18px] pt-3"
      style={{ paddingBottom: "max(12px, env(safe-area-inset-bottom))" }}
    >
      <div className="flex items-center gap-2">
        <button
          type="button"
          disabled={loading}
          onClick={() => void send("voice_intent")}
          className="text-xl text-[#57606A]"
        >
          🎙
        </button>
        <input
          value={value}
          onChange={(event) => setValue(event.target.value)}
          placeholder="向主 Agent 或项目发送消息"
          className="flex-1 rounded-full bg-[#F5F5F7] px-4 py-3 text-[14px] text-[#111111] outline-none"
        />
        <button
          type="button"
          disabled={loading}
          onClick={() => void send("text")}
          className="rounded-full bg-[#07C160] px-4 py-2 text-[13px] font-semibold text-white"
        >
          发送
        </button>
      </div>
      <div className="mt-3 flex items-center gap-4 text-[12px] text-[#8C8C8C]">
        <button type="button" onClick={() => void send("image_intent")}>
          图片
        </button>
        <button type="button" onClick={() => void send("video_intent")}>
          视频
        </button>
        <Link href={`/conversations/${projectId}/forward`}>转发</Link>
      </div>
      {message ? (
        <div
          className={clsx(
            "mt-3 rounded-2xl px-4 py-3 text-[12px]",
            messageTone === "success"
              ? "bg-[#EAF7F0] text-[#215B39]"
              : "bg-[#FFF1F0] text-[#CF1322]",
          )}
        >
          {message}
        </div>
      ) : null}
      {dispatchPlanRecoveryHint ? (
        <div className="mt-3 rounded-2xl border border-[#E5E5EA] bg-[#F7F8FA] px-4 py-3 text-[12px] leading-6 text-[#57606A]">
          {dispatchPlanRecoveryHint}
        </div>
      ) : null}
      {threadExecutionConflict && threadExecutionConflictDescription ? (
        <div className="mt-3 rounded-2xl border border-[#F3D19C] bg-[#FFF7E6] px-4 py-4 text-[12px] leading-6 text-[#8D5D00]">
          <div className="text-[14px] font-semibold text-[#111111]">
            {threadExecutionConflictDescription.title}
          </div>
          <div className="mt-2">{threadExecutionConflictDescription.summary}</div>
          <div className="mt-2 text-[12px] text-[#8C8C8C]">
            设备：{threadExecutionConflict.conflict.deviceName}
            {" · "}
            默认模式：{threadExecutionConflict.conflict.preferredExecutionMode === "gui" ? "GUI" : "CLI"}
            {threadExecutionConflict.conflict.folderKey ? ` · ${threadExecutionConflict.conflict.folderKey}` : ""}
          </div>
          <div className="mt-3 flex flex-wrap gap-2">
            {threadExecutionConflict.conflict.actions.map((action) => (
              <button
                key={action}
                type="button"
                disabled={loading}
                onClick={() => void handleThreadExecutionConflictDecision(action)}
                className={clsx(
                  "rounded-full px-4 py-2 text-[13px] font-semibold disabled:opacity-60",
                  action === "allow_once"
                    ? "bg-[#07C160] text-white"
                    : action === "allow_always"
                      ? "bg-[#2563EB] text-white"
                      : "border border-[#F0B5B5] text-[#CF1322]",
                )}
              >
                {labelForThreadConversationExecutionConflictDecision(action)}
              </button>
            ))}
          </div>
        </div>
      ) : null}
      {pendingDispatchPlan ? (
        <div className="mt-3 rounded-2xl border border-[#E5E5EA] bg-[#F7F8FA] px-4 py-4 text-[12px] leading-6 text-[#57606A]">
          <div className="text-[14px] font-semibold text-[#111111]">
            {lightDispatchReminderEnabled ? summarizeDispatchPlanLightTitle(pendingDispatchPlan) : "主 Agent 推荐下发"}
          </div>
          <div className="mt-2 whitespace-pre-line">{summarizeDispatchPlanCompact(pendingDispatchPlan)}</div>
          <div className="mt-2 text-[12px] text-[#8C8C8C]">
            {lightDispatchReminderEnabled ? "轻提醒已开启" : "当前仍会显式提醒你确认"}
          </div>
          <div className="mt-3 flex flex-wrap gap-2">
            <button
              type="button"
              disabled={loading}
              onClick={() => void confirmDispatchPlan(false)}
              className="rounded-full bg-[#07C160] px-4 py-2 text-[13px] font-semibold text-white disabled:bg-[#B7E6C9]"
            >
              {lightDispatchReminderEnabled ? "继续下发" : "确认一下"}
            </button>
            {!lightDispatchReminderEnabled ? (
              <button
                type="button"
                disabled={loading}
                onClick={() => void confirmDispatchPlan(true)}
                className="rounded-full border border-[#D9D9D9] px-4 py-2 text-[13px] font-semibold text-[#57606A]"
              >
                确认并记住
              </button>
            ) : null}
            <button
              type="button"
              disabled={loading}
              onClick={() => void rejectDispatchPlan()}
              className="rounded-full border border-[#F0B5B5] px-4 py-2 text-[13px] font-semibold text-[#CF1322]"
            >
              拒绝
            </button>
            <button
              type="button"
              disabled={loading}
              onClick={() => {
                setLocalPendingDispatchPlan(null);
                setDismissedPendingPlanId(pendingDispatchPlan.planId);
              }}
              className="rounded-full border border-[#D9D9D9] px-4 py-2 text-[13px] font-semibold text-[#57606A]"
            >
              稍后处理
            </button>
          </div>
        </div>
      ) : null}
      {rejectedDispatchPlan ? (
        <div className="mt-3 rounded-2xl border border-[#F3D19C] bg-[#FFF7E6] px-4 py-4 text-[12px] leading-6 text-[#8D5D00]">
          <div className="text-[14px] font-semibold text-[#111111]">上次推荐已拒绝</div>
          <div className="mt-2 whitespace-pre-line">{summarizeDispatchPlan(rejectedDispatchPlan)}</div>
          <div className="mt-2">
            {dispatchPlanRecoveryHint ??
              "如果还想继续当前协作，可以直接重新生成新的推荐，不用把整条需求重新打一遍。"}
          </div>
          <div className="mt-3 flex flex-wrap gap-2">
            <button
              type="button"
              disabled={loading}
              onClick={() => void retryDispatchPlan()}
              className="rounded-full bg-[#07C160] px-4 py-2 text-[13px] font-semibold text-white disabled:bg-[#B7E6C9]"
            >
              重新生成新的推荐
            </button>
          </div>
        </div>
      ) : null}
    </div>
  );
}

export function GoalChecklist({
  projectId,
  goals,
}: {
  projectId: string;
  goals: GoalItem[];
}) {
  const router = useRouter();
  const [workingId, setWorkingId] = useState<string | null>(null);
  const [editingId, setEditingId] = useState<string | null>(null);
  const [draft, setDraft] = useState("");
  const [newGoal, setNewGoal] = useState("");

  async function handleToggle(goalId: string) {
    setWorkingId(goalId);
    await fetch(`/api/projects/${projectId}/goals/${goalId}/toggle`, { method: "POST" });
    setWorkingId(null);
    router.refresh();
  }

  async function handleSave(goalId: string) {
    await fetch(`/api/projects/${projectId}/goals/update`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ goalId, text: draft, action: "update" }),
    });
    setEditingId(null);
    setDraft("");
    router.refresh();
  }

  async function handleCreate() {
    if (!newGoal.trim()) return;
    await fetch(`/api/projects/${projectId}/goals/update`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ text: newGoal, action: "create" }),
    });
    setNewGoal("");
    router.refresh();
  }

  return (
    <div className="flex flex-col gap-3">
      <div className="rounded-2xl border border-dashed border-[#B7EAC7] bg-[#F5FFF8] px-4 py-4">
        <div className="text-[13px] font-semibold text-[#215B39]">新增项目目标</div>
        <textarea
          value={newGoal}
          onChange={(event) => setNewGoal(event.target.value)}
          placeholder="写入新的项目目标，主 Agent 会据此调整优先级。"
          className="mt-3 min-h-24 w-full rounded-xl border border-[#DFF4E8] bg-white p-3 text-[14px] leading-6 outline-none"
        />
        <button
          type="button"
          onClick={() => void handleCreate()}
          className="mt-3 rounded-full bg-[#07C160] px-4 py-2 text-[13px] font-semibold text-white"
        >
          添加目标
        </button>
      </div>
      {goals.map((goal) => {
        const completed = goal.state === "completed";
        const editing = editingId === goal.id;

        return (
          <div key={goal.id} className="rounded-2xl border border-[#E5E5EA] bg-white px-4 py-4">
            <div className="flex items-start gap-3">
              <button
                type="button"
                onClick={() => void handleToggle(goal.id)}
                disabled={workingId === goal.id}
                className={clsx(
                  "mt-0.5 flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded-full border-2",
                  completed
                    ? "border-[#07C160] bg-[#07C160] text-white"
                    : "border-[#07C160] bg-white text-transparent",
                )}
              >
                ✓
              </button>
              <div className="min-w-0 flex-1">
                {editing ? (
                  <div className="space-y-2">
                    <textarea
                      value={draft}
                      onChange={(event) => setDraft(event.target.value)}
                      className="min-h-24 w-full rounded-xl border border-[#E5E5EA] bg-[#F9F9FA] p-3 text-[14px] leading-6 outline-none"
                    />
                    <div className="flex gap-2">
                      <button
                        type="button"
                        onClick={() => void handleSave(goal.id)}
                        className="rounded-full bg-[#07C160] px-4 py-2 text-[13px] font-semibold text-white"
                      >
                        保存
                      </button>
                      <button
                        type="button"
                        onClick={() => {
                          setEditingId(null);
                          setDraft("");
                        }}
                        className="rounded-full border border-[#E5E5EA] px-4 py-2 text-[13px] text-[#57606A]"
                      >
                        取消
                      </button>
                    </div>
                  </div>
                ) : (
                  <>
                    <div
                      className={clsx(
                        "text-[15px] leading-6",
                        completed ? "text-[#8C8C8C] line-through" : "text-[#111111]",
                      )}
                    >
                      {goal.text}
                    </div>
                    <div className="mt-2 text-[12px] text-[#8C8C8C]">
                      {goal.note}
                      {goal.completedAt ? ` · ${formatClock(goal.completedAt)}` : ""}
                    </div>
                  </>
                )}
              </div>
              {!editing ? (
                <button
                  type="button"
                  onClick={() => {
                    setEditingId(goal.id);
                    setDraft(goal.text);
                  }}
                  className="text-[13px] font-semibold text-[#07C160]"
                >
                  编辑
                </button>
              ) : null}
            </div>
          </div>
        );
      })}
    </div>
  );
}

export function AuthForm({
  title,
  description,
  mode,
}: {
  title: string;
  description: string;
  mode: "login" | "register" | "forgot-password";
}) {
  const router = useRouter();
  const [account, setAccount] = useState("");
  const [loginMethod, setLoginMethod] = useState<"password" | "code">("password");
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [code, setCode] = useState("");
  const [message, setMessage] = useState("");
  const [submitting, setSubmitting] = useState(false);

  async function sendCode() {
    if (!account.trim()) {
      setMessage("请先输入账号，再发送验证码。");
      return;
    }
    const response = await fetch("/api/auth/send-code", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ account, purpose: mode }),
    });
    const result = (await response.json()) as { message: string };
    setMessage(result.message);
  }

  async function submit() {
    setSubmitting(true);
    const route =
      mode === "login"
        ? "/api/auth/login"
        : mode === "register"
          ? "/api/auth/register"
          : "/api/auth/forgot-password";

    const nativeClient = await isNativeBossApp();
    try {
      const response = await fetch(route, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          ...(nativeClient ? { "x-boss-native-app": "1" } : {}),
        },
        body: JSON.stringify({
          account,
          password,
          confirmPassword,
          code,
          method: mode === "login" ? loginMethod : undefined,
        }),
      });

      const result = (await response.json()) as {
        ok: boolean;
        message: string;
        account?: string;
        displayName?: string;
        sessionExpiresAt?: string;
        restoreToken?: string;
      };
      setMessage(result.message);
      if (result.ok && mode === "login") {
        if (
          nativeClient &&
          result.restoreToken &&
          result.account &&
          result.displayName &&
          result.sessionExpiresAt
        ) {
          try {
            await persistNativeSessionSnapshot({
              restoreToken: result.restoreToken,
              account: result.account,
              displayName: result.displayName,
              expiresAt: result.sessionExpiresAt,
              lastSyncedAt: new Date().toISOString(),
            });
          } catch (error) {
            void sendAppLog({
              deviceId: boundDeviceIdFromDom(),
              level: "warn",
              category: "auth.native_restore_snapshot_failed",
              message: "登录成功，但原生 restore token 快照写入失败。",
              detail: error instanceof Error ? error.message : String(error),
              mirrorToMaster: false,
            });
          }
        }

        await waitForLoginSessionReady(nativeClient);
        navigateAfterLogin(router);
        return;
      }
      if (result.ok && mode === "register") {
        router.push("/auth/login");
      }
    } catch (error) {
      setMessage("登录链路发生异常，请重试。");
      void sendAppLog({
        deviceId: boundDeviceIdFromDom(),
        level: "error",
        category: "auth.submit_failed",
        message: "登录或注册提交失败。",
        detail: error instanceof Error ? error.message : String(error),
        mirrorToMaster: true,
      });
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <div className="space-y-4 px-[18px] pb-8">
      <div className="space-y-2 px-0 py-2">
        <div className="flex h-16 w-16 items-center justify-center rounded-[18px] bg-[#07C160] text-[30px] font-semibold text-white">
          C
        </div>
        <h1 className="pt-2 text-[34px] font-semibold tracking-[-0.02em] text-[#111111]">
          {title}
        </h1>
        <p className="text-[14px] leading-6 text-[#8C8C8C]">{description}</p>
      </div>

      <div className="overflow-hidden rounded-2xl border border-[#E5E5EA] bg-white">
        {mode === "login" ? (
          <>
            <div className="grid grid-cols-2 gap-2 bg-[#F7F8FA] px-4 py-3">
              <button
                type="button"
                onClick={() => {
                  setLoginMethod("password");
                  setMessage("");
                }}
                className={clsx(
                  "rounded-xl px-3 py-2 text-[13px] font-semibold",
                  loginMethod === "password" ? "bg-[#07C160] text-white" : "bg-white text-[#57606A]",
                )}
              >
                账号密码登录
              </button>
              <button
                type="button"
                onClick={() => {
                  setLoginMethod("code");
                  setMessage("");
                }}
                className={clsx(
                  "rounded-xl px-3 py-2 text-[13px] font-semibold",
                  loginMethod === "code" ? "bg-[#07C160] text-white" : "bg-white text-[#57606A]",
                )}
              >
                验证码登录
              </button>
            </div>
            <div className="h-px w-full bg-[#E5E5EA]" />
          </>
        ) : null}
        <AuthField label="账号" value={account} onChange={setAccount} placeholder="输入手机号 / 邮箱" />
        {mode === "login" && loginMethod === "code" ? (
          <>
            <AuthCodeField label="登录验证码" value={code} onChange={setCode} onSend={sendCode} />
            <div className="border-t border-[#E5E5EA] px-4 py-3 text-[12px] leading-5 text-[#57606A]">
              验证码会按当前服务器配置发送；如果企业仍处于固定验证码演示模式，请以管理员配置为准。
            </div>
          </>
        ) : null}
        {mode !== "login" ? (
          <AuthCodeField
            label={mode === "register" ? "注册验证码" : "重置验证码"}
            value={code}
            onChange={setCode}
            onSend={sendCode}
          />
        ) : null}
        {(mode !== "login" || loginMethod === "password") ? (
          <AuthField
            label={mode === "forgot-password" ? "新密码" : mode === "register" ? "登录密码" : "密码"}
            value={password}
            onChange={setPassword}
            placeholder={mode === "register" ? "设置 8-20 位密码" : "输入密码"}
            type="password"
          />
        ) : null}
        {(mode === "register" || mode === "forgot-password") && (
          <AuthField
            label={mode === "register" ? "确认密码" : "确认新密码"}
            value={confirmPassword}
            onChange={setConfirmPassword}
            placeholder="再次输入密码"
            type="password"
          />
        )}
      </div>

      <button
        type="button"
        onClick={() => void submit()}
        disabled={submitting}
        className="flex h-[52px] w-full items-center justify-center rounded-[14px] bg-[#07C160] text-[17px] font-semibold text-white"
      >
        {submitting ? "处理中..." : mode === "login" ? "登录" : mode === "register" ? "注册并继续" : "确认重置"}
      </button>

      {message ? (
        <div className="rounded-2xl bg-[#EAF7F0] px-4 py-3 text-[13px] leading-6 text-[#215B39]">
          {message}
        </div>
      ) : null}

      <div className="flex items-center justify-between text-[14px]">
        {mode === "login" ? (
          <>
            <Link href="/auth/register" className="text-[#07C160]">
              注册账号
            </Link>
            <Link href="/auth/forgot-password" className="text-[#57606A]">
              忘记密码
            </Link>
          </>
        ) : mode === "register" ? (
          <Link href="/auth/login" className="mx-auto text-[#07C160]">
            已有账号，去登录
          </Link>
        ) : (
          <Link href="/auth/login" className="mx-auto text-[#57606A]">
            密码重置成功后，回到登录页继续验证。
          </Link>
        )}
      </div>
    </div>
  );
}

function AuthField({
  label,
  value,
  onChange,
  placeholder,
  type = "text",
}: {
  label: string;
  value: string;
  onChange: (value: string) => void;
  placeholder: string;
  type?: "text" | "password";
}) {
  return (
    <>
      <div className="space-y-1 px-4 py-3">
        <div className="text-[12px] text-[#8C8C8C]">{label}</div>
        <input
          type={type}
          value={value}
          onChange={(event) => onChange(event.target.value)}
          placeholder={placeholder}
          className="w-full border-0 bg-transparent p-0 text-[16px] text-[#111111] outline-none"
        />
      </div>
      <div className="h-px w-full bg-[#E5E5EA]" />
    </>
  );
}

function AuthCodeField({
  label,
  value,
  onChange,
  onSend,
}: {
  label: string;
  value: string;
  onChange: (value: string) => void;
  onSend: () => void;
}) {
  return (
    <>
      <div className="flex items-center gap-3 px-4 py-3">
        <div className="min-w-0 flex-1 space-y-1">
          <div className="text-[12px] text-[#8C8C8C]">{label}</div>
          <input
            value={value}
            onChange={(event) => onChange(event.target.value)}
            placeholder="输入 6 位验证码"
            inputMode="numeric"
            className="w-full border-0 bg-transparent p-0 text-[16px] text-[#111111] outline-none"
          />
        </div>
        <button
          type="button"
          onClick={onSend}
          className="rounded-xl border border-[#07C160] bg-[#F5FFF8] px-3 py-2 text-[13px] font-semibold text-[#07C160]"
        >
          发送验证码
        </button>
      </div>
      <div className="h-px w-full bg-[#E5E5EA]" />
    </>
  );
}

function Field({
  label,
  value,
  onChange,
}: {
  label: string;
  value: string;
  onChange: (value: string) => void;
}) {
  return (
    <label className="block space-y-1">
      <span className="text-[12px] text-[#8C8C8C]">{label}</span>
      <input
        value={value}
        onChange={(event) => onChange(event.target.value)}
        className="w-full rounded-xl border border-[#E5E5EA] bg-[#F9F9FA] px-3 py-3 text-[14px] outline-none"
      />
    </label>
  );
}

export function DeviceEnrollmentBuilder() {
  const [name, setName] = useState("Mac Mini");
  const [avatar, setAvatar] = useState("M");
  const [account, setAccount] = useState("krisolo");
  const [projects, setProjects] = useState("");
  const [endpoint, setEndpoint] = useState("mac://new-device.local");
  const [note, setNote] = useState("新设备待绑定");
  const [result, setResult] = useState<{
    enrollment?: DeviceEnrollment;
    device?: Device;
    message?: string;
  }>({});

  async function submit() {
    const response = await fetch("/api/v1/devices/enrollments", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        name,
        avatar,
        account,
        endpoint,
        note,
        projects: projects
          .split(",")
          .map((item) => item.trim())
          .filter(Boolean),
      }),
    });
    const data = (await response.json()) as {
      ok: boolean;
      enrollment?: DeviceEnrollment;
      device?: Device;
      message?: string;
    };
    setResult(data);
  }

  const configSnippet = result.enrollment
    ? JSON.stringify(
        {
          bindHost: "127.0.0.1",
          port: 4317,
          heartbeatIntervalMs: 15000,
          controlPlaneUrl: "http://127.0.0.1:3000",
          deviceId: result.device?.id,
          pairingCode: result.enrollment.pairingCode,
          token: result.enrollment.token,
          name,
          avatar,
          account,
          status: "online",
          quota5h: 100,
          quota7d: 100,
          projects: projects
            .split(",")
            .map((item) => item.trim())
            .filter(Boolean),
          endpoint,
        },
        null,
        2,
      )
    : "";

  return (
    <div className="space-y-3 rounded-2xl border border-[#E5E5EA] bg-white px-4 py-4">
      <div className="text-[16px] font-semibold text-[#111111]">生成设备绑定草稿</div>
      <Field label="设备名称" value={name} onChange={setName} />
      <div className="grid grid-cols-2 gap-3">
        <Field label="头像缩写" value={avatar} onChange={setAvatar} />
        <Field label="账号" value={account} onChange={setAccount} />
      </div>
      <Field label="项目列表（逗号分隔）" value={projects} onChange={setProjects} />
      <Field label="Endpoint" value={endpoint} onChange={setEndpoint} />
      <Field label="备注" value={note} onChange={setNote} />
      <button
        type="button"
        onClick={() => void submit()}
        className="rounded-full bg-[#07C160] px-4 py-2 text-[13px] font-semibold text-white"
      >
        生成 pairing code / token
      </button>
      {result.message ? (
        <div className="rounded-2xl bg-[#FFF1F0] px-4 py-3 text-[12px] text-[#CF1322]">
          {result.message}
        </div>
      ) : null}
      {result.enrollment ? (
        <div className="rounded-2xl bg-[#F7F8FA] px-4 py-3 text-[12px] leading-6 text-[#57606A]">
          Pairing code: <span className="font-semibold text-[#111111]">{result.enrollment.pairingCode}</span>
          <br />
          Token: <span className="font-semibold text-[#111111]">{result.enrollment.token}</span>
          <br />
          设备 ID: {result.device?.id}
          <br />
          过期时间：{formatClock(result.enrollment.expiresAt)}
        </div>
      ) : null}
      {configSnippet ? (
        <pre className="overflow-x-auto rounded-2xl bg-[#111111] p-4 text-[11px] leading-6 text-[#E8E8E8]">
          {configSnippet}
        </pre>
      ) : null}
      {result.device?.id ? (
        <DeviceImportDraftManager deviceId={result.device.id} deviceName={result.device.name} />
      ) : null}
    </div>
  );
}

export function OtaActionButton({ canApply = true }: { canApply?: boolean }) {
  const router = useRouter();
  const [message, setMessage] = useState("");

  async function run() {
    if (!canApply) {
      setMessage("当前账号没有 OTA 执行权限。");
      void sendAppLog({
        deviceId: boundDeviceIdFromDom(),
        level: "warn",
        category: "ota.apply_blocked",
        message: "当前账号没有 OTA 执行权限。",
        mirrorToMaster: true,
      });
      return;
    }
    const response = await fetch("/api/v1/user/ota", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ action: "apply" }),
    });
    const result = (await response.json()) as { ok: boolean; version?: string; message?: string };
    setMessage(result.ok ? `已升级到 ${result.version}` : result.message ?? "OTA 失败");
    void sendAppLog({
      deviceId: boundDeviceIdFromDom(),
      level: result.ok ? "info" : "error",
      category: result.ok ? "ota.apply_succeeded" : "ota.apply_failed",
      message: result.ok ? `已执行 OTA 升级到 ${result.version}` : result.message ?? "OTA 失败",
      mirrorToMaster: true,
    });
    if (result.ok) router.refresh();
  }

  return (
    <>
      <button
        type="button"
        onClick={() => void run()}
        disabled={!canApply}
        className={clsx(
          "rounded-full px-4 py-2 text-[13px] font-semibold",
          canApply ? "bg-[#07C160] text-white" : "bg-[#E5E5EA] text-[#8C8C8C]",
        )}
      >
        立即 OTA
      </button>
      {message ? (
        <div className="mt-3 rounded-2xl bg-[#EAF7F0] px-4 py-3 text-[12px] text-[#215B39]">
          {message}
        </div>
      ) : null}
    </>
  );
}

export function OtaCenterCard({
  currentVersion,
  availableRelease,
  logs,
  boundCodexNodeLabel,
  roleLabel,
  canApply,
  compact = false,
}: {
  currentVersion: string;
  availableRelease?: OtaUpdate | null;
  logs: OtaUpdateLog[];
  boundCodexNodeLabel?: string;
  roleLabel: string;
  canApply: boolean;
  compact?: boolean;
}) {
  const router = useRouter();
  const [message, setMessage] = useState("");

  async function checkUpdate() {
    const response = await fetch("/api/v1/user/ota", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ action: "check" }),
    });
    const result = (await response.json()) as { ok: boolean; message?: string };
    setMessage(result.message ?? (result.ok ? "检查完成。" : "检查失败"));
    void sendAppLog({
      deviceId: boundDeviceIdFromDom(),
      level: result.ok ? "info" : "error",
      category: result.ok ? "ota.check_succeeded" : "ota.check_failed",
      message: result.message ?? (result.ok ? "检查完成。" : "检查失败"),
      mirrorToMaster: !result.ok,
    });
    if (result.ok) router.refresh();
  }

  return (
    <div className="rounded-2xl border border-[#E5E5EA] bg-white px-4 py-4">
      <div className="flex items-start justify-between gap-3">
        <div>
          <div className="text-[16px] font-semibold text-[#111111]">关于 / OTA</div>
          <div className="mt-1 text-[13px] leading-6 text-[#57606A]">
            当前版本 {currentVersion}
            <br />
            管理员角色：{roleLabel}
            <br />
            绑定节点：{boundCodexNodeLabel ?? "未绑定"}
          </div>
        </div>
        {availableRelease ? (
          <span className="rounded-full bg-[#FFF1F0] px-3 py-1 text-[12px] font-semibold text-[#CF1322]">
            OTA
          </span>
        ) : null}
      </div>

      <div className="mt-4 rounded-2xl bg-[#F7F8FA] px-4 py-4">
        <div className="text-[14px] font-semibold text-[#111111]">
          {availableRelease ? `可用版本 ${availableRelease.version}` : "当前没有待升级版本"}
        </div>
        <div className="mt-2 text-[13px] leading-6 text-[#57606A]">
          {availableRelease ? (
            <>
              来源版本：{availableRelease.currentVersion}
              <br />
              发布范围：{availableRelease.targetScope}
              <br />
              {(availableRelease.summary ?? []).join("；")}
              {availableRelease.packageFileName ? (
                <>
                  <br />
                  安装包：{availableRelease.packageFileName}
                  {availableRelease.packageSizeBytes ? ` · ${formatBytes(availableRelease.packageSizeBytes)}` : ""}
                </>
              ) : null}
              {availableRelease.assetUpdatedAt ? (
                <>
                  <br />
                  包更新时间：{formatClock(availableRelease.assetUpdatedAt)}
                </>
              ) : null}
            </>
          ) : (
            "点击“检查更新”可重新拉取 OTA 状态。"
          )}
        </div>
      </div>

      <div className="mt-4 flex flex-wrap gap-2">
        <button
          type="button"
          onClick={() => void checkUpdate()}
          className="rounded-full border border-[#07C160] bg-[#F5FFF8] px-4 py-2 text-[13px] font-semibold text-[#07C160]"
        >
          检查更新
        </button>
        {availableRelease?.downloadUrl ? (
          <a
            href={availableRelease.downloadUrl}
            target="_blank"
            rel="noreferrer"
            className="rounded-full border border-[#111111] bg-white px-4 py-2 text-[13px] font-semibold text-[#111111]"
          >
            下载 APK
          </a>
        ) : null}
        {availableRelease ? <OtaActionButton canApply={canApply} /> : null}
      </div>

      {message ? (
        <div className="mt-3 rounded-2xl bg-[#EAF7F0] px-4 py-3 text-[12px] leading-6 text-[#215B39]">
          {message}
        </div>
      ) : null}

      {availableRelease?.packageSha256 ? (
        <div className="mt-3 rounded-2xl bg-[#F7F8FA] px-4 py-3 text-[12px] leading-6 text-[#57606A]">
          SHA256：{availableRelease.packageSha256}
        </div>
      ) : null}

      {!compact ? (
        <div className="mt-4 rounded-2xl bg-[#F7F8FA] px-4 py-4">
          <div className="text-[14px] font-semibold text-[#111111]">OTA 记录</div>
          <div className="mt-2 space-y-3 text-[12px] leading-6 text-[#57606A]">
            {logs.length ? (
              logs.slice(0, 4).map((log) => (
                <div key={log.logId}>
                  <div className="font-semibold text-[#111111]">
                    {log.version} · {log.status}
                  </div>
                  <div>
                    {formatClock(log.triggeredAt)} · {log.note}
                  </div>
                </div>
              ))
            ) : (
              <div>当前还没有 OTA 记录。</div>
            )}
          </div>
        </div>
      ) : null}
    </div>
  );
}

export function SettingsForm({ settings }: { settings: UserSettings }) {
  const router = useRouter();
  const [draft, setDraft] = useState(settings);
  const [message, setMessage] = useState("");

  async function save() {
    const response = await fetch("/api/v1/settings", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(draft),
    });
    const result = (await response.json()) as { ok: boolean; message?: string };
    setMessage(result.ok ? "设置已保存。" : result.message ?? "保存失败");
    if (result.ok) router.refresh();
  }

  return (
    <div className="space-y-3 rounded-2xl border border-[#E5E5EA] bg-white px-4 py-4">
      <SwitchRow
        label="启用实时刷新提示"
        value={draft.liveUpdates}
        onChange={(value) => setDraft((current) => ({ ...current, liveUpdates: value }))}
      />
      <SwitchRow
        label="显示风险徽标"
        value={draft.showRiskBadges}
        onChange={(value) => setDraft((current) => ({ ...current, showRiskBadges: value }))}
      />
      <SwitchRow
        label="危险操作前二次确认"
        value={draft.confirmDangerousActions}
        onChange={(value) =>
          setDraft((current) => ({ ...current, confirmDangerousActions: value }))
        }
      />
      <div className="space-y-1">
        <div className="text-[12px] text-[#8C8C8C]">默认首页</div>
        <div className="flex gap-2">
          {(["conversations", "devices", "me"] as const).map((item) => (
            <button
              key={item}
              type="button"
              onClick={() => setDraft((current) => ({ ...current, preferredEntryPoint: item }))}
              className={clsx(
                "rounded-full px-3 py-2 text-[12px] font-semibold",
                draft.preferredEntryPoint === item
                  ? "bg-[#07C160] text-white"
                  : "bg-[#F5F5F7] text-[#57606A]",
              )}
            >
              {item}
            </button>
          ))}
        </div>
      </div>
      <button
        type="button"
        onClick={() => void save()}
        className="rounded-full bg-[#07C160] px-4 py-2 text-[13px] font-semibold text-white"
      >
        保存设置
      </button>
      {message ? (
        <div className="rounded-2xl bg-[#EAF7F0] px-4 py-3 text-[12px] text-[#215B39]">
          {message}
        </div>
      ) : null}
    </div>
  );
}

function SwitchRow({
  label,
  value,
  onChange,
}: {
  label: string;
  value: boolean;
  onChange: (value: boolean) => void;
}) {
  return (
    <button
      type="button"
      onClick={() => onChange(!value)}
      className="flex w-full items-center justify-between rounded-2xl bg-[#F7F8FA] px-4 py-3"
    >
      <span className="text-[14px] text-[#111111]">{label}</span>
      <span
        className={clsx(
          "rounded-full px-3 py-1 text-[12px] font-semibold",
          value ? "bg-[#07C160] text-white" : "bg-white text-[#57606A]",
        )}
      >
        {value ? "开" : "关"}
      </span>
    </button>
  );
}

export function RepairTicketActions({
  ticket,
  verification,
}: {
  ticket: OpsRepairTicket;
  verification?: OpsRepairVerification;
}) {
  const router = useRouter();
  const [message, setMessage] = useState("");

  async function run(action: "approve" | "verify") {
    const response = await fetch(`/api/v1/ops/repair-tickets/${ticket.ticketId}/${action}`, {
      method: "POST",
    });
    const result = (await response.json()) as { ok: boolean; message?: string };
    setMessage(result.ok ? "工单状态已更新。" : result.message ?? "操作失败");
    if (result.ok) router.refresh();
  }

  return (
    <div className="mt-3 flex flex-wrap items-center gap-2">
      {ticket.approvalStatus !== "approved" ? (
        <button
          type="button"
          onClick={() => void run("approve")}
          className="rounded-full bg-[#07C160] px-3 py-2 text-[12px] font-semibold text-white"
        >
          主 Agent 批准
        </button>
      ) : null}
      {ticket.executionStatus !== "verified" ? (
        <button
          type="button"
          onClick={() => void run("verify")}
          className="rounded-full border border-[#07C160] px-3 py-2 text-[12px] font-semibold text-[#07C160]"
        >
          运维审计复验
        </button>
      ) : null}
      {verification ? (
        <span className="rounded-full bg-[#F5F5F7] px-3 py-2 text-[12px] text-[#57606A]">
          复验：{verification.status}
        </span>
      ) : null}
      {message ? (
        <span className="text-[12px] text-[#57606A]">{message}</span>
      ) : null}
    </div>
  );
}

export function ForwardComposer({
  sourceProjectId,
  targets,
}: {
  sourceProjectId: string;
  targets: Array<{ id: string; name: string }>;
}) {
  const router = useRouter();
  const [targetProjectId, setTargetProjectId] = useState(targets[0]?.id ?? "");
  const [note, setNote] = useState("");
  const [message, setMessage] = useState("");

  async function submit() {
    const response = await fetch(`/api/v1/projects/${sourceProjectId}/forwards`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ targetProjectId, note }),
    });
    const result = (await response.json()) as { ok: boolean; message?: string };
    if (result.ok) {
      router.push(`/conversations/${targetProjectId}`);
      router.refresh();
      return;
    }
    setMessage(result.message ?? "转发失败");
  }

  return (
    <div className="space-y-3 rounded-2xl border border-[#E5E5EA] bg-white px-4 py-4">
      <div className="text-[16px] font-semibold text-[#111111]">转发到项目</div>
      <label className="block space-y-1">
        <span className="text-[12px] text-[#8C8C8C]">目标项目</span>
        <select
          value={targetProjectId}
          onChange={(event) => setTargetProjectId(event.target.value)}
          className="w-full rounded-xl border border-[#E5E5EA] bg-[#F9F9FA] px-3 py-3 text-[14px] outline-none"
        >
          {targets.map((target) => (
            <option key={target.id} value={target.id}>
              {target.name}
            </option>
          ))}
        </select>
      </label>
      <label className="block space-y-1">
        <span className="text-[12px] text-[#8C8C8C]">转发说明</span>
        <textarea
          value={note}
          onChange={(event) => setNote(event.target.value)}
          className="min-h-28 w-full rounded-xl border border-[#E5E5EA] bg-[#F9F9FA] p-3 text-[14px] leading-6 outline-none"
        />
      </label>
      <button
        type="button"
        onClick={() => void submit()}
        className="rounded-full bg-[#07C160] px-4 py-2 text-[13px] font-semibold text-white"
      >
        执行转发
      </button>
      {message ? (
        <div className="rounded-2xl bg-[#FFF1F0] px-4 py-3 text-[12px] text-[#CF1322]">
          {message}
        </div>
      ) : null}
    </div>
  );
}