xiaoxia-saas/apps/web/src/pages/scripts/ScriptLibrary.tsx

/**
 * 文案库页面 — Issue #1811（v2 完整版） + #1893 AI 能力
 * 功能：
 * - 列表页：卡片列表，搜索（标题/正文）、分类标签筛选、分页
 *   每条卡片展示：title、content 前 100 字摘要、title_text、分类 Tag、tags、使用次数、时间
 *   操作：编辑 / 删除 / 复制 / 使用（跳创作页预填）
 * - 新建/编辑弹窗：title、content 多行、segments（按空行自动拆分+手动编辑）、title_text、title_category、
 *   title_config（字体/颜色/位置/字号）、tags
 * - #1893 AI 能力：
 *   - 顶部「🎬 从抖音提取」按钮 → 输入抖音链接 → ASR 提取文案 → 自动填充到新建弹窗
 *   - 新建/编辑弹窗中 content 下方「✨ AI 改写」按钮（带风格选择） → 对比弹窗让用户确认
 *   - title 旁「✨ AI 生成标题」按钮 → 候选列表一键填入
 * - 删除确认（Popconfirm）
 * - 对接 api/scripts CRUD（mock 阶段 SCRIPTS_API_MOCK=true，AI 接口始终走真实 API）
 *
 * 风格对齐标题库（.xx-scripts-* 命名，沿用 CSS 变量）
 */
import React, { useCallback, useEffect, useState } from "react"
import {
  Button,
  Card,
  Empty,
  Form,
  Input,
  InputNumber,
  List,
  Modal,
  Pagination,
  Popconfirm,
  Select,
  Space,
  Spin,
  Tag,
  Tooltip,
  Typography,
  message,
} from "antd"
import {
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  CopyOutlined,
  PlayCircleOutlined,
  SearchOutlined,
  TagsOutlined,
  VideoCameraOutlined,
  RobotOutlined,
  BulbOutlined,
} from "@ant-design/icons"
import { useNavigate } from "react-router-dom"
import {
  getScripts,
  createScript,
  updateScript,
  deleteScript,
  duplicateScript,
  extractScriptFromDouyin,
  aiRewriteScript,
  aiGenerateTitles,
  REWRITE_STYLE_OPTIONS,
} from "@/api/scripts"
import type {
  ScriptItem,
  ScriptCategory,
  ScriptUpsertRequest,
  RewriteStyle,
  AiRewriteResponse,
} from "@/api/scripts"
import { SCRIPT_CATEGORY_LABEL } from "@/api/scripts"
import "./scripts.css"

const { TextArea } = Input
const { Paragraph, Text } = Typography

const PAGE_SIZE = 12
const CATEGORY_OPTIONS: { value: ScriptCategory | "all"; label: string }[] = [
  { value: "all", label: "全部分类" },
  ...Object.entries(SCRIPT_CATEGORY_LABEL).map(([value, label]) => ({
    value: value as ScriptCategory,
    label,
  })),
]

const FONT_OPTIONS = [
  { value: "default", label: "默认" },
  { value: "bold", label: "粗体" },
  { value: "handwritten", label: "手写" },
  { value: "serif", label: "衬线" },
]

const POSITION_OPTIONS = [
  { value: "top", label: "顶部" },
  { value: "center", label: "居中" },
  { value: "bottom", label: "底部" },
] as const

/** 提取后端返回的错误 detail（全局拦截器可能已弹 toast，但这里再兜一层） */
function extractErrMsg(err: unknown, fallback: string): string {
  const e = err as {
    response?: { data?: { detail?: string | { message?: string }; message?: string } }
    message?: string
  }
  const data = e?.response?.data
  if (data?.detail) {
    if (typeof data.detail === "string") return data.detail
    if (typeof data.detail.message === "string") return data.detail.message
  }
  if (data?.message && typeof data.message === "string") return data.message
  if (e?.message) return e.message
  return fallback
}

const ScriptLibrary: React.FC = () => {
  const navigate = useNavigate()

  const [items, setItems] = useState<ScriptItem[]>([])
  const [total, setTotal] = useState(0)
  const [page, setPage] = useState(1)
  const [loading, setLoading] = useState(false)
  const [keyword, setKeyword] = useState("")
  const [category, setCategory] = useState<ScriptCategory | "all">("all")

  // 主弹窗状态
  const [modalOpen, setModalOpen] = useState(false)
  const [editing, setEditing] = useState<ScriptItem | null>(null)
  const [submitting, setSubmitting] = useState(false)
  const [form] = Form.useForm<ScriptUpsertRequest & { tags_text?: string }>()

  // ── #1893 AI 能力状态 ──
  // 抖音提取
  const [douyinModalOpen, setDouyinModalOpen] = useState(false)
  const [douyinUrl, setDouyinUrl] = useState("")
  const [douyinLoading, setDouyinLoading] = useState(false)

  // AI 改写
  const [rewriteModalOpen, setRewriteModalOpen] = useState(false)
  const [rewriteStyle, setRewriteStyle] = useState<RewriteStyle>("口语化")
  const [rewriteLoading, setRewriteLoading] = useState(false)
  const [rewriteResult, setRewriteResult] = useState<AiRewriteResponse | null>(null)

  // AI 生成标题
  const [titleGenLoading, setTitleGenLoading] = useState(false)
  const [titleCandidates, setTitleCandidates] = useState<string[]>([])

  const load = useCallback(async () => {
    setLoading(true)
    try {
      const res = await getScripts({
        page,
        page_size: PAGE_SIZE,
        keyword: keyword.trim() || undefined,
        category,
      })
      if (Array.isArray(res)) {
        setItems(res)
        setTotal(res.length)
      } else {
        setItems(res.items ?? [])
        setTotal(res.total ?? 0)
      }
    } catch (err) {
      message.error(extractErrMsg(err, "加载文案列表失败"))
    } finally {
      setLoading(false)
    }
  }, [page, keyword, category])

  useEffect(() => {
    load()
  }, [load])

  const resetCreateForm = () => {
    form.resetFields()
    form.setFieldsValue({
      title: "",
      content: "",
      segments: [],
      tags: [],
      title_text: "",
      title_category: "other",
      title_config: {
        font: "default",
        color: "#ffffff",
        stroke: "#000000",
        position: "center",
        size: 48,
        bold: true,
        italic: false,
      },
    })
    setRewriteResult(null)
    setTitleCandidates([])
  }

  const openCreate = () => {
    setEditing(null)
    resetCreateForm()
    setModalOpen(true)
  }

  const openEdit = (item: ScriptItem) => {
    setEditing(item)
    form.setFieldsValue({
      title: item.title,
      content: item.content,
      segments: item.segments ?? item.content.split(/\n\n+/).filter(Boolean),
      tags: item.tags ?? [],
      title_text: item.title_text ?? "",
      title_category: item.title_category ?? "other",
      title_config: item.title_config ?? {
        font: "default",
        color: "#ffffff",
        stroke: "#000000",
        position: "center",
        size: 48,
      },
    })
    setRewriteResult(null)
    setTitleCandidates([])
    setModalOpen(true)
  }

  const closeModal = () => {
    setModalOpen(false)
    setEditing(null)
    setRewriteResult(null)
    setTitleCandidates([])
  }

  /** 提交新建/编辑 */
  const handleSubmit = async () => {
    try {
      const values = await form.validateFields()
      setSubmitting(true)
      const payload: ScriptUpsertRequest = {
        title: values.title.trim(),
        content: values.content,
        segments: values.segments?.filter(Boolean) ?? values.content.split(/\n\n+/).filter(Boolean),
        tags: values.tags ?? [],
        title_text: values.title_text?.trim() || undefined,
        title_category: values.title_category,
        title_config: values.title_config,
      }
      if (editing) {
        await updateScript(editing.id, payload)
        message.success("文案已更新")
      } else {
        await createScript(payload)
        message.success("文案已创建")
      }
      closeModal()
      await load()
    } catch (err) {
      if ((err as { errorFields?: unknown })?.errorFields) return
      message.error(extractErrMsg(err, "保存失败"))
    } finally {
      setSubmitting(false)
    }
  }

  const handleDelete = async (id: string) => {
    try {
      await deleteScript(id)
      message.success("文案已删除")
      if (items.length === 1 && page > 1) {
        setPage(page - 1)
      } else {
        await load()
      }
    } catch (err) {
      message.error(extractErrMsg(err, "删除失败"))
    }
  }

  const handleDuplicate = async (id: string) => {
    try {
      await duplicateScript(id)
      message.success("已复制")
      setPage(1)
      await load()
    } catch (err) {
      message.error(extractErrMsg(err, "复制失败"))
    }
  }

  /** 使用：跳创作页，query 带 scriptId 预填 */
  const handleUse = (item: ScriptItem) => {
    navigate(`/app/generate?scriptId=${encodeURIComponent(item.id)}`)
  }

  const preview = (content: string) => {
    const text = content.replace(/\s+/g, " ").trim()
    if (text.length <= 100) return text || "（空）"
    return `${text.slice(0, 100)}…`
  }

  const formatTime = (iso?: string) => {
    if (!iso) return "-"
    const d = new Date(iso)
    if (Number.isNaN(d.getTime())) return iso
    const pad = (n: number) => String(n).padStart(2, "0")
    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`
  }

  const categoryColor: Record<ScriptCategory, string> = {
    promo: "red",
    vlog: "blue",
    knowledge: "green",
    story: "purple",
    emotion: "magenta",
    other: "default",
  }

  // ── #1893 AI 操作 ──

  /** 打开抖音提取弹窗 */
  const openDouyinModal = () => {
    setDouyinUrl("")
    setDouyinModalOpen(true)
  }

  /** 执行抖音提取，成功后打开新建弹窗并预填 content */
  const handleDouyinExtract = async () => {
    const url = douyinUrl.trim()
    if (!url) {
      message.warning("请粘贴抖音视频链接")
      return
    }
    if (!/^https?:\/\//i.test(url)) {
      message.warning("请输入以 http(s):// 开头的完整链接")
      return
    }
    setDouyinLoading(true)
    try {
      const res = await extractScriptFromDouyin({ url })
      message.success(`提取成功${res.duration_seconds ? `（时长 ${res.duration_seconds}s）` : ""}`)
      setDouyinModalOpen(false)
      setDouyinUrl("")
      // 关闭抖音弹窗，打开新建弹窗预填 content
      setEditing(null)
      resetCreateForm()
      form.setFieldsValue({
        title: "",
        content: res.text,
        tags: [],
        title_text: "",
        title_category: "other",
        title_config: {
          font: "default",
          color: "#ffffff",
          stroke: "#000000",
          position: "center",
          size: 48,
          bold: true,
          italic: false,
        },
      })
      setModalOpen(true)
    } catch (err) {
      message.error(extractErrMsg(err, "抖音文案提取失败"))
    } finally {
      setDouyinLoading(false)
    }
  }

  /** 执行 AI 改写，结果写入 rewriteResult 让用户对比确认 */
  const handleAiRewrite = async () => {
    const content = form.getFieldValue("content") as string | undefined
    if (!content || !content.trim()) {
      message.warning("请先填写文案正文再改写")
      return
    }
    setRewriteLoading(true)
    setRewriteResult(null)
    try {
      const res = await aiRewriteScript({ content, style: rewriteStyle })
      setRewriteResult(res)
    } catch (err) {
      message.error(extractErrMsg(err, "AI 改写失败"))
    } finally {
      setRewriteLoading(false)
    }
  }

  /** 应用改写结果：替换 content 字段，关闭改写弹窗 */
  const applyRewrite = () => {
    if (!rewriteResult) return
    form.setFieldsValue({ content: rewriteResult.rewritten })
    setRewriteResult(null)
    setRewriteModalOpen(false)
    message.success("已应用改写结果")
  }

  /** 执行 AI 生成标题，生成候选 */
  const handleGenerateTitles = async () => {
    const content = form.getFieldValue("content") as string | undefined
    if (!content || !content.trim()) {
      message.warning("请先填写文案内容")
      return
    }
    setTitleGenLoading(true)
    setTitleCandidates([])
    try {
      const res = await aiGenerateTitles({ content, count: 3 })
      if (!res.titles || res.titles.length === 0) {
        message.info("AI 未返回可用标题，请稍后再试")
        return
      }
      setTitleCandidates(res.titles)
    } catch (err) {
      message.error(extractErrMsg(err, "AI 生成标题失败"))
    } finally {
      setTitleGenLoading(false)
    }
  }

  /** 点击候选标题直接填入 title 字段 */
  const pickTitle = (t: string) => {
    form.setFieldsValue({ title: t })
  }

  // 监听 content 字段，用于禁用生成标题按钮（content 为空时）
  const watchedContent = Form.useWatch("content", form)
  const contentEmpty = !watchedContent || !String(watchedContent).trim()

  return (
    <div className="xx-scripts-page">
      <div className="xx-scripts-layout">
        {/* 顶部筛选栏 */}
        <div className="xx-scripts-filters">
          <Space wrap size={12} className="xx-scripts-filters-left">
            <Input
              prefix={<SearchOutlined />}
              placeholder="搜索标题或正文"
              value={keyword}
              onChange={(e) => {
                setKeyword(e.target.value)
                setPage(1)
              }}
              allowClear
              style={{ width: 260 }}
            />
            <Select
              value={category}
              onChange={(v) => {
                setCategory(v)
                setPage(1)
              }}
              style={{ width: 140 }}
              options={CATEGORY_OPTIONS}
            />
          </Space>
          <div className="xx-scripts-filters-right">
            <Button icon={<VideoCameraOutlined />} onClick={openDouyinModal}>
              🎬 从抖音提取
            </Button>
            <Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>
              新建文案
            </Button>
          </div>
        </div>

        {/* 列表 */}
        {loading ? (
          <div className="xx-scripts-loading">加载中…</div>
        ) : items.length === 0 ? (
          <Empty
            description={
              keyword || category !== "all"
                ? "没有匹配的文案"
                : "暂无文案，点击右上角「新建文案」或「🎬 从抖音提取」开始创作"
            }
          />
        ) : (
          <>
            <div className="xx-scripts-list">
              {items.map((s) => (
                <Card key={s.id} className="xx-script-card" hoverable size="small">
                  <div className="xx-script-card-header">
                    <div className="xx-script-title-row">
                      <span className="xx-script-title">{s.title}</span>
                      {s.title_category && (
                        <Tag color={categoryColor[s.title_category] ?? "default"}>
                          {SCRIPT_CATEGORY_LABEL[s.title_category]}
                        </Tag>
                      )}
                    </div>
                    <Space size={4} className="xx-script-actions">
                      <Button
                        size="small"
                        type="text"
                        icon={<PlayCircleOutlined />}
                        onClick={() => handleUse(s)}
                      >
                        使用
                      </Button>
                      <Button
                        size="small"
                        type="text"
                        icon={<CopyOutlined />}
                        onClick={() => handleDuplicate(s.id)}
                      >
                        复制
                      </Button>
                      <Button
                        size="small"
                        type="text"
                        icon={<EditOutlined />}
                        onClick={() => openEdit(s)}
                      >
                        编辑
                      </Button>
                      <Popconfirm
                        title="确认删除此文案？"
                        description="删除后不可恢复"
                        okText="删除"
                        cancelText="取消"
                        okButtonProps={{ danger: true }}
                        onConfirm={() => handleDelete(s.id)}
                      >
                        <Button size="small" type="text" danger icon={<DeleteOutlined />}>
                          删除
                        </Button>
                      </Popconfirm>
                    </Space>
                  </div>

                  <div className="xx-script-preview">{preview(s.content)}</div>

                  {s.title_text && (
                    <div className="xx-script-title-text">
                      <span className="xx-script-label">配套标题：</span>
                      {s.title_text}
                    </div>
                  )}

                  {s.tags && s.tags.length > 0 && (
                    <div className="xx-script-tags">
                      <TagsOutlined
                        style={{ color: "var(--text-tertiary, #999)", marginRight: 4 }}
                      />
                      {s.tags.map((t, i) => (
                        <Tag key={`${t}-${i}`} color="blue">
                          {t}
                        </Tag>
                      ))}
                    </div>
                  )}

                  <div className="xx-script-meta">
                    <span>{s.char_count ?? s.content.length} 字</span>
                    <span className="xx-script-meta-sep">·</span>
                    <span>使用 {s.use_count ?? 0} 次</span>
                    <span className="xx-script-meta-sep">·</span>
                    <span>{formatTime(s.updated_at ?? s.created_at)}</span>
                  </div>
                </Card>
              ))}
            </div>

            {total > PAGE_SIZE && (
              <div className="xx-scripts-pagination">
                <Pagination
                  current={page}
                  pageSize={PAGE_SIZE}
                  total={total}
                  onChange={(p) => setPage(p)}
                  showSizeChanger={false}
                />
              </div>
            )}
          </>
        )}
      </div>

      {/* 新建/编辑弹窗 */}
      <Modal
        title={editing ? "编辑文案" : "新建文案"}
        open={modalOpen}
        onCancel={closeModal}
        onOk={handleSubmit}
        confirmLoading={submitting}
        destroyOnClose
        okText={editing ? "保存" : "创建"}
        cancelText="取消"
        width={680}
      >
        <Form
          form={form}
          layout="vertical"
          initialValues={{
            title_category: "other",
            title_config: {
              font: "default",
              color: "#ffffff",
              stroke: "#000000",
              position: "center",
              size: 48,
              bold: true,
            },
          }}
        >
          <Form.Item
            name="title"
            label={
              <span>
                名称
                {/* #1893 UX: disabled 时原生 title 在 antd Button 上不触发，
                    用 Tooltip + span 包裹保证提示可见 */}
                <Tooltip
                  title={contentEmpty ? "请先填写文案内容" : "基于正文 AI 生成 3 个候选标题"}
                >
                  <span style={{ display: "inline-flex", marginLeft: 4 }}>
                    <Button
                      type="link"
                      size="small"
                      icon={<BulbOutlined />}
                      loading={titleGenLoading}
                      disabled={contentEmpty}
                      onClick={handleGenerateTitles}
                      style={{ padding: "0 4px", height: 22 }}
                    >
                      ✨ AI 生成标题
                    </Button>
                  </span>
                </Tooltip>
              </span>
            }
            rules={[{ required: true, message: "请填写文案名称" }, { max: 200 }]}
          >
            <Input placeholder="给这段文案起个名字" maxLength={200} />
          </Form.Item>

          {/* AI 生成标题候选列表 */}
          {titleCandidates.length > 0 && (
            <div className="xx-ai-title-candidates">
              <Text type="secondary" style={{ fontSize: 12 }}>
                点击候选直接填入：
              </Text>
              <div className="xx-ai-title-list">
                {titleCandidates.map((t, i) => (
                  <Tag
                    key={`${t}-${i}`}
                    color="purple"
                    className="xx-ai-title-tag"
                    onClick={() => pickTitle(t)}
                  >
                    {t}
                  </Tag>
                ))}
              </div>
            </div>
          )}

          <Form.Item
            name="content"
            label="正文"
            rules={[{ required: true, message: "请填写正文" }]}
            extra="段落间用空行分隔，保存时会自动按空行切分为 segments。"
          >
            <TextArea placeholder="在这里输入文案正文…" rows={6} maxLength={10000} />
          </Form.Item>

          {/* AI 改写工具条 */}
          <div className="xx-ai-rewrite-bar">
            <Space size={8} wrap>
              <Select
                value={rewriteStyle}
                onChange={setRewriteStyle}
                options={REWRITE_STYLE_OPTIONS}
                style={{ width: 110 }}
                size="small"
                disabled={rewriteLoading}
              />
              {/* #1893 UX: content 为空时禁用改写按钮并给提示，避免用户点了才弹 warning */}
              <Tooltip title={contentEmpty ? "请先填写文案正文再改写" : ""}>
                <span style={{ display: "inline-flex" }}>
                  <Button
                    size="small"
                    icon={<RobotOutlined />}
                    loading={rewriteLoading}
                    disabled={contentEmpty}
                    onClick={() => {
                      // 每次打开重置上一次结果，避免误看旧对比
                      if (!rewriteLoading) {
                        setRewriteResult(null)
                        setRewriteModalOpen(true)
                      }
                    }}
                  >
                    ✨ AI 改写
                  </Button>
                </span>
              </Tooltip>
              {rewriteResult && !contentEmpty && (
                <Button size="small" type="link" onClick={() => setRewriteModalOpen(true)}>
                  查看上一次改写结果
                </Button>
              )}
            </Space>
          </div>

          <Form.Item name="segments" hidden>
            <Input />
          </Form.Item>

          <Form.Item name="title_text" label="配套标题（选填）" rules={[{ max: 200 }]}>
            <Input placeholder="使用此文案时自动带入的标题文本" maxLength={200} />
          </Form.Item>

          <Space size={16} style={{ display: "flex" }}>
            <Form.Item name="title_category" label="分类" style={{ flex: 1, marginBottom: 0 }}>
              <Select options={CATEGORY_OPTIONS.filter((o) => o.value !== "all")} />
            </Form.Item>
            <Form.Item
              name={["title_config", "position"]}
              label="标题位置"
              style={{ flex: 1, marginBottom: 0 }}
            >
              <Select options={POSITION_OPTIONS as unknown as { value: string; label: string }[]} />
            </Form.Item>
          </Space>

          <Space size={16} style={{ display: "flex", marginTop: 12 }}>
            <Form.Item
              name={["title_config", "font"]}
              label="字体"
              style={{ flex: 1, marginBottom: 0 }}
            >
              <Select options={FONT_OPTIONS} />
            </Form.Item>
            <Form.Item
              name={["title_config", "size"]}
              label="字号"
              style={{ flex: 1, marginBottom: 0 }}
            >
              <InputNumber min={20} max={120} style={{ width: "100%" }} addonAfter="px" />
            </Form.Item>
          </Space>

          <Space size={16} style={{ display: "flex", marginTop: 12 }}>
            <Form.Item
              name={["title_config", "color"]}
              label="文字颜色"
              style={{ flex: 1, marginBottom: 0 }}
            >
              <Input type="color" style={{ width: "100%", height: 32, padding: 4 }} />
            </Form.Item>
            <Form.Item
              name={["title_config", "stroke"]}
              label="描边色"
              style={{ flex: 1, marginBottom: 0 }}
            >
              <Input type="color" style={{ width: "100%", height: 32, padding: 4 }} />
            </Form.Item>
          </Space>

          <Form.Item name="tags" label="标签" style={{ marginTop: 12 }}>
            <Select
              mode="tags"
              placeholder="输入标签后回车添加"
              tokenSeparators={[",", "，"]}
              style={{ width: "100%" }}
            />
          </Form.Item>
        </Form>
      </Modal>

      {/* 抖音提取弹窗 */}
      <Modal
        title="🎬 从抖音视频提取文案"
        open={douyinModalOpen}
        onCancel={() => !douyinLoading && setDouyinModalOpen(false)}
        onOk={handleDouyinExtract}
        confirmLoading={douyinLoading}
        okText="开始提取"
        cancelText="取消"
        maskClosable={!douyinLoading}
        closable={!douyinLoading}
        destroyOnClose
      >
        <Paragraph type="secondary" style={{ marginBottom: 12, fontSize: 13 }}>
          粘贴抖音分享链接（支持 v.douyin.com 短链和 www.douyin.com/video/ 长链）， AI
          将自动下载音频并识别文案。首次识别可能需要 5-15 秒。
        </Paragraph>
        <Input.TextArea
          placeholder="例如：https://v.douyin.com/xxxxx/ 或 https://www.douyin.com/video/xxxxx"
          value={douyinUrl}
          onChange={(e) => setDouyinUrl(e.target.value)}
          rows={2}
          autoSize={{ minRows: 2, maxRows: 4 }}
          disabled={douyinLoading}
        />
        {douyinLoading && (
          <div className="xx-ai-loading-hint">
            <Spin size="small" style={{ marginRight: 8 }} />
            正在下载视频并识别文案，可能需要数秒，请稍候…
          </div>
        )}
      </Modal>

      {/* AI 改写对比弹窗 */}
      <Modal
        title={`✨ AI 改写（${rewriteStyle}风格）`}
        open={rewriteModalOpen}
        onCancel={() => !rewriteLoading && setRewriteModalOpen(false)}
        maskClosable={!rewriteLoading}
        closable={!rewriteLoading}
        footer={
          rewriteResult ? (
            <Space>
              <Button onClick={() => setRewriteModalOpen(false)}>保留原文</Button>
              <Button type="primary" onClick={applyRewrite}>
                应用改写
              </Button>
            </Space>
          ) : (
            <Button disabled={rewriteLoading} onClick={() => setRewriteModalOpen(false)}>
              关闭
            </Button>
          )
        }
        width={640}
        destroyOnClose={false}
      >
        {!rewriteResult && !rewriteLoading && (
          <Paragraph type="secondary" style={{ marginBottom: 16 }}>
            将以「{rewriteStyle}」风格改写正文，生成后可对比确认是否应用。
          </Paragraph>
        )}
        {rewriteLoading && (
          <div className="xx-ai-loading-hint" style={{ padding: "32px 0" }}>
            <Spin tip="AI 改写中…" />
          </div>
        )}
        {rewriteResult && (
          <List
            dataSource={[
              { label: "原文", text: rewriteResult.original, type: "original" },
              {
                label: `改写（${rewriteResult.style}）`,
                text: rewriteResult.rewritten,
                type: "rewrite",
              },
            ]}
            renderItem={(item) => (
              <List.Item className="xx-ai-rewrite-item">
                <div className="xx-ai-rewrite-block">
                  <div className="xx-ai-rewrite-label">
                    <Tag color={item.type === "original" ? "default" : "purple"}>{item.label}</Tag>
                  </div>
                  <Paragraph
                    className="xx-ai-rewrite-text"
                    style={{ whiteSpace: "pre-wrap", marginBottom: 0 }}
                  >
                    {item.text}
                  </Paragraph>
                </div>
              </List.Item>
            )}
          />
        )}
        {!rewriteResult && !rewriteLoading && (
          <div style={{ textAlign: "center" }}>
            <Button
              type="primary"
              icon={<RobotOutlined />}
              loading={rewriteLoading}
              onClick={handleAiRewrite}
            >
              开始改写
            </Button>
          </div>
        )}
      </Modal>
    </div>
  )
}

export default ScriptLibrary