/* CardEditor.jsx — full edit popover for one student */
(function () {
  const LucideIcon = window.LucideIcon;
  const GenderSymbol = window.GenderSymbol;
  const AviSelect = window.AviSelect;
  const NameAutocomplete = window.NameAutocomplete;
  const { useState } = React;

  function StatusSeg({ value, onChange }) {
    const opt = (s, label) => React.createElement('button', {
      type: 'button',
      className: 'seg-btn s-' + s + (value === s ? ' on' : ''),
      onClick: () => onChange(s),
    }, label);
    return React.createElement('div', { className: 'seg' },
      React.createElement('button', { type: 'button', className: 's-g' + (value === 'g' ? ' on' : ''), onClick: () => onChange('g') }, 'G'),
      React.createElement('button', { type: 'button', className: 's-y' + (value === 'y' ? ' on' : ''), onClick: () => onChange('y') }, 'V'),
      React.createElement('button', { type: 'button', className: 's-r' + (value === 'r' ? ' on' : ''), onClick: () => onChange('r') })
    );
  }

  function Field({ label, children, full }) {
    return React.createElement('div', { className: 'field' + (full ? ' full' : '') },
      React.createElement('label', null, label), children);
  }

  function CardEditor({ student, settings, allStudents, onSave, onDelete, onClose }) {
    const [d, setD] = useState(() => Object.assign({}, student, {
      friends: (student.friends || []).join(', '),
      doNotPlaceWith: (student.doNotPlaceWith || []).join(', '),
    }));
    const set = (k, v) => setD(prev => Object.assign({}, prev, { [k]: v }));
    const labels = settings.labels;

    const save = () => {
      const clean = (s) => String(s || '').split(',').map(x => x.trim()).filter(Boolean);
      onSave(Object.assign({}, student, d, {
        friends: clean(d.friends).slice(0, 3),
        doNotPlaceWith: clean(d.doNotPlaceWith),
      }));
    };

    const statusField = (key, label) => Field({
      label,
      children: React.createElement(StatusSeg, { value: d[key], onChange: (v) => set(key, v) }),
    });

    return React.createElement('div', { className: 'ed-wrap', onPointerDown: (e) => { if (e.target.classList.contains('ed-wrap')) onClose(); } },
      React.createElement('div', { className: 'ed' },
        React.createElement('h3', null, 'Kaart bewerken'),
        React.createElement('div', { className: 'ed-sub' }, 'Pas alle gegevens van deze leerling aan.'),
        React.createElement('div', { className: 'ed-grid' },
          Field({ label: 'Naam', full: true, children: React.createElement('input', { type: 'text', value: d.name, onChange: e => set('name', e.target.value), autoFocus: true }) }),
          Field({ label: labels.origin, children: React.createElement('input', { type: 'text', value: d.originClass, onChange: e => set('originClass', e.target.value), placeholder: '3A' }) }),
          Field({
            label: 'Geslacht',
            children: React.createElement('div', { className: 'gender-seg' },
              React.createElement('button', { type: 'button', className: d.gender === 'm' ? 'on' : '', onClick: () => set('gender', 'm') },
                React.createElement(GenderSymbol, { gender: 'm', size: 18, strokeWidth: 2.4 }), 'Jongen'),
              React.createElement('button', { type: 'button', className: d.gender === 'f' ? 'on' : '', onClick: () => set('gender', 'f') },
                React.createElement(GenderSymbol, { gender: 'f', size: 18, strokeWidth: 2.4 }), 'Meisje'))
          }),
          Field({
            label: 'IAC',
            children: React.createElement('div', { className: 'gender-seg' },
              React.createElement('button', { type: 'button', className: d.iac ? 'on iac-on' : '', onClick: () => set('iac', true) }, 'Ja'),
              React.createElement('button', { type: 'button', className: !d.iac ? 'on' : '', onClick: () => set('iac', false) }, 'Nee'))
          }),
          Field({
            label: 'Leersteun',
            children: React.createElement('div', { className: 'gender-seg' },
              React.createElement('button', { type: 'button', className: d.leersteun ? 'on leersteun-on' : '', onClick: () => set('leersteun', true) }, 'Ja'),
              React.createElement('button', { type: 'button', className: !d.leersteun ? 'on' : '', onClick: () => set('leersteun', false) }, 'Nee'))
          }),
          statusField('math', labels.math),
          statusField('dutch', labels.dutch),
          statusField('spelling', labels.spelling),
          statusField('behavior', labels.behavior),
          Field({ label: labels.avi, children: React.createElement(AviSelect, { value: d.avi, onChange: v => set('avi', v) }) }),
          React.createElement('div', { className: 'field full' },
            React.createElement('label', null, 'Vriendjes (max 3, gescheiden door komma)'),
            React.createElement(NameAutocomplete, {
              value: d.friends, onChange: v => set('friends', v),
              names: (allStudents || []).map(o => o.name),
              max: 3, multi: true, excludeSelf: student.name,
              placeholder: 'Emma, Lena, Sara',
            }),
            React.createElement('div', { className: 'hint' }, 'Namen moeten exact overeenkomen met andere kaarten. Typ om suggesties te zien.')),
          React.createElement('div', { className: 'field full' },
            React.createElement('label', null, 'Niet samenplaatsen met (gescheiden door komma)'),
            React.createElement(NameAutocomplete, {
              value: d.doNotPlaceWith, onChange: v => set('doNotPlaceWith', v),
              names: (allStudents || []).map(o => o.name),
              multi: true, excludeSelf: student.name,
              placeholder: 'Tijn',
            })),
          Field({ label: 'Notities', full: true, children: React.createElement('textarea', { rows: 2, value: d.notes, onChange: e => set('notes', e.target.value) }) })
        ),
        React.createElement('div', { className: 'ed-foot' },
          React.createElement('button', { className: 'icon-btn danger', onClick: () => onDelete(student.id) },
            React.createElement(LucideIcon, { name: 'Trash2', size: 18, strokeWidth: 2.2 }), 'Verwijderen'),
          React.createElement('span', { className: 'spacer' }),
          React.createElement('button', { className: 'icon-btn', onClick: onClose }, 'Annuleren'),
          React.createElement('button', { className: 'icon-btn primary', onClick: save },
            React.createElement(LucideIcon, { name: 'Check', size: 18, strokeWidth: 2.6 }), 'Opslaan'))
      )
    );
  }

  window.CardEditor = CardEditor;
})();