const baseDomain = 'https://shop.maxmo.de';

function rewriteLinks(root = document) {
  root.querySelectorAll(`a[href^="${baseDomain}"]`).forEach(link => {
    const url = new URL(link.href);
    link.href = url.pathname + url.search + url.hash;
  });
}

// Initiale Umschreibung
rewriteLinks();

// MutationObserver einrichten
const observer = new MutationObserver(mutations => {
  for (const mutation of mutations) {
    mutation.addedNodes.forEach(node => {
      if (node.nodeType === Node.ELEMENT_NODE) {
        // Neue Links im hinzugefügten Knoten umschreiben
        rewriteLinks(node);
      }
    });
  }
});

// Beobachtung starten
observer.observe(document.body, {
  childList: true,
  subtree: true
});

let lastOpenedType = null;
let isAnimating = false;

function animateOpen(ausklappBox) {
  ausklappBox.style.maxHeight = '0px';
  ausklappBox.classList.add('open');
  ausklappBox.style.opacity = '1';
  // Höhe messen
  const scrollHeight = ausklappBox.scrollHeight;
  // Im nächsten Frame auf die echte Höhe animieren
  requestAnimationFrame(() => {
    ausklappBox.style.maxHeight = scrollHeight + 'px';
  });
}

function animateClose(ausklappBox, callback) {
  // Höhe auf aktuellen Wert setzen, dann auf 0 animieren
  ausklappBox.style.maxHeight = ausklappBox.scrollHeight + 'px';
  requestAnimationFrame(() => {
    ausklappBox.style.maxHeight = '0px';
    ausklappBox.style.opacity = '0';
  });
  ausklappBox.addEventListener('transitionend', function handler(e) {
    if (e.propertyName === 'max-height') {
      ausklappBox.classList.remove('open');
      ausklappBox.removeEventListener('transitionend', handler);
      if (callback) callback();
    }
  });
}

function getBoxHtml(type) {
  if (type === 'ausdruck') {
    return `
      <div class="ausklapp-box">
        <h2 style="text-align:center;">E-Rezept Ausdruck hochladen</h2>
        <div class="dropzone" id="datamatrixreader_ausdruck">
          <p>Datei auswählen oder hier ablegen (PDF, JPG, PNG)</p>
        </div>
      </div>
    `;
  } else if (type === 'klassisch') {
    return `
      <div class="ausklapp-box">
        <h2 style="text-align:center;">Klassisches Rezept hochladen</h2>
        <div class="dropzone" id="datamatrixreader_klassisch">
          <p>Foto oder Scan des Rezepts hochladen (PDF, JPG, PNG)</p>
        </div>
      </div>
    `;
  } else if (type === 'egk') {
    return `
      <div class="ausklapp-box">
        <div class="maxmo-eRezept-wrapper">
          <div class="maxmo-eRezept-text">
            <h2 style="text-align:center;">E-Rezept mit Ihrer Gesundheitskarte einlösen</h2>
            <p>
              Einfach, sicher und schnell: Nutzen Sie Ihre elektronische Gesundheitskarte <br>
              und lösen Sie Ihr E-Rezept direkt über unsere App ein.
            </p>
          </div>
          <div class="maxmo-eRezept-buttons">
            <a href="https://apps.apple.com/de/app/meinmaxmo/id1472502033" target="_blank">
              <img src="https://brry-managed-maxmo-prd.s3.eu-central-1.amazonaws.com/media/48/c0/a8/1745519301/appstore_logo.webp"
                   alt="Download im App Store">
            </a>
            <a href="https://play.google.com/store/apps/details?id=com.mauveshopapp&hl=de" target="_blank">
              <img src="https://brry-managed-maxmo-prd.s3.eu-central-1.amazonaws.com/media/25/9d/fa/1745519301/google-playstore_logo.webp"
                   alt="Download im Google Play Store">
            </a>
          </div>
        </div>
      </div>
    `;
  }
  return '';
}

document.querySelectorAll('.rezeptbox').forEach(box => {
  box.addEventListener('click', function() {
    if (isAnimating) return;

    const type = this.dataset.type;
    const container = document.getElementById('container-ausdruck');
    const currentBox = container.querySelector('.ausklapp-box');

    // Funktion zum neuen Inhalt einblenden
    function showNewBox(newBoxHtml) {
      container.innerHTML = newBoxHtml;
      container.style.display = 'block';
      setTimeout(() => {
        const ausklappBox = container.querySelector('.ausklapp-box');
        if (ausklappBox) {
          animateOpen(ausklappBox);
        }
        // Sanft scrollen, sodass der Container mittig im Viewport ist
        setTimeout(() => {
          const rect = container.getBoundingClientRect();
          const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
          const containerMiddle = rect.top + scrollTop - (window.innerHeight / 2) + (rect.height / 2);
          window.scrollTo({
            top: containerMiddle,
            behavior: 'smooth'
          });
        }, 200);
        isAnimating = false;
        lastOpenedType = type;
      }, 20); // kurz warten, damit die Transition greift
    }

    // Wenn dieselbe Box erneut geklickt wird: sanft schließen
    if (container.style.display === 'block' && lastOpenedType === type) {
      if (currentBox) {
        isAnimating = true;
        animateClose(currentBox, () => {
          container.style.display = 'none';
          container.innerHTML = '';
          lastOpenedType = null;
          isAnimating = false;
        });
      } else {
        container.style.display = 'none';
        container.innerHTML = '';
        lastOpenedType = null;
      }
      return;
    }

    // Wenn eine andere Box geöffnet ist: erst sanft schließen, dann neue öffnen
    if (container.style.display === 'block' && lastOpenedType !== type) {
      if (currentBox) {
        isAnimating = true;
        animateClose(currentBox, () => {
          showNewBox(getBoxHtml(type));
        });
      } else {
        showNewBox(getBoxHtml(type));
      }
      return;
    }

    // Wenn noch keine Box offen ist: einfach öffnen
    showNewBox(getBoxHtml(type));
  });
});
(() => {
  const root = document.getElementById('ml-locations');
  if (!root) return;

  // Links mit ersetzten Umlauten (ae/oe/ue/ss, Leerzeichen -> -)
  const locations = [
    { name:"MAXMO Apotheke Erkelenz Karolingerring",         city:"Erkelenz",         url:"/MAXMO-Apotheke-Erkelenz-Karolingerring" },
    { name:"MAXMO Apotheke im Kaufland Arnsberg",           city:"Arnsberg",         url:"/MAXMO-Apotheke-im-Kaufland-Arnsberg" },
    { name:"MAXMO Apotheke StadtCenter Düren",              city:"Düren",            url:"/MAXMO-Apotheke-StadtCenter-Dueren" },
    { name:"MAXMO Apotheke Kaufland Düren",                 city:"Düren",            url:"/MAXMO-Apotheke-Kaufland-Dueren" },
    { name:"MAXMO Apotheke Düsseldorf-Benrath",             city:"Düsseldorf",       url:"/MAXMO-Apotheke-Duesseldorf-Benrath" },
    { name:"MAXMO Apotheke Bergkamen",                      city:"Bergkamen",        url:"/MAXMO-Apotheke-Bergkamen" },
    { name:"MAXMO Apotheke Jüchen-Gierath",                 city:"Jüchen",           url:"/MAXMO-Apotheke-Juechen-Gierath" },
    { name:"MAXMO Apotheke im Kaufland Grevenbroich",       city:"Grevenbroich",     url:"/MAXMO-Apotheke-im-Kaufland-Grevenbroich" },
    { name:"MAXMO Apotheke im Kaufland Hückelhoven",        city:"Hückelhoven",      url:"/MAXMO-Apotheke-im-Kaufland-Hueckelhoven" },
    { name:"MAXMO Apotheke am Maubishof",                   city:"Kaarst",           url:"/MAXMO-Apotheke-am-Maubishof-Kaarst" },
    { name:"MAXMO Apotheke Gremberg",                       city:"Köln",             url:"/MAXMO-Apotheke-Gremberg" },
    { name:"MAXMO Apotheke E‑Center Am Röttgen",            city:"Mönchengladbach",  url:"/MAXMO-Apotheke-im-E-Center-Am-Roettgen" },
    { name:"MAXMO Apotheke Marienplatz Rheydt",             city:"Mönchengladbach",  url:"/MAXMO-Apotheke-Marienplatz-Rheydt" },
    { name:"MAXMO Apotheke Hindenburgstraße",               city:"Mönchengladbach",  url:"/MAXMO-Apotheke-Hindenburgstrasse" },
    { name:"MAXMO Apotheke Krefelder Straße",               city:"Krefeld",          url:"/MAXMO-Apotheke-Krefelder-Strasse" },
    { name:"MAXMO Apotheke medicentrum Dahlener Straße",    city:"Mönchengladbach",  url:"/MAXMO-Apotheke-medicentrum-Dahlener-Strasse" },
    { name:"MAXMO Apotheke Viersener Straße",               city:"Mönchengladbach",  url:"/MAXMO-Apotheke-Viersener-Strasse" },
    { name:"MAXMO Apotheke Moses‑Stern‑Straße",             city:"Mönchengladbach",  url:"/MAXMO-Apotheke-Moses-Stern-Strasse" },
    { name:"MAXMO Apotheke Eschweiler",                     city:"Eschweiler",       url:"/MAXMO-Apotheke-Eschweiler" },
    { name:"MAXMO Apotheke Übach‑Palenberg",                city:"Übach‑Palenberg",  url:"/MAXMO-Apotheke-Uebach-Palenberg" },
    { name:"MAXMO Apotheke St. Helena",                     city:"Mönchengladbach",  url:"/MAXMO-Apotheke-St-Helena" },
    { name:"MAXMO Apotheke Würselen",                       city:"Würselen",         url:"/MAXMO-Apotheke-Wuerselen" }
  ];

  const searchInput      = root.querySelector('.ml-search');
  const filtersContainer = root.querySelector('#ml-filters');
  const gridContainer    = root.querySelector('#ml-grid');

  const collator = new Intl.Collator('de', { sensitivity:'base' });
  const cities = [...new Set(locations.map(l => l.city))].sort(collator.compare);

  cities.forEach(city => {
    const b = document.createElement('button');
    b.className = 'ml-filter';
    b.textContent = city;
    b.dataset.city = city;
    filtersContainer.appendChild(b);
  });

  const filterToggle   = root.querySelector('#ml-filter-toggle');
  const filterDropdown = root.querySelector('#ml-filter-dropdown');

  filterToggle.addEventListener('click', () => {
    filterDropdown.classList.toggle('is-open');
    const icon = filterToggle.querySelector('.ml-filter-icon');
    icon.style.transform = filterDropdown.classList.contains('is-open') ? 'rotate(180deg)' : 'rotate(0deg)';
  });

  document.addEventListener('click', (e) => {
    if (!e.target.closest('#ml-locations .ml-filter-wrapper')) {
      filterDropdown.classList.remove('is-open');
      const icon = filterToggle.querySelector('.ml-filter-icon');
      icon.style.transform = 'rotate(0deg)';
    }
  });

  let currentFilter = 'all';
  let currentSearch = '';

  filtersContainer.addEventListener('click', (e) => {
    if (e.target.classList.contains('ml-filter')) {
      filtersContainer.querySelectorAll('.ml-filter').forEach(f => f.classList.remove('is-active'));
      e.target.classList.add('is-active');
      currentFilter = e.target.dataset.city;
      filterDropdown.classList.remove('is-open');
      const icon = filterToggle.querySelector('.ml-filter-icon');
      icon.style.transform = 'rotate(0deg)';
      render();
    }
  });

  searchInput.addEventListener('input', (e) => {
    currentSearch = e.target.value.toLowerCase();
    render();
  });

  function render() {
    const filtered = locations
      .filter(loc => {
        const byCity  = currentFilter === 'all' || loc.city === currentFilter;
        const byQuery = !currentSearch
          || loc.name.toLowerCase().includes(currentSearch)
          || loc.city.toLowerCase().includes(currentSearch);
        return byCity && byQuery;
      })
      .sort((a,b) => collator.compare(a.city, b.city));

    if (filtered.length === 0) {
      gridContainer.innerHTML = '<div class="no-results">Keine Standorte gefunden</div>';
      return;
    }

    gridContainer.innerHTML = filtered.map(loc => `
      <a href="${loc.url}" class="ml-card">
        <div class="ml-card-title">${loc.name}</div>
        <div class="ml-card-city">${loc.city}</div>
      </a>
    `).join('');
  }

  render();
})();