"use client";

import { markdown, markdownLanguage } from "@codemirror/lang-markdown";
import { languages } from "@codemirror/language-data";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { basicLightInit } from "@uiw/codemirror-theme-basic";
import { monokaiInit } from "@uiw/codemirror-theme-monokai";
import CodeMirror from "@uiw/react-codemirror";
import {
  BookOpen,
  Check,
  ChevronLeft,
  ChevronRight,
  Download,
  ExternalLink,
  FileText,
  List,
  Loader2,
  Maximize2,
  Pencil,
  Trash2,
  X,
} from "lucide-react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import type { PointerEvent as ReactPointerEvent } from "react";
import { useParams, useSearchParams } from "react-router-dom";
import { toast } from "sonner";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { MarkdownContent } from "@/components/workspace/messages/markdown-content";
import { HtmlPreviewFrame } from "@/components/html-preview-frame";
import { ReportMarkdownView } from "@/components/wiki/ReportMarkdownView";
import { getBackendBaseURL } from "@/core/config";
import { usePublicBackground } from "@/core/embed/background";
import { downloadMarkdownAsDocx } from "@/core/scheduled-tasks/markdown-docx";
import { reasoningPlugins } from "@/core/streamdown";
import { createMarkdownAnchorResolver } from "@/core/utils/markdown";
import { cn } from "@/lib/utils";
import { useTheme } from "next-themes";

type PublicTask = {
  task_id: string;
  name: string;
  description?: string | null;
  schedule_text: string;
  cron_expr?: string;
  timezone: string;
  enabled: boolean;
  next_run_at?: string | null;
  last_run_at?: string | null;
  last_status?: string | null;
  published?: boolean;
};

type PublicRunFile = {
  index: number;
  name: string;
  mime_type?: string | null;
  kind?: string | null;
  size?: number | null;
  /** Server-reported "is the archive file still on disk?" flag. Older responses
   * may omit this — treat missing as available. */
  available?: boolean;
};

type PublicRunResult = {
  title: string;
  content: string;
  format: "markdown" | "text" | "json" | "mixed" | "html";
  files: PublicRunFile[];
  created_at: string;
  /** Present for ``html_page`` runs: the full generated HTML document. */
  html?: string | null;
};

type PublicRun = {
  id: string;
  task_id: string;
  scheduled_for: string;
  started_at?: string | null;
  finished_at?: string | null;
  status: "pending" | "running" | "succeeded" | "failed" | string;
  error?: string | null;
  result?: PublicRunResult | null;
  retry_count?: number | null;
  created_at?: string | null;
  updated_at?: string | null;
};

type PublicRunsResponse = {
  task: PublicTask;
  total: number;
  runs: PublicRun[];
};

type PublicFileContent = {
  index: number;
  name: string;
  mime_type?: string | null;
  kind?: string | null;
  size?: number | null;
  previewable: boolean;
  content?: string | null;
};

function publicBaseUrl() {
  return `${getBackendBaseURL()}/api/public/scheduled-tasks`;
}

async function fetchJson<T>(url: string, init?: RequestInit): Promise<T> {
  const response = await fetch(url, init);
  if (!response.ok) {
    const body = await response.json().catch(() => ({ detail: "Request failed" }));
    throw new Error(typeof body.detail === "string" ? body.detail : "Request failed");
  }
  return response.json() as Promise<T>;
}

async function fetchPublicTaskRuns(taskId: string): Promise<PublicRunsResponse> {
  return fetchJson<PublicRunsResponse>(`${publicBaseUrl()}/${encodeURIComponent(taskId)}/runs?limit=200`);
}

async function fetchPublicRun(runId: string): Promise<PublicRun> {
  return fetchJson<PublicRun>(`${publicBaseUrl()}/runs/${encodeURIComponent(runId)}`);
}

async function fetchPublicRunFile(runId: string, index: number): Promise<PublicFileContent> {
  return fetchJson<PublicFileContent>(
    `${publicBaseUrl()}/runs/${encodeURIComponent(runId)}/files/${index}`,
  );
}

type PublicRunHtml = { run_id: string; title?: string | null; html?: string | null };

async function fetchPublicRunHtml(runId: string): Promise<PublicRunHtml> {
  return fetchJson<PublicRunHtml>(`${publicBaseUrl()}/runs/${encodeURIComponent(runId)}/html`);
}

async function updatePublicRunFile(
  runId: string,
  index: number,
  content: string,
): Promise<void> {
  await fetchJson(
    `${publicBaseUrl()}/runs/${encodeURIComponent(runId)}/files/${index}`,
    {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ content }),
    },
  );
}

async function updatePublicRunBody(runId: string, content: string): Promise<void> {
  await fetchJson(
    `${publicBaseUrl()}/runs/${encodeURIComponent(runId)}/body`,
    {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ content }),
    },
  );
}

async function deletePublicRun(runId: string): Promise<void> {
  const response = await fetch(
    `${publicBaseUrl()}/runs/${encodeURIComponent(runId)}`,
    { method: "DELETE" },
  );
  if (!response.ok && response.status !== 204) {
    const body = await response.json().catch(() => ({ detail: "Request failed" }));
    throw new Error(typeof body.detail === "string" ? body.detail : "Request failed");
  }
}

function publicRunFileDownloadUrl(runId: string, index: number): string {
  return `${publicBaseUrl()}/runs/${encodeURIComponent(runId)}/files/${index}/download`;
}

function statusLabel(status?: string | null) {
  switch (status) {
    case "succeeded":
      return "成功";
    case "failed":
      return "失败";
    case "running":
      return "执行中";
    case "pending":
      return "等待中";
    default:
      return status || "未知";
  }
}

function statusVariant(status?: string | null): "default" | "secondary" | "destructive" | "outline" {
  if (status === "succeeded") return "default";
  if (status === "failed") return "destructive";
  if (status === "running") return "secondary";
  return "outline";
}

function formatDate(value?: string | null): string {
  return value ? new Date(value).toLocaleString() : "暂无";
}

/**
 * Compact "M月D日" badge prefixed to each run title so visually identical
 * names (the agent often emits the same title every run) become scannable.
 * Returns empty string for an invalid / missing date so the title falls back
 * to its bare form instead of rendering "Invalid Date".
 */
function formatScheduledDatePrefix(value?: string | null): string {
  if (!value) return "";
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return "";
  return `${date.getMonth() + 1}月${date.getDate()}日`;
}

function isMarkdownFile(file: { name: string; kind?: string | null; mime_type?: string | null }): boolean {
  const name = file.name.toLowerCase();
  return (
    file.kind === "markdown" ||
    file.mime_type === "text/markdown" ||
    name.endsWith(".md") ||
    name.endsWith(".markdown")
  );
}

function isFileAvailable(file: PublicRunFile): boolean {
  // Older responses omit `available`; treat that as still available so we
  // don't accidentally hide content from a backend that hasn't shipped the
  // flag yet.
  return file.available !== false;
}

function stripExtension(name: string): string {
  if (!name) return name;
  const dot = name.lastIndexOf(".");
  if (dot <= 0) return name;
  return name.slice(0, dot);
}

/**
 * Strip a trailing ` - YYYY-MM-DD HH:MM[:SS]` (or `_YYYY-MM-DD ...`) suffix
 * that the agent appends to run titles. The scheduled-for column is already
 * displayed separately below the title, so the duplicated date looks like noise.
 */
function stripTimestampSuffix(title: string): string {
  if (!title) return title;
  const cleaned = title.replace(
    /[\s_]*[-_]?\s*\d{4}-\d{1,2}-\d{1,2}[\sT]+\d{1,2}:\d{2}(?::\d{2})?\s*$/,
    "",
  );
  return cleaned.trim() || title;
}

function stripMarkdownToText(markdown: string): string {
  return markdown
    .replace(/```[\s\S]*?```/g, " ")
    .replace(/~~~[\s\S]*?~~~/g, " ")
    .replace(/!\[[^\]]*\]\([^)]+\)/g, " ")
    .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1")
    .replace(/^#{1,6}\s+/gm, "")
    .replace(/^[>\-*+\d.)\s]+/gm, "")
    .replace(/[`*_~|]/g, "")
    .replace(/<[^>]+>/g, " ")
    .replace(/\s+/g, " ")
    .trim();
}

function getMarkdownExcerpt(markdown: string): string {
  const text = stripMarkdownToText(markdown);
  if (!text) return "";
  return text.length > 180 ? `${text.slice(0, 180)}...` : text;
}

function countReadableWords(markdown: string): number {
  const text = stripMarkdownToText(markdown);
  if (!text) return 0;
  const cjk = text.match(/[\u4e00-\u9fff]/g)?.length ?? 0;
  const words = text.replace(/[\u4e00-\u9fff]/g, " ").match(/[A-Za-z0-9]+/g)?.length ?? 0;
  return cjk + words;
}

function selectorForId(id: string): string {
  const css = window.CSS;
  if (css?.escape) return `#${css.escape(id)}`;
  return `[id="${id.replace(/\\/g, "\\\\").replace(/"/g, '\\"')}"]`;
}

function KnowledgeMarkdownView({
  content,
  title,
  subtitle,
  className,
}: {
  content: string;
  title?: string;
  subtitle?: string;
  className?: string;
  isLoading?: boolean;
  remarkPlugins?: unknown;
  rehypePlugins?: unknown;
}) {
  const rootRef = useRef<HTMLDivElement>(null);
  const anchorResolver = useMemo(() => createMarkdownAnchorResolver(content), [content]);
  const headings = useMemo(
    () => anchorResolver.headings.filter((item) => item.level >= 1 && item.level <= 3),
    [anchorResolver],
  );
  const [activeHeadingId, setActiveHeadingId] = useState<string | null>(null);
  const excerpt = useMemo(() => getMarkdownExcerpt(content), [content]);
  const sectionCount = headings.length;
  const wordCount = useMemo(() => countReadableWords(content), [content]);

  useEffect(() => {
    setActiveHeadingId(headings[0]?.id ?? null);
  }, [headings]);

  useEffect(() => {
    const root = rootRef.current;
    if (!root || headings.length === 0) return;

    const targets = headings
      .map((item) => root.querySelector<HTMLElement>(selectorForId(item.id)))
      .filter((item): item is HTMLElement => !!item);
    if (targets.length === 0) return;

    const observer = new IntersectionObserver(
      (entries) => {
        const visible = entries
          .filter((entry) => entry.isIntersecting)
          .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top)[0];
        if (visible?.target.id) {
          setActiveHeadingId(visible.target.id);
        }
      },
      {
        root: root.closest("[data-radix-scroll-area-viewport]") ?? null,
        rootMargin: "-96px 0px -65% 0px",
        threshold: [0, 1],
      },
    );

    targets.forEach((target) => observer.observe(target));
    return () => observer.disconnect();
  }, [headings, content]);

  const scrollToHeading = useCallback((id: string) => {
    const root = rootRef.current;
    const target =
      root?.querySelector<HTMLElement>(selectorForId(id)) ?? document.getElementById(id);
    setActiveHeadingId(id);
    target?.scrollIntoView({ behavior: "smooth", block: "start" });
  }, []);

  return (
    <div
      ref={rootRef}
      className={cn(
        "grid min-h-0 gap-5 lg:grid-cols-[minmax(0,1fr)_300px]",
        className,
      )}
    >
      <article className="min-w-0 overflow-hidden rounded-lg border border-slate-200/80 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-950">
        <div className="border-b border-slate-100 bg-slate-50/90 px-6 py-5 dark:border-slate-800 dark:bg-slate-900/70 md:px-8">
          <div className="flex flex-wrap items-center gap-2 text-xs text-slate-500 dark:text-slate-400">
            <span className="inline-flex items-center gap-1 rounded-md bg-white px-2 py-1 font-medium text-slate-600 ring-1 ring-slate-200 dark:bg-slate-950 dark:text-slate-300 dark:ring-slate-800">
              <BookOpen className="size-3.5" />
              知识梳理
            </span>
            {subtitle && <span className="truncate">{subtitle}</span>}
          </div>
          {title && (
            <h1 className="mt-3 text-xl font-semibold leading-snug text-slate-950 dark:text-slate-50 md:text-2xl">
              {title}
            </h1>
          )}
          {excerpt && (
            <p className="mt-3 max-w-4xl text-sm leading-7 text-slate-600 dark:text-slate-300">
              {excerpt}
            </p>
          )}
          <div className="mt-4 flex flex-wrap gap-2 text-xs text-slate-500 dark:text-slate-400">
            <span className="rounded-md bg-white px-2 py-1 ring-1 ring-slate-200 dark:bg-slate-950 dark:ring-slate-800">
              {sectionCount || 1} 个章节
            </span>
            <span className="rounded-md bg-white px-2 py-1 ring-1 ring-slate-200 dark:bg-slate-950 dark:ring-slate-800">
              约 {wordCount} 字
            </span>
          </div>
        </div>
        <div className="wiki-markdown public-report-markdown mx-auto w-full max-w-[980px] px-6 py-7 md:px-10 md:py-9">
          <MarkdownContent
            className="max-w-none"
            content={content}
            isLoading={false}
            remarkPlugins={reasoningPlugins.remarkPlugins}
            rehypePlugins={reasoningPlugins.rehypePlugins}
          />
        </div>
      </article>

      <aside className="hidden min-w-0 lg:block">
        <div className="sticky top-4 rounded-lg border border-slate-200/80 bg-white p-4 shadow-sm dark:border-slate-800 dark:bg-slate-950">
          <div className="mb-2 flex items-center gap-2 text-sm font-semibold text-slate-800 dark:text-slate-100">
            <List className="size-4" />
            内容目录
          </div>
          {headings.length > 0 ? (
            <nav className="max-h-[calc(100vh-210px)] space-y-1 overflow-auto pr-1">
              {headings.map((item) => (
                <button
                  key={item.id}
                  type="button"
                  className={cn(
                    "block w-full truncate rounded-md border-l-2 border-transparent px-2 py-1.5 text-left text-xs leading-5 text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-950 dark:text-slate-300 dark:hover:bg-slate-900 dark:hover:text-slate-50",
                    activeHeadingId === item.id &&
                      "border-primary bg-primary/10 font-medium text-primary dark:text-primary",
                    item.level === 2 && "pl-4",
                    item.level === 3 && "pl-7 text-slate-500 dark:text-slate-400",
                  )}
                  title={item.text}
                  onClick={() => scrollToHeading(item.id)}
                >
                  {item.text}
                </button>
              ))}
            </nav>
          ) : (
            <div className="rounded-md border border-dashed p-3 text-xs text-slate-500 dark:border-slate-800 dark:text-slate-400">
              暂无标题目录
            </div>
          )}
        </div>
      </aside>
    </div>
  );
}

const BODY_TAB_VALUE = "__body__";
const HTML_TAB_VALUE = "__html__";
const RUN_LIST_COLLAPSED_WIDTH = 56;
const RUN_LIST_DEFAULT_WIDTH = 380;
const RUN_LIST_MIN_WIDTH = 280;
const RUN_LIST_MAX_WIDTH = 560;

/**
 * Public, unauthenticated scheduled-task viewer.
 *
 * URL: `#/public/scheduled-tasks/<task_id>`
 *
 * Left pane lists every run of the task (latest first). Right pane uses tabs
 * to switch between the inline body (`正文`) and each Markdown attachment.
 * Markdown attachments take priority — when they exist, the first one is the
 * default tab. Each tab supports inline editing (saved via the public PUT
 * endpoints) and a per-tab Word download.
 */
export default function PublicScheduledTaskPage() {
  const { taskId } = useParams<{ taskId: string }>();
  const [selectedRunId, setSelectedRunId] = useState<string | null>(null);
  const [pendingDeleteRun, setPendingDeleteRun] = useState<{ id: string; title: string } | null>(null);
  const [runListExpanded, setRunListExpanded] = useState(false);
  const [runListWidth, setRunListWidth] = useState(RUN_LIST_DEFAULT_WIDTH);
  const dragStateRef = useRef<{ startX: number; startWidth: number } | null>(null);
  const queryClient = useQueryClient();
  // 嵌套方可用 ?bg=/?text= 或 postMessage 覆盖背景/文字色。
  const pageBg = usePublicBackground();

  const { data, isLoading, isError, error } = useQuery({
    queryKey: ["public-scheduled-task", taskId],
    queryFn: () => fetchPublicTaskRuns(taskId!),
    enabled: !!taskId,
    retry: false,
    refetchOnWindowFocus: false,
    refetchInterval: 8000,
  });

  const deleteRunMutation = useMutation({
    mutationFn: (runId: string) => deletePublicRun(runId),
    onSuccess: async (_data, runId) => {
      toast.success("已删除");
      if (selectedRunId === runId) {
        setSelectedRunId(null);
      }
      setPendingDeleteRun(null);
      await queryClient.invalidateQueries({ queryKey: ["public-scheduled-task", taskId] });
    },
    onError: (err) => {
      toast.error(err instanceof Error ? err.message : "删除失败");
    },
  });

  // Public viewer only surfaces runs that have actual content to show:
  // pending/running/failed are hidden, and succeeded runs with neither a body
  // nor a Markdown attachment fall out too (nothing to render).
  const runs = useMemo(() => {
    const all = data?.runs ?? [];
    return all.filter((run) => {
      if (run.status !== "succeeded") return false;
      const result = run.result;
      if (!result) return false;
      // HTML page runs always have something to render (the iframe preview).
      const isHtml =
        result.format === "html" ||
        (result.files ?? []).some(
          (file) => file.kind === "html" || (file.name ?? "").toLowerCase().endsWith(".html"),
        );
      if (isHtml) return true;
      const hasBody = !!result.content && result.content.trim().length > 0;
      const hasMarkdownFile = (result.files ?? []).some(
        (file) => isMarkdownFile(file) && isFileAvailable(file),
      );
      return hasBody || hasMarkdownFile;
    });
  }, [data]);
  const selectedRun = useMemo(
    () => runs.find((r) => r.id === selectedRunId) ?? null,
    [runs, selectedRunId],
  );

  useEffect(() => {
    if (!selectedRunId && runs.length > 0) {
      setSelectedRunId(runs[0]!.id);
    }
    if (selectedRunId && !runs.some((r) => r.id === selectedRunId) && runs.length > 0) {
      setSelectedRunId(runs[0]!.id);
    }
  }, [runs, selectedRunId]);

  const task = data?.task;
  const visibleRunListWidth = runListExpanded ? runListWidth : RUN_LIST_COLLAPSED_WIDTH;

  const expandRunList = useCallback(() => {
    setRunListExpanded(true);
    setRunListWidth((width) =>
      Math.min(RUN_LIST_MAX_WIDTH, Math.max(RUN_LIST_MIN_WIDTH, width)),
    );
  }, []);

  const collapseRunList = useCallback(() => {
    setRunListExpanded(false);
  }, []);

  const handleRunListDragStart = useCallback(
    (event: ReactPointerEvent<HTMLDivElement>) => {
      event.preventDefault();
      dragStateRef.current = {
        startX: event.clientX,
        startWidth: visibleRunListWidth,
      };
      document.body.style.cursor = "col-resize";
      document.body.style.userSelect = "none";

      const handlePointerMove = (moveEvent: PointerEvent) => {
        const drag = dragStateRef.current;
        if (!drag) return;
        const nextWidth = drag.startWidth + moveEvent.clientX - drag.startX;
        if (nextWidth <= RUN_LIST_COLLAPSED_WIDTH + 28) {
          setRunListExpanded(false);
          return;
        }
        setRunListExpanded(true);
        setRunListWidth(
          Math.min(RUN_LIST_MAX_WIDTH, Math.max(RUN_LIST_MIN_WIDTH, nextWidth)),
        );
      };

      const handlePointerUp = () => {
        dragStateRef.current = null;
        document.body.style.cursor = "";
        document.body.style.userSelect = "";
        window.removeEventListener("pointermove", handlePointerMove);
        window.removeEventListener("pointerup", handlePointerUp);
      };

      window.addEventListener("pointermove", handlePointerMove);
      window.addEventListener("pointerup", handlePointerUp);
    },
    [visibleRunListWidth],
  );

  if (!taskId) {
    return (
      <div className="text-muted-foreground flex h-screen items-center justify-center text-sm" style={pageBg}>
        缺少任务 ID。请使用 <code className="mx-1">/public/scheduled-tasks/&lt;task_id&gt;</code>。
      </div>
    );
  }

  if (isLoading) {
    return (
      <div className="text-muted-foreground flex h-screen items-center justify-center gap-2 text-sm" style={pageBg}>
        <Loader2 className="size-4 animate-spin" />
        正在加载任务记录...
      </div>
    );
  }

  if (isError) {
    return (
      <div className="text-destructive flex h-screen items-center justify-center text-sm" style={pageBg}>
        加载失败：{error instanceof Error ? error.message : "未知错误"}
      </div>
    );
  }

  return (
    <TooltipProvider delayDuration={150}>
      <div className="bg-muted/20 flex h-screen min-h-0 overflow-hidden p-4" style={pageBg}>
        <div
          className="relative flex min-h-0 shrink-0 transition-[width] duration-200 ease-out"
          style={{ width: visibleRunListWidth }}
        >
          {runListExpanded ? (
          <Card className="flex min-h-0 w-full flex-col overflow-hidden">
          <CardHeader className="gap-1">
            <div className="flex items-start justify-between gap-2">
              <Tooltip>
                <TooltipTrigger asChild>
                  <CardTitle className="line-clamp-2 text-base leading-snug break-all">
                    {task?.name || "任务"}
                  </CardTitle>
                </TooltipTrigger>
                {task?.name && (
                  <TooltipContent side="bottom" className="max-w-[320px] break-all">
                    {task.name}
                  </TooltipContent>
                )}
              </Tooltip>
              <div className="flex shrink-0 items-center gap-1">
                <Badge variant={task?.enabled ? "default" : "secondary"}>
                  {task?.enabled ? "启用" : "暂停"}
                </Badge>
                <Button
                  size="icon"
                  variant="ghost"
                  className="text-muted-foreground hover:text-primary size-7"
                  onClick={collapseRunList}
                  title="收起执行记录列表"
                  aria-label="收起执行记录列表"
                >
                  <ChevronLeft className="size-4" />
                </Button>
              </div>
            </div>
            {task?.description && task.description.trim() && (
              <p className="text-muted-foreground line-clamp-3 text-xs leading-relaxed break-all whitespace-pre-wrap">
                {task.description.trim()}
              </p>
            )}
          </CardHeader>
          <CardContent className="min-h-0 flex-1 p-0">
            <ScrollArea className="size-full">
              <div className="flex flex-col gap-2 p-3 pt-0">
                {runs.length === 0 && (
                  <div className="text-muted-foreground rounded-md border p-3 text-sm">
                    暂无可查看的执行记录。
                  </div>
                )}
                {runs.map((run) => {
                  const active = run.id === selectedRunId;
                  const runRunning = run.status === "running" || run.status === "pending";
                  const runTitle = stripTimestampSuffix(
                    run.result?.title || formatDate(run.scheduled_for),
                  );
                  const datePrefix = formatScheduledDatePrefix(run.scheduled_for);
                  const isDeletingThis =
                    deleteRunMutation.isPending && deleteRunMutation.variables === run.id;
                  return (
                    <div
                      key={run.id}
                      role="button"
                      tabIndex={0}
                      className={cn(
                        "bg-card hover:bg-accent/60 group rounded-md border p-3 text-left transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
                        active && "border-primary bg-accent",
                      )}
                      onClick={() => setSelectedRunId(run.id)}
                      onKeyDown={(event) => {
                        if (event.key === "Enter" || event.key === " ") {
                          event.preventDefault();
                          setSelectedRunId(run.id);
                        }
                      }}
                    >
                      <div className="flex items-start justify-between gap-2">
                        <div className="min-w-0 flex-1">
                          <Tooltip>
                            <TooltipTrigger asChild>
                              <div
                                className="text-sm leading-snug font-medium break-all"
                                title={datePrefix ? `${datePrefix} · ${runTitle}` : runTitle}
                              >
                                {datePrefix && (
                                  <span className="text-muted-foreground mr-1.5 text-xs font-normal tabular-nums">
                                    {datePrefix}
                                  </span>
                                )}
                                {runTitle}
                              </div>
                            </TooltipTrigger>
                            <TooltipContent side="right" className="max-w-[360px] break-all">
                              {datePrefix ? `${datePrefix} · ${runTitle}` : runTitle}
                            </TooltipContent>
                          </Tooltip>
                          <div className="text-muted-foreground mt-1 text-xs">
                            执行时间：{formatDate(run.scheduled_for)}
                          </div>
                        </div>
                        <div className="flex shrink-0 items-center gap-1">
                          <Badge
                            variant={statusVariant(run.status)}
                            className={cn(
                              "shrink-0",
                              runRunning && "border-primary/30 bg-primary/10 text-primary",
                            )}
                          >
                            {runRunning && <Loader2 className="size-3 animate-spin" />}
                            {statusLabel(run.status)}
                          </Badge>
                          <Button
                            size="icon"
                            variant="ghost"
                            className="text-muted-foreground hover:text-destructive size-7"
                            disabled={isDeletingThis}
                            onClick={(event) => {
                              event.stopPropagation();
                              setPendingDeleteRun({ id: run.id, title: runTitle });
                            }}
                            title="删除记录"
                          >
                            {isDeletingThis ? (
                              <Loader2 className="size-3.5 animate-spin" />
                            ) : (
                              <Trash2 className="size-3.5" />
                            )}
                          </Button>
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>
            </ScrollArea>
          </CardContent>
          </Card>
          ) : (
            <Card className="flex min-h-0 w-full flex-col items-center overflow-hidden py-3">
              <Button
                size="icon"
                variant="ghost"
                className="text-muted-foreground hover:text-primary"
                onClick={expandRunList}
                title="展开执行记录列表"
                aria-label="展开执行记录列表"
              >
                <List className="size-4" />
              </Button>
            </Card>
          )}
          <div
            role="separator"
            aria-orientation="vertical"
            title="拖拽调整列表宽度"
            className="group absolute top-0 -right-3 z-20 flex h-full w-6 cursor-col-resize items-center justify-center"
            onPointerDown={handleRunListDragStart}
          >
            <div className="bg-border group-hover:bg-primary/70 h-full w-px transition-colors" />
            <div className="bg-background text-muted-foreground group-hover:text-primary absolute top-1/2 flex size-5 -translate-y-1/2 items-center justify-center rounded-full border shadow-sm transition-colors">
              <ChevronRight className="size-3" />
            </div>
          </div>
        </div>

        <Card className="ml-4 flex min-h-0 flex-1 flex-col">
          {selectedRun ? (
            <RunDetailPane key={selectedRun.id} run={selectedRun} taskId={taskId} />
          ) : (
            <CardContent className="text-muted-foreground flex h-full items-center justify-center p-6 text-sm">
              请在左侧选择一条执行记录。
            </CardContent>
          )}
        </Card>
      </div>

      <Dialog
        open={pendingDeleteRun !== null}
        onOpenChange={(open) => {
          if (!open && !deleteRunMutation.isPending) {
            setPendingDeleteRun(null);
          }
        }}
      >
        <DialogContent className="sm:max-w-[420px]">
          <DialogHeader>
            <DialogTitle>删除执行记录</DialogTitle>
            <DialogDescription>
              确认删除这条执行记录吗？此操作不可恢复。
            </DialogDescription>
          </DialogHeader>
          {pendingDeleteRun && (
            <div className="bg-muted/40 text-foreground rounded-md border px-3 py-2 text-sm break-all">
              {pendingDeleteRun.title}
            </div>
          )}
          <DialogFooter>
            <Button
              variant="outline"
              onClick={() => setPendingDeleteRun(null)}
              disabled={deleteRunMutation.isPending}
            >
              取消
            </Button>
            <Button
              variant="destructive"
              onClick={() => {
                if (pendingDeleteRun) {
                  deleteRunMutation.mutate(pendingDeleteRun.id);
                }
              }}
              disabled={deleteRunMutation.isPending}
            >
              {deleteRunMutation.isPending ? (
                <Loader2 className="size-4 animate-spin" />
              ) : (
                <Trash2 className="size-4" />
              )}
              删除
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </TooltipProvider>
  );
}

type ContentTab = {
  /** Stable tab identifier — `__html__` for the HTML preview, `__body__` for
   * inline content, `file-<index>` for files. */
  value: string;
  /** Short label rendered in the TabsTrigger. */
  label: string;
  /** Distinguishes the HTML preview vs body vs MD attachment so the renderer /
   * editor knows what to show and which PUT to call. */
  kind: "body" | "file" | "html";
  /** File index (when `kind === "file"`). */
  fileIndex?: number;
  /** Filename for downloads (defaults to the run title for body). */
  fileName?: string;
};

type PublicFullscreenPreview =
  | { mode: "html"; title: string; html: string }
  | { mode: "markdown"; title: string; content: string }
  | { mode: "text"; title: string; content: string }
  | { mode: "file"; title: string; file: PublicFileContent };

function PublicFullscreenPreviewContent({ preview }: { preview: PublicFullscreenPreview }) {
  if (preview.mode === "html") {
    return <HtmlPreviewFrame html={preview.html} className="h-full w-full border-0 bg-white" />;
  }
  if (preview.mode === "markdown") {
    return (
      <ReportMarkdownView
        className="max-w-none"
        content={preview.content || "无正文内容"}
        title={preview.title}
      />
    );
  }
  if (preview.mode === "file") {
    const content = preview.file.content || "无文件内容";
    if (isMarkdownFile(preview.file)) {
      return (
        <ReportMarkdownView
          className="max-w-none"
          content={content}
          title={preview.title}
        />
      );
    }
    return <pre className="whitespace-pre-wrap break-words text-sm">{content}</pre>;
  }
  return <pre className="whitespace-pre-wrap break-words text-sm">{preview.content || "无正文内容"}</pre>;
}

const markdownEditorDarkTheme = monokaiInit({
  settings: {
    background: "transparent",
    gutterBackground: "transparent",
    fontSize: "14px",
  },
});

const markdownEditorLightTheme = basicLightInit({
  settings: {
    background: "transparent",
    fontSize: "14px",
  },
});

function PublicMarkdownEditor({
  value,
  onChange,
}: {
  value: string;
  onChange: (value: string) => void;
}) {
  const { resolvedTheme } = useTheme();
  const extensions = useMemo(
    () => [
      markdown({
        base: markdownLanguage,
        codeLanguages: languages,
      }),
    ],
    [],
  );

  return (
    <div className="min-h-0 flex-1 overflow-hidden rounded-md border bg-background">
      <CodeMirror
        value={value}
        onChange={onChange}
        theme={resolvedTheme === "dark" ? markdownEditorDarkTheme : markdownEditorLightTheme}
        extensions={extensions}
        basicSetup={{
          foldGutter: true,
          highlightActiveLine: true,
          highlightActiveLineGutter: false,
          lineNumbers: true,
        }}
        className="h-full overflow-auto font-mono [&_.cm-editor]:h-full [&_.cm-focused]:outline-none!"
      />
    </div>
  );
}

function publicFullscreenHref(taskId: string, runId: string, tab: ContentTab): string {
  const params = new URLSearchParams();
  params.set("tab", tab.kind);
  if (tab.kind === "file" && tab.fileIndex != null) {
    params.set("file", String(tab.fileIndex));
  }
  return `#/public/scheduled-tasks/${encodeURIComponent(taskId)}/runs/${encodeURIComponent(runId)}/fullscreen?${params.toString()}`;
}

/**
 * Right-pane controller for a single run: builds the tab list (body + MDs),
 * fetches each tab's source text, and hosts the view/edit toggle.
 */
function RunDetailPane({ run, taskId }: { run: PublicRun; taskId: string }) {
  const queryClient = useQueryClient();
  const [fullscreenPreview, setFullscreenPreview] = useState<PublicFullscreenPreview | null>(null);
  const [runMetaOpen, setRunMetaOpen] = useState(false);

  // HTML page run: render a sandboxed iframe preview instead of the MD tabs.
  const isHtmlRun =
    run.result?.format === "html" ||
    (run.result?.files ?? []).some(
      (f) => f.kind === "html" || (f.name ?? "").toLowerCase().endsWith(".html"),
    );
  // Prefer the inline copy; fall back to the LONGTEXT-backed /html endpoint for
  // large pages whose HTML was not inlined into result_json.
  const { data: htmlData } = useQuery({
    queryKey: ["public-scheduled-task", "html", run.id],
    queryFn: () => fetchPublicRunHtml(run.id),
    enabled: isHtmlRun && !run.result?.html,
    refetchOnWindowFocus: false,
    retry: false,
  });
  const htmlContent = run.result?.html ?? htmlData?.html ?? null;

  // Skip files whose archive is missing on disk — otherwise the public viewer
  // would render a tab that 404s with "Result file is no longer available".
  const markdownFiles = useMemo(
    () =>
      (run.result?.files ?? []).filter(
        (file) => isMarkdownFile(file) && isFileAvailable(file),
      ),
    [run.result?.files],
  );

  // Tabs: HTML preview first (when present), then every MD file, then the
  // inline body. For an HTML run that also produced a Markdown file, this keeps
  // the page preview AND surfaces the .md instead of hiding it. The generated
  // HTML document itself is never listed as a downloadable "file" tab — it has
  // its own preview.
  const tabs: ContentTab[] = useMemo(() => {
    const list: ContentTab[] = [];
    if (isHtmlRun) {
      list.push({ value: HTML_TAB_VALUE, label: "HTML 预览", kind: "html" });
    }
    list.push(
      ...markdownFiles.map((file, idx) => ({
        value: `file-${file.index}`,
        // Show the actual filename without the `.md` suffix — the user explicitly
        // asked for "no '文件' label, just the name without extension".
        label: stripExtension(file.name) || `文件 ${idx + 1}`,
        kind: "file" as const,
        fileIndex: file.index,
        fileName: file.name,
      })),
    );
    list.push({
      value: BODY_TAB_VALUE,
      label: "正文",
      kind: "body",
      fileName: run.result?.title || "scheduled-task-result",
    });
    return list;
  }, [isHtmlRun, markdownFiles, run.result?.title]);

  const [activeTab, setActiveTab] = useState<string>(tabs[0]?.value ?? BODY_TAB_VALUE);

  // When the run's MD-file set shifts (rare) — fall back to the first tab.
  useEffect(() => {
    if (!tabs.some((t) => t.value === activeTab)) {
      setActiveTab(tabs[0]?.value ?? BODY_TAB_VALUE);
    }
  }, [tabs, activeTab]);

  // Fetch each MD file's text once. Keyed by file index inside the run.
  const [fileTexts, setFileTexts] = useState<Record<number, string>>({});
  const [fileLoading, setFileLoading] = useState<Record<number, boolean>>({});

  const loadFile = useCallback(
    async (fileIndex: number) => {
      setFileLoading((s) => ({ ...s, [fileIndex]: true }));
      try {
        const file = await fetchPublicRunFile(run.id, fileIndex);
        const text = file.previewable && file.content != null ? file.content : "";
        setFileTexts((s) => ({ ...s, [fileIndex]: text }));
      } catch {
        // Race: the archive may have disappeared between list and fetch. Fall
        // back to empty content; the parent filter will drop this tab on the
        // next refetch tick.
        setFileTexts((s) => ({ ...s, [fileIndex]: "" }));
      } finally {
        setFileLoading((s) => ({ ...s, [fileIndex]: false }));
      }
    },
    [run.id],
  );

  // Pull every MD file on first render — keeps tab-switching instant.
  useEffect(() => {
    for (const file of markdownFiles) {
      if (fileTexts[file.index] == null && !fileLoading[file.index]) {
        void loadFile(file.index);
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [markdownFiles, run.id]);

  // Editor state — separate from displayed source so users can cancel.
  const [isEditing, setIsEditing] = useState(false);
  const [draft, setDraft] = useState<string>("");

  const activeTabMeta = useMemo(
    () => tabs.find((t) => t.value === activeTab) ?? tabs[0],
    [tabs, activeTab],
  );
  const activeSource = useMemo(() => {
    if (!activeTabMeta) return "";
    if (activeTabMeta.kind === "body") return run.result?.content ?? "";
    return fileTexts[activeTabMeta.fileIndex!] ?? "";
  }, [activeTabMeta, run.result?.content, fileTexts]);

  // Reset the editor state any time the tab changes underneath us.
  useEffect(() => {
    setIsEditing(false);
    setDraft(activeSource);
  }, [activeTabMeta?.value, activeSource]);

  const saveMutation = useMutation({
    mutationFn: async () => {
      if (!activeTabMeta) return;
      if (activeTabMeta.kind === "body") {
        await updatePublicRunBody(run.id, draft);
      } else {
        await updatePublicRunFile(run.id, activeTabMeta.fileIndex!, draft);
      }
    },
    onSuccess: async () => {
      if (activeTabMeta?.kind === "file") {
        setFileTexts((s) => ({ ...s, [activeTabMeta.fileIndex!]: draft }));
      }
      toast.success("已保存");
      setIsEditing(false);
      // Force a refetch so the left-list run row picks up the change too.
      await queryClient.invalidateQueries({ queryKey: ["public-scheduled-task", taskId] });
    },
    onError: (err) => {
      toast.error(err instanceof Error ? err.message : "保存失败");
    },
  });

  const handleDownloadWord = useCallback(async () => {
    if (!activeTabMeta) return;
    const markdown = isEditing ? draft : activeSource;
    if (!markdown.trim()) {
      toast.error("当前内容为空");
      return;
    }
    const fileName = activeTabMeta.fileName || run.result?.title || "scheduled-task-result";
    const title = activeTabMeta.kind === "body" ? run.result?.title : undefined;
    try {
      await downloadMarkdownAsDocx(markdown, fileName, title);
      toast.success("Word 文件已生成");
    } catch (err) {
      toast.error(err instanceof Error ? err.message : "生成 Word 失败");
    }
  }, [activeTabMeta, draft, isEditing, activeSource, run.result?.title]);

  const isFileTab = activeTabMeta?.kind === "file";
  const fileIndex = activeTabMeta?.fileIndex;
  const fileIsLoading = isFileTab && fileIndex != null ? !!fileLoading[fileIndex] : false;
  const showEmptyHint = !activeSource && !fileIsLoading;
  const fullscreenHref = activeTabMeta ? publicFullscreenHref(taskId, run.id, activeTabMeta) : "";
  const fullscreenDisabled =
    !activeTabMeta ||
    (activeTabMeta.kind === "html" ? !htmlContent : activeTabMeta.kind === "file" ? fileIsLoading : false);

  const handleOpenFullscreen = useCallback(() => {
    if (!activeTabMeta) return;
    if (activeTabMeta.kind === "html") {
      if (!htmlContent) return;
      setFullscreenPreview({
        mode: "html",
        title: run.result?.title || "HTML 预览",
        html: htmlContent,
      });
      return;
    }
    if (activeTabMeta.kind === "body") {
      setFullscreenPreview({
        mode: run.result?.format === "markdown" || run.result?.format === "mixed" ? "markdown" : "text",
        title: run.result?.title || "正文预览",
        content: activeSource || "无正文内容",
      });
      return;
    }
    const sourceFile = markdownFiles.find((file) => file.index === activeTabMeta.fileIndex);
    setFullscreenPreview({
      mode: "file",
      title: activeTabMeta.fileName || sourceFile?.name || "文件预览",
      file: {
        index: activeTabMeta.fileIndex ?? 0,
        name: activeTabMeta.fileName || sourceFile?.name || "result.md",
        mime_type: sourceFile?.mime_type ?? "text/markdown",
        kind: sourceFile?.kind ?? "markdown",
        size: sourceFile?.size ?? activeSource.length,
        previewable: true,
        content: activeSource,
      },
    });
  }, [activeTabMeta, activeSource, htmlContent, markdownFiles, run.result?.format, run.result?.title]);

  return (
    <>
      <Dialog open={fullscreenPreview !== null} onOpenChange={(open) => !open && setFullscreenPreview(null)}>
        <DialogContent className="flex h-[96vh] w-[96vw] max-w-none flex-col gap-0 p-0 sm:max-w-none">
          <DialogHeader className="shrink-0 border-b px-4 py-3 pr-12">
            <DialogTitle className="truncate text-base">
              {fullscreenPreview?.title ?? "预览"}
            </DialogTitle>
          </DialogHeader>
          {fullscreenPreview && (
            <div
              className={cn(
                "min-h-0 flex-1",
                fullscreenPreview.mode === "html" ? "" : "overflow-auto p-4",
              )}
            >
              <PublicFullscreenPreviewContent preview={fullscreenPreview} />
            </div>
          )}
        </DialogContent>
      </Dialog>
      <CardHeader className="flex flex-wrap items-start justify-between gap-2 space-y-0">
        <div className="min-w-0 flex-1">
          <Tooltip>
            <TooltipTrigger asChild>
              <CardTitle className="line-clamp-2 text-base leading-snug break-all">
                {run.result?.title || "执行记录"}
              </CardTitle>
            </TooltipTrigger>
            {run.result?.title && (
              <TooltipContent side="bottom" className="max-w-[420px] break-all">
                {run.result.title}
              </TooltipContent>
            )}
          </Tooltip>
          <Collapsible open={runMetaOpen} onOpenChange={setRunMetaOpen} className="mt-2">
            <CollapsibleTrigger asChild>
              <Button
                type="button"
                variant="ghost"
                size="sm"
                className="text-muted-foreground hover:text-foreground h-7 px-2 text-xs"
              >
                <ChevronRight
                  className={cn("size-3.5 transition-transform", runMetaOpen && "rotate-90")}
                />
                运行信息
              </Button>
            </CollapsibleTrigger>
            <CollapsibleContent>
              <div className="mt-2 grid gap-1 rounded-md border bg-muted/30 px-3 py-2 text-xs text-muted-foreground sm:grid-cols-3">
                <div className="min-w-0 break-all">计划：{formatDate(run.scheduled_for)}</div>
                <div>开始：{formatDate(run.started_at)}</div>
                <div>完成：{formatDate(run.finished_at)}</div>
              </div>
            </CollapsibleContent>
          </Collapsible>
          <p className="hidden">
            开始：{formatDate(run.started_at)} · 完成：{formatDate(run.finished_at)}
          </p>
        </div>
        <div className="flex flex-wrap items-center gap-2">
          {!isEditing && activeTabMeta && (
            <>
              <Button
                size="sm"
                variant="outline"
                onClick={handleOpenFullscreen}
                disabled={fullscreenDisabled}
                title="全屏查看"
              >
                <Maximize2 className="size-4" />
                全屏
              </Button>
              <Button
                size="sm"
                variant="outline"
                onClick={() => window.open(fullscreenHref, "_blank", "noopener,noreferrer")}
                disabled={fullscreenDisabled}
                title="新页面打开全屏预览"
              >
                <ExternalLink className="size-4" />
                新页面
              </Button>
            </>
          )}
          {isFileTab && fileIndex != null && (
            <a
              className="bg-background hover:bg-accent inline-flex h-9 items-center gap-1 rounded-md border px-3 text-xs"
              href={publicRunFileDownloadUrl(run.id, fileIndex)}
              target="_blank"
              rel="noopener noreferrer"
            >
              <Download className="size-4" />
              下载原文件
            </a>
          )}
          {activeTabMeta?.kind !== "html" && (
            <Button size="sm" variant="outline" onClick={handleDownloadWord}>
              <FileText className="size-4" />
              下载 Word
            </Button>
          )}
          {activeTabMeta?.kind !== "html" &&
            (isEditing ? (
              <>
                <Button
                  size="sm"
                  variant="outline"
                  onClick={() => {
                    setIsEditing(false);
                    setDraft(activeSource);
                  }}
                  disabled={saveMutation.isPending}
                >
                  <X className="size-4" />
                  取消
                </Button>
                <Button
                  size="sm"
                  onClick={() => saveMutation.mutate()}
                  disabled={saveMutation.isPending}
                >
                  {saveMutation.isPending ? (
                    <Loader2 className="size-4 animate-spin" />
                  ) : (
                    <Check className="size-4" />
                  )}
                  保存
                </Button>
              </>
            ) : (
              <Button
                size="sm"
                variant="outline"
                onClick={() => {
                  setDraft(activeSource);
                  setIsEditing(true);
                }}
                disabled={fileIsLoading}
              >
                <Pencil className="size-4" />
                编辑
              </Button>
            ))}
        </div>
      </CardHeader>

      <CardContent className="min-h-0 flex-1 overflow-hidden p-0">
        {tabs.length === 0 ? (
          <div className="text-muted-foreground p-6 text-sm">无可用内容。</div>
        ) : (
          <Tabs
            value={activeTab}
            onValueChange={setActiveTab}
            className="flex h-full min-h-0 flex-col gap-0 px-4 pb-3"
          >
            <TabsList
              variant="line"
              className="bg-card sticky top-0 z-10 h-auto flex-wrap justify-start gap-1 border-b py-1"
            >
              {tabs.map((tab) => (
                <TabsTrigger
                  key={tab.value}
                  value={tab.value}
                  className="data-[state=active]:bg-accent/60 max-w-[220px]"
                  title={tab.label}
                >
                  <span className="truncate">{tab.label}</span>
                </TabsTrigger>
              ))}
            </TabsList>

            <div className="flex min-h-0 flex-1 flex-col pt-3">
              {run.error && (
                <div className="text-destructive border-destructive/30 bg-destructive/5 mb-3 rounded-md border p-2 text-xs">
                  {run.error}
                </div>
              )}
              {activeTabMeta?.kind === "html" ? (
                htmlContent ? (
                  <HtmlPreviewFrame
                    html={htmlContent}
                    className="min-h-[60vh] w-full flex-1 rounded-md border bg-white"
                  />
                ) : (
                  <div className="text-muted-foreground rounded-md border p-3 text-sm">
                    HTML 页面尚未生成或正在生成中。
                  </div>
                )
              ) : fileIsLoading ? (
                <div className="text-muted-foreground flex items-center gap-2 text-sm">
                  <Loader2 className="size-4 animate-spin" />
                  正在加载文件内容...
                </div>
              ) : isEditing ? (
                <PublicMarkdownEditor value={draft} onChange={setDraft} />
              ) : (
                <ScrollArea className="min-h-0 flex-1">
                  {showEmptyHint ? (
                    <div className="text-muted-foreground rounded-md border p-3 text-sm">
                      无内容。点击「编辑」开始添加。
                    </div>
                  ) : (
                    <ReportMarkdownView
                      className="max-w-none pr-2"
                      content={activeSource}
                      title={
                        activeTabMeta?.kind === "file"
                          ? stripExtension(activeTabMeta.fileName || "")
                          : run.result?.title
                      }
                    />
                  )}
                </ScrollArea>
              )}
            </div>
          </Tabs>
        )}
      </CardContent>
    </>
  );
}

export function PublicScheduledTaskFullscreenPage() {
  const { taskId, runId } = useParams<{ taskId: string; runId: string }>();
  // 嵌套方可用 ?bg=/?text= 或 postMessage 覆盖背景/文字色。
  const pageBg = usePublicBackground();
  const [searchParams] = useSearchParams();
  const requestedTab = searchParams.get("tab");
  const tabKind: ContentTab["kind"] =
    requestedTab === "body" || requestedTab === "file" || requestedTab === "html"
      ? requestedTab
      : "html";
  const fileIndexValue = Number(searchParams.get("file"));
  const fileIndexValid = Number.isInteger(fileIndexValue) && fileIndexValue >= 0;

  const { data: run, isLoading, isError, error } = useQuery({
    queryKey: ["public-scheduled-task", "run", runId],
    queryFn: () => fetchPublicRun(runId!),
    enabled: !!runId,
    refetchOnWindowFocus: false,
    retry: false,
  });

  const isHtmlRun =
    run?.result?.format === "html" ||
    (run?.result?.files ?? []).some(
      (file) => file.kind === "html" || (file.name ?? "").toLowerCase().endsWith(".html"),
    );

  const { data: htmlData, isLoading: htmlLoading } = useQuery({
    queryKey: ["public-scheduled-task", "html", runId],
    queryFn: () => fetchPublicRunHtml(runId!),
    enabled: !!runId && tabKind === "html" && isHtmlRun && !run?.result?.html,
    refetchOnWindowFocus: false,
    retry: false,
  });

  const {
    data: fileData,
    isLoading: fileLoading,
    isError: fileIsError,
    error: fileError,
  } = useQuery({
    queryKey: ["public-scheduled-task", "file", runId, fileIndexValue],
    queryFn: () => fetchPublicRunFile(runId!, fileIndexValue),
    enabled: !!runId && tabKind === "file" && fileIndexValid,
    refetchOnWindowFocus: false,
    retry: false,
  });

  const htmlContent = run?.result?.html ?? htmlData?.html ?? null;
  const backHref = taskId ? `#/public/scheduled-tasks/${encodeURIComponent(taskId)}` : "#/public/scheduled-tasks";
  const pageTitle =
    tabKind === "file"
      ? fileData?.name || "文件预览"
      : tabKind === "body"
        ? run?.result?.title || "正文预览"
        : htmlData?.title || run?.result?.title || "HTML 预览";

  return (
    <TooltipProvider delayDuration={150}>
      <div className="bg-background flex h-screen min-h-0 flex-col" style={pageBg}>
        <div className="flex h-12 shrink-0 items-center gap-2 border-b px-3">
          <Button asChild variant="ghost" size="sm" className="h-8 px-2 text-xs">
            <a href={backHref}>
              <ChevronLeft className="size-3" />
              返回列表
            </a>
          </Button>
          <div className="min-w-0 flex-1 truncate text-sm font-medium" title={pageTitle}>
            {pageTitle}
          </div>
          {tabKind === "file" && runId && fileIndexValid && (
            <Button asChild variant="outline" size="sm" className="h-8 px-2 text-xs">
              <a
                href={publicRunFileDownloadUrl(runId, fileIndexValue)}
                target="_blank"
                rel="noopener noreferrer"
              >
                <Download className="size-3" />
                下载
              </a>
            </Button>
          )}
        </div>

        <div className="min-h-0 flex-1">
          {!runId || !taskId ? (
            <div className="text-muted-foreground flex h-full items-center justify-center text-sm">
              缺少任务或执行记录 ID。
            </div>
          ) : isLoading ? (
            <div className="text-muted-foreground flex h-full items-center justify-center gap-2 text-sm">
              <Loader2 className="size-4 animate-spin" />
              正在加载预览...
            </div>
          ) : isError ? (
            <div className="text-destructive flex h-full items-center justify-center text-sm">
              加载失败：{error instanceof Error ? error.message : "未知错误"}
            </div>
          ) : tabKind === "html" ? (
            htmlContent ? (
              <HtmlPreviewFrame html={htmlContent} className="h-full w-full border-0 bg-white" />
            ) : (
              <div className="text-muted-foreground flex h-full items-center justify-center gap-2 text-sm">
                {htmlLoading && <Loader2 className="size-4 animate-spin" />}
                HTML 页面尚未生成或正在生成中。
              </div>
            )
          ) : tabKind === "file" ? (
            fileLoading ? (
              <div className="text-muted-foreground flex h-full items-center justify-center gap-2 text-sm">
                <Loader2 className="size-4 animate-spin" />
                正在加载文件...
              </div>
            ) : !fileIndexValid || fileIsError || !fileData ? (
              <div className="text-destructive flex h-full items-center justify-center text-sm">
                文件加载失败：{fileError instanceof Error ? fileError.message : "文件不存在或不可预览"}
              </div>
            ) : (
              <ScrollArea className="h-full">
                <div className="mx-auto max-w-5xl p-6">
                  <PublicFullscreenPreviewContent
                    preview={{
                      mode: "file",
                      title: fileData.name,
                      file: fileData,
                    }}
                  />
                </div>
              </ScrollArea>
            )
          ) : (
            <ScrollArea className="h-full">
              <div className="mx-auto max-w-5xl p-6">
                <PublicFullscreenPreviewContent
                  preview={{
                    mode:
                      run?.result?.format === "markdown" || run?.result?.format === "mixed"
                        ? "markdown"
                        : "text",
                    title: run?.result?.title || "正文预览",
                    content: run?.result?.content || "无正文内容",
                  }}
                />
              </div>
            </ScrollArea>
          )}
        </div>
      </div>
    </TooltipProvider>
  );
}