xiaoxia-saas/apps/web/src/components/title/TitleTemplateEditor.tsx

/**
 * 标题模板编辑器（v3 重构）
 *
 * - Modal 弹窗 860px 宽
 * - 左侧：300px 竖屏预览区（图片背景+暗色渐变遮罩+透明 Canvas 叠字）+ 模板名称输入框
 * - 右侧：参数 Tab 面板（基础/描边/阴影/背景/排版），复用 TitleStylePanel 的 paramsOnly 模式
 * - 底部：取消 / 保存模板 按钮
 * - 内置模板编辑时保存会创建副本（带"副本"逻辑由 handleSave 处理）
 */
import React, { useEffect, useMemo, useState } from "react"
import { Modal, Button, Input, message } from "antd"
import TitleStylePanel from "../../pages/generate/components/title/TitleStylePanel"
import TitleMiniPreview from "../../pages/generate/components/title/TitleMiniPreview"
import { POSITION_OPTIONS } from "../../pages/generate/constants"
import { FONT_OPTIONS } from "./constants"
import type { TitleSettings } from "../../pages/generate/types"
import { DEFAULT_TITLE_SETTINGS_FULL } from "../../pages/generate/types"
import { titleStyleConfigToCamel, camelToTitleStyleConfig } from "./utils"
import { useTitleTemplates } from "./useTitleTemplates"
import type { TitleTemplate } from "./template-types"

interface Props {
  open: boolean
  template: TitleTemplate
  onClose: () => void
  onSaved: (template: TitleTemplate) => void
}

/** 编辑器预览用的背景图（复用卡片池第一张） */
const EDITOR_BG = "/title-templates/portrait1.jpg"

const TitleTemplateEditor: React.FC<Props> = ({ open, template, onClose, onSaved }) => {
  const { updateTemplate, createTemplate } = useTitleTemplates()
  const [settings, setSettings] = useState<TitleSettings>(() => ({
    ...DEFAULT_TITLE_SETTINGS_FULL,
    ...titleStyleConfigToCamel(template.style || {}),
    title: "预览标题文字",
  }))
  const [formName, setFormName] = useState(template.name || "")
  const [formEmoji, setFormEmoji] = useState(template.emoji || "✨")
  const [saving, setSaving] = useState(false)

  useEffect(() => {
    if (open) {
      setSettings({
        ...DEFAULT_TITLE_SETTINGS_FULL,
        ...titleStyleConfigToCamel(template.style || {}),
        title: "预览标题文字",
      })
      setFormName(template.name || "")
      setFormEmoji(template.emoji || "✨")
    }
  }, [open, template])

  const upd = (patch: Partial<TitleSettings>) => setSettings((s) => ({ ...s, ...patch }))

  const handleSave = () => {
    const name = formName.trim()
    if (!name) {
      message.warning("请填写模板名称")
      return
    }
    setSaving(true)
    try {
      const snake = camelToTitleStyleConfig(settings)
      if (template.isBuiltin) {
        const t = createTemplate({ name, emoji: formEmoji, style: snake })
        onSaved(t)
      } else {
        updateTemplate(template.id, { name, emoji: formEmoji, style: snake })
        onSaved({
          ...template,
          name,
          emoji: formEmoji,
          style: snake,
          updatedAt: new Date().toISOString(),
        })
      }
    } finally {
      setSaving(false)
    }
  }

  // 编辑器内的预览用 settings：字号适配竖屏
  const previewSettings = useMemo<TitleSettings>(() => {
    // 竖屏宽度 200px，按比例缩放字号，让预览看起来协调
    return { ...settings, size: Math.round(settings.size * 0.55) }
  }, [settings])

  return (
    <Modal
      title={template.isBuiltin ? `基于「${template.name}」创建模板` : `编辑模板：${template.name}`}
      open={open}
      onCancel={onClose}
      width={860}
      footer={
        <div style={{ display: "flex", gap: 10, justifyContent: "flex-end" }}>
          <Button onClick={onClose}>取消</Button>
          <Button type="primary" loading={saving} onClick={handleSave}>
            保存模板
          </Button>
        </div>
      }
      destroyOnClose
      className="ttv3-modal"
      styles={{ body: { padding: 0 } }}
    >
      <div className="ttv3-editor">
        {/* 左侧：竖屏预览 + 名称 */}
        <div className="ttv3-editor-left">
          <div className="ttv3-editor-canvas">
            <img className="ttv3-editor-bg" src={EDITOR_BG} alt="" />
            <div className="ttv3-vignette" />
            <div className="ttv3-editor-canvas-inner">
              <TitleMiniPreview
                settings={previewSettings}
                width={200}
                sampleText="预览标题文字"
                transparent
                portrait
              />
            </div>
          </div>
          <div className="ttv3-editor-form">
            <div className="ttv3-form-row">
              <label>图标</label>
              <Input
                value={formEmoji}
                maxLength={2}
                style={{ textAlign: "center", width: 64 }}
                onChange={(e) => setFormEmoji(e.target.value)}
              />
            </div>
            <div className="ttv3-form-row ttv3-form-row--grow">
              <label>
                模板名称<span style={{ color: "#ef4444" }}>*</span>
              </label>
              <Input
                placeholder="给模板起个名字"
                value={formName}
                maxLength={20}
                onChange={(e) => setFormName(e.target.value)}
              />
            </div>
          </div>
        </div>
        {/* 右侧：参数 Tab */}
        <div className="ttv3-editor-right">
          <TitleStylePanel
            settings={settings}
            onUpdatePosition={(p) => upd({ position: p, posX: null, posY: null })}
            onUpdateFont={(f) => upd({ font: f })}
            onUpdateSize={(v) => upd({ size: v })}
            onToggleBold={() => upd({ bold: !settings.bold })}
            onToggleItalic={() => upd({ italic: !settings.italic })}
            onToggleStroke={() =>
              upd({
                stroke: !settings.stroke,
                strokeWidth:
                  !settings.stroke && (settings.strokeWidth ?? 0) < 2 ? 4 : settings.strokeWidth,
              })
            }
            onToggleShadow={() => upd({ shadow: !settings.shadow })}
            onApplyPreset={() => {
              /* 编辑器内不使用系统预设快捷键 */
            }}
            onUpdateStyle={(patch) => upd(patch)}
            activePreset={null}
            titlePresets={[]}
            POSITION_OPTIONS={POSITION_OPTIONS}
            FONT_OPTIONS={FONT_OPTIONS}
            paramsOnly
          />
        </div>
      </div>
    </Modal>
  )
}

export default TitleTemplateEditor