/**
 * Theme Toggle — shared across all pages.
 * Reads/writes 'theme' key in localStorage.
 * Injects an animated moon/sun button into the page.
 */
(() => {
  'use strict';

  const STORAGE_KEY = 'theme';

  /* ---------- SVG icons ---------- */
  const moonSVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79z"/></svg>`;
  const sunSVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>`;

  /* ---------- Apply saved theme BEFORE paint ---------- */
  const saved = localStorage.getItem(STORAGE_KEY);
  if (saved) {
    document.documentElement.setAttribute('data-theme', saved);
  }

  /* ---------- Create button when DOM ready ---------- */
  function init() {
    const isDark = () => document.documentElement.getAttribute('data-theme') !== 'light';

    const btn = document.createElement('button');
    btn.className = 'theme-toggle';
    btn.setAttribute('aria-label', 'Переключить тему');
    btn.innerHTML = isDark() ? moonSVG : sunSVG;

    btn.addEventListener('click', () => {
      const goLight = isDark();
      document.documentElement.setAttribute('data-theme', goLight ? 'light' : 'dark');
      localStorage.setItem(STORAGE_KEY, goLight ? 'light' : 'dark');

      /* Swap icon immediately and trigger a gentle rotate via CSS */
      btn.innerHTML = goLight ? sunSVG : moonSVG;
      const svg = btn.querySelector('svg');
      svg.style.transition = 'none';
      svg.style.transform = 'rotate(-90deg) scale(0.5)';
      svg.style.opacity = '0';
      requestAnimationFrame(() => {
        svg.style.transition = 'transform 0.4s ease, opacity 0.3s ease';
        svg.style.transform = 'rotate(0deg) scale(1)';
        svg.style.opacity = '1';
      });
    });

    /* Where to place the button */
    const topbar = document.querySelector('.topbar');
    if (topbar) {
      /* Admin-style pages: insert into topbar (CSS handles flex layout) */
      topbar.appendChild(btn);
    } else {
      /* Login / placeholder pages: fixed position */
      btn.classList.add('theme-toggle--fixed');
      document.body.appendChild(btn);
    }
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();