









(function () {
  'use strict';

  
  var MAX_NAMES_SHOWN = 6;

  function CaptureUI(hostEl, opts) {
    opts = opts || {};
    this.onRecord = opts.onRecord || function () {};
    this.onFinish = opts.onFinish || function () {};
    this.mode = null;          
    this.names = [];           
    this._build(hostEl);
    this._bindKeys();
  }

  CaptureUI.prototype._build = function (hostEl) {
    var self = this;
    var el = document.createElement('div');
    el.id = 'capture-bar';
    el.style.display = 'none';
    el.innerHTML =
      '<div class="cap-head">' +
        '<span class="cap-title"></span>' +
        '<span class="cap-left"></span>' +
      '</div>' +
      '<div class="cap-hint"></div>' +
      '<div class="cap-btns">' +
        '<button class="cap-rec"></button>' +
        '<button class="cap-fin"></button>' +
      '</div>' +
      '<div class="cap-names"></div>';
    hostEl.appendChild(el);

    this.el = el;
    this.titleEl = el.querySelector('.cap-title');
    this.leftEl = el.querySelector('.cap-left');
    this.hintEl = el.querySelector('.cap-hint');
    this.namesEl = el.querySelector('.cap-names');
    this.recBtn = el.querySelector('.cap-rec');
    this.finBtn = el.querySelector('.cap-fin');

    
    
    
    this.recBtn.addEventListener('click', function () {
      this.blur();
      if (self.mode) self.onRecord();
    });
    this.finBtn.addEventListener('click', function () {
      this.blur();
      if (self.mode) self.onFinish();
    });
  };

  CaptureUI.prototype._bindKeys = function () {
    var self = this;
    window.addEventListener('keydown', function (e) {
      if (!self.mode) return;
      
      if (/^(INPUT|TEXTAREA|SELECT)$/.test(e.target.tagName)) return;
      if (e.ctrlKey || e.metaKey || e.altKey) return;
      if (e.repeat) return;              
      if (e.code === 'Space') {
        e.preventDefault();              
        self.onRecord();
      } else if (e.key === 'Enter') {
        e.preventDefault();
        self.onFinish();
      }
    });
  };

  
  CaptureUI.prototype.show = function (mode) {
    this.mode = mode;
    this.names = [];
    this.el.style.display = 'block';
    this.refresh();
  };

  CaptureUI.prototype.hide = function () {
    this.mode = null;
    this.names = [];
    this.el.style.display = 'none';
  };

  CaptureUI.prototype.isActive = function () { return !!this.mode; };

  
  CaptureUI.prototype.addName = function (name) {
    if (!this.mode) return;
    this.names.push(name);
    this._renderNames();
  };

  
  CaptureUI.prototype.setRemaining = function (sec) {
    if (sec == null) { this.leftEl.textContent = ''; return; }
    this.leftEl.textContent = VizI18n.tr('viz_capture_left', '剩余 {s}s')
      .replace('{s}', Math.max(0, Math.round(sec)));
  };

  
  CaptureUI.prototype.refresh = function () {
    if (!this.mode) return;
    var teach = this.mode === 'teach';
    this.titleEl.textContent = teach
      ? VizI18n.tr('viz_capture_title_teach', '记录目标点 · 手扶真机')
      : VizI18n.tr('viz_capture_title_virtual', '记录目标点 · 拖拽模型');
    this.hintEl.textContent = teach
      ? VizI18n.tr('viz_capture_hint_teach', '扶稳机械臂，摆到位后按空格')
      : VizI18n.tr('viz_capture_hint_virtual', '拖动末端坐标轴，到位后按空格');
    this.recBtn.textContent = VizI18n.tr('viz_capture_record', '记录 (空格)');
    this.finBtn.textContent = VizI18n.tr('viz_capture_finish', '结束 (回车)');
    if (!teach) this.leftEl.textContent = '';
    this._renderNames();
  };

  CaptureUI.prototype._renderNames = function () {
    var n = this.names.length;
    if (!n) {
      this.namesEl.textContent = VizI18n.tr('viz_capture_none', '还没记录');
      return;
    }
    var shown = this.names.slice(-MAX_NAMES_SHOWN);
    var txt = (n > MAX_NAMES_SHOWN ? '… ' : '') + shown.join(', ');
    this.namesEl.textContent = VizI18n.tr('viz_capture_count', '已记录 {n} 个：{list}')
      .replace('{n}', n).replace('{list}', txt);
  };

  window.CaptureUI = CaptureUI;
})();
