// AgentInput — 集成模型选择的输入控件
// options: { model_dataurl, model_cwidth, placeholder, url(提交图标), ...VBox 原有属性 }
// event: inputed → { prompt, add_files, model_id }

bricks.AgentInput = class extends bricks.VBox {
    constructor(opts) {
        opts.height = 'auto';
        opts.width = '100%';
        super(opts);

        // file upload
        this.inputfilew = new bricks.UiFile({name: 'add_file'});
        this.filesbar = new bricks.DynamicColumn({col_cwidth: 10});
        this.add_files = [];
        this.inputfilew.bind('changed', this.file_added.bind(this));

        // text input
        this.textw = new bricks.UiText({
            name: 'prompt',
            placeholder: opts.placeholder || ''
        });

        // model selector — 直接用 UiCode，不用 Form
        this.model_selector = new bricks.UiCode({
            name: 'model_id',
            valueField: 'model_id',
            textField: 'model_id_text',
            dataurl: opts.model_dataurl || '',
            params: opts.model_params || {},
            cwidth: opts.model_cwidth || 12,
            cfontsize: 0.85
        });

        // add file button
        var addfilew = new bricks.Svg({
            cwidth: 1.5, cheight: 1.5,
            url: bricks_resource('imgs/add.svg')
        });
        addfilew.bind('click', this.add_file.bind(this));

        // submit button
        var inputw = new bricks.Svg({
            cwidth: 1.5, cheight: 1.5,
            url: opts.url || bricks_resource('imgs/submit.svg')
        });
        inputw.bind('click', this.input_finished.bind(this));

        // button row: [+add] [model_selector] [filler] [submit]
        var hbox = new bricks.HBox({cheight: 1.5, gap: '4px', alignItems: 'center'});
        hbox.add_widget(addfilew);
        hbox.add_widget(this.model_selector);
        hbox.add_widget(new bricks.VBox({css: 'filler'}));
        hbox.add_widget(inputw);

        // assemble
        this.add_widget(this.inputfilew);
        this.add_widget(this.filesbar);
        this.add_widget(this.textw);
        this.add_widget(hbox);

        this.filesbar.hide();
        this.inputfilew.hide();
    }

    input_finished() {
        var txt = this.textw.getValue();
        if (!txt.prompt || txt.prompt.length < 1) return;
        var p = this.params || {};
        var d = Object.assign({}, p, {
            add_files: this.add_files,
            prompt: txt.prompt,
            model_id: this.model_selector.getValue() || ''
        });
        this.dispatch('inputed', d);
        this.textw.setValue('');
        this.add_files = [];
    }

    file_added(e) {
        this.inputfilew.hide();
        var file = this.inputfilew.getValue().add_file;
        this.inputfilew.reset();
        this.add_files.push(file);
        this.filesbar.clear_widgets();
        var w = new bricks.DeletableLabel({label: file.name});
        this.filesbar.add_widget(w);
        this.filesbar.show();
        w.bind('deleted', this.deleted_file.bind(this, file));
    }

    deleted_file(file) {
        this.add_files = this.add_files.filter(i => i !== file);
        if (this.add_files.length === 0) this.filesbar.hide();
    }

    add_file() {
        this.inputfilew.show();
    }

    getValue() {
        return {
            prompt: (this.textw.getValue() || {}).prompt || '',
            model_id: this.model_selector.getValue() || ''
        };
    }
};

bricks.Factory.register('AgentInput', bricks.AgentInput);