/* ShareModal.jsx — generate a self-contained shareable URL for the current session.
   View-only links open in read-only mode (drag disabled, editing hidden).
   Edit links seed someone else's session and behave like a normal copy. */
(function () {
  const LucideIcon = window.LucideIcon;
  const { useState, useMemo } = React;
  const E = React.createElement;

  function encode(payload) {
    const json = JSON.stringify(payload);
    return LZString.compressToEncodedURIComponent(json);
  }

  function makeUrl(mode, students, settings) {
    // strip transient/UI-only settings from the payload — colleagues should land
    // with their own preferences and an unbiased filter state
    const cleanSettings = Object.assign({}, settings);
    delete cleanSettings.sort;
    delete cleanSettings.compactCards;
    delete cleanSettings.linesVisible;
    const data = encode({ v: 1, students, settings: cleanSettings });
    return location.origin + location.pathname + '#m=' + mode + '&d=' + data;
  }

  function ShareModal({ students, settings, onClose }) {
    const viewUrl = useMemo(() => makeUrl('view', students, settings), [students, settings]);
    const editUrl = useMemo(() => makeUrl('edit', students, settings), [students, settings]);
    const [copied, setCopied] = useState(null);

    const copy = async (url, kind) => {
      try {
        await navigator.clipboard.writeText(url);
        setCopied(kind);
        setTimeout(() => setCopied(null), 1800);
      } catch (e) {
        // fallback: select the input
        const el = document.querySelector('input[data-url="' + kind + '"]');
        if (el) { el.select(); document.execCommand && document.execCommand('copy'); setCopied(kind); setTimeout(() => setCopied(null), 1800); }
      }
    };

    const card = (kind, title, subtitle, icon, url, accent) => E('div', { className: 'share-card share-' + kind },
      E('div', { className: 'share-icon', style: { background: accent } },
        E(LucideIcon, { name: icon, size: 24, strokeWidth: 2.2, color: '#fff' })),
      E('div', { className: 'share-body' },
        E('div', { className: 'share-title' }, title),
        E('div', { className: 'share-sub' }, subtitle),
        E('div', { className: 'share-row' },
          E('input', { type: 'text', readOnly: true, value: url, 'data-url': kind,
            onFocus: (e) => e.target.select() }),
          E('button', { className: 'icon-btn primary', onClick: () => copy(url, kind) },
            E(LucideIcon, { name: copied === kind ? 'Check' : 'Copy', size: 17, strokeWidth: 2.4 }),
            copied === kind ? 'Gekopieerd' : 'Kopieer'))
      )
    );

    return E('div', { className: 'overlay' },
      E('div', { className: 'share', onPointerDown: (e) => e.stopPropagation() },
        E('div', { className: 'share-head' },
          E(LucideIcon, { name: 'Share2', size: 22, strokeWidth: 2.4 }),
          E('h2', null, 'Deel deze klasverdeling'),
          E('span', { className: 'spacer' }),
          E('button', { className: 'icon-btn square', onClick: onClose, 'aria-label': 'Sluiten' },
            E(LucideIcon, { name: 'X', size: 22, strokeWidth: 2.4 }))),
        E('p', { className: 'share-lede' },
          'De volledige sessie wordt in de link zelf meegestuurd — er is geen server nodig. ',
          'Plak de link in een chat of mail; je collega kan hem direct openen.'),

        card('view', 'Bekijk-link',
          'Alleen-lezen. Collega kan de verdeling bekijken, sorteren en filteren, maar niets veranderen.',
          'Eye', viewUrl, 'var(--accent)'),

        card('edit', 'Bewerk-link',
          'Bewerkbare kopie. Collega kan kaarten verslepen en aanpassen — wijzigingen blijven bij hun lokaal, niet bij jou.',
          'PencilLine', editUrl, '#D7913D'),

        E('div', { className: 'share-foot' },
          E(LucideIcon, { name: 'Info', size: 15, strokeWidth: 2.2, color: 'var(--muted)' }),
          E('span', null, 'Bij grote klassen kan de link erg lang worden — gebruik dan ',
            E('b', null, 'Sessie opslaan (.json)'), ' in de instellingen als alternatief.'))
      )
    );
  }

  // ---- helpers exposed for app.jsx to read the URL on mount ----
  function readShared() {
    try {
      const h = (location.hash || '').replace(/^#/, '');
      if (!h) return null;
      const params = new URLSearchParams(h);
      const mode = params.get('m');
      const d = params.get('d');
      if (!mode || !d) return null;
      const json = LZString.decompressFromEncodedURIComponent(d);
      if (!json) return null;
      const data = JSON.parse(json);
      if (!data || !Array.isArray(data.students)) return null;
      return { mode, data };
    } catch (e) { return null; }
  }
  function clearShared() {
    if (location.hash) history.replaceState(null, '', location.pathname + location.search);
  }

  window.ShareModal = ShareModal;
  window.SharedSession = { readShared, clearShared };
})();