// renderer.js

document.addEventListener('DOMContentLoaded', () => {

  console.log('DOM fully loaded. renderer.js is now running.');

  // --- 0. INITIALIZE FORM DEFAULTS ---
  const publicationDateInput = document.getElementById('publicationDate');
  if (publicationDateInput) {
    publicationDateInput.value = new Date().toISOString().split('T')[0];
  }


  // --- 1. TAB SWITCHING LOGIC ---
  const tabButtons = document.querySelectorAll('.tab-btn');
  const tabContents = document.querySelectorAll('.tab-content');

  tabButtons.forEach(button => {
    button.addEventListener('click', () => {
      tabButtons.forEach(btn => btn.classList.remove('active'));
      tabContents.forEach(content => content.classList.remove('active'));
      button.classList.add('active');
      document.getElementById(button.dataset.tab + '-tab').classList.add('active');
    });
  });
  // Set the initial active tab content
  document.getElementById('machine-tab').classList.add('active');

  // --- 2. DYNAMIC ALARM ROW LOGIC ---
  const addAlarmBtn = document.getElementById('add-alarm-btn');
  const alarmsTableBody = document.getElementById('alarms-table-body');
  const alarmTemplate = document.getElementById('alarm-row-template');

  addAlarmBtn.addEventListener('click', () => {
    const currentIdInputs = alarmsTableBody.querySelectorAll('[name="alarm_id"]');
    let maxId = 0;
    currentIdInputs.forEach(input => {
      const currentId = parseInt(input.value, 10);
      if (!isNaN(currentId) && currentId > maxId) {
        maxId = currentId;
      }
    });
    const nextId = maxId + 1;
    const paddedId = nextId.toString().padStart(3, '0');
    
    const clone = alarmTemplate.content.cloneNode(true);
    clone.querySelector('[name="alarm_id"]').value = nextId;
    clone.querySelector('[name="alarm_name"]').value = `ALARM_${paddedId}`;
    const removeBtn = clone.querySelector('.remove-row-btn');
    removeBtn.addEventListener('click', (e) => {
      e.target.closest('tr').remove();
    });
    alarmsTableBody.appendChild(clone);
  });

  const addWarningBtn = document.getElementById('add-warning-btn');
  const warningsTableBody = document.getElementById('warnings-table-body');
  const warningTemplate = document.getElementById('warning-row-template');

  addWarningBtn.addEventListener('click', () => {
    const currentIdInputs = warningsTableBody.querySelectorAll('[name="warning_id"]');
    let maxId = 0;
    currentIdInputs.forEach(input => {
      const currentId = parseInt(input.value, 10);
      if (!isNaN(currentId) && currentId > maxId) {
        maxId = currentId;
      }
    });
    const nextWarningId = maxId + 1;
    const paddedWarningId = nextWarningId.toString().padStart(3, '0');

    const clone = warningTemplate.content.cloneNode(true);
    clone.querySelector('[name="warning_id"]').value = nextWarningId;
    clone.querySelector('[name="warning_name"]').value = `WARNING_${paddedWarningId}`;
    const removeBtn = clone.querySelector('.remove-row-btn');
    removeBtn.addEventListener('click', (e) => {
      e.target.closest('tr').remove();
    });
    warningsTableBody.appendChild(clone);
  });

  //dynamic row for the counter tab
  const addCounterBtn = document.getElementById('add-counter-btn');
  const countersTableBody = document.getElementById('counters-table-body');
  const counterTemplate = document.getElementById('counter-row-template');

  addCounterBtn.addEventListener('click', () => {
    const currentIdInputs = countersTableBody.querySelectorAll('[name="counter_id"]');
    let maxId = 0;
    currentIdInputs.forEach(input => {
      const currentId = parseInt(input.value, 10);
      if (!isNaN(currentId) && currentId > maxId) {
        maxId = currentId;
      }
    });
    const nextCounterId = maxId + 1;
    const paddedCounterId = nextCounterId.toString().padStart(3, '0');

    const clone = counterTemplate.content.cloneNode(true);
    clone.querySelector('[name="counter_id"]').value = nextCounterId;
    clone.querySelector('[name="counter_name"]').value = `COUNTER_${paddedCounterId}`;
    const removeBtn = clone.querySelector('.remove-row-btn');
    removeBtn.addEventListener('click', (e) => {
      e.target.closest('tr').remove();
    });
    countersTableBody.appendChild(clone);
  });

  // --- 3. FORM SUBMISSION LOGIC ---
  const form = document.getElementById('machine-form');
  if (form) {
    form.addEventListener('submit', async (event) => {
      event.preventDefault();

      // A. Collect data from the main "Machine" tab using FormData
      const formData = new FormData(form);
      // Convert FormData to a plain object
      const mainData = {};
      for (const [key, value] of formData.entries()) {
        // This check prevents multi-value fields from overwriting themselves
        if (!mainData[key]) {
          mainData[key] = value;
        }
      }
      mainData.addins = formData.getAll('addins');
      
      // B. Collect all alarm rows from the table
      const alarmRows = alarmsTableBody.querySelectorAll('tr');
      const alarmsData = [];
      alarmRows.forEach(row => {
        const alarm = {
          id: row.querySelector('[name="alarm_id"]').value,
          name: row.querySelector('[name="alarm_name"]').value,
          message: row.querySelector('[name="alarm_message"]').value,
        };
        if (alarm.message) {
          alarmsData.push(alarm);
        }
      });

      // D. Collect all warning rows from the table
      const warningRows = warningsTableBody.querySelectorAll('tr');
      const warningsData = [];
      warningRows.forEach(row => {
        const warning = {
          id: row.querySelector('[name="warning_id"]').value,
          name: row.querySelector('[name="warning_name"]').value,
          message: row.querySelector('[name="warning_message"]').value,
        };
        if (warning.message) {
          warningsData.push(warning);
        }
      });

      // E. Collect all counter rows from the table
      const counterRows = countersTableBody.querySelectorAll('tr');
      const countersData = [];
      counterRows.forEach(row => {
        const counter = {
          id: row.querySelector('[name="counter_id"]').value,
          name: row.querySelector('[name="counter_name"]').value,
          type: row.querySelector('[name="counter_type"]').value,
          description: row.querySelector('[name="counter_description"]').value,
        };
        if (counter.type) {
          countersData.push(counter);
        }
      });

      // C. Combine all data into a single object
      const finalData = { ...mainData, alarms: alarmsData, warnings: warningsData, counters: countersData };

      console.log('Sending all collected data to main process:', finalData);
      
      try {
        const result = await window.electronAPI.submitForm(finalData);
        if (result.success) {
          // // Reset the entire form to its initial state
          // form.reset();
          // // Re-apply the defaults that are not part of the standard reset
          // document.getElementById('publicationDate').value = new Date().toISOString().split('T')[0];
          // document.querySelector('#stopReasonYes').checked = true; // Set StopReason back to Yes
          // updateFilename(); // Clear the filename preview
        }
      } catch (error) {
        console.error('Error during form submission process:', error);
      }
    });
  }

    // --- 4. TAB NAVIGATION BUTTONS ---
  const tabOrder = [
    'machine-tab',
    'alarms-tab',
    'warnings-tab',
    'counters-tab',
    'setpoints-tab',
    'realtime-tab'
  ];

  // Add event listeners to all "Next" buttons
  document.querySelectorAll('.next-tab-btn').forEach((btn, idx) => {
    btn.addEventListener('click', () => {
      // Move to the next tab
      const nextTabId = tabOrder[idx + 1];
      if (nextTabId) {
        // Switch tab button active state
        document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
        document.querySelector(`[data-tab="${nextTabId.replace('-tab','')}"]`).classList.add('active');
        // Switch tab content active state
        document.querySelectorAll('.tab-content').forEach(tc => tc.classList.remove('active'));
        document.getElementById(nextTabId).classList.add('active');
        // Show submit button only on last tab
        if (nextTabId === 'realtime-tab') {
          document.getElementById('submit-container').style.display = '';
        } else {
          document.getElementById('submit-container').style.display = 'none';
        }
      }
    });
  });
});