document.addEventListener('DOMContentLoaded', function () {
  // ─────────────────────────────────────────────────────────────────────────────
  // 1) Przycisk otwierający panel
  // ─────────────────────────────────────────────────────────────────────────────
  const accessBtn = document.createElement('div');
  accessBtn.id = 'accessibility-button';
  accessBtn.setAttribute('aria-label', 'Opcje dostępności');
  accessBtn.innerHTML = `
    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
      <circle cx="12" cy="12" r="10" stroke="#ffffff" stroke-width="1.5"></circle>
      <path d="M14 7C14 8.10457 13.1046 9 12 9C10.8954 9 10 8.10457 10 7C10 5.89543 10.8954 5 12 5C13.1046 5 14 5.89543 14 7Z" stroke="#ffffff" stroke-width="1.5"></path>
      <path d="M18 10C18 10 14.4627 11.5 12 11.5C9.53727 11.5 6 10 6 10" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"></path>
      <path d="M12 12V13.4522M12 13.4522C12 14.0275 12.1654 14.5906 12.4765 15.0745L15 19M12 13.4522C12 14.0275 11.8346 14.5906 11.5235 15.0745L9 19" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"></path>
    </svg>
  `;
  document.body.appendChild(accessBtn);

  // ─────────────────────────────────────────────────────────────────────────────
  // 2) Panel opcji dostępności
  // ─────────────────────────────────────────────────────────────────────────────
  const accessPanel = document.createElement('div');
  accessPanel.id = 'accessibility-panel';
  accessPanel.innerHTML = `
    <div class="panel-header">
      <span>Opcje dostępności</span>
      <button id="close-accessibility-panel" aria-label="Zamknij">×</button>
    </div>
    <div class="panel-body">
      <button id="toggle-contrast">Wysoki kontrast: OFF</button>
      <button id="toggle-blue-filter">Filtr niebieski: OFF</button>
      <button id="toggle-grayscale">Tryb szarości: OFF</button>
      <button id="toggle-images">Ukryj obrazy</button>
      <button id="toggle-cursor">Zwiększ kursor</button>

      <div class="font-size-controls" role="group" aria-label="Rozmiar czcionki">
        <button id="font-dec" aria-label="Zmniejsz czcionkę" title="Zmniejsz czcionkę">A−</button>
        <button id="font-reset" aria-label="Resetuj rozmiar czcionki" title="Resetuj rozmiar czcionki">A</button>
        <button id="font-inc" aria-label="Zwiększ czcionkę" title="Zwiększ czcionkę">A+</button>
      </div>
    </div>
  `;
  document.body.appendChild(accessPanel);

  // ─────────────────────────────────────────────────────────────────────────────
  // 3) Referencje
  // ─────────────────────────────────────────────────────────────────────────────
  const panel = document.getElementById('accessibility-panel');
  const contrastBtn = document.getElementById('toggle-contrast');
  const blueFilterBtn = document.getElementById('toggle-blue-filter');
  const grayscaleBtn = document.getElementById('toggle-grayscale');
  const imagesBtn = document.getElementById('toggle-images');
  const cursorBtn = document.getElementById('toggle-cursor');
  const fontIncBtn = document.getElementById('font-inc');
  const fontDecBtn = document.getElementById('font-dec');
  const fontResetBtn = document.getElementById('font-reset');

  // ─────────────────────────────────────────────────────────────────────────────
  // 4) Panel open/close
  // ─────────────────────────────────────────────────────────────────────────────
  accessBtn.addEventListener('click', () => panel.classList.toggle('open'));
  document.getElementById('close-accessibility-panel').addEventListener('click', () => panel.classList.remove('open'));

  // ─────────────────────────────────────────────────────────────────────────────
  // 5) Helpery etykiet
  // ─────────────────────────────────────────────────────────────────────────────
  function updateContrastButton() {
    const isOn = document.body.classList.contains('high-contrast');
    contrastBtn.textContent = isOn ? 'Wyłącz wysoki kontrast' : 'Włącz wysoki kontrast';
  }
  function updateBlueFilterButton() {
    const isOn = !!document.getElementById('eyeAble-Bluefilter');
    blueFilterBtn.textContent = isOn ? 'Wyłącz filtr niebieski' : 'Włącz filtr niebieski';
  }
  function updateGrayscaleButton() {
    const isOn = document.documentElement.classList.contains('grayscale');
    grayscaleBtn.textContent = isOn ? 'Wyłącz tryb szarości' : 'Włącz tryb szarości';
  }
  function updateImagesButton() {
    const isOn = document.body.classList.contains('hide-images');
    imagesBtn.textContent = isOn ? 'Pokaż obrazy' : 'Ukryj obrazy';
  }
  function updateCursorButton() {
    const isOn = document.body.classList.contains('big-cursor');
    cursorBtn.textContent = isOn ? 'Przywróć kursor' : 'Zwiększ kursor';
  }

  // ─────────────────────────────────────────────────────────────────────────────
  // 6) Akcje – istniejące
  // ─────────────────────────────────────────────────────────────────────────────
  contrastBtn.addEventListener('click', () => {
    document.body.classList.toggle('high-contrast');
    localStorage.setItem('highContrast', document.body.classList.contains('high-contrast') ? '1' : '0');
    updateContrastButton();
  });

  blueFilterBtn.addEventListener('click', () => {
    const shader = document.getElementById('eyeAble-Bluefilter');
    if (shader) {
      shader.remove();
      localStorage.setItem('blueFilter', '0');
    } else {
      const s = document.createElement('eye-able-shader');
      s.id = 'eyeAble-Bluefilter';
      s.setAttribute('aria-hidden', 'true');
      s.style.cssText = `
        background: rgba(255, 147, 41, 0.43);
        z-index: 2147483646;
        margin: 0; border-radius: 0; padding: 0; pointer-events: none;
        position: fixed; top: -10%; right: -10%; bottom: -10%; left: -10%;
        width: auto; height: auto; mix-blend-mode: multiply; display: block !important;`;
      document.body.appendChild(s);
      localStorage.setItem('blueFilter', '1');
    }
    updateBlueFilterButton();
  });

  grayscaleBtn.addEventListener('click', () => {
    document.documentElement.classList.toggle('grayscale');
    localStorage.setItem('grayscaleMode', document.documentElement.classList.contains('grayscale') ? '1' : '0');
    updateGrayscaleButton();
  });

  imagesBtn.addEventListener('click', () => {
    document.body.classList.toggle('hide-images');
    localStorage.setItem('hideImages', document.body.classList.contains('hide-images') ? '1' : '0');
    updateImagesButton();
  });

  // ─────────────────────────────────────────────────────────────────────────────
  // 7) DUŻY KURSOR – overlay z INLINE SVG (CSP-safe), z aktywacją po pierwszym ruchu
  // ─────────────────────────────────────────────────────────────────────────────
  let overlay = null; // <div id="a11y-cursor">
  let mmHandler = null;
  let leaveHandler = null;
  let enteredOnce = false;

  const ARROW_SVG = `
    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 80 80">
      <path d="M 22 8.734375 L 22 64.328125 L 36.34375 54.273438 L 45.605469 72.628906 L 54.722656 67.921875 L 45.140625 50.1875 L 63.054688 46.230469 L 61.632813 44.933594 Z M 24 13.265625 L 58.859375 45.109375 L 42.125 48.800781 L 51.996094 67.078125 L 46.480469 69.925781 L 37.089844 51.308594 L 24 60.484375 Z M 28 24 C 27.449219 24 27 24.449219 27 25 C 27 25.550781 27.449219 26 28 26 C 28.550781 26 29 25.550781 29 25 C 29 24.449219 28.550781 24 28 24 Z M 28 28 C 27.449219 28 27 28.449219 27 29 C 27 29.550781 27.449219 30 28 30 C 28.550781 30 29 29.550781 29 29 C 29 28.449219 28.550781 28 28 28 Z M 28 32 C 27.449219 32 27 32.449219 27 33 C 27 33.550781 27.449219 34 28 34 C 28.550781 34 29 33.550781 29 33 C 29 32.449219 28.550781 32 28 32 Z M 28 36 C 27.449219 36 27 36.449219 27 37 C 27 37.550781 27.449219 38 28 38 C 28.550781 38 29 37.550781 29 37 C 29 36.449219 28.550781 36 28 36 Z M 28 40 C 27.449219 40 27 40.449219 27 41 C 27 41.550781 27.449219 42 28 42 C 28.550781 42 29 41.550781 29 41 C 29 40.449219 28.550781 40 28 40 Z M 28 44 C 27.449219 44 27 44.449219 27 45 C 27 45.550781 27.449219 46 28 46 C 28.550781 46 29 45.550781 29 45 C 29 44.449219 28.550781 44 28 44 Z M 28 48 C 27.449219 48 27 48.449219 27 49 C 27 49.550781 27.449219 50 28 50 C 28.550781 50 29 49.550781 29 49 C 29 48.449219 28.550781 48 28 48 Z M 28 52 C 27.449219 52 27 52.449219 27 53 C 27 53.550781 27.449219 54 28 54 C 28.550781 54 29 53.550781 29 53 C 29 52.449219 28.550781 52 28 52 Z"/>
    </svg>`;
  const HAND_SVG = `
    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 80 80">
      <path d="M 29.5 5 C 26.472656 5 24 7.472656 24 10.5 L 24 42.160156 L 19.976563 45.453125 C 16.941406 47.941406 16.125 52.261719 18.050781 55.683594 L 24.75 67.585938 L 24.699219 67.484375 C 26.0625 70.726563 29.273438 73 33 73 L 53 73 C 57.957031 73 62 68.957031 62 64 L 62 36.5 C 62 33.472656 59.527344 31 56.5 31 C 55.066406 31 53.777344 31.585938 52.796875 32.496094 C 52.304688 29.960938 50.167969 28 47.5 28 C 45.820313 28 44.371094 28.804688 43.359375 30 L 43.324219 30 C 42.402344 28.242188 40.613281 27 38.5 27 C 37.152344 27 35.957031 27.546875 35 28.355469 L 35 10.5 C 35 7.472656 32.527344 5 29.5 5 Z M 29.5 7 C 31.445313 7 33 8.554688 33 10.5 L 33 36 L 35 36 L 35 32.5 C 35 30.554688 36.554688 29 38.5 29 C 40.445313 29 42 30.554688 42 32.5 L 42 36 L 44 36 L 44 33.5 C 44 31.554688 45.554688 30 47.5 30 C 49.445313 30 51 31.554688 51 33.5 L 51 36.5 L 53 36.5 C 53 34.554688 54.554688 33 56.5 33 C 58.445313 33 60 34.554688 60 36.5 L 60 64 C 60 67.878906 56.878906 71 53 71 L 33 71 C 30.085938 71 27.601563 69.226563 26.546875 66.707031 L 26.519531 66.65625 L 19.792969 54.703125 C 18.339844 52.117188 18.949219 48.878906 21.246094 47 L 26 43.109375 L 26 10.5 C 26 8.554688 27.554688 7 29.5 7 Z M 34 41 C 33.449219 41 33 41.449219 33 42 C 33 42.550781 33.449219 43 34 43 C 34.550781 43 35 42.550781 35 42 C 35 41.449219 34.550781 41 34 41 Z M 43 41 C 42.449219 41 42 41.449219 42 42 C 42 42.550781 42.449219 43 43 43 C 43.550781 43 44 42.550781 44 42 C 44 41.449219 43.550781 41 43 41 Z M 52 41 C 51.449219 41 51 41.449219 51 42 C 51 42.550781 51.449219 43 52 43 C 52.550781 43 53 42.550781 53 42 C 53 41.449219 52.550781 41 52 41 Z M 34 45 C 33.449219 45 33 45.449219 33 46 C 33 46.550781 33.449219 47 34 47 C 34.550781 47 35 46.550781 35 46 C 35 45.449219 34.550781 45 34 45 Z M 43 45 C 42.449219 45 42 45.449219 42 46 C 42 46.550781 42.449219 47 43 47 C 43.550781 47 44 46.550781 44 46 C 44 45.449219 43.550781 45 43 45 Z M 52 45 C 51.449219 45 51 45.449219 51 46 C 51 46.550781 51.449219 47 52 47 C 52.550781 47 53 46.550781 53 46 C 53 45.449219 52.550781 45 52 45 Z M 34 49 C 33.449219 49 33 49.449219 33 50 C 33 50.550781 33.449219 51 34 51 C 34.550781 51 35 50.550781 35 50 C 35 49.449219 34.550781 49 34 49 Z M 43 49 C 42.449219 49 42 49.449219 42 50 C 42 50.550781 42.449219 51 43 51 C 43.550781 51 44 50.550781 44 50 C 44 49.449219 43.550781 49 43 49 Z M 52 49 C 51.449219 49 51 49.449219 51 50 C 51 50.550781 51.449219 51 52 51 C 52.550781 51 53 50.550781 53 50 C 53 49.449219 52.550781 49 52 49 Z M 34 53 C 33.449219 53 33 53.449219 33 54 C 33 54.550781 33.449219 55 34 55 C 34.550781 55 35 54.550781 35 54 C 35 53.449219 34.550781 53 34 53 Z M 43 53 C 42.449219 53 42 53.449219 42 54 C 42 54.550781 42.449219 55 43 55 C 43.550781 55 44 54.550781 44 54 C 44 53.449219 43.550781 53 43 53 Z M 52 53 C 51.449219 53 51 53.449219 51 54 C 51 54.550781 51.449219 55 52 55 C 52.550781 55 53 54.550781 53 54 C 53 53.449219 52.550781 53 52 53 Z"/>
    </svg>`;

  const CURSORS = {
    arrow: { svg: ARROW_SVG, hotspotX: 6, hotspotY: 6 },
    hand:  { svg: HAND_SVG,  hotspotX: 26, hotspotY: 12 },
  };
  let current = 'arrow';

  function ensureOverlay() {
    if (overlay) return;
    overlay = document.createElement('div');
    overlay.id = 'a11y-cursor';
    overlay.setAttribute('aria-hidden', 'true');
    overlay.style.cssText = [
      'position:fixed','left:0','top:0','width:48px','height:48px',
      'pointer-events:none','z-index:2147483647','transform:translate3d(-9999px,-9999px,0)',
      'opacity:1','display:block'
    ].join(';');
    document.body.appendChild(overlay);
  }
  function setOverlay(name){ current = name; if (!overlay) return; overlay.innerHTML = CURSORS[name].svg; }
  function moveOverlay(x,y){ if(!overlay) return; const c = CURSORS[current]; overlay.style.transform = `translate3d(${x-c.hotspotX}px, ${y-c.hotspotY}px, 0)`; }
  function isInteractive(el){ return el && el.closest && el.closest('a[href],button,[role="button"],input[type="button"],input[type="submit"],input[type="checkbox"],input[type="radio"],select,.clickable,[onclick]'); }
  function isTextInput(el){ return el && el.closest && el.closest('input[type="text"],input[type="search"],input[type="email"],input[type="url"],input[type="tel"],input[type="password"],textarea,[contenteditable=""],[contenteditable="true"]'); }

  function enableBigCursor(){
    ensureOverlay();
    setOverlay('arrow');
    document.body.classList.add('big-cursor');
    document.body.classList.remove('big-cursor-active');
    enteredOnce = false;

    mmHandler = (e)=>{
      const t = e.target;
      if (!enteredOnce) { enteredOnce = true; document.body.classList.add('big-cursor-active'); }
      if (isTextInput(t)) { overlay.style.opacity = '0'; return; } else { overlay.style.opacity = '1'; }
      setOverlay(isInteractive(t) ? 'hand' : 'arrow');
      moveOverlay(e.clientX, e.clientY);
    };
    leaveHandler = ()=>{ if(overlay) overlay.style.opacity='0'; };
    document.addEventListener('mousemove', mmHandler);
    document.addEventListener('mouseleave', leaveHandler);
  }
  function disableBigCursor(){
    document.body.classList.remove('big-cursor','big-cursor-active');
    if (mmHandler) document.removeEventListener('mousemove', mmHandler);
    if (leaveHandler) document.removeEventListener('mouseleave', leaveHandler);
    mmHandler = leaveHandler = null;
    if (overlay) { overlay.remove(); overlay = null; }
  }

  cursorBtn.addEventListener('click', () => {
    const willEnable = !document.body.classList.contains('big-cursor');
    localStorage.setItem('bigCursor', willEnable ? '1' : '0');
    if (willEnable) enableBigCursor(); else disableBigCursor();
    updateCursorButton();
  });

  // ─────────────────────────────────────────────────────────────────────────────
  // 8) KONTROLKI ROZMIARU CZCIONKI – działają także dla px w CSS
  // ─────────────────────────────────────────────────────────────────────────────
  const FONT_STEP = 0.1; // 10%
  const FONT_MIN = 0.7;  // 70%
  const FONT_MAX = 2.0;  // 200%
  const TEXT_SELECTOR = 'h1,h2,h3,h4,h5,h6,p,span,li,dt,dd,blockquote,figcaption,small,strong,em,mark,code,pre,a,button,input,select,textarea,label,td,th,caption,legend';

  function clamp(n, min, max){ return Math.min(Math.max(n, min), max); }
  function getScale(){ const v = parseFloat(localStorage.getItem('a11yFontScale') || '1'); return isNaN(v) ? 1 : clamp(v, FONT_MIN, FONT_MAX); }
  function updateFontButtons(){
    const s = getScale();
    fontDecBtn.disabled = s <= FONT_MIN;
    fontIncBtn.disabled = s >= FONT_MAX;
    fontResetBtn.textContent = s === 1 ? 'A' : `A (${Math.round(s*100)}%)`;
  }
  function applyFontScale(scale){
    const nodes = document.querySelectorAll(TEXT_SELECTOR);
    nodes.forEach(el => {
      if (el.closest('#accessibility-panel, #accessibility-button')) return; // nie skaluj UI panelu
      if (el.hasAttribute('data-no-scale')) return; // wykluczenia opcjonalne
      let base = el.getAttribute('data-font-base');
      if (!base) {
        const comp = getComputedStyle(el).fontSize;
        const px = parseFloat(comp);
        if (!isNaN(px) && px > 0) {
          el.setAttribute('data-font-base', String(px));
          base = String(px);
        }
      }
      if (base) {
        const b = parseFloat(base);
        if (scale === 1) {
          el.style.removeProperty('font-size');
        } else {
          const newPx = Math.round(b * scale * 100) / 100;
          el.style.setProperty('font-size', newPx + 'px', 'important');
        }
      }
    });
  }
  function setScale(s){ s = clamp(s, FONT_MIN, FONT_MAX); localStorage.setItem('a11yFontScale', String(s)); applyFontScale(s); updateFontButtons(); }

  fontIncBtn.addEventListener('click', () => setScale(getScale() + FONT_STEP));
  fontDecBtn.addEventListener('click', () => setScale(getScale() - FONT_STEP));
  fontResetBtn.addEventListener('click', () => setScale(1));

  // ─────────────────────────────────────────────────────────────────────────────
  // 9) Przywracanie stanu
  // ─────────────────────────────────────────────────────────────────────────────
  if (localStorage.getItem('highContrast') === '1') document.body.classList.add('high-contrast');
  if (localStorage.getItem('blueFilter') === '1') {
    const s = document.createElement('eye-able-shader');
    s.id = 'eyeAble-Bluefilter'; s.setAttribute('aria-hidden','true');
    s.style.cssText = 'background:rgba(255,147,41,0.43);z-index:2147483646;margin:0;border-radius:0;padding:0;pointer-events:none;position:fixed;top:-10%;right:-10%;bottom:-10%;left:-10%;width:auto;height:auto;mix-blend-mode:multiply;display:block!important;';
    document.body.appendChild(s);
  }
  if (localStorage.getItem('grayscaleMode') === '1') document.documentElement.classList.add('grayscale');
  if (localStorage.getItem('hideImages') === '1') document.body.classList.add('hide-images');
  if (localStorage.getItem('bigCursor') === '1') { enableBigCursor(); }

  // Zastosuj i zainicjuj przyciski rozmiaru czcionki
  setScale(getScale());

  // ─────────────────────────────────────────────────────────────────────────────
  // 10) Inicjalizacja etykiet
  // ─────────────────────────────────────────────────────────────────────────────
  updateContrastButton();
  updateBlueFilterButton();
  updateGrayscaleButton();
  updateImagesButton();
  updateCursorButton();
  updateFontButtons();
});