var techData = null;
var techID = null;
var expandedCards = {};
var cardWidths = {};

var TECH_SECTIONS = [
  {
    id: 'core', label: 'Core', always: true,
    fields: [
      ['name', 'Name', 'text'],
      ['level', 'Level', 'number', '', 'narrow'],
      ['drain_rate', 'Drain Rate', 'number', '', 'narrow'],
      ['category', 'Category', 'text'],
      ['group', 'Group', 'text'],
    ]
  },
  {
    id: 'effects', label: 'Effects', always: true, path: 'effects',
    fields: [
      ['accuracy_percent', 'Accuracy %', 'number', '', 'narrow'],
      ['strength_percent', 'Strength %', 'number', '', 'narrow'],
      ['defense_percent', 'Defense %', 'number', '', 'narrow'],
      ['ranged_percent', 'Ranged %', 'number', '', 'narrow'],
      ['science_percent', 'Science %', 'number', '', 'narrow'],
      ['damage_reduction', 'Damage Reduction', 'number', '', 'narrow'],
      ['hp_regen_multi', 'HP Regen Multi', 'number', '', 'narrow'],
      ['preserve_drain', 'Preserve Drain', 'number', '', 'narrow'],
      ['retribution_pct', 'Retribution %', 'number', '', 'narrow'],
      ['protect_melee', 'Protect Melee', 'checkbox'],
      ['protect_ranged', 'Protect Ranged', 'checkbox'],
      ['protect_science', 'Protect Science', 'checkbox'],
    ]
  }
];

function initTechEditor() {
  editorType = 'techs';
  editorFields = [];
  loadList();
  if (window.location.hash) loadTechEditor(window.location.hash.substring(1));
}

function cardPath(sec) { return sec.path || ''; }

function getVal(data, sec, key) {
  return ced_getVal(data, sec, key);
}

function fieldID(sec, key, idx) {
  return ced_fieldID(sec, key, idx);
}

function setupSearchFields() { ced_setupSearchFields(); }

function collectFieldValue(el, type) { return ced_collectFieldValue(el, type); }

function loadTechEditor(id) {
  techID = id;
  currentID = id;
  renderList('');
  window.location.hash = id;
  API.get('/api/techs/' + encodeURIComponent(id)).then(function(data) {
    techData = data;
    renderTechEditor(id, data);
  }).catch(function(e) {
    $('#editorMain').innerHTML = '<p style="color:var(--danger)">Failed to load: ' + esc(e.message) + '</p>';
  });
}

function loadItem(id) { loadTechEditor(id); }

function renderTechEditor(id, data) {
  var html = '<h2>Tech: ' + esc(id) + '</h2>';
  html += '<div class="tabs"><button class="tab active" onclick="switchTab(event,\'fields\')">Fields</button>';
  html += '<button class="tab" onclick="switchTab(event,\'yaml\')">Raw YAML</button></div>';

  html += '<div class="tab-content" id="tabFields">';
  html += '<div class="obj-fields-wrap">';
  TECH_SECTIONS.forEach(function(sec) {
    html += renderCard(sec, data);
  });
  html += '</div>';
  html += '</div>';

  html += '<div class="tab-content" id="tabYaml" style="display:none">';
  html += '<pre>' + esc(data._raw || JSON.stringify(data, null, 2)) + '</pre>';
  html += '</div>';

  html += '<div class="btn-row">';
  html += '<button class="btn btn-primary" onclick="saveTech()">Save</button>';
  html += '<button class="btn btn-danger" onclick="deleteTech()">Delete</button>';
  html += '</div>';

  $('#editorMain').innerHTML = html;
  setupSearchFields();
}

function renderCurrent() {
  if (!techData || !techID) return;
  renderTechEditor(techID, techData);
}

function renderCard(sec, data) {
  var collapsed = expandedCards[sec.id] === false;
  var isFull = cardWidths[sec.id] !== undefined ? cardWidths[sec.id] : (sec.fullWidth || false);
  var fullClass = isFull ? ' obj-card-full' : '';
  var h = '<div class="obj-card' + fullClass + '" data-card="' + sec.id + '">';
  h += '<div class="obj-card-header" onclick="toggleCard(\'' + sec.id + '\')">';
  h += '<span class="obj-card-arrow">' + (collapsed ? '&#9654;' : '&#9660;') + '</span>';
  h += '<button class="btn btn-sm obj-card-expand" onclick="event.stopPropagation();toggleCardWidth(\'' + sec.id + '\')" title="' + (isFull ? 'Half width' : 'Full width') + '">' + (isFull ? '\u229F' : '\u229E') + '</button>';
  h += '<span class="obj-card-label">' + sec.label + '</span>';
  h += '</div>';
  if (!collapsed) {
    h += '<div class="obj-card-body">';
    h += '<div class="obj-card-grid">';
    sec.fields.forEach(function(f) {
      h += renderField(sec, f, data, -1);
    });
    h += '</div>';
    h += '</div>';
  }
  h += '</div>';
  return h;
}

function renderField(sec, f, data, idx) {
  return ced_renderField(sec, f, data, idx, null, null, cardPath, fieldID, getVal);
}

function toggleCard(id) {
  expandedCards[id] = expandedCards[id] === false ? true : false;
  renderCurrent();
}

function toggleCardWidth(id) {
  cardWidths[id] = !cardWidths[id];
  renderCurrent();
}

function saveTech() {
  if (!ced_validateFields(TECH_SECTIONS, fieldID, null)) return;

  var out = {};
  TECH_SECTIONS.forEach(function(sec) {
    var sectionObj = {};
    var hasValues = sec.always;

    if (sec.fields) {
      sec.fields.forEach(function(f) {
        var fid = fieldID(sec, f[0]);
        var el = document.getElementById(fid);
        if (!el) return;
        var val = collectFieldValue(el, f[2]);
        if (val !== '' && val !== false && val !== 0 && val !== null) hasValues = true;
        sectionObj[f[0]] = val;
      });
    }

    if (sec.always && sec.path) {
      out[sec.path] = sectionObj;
    } else if (sec.always) {
      Object.keys(sectionObj).forEach(function(k) { out[k] = sectionObj[k]; });
    } else if (hasValues && sec.path) {
      out[sec.path] = sectionObj;
    } else if (hasValues) {
      Object.keys(sectionObj).forEach(function(k) { out[k] = sectionObj[k]; });
    }
  });

  ced_cleanOutput(out);
  out.id = techID;

  API.put('/api/techs/' + encodeURIComponent(techID), out).then(function(resp) {
    notify('Tech ' + techID + ' saved', 'success');
    updateUndoBar();
    if (resp && resp._raw) techData._raw = resp._raw;
  }).catch(function(e) { notify('Save failed: ' + e.message, 'error'); });
}

function deleteTech() {
  if (!confirm('Delete tech "' + techID + '"?')) return;
  API.del('/api/techs/' + encodeURIComponent(techID)).then(function() {
    notify('Tech ' + techID + ' deleted', 'success');
    updateUndoBar();
    techID = null;
    currentID = null;
    techData = null;
    $('#editorMain').innerHTML = '<p style="color:#888;text-align:center;margin-top:60px">Deleted</p>';
    loadList();
  }).catch(function(e) { notify('Delete failed: ' + e.message, 'error'); });
}