/**
 * 保存/更新模板弹窗 — V21 设计系统
 * 分类使用 Select 关联后端分类 API（P1-5）
 */
import React from "react"
import { Modal, Input, Select } from "@/components/ui"
import type { TemplateCategory } from "@/api/editing-planner"

interface SaveModalProps {
  open: boolean
  loading: boolean
  isUpdate: boolean
  draftName: string
  draftCategory: string
  draftTags: string
  categories: TemplateCategory[]
  estimatedDuration: number
  onNameChange: (v: string) => void
  onCategoryChange: (v: string) => void
  onTagsChange: (v: string) => void
  onSave: () => void
  onCancel: () => void
}

const SaveModal: React.FC<SaveModalProps> = ({
  open,
  loading,
  isUpdate,
  draftName,
  draftCategory,
  draftTags,
  categories,
  estimatedDuration,
  onNameChange,
  onCategoryChange,
  onTagsChange,
  onSave,
  onCancel,
}) => {
  return (
    <Modal
      title={isUpdate ? "更新模板" : "保存模板"}
      open={open}
      onCancel={onCancel}
      onOk={onSave}
      confirmLoading={loading}
      okText="保存"
    >
      <div className="ep-modal-field">
        <label>模板名称 *</label>
        <Input
          placeholder="输入模板名称"
          value={draftName}
          onChange={(e) => onNameChange(e.target.value)}
        />
      </div>

      <div className="ep-modal-field">
        <label>分类</label>
        <Select
          placeholder="选择分类"
          value={draftCategory || undefined}
          onChange={(v: string) => onCategoryChange(v || "")}
          allowClear
          showSearch
          options={categories.map((c) => ({ value: c.name, label: c.name }))}
        />
      </div>

      <div className="ep-modal-field">
        <label>标签（逗号分隔）</label>
        <Input
          placeholder="例如：vlog, 日常"
          value={draftTags}
          onChange={(e) => onTagsChange(e.target.value)}
        />
      </div>

      <div className="ep-modal-info">
        ⏱️ 预估时长：<strong>~{estimatedDuration}s</strong>
      </div>
    </Modal>
  )
}

export default SaveModal