import Autocomplete from "@mui/material/Autocomplete";
import TextField from "@mui/material/TextField";
import { normalizeWhitelist } from "../experimentForm.js";
import { LuckyGiftFieldLabel } from "./LuckyGiftFieldHelp.jsx";

// 创建 AB 实验时叠加在配置表单之上的实验字段区。配置表单本身由 LuckyGiftConfigSections /
// LuckyGiftStageDesigner 复用，这里只承载实验身份与分流参数，不参与配置字段的校验。
export function LuckyGiftExperimentFields({ disabled = false, draft, onChange }) {
    return (
        <section aria-label="实验设置" className="ops-experiment-setup">
            <div className="ops-experiment-setup__head">
                <h3>实验设置</h3>
                <span>
                    创建实验会把下方配置原子发布为实验组新版本，当前最新启用版本自动成为对照组；按用户 ID
                    哈希分流，实验组可与对照组选择不同策略（fixed_v2 / dynamic_v3）。放量单调（调大不会把已进入
                    实验组的用户踢回）；实验进行中，该奖池的常规发布会被拒绝。
                </span>
            </div>
            <div className="ops-form-grid ops-experiment-setup__grid">
                <TextField
                    disabled={disabled}
                    fullWidth
                    label={<LuckyGiftFieldLabel field="experiment_name" label="实验名称" />}
                    required
                    size="small"
                    value={draft.name}
                    onChange={(event) => onChange("name", event.target.value)}
                />
                <TextField
                    disabled={disabled}
                    fullWidth
                    helperText="0 表示只有白名单用户进入实验组（灰度验证）"
                    label={<LuckyGiftFieldLabel field="experiment_traffic_percent" label="实验组流量 (%)" />}
                    required
                    size="small"
                    slotProps={{ htmlInput: { inputMode: "decimal", max: 100, min: 0, step: "0.01" } }}
                    type="number"
                    value={draft.trafficPercent}
                    onChange={(event) => onChange("trafficPercent", event.target.value)}
                />
                {/* 白名单是任意用户 ID，没有候选集，用 freeSolo 多值输入承载；提交时全部作为
                    arm=treatment 的 override，与 MultiValueAutocomplete 的多选交互保持一致。 */}
                <Autocomplete
                    className="ops-form-grid__wide"
                    disabled={disabled}
                    freeSolo
                    multiple
                    options={[]}
                    renderInput={(params) => (
                        <TextField
                            {...params}
                            helperText="输入用户 ID 后回车添加；创建时全部固定进入实验组"
                            label={<LuckyGiftFieldLabel field="experiment_whitelist" label="白名单用户 ID" />}
                        />
                    )}
                    size="small"
                    value={draft.whitelist}
                    onChange={(_, next) => onChange("whitelist", normalizeWhitelist(next))}
                />
            </div>
        </section>
    );
}
