/**
 * 标题库页面 — V21 设计系统
 * 两栏布局：左侧分类列表（220px）+ 右侧标题卡片网格（3列）
 * 支持：标题卡片展示、AI 生成标题、复制/编辑/删除、收藏、分类筛选、搜索
 * 使用 mock 数据，后端 API 对接暂不要求
 */
import React, { useMemo, useState, useCallback } from "react";
import { Modal as AntModal, message, Popconfirm } from "antd";
import {
  PlusOutlined,
  SearchOutlined,
  DeleteOutlined,
  EditOutlined,
  CopyOutlined,
  CheckOutlined,
  RobotOutlined,
  StarOutlined,
  StarFilled,
  FileTextOutlined,
} from "@ant-design/icons";
import { Button, Input, Select } from "@/components/ui";
import "./titles.css";

/* ============================================================
 * 类型
 * ============================================================ */
type TitleType = "hot" | "normal" | "creative";
type Industry = "general" | "food" | "tech" | "beauty" | "education" | "travel";
type Frequency = "all" | "high" | "medium" | "low";

interface CategoryItem {
  id: string;
  name: string;
  count: number;
}

interface TitleData {
  id: string;
  content: string;
  type: TitleType;
  industry: Industry;
  usageCount: number;
  isFavorited: boolean;
  createdAt: string;
}

/* ============================================================
 * Mock 数据
 * ============================================================ */
const MOCK_CATEGORIES: CategoryItem[] = [
  { id: "cat-all", name: "全部标题", count: 15 },
  { id: "cat-1", name: "美食探店", count: 4 },
  { id: "cat-2", name: "科技数码", count: 3 },
  { id: "cat-3", name: "生活日常", count: 4 },
  { id: "cat-4", name: "美妆穿搭", count: 2 },
  { id: "cat-5", name: "教育学习", count: 2 },
];

const MOCK_TITLES: TitleData[] = [
  {
    id: "t-1",
    content: "这家隐藏在巷子里的小店，味道绝了！",
    type: "hot",
    industry: "food",
    usageCount: 128,
    isFavorited: true,
    createdAt: "2026-06-28",
  },
  {
    id: "t-2",
    content: "2026 年最值得入手的 5 款蓝牙耳机",
    type: "hot",
    industry: "tech",
    usageCount: 96,
    isFavorited: false,
    createdAt: "2026-06-27",
  },
  {
    id: "t-3",
    content: "周末在家做了一道妈妈的味道",
    type: "normal",
    industry: "food",
    usageCount: 42,
    isFavorited: false,
    createdAt: "2026-06-26",
  },
  {
    id: "t-4",
    content: "用 AI 帮我写了一周的小红书文案，效果惊人",
    type: "hot",
    industry: "tech",
    usageCount: 215,
    isFavorited: true,
    createdAt: "2026-06-25",
  },
  {
    id: "t-5",
    content: "今天穿了一套被路人要链接的衣服",
    type: "creative",
    industry: "beauty",
    usageCount: 67,
    isFavorited: false,
    createdAt: "2026-06-24",
  },
  {
    id: "t-6",
    content: "分享我的早起 5 点俱乐部 30 天打卡体验",
    type: "normal",
    industry: "education",
    usageCount: 38,
    isFavorited: true,
    createdAt: "2026-06-23",
  },
  {
    id: "t-7",
    content: "这个平价面霜居然比大牌还好用？",
    type: "hot",
    industry: "beauty",
    usageCount: 183,
    isFavorited: false,
    createdAt: "2026-06-22",
  },
  {
    id: "t-8",
    content: "一个人的旅行也可以很精彩",
    type: "normal",
    industry: "travel",
    usageCount: 55,
    isFavorited: false,
    createdAt: "2026-06-21",
  },
  {
    id: "t-9",
    content: "考研上岸！我的备考时间管理方法全公开",
    type: "hot",
    industry: "education",
    usageCount: 147,
    isFavorited: true,
    createdAt: "2026-06-20",
  },
  {
    id: "t-10",
    content: "把旧 T 恤改造成时尚单品，零成本！",
    type: "creative",
    industry: "beauty",
    usageCount: 29,
    isFavorited: false,
    createdAt: "2026-06-19",
  },
  {
    id: "t-11",
    content: "这家咖啡馆的氛围感也太好了吧",
    type: "normal",
    industry: "food",
    usageCount: 74,
    isFavorited: false,
    createdAt: "2026-06-18",
  },
  {
    id: "t-12",
    content: "手机摄影技巧：拍出电影感画面",
    type: "creative",
    industry: "tech",
    usageCount: 61,
    isFavorited: false,
    createdAt: "2026-06-17",
  },
  {
    id: "t-13",
    content: "带娃旅行必备清单，少带一样都崩溃",
    type: "hot",
    industry: "travel",
    usageCount: 109,
    isFavorited: false,
    createdAt: "2026-06-16",
  },
  {
    id: "t-14",
    content: "30 天学会一门新语言？我的实验记录",
    type: "creative",
    industry: "education",
    usageCount: 33,
    isFavorited: false,
    createdAt: "2026-06-15",
  },
  {
    id: "t-15",
    content: "今天做了一道让全家惊艳的菜",
    type: "normal",
    industry: "food",
    usageCount: 48,
    isFavorited: false,
    createdAt: "2026-06-14",
  },
];

/* ============================================================
 * 工具函数
 * ============================================================ */
const typeLabel = (type: TitleType): string => {
  switch (type) {
    case "hot":
      return "爆款";
    case "normal":
      return "常规";
    case "creative":
      return "创意";
  }
};

/** 复制文本到剪贴板 */
const copyToClipboard = async (text: string): Promise<boolean> => {
  try {
    await navigator.clipboard.writeText(text);
    return true;
  } catch {
    /* 降级方案 */
    const textarea = document.createElement("textarea");
    textarea.value = text;
    textarea.style.position = "fixed";
    textarea.style.opacity = "0";
    document.body.appendChild(textarea);
    textarea.select();
    try {
      document.execCommand("copy");
      return true;
    } catch {
      return false;
    } finally {
      document.body.removeChild(textarea);
    }
  }
};

/* ============================================================
 * TitleCard 组件
 * ============================================================ */
const TitleCard: React.FC<{
  title: TitleData;
  isEditing: boolean;
  editText: string;
  onEditChange: (text: string) => void;
  onStartEdit: () => void;
  onSaveEdit: () => void;
  onCancelEdit: () => void;
  onCopy: () => void;
  onDelete: () => void;
  onToggleFavorite: () => void;
}> = ({
  title,
  isEditing,
  editText,
  onEditChange,
  onStartEdit,
  onSaveEdit,
  onCancelEdit,
  onCopy,
  onDelete,
  onToggleFavorite,
}) => {
  return (
    <div className="xx-title-card">
      {/* 收藏按钮 */}
      <button
        className="xx-title-fav-btn"
        onClick={onToggleFavorite}
        title={title.isFavorited ? "取消收藏" : "收藏"}
        style={{
          position: "absolute",
          top: 12,
          right: 12,
          color: title.isFavorited ? "#f59e0b" : "var(--text-tertiary)",
        }}
      >
        {title.isFavorited ? <StarFilled /> : <StarOutlined />}
      </button>

      {/* 标题文本 / 编辑区 */}
      {isEditing ? (
        <textarea
          className="xx-title-card-edit"
          value={editText}
          onChange={(e) => onEditChange(e.target.value)}
          autoFocus
          onKeyDown={(e) => {
            if (e.key === "Enter" && !e.shiftKey) {
              e.preventDefault();
              onSaveEdit();
            }
            if (e.key === "Escape") {
              onCancelEdit();
            }
          }}
        />
      ) : (
        <div className="xx-title-card-text" style={{ paddingRight: 24 }}>
          {title.content}
        </div>
      )}

      {/* 底部元信息 */}
      <div className="xx-title-card-meta">
        <div className="xx-title-card-meta-left">
          <span className={`xx-title-type-tag ${title.type}`}>
            {typeLabel(title.type)}
          </span>
          <span className="xx-title-card-stat">使用 {title.usageCount} 次</span>
          <span className="xx-title-card-stat">{title.createdAt}</span>
        </div>

        <div className="xx-title-card-actions">
          {isEditing ? (
            <>
              <button
                className="xx-title-card-action-btn"
                onClick={onSaveEdit}
                title="保存"
              >
                <CheckOutlined />
              </button>
              <button
                className="xx-title-card-action-btn"
                onClick={onCancelEdit}
                title="取消"
              >
                ✕
              </button>
            </>
          ) : (
            <>
              <button
                className="xx-title-card-action-btn"
                onClick={onCopy}
                title="复制"
              >
                <CopyOutlined />
              </button>
              <button
                className="xx-title-card-action-btn"
                onClick={onStartEdit}
                title="编辑"
              >
                <EditOutlined />
              </button>
              <Popconfirm
                title="确定删除此标题？"
                onConfirm={onDelete}
                okText="删除"
                cancelText="取消"
              >
                <button
                  className="xx-title-card-action-btn danger"
                  title="删除"
                >
                  <DeleteOutlined />
                </button>
              </Popconfirm>
            </>
          )}
        </div>
      </div>
    </div>
  );
};

/* ============================================================
 * 主组件
 * ============================================================ */
const TitleLibrary: React.FC = () => {
  /* 分类数据 */
  const [categories, setCategories] = useState<CategoryItem[]>(MOCK_CATEGORIES);
  const [activeCatId, setActiveCatId] = useState<string>(MOCK_CATEGORIES[0].id);

  /* 标题数据 */
  const [titles, setTitles] = useState<TitleData[]>(MOCK_TITLES);

  /* 筛选 */
  const [searchText, setSearchText] = useState("");
  const [filterType, setFilterType] = useState<string>("all");
  const [filterIndustry, setFilterIndustry] = useState<string>("all");
  const [filterFrequency, setFilterFrequency] = useState<Frequency>("all");

  /* 编辑状态 */
  const [editingId, setEditingId] = useState<string | null>(null);
  const [editText, setEditText] = useState("");

  /* 新建分类 */
  const [createCatModalOpen, setCreateCatModalOpen] = useState(false);
  const [newCatName, setNewCatName] = useState("");

  /* 新建标题 */
  const [createTitleModalOpen, setCreateTitleModalOpen] = useState(false);
  const [newTitleContent, setNewTitleContent] = useState("");
  const [newTitleType, setNewTitleType] = useState<TitleType>("normal");

  /* AI 生成 */
  const [aiModalOpen, setAiModalOpen] = useState(false);
  const [aiKeyword, setAiKeyword] = useState("");
  const [aiLoading, setAiLoading] = useState(false);
  const [aiResults, setAiResults] = useState<string[]>([]);

  /* 派生数据 */
  const activeCategory = categories.find((c) => c.id === activeCatId);

  const filteredTitles = useMemo(() => {
    let list = titles;

    /* 按分类过滤（"全部标题" 不过滤） */
    if (activeCatId !== "cat-all") {
      const catName = activeCategory?.name || "";
      const catToIndustry: Record<string, Industry> = {
        美食探店: "food",
        科技数码: "tech",
        生活日常: "general",
        美妆穿搭: "beauty",
        教育学习: "education",
      };
      const mappedIndustry = catToIndustry[catName];
      if (mappedIndustry) {
        list = list.filter((t) => t.industry === mappedIndustry);
      }
    }

    /* 按类型筛选 */
    if (filterType !== "all") {
      list = list.filter((t) => t.type === filterType);
    }

    /* 按行业筛选 */
    if (filterIndustry !== "all") {
      list = list.filter((t) => t.industry === filterIndustry);
    }

    /* 按使用频率筛选 */
    if (filterFrequency !== "all") {
      switch (filterFrequency) {
        case "high":
          list = list.filter((t) => t.usageCount >= 100);
          break;
        case "medium":
          list = list.filter((t) => t.usageCount >= 30 && t.usageCount < 100);
          break;
        case "low":
          list = list.filter((t) => t.usageCount < 30);
          break;
      }
    }

    /* 搜索 */
    if (searchText.trim()) {
      const q = searchText.trim().toLowerCase();
      list = list.filter((t) => t.content.toLowerCase().includes(q));
    }

    return list;
  }, [
    titles,
    activeCatId,
    activeCategory,
    filterType,
    filterIndustry,
    filterFrequency,
    searchText,
  ]);

  /* 收藏切换 */
  const handleToggleFavorite = useCallback((id: string) => {
    setTitles((prev) =>
      prev.map((t) =>
        t.id === id ? { ...t, isFavorited: !t.isFavorited } : t,
      ),
    );
  }, []);

  /* 复制 */
  const handleCopy = useCallback(async (title: TitleData) => {
    const ok = await copyToClipboard(title.content);
    if (ok) {
      message.success("已复制到剪贴板");
    } else {
      message.error("复制失败");
    }
  }, []);

  /* 编辑 */
  const handleStartEdit = useCallback((title: TitleData) => {
    setEditingId(title.id);
    setEditText(title.content);
  }, []);

  const handleSaveEdit = useCallback(() => {
    if (!editText.trim()) {
      message.warning("标题内容不能为空");
      return;
    }
    setTitles((prev) =>
      prev.map((t) =>
        t.id === editingId ? { ...t, content: editText.trim() } : t,
      ),
    );
    setEditingId(null);
    setEditText("");
    message.success("标题已更新");
  }, [editingId, editText]);

  const handleCancelEdit = useCallback(() => {
    setEditingId(null);
    setEditText("");
  }, []);

  /* 删除 */
  const handleDelete = useCallback((id: string) => {
    setTitles((prev) => prev.filter((t) => t.id !== id));
    message.success("标题已删除");
  }, []);

  /* 新建分类 */
  const handleCreateCategory = () => {
    if (!newCatName.trim()) {
      message.warning("请输入分类名称");
      return;
    }
    const cat: CategoryItem = {
      id: `cat-${Date.now()}`,
      name: newCatName.trim(),
      count: 0,
    };
    setCategories((prev) => [...prev, cat]);
    setActiveCatId(cat.id);
    setCreateCatModalOpen(false);
    setNewCatName("");
    message.success(`分类 "${cat.name}" 创建成功`);
  };

  /* 删除分类 */
  const handleDeleteCategory = (id: string) => {
    setCategories((prev) => prev.filter((c) => c.id !== id));
    if (activeCatId === id) {
      setActiveCatId("cat-all");
    }
    message.success("分类已删除");
  };

  /* 新建标题 */
  const handleCreateTitle = () => {
    if (!newTitleContent.trim()) {
      message.warning("请输入标题内容");
      return;
    }
    const title: TitleData = {
      id: `t-${Date.now()}`,
      content: newTitleContent.trim(),
      type: newTitleType,
      industry: "general",
      usageCount: 0,
      isFavorited: false,
      createdAt: new Date().toISOString().slice(0, 10),
    };
    setTitles((prev) => [title, ...prev]);
    setCreateTitleModalOpen(false);
    setNewTitleContent("");
    setNewTitleType("normal");
    message.success("标题创建成功");
  };

  /* AI 生成标题 */
  const handleAIGenerate = () => {
    if (!aiKeyword.trim()) {
      message.warning("请输入关键词或主题");
      return;
    }
    setAiLoading(true);
    setAiResults([]);

    /* Mock AI 生成延迟 */
    setTimeout(() => {
      const keyword = aiKeyword.trim();
      const results = [
        `${keyword}：这个方法让我事半功倍！`,
        `关于${keyword}，99%的人都不知道的事`,
        `${keyword}全攻略，看完这篇就够了`,
        `我花了 3 个月研究${keyword}，总结出这些经验`,
        `${keyword}避坑指南，帮你省下 1000 块`,
      ];
      setAiResults(results);
      setAiLoading(false);
    }, 2000);
  };

  /* 采纳 AI 生成的标题 */
  const handleAdoptAITitle = (text: string) => {
    const title: TitleData = {
      id: `t-${Date.now()}`,
      content: text,
      type: "creative",
      industry: "general",
      usageCount: 0,
      isFavorited: false,
      createdAt: new Date().toISOString().slice(0, 10),
    };
    setTitles((prev) => [title, ...prev]);
    message.success("标题已采纳并添加到标题库");
  };

  /* 复制 AI 生成的标题 */
  const handleCopyAI = async (text: string) => {
    const ok = await copyToClipboard(text);
    if (ok) {
      message.success("已复制到剪贴板");
    } else {
      message.error("复制失败");
    }
  };

  return (
    <div className="xx-titles-page">
      {/* 两栏布局 */}
      <div className="xx-titles-layout">
        {/* ─── 左侧：分类列表 ─── */}
        <div className="xx-title-category-list">
          {categories.map((cat) => (
            <div
              key={cat.id}
              className={`xx-title-category-item${cat.id === activeCatId ? " active" : ""}`}
              onClick={() => setActiveCatId(cat.id)}
            >
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "space-between",
                  flex: 1,
                  minWidth: 0,
                }}
              >
                <div style={{ minWidth: 0 }}>
                  <h4 style={{ margin: 0 }}>
                    <FileTextOutlined /> {cat.name}
                  </h4>
                  <span>{cat.count} 条</span>
                </div>
                {cat.id !== "cat-all" && (
                  <Popconfirm
                    title={`确定删除分类 "${cat.name}"？`}
                    onConfirm={(e) => {
                      e?.stopPropagation();
                      handleDeleteCategory(cat.id);
                    }}
                    onCancel={(e) => e?.stopPropagation()}
                    okText="删除"
                    cancelText="取消"
                  >
                    <button
                      className="xx-title-category-delete"
                      onClick={(e) => e.stopPropagation()}
                      title="删除分类"
                    >
                      <DeleteOutlined />
                    </button>
                  </Popconfirm>
                )}
              </div>
            </div>
          ))}

          {/* 新建分类 */}
          <div
            className="xx-title-category-add"
            onClick={() => setCreateCatModalOpen(true)}
          >
            <PlusOutlined />
            新建分类
          </div>
        </div>

        {/* ─── 右侧：内容区 ─── */}
        <div className="xx-titles-content">
          {/* 筛选栏 */}
          <div className="xx-titles-filters">
            <div className="xx-titles-filters-left">
              <Input
                placeholder="搜索标题关键词..."
                prefix={<SearchOutlined />}
                value={searchText}
                onChange={(e) => setSearchText(e.target.value)}
                allowClear
                style={{ width: 220 }}
              />
              <Select
                value={filterType}
                onChange={setFilterType}
                style={{ width: 110 }}
                options={[
                  { value: "all", label: "全部类型" },
                  { value: "hot", label: "爆款" },
                  { value: "normal", label: "常规" },
                  { value: "creative", label: "创意" },
                ]}
              />
              <Select
                value={filterIndustry}
                onChange={setFilterIndustry}
                style={{ width: 110 }}
                options={[
                  { value: "all", label: "全部行业" },
                  { value: "food", label: "美食" },
                  { value: "tech", label: "科技" },
                  { value: "beauty", label: "美妆" },
                  { value: "education", label: "教育" },
                  { value: "travel", label: "旅行" },
                ]}
              />
              <Select
                value={filterFrequency}
                onChange={(v) => setFilterFrequency(v as Frequency)}
                style={{ width: 120 }}
                options={[
                  { value: "all", label: "全部频率" },
                  { value: "high", label: "高频使用" },
                  { value: "medium", label: "中频使用" },
                  { value: "low", label: "低频使用" },
                ]}
              />
            </div>
            <div className="xx-titles-filters-right">
              <Button
                buttonType="ghost"
                buttonSize="sm"
                icon={<PlusOutlined />}
                onClick={() => setCreateTitleModalOpen(true)}
              >
                新建标题
              </Button>
              <Button
                buttonType="primary"
                buttonSize="sm"
                icon={<RobotOutlined />}
                onClick={() => setAiModalOpen(true)}
              >
                AI 生成标题
              </Button>
            </div>
          </div>

          {/* 标题卡片网格 */}
          {filteredTitles.length > 0 ? (
            <div className="xx-title-grid">
              {filteredTitles.map((title) => (
                <TitleCard
                  key={title.id}
                  title={title}
                  isEditing={editingId === title.id}
                  editText={editingId === title.id ? editText : ""}
                  onEditChange={setEditText}
                  onStartEdit={() => handleStartEdit(title)}
                  onSaveEdit={handleSaveEdit}
                  onCancelEdit={handleCancelEdit}
                  onCopy={() => handleCopy(title)}
                  onDelete={() => handleDelete(title.id)}
                  onToggleFavorite={() => handleToggleFavorite(title.id)}
                />
              ))}
            </div>
          ) : (
            <div className="xx-titles-empty">
              <div className="xx-titles-empty-icon">
                <FileTextOutlined />
              </div>
              <p>
                {searchText
                  ? "未找到匹配的标题"
                  : "暂无标题，点击「新建标题」或「AI 生成标题」开始"}
              </p>
            </div>
          )}
        </div>
      </div>

      {/* ─── 新建分类弹窗 ─── */}
      <AntModal
        title="新建分类"
        open={createCatModalOpen}
        onCancel={() => setCreateCatModalOpen(false)}
        onOk={handleCreateCategory}
        okText="创建"
        cancelText="取消"
        destroyOnClose
      >
        <div style={{ padding: "8px 0" }}>
          <div
            style={{
              marginBottom: 6,
              fontSize: "var(--font-size-sm)",
              color: "var(--text-secondary)",
            }}
          >
            分类名称
          </div>
          <Input
            placeholder="请输入分类名称"
            value={newCatName}
            onChange={(e) => setNewCatName(e.target.value)}
            maxLength={30}
          />
        </div>
      </AntModal>

      {/* ─── 新建标题弹窗 ─── */}
      <AntModal
        title="新建标题"
        open={createTitleModalOpen}
        onCancel={() => setCreateTitleModalOpen(false)}
        onOk={handleCreateTitle}
        okText="创建"
        cancelText="取消"
        destroyOnClose
      >
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            gap: 16,
            padding: "8px 0",
          }}
        >
          <div>
            <div
              style={{
                marginBottom: 6,
                fontSize: "var(--font-size-sm)",
                color: "var(--text-secondary)",
              }}
            >
              标题内容
            </div>
            <Input.TextArea
              placeholder="请输入标题内容"
              value={newTitleContent}
              onChange={(e) => setNewTitleContent(e.target.value)}
              rows={3}
              maxLength={200}
              showCount
            />
          </div>
          <div>
            <div
              style={{
                marginBottom: 6,
                fontSize: "var(--font-size-sm)",
                color: "var(--text-secondary)",
              }}
            >
              标题类型
            </div>
            <Select
              value={newTitleType}
              onChange={(v) => setNewTitleType(v)}
              style={{ width: "100%" }}
              options={[
                { value: "hot", label: "爆款" },
                { value: "normal", label: "常规" },
                { value: "creative", label: "创意" },
              ]}
            />
          </div>
        </div>
      </AntModal>

      {/* ─── AI 生成标题弹窗 ─── */}
      <AntModal
        title="AI 生成标题"
        open={aiModalOpen}
        onCancel={() => {
          setAiModalOpen(false);
          setAiLoading(false);
          setAiResults([]);
          setAiKeyword("");
        }}
        onOk={handleAIGenerate}
        okText={aiLoading ? "生成中..." : "生成"}
        cancelText="关闭"
        okButtonProps={{ disabled: aiLoading }}
        destroyOnClose
        width={640}
      >
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            gap: 16,
            padding: "8px 0",
          }}
        >
          <div>
            <div
              style={{
                marginBottom: 6,
                fontSize: "var(--font-size-sm)",
                color: "var(--text-secondary)",
              }}
            >
              输入关键词或主题
            </div>
            <Input
              placeholder="例如：美食探店、科技评测、旅行攻略..."
              value={aiKeyword}
              onChange={(e) => setAiKeyword(e.target.value)}
              maxLength={100}
              onPressEnter={handleAIGenerate}
            />
          </div>

          {/* AI 加载动画 */}
          {aiLoading && (
            <div className="xx-ai-loading">
              <div className="xx-ai-loading-dots">
                <div className="xx-ai-loading-dot" />
                <div className="xx-ai-loading-dot" />
                <div className="xx-ai-loading-dot" />
              </div>
              <span>AI 正在生成标题候选...</span>
            </div>
          )}

          {/* AI 生成结果列表 */}
          {aiResults.length > 0 && (
            <div className="xx-ai-results">
              <div
                style={{
                  fontSize: "var(--font-size-sm)",
                  color: "var(--text-secondary)",
                  marginBottom: 4,
                }}
              >
                已生成 {aiResults.length} 个候选标题，点击采纳或复制：
              </div>
              {aiResults.map((text, idx) => (
                <div key={idx} className="xx-ai-result-item">
                  <span className="xx-ai-result-text">{text}</span>
                  <div className="xx-ai-result-actions">
                    <Button
                      buttonType="ghost"
                      buttonSize="sm"
                      icon={<CopyOutlined />}
                      onClick={() => handleCopyAI(text)}
                    >
                      复制
                    </Button>
                    <Button
                      buttonType="primary"
                      buttonSize="sm"
                      icon={<CheckOutlined />}
                      onClick={() => handleAdoptAITitle(text)}
                    >
                      采纳
                    </Button>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </AntModal>
    </div>
  );
};

export default TitleLibrary;
