import { apiGet, apiPost, isAuthRedirectError } from '../api.js';
import { machineListStatusRowClass } from '../core/constants.js';
import { guard } from '../core/auth-guard.js';
import { esc } from '../core/utils.js';

function rowClassForListStatus(listStatus) {
  const code =
    listStatus && machineListStatusRowClass[listStatus] !== undefined
      ? listStatus
      : '';
  return machineListStatusRowClass[code];
}

const loadingEl = document.getElementById('page-loading');
const mainEl = document.getElementById('page-main');
const errEl = document.getElementById('page-error');

function showError(msg) {
  loadingEl.hidden = true;
  mainEl.hidden = true;
  errEl.hidden = false;
  errEl.textContent = msg;
}

function renderRows(machines) {
  const tbody = document.getElementById('machine-table-body');
  tbody.innerHTML = machines
    .map((m) => {
      const x = m.extras || {};
      const rc = rowClassForListStatus(m.listStatus);
      return `<tr class="${esc(rc)}">
                <td><a href="/machine.html?id=${esc(m.id)}">${esc(m.seriennummer)}</a></td>
                <td>${esc(m.typ)}</td>
                <td>${esc(x.Konzern || '')}</td>
                <td>${esc(x.Name || '')}</td>
                <td>${esc(x.Stadt || '')}</td>
                <td>${esc(x.Land || '')}</td>
                <td>${esc(x.Jahr || '')}</td>
              </tr>`;
    })
    .join('');
}

function initNewMachineCollapse() {
  const body = document.getElementById('new-machine-section-body');
  const toggle = document.getElementById('new-machine-toggle');
  const chev = toggle.querySelector('.ldap-chevron');
  function setOpen(open) {
    body.hidden = !open;
    toggle.setAttribute('aria-expanded', String(open));
    chev.textContent = open ? '▲' : '▼';
  }
  toggle.onclick = () => setOpen(body.hidden);
}

async function run(canEdit) {
  const machines = await apiGet('/machines');
  document.getElementById('machine-count').textContent = String(machines.length);
  renderRows(machines);

  const newCard = document.getElementById('machines-new-card');
  if (newCard) newCard.hidden = !canEdit;

  initNewMachineCollapse();

  const formNew = document.getElementById('form-new-machine');
  if (canEdit) {
    formNew.addEventListener('submit', async (e) => {
      e.preventDefault();
      const fd = new FormData(formNew);
      const btn = formNew.querySelector('button[type="submit"]');
      btn.disabled = true;
      try {
        const body = Object.fromEntries(fd.entries());
        const created = await apiPost('/machines', {
          name: body.name,
          typ: body.typ,
          seriennummer: body.seriennummer,
          standort: body.standort,
          listStatus: body.listStatus || '',
        });
        location.href = `/machine.html?id=${encodeURIComponent(created.id)}`;
      } catch (err) {
        alert(err.message || 'Anlegen fehlgeschlagen.');
        btn.disabled = false;
      }
    });
  }

  const inp = document.getElementById('machine-filter');
  const tbody = document.getElementById('machine-table-body');
  inp.addEventListener('input', () => {
    const q = inp.value.toLowerCase().trim();
    tbody.querySelectorAll('tr').forEach((tr) => {
      tr.hidden = !!(q && !tr.textContent.toLowerCase().includes(q));
    });
  });
}

async function init() {
  const st = await guard({ activeNav: 'machines' });
  if (!st) return;
  const canEdit = st.user?.canEditCrm === true;
  loadingEl.hidden = true;
  mainEl.hidden = false;
  try {
    await run(canEdit);
  } catch (e) {
    if (isAuthRedirectError(e)) return;
    showError(e.message || 'Fehler');
  }
}

init();