"use client";

import { zipSync } from "fflate";
import { ChangeEvent, FormEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";
import {
  formatShanghaiDate as formatDate,
  parseStoredDate,
} from "./date-utils";
import {
  compactPartnerBatchWorkbookForUpload,
  PARTNER_BATCH_UPLOAD_MAX_BYTES,
} from "./batch-workbook-upload";

type Assignment = {
  id: string;
  status: string;
  publish_url: string | null;
  publish_time: string | null;
  publish_screenshot_key: string | null;
  creator_screenshot_key: string | null;
  result_screenshot_key: string | null;
  result_submitted_at: string | null;
  ocr_status: string;
  exposure: number | null;
  views: number | null;
  title: string;
  body: string;
  source_row: number | null;
  account_nickname: string | null;
  delegation_bundle_id?: string | null;
  delegation_label?: string | null;
  images: Array<{
    index: number;
    width: number | null;
    height: number | null;
  }>;
  videos: Array<{
    index: number;
    width: number | null;
    height: number | null;
  }>;
};

type DelegationSummary = {
  id: string;
  label: string;
  share_token: string;
  quantity: number;
  status: "active" | "revoked";
  created_at: string;
  revoked_at: string | null;
  completed_count: number;
  creator_completed_count: number;
  result_completed_count?: number;
};

type RecoveredClaim = {
  claimToken: string;
  quantity: number;
  completedCount: number;
  createdAt: string;
  firstTitle: string;
};

type TaskPayload = {
  task: {
    name: string;
    brand: string;
    quantity?: number;
    claimedQuantity?: number;
    availableQuantity?: number;
    dueAt: string;
    status: string;
    type: "content_publish";
    platform: "小红书" | "抖音";
    contentFormat: "image_text" | "video";
    recoveryEnabled?: boolean;
    recoveryDueAt?: string;
    recoveryInstructions?: string;
    recoveryExampleImages?: Array<{
      index: number;
      width: number | null;
      height: number | null;
    }>;
  };
  claim: null | {
    id: string;
    claimantName: string;
    quantity: number;
    createdAt: string;
    assignments: Assignment[];
    delegations: DelegationSummary[];
    joinQrCode?: string;
  };
  delegation: null | {
    id: string;
    label: string;
    quantity: number;
    createdAt: string;
    assignments: Assignment[];
  };
};

const CONFIGURED_ADMIN_ORIGIN =
  process.env.NEXT_PUBLIC_ADMIN_ORIGIN?.replace(/\/$/, "") ?? "";

function resolveAdminOrigin() {
  if (CONFIGURED_ADMIN_ORIGIN) return CONFIGURED_ADMIN_ORIGIN;
  if (window.location.hostname === "localhost" && window.location.port === "3001") {
    return "http://localhost:3000";
  }
  return window.location.origin;
}

function partnerApi(
  path:
    | "/api/partner"
    | "/api/partner-upload"
    | "/api/partner-batch-workbook"
    | "/api/wecom-oauth",
) {
  return `${resolveAdminOrigin()}${path}`;
}

const WECOM_CORP_ID = process.env.NEXT_PUBLIC_WECOM_CORP_ID ?? "";
const WECOM_AGENT_ID = process.env.NEXT_PUBLIC_WECOM_AGENT_ID ?? "";
const WECOM_OAUTH_ENABLED = Boolean(WECOM_CORP_ID && WECOM_AGENT_ID);
const WECOM_PORTAL_BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH ?? "/koc";
const WECOM_IDENTITY_SESSION_KEY = "koc-wecom-identity";
const WECOM_AUTH_FAILED_KEY = "koc-wecom-auth-failed";
const WECOM_OAUTH_SID_PREFIX = "koc-wecom-oauth-sid";
const WECOM_OAUTH_STATE_LIMIT = 120;

type WecomPortalIdentity = {
  ticket: string;
  name: string;
  expiresAt: number;
};

type PortalParams = {
  task: string;
  claim: string;
  share: string;
  note: string;
  owner: string;
};

function readSessionValue<T>(key: string): T | null {
  try {
    const raw = window.sessionStorage.getItem(key);
    return raw ? (JSON.parse(raw) as T) : null;
  } catch {
    return null;
  }
}

function writeSessionValue(key: string, value: unknown): boolean {
  try {
    window.sessionStorage.setItem(key, JSON.stringify(value));
    return true;
  } catch {
    return false;
  }
}

function markSessionFlag(key: string) {
  try {
    window.sessionStorage.setItem(key, "1");
  } catch {
    // 隐私模式等场景下忽略，最多少一次自动授权
  }
}

function hasSessionFlag(key: string) {
  try {
    return window.sessionStorage.getItem(key) === "1";
  } catch {
    return false;
  }
}

function loadWecomIdentity(): WecomPortalIdentity | null {
  const identity = readSessionValue<WecomPortalIdentity>(
    WECOM_IDENTITY_SESSION_KEY,
  );
  if (!identity?.ticket || typeof identity.expiresAt !== "number") return null;
  if (Date.now() > identity.expiresAt) return null;
  return identity;
}

function isWecomEmbeddedBrowser() {
  const userAgent = window.navigator.userAgent;
  return /wxwork/i.test(userAgent) || /MicroMessenger/i.test(userAgent);
}

function buildWecomAuthorizeUrl(state: string) {
  const query = new URLSearchParams({
    appid: WECOM_CORP_ID,
    redirect_uri: `${window.location.origin}${WECOM_PORTAL_BASE_PATH}/`,
    response_type: "code",
    scope: "snsapi_base",
    state,
    agentid: WECOM_AGENT_ID,
  });
  return `https://open.weixin.qq.com/connect/oauth2/authorize?${query}#wechat_redirect`;
}

function buildWecomOAuthState(params: PortalParams): string {
  const compact = new URLSearchParams();
  if (params.task) compact.set("t", params.task);
  if (params.claim) compact.set("c", params.claim);
  if (params.share) compact.set("s", params.share);
  if (params.note) compact.set("n", params.note);
  if (params.owner) compact.set("o", params.owner);
  if (compact.toString().length <= WECOM_OAUTH_STATE_LIMIT) {
    return compact.toString();
  }
  const sid = crypto.randomUUID().replaceAll("-", "").slice(0, 12);
  if (writeSessionValue(`${WECOM_OAUTH_SID_PREFIX}:${sid}`, params)) {
    return `sid=${sid}`;
  }
  const fallback = new URLSearchParams();
  if (params.task) fallback.set("t", params.task);
  if (params.share) fallback.set("s", params.share);
  if (params.owner) fallback.set("o", params.owner);
  return fallback.toString();
}

function restoreParamsFromWecomState(state: string): PortalParams {
  const parsed = new URLSearchParams(state);
  const sid = parsed.get("sid");
  if (sid) {
    const key = `${WECOM_OAUTH_SID_PREFIX}:${sid}`;
    const stored = readSessionValue<PortalParams>(key);
    try {
      window.sessionStorage.removeItem(key);
    } catch {
      // 忽略清理失败
    }
    if (stored?.task || stored?.share) {
      return { ...stored, owner: stored.owner ?? "" };
    }
    return { task: "", claim: "", share: "", note: "", owner: "" };
  }
  return {
    task: parsed.get("t") ?? "",
    claim: parsed.get("c") ?? "",
    share: parsed.get("s") ?? "",
    note: parsed.get("n") ?? "",
    owner: parsed.get("o") ?? "",
  };
}

function isMobilePortalViewport() {
  return (
    typeof window !== "undefined" &&
    window.matchMedia("(max-width: 620px)").matches
  );
}

function statusLabel(item: Assignment) {
  return item.publish_url ? "已回填" : "待发布";
}

const MAX_TASK_RESULT_SCREENSHOTS = 9;
const PUBLISH_BACKFILL_SUCCESS = "这篇笔记的发布记录回填成功啦～";

function toastClassName(message: string) {
  return message === PUBLISH_BACKFILL_SUCCESS ? "toast success" : "toast";
}

function resultScreenshotKeys(value: string | null) {
  const text = String(value ?? "").trim();
  if (!text) return [];
  if (text.startsWith("task-results/")) return [text];
  try {
    const parsed = JSON.parse(text) as unknown;
    return Array.isArray(parsed)
      ? parsed.filter(
          (item): item is string =>
            typeof item === "string" && item.startsWith("task-results/"),
        )
      : [];
  } catch {
    return [];
  }
}

function creatorScreenshotDueAt(publishTime?: string | null) {
  if (!publishTime) return null;
  const date = parseStoredDate(publishTime);
  if (Number.isNaN(date.getTime())) return null;
  date.setDate(date.getDate() + 7);
  return date.toISOString();
}

function imageExtension(contentType: string) {
  const extensionByType: Record<string, string> = {
    "image/avif": "avif",
    "image/gif": "gif",
    "image/jpeg": "jpg",
    "image/png": "png",
    "image/webp": "webp",
  };
  return extensionByType[contentType] ?? "jpg";
}

function safeFileBase(item: Assignment) {
  return (
    item.title.replace(/[\\/:*?"<>|]/g, "").trim().slice(0, 30) ||
    `笔记-${item.source_row ?? "配图"}`
  );
}

function PlatformBadge({
  platform,
  compact = false,
  logoOnly = false,
}: {
  platform: "小红书" | "抖音";
  compact?: boolean;
  logoOnly?: boolean;
}) {
  return (
    <span
      className={`platform-badge ${compact ? "compact" : ""} ${logoOnly ? "logo-only" : ""}`}
      aria-label={logoOnly ? platform : undefined}
    >
      <span className={`platform-logo ${platform === "抖音" ? "douyin" : "xiaohongshu"}`} aria-hidden="true">
        {platform === "抖音" ? (
          <svg viewBox="0 0 24 24" focusable="false">
            <path className="douyin-cyan" d="M14.2 3.2v9.5a4.7 4.7 0 1 1-3.4-4.5v2.7a2.1 2.1 0 1 0 .8 1.7V3.2h2.6Zm0 0c.4 2.4 2 3.8 4.3 4.1V10c-1.7-.1-3.2-.7-4.3-1.7V3.2Z" />
            <path className="douyin-red" d="M15.2 2.5V12a4.7 4.7 0 1 1-3.4-4.5v2.7a2.1 2.1 0 1 0 .8 1.7V2.5h2.6Zm0 0c.4 2.4 2 3.8 4.3 4.1v2.7c-1.7-.1-3.2-.7-4.3-1.7V2.5Z" />
            <path className="douyin-white" d="M14.7 2.9v9.5a4.7 4.7 0 1 1-3.4-4.5v2.7a2.1 2.1 0 1 0 .8 1.7V2.9h2.6Zm0 0c.4 2.4 2 3.8 4.3 4.1v2.7c-1.7-.1-3.2-.7-4.3-1.7V2.9Z" />
          </svg>
        ) : (
          <b>小红书</b>
        )}
      </span>
      {!logoOnly && <span>{platform}</span>}
    </span>
  );
}

function exactArrayBuffer(bytes: Uint8Array) {
  const copy = new Uint8Array(bytes.byteLength);
  copy.set(bytes);
  return copy.buffer;
}

function downloadBlob(blob: Blob, fileName: string) {
  const objectUrl = URL.createObjectURL(blob);
  const anchor = document.createElement("a");
  anchor.href = objectUrl;
  anchor.download = fileName;
  document.body.appendChild(anchor);
  anchor.click();
  anchor.remove();
  window.setTimeout(() => URL.revokeObjectURL(objectUrl), 1000);
}

async function compressScreenshot(file: File) {
  if (file.size < 900_000 || !file.type.startsWith("image/")) return file;
  const bitmap = await createImageBitmap(file);
  const maxEdge = 1800;
  const scale = Math.min(1, maxEdge / Math.max(bitmap.width, bitmap.height));
  const canvas = document.createElement("canvas");
  canvas.width = Math.max(1, Math.round(bitmap.width * scale));
  canvas.height = Math.max(1, Math.round(bitmap.height * scale));
  const context = canvas.getContext("2d");
  if (!context) {
    bitmap.close();
    return file;
  }
  context.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
  bitmap.close();
  const blob = await new Promise<Blob | null>((resolve) =>
    canvas.toBlob(resolve, "image/jpeg", 0.84),
  );
  if (!blob) return file;
  return new File([blob], `${file.name.replace(/\.[^.]+$/, "")}.jpg`, {
    type: "image/jpeg",
  });
}

function useFilePreview(file: File | null) {
  const previewUrl = useMemo(
    () => (file ? URL.createObjectURL(file) : ""),
    [file],
  );
  useEffect(
    () => () => {
      if (previewUrl) URL.revokeObjectURL(previewUrl);
    },
    [previewUrl],
  );
  return previewUrl;
}

function ImageLightbox({
  image,
  onClose,
}: {
  image: { src: string; alt: string } | null;
  onClose: () => void;
}) {
  useEffect(() => {
    if (!image) return;
    const onKeyDown = (event: KeyboardEvent) => {
      if (event.key === "Escape") onClose();
    };
    document.addEventListener("keydown", onKeyDown);
    const previousOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKeyDown);
      document.body.style.overflow = previousOverflow;
    };
  }, [image, onClose]);
  if (!image) return null;
  return (
    <div
      className="image-lightbox"
      role="dialog"
      aria-modal="true"
      aria-label={image.alt}
      onMouseDown={onClose}
    >
      <div
        className="image-lightbox-card"
        onMouseDown={(event) => event.stopPropagation()}
      >
        <div className="image-lightbox-heading">
          <strong>{image.alt}</strong>
          <button type="button" onClick={onClose}>关闭</button>
        </div>
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img src={image.src} alt={image.alt} />
      </div>
    </div>
  );
}

export default function Home() {
  const [taskToken, setTaskToken] = useState("");
  const [claimToken, setClaimToken] = useState("");
  const [delegationToken, setDelegationToken] = useState("");
  const [selectedId, setSelectedId] = useState("");
  const [ownerPartnerId, setOwnerPartnerId] = useState("");
  const [payload, setPayload] = useState<TaskPayload | null>(null);
  const [loading, setLoading] = useState(true);
  const [working, setWorking] = useState(false);
  const [error, setError] = useState("");
  const [toast, setToast] = useState("");
  const [claimantName, setClaimantName] = useState("");
  const [quantity, setQuantity] = useState(1);
  const [publishUrl, setPublishUrl] = useState("");
  const [screenshot, setScreenshot] = useState<File | null>(null);
  const [taskResultScreenshots, setTaskResultScreenshots] = useState<File[]>([]);
  const [creatorScreenshot, setCreatorScreenshot] = useState<File | null>(null);
  const [creatorExposure, setCreatorExposure] = useState("");
  const [creatorViews, setCreatorViews] = useState("");
  const [entryMode, setEntryMode] = useState<"claim" | "recover">("claim");
  const [recoveredClaims, setRecoveredClaims] = useState<RecoveredClaim[]>([]);
  const [wecomIdentity, setWecomIdentity] = useState<WecomPortalIdentity | null>(
    null,
  );
  const [manualEntry, setManualEntry] = useState(false);
  const [adminOrigin, setAdminOrigin] = useState("");
  const [downloadingImage, setDownloadingImage] = useState<number | null>(null);
  const [batchDownloading, setBatchDownloading] = useState(false);
  const [batchWorkbookWorking, setBatchWorkbookWorking] = useState(false);
  const [creatorWorking, setCreatorWorking] = useState(false);
  const [creatorStage, setCreatorStage] = useState("");
  const [selectedForShare, setSelectedForShare] = useState<string[]>([]);
  const [shareLabel, setShareLabel] = useState("");
  const [shareComposerOpen, setShareComposerOpen] = useState(false);
  const [shareWorking, setShareWorking] = useState(false);
  const [previewImage, setPreviewImage] = useState<{
    src: string;
    alt: string;
  } | null>(null);
  const [noteContentCollapsed, setNoteContentCollapsed] = useState(false);
  const submitCardRef = useRef<HTMLFormElement | null>(null);
  const batchWorkbookInputRef = useRef<HTMLInputElement | null>(null);
  const publishScreenshotPreview = useFilePreview(screenshot);
  const creatorScreenshotPreview = useFilePreview(creatorScreenshot);
  const taskResultPreviews = useMemo(
    () =>
      taskResultScreenshots.map((file) => ({
        file,
        url: URL.createObjectURL(file),
      })),
    [taskResultScreenshots],
  );

  useEffect(
    () => () => {
      taskResultPreviews.forEach((preview) => URL.revokeObjectURL(preview.url));
    },
    [taskResultPreviews],
  );

  const updateUrl = useCallback(
    (nextClaim: string, nextNote = "", nextDelegation = "") => {
      const url = new URL(window.location.href);
      if (nextClaim) url.searchParams.set("claim", nextClaim);
      else url.searchParams.delete("claim");
      if (nextDelegation) url.searchParams.set("share", nextDelegation);
      else url.searchParams.delete("share");
      if (nextNote) url.searchParams.set("note", nextNote);
      else url.searchParams.delete("note");
      if (nextDelegation) url.searchParams.delete("task");
      window.history.replaceState({}, "", url);
    },
    [],
  );

  const loadTask = useCallback(async (
    task: string,
    claim: string,
    delegation = "",
  ) => {
    try {
      setLoading(true);
      setError("");
      const params = new URLSearchParams();
      if (task) params.set("task", task);
      if (claim) params.set("claim", claim);
      if (delegation) params.set("share", delegation);
      const response = await fetch(`${partnerApi("/api/partner")}?${params}`, {
        cache: "no-store",
      });
      const result = (await response.json()) as TaskPayload & { error?: string };
      if (!response.ok) throw new Error(result.error || "暂时无法打开任务");
      setPayload(result);
      if (result.claim) setClaimantName(result.claim.claimantName);
    } catch (reason) {
      setError(reason instanceof Error ? reason.message : "暂时无法打开任务");
    } finally {
      setLoading(false);
    }
  }, []);

  const exchangeWecomIdentity = useCallback(
    async (code: string, restored: PortalParams) => {
      try {
        const response = await fetch(partnerApi("/api/wecom-oauth"), {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ code }),
        });
        const result = (await response.json()) as {
          userType?: string;
          identityTicket?: string;
          displayName?: string;
          expiresIn?: number;
          error?: string;
        };
        if (
          response.ok &&
          (result.userType === "external" || result.userType === "internal") &&
          result.identityTicket
        ) {
          const identity: WecomPortalIdentity = {
            ticket: result.identityTicket,
            name: result.displayName || "企微客户",
            expiresAt:
              Date.now() +
              Math.max(60, (result.expiresIn ?? 1800) - 60) * 1_000,
          };
          writeSessionValue(WECOM_IDENTITY_SESSION_KEY, identity);
          setWecomIdentity(identity);
          setManualEntry(false);
          setToast(
            result.userType === "internal"
              ? `企业内部身份已确认：${identity.name}`
              : `企微身份已确认：${identity.name}`,
          );
        } else {
          markSessionFlag(WECOM_AUTH_FAILED_KEY);
          setToast(
            result.userType === "internal"
              ? "当前为企业内部成员身份，请手动输入微信号领取"
              : result.error || "企微授权失败，请手动输入微信号",
          );
        }
      } catch {
        markSessionFlag(WECOM_AUTH_FAILED_KEY);
        setToast("企微授权失败，请手动输入微信号");
      }
      setTaskToken(restored.task);
      setClaimToken(restored.claim);
      setDelegationToken(restored.share);
      setSelectedId(restored.note);
      setOwnerPartnerId(restored.owner);
      if (!restored.task && !restored.share) {
        setLoading(false);
        setError("任务链接不完整，请向运营重新获取");
        return;
      }
      await loadTask(restored.task, restored.claim, restored.share);
    },
    [loadTask],
  );

  useEffect(() => {
    const timer = window.setTimeout(() => {
      setAdminOrigin(resolveAdminOrigin());
      const params = new URLSearchParams(window.location.search);
      const oauthCode = params.get("code") ?? "";
      if (oauthCode) {
        const restored = restoreParamsFromWecomState(params.get("state") ?? "");
        const cleaned = new URL(window.location.href);
        cleaned.searchParams.delete("code");
        cleaned.searchParams.delete("state");
        window.history.replaceState({}, "", cleaned);
        void exchangeWecomIdentity(oauthCode, restored);
        return;
      }
      const cachedIdentity = loadWecomIdentity();
      if (cachedIdentity) setWecomIdentity(cachedIdentity);
      const task = params.get("task") ?? "";
      const claim = params.get("claim") ?? "";
      const delegation = params.get("share") ?? "";
      const note = params.get("note") ?? "";
      const owner = params.get("owner") ?? "";
      setTaskToken(task);
      setClaimToken(claim);
      setDelegationToken(delegation);
      setSelectedId(note);
      setOwnerPartnerId(owner);
      if (!task && !delegation) {
        setLoading(false);
        setError("任务链接不完整，请向运营重新获取");
        return;
      }
      if (
        WECOM_OAUTH_ENABLED &&
        !cachedIdentity &&
        !hasSessionFlag(WECOM_AUTH_FAILED_KEY) &&
        isWecomEmbeddedBrowser()
      ) {
        window.location.replace(
          buildWecomAuthorizeUrl(
            buildWecomOAuthState({
              task,
              claim,
              share: delegation,
              note,
              owner,
            }),
          ),
        );
        return;
      }
      void loadTask(task, claim, delegation);
    }, 0);
    return () => window.clearTimeout(timer);
  }, [loadTask, exchangeWecomIdentity]);

  useEffect(() => {
    if (!toast) return;
    const timer = window.setTimeout(() => setToast(""), 2600);
    return () => window.clearTimeout(timer);
  }, [toast]);

  const activeBatch = payload?.claim ?? payload?.delegation ?? null;
  const selected = useMemo(
    () => activeBatch?.assignments.find((item) => item.id === selectedId) ?? null,
    [activeBatch, selectedId],
  );

  useEffect(() => {
    if (!selected) return;
    const timer = window.setTimeout(() => {
      setPublishUrl(selected.publish_url ?? "");
      setScreenshot(null);
      setTaskResultScreenshots([]);
      setCreatorScreenshot(null);
      setCreatorExposure(
        selected.exposure === null ? "" : String(selected.exposure),
      );
      setCreatorViews(selected.views === null ? "" : String(selected.views));
      setNoteContentCollapsed(
        Boolean(selected.publish_url) && isMobilePortalViewport(),
      );
    }, 0);
    return () => window.clearTimeout(timer);
  }, [selected]);

  const claimNotes = async (event: FormEvent) => {
    event.preventDefault();
    try {
      setWorking(true);
      const response = await fetch(partnerApi("/api/partner"), {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          action: "claim",
          taskToken,
          claimantIdentifier: claimantName,
          ...(wecomIdentity && !manualEntry
            ? { identityTicket: wecomIdentity.ticket }
            : {}),
          ...(ownerPartnerId ? { owner: ownerPartnerId } : {}),
          quantity,
        }),
      });
      const result = (await response.json()) as {
        claimToken?: string;
        claimedCount?: number;
        error?: string;
      };
      if (!response.ok || !result.claimToken) {
        throw new Error(result.error || "领取失败");
      }
      setClaimToken(result.claimToken);
      setDelegationToken("");
      updateUrl(result.claimToken);
      await loadTask(taskToken, result.claimToken);
      setToast(`已领取 ${result.claimedCount} 篇，逐篇发布即可`);
    } catch (reason) {
      setToast(reason instanceof Error ? reason.message : "领取失败");
    } finally {
      setWorking(false);
    }
  };

  const openRecoveredClaim = async (nextClaimToken: string) => {
    setClaimToken(nextClaimToken);
    setDelegationToken("");
    setSelectedId("");
    setShareComposerOpen(false);
    setSelectedForShare([]);
    updateUrl(nextClaimToken);
    await loadTask(taskToken, nextClaimToken);
  };

  const recoverClaims = async (event: FormEvent) => {
    event.preventDefault();
    try {
      setWorking(true);
      const response = await fetch(partnerApi("/api/partner"), {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          action: "recover",
          taskToken,
          claimantIdentifier: claimantName,
          ...(wecomIdentity && !manualEntry
            ? { identityTicket: wecomIdentity.ticket }
            : {}),
        }),
      });
      const result = (await response.json()) as {
        claims?: RecoveredClaim[];
        error?: string;
      };
      if (!response.ok || !result.claims?.length) {
        throw new Error(result.error || "没有找到领取记录");
      }
      setRecoveredClaims(result.claims);
      if (result.claims.length === 1) {
        await openRecoveredClaim(result.claims[0].claimToken);
      }
    } catch (reason) {
      setToast(reason instanceof Error ? reason.message : "领取记录查找失败");
    } finally {
      setWorking(false);
    }
  };

  const showRecovery = async () => {
    setEntryMode("recover");
    setRecoveredClaims([]);
    setClaimToken("");
    setDelegationToken("");
    setSelectedId("");
    setShareComposerOpen(false);
    setSelectedForShare([]);
    updateUrl("");
    await loadTask(taskToken, "");
  };

  const noteImageUrl = (item: Assignment, imageIndex: number) => {
    const params = new URLSearchParams({
      distribution: item.id,
      index: String(imageIndex),
    });
    if (delegationToken) params.set("share", delegationToken);
    else {
      params.set("task", taskToken);
      params.set("claim", claimToken);
    }
    return `${adminOrigin}/api/partner-image?${params}`;
  };

  const recoveryExampleImageUrl = (imageIndex: number) => {
    if (!selected) return "";
    const params = new URLSearchParams({
      distribution: selected.id,
      index: String(imageIndex),
      kind: "task-example",
    });
    if (delegationToken) params.set("share", delegationToken);
    else {
      params.set("task", taskToken);
      params.set("claim", claimToken);
    }
    return `${adminOrigin}/api/partner-image?${params}`;
  };

  const noteVideoUrl = (
    item: Assignment,
    videoIndex: number,
    download = false,
  ) => {
    const params = new URLSearchParams({
      distribution: item.id,
      index: String(videoIndex),
      kind: "video",
    });
    if (download) params.set("download", "1");
    if (delegationToken) params.set("share", delegationToken);
    else {
      params.set("task", taskToken);
      params.set("claim", claimToken);
    }
    return `${adminOrigin}/api/partner-image?${params}`;
  };

  const taskResultImageUrl = (item: Assignment, imageIndex: number) => {
    const params = new URLSearchParams({
      distribution: item.id,
      index: String(imageIndex),
      kind: "result",
    });
    if (delegationToken) params.set("share", delegationToken);
    else {
      params.set("task", taskToken);
      params.set("claim", claimToken);
    }
    return `${adminOrigin}/api/partner-image?${params}`;
  };

  const evidenceImageUrl = (
    item: Assignment,
    kind: "publish" | "creator",
  ) => {
    const params = new URLSearchParams({
      distribution: item.id,
      index: "1",
      kind,
    });
    const evidenceKey =
      kind === "publish"
        ? item.publish_screenshot_key
        : item.creator_screenshot_key;
    if (evidenceKey) params.set("v", evidenceKey);
    if (delegationToken) params.set("share", delegationToken);
    else {
      params.set("task", taskToken);
      params.set("claim", claimToken);
    }
    return `${adminOrigin}/api/partner-image?${params}`;
  };

  const openNote = (item: Assignment) => {
    setSelectedId(item.id);
    updateUrl(claimToken, item.id, delegationToken);
  };

  const closeNote = () => {
    setSelectedId("");
    updateUrl(claimToken, "", delegationToken);
  };

  const copyText = async (value: string, successMessage: string) => {
    try {
      await navigator.clipboard.writeText(value);
      setToast(successMessage);
    } catch {
      setToast("复制失败，请长按对应文字复制");
    }
  };

  const delegationUrl = (shareToken: string) => {
    const url = new URL(window.location.href);
    url.search = "";
    url.hash = "";
    url.searchParams.set("share", shareToken);
    return url.toString();
  };

  const toggleShareSelection = (distributionId: string) => {
    setSelectedForShare((current) =>
      current.includes(distributionId)
        ? current.filter((id) => id !== distributionId)
        : [...current, distributionId],
    );
  };

  const createDelegation = async (event: FormEvent) => {
    event.preventDefault();
    if (!payload?.claim || selectedForShare.length === 0) return;
    try {
      setShareWorking(true);
      const response = await fetch(partnerApi("/api/partner"), {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          action: "create_delegation",
          taskToken,
          claimToken,
          delegationLabel: shareLabel,
          distributionIds: selectedForShare,
        }),
      });
      const result = (await response.json()) as {
        delegation?: {
          id: string;
          label: string;
          shareToken: string;
          quantity: number;
        };
        error?: string;
      };
      if (!response.ok || !result.delegation) {
        throw new Error(result.error || "分享链接生成失败");
      }
      await copyText(
        delegationUrl(result.delegation.shareToken),
        `已生成给 ${result.delegation.label} 的分享链接并复制`,
      );
      setSelectedForShare([]);
      setShareLabel("");
      setShareComposerOpen(false);
      await loadTask(taskToken, claimToken);
    } catch (reason) {
      setToast(reason instanceof Error ? reason.message : "分享链接生成失败");
    } finally {
      setShareWorking(false);
    }
  };

  const revokeDelegation = async (bundle: DelegationSummary) => {
    if (!window.confirm(`确认撤销“${bundle.label}”的分享链接吗？`)) return;
    try {
      setShareWorking(true);
      const response = await fetch(partnerApi("/api/partner"), {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          action: "revoke_delegation",
          taskToken,
          claimToken,
          delegationBundleId: bundle.id,
        }),
      });
      const result = (await response.json()) as {
        revoked?: boolean;
        error?: string;
      };
      if (!response.ok || !result.revoked) {
        throw new Error(result.error || "撤销失败");
      }
      await loadTask(taskToken, claimToken);
      setSelectedForShare([]);
      setToast("分享链接已撤销，相关笔记可以重新转派");
    } catch (reason) {
      setToast(reason instanceof Error ? reason.message : "撤销失败");
    } finally {
      setShareWorking(false);
    }
  };

  const batchWorkbookParams = () => {
    const params = new URLSearchParams();
    if (delegationToken) params.set("share", delegationToken);
    else {
      params.set("task", taskToken);
      params.set("claim", claimToken);
    }
    return params;
  };

  const exportBatchWorkbook = async () => {
    try {
      setBatchWorkbookWorking(true);
      const response = await fetch(
        `${partnerApi("/api/partner-batch-workbook")}?${batchWorkbookParams()}`,
        { cache: "no-store" },
      );
      if (!response.ok) {
        const result = (await response.json()) as { error?: string };
        throw new Error(result.error || "Excel导出失败");
      }
      const disposition = response.headers.get("Content-Disposition") || "";
      const encodedName = disposition.match(/filename\*=UTF-8''([^;]+)/i)?.[1];
      const fileName = encodedName
        ? decodeURIComponent(encodedName)
        : `${payload?.task.name || "领取笔记"}-批量回填.xlsx`;
      downloadBlob(await response.blob(), fileName);
      setToast("Excel已导出，填写后从本页面上传即可批量回填");
    } catch (reason) {
      setToast(reason instanceof Error ? reason.message : "Excel导出失败");
    } finally {
      setBatchWorkbookWorking(false);
    }
  };

  const importBatchWorkbook = async (event: ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    event.target.value = "";
    if (!file) return;
    try {
      setBatchWorkbookWorking(true);
      let uploadBody: Blob = file;
      let compacted = false;
      if (file.size > PARTNER_BATCH_UPLOAD_MAX_BYTES) {
        setToast("文件较大，正在保留回填截图并精简原图…");
        await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
        const compactedWorkbook = compactPartnerBatchWorkbookForUpload(
          new Uint8Array(await file.arrayBuffer()),
        );
        if (compactedWorkbook.bytes.byteLength > PARTNER_BATCH_UPLOAD_MAX_BYTES) {
          throw new Error("精简后的回填表仍超过80MB，请重新导出最新版回填表");
        }
        uploadBody = new Blob([exactArrayBuffer(compactedWorkbook.bytes)], {
          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        });
        compacted = true;
      }
      const form = new FormData();
      form.set("file", uploadBody, file.name);
      form.set("taskToken", taskToken);
      form.set("claimToken", claimToken);
      form.set("delegationToken", delegationToken);
      const response = await fetch(partnerApi("/api/partner-batch-workbook"), {
        method: "POST",
        body: form,
      });
      const contentType = response.headers.get("Content-Type") || "";
      const result = (contentType.includes("application/json")
        ? await response.json()
        : {
            error:
              response.status === 413
                ? "回填表超过上传限制，请重新导出最新版回填表"
                : "批量回填服务暂时不可用，请稍后重试",
          }) as {
        error?: string;
        updatedRows?: number;
        publishedCount?: number;
        noteScreenshotCount?: number;
        analysisScreenshotCount?: number;
      };
      if (!response.ok) throw new Error(result.error || "批量回填失败");
      await loadTask(taskToken, claimToken, delegationToken);
      const details = [
        result.publishedCount
          ? `${result.publishedCount}篇发布信息`
          : "",
        result.noteScreenshotCount
          ? `${result.noteScreenshotCount}张笔记截图`
          : "",
        result.analysisScreenshotCount
          ? `${result.analysisScreenshotCount}张数据分析截图`
          : "",
      ].filter(Boolean);
      setToast(
        details.length > 0
          ? `${compacted ? "文件已自动精简，" : ""}已更新${details.join("、")}`
          : `${compacted ? "文件已自动精简，" : ""}表格已读取，没有需要更新的数据`,
      );
    } catch (reason) {
      setToast(reason instanceof Error ? reason.message : "批量回填失败");
    } finally {
      setBatchWorkbookWorking(false);
    }
  };

  const prepareImage = async (item: Assignment, imageIndex: number) => {
    const response = await fetch(noteImageUrl(item, imageIndex));
    if (!response.ok) throw new Error("图片读取失败");
    const blob = await response.blob();
    const extension = imageExtension(blob.type);
    const fileName = `${safeFileBase(item)}-图片${imageIndex}.${extension}`;
    const buffer = await blob.arrayBuffer();
    return {
      bytes: new Uint8Array(buffer),
      file: new File([buffer], fileName, { type: blob.type || "image/jpeg" }),
    };
  };

  const shareImages = async (files: File[], title: string) => {
    if (
      typeof navigator.share !== "function" ||
      typeof navigator.canShare !== "function" ||
      !navigator.canShare({ files })
    ) {
      return false;
    }
    await navigator.share({ files, title });
    return true;
  };

  const downloadImage = async (item: Assignment, imageIndex: number) => {
    try {
      setDownloadingImage(imageIndex);
      const prepared = await prepareImage(item, imageIndex);
      try {
        if (await shareImages([prepared.file], item.title)) {
          setToast("请在系统菜单中选择“存储图像”");
          return;
        }
      } catch (reason) {
        if (reason instanceof DOMException && reason.name === "AbortError") return;
      }
      downloadBlob(
        new Blob([exactArrayBuffer(prepared.bytes)], {
          type: prepared.file.type,
        }),
        prepared.file.name,
      );
      setToast(`图片 ${imageIndex} 已下载到文件`);
    } catch {
      setToast("图片下载失败，请点击图片后保存");
    } finally {
      setDownloadingImage(null);
    }
  };

  const downloadAllImages = async (item: Assignment) => {
    try {
      setBatchDownloading(true);
      const prepared = await Promise.all(
        item.images.map((image) => prepareImage(item, image.index)),
      );
      const files = prepared.map((image) => image.file);
      try {
        if (await shareImages(files, `${item.title}｜全部配图`)) {
          setToast("请在系统菜单中选择“存储图像”批量保存");
          return;
        }
      } catch (reason) {
        if (reason instanceof DOMException && reason.name === "AbortError") return;
      }
      const archive = zipSync(
        Object.fromEntries(
          prepared.map((image) => [image.file.name, image.bytes]),
        ),
        { level: 0 },
      );
      downloadBlob(
        new Blob([exactArrayBuffer(archive)], { type: "application/zip" }),
        `${safeFileBase(item)}-全部配图.zip`,
      );
      setToast("当前浏览器不支持直接存相册，已下载全部配图 ZIP");
    } catch {
      setToast("批量保存失败，请尝试用系统浏览器打开");
    } finally {
      setBatchDownloading(false);
    }
  };

  const chooseScreenshot = (event: ChangeEvent<HTMLInputElement>) => {
    setScreenshot(event.target.files?.[0] ?? null);
  };

  const chooseTaskResultScreenshots = (event: ChangeEvent<HTMLInputElement>) => {
    const incoming = Array.from(event.target.files ?? []);
    if (incoming.length === 0) return;
    const existingCount = selected
      ? resultScreenshotKeys(selected.result_screenshot_key).length
      : 0;
    setTaskResultScreenshots((current) => {
      const merged = [...current, ...incoming].filter(
        (file, index, files) =>
          files.findIndex(
            (candidate) =>
              candidate.name === file.name &&
              candidate.size === file.size &&
              candidate.lastModified === file.lastModified,
          ) === index,
      );
      const allowed = Math.max(0, MAX_TASK_RESULT_SCREENSHOTS - existingCount);
      if (merged.length > allowed) {
        setToast(`每份任务最多上传${MAX_TASK_RESULT_SCREENSHOTS}张截图`);
      }
      return merged.slice(0, allowed);
    });
    event.target.value = "";
  };

  const removeTaskResultScreenshot = (target: File) => {
    setTaskResultScreenshots((current) =>
      current.filter((file) => file !== target),
    );
  };

  const chooseCreatorScreenshot = (event: ChangeEvent<HTMLInputElement>) => {
    setCreatorScreenshot(event.target.files?.[0] ?? null);
  };

  const uploadEvidence = async (
    selectedItem: Assignment,
    file: File,
    kind: "publish" | "creator-center" | "task-result",
  ): Promise<{ exposure?: number | null; views?: number | null; ocrStatus?: string }> => {
    const compressed = await compressScreenshot(file);
    const headers: Record<string, string> = {
      "Content-Type": compressed.type || "image/jpeg",
      "X-KOC-Distribution": selectedItem.id,
      "X-KOC-File-Name": encodeURIComponent(compressed.name),
      "X-KOC-Upload-Kind": kind,
    };
    if (delegationToken) {
      headers["X-KOC-Delegation"] = delegationToken;
    } else {
      headers["X-KOC-Task"] = taskToken;
      headers["X-KOC-Claim"] = claimToken;
    }
    const uploadResponse = await fetch(partnerApi("/api/partner-upload"), {
      method: "POST",
      headers,
      body: compressed,
    });
    const uploadResult = (await uploadResponse.json()) as {
      error?: string;
      exposure?: number | null;
      views?: number | null;
      ocrStatus?: string;
    };
    if (!uploadResponse.ok) {
      throw new Error(
        uploadResult.error ||
          (kind === "creator-center"
            ? "创作者中心截图上传失败"
            : kind === "task-result"
              ? "任务截图上传失败"
            : "发布截图上传失败"),
      );
    }
    return uploadResult;
  };

  const submitNote = async (event: FormEvent) => {
    event.preventDefault();
    if (!selected) return;
    const isFirstBackfill = !selected.publish_url;
    try {
      setWorking(true);
      if (screenshot) {
        await uploadEvidence(selected, screenshot, "publish");
      } else if (!selected.publish_screenshot_key) {
        throw new Error("请上传这篇笔记的发布截图");
      }

      const response = await fetch(partnerApi("/api/partner"), {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          action: "submit",
          taskToken,
          claimToken,
          delegationToken,
          distributionId: selected.id,
          publishUrl,
        }),
      });
      const result = (await response.json()) as { error?: string };
      if (!response.ok) throw new Error(result.error || "回填失败");
      await loadTask(taskToken, claimToken, delegationToken);
      setScreenshot(null);
      if (isFirstBackfill && isMobilePortalViewport()) {
        setNoteContentCollapsed(true);
        window.setTimeout(() => {
          submitCardRef.current?.scrollIntoView({
            behavior: "smooth",
            block: "start",
          });
        }, 120);
      }
      setToast(PUBLISH_BACKFILL_SUCCESS);
    } catch (reason) {
      setToast(reason instanceof Error ? reason.message : "回填失败");
    } finally {
      setWorking(false);
    }
  };

  const submitRecoveryScreenshots = async (event?: FormEvent) => {
    event?.preventDefault();
    if (!selected) return;
    if (!selected.publish_url) {
      setToast("请先回填这篇笔记的发布链接，再提交回收截图");
      return;
    }
    try {
      setWorking(true);
      const existingScreenshots = resultScreenshotKeys(
        selected.result_screenshot_key,
      );
      if (taskResultScreenshots.length > 0) {
        for (const file of taskResultScreenshots) {
          await uploadEvidence(selected, file, "task-result");
          setTaskResultScreenshots((current) =>
            current.filter((candidate) => candidate !== file),
          );
        }
      } else if (existingScreenshots.length === 0) {
        throw new Error("请上传发布后的笔记截图");
      }
      const response = await fetch(partnerApi("/api/partner"), {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          action: "submit_screenshot_result",
          taskToken,
          claimToken,
          delegationToken,
          distributionId: selected.id,
        }),
      });
      const result = (await response.json()) as { error?: string };
      if (!response.ok) throw new Error(result.error || "截图提交失败");
      await loadTask(taskToken, claimToken, delegationToken);
      setTaskResultScreenshots([]);
      setToast(
        taskResultScreenshots.length > 1
          ? `${taskResultScreenshots.length}张回收截图已提交`
          : "回收截图已提交",
      );
    } catch (reason) {
      setToast(reason instanceof Error ? reason.message : "截图提交失败");
    } finally {
      setWorking(false);
    }
  };

  const submitCreatorData = async () => {
    if (!selected) return;
    if (!creatorScreenshot && !selected.creator_screenshot_key) {
      setToast("请选择创作者中心截图");
      return;
    }
    try {
      setCreatorWorking(true);
      let exposureValue = creatorExposure;
      let viewsValue = creatorViews;
      if (creatorScreenshot) {
        setCreatorStage("正在上传截图…");
        const ocrResult = await uploadEvidence(
          selected,
          creatorScreenshot,
          "creator-center",
        );
        if (typeof ocrResult.exposure === "number") {
          exposureValue = String(ocrResult.exposure);
          setCreatorExposure(exposureValue);
        }
        if (typeof ocrResult.views === "number") {
          viewsValue = String(ocrResult.views);
          setCreatorViews(viewsValue);
        }
        if (ocrResult.ocrStatus === "success") {
          setCreatorStage("已识别截图数据，正在保存…");
        }
      }
      if (!/^\d{1,12}$/.test(exposureValue) || !/^\d{1,12}$/.test(viewsValue)) {
        throw new Error("未识别到完整数据，请填写曝光量和阅读量");
      }
      setCreatorStage("正在保存数据…");
      const response = await fetch(partnerApi("/api/partner"), {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          action: "submit_creator_metrics",
          taskToken,
          claimToken,
          delegationToken,
          distributionId: selected.id,
          exposure: exposureValue,
          views: viewsValue,
        }),
      });
      const result = (await response.json()) as { error?: string };
      if (!response.ok) {
        throw new Error(result.error || "创作者数据提交失败");
      }
      await loadTask(taskToken, claimToken, delegationToken);
      setCreatorScreenshot(null);
      setToast("创作者截图、曝光量和阅读量已提交");
    } catch (reason) {
      setToast(
        reason instanceof Error ? reason.message : "创作者数据提交失败",
      );
    } finally {
      setCreatorWorking(false);
      setCreatorStage("");
    }
  };

  if (loading) {
    return (
      <main className="portal-shell loading-shell">
        <div className="loading-mark">K</div>
        <p>正在打开任务…</p>
      </main>
    );
  }

  if (error || !payload) {
    return (
      <main className="portal-shell">
        <section className="message-card">
          <div className="message-icon">!</div>
          <p className="micro">KOC LOOP</p>
          <h1>暂时无法打开任务</h1>
          <p>{error || "任务不存在"}</p>
          <button onClick={() => window.location.reload()}>重新加载</button>
        </section>
      </main>
    );
  }

  if (selected && activeBatch) {
    const creatorDueAt = creatorScreenshotDueAt(selected.publish_time);
    const creatorDataReady =
      Boolean(selected.creator_screenshot_key) &&
      selected.exposure !== null &&
      selected.views !== null;
    return (
      <main className="portal-shell detail-shell">
        <header className="portal-topbar">
          <div className="portal-brand"><span>K</span><strong>KOC LOOP</strong></div>
          <div className="claimant-chip">
            {payload.claim ? payload.claim.claimantName : "合作社转派 · 无需登录"}
          </div>
        </header>
        <button className="back-link" onClick={closeNote}>← 返回我的笔记</button>
        <div className="detail-grid">
          <article
            className={`note-document ${
              noteContentCollapsed ? "mobile-collapsed" : ""
            }`}
          >
            <div className="mobile-note-summary">
              <div>
                <span>笔记内容已收起</span>
                <strong>{selected.title}</strong>
                <small>
                  {selected.videos.length > 0
                    ? `${selected.videos.length} 个视频`
                    : `${selected.images.length} 张配图`} · 已完成首次回填
                </small>
              </div>
              <button
                type="button"
                aria-expanded={!noteContentCollapsed}
                onClick={() => setNoteContentCollapsed(false)}
              >
                展开笔记内容
              </button>
            </div>
            <div className="note-document-content">
            <div className="note-document-meta">
              <span>笔记 {activeBatch.assignments.findIndex((item) => item.id === selected.id) + 1}</span>
              <PlatformBadge platform={payload.task.platform} compact />
              <span>飞书源行 {selected.source_row ?? "—"}</span>
            </div>
            {selected.publish_url && (
              <button
                type="button"
                className="mobile-note-collapse-trigger"
                onClick={() => setNoteContentCollapsed(true)}
              >
                收起笔记内容
              </button>
            )}
            <div className="note-title-row">
              <h1>{selected.title}</h1>
              <button
                type="button"
                className="inline-copy"
                onClick={() => void copyText(selected.title, "标题已复制")}
              >
                复制标题
              </button>
            </div>
            <div className="document-rule" />
            <div className="document-label-row">
              <p className="document-label">正文与话题</p>
              <button
                type="button"
                className="inline-copy"
                onClick={() => void copyText(selected.body, "文案已复制")}
              >
                复制文案
              </button>
            </div>
            <div className="note-body">{selected.body || "暂无正文"}</div>
            {selected.images.length > 0 && (
              <section className="note-images">
                <div className="note-images-heading">
                  <div>
                    <p className="document-label">发布配图</p>
                    <span>手机优先打开系统保存菜单，其他浏览器会下载文件</span>
                  </div>
                  <div className="note-images-tools">
                    <b>{selected.images.length} 张</b>
                    {selected.images.length > 1 && (
                      <button
                        type="button"
                        disabled={batchDownloading}
                        onClick={() => void downloadAllImages(selected)}
                      >
                        {batchDownloading ? "正在准备…" : "批量保存图片"}
                      </button>
                    )}
                  </div>
                </div>
                <div className="note-image-grid">
                  {selected.images.map((image, index) => (
                    <div className="note-image-card" key={image.index}>
                      <a
                        className="note-image-preview"
                        href={noteImageUrl(selected, image.index)}
                        target="_blank"
                        rel="noreferrer"
                      >
                        {/* Private claim-bound images intentionally bypass the public image optimizer. */}
                        {/* eslint-disable-next-line @next/next/no-img-element */}
                        <img
                          src={noteImageUrl(selected, image.index)}
                          alt={`${selected.title} 配图 ${index + 1}`}
                          width={image.width ?? undefined}
                          height={image.height ?? undefined}
                          loading={index === 0 ? "eager" : "lazy"}
                        />
                      </a>
                      <div className="note-image-actions">
                        <span>图片 {index + 1}</span>
                        <button
                          type="button"
                          disabled={downloadingImage === image.index}
                          onClick={() => void downloadImage(selected, image.index)}
                        >
                          {downloadingImage === image.index ? "下载中…" : "下载原图"}
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              </section>
            )}
            {selected.videos.length > 0 && (
              <section className="note-videos">
                <div className="note-images-heading">
                  <div>
                    <p className="document-label">发布视频</p>
                    <span>点击播放，可使用播放器菜单保存原视频</span>
                  </div>
                  <b>{selected.videos.length} 个</b>
                </div>
                <div className="note-video-grid">
                  {selected.videos.map((video, index) => (
                    <div className="note-video-card" key={video.index}>
                      <video
                        controls
                        preload="metadata"
                        playsInline
                        src={noteVideoUrl(selected, video.index)}
                      />
                      <div className="note-image-actions">
                        <span>视频 {index + 1}</span>
                        <a
                          href={noteVideoUrl(selected, video.index, true)}
                          download={`${safeFileBase(selected)}-视频-${index + 1}.mp4`}
                        >
                          下载视频
                        </a>
                      </div>
                    </div>
                  ))}
                </div>
              </section>
            )}
            </div>
          </article>

          <form ref={submitCardRef} className="submit-card" onSubmit={submitNote}>
            <div className="submit-heading">
              <div>
                <p className="micro">逐篇回填</p>
                <h2>填写这篇笔记的发布信息</h2>
              </div>
              <span className={selected.publish_url ? "done" : "pending"}>
                {statusLabel(selected)}
              </span>
            </div>
            <div className="mapping-note">
              <span>1 : 1</span>
              <p>以下信息只会绑定到当前笔记，不按顺序批量匹配。</p>
            </div>
            <label>
              <span>发布链接</span>
              <input
                type="text"
                inputMode="url"
                value={publishUrl}
                onChange={(event) => setPublishUrl(event.target.value)}
                placeholder={`可粘贴${payload.task.platform}作品链接或整段分享文案`}
                required
              />
              <small className="field-hint">
                系统会自动提取链接，并识别发布账号
              </small>
            </label>
            <div className="evidence-field">
              <span>发布截图</span>
              <div
                className={`screenshot-picker ${
                  screenshot || selected.publish_screenshot_key
                    ? "has-file preview-mode"
                    : ""
                }`}
              >
                {screenshot || selected.publish_screenshot_key ? (
                  <button
                    type="button"
                    className="evidence-preview-button"
                    onClick={() =>
                      setPreviewImage({
                        src:
                          publishScreenshotPreview ||
                          evidenceImageUrl(selected, "publish"),
                        alt: "发布截图",
                      })
                    }
                  >
                    {/* eslint-disable-next-line @next/next/no-img-element */}
                    <img
                      src={
                        publishScreenshotPreview ||
                        evidenceImageUrl(selected, "publish")
                      }
                      alt="发布截图"
                    />
                    <span>点击查看大图</span>
                  </button>
                ) : (
                  <div className="evidence-empty-state">
                    <b>＋</b>
                    <strong>点击上传这篇笔记的发布截图</strong>
                    <small>支持 JPG、PNG，最大8MB</small>
                  </div>
                )}
                <label className="evidence-upload-action">
                  <input type="file" accept="image/*" onChange={chooseScreenshot} />
                  {screenshot || selected.publish_screenshot_key
                    ? "重新选择"
                    : "选择图片"}
                </label>
              </div>
            </div>
            <button
              className="submit-primary"
              disabled={working || !(screenshot || selected.publish_screenshot_key)}
            >
              {working ? "正在提交…" : selected.publish_url ? "更新这篇笔记" : "确认回填这篇笔记"}
            </button>
            {!(screenshot || selected.publish_screenshot_key) && (
              <p className="submitted-at">先上传发布截图，链接回填需以截图为凭证</p>
            )}
            {selected.publish_time && (
              <p className="submitted-at">上次回填：{formatDate(selected.publish_time, true)}</p>
            )}
            {selected.publish_url && (
              <section className="creator-recovery">
                <div className="creator-recovery-heading">
                  <div>
                    <p className="micro">第7天数据回收</p>
                    <h3>上传截图并填写数据</h3>
                  </div>
                  <span className={creatorDataReady ? "done" : ""}>
                    {creatorDataReady ? "已提交" : "待提交"}
                  </span>
                </div>
                <p className="creator-recovery-tip">
                  请在发布满7天后，上传创作者中心数据页完整截图，并填写页面显示的数据。
                  {creatorDueAt && ` 建议上传日期：${formatDate(creatorDueAt)}。`}
                </p>
                <div className="evidence-field compact-field">
                  <span>创作者中心截图</span>
                  <div
                    className={`screenshot-picker compact ${
                      creatorScreenshot || selected.creator_screenshot_key
                        ? "has-file preview-mode"
                        : ""
                    }`}
                  >
                    {creatorScreenshot || selected.creator_screenshot_key ? (
                      <button
                        type="button"
                        className="evidence-preview-button compact-preview"
                        onClick={() =>
                          setPreviewImage({
                            src:
                              creatorScreenshotPreview ||
                              evidenceImageUrl(selected, "creator"),
                            alt: "创作者中心截图",
                          })
                        }
                      >
                        {/* eslint-disable-next-line @next/next/no-img-element */}
                        <img
                          src={
                            creatorScreenshotPreview ||
                            evidenceImageUrl(selected, "creator")
                          }
                          alt="创作者中心截图"
                        />
                        <span>点击查看大图</span>
                      </button>
                    ) : (
                      <div className="evidence-empty-state">
                        <b>＋</b>
                        <strong>点击选择第7天创作者中心截图</strong>
                        <small>上传后自动识别曝光量和阅读量，识别失败可手动填写</small>
                      </div>
                    )}
                    <label className="evidence-upload-action">
                      <input
                        type="file"
                        accept="image/*"
                        onChange={chooseCreatorScreenshot}
                      />
                      {creatorScreenshot || selected.creator_screenshot_key
                        ? "重新选择"
                        : "选择图片"}
                    </label>
                  </div>
                </div>
                <div className="creator-metric-grid">
                  <label>
                    <span>曝光量</span>
                    <input
                      type="number"
                      inputMode="numeric"
                      min="0"
                      step="1"
                      max="999999999999"
                      value={creatorExposure}
                      onChange={(event) => setCreatorExposure(event.target.value)}
                      placeholder="填写截图中的曝光量"
                    />
                  </label>
                  <label>
                    <span>阅读量</span>
                    <input
                      type="number"
                      inputMode="numeric"
                      min="0"
                      step="1"
                      max="999999999999"
                      value={creatorViews}
                      onChange={(event) => setCreatorViews(event.target.value)}
                      placeholder="填写截图中的阅读量"
                    />
                  </label>
                </div>
                <button
                  type="button"
                  className="creator-submit"
                  disabled={
                    creatorWorking ||
                    (!creatorScreenshot && !selected.creator_screenshot_key) ||
                    !creatorExposure ||
                    !creatorViews
                  }
                  onClick={() => void submitCreatorData()}
                >
                  {creatorWorking
                    ? creatorStage || "正在处理…"
                    : creatorDataReady
                      ? "更新创作者数据"
                      : "提交创作者数据"}
                </button>
              </section>
            )}
            {payload.task.recoveryEnabled && (
              <section className="creator-recovery task-recovery">
                <div className="creator-recovery-heading">
                  <div>
                    <p className="micro">截图回收</p>
                    <h3>上传发布后的笔记截图</h3>
                  </div>
                  <span className={selected.result_submitted_at ? "done" : ""}>
                    {selected.result_submitted_at ? "已提交" : "待提交"}
                  </span>
                </div>
                {selected.publish_url && (
                  <p className="creator-recovery-tip">
                    {payload.task.recoveryInstructions || "请提交发布后的笔记截图"}
                    {payload.task.recoveryDueAt
                      ? ` 截止：${formatDate(payload.task.recoveryDueAt)}。`
                      : ""}
                  </p>
                )}
                {selected.publish_url &&
                  (payload.task.recoveryExampleImages?.length ?? 0) > 0 && (
                  <div className="task-result-gallery recovery-example">
                    {payload.task.recoveryExampleImages?.map((image) => (
                      <button
                        type="button"
                        className="task-result-thumb uploaded"
                        key={`recovery-example-${image.index}`}
                        onClick={() =>
                          setPreviewImage({
                            src: recoveryExampleImageUrl(image.index),
                            alt: "回收示例截图",
                          })
                        }
                      >
                        {/* eslint-disable-next-line @next/next/no-img-element */}
                        <img
                          src={recoveryExampleImageUrl(image.index)}
                          alt="回收示例截图"
                        />
                        <span>示例</span>
                      </button>
                    ))}
                  </div>
                )}
                {selected.publish_url ? (
                  <>
                    <div className="evidence-field compact-field">
                      <span className="task-result-label-row">
                        <span>回收截图</span>
                        <small>
                          已选择{" "}
                          {resultScreenshotKeys(selected.result_screenshot_key)
                            .length +
                            taskResultScreenshots.length}
                          /{MAX_TASK_RESULT_SCREENSHOTS} 张
                        </small>
                      </span>
                      <div className="task-result-gallery">
                        {resultScreenshotKeys(selected.result_screenshot_key).map(
                          (_, index) => {
                            const imageUrl = taskResultImageUrl(selected, index + 1);
                            return (
                              <button
                                type="button"
                                className="task-result-thumb uploaded"
                                onClick={() =>
                                  setPreviewImage({
                                    src: imageUrl,
                                    alt: `已上传回收截图 ${index + 1}`,
                                  })
                                }
                                key={`uploaded-${index}`}
                              >
                                {/* eslint-disable-next-line @next/next/no-img-element */}
                                <img
                                  src={imageUrl}
                                  alt={`已上传回收截图 ${index + 1}`}
                                />
                                <span>已上传</span>
                              </button>
                            );
                          },
                        )}
                        {taskResultPreviews.map(({ file, url }, index) => (
                          <div
                            className="task-result-thumb pending-upload"
                            key={`${file.name}-${file.lastModified}`}
                          >
                            {/* eslint-disable-next-line @next/next/no-img-element */}
                            <img src={url} alt={`待上传回收截图 ${index + 1}`} />
                            <button
                              type="button"
                              aria-label={`移除 ${file.name}`}
                              onClick={() => removeTaskResultScreenshot(file)}
                            >
                              ×
                            </button>
                            <span>待提交</span>
                          </div>
                        ))}
                        {resultScreenshotKeys(selected.result_screenshot_key)
                          .length +
                          taskResultScreenshots.length <
                          MAX_TASK_RESULT_SCREENSHOTS && (
                          <div className="task-result-add">
                            <input
                              type="file"
                              accept="image/*"
                              multiple
                              onChange={chooseTaskResultScreenshots}
                            />
                            <b>＋</b>
                            <strong>
                              {taskResultScreenshots.length ||
                              selected.result_screenshot_key
                                ? "继续添加"
                                : "选择截图"}
                            </strong>
                          </div>
                        )}
                      </div>
                      <small className="task-result-hint">
                        支持一次选择或继续追加，最多9张，每张不超过8MB；点击图片可在当前页面查看大图。
                      </small>
                    </div>
                    <button
                      type="button"
                      className="creator-submit"
                      disabled={working}
                      onClick={() => void submitRecoveryScreenshots()}
                    >
                      {working
                        ? "正在提交…"
                        : selected.result_submitted_at
                          ? "更新回收截图"
                          : "确认提交回收截图"}
                    </button>
                    {selected.result_submitted_at && (
                      <p className="submitted-at">
                        上次提交：{formatDate(selected.result_submitted_at, true)}
                      </p>
                    )}
                  </>
                ) : (
                  <p className="creator-recovery-tip">
                    回填发布链接后，这里会开放回收截图上传。
                  </p>
                )}
              </section>
            )}
          </form>
        </div>
        <ImageLightbox image={previewImage} onClose={() => setPreviewImage(null)} />
        {toast && <div className={toastClassName(toast)}>{toast}</div>}
      </main>
    );
  }

  if (activeBatch) {
    const recoveryEnabled = payload.task.recoveryEnabled === true;
    const completed = activeBatch.assignments.filter(
      (item) => item.publish_url,
    ).length;
    const recoverySubmitted = recoveryEnabled
      ? activeBatch.assignments.filter((item) => item.result_submitted_at).length
      : 0;
    const isClaimOwner = Boolean(payload.claim);
    const shareableCount =
      payload.claim?.assignments.filter(
        (item) => !item.publish_url && !item.delegation_bundle_id,
      ).length ?? 0;
    return (
      <main className="portal-shell">
        <header className="portal-topbar">
          <div className="portal-brand"><span>K</span><strong>KOC LOOP</strong></div>
          {payload.claim ? (
            <div className="claim-tools">
              <button onClick={() => void showRecovery()}>找回其他批次</button>
              <div className="claimant-chip">{payload.claim.claimantName}</div>
            </div>
          ) : (
            <div className="claimant-chip">合作社转派 · 无需登录</div>
          )}
        </header>
        <section className="claimed-hero">
          <div>
            <p className="micro">
              {isClaimOwner ? "我的领取任务" : "合作社转派发布包"}
            </p>
            <h1>{payload.task.name}</h1>
            <p className="platform-meta-line">
              <span>{payload.task.brand}</span>
              <PlatformBadge platform={payload.task.platform} compact />
              <span>{formatDate(payload.task.dueAt)}前发布</span>
              {recoveryEnabled && payload.task.recoveryDueAt
                ? ` · 截图回收 ${formatDate(payload.task.recoveryDueAt)}截止`
                : ""}
              {payload.delegation ? ` · ${payload.delegation.label}` : ""}
            </p>
          </div>
          <div className="hero-progress">
            <div className="completion-ring">
              <strong>{completed}/{activeBatch.assignments.length}</strong>
              <span>已回填</span>
            </div>
            {recoveryEnabled && (
              <small className="recovery-progress">
                截图已收 {recoverySubmitted}/{activeBatch.assignments.length}
              </small>
            )}
          </div>
        </section>
        {isClaimOwner && payload.claim?.joinQrCode ? (
          <section className="join-qr-card">
            <div className="join-qr-body">
              <img src={payload.claim.joinQrCode} alt="扫码进任务群二维码" />
              <div>
                <h2>扫码加入任务群</h2>
                <p>用微信扫描二维码进入本任务沟通群，进群后按群内指引发布内容。</p>
              </div>
            </div>
          </section>
        ) : null}
        <section className="notes-section">
          <div className="section-heading">
            <div>
              <h2>
                {isClaimOwner ? "我领取的笔记" : "需要发布的笔记"}
              </h2>
              <p>
                {isClaimOwner
                  ? "可逐篇回填，也可导出Excel填写后批量上传；还可以选择笔记转派给底层KOC"
                  : "打开一篇查看完整内容，发布后逐篇回填"}
              </p>
            </div>
            <div className="section-actions">
              <span>{activeBatch.assignments.length} 篇</span>
              <>
                <button
                  type="button"
                  disabled={batchWorkbookWorking}
                  onClick={() => void exportBatchWorkbook()}
                >
                  {batchWorkbookWorking ? "处理中…" : "导出Excel"}
                </button>
                <button
                  type="button"
                  disabled={batchWorkbookWorking}
                  onClick={() => batchWorkbookInputRef.current?.click()}
                >
                  上传回填表
                </button>
                <input
                  ref={batchWorkbookInputRef}
                  className="batch-workbook-input"
                  type="file"
                  accept=".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                  onChange={(event) => void importBatchWorkbook(event)}
                />
              </>
              {isClaimOwner && (
                <button
                  type="button"
                  className={shareComposerOpen ? "active" : ""}
                  disabled={shareableCount === 0 && !shareComposerOpen}
                  onClick={() => {
                    setShareComposerOpen((current) => !current);
                    setSelectedForShare([]);
                    setShareLabel("");
                  }}
                >
                  {shareComposerOpen ? "取消选择" : "选择笔记并分享"}
                </button>
              )}
            </div>
          </div>
          {payload.claim && shareComposerOpen && (
            <form className="share-composer" onSubmit={createDelegation}>
              <div>
                <p className="micro">合作社转派</p>
                <h3>生成免登录分享链接</h3>
                <p>
                  勾选待发布笔记，底层KOC打开链接即可查看内容并逐篇回填。
                </p>
              </div>
              <label>
                <span>接收人备注</span>
                <input
                  value={shareLabel}
                  maxLength={24}
                  onChange={(event) => setShareLabel(event.target.value)}
                  placeholder="例如：A、小王"
                  required
                />
              </label>
              <div className="share-composer-action">
                <strong>已选 {selectedForShare.length} 篇</strong>
                <button
                  className="share-primary"
                  disabled={
                    shareWorking ||
                    selectedForShare.length === 0 ||
                    !shareLabel.trim()
                  }
                >
                  {shareWorking ? "生成中…" : "生成并复制分享链接"}
                </button>
              </div>
              <small>
                对方无需登录，也不会填写手机号、微信或企微；分享链接可用于后续第7天数据回收。
              </small>
            </form>
          )}
          <div className="note-list">
            {activeBatch.assignments.map((item, index) => {
              const shareDisabled = Boolean(
                item.publish_url || item.delegation_bundle_id,
              );
              return (
              <article
                key={item.id}
                className={`note-row ${shareComposerOpen && isClaimOwner ? "share-selecting" : ""}`}
              >
                {shareComposerOpen && isClaimOwner && (
                  <label
                    className={`share-checkbox ${shareDisabled ? "disabled" : ""}`}
                    title={
                      item.publish_url
                        ? "已发布笔记不能转派"
                        : item.delegation_bundle_id
                          ? `已转派给 ${item.delegation_label}`
                          : "选择这篇笔记"
                    }
                  >
                    <input
                      type="checkbox"
                      checked={selectedForShare.includes(item.id)}
                      disabled={shareDisabled}
                      onChange={() => toggleShareSelection(item.id)}
                      aria-label={`选择笔记：${item.title}`}
                    />
                    <span>✓</span>
                  </label>
                )}
                <span className={`note-index ${item.publish_url ? "done" : ""}`}>
                  {String(index + 1).padStart(2, "0")}
                </span>
                {item.images[0] ? (
                  <>
                    {/* Private claim-bound images intentionally bypass the public image optimizer. */}
                    {/* eslint-disable-next-line @next/next/no-img-element */}
                    <img
                      className="note-thumb"
                      src={noteImageUrl(item, item.images[0].index)}
                      alt=""
                      loading="lazy"
                    />
                  </>
                ) : item.videos.length > 0 ? (
                  <span className="note-thumb platform-video-thumb">
                    <PlatformBadge platform={payload.task.platform} logoOnly />
                  </span>
                ) : (
                  <span className="note-thumb empty">无图</span>
                )}
                <div>
                  <h3>{item.title}</h3>
                  <p>
                    <span>{item.videos.length > 0 ? `${item.videos.length} 个视频` : `${item.images.length} 张配图`}</span>
                    <PlatformBadge platform={payload.task.platform} compact />
                    <span>飞书源行 {item.source_row ?? "—"} · {statusLabel(item)}</span>
                    {recoveryEnabled && item.publish_url
                      ? item.result_submitted_at
                        ? " · 截图已交"
                        : " · 截图待交"
                      : ""}
                    {item.creator_screenshot_key ? " · D7截图已交" : ""}
                    {item.delegation_label ? ` · 已转派给 ${item.delegation_label}` : ""}
                  </p>
                </div>
                <span
                  className={`note-status ${
                    item.publish_url
                      ? "done"
                      : item.delegation_bundle_id
                        ? "delegated"
                        : ""
                  }`}
                >
                  {item.publish_url
                    ? "已回填"
                    : item.delegation_bundle_id
                      ? "已转派"
                      : "待发布"}
                </span>
                <button onClick={() => openNote(item)}>
                  {item.publish_url ? "查看 / 修改" : "查看并回填"} →
                </button>
              </article>
              );
            })}
          </div>
          {payload.claim && payload.claim.delegations.length > 0 && (
            <section className="delegation-history">
              <div className="delegation-heading">
                <div>
                  <p className="micro">分享记录</p>
                  <h3>转派发布包</h3>
                </div>
                <span>{payload.claim.delegations.length} 个</span>
              </div>
              <div className="delegation-list">
                {payload.claim.delegations.map((bundle) => (
                  <article
                    key={bundle.id}
                    className={bundle.status === "revoked" ? "revoked" : ""}
                  >
                    <div>
                      <strong>{bundle.label}</strong>
                      <span>
                        {bundle.quantity} 篇 · 已发布{" "}
                        {Number(bundle.completed_count ?? 0)}/{bundle.quantity}
                        {` · D7完成 ${Number(bundle.creator_completed_count ?? 0)}`}
                      </span>
                    </div>
                    <small>{formatDate(bundle.created_at, true)}</small>
                    <span className={`delegation-status ${bundle.status}`}>
                      {bundle.status === "active" ? "分享中" : "已撤销"}
                    </span>
                    {bundle.status === "active" && (
                      <div className="delegation-actions">
                        <button
                          type="button"
                          onClick={() =>
                            void copyText(
                              delegationUrl(bundle.share_token),
                              `已复制给 ${bundle.label} 的分享链接`,
                            )
                          }
                        >
                          复制链接
                        </button>
                        {Number(bundle.completed_count ?? 0) === 0 && (
                          <button
                            type="button"
                            className="danger"
                            disabled={shareWorking}
                            onClick={() => void revokeDelegation(bundle)}
                          >
                            撤销
                          </button>
                        )}
                      </div>
                    )}
                  </article>
                ))}
              </div>
            </section>
          )}
        </section>
        <div className="safe-tip">
          {isClaimOwner
            ? "以后再次打开原任务链接，填写相同微信号或手机号即可找回全部领取批次和分享记录。"
            : "请保存当前分享链接；发布后仍需通过此链接回填第7天截图、曝光量和阅读量。"}
        </div>
        {toast && <div className={toastClassName(toast)}>{toast}</div>}
      </main>
    );
  }

  return (
    <main className="portal-shell">
      <header className="portal-topbar">
        <div className="portal-brand"><span>K</span><strong>KOC LOOP</strong></div>
        <span className="external-label">KOC领取页</span>
      </header>
      <section className="task-hero">
        <div className="hero-copy">
          <div className="hero-platform-line">
            <p className="micro">正在招募 · {payload.task.brand}</p>
            <PlatformBadge platform={payload.task.platform} />
          </div>
          <h1>{payload.task.name}</h1>
          <p>
            领取后可查看完整笔记正文，每篇笔记独立回填发布信息。
            {payload.task.recoveryEnabled ? "发布后还需提交回收截图。" : ""}
          </p>
          <div className="hero-meta">
            <span>截止 {formatDate(payload.task.dueAt)}</span>
            {payload.task.recoveryEnabled && payload.task.recoveryDueAt ? (
              <span>截图回收截止 {formatDate(payload.task.recoveryDueAt)}</span>
            ) : null}
            <span>剩余 {payload.task.availableQuantity} 篇</span>
          </div>
        </div>
        <aside className="claim-card">
          <div className="entry-switch" aria-label="领取入口">
            <button
              type="button"
              className={entryMode === "claim" ? "active" : ""}
              onClick={() => {
                setEntryMode("claim");
                setRecoveredClaims([]);
              }}
            >
              领取新笔记
            </button>
            <button
              type="button"
              className={entryMode === "recover" ? "active" : ""}
              onClick={() => {
                setEntryMode("recover");
                setRecoveredClaims([]);
              }}
            >
              找回领取记录
            </button>
          </div>
          {wecomIdentity && !manualEntry && (
            <div className="wecom-identity-chip">
              <b>企微身份已确认</b>
              <span>{wecomIdentity.name}</span>
              <button type="button" onClick={() => setManualEntry(true)}>
                切换为手动输入
              </button>
            </div>
          )}
          {entryMode === "claim" ? (
            <form onSubmit={claimNotes}>
              <div>
                <p className="micro">01 · 确认领取</p>
                <h2>你要领取多少篇？</h2>
              </div>
              {(!wecomIdentity || manualEntry) && (
                <label>
                  <span>微信号 / 手机号</span>
                  <input
                    value={claimantName}
                    onChange={(event) => setClaimantName(event.target.value)}
                    placeholder="请输入微信号或手机号"
                    autoCapitalize="none"
                    autoCorrect="off"
                    spellCheck={false}
                    maxLength={64}
                    required
                  />
                </label>
              )}
              <div className="quantity-control">
                <button type="button" onClick={() => setQuantity(Math.max(1, quantity - 1))}>−</button>
                <div><strong>{quantity}</strong><span>篇</span></div>
                <button
                  type="button"
                  onClick={() =>
                    setQuantity(Math.min(payload.task.availableQuantity || 1, quantity + 1))
                  }
                >
                  ＋
                </button>
              </div>
              <button
                className="claim-primary"
                disabled={working || payload.task.availableQuantity === 0}
              >
                {payload.task.availableQuantity === 0
                  ? "当前任务已领完"
                  : working
                    ? "领取中…"
                    : `确认领取 ${quantity} 篇`}
              </button>
              <small>领取后系统会生成你的专属笔记清单</small>
            </form>
          ) : (
            <form onSubmit={recoverClaims}>
              <div>
                <p className="micro">找回历史记录</p>
                <h2>继续之前领取的笔记</h2>
                <p className="recover-intro">
                  {wecomIdentity && !manualEntry
                    ? "已用企微身份查找，同一任务多次领取会分批展示。"
                    : "输入领取时使用的微信号或手机号；同一任务多次领取会分批展示。"}
                </p>
              </div>
              {(!wecomIdentity || manualEntry) && (
                <label>
                  <span>领取时的微信号 / 手机号</span>
                  <input
                    value={claimantName}
                    onChange={(event) => setClaimantName(event.target.value)}
                    placeholder="需与领取时完全一致"
                    autoCapitalize="none"
                    autoCorrect="off"
                    spellCheck={false}
                    maxLength={64}
                    required
                  />
                </label>
              )}
              <button className="claim-primary" disabled={working}>
                {working ? "正在查找…" : "查找我的领取记录"}
              </button>
              {recoveredClaims.length > 0 && (
                <div className="recovery-list">
                  {recoveredClaims.map((claim, index) => (
                    <button
                      type="button"
                      key={claim.claimToken}
                      onClick={() => void openRecoveredClaim(claim.claimToken)}
                    >
                      <span>第 {recoveredClaims.length - index} 批 · {formatDate(claim.createdAt, true)}</span>
                      <strong>{claim.firstTitle}</strong>
                      <small>{claim.completedCount}/{claim.quantity} 已回填</small>
                      <i>继续填写 →</i>
                    </button>
                  ))}
                </div>
              )}
            </form>
          )}
        </aside>
      </section>
      <section className="steps">
        <div><span>1</span><strong>选择数量</strong><p>一次可领多篇</p></div>
        <i />
        <div><span>2</span><strong>逐篇查看</strong><p>标题正文完整展示</p></div>
        <i />
        <div><span>3</span><strong>单篇回填</strong><p>昵称、链接、截图一一对应</p></div>
      </section>
      <footer>由 KOC LOOP 提供任务与数据安全保障</footer>
      {toast && <div className={toastClassName(toast)}>{toast}</div>}
    </main>
  );
}