/* Settings.jsx — full-page settings overlay */
(function () {
  const LucideIcon = window.LucideIcon;

  function Switch({ on }) {
    return React.createElement('span', { className: 'switch' + (on ? ' on' : '') });
  }

  function Toggle({ label, on, onClick }) {
    return React.createElement('div', { className: 'toggle', onClick },
      React.createElement('span', { className: 'tg-label' }, label),
      React.createElement(Switch, { on }));
  }

  function Section({ n, title, children, span2 }) {
    return React.createElement('div', { className: 'sect' + (span2 ? ' span2' : '') },
      React.createElement('h3', null, React.createElement('span', { className: 'n' }, n), title),
      children);
  }

  function Settings({ settings, setSettings, onClose, io, counts, onAddStudent }) {
    const f = settings.fields;
    const labels = settings.labels;
    const toggleField = (k) => setSettings(s => ({ ...s, fields: { ...s.fields, [k]: !s.fields[k] } }));
    const setLabel = (k, v) => setSettings(s => ({ ...s, labels: { ...s.labels, [k]: v } }));
    const setClassName = (k, v) => setSettings(s => ({ ...s, classNames: { ...s.classNames, [k]: v } }));

    const fieldDefs = [
      ['origin', labels.origin], ['gender', 'Geslacht-icoon'],
      ['math', labels.math], ['dutch', labels.dutch],
      ['spelling', labels.spelling], ['avi', labels.avi],
      ['behavior', labels.behavior + ' (kleurbalk)'], ['hearts', 'Vriendjes (namen)'],
      ['notes', 'Notities'],
    ];

    return React.createElement('div', { className: 'overlay' },
      React.createElement('div', { className: 'settings' },
        React.createElement('div', { className: 'settings-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, 'Instellingen'),
          React.createElement('span', { className: 'spacer' }),
          onAddStudent ? React.createElement('button', { className: 'icon-btn', onClick: onAddStudent },
            React.createElement(LucideIcon, { name: 'Plus', size: 20, strokeWidth: 2.6 }), 'Leerling toevoegen') : null,
          React.createElement('button', { className: 'icon-btn primary', onClick: onClose },
            React.createElement(LucideIcon, { name: 'Check', size: 20, strokeWidth: 2.6 }), 'Klaar')),

        React.createElement('div', { className: 'settings-body' },
          // 1 — card display
          React.createElement(Section, { n: 1, title: 'Kaartweergave' },
            React.createElement('div', { className: 'toggle-grid' },
              fieldDefs.map(([k, lbl]) => React.createElement(Toggle, { key: k, label: lbl, on: f[k], onClick: () => toggleField(k) })))),

          // 2 — field labels
          React.createElement(Section, { n: 2, title: 'Veldnamen' },
            React.createElement('div', { className: 'label-row' },
              ['math', 'dutch', 'spelling', 'avi', 'behavior', 'origin'].map(k =>
                React.createElement('div', { className: 'field', key: k },
                  React.createElement('label', null, ({ math: 'Rekenen', dutch: 'Nederlands', spelling: 'Spelling', avi: 'AVI', behavior: 'Gedrag', origin: 'Oude klas' })[k]),
                  React.createElement('input', { type: 'text', value: labels[k], onChange: e => setLabel(k, e.target.value) }))))),

          // 3 — class names
          React.createElement(Section, { n: 3, title: 'Klasnamen' },
            React.createElement('div', { className: 'label-row' },
              React.createElement('div', { className: 'field' },
                React.createElement('label', null, 'Klas links'),
                React.createElement('input', { type: 'text', value: settings.classNames.class1, onChange: e => setClassName('class1', e.target.value) })),
              React.createElement('div', { className: 'field' },
                React.createElement('label', null, 'Klas rechts'),
                React.createElement('input', { type: 'text', value: settings.classNames.class2, onChange: e => setClassName('class2', e.target.value) })))),

          // 4 — import / export
          React.createElement(Section, { n: 4, title: 'Importeren / exporteren', span2: true },
            React.createElement('div', { className: 'io-row' },
              React.createElement('button', { className: 'icon-btn', onClick: io.importXlsx },
                React.createElement(LucideIcon, { name: 'FileSpreadsheet', size: 22, strokeWidth: 2 }), 'Excel importeren (.xlsx)'),
              React.createElement('button', { className: 'icon-btn', onClick: io.importJson },
                React.createElement(LucideIcon, { name: 'FolderOpen', size: 22, strokeWidth: 2 }), 'Sessie laden (.json)'),
              React.createElement('button', { className: 'icon-btn', onClick: io.exportJson },
                React.createElement(LucideIcon, { name: 'Save', size: 22, strokeWidth: 2 }), 'Sessie opslaan (.json)'),
              React.createElement('button', { className: 'icon-btn', onClick: io.exportXlsx },
                React.createElement(LucideIcon, { name: 'Download', size: 22, strokeWidth: 2 }), 'Verdeling exporteren (.xlsx)')),
            React.createElement('div', { className: 'io-note' },
              'Excel-formaat: kolom A = naam leerling, kolom B = vriendjes gescheiden door puntkomma (bijv. ', React.createElement('em', null, 'Emma;Lena;Sara'),
              '). Elke rij = één leerling. Overige velden vul je daarna in via de kaart-editor.')),

          // 5 — danger zone
          React.createElement(Section, { n: 5, title: 'Gevarenzone', span2: true },
            React.createElement('div', { className: 'danger-row' },
              React.createElement('button', { className: 'icon-btn', onClick: io.resetPlacements },
                React.createElement(LucideIcon, { name: 'RotateCcw', size: 20, strokeWidth: 2.2 }), 'Verdeling resetten (' + counts.placed + ' kaarten terug)'),
              React.createElement('button', { className: 'icon-btn danger', onClick: io.clearAll },
                React.createElement(LucideIcon, { name: 'Trash2', size: 20, strokeWidth: 2.2 }), 'Alle gegevens wissen')))
        )
      )
    );
  }

  window.SettingsOverlay = Settings;
})();