/* ClassColumn.jsx — class column with summary header, clickable sort/filter,
   and adaptive grouping (by friends OR by subject level). */
(function () {
  const LucideIcon = window.LucideIcon;
  const GenderSymbol = window.GenderSymbol;
  const Card = window.Card;
  const { classSummary, classClusters, classLevelGroups } = window.AppData;

  // header: g/y/r count pills, each clickable to filter
  function LvlCountsBar({ counts, field, active, filter, onSortFilter }) {
    const out = [];
    for (const k of ['g', 'y', 'r']) {
      const cls = [
        'lvl-count', k,
        active ? 'glow' : '',
        (active && filter === k) ? 'on' : '',
        active && filter && filter !== k ? 'dim' : '',
      ].filter(Boolean).join(' ');
      out.push(React.createElement('button', {
        key: k, type: 'button', className: cls,
        onClick: (e) => { e.stopPropagation(); onSortFilter(field, k); },
        disabled: !counts[k],
        style: !counts[k] ? { opacity: 0.32, cursor: 'default' } : null,
      }, React.createElement('span', { className: 'd dot-' + k }), counts[k] || 0));
    }
    return React.createElement('span', { className: 'lvl-counts' }, out);
  }

  function SubjectStat({ field, label, counts, sort, onSortField, onSortFilter }) {
    const active = sort && sort.field === field;
    return React.createElement('div', { className: 'stat subject-stat' + (active ? ' active' : '') },
      React.createElement('button', {
        type: 'button', className: 'lbl-btn' + (active ? ' on' : ''),
        onClick: () => onSortField(field),
        title: 'Sorteer op ' + label,
      }, label.charAt(0).toUpperCase()),
      React.createElement(LvlCountsBar, {
        counts, field, active, filter: active ? sort.filter : null, onSortFilter,
      }));
  }

  function ClassHeader({ which, name, onRename, summary, labels, sort, onSortField, onSortFilter }) {
    const origins = Object.entries(summary.origins).sort((a, b) => a[0].localeCompare(b[0]));

    return React.createElement('div', { className: 'col-head' },
      React.createElement('input', {
        className: 'col-name',
        value: name,
        size: Math.max(name.length, 4),
        onChange: (e) => onRename(which, e.target.value),
        onPointerDown: (e) => e.stopPropagation(),
        'aria-label': 'Klasnaam',
      }),
      React.createElement('span', { className: 'col-count' },
        React.createElement(LucideIcon, { name: 'Users', size: 15, strokeWidth: 2.4 }),
        React.createElement('span', { className: 'cc-total' }, summary.count),
        summary.m > 0 ? React.createElement('span', { className: 'cc-g cc-g-m' },
          React.createElement(GenderSymbol, { gender: 'm', size: 13, strokeWidth: 2.6 }), summary.m) : null,
        summary.f > 0 ? React.createElement('span', { className: 'cc-g cc-g-f' },
          React.createElement(GenderSymbol, { gender: 'f', size: 13, strokeWidth: 2.6 }), summary.f) : null),
      origins.length ? React.createElement('span', { className: 'stat origins' },
        origins.map(([o, info]) => React.createElement('span', { key: o, className: 'origin-pill' },
          React.createElement('span', { className: 'op-name' }, o),
          info.m > 0 ? React.createElement('span', { className: 'op-g op-g-m' },
            React.createElement(GenderSymbol, { gender: 'm', size: 11, strokeWidth: 2.6 }), info.m) : null,
          info.f > 0 ? React.createElement('span', { className: 'op-g op-g-f' },
            React.createElement(GenderSymbol, { gender: 'f', size: 11, strokeWidth: 2.6 }), info.f) : null,
          (info.m === 0 && info.f === 0) ? React.createElement('span', { className: 'op-g' }, info.total) : null
        ))
      ) : null,
      React.createElement(SubjectStat, { field: 'math', label: labels.math, counts: summary.math, sort, onSortField, onSortFilter }),
      React.createElement(SubjectStat, { field: 'dutch', label: labels.dutch, counts: summary.dutch, sort, onSortField, onSortFilter }),
      React.createElement(SubjectStat, { field: 'spelling', label: labels.spelling, counts: summary.spelling, sort, onSortField, onSortFilter }),
      summary.conflicts ? React.createElement('span', { className: 'conflict-badge' },
        React.createElement(LucideIcon, { name: 'TriangleAlert', size: 13, strokeWidth: 2.6 }),
        summary.conflicts) : null
    );
  }

  function ClassColumn({ which, name, students, settings, onRename, dropHot, registerZone, cardEls, selectedId, onCardPointerDown, justPlacedId, onScroll, sort, onSortField, onSortFilter }) {
    const summary = classSummary(students, which);
    const byId = new Map(students.map(s => [s.id, s]));
    const sortField = sort && sort.field;
    const sortFilter = sort && sort.filter;

    const renderCard = (id) => {
      const s = byId.get(id);
      if (!s) return null;
      return React.createElement(Card, {
        key: s.id,
        student: Object.assign({}, s, { _justPlaced: s.id === justPlacedId }),
        settings,
        mates: { all: students },
        selected: s.id === selectedId,
        onPointerDown: onCardPointerDown,
        cardRef: (el) => { if (el) cardEls.current.set(s.id, el); else cardEls.current.delete(s.id); },
      });
    };

    let body;
    const inClassCount = students.filter(s => s.placement === which).length;
    if (inClassCount === 0) {
      body = React.createElement('div', { className: 'dropzone-empty' },
        React.createElement('div', { className: 'ring' },
          React.createElement(LucideIcon, { name: 'Hand', size: 26, strokeWidth: 2, color: 'var(--muted-2)' })),
        'Sleep kaarten hierheen');
    } else if (!sortField) {
      // ---- friend mode (default) ----
      const { pods, loners } = classClusters(students, which);
      const parts = [];
      if (pods.length) {
        parts.push(React.createElement('div', { key: 'pods', className: 'zone-clusters' },
          pods.map((pod, i) => React.createElement('div', { key: 'pod' + i, className: 'pod' },
            pod.map(renderCard)))));
      }
      if (loners.length) {
        parts.push(React.createElement('div', { key: 'loners', className: 'loners-row' },
          loners.map(renderCard)));
      }
      body = parts;
    } else {
      // ---- level mode: group by g/y/r in the chosen subject ----
      const groups = classLevelGroups(students, which, sortField);
      const order = ['g', 'y', 'r'];
      body = order
        .filter(k => groups[k].length > 0)
        .filter(k => !sortFilter || sortFilter === k)
        .map(k => React.createElement('div', { key: k, className: 'pod pod-lvl pod-lvl-' + k },
          React.createElement('span', { className: 'pod-tag pod-tag-' + k },
            React.createElement('span', { className: 'd dot-' + k }),
            groups[k].length),
          groups[k].map(renderCard)));
    }

    return React.createElement('div', {
      className: 'column' + (dropHot ? ' drop-hot' : ''),
      ref: (el) => registerZone(which, el),
      'data-dropzone': which,
      'data-screen-label': name,
    },
      React.createElement(ClassHeader, { which, name, onRename, summary, labels: settings.labels, sort, onSortField, onSortFilter }),
      React.createElement('div', { className: 'dropzone', onScroll }, body)
    );
  }

  window.ClassColumn = ClassColumn;
})();