(function (A, D) {
  function getOrderDisplayFields(o) {
    const status = D.getEffectiveStatus(o, A.state.orderStatuses);
    const done = D.isCompleted(o, A.state.orderStatuses);
    const statusText = done ? (status === 'Gereed' ? 'Gereed' : 'Opname gereed') : 'Op te nemen';
    return {
      orderText: o.order + '/' + o.operatie,
      typeText: o.objectsoort,
      omschrText: o.omschrijving,
      hoevhText: o.hoeveelheid + ' ' + o.eenheid,
      statusText
    };
  }

  function matchesColumnFilters(o) {
    const d = getOrderDisplayFields(o);
    const lc = s => s.toLowerCase();
    const f = A.state.columnFilters;
    if (f.order && !lc(d.orderText).includes(lc(f.order))) return false;
    if (f.type && !lc(d.typeText).includes(lc(f.type))) return false;
    if (f.omschrijving && !lc(d.omschrText).includes(lc(f.omschrijving))) return false;
    if (f.hoeveelheid && !lc(d.hoevhText).includes(lc(f.hoeveelheid))) return false;
    if (f.status && !lc(d.statusText).includes(lc(f.status))) return false;
    return true;
  }

  function renderSummaryCards() {
    const { orders, orderStatuses } = A.state;
    const remaining = orders.filter(o => !D.isCompleted(o, orderStatuses));
    const wissels = remaining.filter(o => o.objectsoort === 'Wissel').length;
    const overwegen = remaining.filter(o => o.objectsoort === 'Overwegbevloering').length;
    const spoorMeters = remaining.filter(o => o.objectsoort === 'Spoor')
      .reduce((sum, o) => sum + o.hoeveelheid, 0);

    document.getElementById('summaryCards').innerHTML = `
      <div class="summary-card wissel">
        <div class="card-icon">&#9783;</div>
        <div class="card-info"><div class="card-value">${wissels}</div><div class="card-label">Wissels nog op te nemen</div></div>
      </div>
      <div class="summary-card overweg">
        <div class="card-icon">&#9641;</div>
        <div class="card-info"><div class="card-value">${overwegen}</div><div class="card-label">Overwegbevloeringen nog op te nemen</div></div>
      </div>
      <div class="summary-card spoor">
        <div class="card-icon">&#8942;</div>
        <div class="card-info"><div class="card-value">${spoorMeters} m</div><div class="card-label">Meter spoor nog op te nemen</div></div>
      </div>
      <div class="summary-card totaal">
        <div class="card-icon">&#8721;</div>
        <div class="card-info"><div class="card-value">${remaining.length} / ${orders.length}</div><div class="card-label">Totaal nog uit te voeren</div></div>
      </div>
    `;

    const done = orders.filter(o => D.isCompleted(o, orderStatuses)).length;
    const pct = orders.length > 0 ? Math.round((done / orders.length) * 100) : 0;
    document.getElementById('progressFill').style.width = pct + '%';
    document.getElementById('progressText').textContent = `${done} van ${orders.length} voltooid (${pct}%)`;
  }

  function renderOrderTable(onRowClick) {
    const tbody = document.getElementById('orderTableBody');
    const filtered = A.state.orders.filter(o => {
      if (A.state.currentFilter === 'open' && D.isCompleted(o, A.state.orderStatuses)) return false;
      if (A.state.currentFilter !== 'alle' && A.state.currentFilter !== 'open'
          && o.objectsoort !== A.state.currentFilter) return false;
      return matchesColumnFilters(o);
    });

    tbody.innerHTML = filtered.map(o => {
      const d = getOrderDisplayFields(o);
      const done = D.isCompleted(o, A.state.orderStatuses);
      const typeClass = o.objectsoort === 'Wissel' ? 'wissel'
        : o.objectsoort === 'Overwegbevloering' ? 'overweg' : 'spoor';
      const statusClass = done ? 'done' : 'open';
      return `<tr data-order-key="${o.orderKey}">
        <td title="${d.orderText}"><strong>${o.order}</strong>/${o.operatie}</td>
        <td title="${d.typeText}"><span class="type-badge ${typeClass}">${o.objectsoort}</span></td>
        <td title="${d.omschrText}">${o.omschrijving}</td>
        <td class="hoevh-cell" title="${d.hoevhText}">${o.hoeveelheid} ${o.eenheid}</td>
        <td title="${d.statusText}"><span class="status-badge ${statusClass}"><span class="status-dot"></span>${d.statusText}</span></td>
      </tr>`;
    }).join('');

    tbody.querySelectorAll('tr[data-order-key]').forEach(tr => {
      tr.addEventListener('click', () => onRowClick(tr.dataset.orderKey));
    });
  }

  A.renderOverviewScreen = function (onRowClick) {
    renderSummaryCards();
    renderOrderTable(onRowClick);
  };

  A.setFilter = function (filter, onRowClick) {
    A.state.currentFilter = filter;
    document.querySelectorAll('.filter-btn').forEach(b => {
      b.classList.toggle('active', b.dataset.filter === filter);
    });
    renderOrderTable(onRowClick);
  };

  A.setColumnFilter = function (col, value, onRowClick) {
    A.state.columnFilters[col] = value;
    renderOrderTable(onRowClick);
  };

  A.initColumnResize = function () {
    const table = document.getElementById('orderTable');
    if (!table) return;
    const cols = table.querySelectorAll('colgroup col');
    const handles = table.querySelectorAll('.col-resize');

    handles.forEach(handle => {
      handle.addEventListener('mousedown', startResize);
      handle.addEventListener('touchstart', startResize, { passive: false });
    });

    function startResize(e) {
      e.preventDefault();
      e.stopPropagation();
      const colIdx = parseInt(e.target.dataset.col);
      const col = cols[colIdx];
      if (!col) return;
      const th = e.target.parentElement;
      const startX = e.type === 'touchstart' ? e.touches[0].clientX : e.clientX;
      const startWidth = th.offsetWidth;
      e.target.classList.add('dragging');

      function onMove(ev) {
        const clientX = ev.type === 'touchmove' ? ev.touches[0].clientX : ev.clientX;
        const newWidth = Math.max(50, startWidth + (clientX - startX));
        col.style.width = newWidth + 'px';
      }
      function onUp() {
        e.target.classList.remove('dragging');
        document.removeEventListener('mousemove', onMove);
        document.removeEventListener('mouseup', onUp);
        document.removeEventListener('touchmove', onMove);
        document.removeEventListener('touchend', onUp);
      }
      document.addEventListener('mousemove', onMove);
      document.addEventListener('mouseup', onUp);
      document.addEventListener('touchmove', onMove, { passive: false });
      document.addEventListener('touchend', onUp);
    }
  };
})(window.App.Application, window.App.Domain);