xiaoxia-saas/apps/web/src/pages/generate/components/Step1TemplateSelect.tsx

/**
 * Step 1 模板选择组件
 */
import React from "react"
import type { EditingTemplate } from "@/api/editing-planner"
import { MODE_GRADIENTS } from "../constants"
import { useStep1Template } from "../hooks/useStep1Template"

interface Step1TemplateSelectProps {
  templates: EditingTemplate[]
  selectedTemplate: string
  onSelectTemplate: (id: string) => void
}

const Step1TemplateSelect: React.FC<Step1TemplateSelectProps> = (props) => {
  const { templates, selectedTemplate, handleSelect, handleKeySelect } = useStep1Template(props)

  return (
    <div className="xx-form-section">
      <h3>🎨 选择模板</h3>
      {templates.length === 0 ? (
        <div className="xx-empty-state">
          <p>暂无可用模板</p>
          <p style={{ fontSize: 13, color: "var(--text-tertiary)" }}>
            请先在「模板编辑器」中创建模板
          </p>
        </div>
      ) : (
        <div className="xx-choice-list">
          {templates.map((tpl) => (
            <div
              key={tpl.id}
              className={`xx-choice-item ${selectedTemplate === tpl.id ? "selected" : ""}`}
              onClick={() => handleSelect(tpl.id)}
              role="button"
              tabIndex={0}
              aria-pressed={selectedTemplate === tpl.id}
              onKeyDown={(e) => handleKeySelect(e, tpl.id)}
            >
              <span className="xx-choice-check">✓</span>
              <div
                className="xx-choice-thumb"
                style={{
                  background: MODE_GRADIENTS[tpl.mode] || MODE_GRADIENTS.pip,
                }}
              >
                🎬
              </div>
              <h4>{tpl.name}</h4>
              <p>
                {tpl.estimated_duration}s · {tpl.segments.length}片段
              </p>
              {tpl.tags.length > 0 && (
                <div
                  style={{
                    display: "flex",
                    gap: 4,
                    flexWrap: "wrap",
                    marginTop: 4,
                  }}
                >
                  {tpl.tags.map((tag) => (
                    <span
                      key={tag}
                      style={{
                        fontSize: 11,
                        padding: "1px 6px",
                        borderRadius: 6,
                        background: "var(--bg-secondary)",
                        color: "var(--text-secondary)",
                      }}
                    >
                      {tag}
                    </span>
                  ))}
                </div>
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  )
}

export default Step1TemplateSelect