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

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;
