xiaoxia-saas/apps/web/src/pages/ai-avatar/components/TitleLibraryModal.tsx

/**
 * AI数字人 — 标题库选择弹窗
 * 复用智能剪辑的标题库 API，选择标题后填入输入框
 */
import React, { useEffect, useState } from "react"
import { getTitles } from "@/api/titles"
import type { TitleItem } from "@/api/titles/types"

interface TitleLibraryModalProps {
  open: boolean
  onClose: () => void
  onSelect: (title: string) => void
}

const TitleLibraryModal: React.FC<TitleLibraryModalProps> = ({ open, onClose, onSelect }) => {
  const [titles, setTitles] = useState<TitleItem[]>([])
  const [loading, setLoading] = useState(false)
  const [search, setSearch] = useState("")

  useEffect(() => {
    if (!open) return
    setLoading(true)
    getTitles()
      .then((items) => setTitles(items))
      .catch(() => setTitles([]))
      .finally(() => setLoading(false))
  }, [open])

  const filtered = titles.filter(
    (t) => !search || t.content.toLowerCase().includes(search.toLowerCase()),
  )

  if (!open) return null

  return (
    <div className="aa-modal-overlay" onClick={onClose}>
      <div className="aa-modal" onClick={(e) => e.stopPropagation()} style={{ maxWidth: 600 }}>
        <div className="aa-modal__header">
          <span className="aa-modal__title">从标题库选择</span>
          <button className="aa-modal__close" onClick={onClose}></button>
        </div>
        <div className="aa-modal__body">
          <div style={{ marginBottom: 12 }}>
            <input
              className="aa-input"
              placeholder="搜索标题..."
              value={search}
              onChange={(e) => setSearch(e.target.value)}
            />
          </div>
          {loading ? (
            <div style={{ textAlign: "center", padding: 40, color: "#8c8ca1" }}>加载中...</div>
          ) : filtered.length === 0 ? (
            <div style={{ textAlign: "center", padding: 40, color: "#8c8ca1" }}>
              暂无标题，请先在标题库创建
            </div>
          ) : (
            <div style={{ maxHeight: 400, overflowY: "auto" }}>
              {filtered.map((t) => (
                <div
                  key={t.id}
                  style={{
                    padding: "12px 16px",
                    marginBottom: 8,
                    background: "#f8f8fc",
                    borderRadius: 8,
                    cursor: "pointer",
                    transition: "background 0.2s",
                  }}
                  onMouseEnter={(e) => (e.currentTarget.style.background = "#eef0ff")}
                  onMouseLeave={(e) => (e.currentTarget.style.background = "#f8f8fc")}
                  onClick={() => {
                    onSelect(t.content)
                    onClose()
                  }}
                >
                  <div style={{ fontSize: 14, color: "#1a1a2e", marginBottom: 4 }}>{t.content}</div>
                  <div style={{ fontSize: 12, color: "#8c8ca1" }}>
                    {t.word_count ?? t.content.length}字 ·{" "}
                    {t.created_at ? new Date(t.created_at).toLocaleDateString() : ""}
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
        <div className="aa-modal__footer">
          <button className="aa-btn" onClick={onClose}>
            取消
          </button>
        </div>
      </div>
    </div>
  )
}

export default TitleLibraryModal