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

/**
 * AI数字人 — 文案面板（步骤1用）
 * #1894: 文案库选择走 @/api/scripts；手动输入支持一键「保存到文案库」
 */
import { useState } from "react"
import { message } from "antd"
import { createScript } from "../api/aiAvatar"

interface PanelScriptProps {
  scriptText: string
  onScriptTextChange: (text: string) => void
  onOpenScriptModal: () => void
  /** 手动保存到文案库后回调（把新脚本传入，父组件可更新 selectedScript） */
  onScriptCreated?: (script: { id: string; title: string; content: string }) => void
}

type ScriptTab = "library" | "manual"

export function PanelScript({
  scriptText,
  onScriptTextChange,
  onOpenScriptModal,
  onScriptCreated,
}: PanelScriptProps) {
  const [scriptTab, setScriptTab] = useState<ScriptTab>("library")
  const [saving, setSaving] = useState(false)

  const handleSaveToLibrary = async () => {
    const text = scriptText.trim()
    if (!text) {
      message.warning("请先输入文案内容")
      return
    }
    // 用正文前 20 字作为默认标题
    const autoTitle = text.slice(0, 20).replace(/\n+/g, " ").trim() || "手动输入文案"
    setSaving(true)
    try {
      const created = await createScript({ title: autoTitle, content: text, tags: [] })
      message.success({ content: "已保存到文案库", duration: 1 })
      onScriptCreated?.(created)
    } catch {
      message.error("保存到文案库失败，请稍后重试")
    } finally {
      setSaving(false)
    }
  }

  return (
    <div className="aa-script-lipsync">
      {/* ── Tab 切换 ── */}
      <div className="aa-script-tabs">
        <button
          type="button"
          className={`aa-script-tab${scriptTab === "library" ? " active" : ""}`}
          onClick={() => setScriptTab("library")}
        >
          从文案库选择
        </button>
        <button
          type="button"
          className={`aa-script-tab${scriptTab === "manual" ? " active" : ""}`}
          onClick={() => setScriptTab("manual")}
        >
          手动输入
        </button>
      </div>

      {scriptTab === "library" && (
        <button
          type="button"
          className="aa-btn aa-btn--ghost aa-btn--full"
          style={{ marginBottom: 8 }}
          onClick={onOpenScriptModal}
        >
          📚 从文案库选择文案
        </button>
      )}

      <textarea
        className="aa-textarea"
        value={scriptText}
        readOnly={scriptTab === "library"}
        placeholder={
          scriptTab === "library" ? "点击上方按钮，从文案库选择文案…" : "请输入数字人口播文案…"
        }
        onChange={(e) => onScriptTextChange(e.target.value)}
      />
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div className="aa-char-count">{scriptText.length} 字</div>
        {scriptTab === "manual" && scriptText.trim().length > 0 && (
          <button
            type="button"
            className="aa-btn aa-btn--text"
            disabled={saving}
            onClick={handleSaveToLibrary}
            style={{ fontSize: 12, padding: "2px 8px" }}
          >
            {saving ? "保存中..." : "💾 保存到文案库"}
          </button>
        )}
      </div>
    </div>
  )
}

export default PanelScript