"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 {
  extractApprovedTargetProjectIds,
  summarizeDispatchPlan,
} from "@/lib/dispatch-plan-ui";
import type {
  Device,
  DeviceEnrollment,
  GoalItem,
  MasterIdentitySummary,
  Message,
  OtaUpdate,
  OtaUpdateLog,
  OpsRepairTicket,
  OpsRepairVerification,
  ThreadContextSnapshot,
  UserProfile,
  UserSettings,
} from "@/lib/boss-data";
import type { ConversationItem } 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";
}

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 navigateToConversations(router: ReturnType<typeof useRouter>) {
  router.replace("/conversations", { scroll: false });
  router.refresh();
  window.setTimeout(() => {
    if (window.location.pathname !== "/conversations") {
      window.location.replace("/conversations");
    }
  }, 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]";
  }
}

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

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

  if (conversation.conversationType === "folder_archive") {
    return <div className="min-h-[24px]" />;
  }

  async function runAction(action: "toggle_pin" | "mark_read") {
    setLoading(action);
    await fetch(conversationActionsPath(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">
      {conversation.projectId !== "master-agent" ? (
        <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]"
        >
          {conversation.manualPinned ? "取消置顶" : "置顶"}
        </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) => (
        <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={
              conversation.conversationType === "folder_archive" && conversation.folderKey
                ? `/conversations/folders/${encodeURIComponent(conversation.folderKey)}`
                : `/conversations/${conversation.projectId}`
            }
            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]">
                      {conversation.conversationType === "folder_archive"
                        ? conversation.threadTitle
                        : conversation.projectTitle}
                    </div>
                    {conversation.conversationType === "folder_archive" ? (
                      <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]">
                    {conversation.conversationType === "folder_archive"
                      ? conversation.folderLabel
                      : conversation.deviceNamesPreview.join(" / ")}
                  </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]">
                    {conversation.projectId === "master-agent"
                      ? "置顶"
                      : conversation.manualPinned
                        ? "置顶"
                        : ""}
                  </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,
}: {
  device: Device;
  relatedThreads: ThreadContextSnapshot[];
  activeEnrollment?: DeviceEnrollment;
}) {
  const router = useRouter();
  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 [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,
        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();
  }

  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>
      <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-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}
          {message.body}
        </div>
      </div>
    </div>
  );
}

export function ProjectHeaderActions({ projectId }: { projectId: string }) {
  return (
    <div className="grid grid-cols-3 gap-3">
      <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>
    </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>
  );
}

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

export function ChatComposer({
  projectId,
  initialPendingDispatchPlan,
}: {
  projectId: string;
  initialPendingDispatchPlan?: PendingDispatchPlanState | null;
}) {
  const router = useRouter();
  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 [dismissedPendingPlanId, setDismissedPendingPlanId] = useState<string | null>(null);
  const pendingDispatchPlan =
    localPendingDispatchPlan ??
    (initialPendingDispatchPlan && initialPendingDispatchPlan.planId !== dismissedPendingPlanId
      ? initialPendingDispatchPlan
      : null);

  async function confirmDispatchPlan() {
    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),
        }),
      },
    );
    const result = (await response.json()) as {
      ok: boolean;
      executions?: Array<unknown>;
      message?: string;
    };
    setLoading(false);
    if (!result.ok) {
      setMessageTone("error");
      setMessage(result.message ?? "确认下发失败，请重试。");
      return;
    }
    const executionCount = result.executions?.length ?? extractApprovedTargetProjectIds(pendingDispatchPlan).length;
    setLocalPendingDispatchPlan(null);
    setDismissedPendingPlanId(pendingDispatchPlan.planId);
    setMessageTone("success");
    setMessage(`已确认下发到 ${executionCount} 个线程。`);
    router.refresh();
  }

  async function send(kind: "text" | "voice_intent" | "image_intent" | "video_intent") {
    setLoading(true);
    const response = await fetch(`/api/v1/projects/${projectId}/messages`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ body: kind === "text" ? value : undefined, kind }),
    });
    const result = (await response.json()) as {
      ok: boolean;
      message?: { body: string };
      dispatchPlan?: {
        planId: string;
        summary?: string;
        targets?: Array<{ projectId: string; threadDisplayName: string }>;
      } | null;
      collaborationGate?: {
        requiresMasterAgentApproval?: boolean;
      };
      messageText?: string;
    };
    setLoading(false);
    if (result.ok) {
      void sendAppLog({
        deviceId: boundDeviceIdFromDom(),
        projectId,
        level: "info",
        category: "chat.message_sent",
        message:
          kind === "text" ? `已发送文本消息：${value.trim() || "空文本"}` : `已发送 ${kind} 意图消息。`,
        mirrorToMaster: false,
      });
      setValue("");
      if (result.dispatchPlan) {
        setLocalPendingDispatchPlan({
          planId: result.dispatchPlan.planId,
          summary: result.dispatchPlan.summary,
          targets: result.dispatchPlan.targets ?? [],
        });
        setDismissedPendingPlanId(null);
        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("消息发送失败，请重试。");
  }

  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}
      {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]">等待你确认主 Agent 推荐</div>
          <div className="mt-2 whitespace-pre-line">{summarizeDispatchPlan(pendingDispatchPlan)}</div>
          <div className="mt-3 flex flex-wrap gap-2">
            <button
              type="button"
              disabled={loading}
              onClick={() => void confirmDispatchPlan()}
              className="rounded-full bg-[#07C160] px-4 py-2 text-[13px] font-semibold text-white disabled:bg-[#B7E6C9]"
            >
              确认下发
            </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}
    </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);
        navigateToConversations(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]">
              当前固定验证码模式下，可直接输入 <span className="font-semibold text-[#111111]">000000</span>{" "}
              登录；如需确认账号状态，也可以先点“发送验证码”。
            </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("17600003315");
  const [projects, setProjects] = useState("Boss 移动控制台");
  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: 60000,
          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>
  );
}