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

/**
 * Step 2 素材选择组件
 */
import React from "react"
import type { TemplateSegment } from "@/api/templates/types"
import type { EditPlanClip } from "@/api/template-editor"
import { useStep2Materials } from "../hooks/useStep2Materials"
import MaterialModeTabs from "./material/MaterialModeTabs"
import ManualMaterialList from "./material/ManualMaterialList"
import SmartMatchInput from "./material/SmartMatchInput"
import SmartMatchResults from "./material/SmartMatchResults"

interface Step2MaterialSelectProps {
  materialMode: "manual" | "auto"
  onMaterialModeChange: (mode: "manual" | "auto") => void
  selectedMaterials: string[]
  onSelectedMaterialsChange: (ids: string[]) => void
  smartSelectedIds: string[]
  onSmartSelectedIdsChange: (ids: string[]) => void
  /** 当前选中的模板/草稿 ID，用于自动保存 */
  selectedTemplate?: string
  /** 当前模板的 segments（用于构建 clips duration） */
  templateSegments?: TemplateSegment[]
  /** 服务端 clips 创建成功后的回调 */
  onServerClipsChange?: (clips: EditPlanClip[]) => void
}

const Step2MaterialSelect: React.FC<Step2MaterialSelectProps> = (props) => {
  const m = useStep2Materials(props)

  return (
    <div className="xx-form-section">
      <h3>📦 选择素材</h3>

      <MaterialModeTabs mode={m.materialMode} onModeChange={m.onMaterialModeChange} />

      <div className="xx-form-field" style={{ marginTop: 12 }}>
        <label>选择视频库</label>
        <select
          value={m.selectedLibraryId}
          onChange={(e) => m.setSelectedLibraryId(e.target.value)}
        >
          {m.libraries.map((lib) => (
            <option key={lib.id} value={lib.id}>
              {lib.name}
            </option>
          ))}
        </select>
      </div>

      {m.materialMode === "manual" && (
        <>
          <div
            style={{
              marginTop: 14,
              display: "flex",
              alignItems: "center",
              gap: 10,
            }}
          >
            <span className="xx-pill xx-pill-ok">已选 {m.selectedMaterials.length} 个素材</span>
          </div>

          <ManualMaterialList
            materials={m.materials}
            materialsLoading={m.materialsLoading}
            selectedMaterials={m.selectedMaterials}
            onToggle={m.handleToggleMaterial}
          />
        </>
      )}

      {m.materialMode === "auto" && (
        <div className="xx-smart-match-section">
          <SmartMatchInput
            matching={m.smartMatching}
            onMatch={m.handleSmartMatch}
            hasMatched={m.hasMatched}
            onRefresh={m.handleRefreshMatch}
            materialsCount={m.materials.items.length}
            loading={m.materialsLoading}
          />

          <SmartMatchResults
            matchedAssets={m.smartMatchedResults}
            selectedIds={m.smartSelectedIds}
            matching={m.smartMatching}
            hasMatched={m.hasMatched}
            onToggle={m.handleToggleSmartSelect}
            onSelectAll={m.handleSelectAllMatched}
            onClear={m.handleClearSmartSelect}
            formatDuration={m.formatDuration}
            selectedTotalDuration={m.smartSelectedTotalDuration}
          />
        </div>
      )}
    </div>
  )
}

export default Step2MaterialSelect