/* Tray.jsx — bottom strip of unassigned cards + all global controls
   Controls are split into two clusters: toggles on the left of the spacer,
   action buttons + scroll arrows on the right. */
(function () {
  const LucideIcon = window.LucideIcon;
  const Card = window.Card;
  const { trayCompanionHints } = window.AppData;
  const { useRef } = React;

  function ToggleBtn({ on, onClick, iconOn, iconOff, labelOn, labelOff, title }) {
    return React.createElement('button', {
      className: 'tray-toggle' + (on ? ' on' : ''),
      onClick, title: title || (on ? labelOn : labelOff),
    },
      React.createElement(LucideIcon, { name: on ? iconOn : iconOff, size: 15, strokeWidth: 2.3 }),
      on ? labelOn : labelOff);
  }

  function Tray({
    students, settings, dropHot, registerZone, cardEls, selectedId, onCardPointerDown,
    linesVisible, toggleLines, compactCards, toggleCompact,
    openRoster, openSettings, openTutorial, openShare, viewOnly, sort,
  }) {
    let list = students.filter(s => s.placement === 'tray');
    if (sort && sort.field && sort.filter) {
      list = list.filter(s => s[sort.field] === sort.filter);
    }
    // bring kids who could pair with currently-isolated placed kids to the front
    const hints = trayCompanionHints(students);
    if (hints.size > 0) {
      const rank = (id) => {
        const h = hints.get(id);
        if (!h) return 2;
        return h.type === 'mutual' ? 0 : 1;
      };
      const baseIdx = new Map(students.map((s, i) => [s.id, i]));
      list = [...list].sort((a, b) => (rank(a.id) - rank(b.id)) || (baseIdx.get(a.id) - baseIdx.get(b.id)));
    }
    const scrollRef = useRef(null);
    const scrollBy = (dx) => {
      if (scrollRef.current) scrollRef.current.scrollBy({ left: dx, behavior: 'smooth' });
    };

    return React.createElement('div', { className: 'tray-wrap' },
      React.createElement('div', { className: 'tray-head' },
        React.createElement('span', { className: 't-title' },
          React.createElement(LucideIcon, { name: 'LayoutGrid', size: 17, strokeWidth: 2.4 }),
          'Nog te verdelen'),
        React.createElement('span', { className: 't-count' }, list.length),

        React.createElement(ToggleBtn, {
          on: linesVisible, onClick: toggleLines,
          iconOn: 'Spline', iconOff: 'EyeOff',
          labelOn: 'Lijnen aan', labelOff: 'Lijnen uit',
        }),
        React.createElement(ToggleBtn, {
          on: !compactCards, onClick: toggleCompact,
          iconOn: 'SlidersHorizontal', iconOff: 'Minimize2',
          labelOn: 'Niveaus aan', labelOff: 'Niveaus uit',
        }),

        React.createElement('span', { className: 'spacer' }),

        viewOnly ? React.createElement('span', { className: 'view-badge', title: 'Alleen-lezen bekijkmodus' },
          React.createElement(LucideIcon, { name: 'Eye', size: 14, strokeWidth: 2.4 }),
          'Bekijkmodus') : null,

        React.createElement('button', { className: 'icon-btn square', onClick: openRoster, title: viewOnly ? 'Leerlingen bekijken' : 'Alle leerlingen', 'aria-label': 'Alle leerlingen' },
          React.createElement(LucideIcon, { name: 'List', size: 22, strokeWidth: 2.4 })),
        React.createElement('button', { className: 'icon-btn square', onClick: openShare, title: 'Delen', 'aria-label': 'Delen' },
          React.createElement(LucideIcon, { name: 'Share2', size: 21, strokeWidth: 2.4 })),
        React.createElement('button', { className: 'icon-btn square', onClick: openTutorial, title: 'Uitleg', 'aria-label': 'Uitleg' },
          React.createElement(LucideIcon, { name: 'HelpCircle', size: 23, strokeWidth: 2.2 })),
        viewOnly ? null : React.createElement('button', { className: 'icon-btn square', onClick: openSettings, title: 'Instellingen', 'aria-label': 'Instellingen' },
          React.createElement(LucideIcon, { name: 'Settings', size: 23, strokeWidth: 2.2 })),

        React.createElement('span', { className: 'gap' }),
        React.createElement('button', { className: 'tray-scroll-btn', onClick: () => scrollBy(-360), 'aria-label': 'Naar links' },
          React.createElement(LucideIcon, { name: 'ChevronLeft', size: 22, strokeWidth: 2.6 })),
        React.createElement('button', { className: 'tray-scroll-btn', onClick: () => scrollBy(360), 'aria-label': 'Naar rechts' },
          React.createElement(LucideIcon, { name: 'ChevronRight', size: 22, strokeWidth: 2.6 }))
      ),
      React.createElement('div', {
        className: 'tray' + (dropHot ? ' drop-hot' : ''),
        ref: (el) => { scrollRef.current = el; registerZone('tray', el); },
        'data-dropzone': 'tray',
      },
        list.length === 0
          ? React.createElement('div', { className: 'tray-empty' }, 'Alle leerlingen zijn verdeeld 🎉')
          : list.map(s => React.createElement(Card, {
              key: s.id,
              student: s,
              settings,
              mates: { all: students },
              selected: s.id === selectedId,
              hint: hints.get(s.id),
              onPointerDown: onCardPointerDown,
              cardRef: (el) => { if (el) cardEls.current.set(s.id, el); else cardEls.current.delete(s.id); },
            }))
      )
    );
  }

  window.Tray = Tray;
})();