/* RosterList.jsx — full-page filterable list to edit every student's profile stats */
(function () {
  const LucideIcon = window.LucideIcon;
  const GenderSymbol = window.GenderSymbol;
  const AviSelect = window.AviSelect;
  const NameAutocomplete = window.NameAutocomplete;
  const { lc } = window.AppData;
  const { useState } = React;

  function MiniStatus({ value, onChange }) {
    const opt = (s, label) => React.createElement('button', {
      type: 'button', key: s,
      className: 'ms ms-' + s + (value === s ? ' on' : ''),
      onClick: () => onChange(s), title: label,
    }, label);
    return React.createElement('div', { className: 'mini-status' },
      opt('g', 'G'), opt('y', 'V'), opt('r', 'R'));
  }

  function PlacementPick({ value, names, onChange }) {
    const opt = (v, label) => React.createElement('button', {
      type: 'button', key: v,
      className: 'pp pp-' + v + (value === v ? ' on' : ''),
      onClick: () => onChange(v),
    }, label);
    return React.createElement('div', { className: 'place-pick' },
      opt('tray', 'Bak'), opt('class1', names.class1), opt('class2', names.class2));
  }

  function Row({ s, settings, allNames, update, remove }) {
    const set = (patch) => update(s.id, patch);
    const parseList = (str, n) => str.split(',').map(x => x.trim()).filter(Boolean).slice(0, n || 99);
    return React.createElement('div', { className: 'r-row' },
      React.createElement('input', { className: 'ri ri-name', value: s.name, onChange: e => set({ name: e.target.value }) }),
      React.createElement('input', { className: 'ri ri-origin', value: s.originClass, placeholder: '3A', onChange: e => set({ originClass: e.target.value }) }),
      React.createElement('div', { className: 'gender-mini' },
        React.createElement('button', { type: 'button', className: s.gender === 'm' ? 'on' : '', onClick: () => set({ gender: s.gender === 'm' ? '' : 'm' }), title: 'Jongen' },
          React.createElement(GenderSymbol, { gender: 'm', size: 18, strokeWidth: 2.4, color: s.gender === 'm' ? '#fff' : '#5C86C2' })),
        React.createElement('button', { type: 'button', className: s.gender === 'f' ? 'on' : '', onClick: () => set({ gender: s.gender === 'f' ? '' : 'f' }), title: 'Meisje' },
          React.createElement(GenderSymbol, { gender: 'f', size: 18, strokeWidth: 2.4, color: s.gender === 'f' ? '#fff' : '#C26FA0' }))),
      React.createElement(MiniStatus, { value: s.math, onChange: v => set({ math: v }) }),
      React.createElement(MiniStatus, { value: s.dutch, onChange: v => set({ dutch: v }) }),
      React.createElement(MiniStatus, { value: s.spelling, onChange: v => set({ spelling: v }) }),
      React.createElement(MiniStatus, { value: s.behavior, onChange: v => set({ behavior: v }) }),
      React.createElement('div', { className: 'ri-wrap' },
        React.createElement(AviSelect, { value: s.avi, onChange: v => set({ avi: v }), className: 'ri ri-avi' })),
      React.createElement('div', { className: 'ri-wrap' },
        React.createElement(NameAutocomplete, {
          value: (s.friends || []).join(', '),
          onChange: v => set({ friends: parseList(v, 3) }),
          names: allNames, max: 3, multi: true, excludeSelf: s.name,
          placeholder: 'Emma, Lena, Sara',
          className: 'ri ri-friends',
        })),
      React.createElement('div', { className: 'ri-wrap' },
        React.createElement(NameAutocomplete, {
          value: (s.doNotPlaceWith || []).join(', '),
          onChange: v => set({ doNotPlaceWith: parseList(v) }),
          names: allNames, multi: true, excludeSelf: s.name,
          placeholder: '—',
          className: 'ri ri-dnp',
        })),
      React.createElement('div', { className: 'jn-mini' },
        React.createElement('button', { type: 'button', className: 'jn' + (s.iac ? ' on jn-purple' : ''), onClick: () => set({ iac: !s.iac }), title: 'IAC' }, 'J'),
        React.createElement('button', { type: 'button', className: 'jn' + (!s.iac ? ' on' : ''), onClick: () => set({ iac: !s.iac }), title: 'IAC' }, 'N')),
      React.createElement('div', { className: 'jn-mini' },
        React.createElement('button', { type: 'button', className: 'jn' + (s.leersteun ? ' on jn-purple' : ''), onClick: () => set({ leersteun: !s.leersteun }), title: 'Leersteun' }, 'J'),
        React.createElement('button', { type: 'button', className: 'jn' + (!s.leersteun ? ' on' : ''), onClick: () => set({ leersteun: !s.leersteun }), title: 'Leersteun' }, 'N')),
      React.createElement(PlacementPick, { value: s.placement, names: settings.classNames, onChange: v => set({ placement: v }) }),
      React.createElement('button', { className: 'r-del', onClick: () => remove(s.id), title: 'Verwijderen' },
        React.createElement(LucideIcon, { name: 'Trash2', size: 18, strokeWidth: 2.2 }))
    );
  }

  function RosterList({ students, settings, update, remove, addBlank, onClose }) {
    const [q, setQ] = useState('');
    const [origin, setOrigin] = useState('all');
    const [place, setPlace] = useState('all');

    const origins = [...new Set(students.map(s => s.originClass).filter(Boolean))].sort();
    const filtered = students.filter(s => {
      if (q && !lc(s.name).includes(lc(q))) return false;
      if (origin !== 'all' && s.originClass !== origin) return false;
      if (place !== 'all' && s.placement !== place) return false;
      return true;
    });

    const L = settings.labels;
    const head = (txt, cls) => React.createElement('div', { className: 'rh ' + (cls || '') }, txt);

    return React.createElement('div', { className: 'overlay' },
      React.createElement('div', { className: 'roster' },
        React.createElement('div', { className: 'roster-head' },
          React.createElement('button', { className: 'icon-btn square', onClick: onClose, 'aria-label': 'Terug' },
            React.createElement(LucideIcon, { name: 'ArrowLeft', size: 24, strokeWidth: 2.4 })),
          React.createElement('h2', null, 'Alle leerlingen'),
          React.createElement('span', { className: 'roster-count' }, filtered.length + ' / ' + students.length),
          React.createElement('span', { className: 'spacer' }),
          React.createElement('div', { className: 'search' },
            React.createElement(LucideIcon, { name: 'Search', size: 19, strokeWidth: 2.2 }),
            React.createElement('input', { value: q, onChange: e => setQ(e.target.value), placeholder: 'Zoek op naam…' })),
          React.createElement('select', { className: 'r-select', value: origin, onChange: e => setOrigin(e.target.value) },
            React.createElement('option', { value: 'all' }, 'Alle oude klassen'),
            origins.map(o => React.createElement('option', { key: o, value: o }, o))),
          React.createElement('select', { className: 'r-select', value: place, onChange: e => setPlace(e.target.value) },
            React.createElement('option', { value: 'all' }, 'Alle plaatsingen'),
            React.createElement('option', { value: 'tray' }, 'Nog te verdelen'),
            React.createElement('option', { value: 'class1' }, settings.classNames.class1),
            React.createElement('option', { value: 'class2' }, settings.classNames.class2)),
          React.createElement('button', { className: 'icon-btn primary', onClick: addBlank },
            React.createElement(LucideIcon, { name: 'Plus', size: 20, strokeWidth: 2.6 }), 'Toevoegen')),

        React.createElement('div', { className: 'roster-body' },
          React.createElement('div', { className: 'r-row r-header' },
            head('Naam', 'rh-name'), head(L.origin, 'rh-origin'), head('Geslacht', 'rh-gender'),
            head(L.math, 'rh-st'), head(L.dutch, 'rh-st'), head(L.spelling, 'rh-st'), head(L.behavior, 'rh-st'),
            head(L.avi, 'rh-avi'), head('Vriendjes', 'rh-friends'), head('Niet met', 'rh-dnp'),
            head('IAC', 'rh-jn'), head('Leerst.', 'rh-jn'),
            head('Plaatsing', 'rh-place'), head('', 'rh-del')),
          filtered.length === 0
            ? React.createElement('div', { className: 'roster-empty' }, 'Geen leerlingen gevonden.')
            : filtered.map(s => React.createElement(Row, { key: s.id, s, settings, allNames: students.map(o => o.name), update, remove }))
        )
      )
    );
  }

  window.RosterList = RosterList;
})();