// WECO Naturstein – Reklamationsformular, Frontend-Script
// Gehört in die Mediathek (Datei-Endung .txt oder .csv), Einbindung per <script src="…?v=N">
// Gegenstelle: POST /wp-json/weco/v1/reklamation (Snippet weco-reklamation-endpoint.php)

(function () {
  'use strict';

  // ------------------------------------------------ Konstanten
  var ENDPOINT   = '/wp-json/weco/v1/reklamation';
  var MAX_FILES  = 6;          // maximale Bildanzahl
  var MAX_EDGE   = 1600;       // längste Kante nach dem Verkleinern (px)
  var QUALITAET  = 0.8;        // JPEG-Qualität
  var MAX_BYTES  = 5242880;    // 5 MB je Bild nach dem Verkleinern
  var MIN_DAUER  = 5;          // Sekunden, die das Formular mindestens offen war (Spamschutz)

  var form = document.getElementById('wcr-form');
  if (!form) return;

  var previews  = document.getElementById('wcr-previews');
  var statusEl  = document.getElementById('wcr-status');
  var submitBtn = document.getElementById('wcr-submit');
  var drop      = document.getElementById('wcr-drop');
  var bilder    = [];
  var geladenAm = Date.now();

  // ------------------------------------------------ Auswahl der Bilder
  document.getElementById('wcr-btn-cam').addEventListener('click', function () {
    document.getElementById('wcr-input-cam').click();
  });
  document.getElementById('wcr-btn-file').addEventListener('click', function () {
    document.getElementById('wcr-input-file').click();
  });
  ['wcr-input-cam', 'wcr-input-file'].forEach(function (id) {
    document.getElementById(id).addEventListener('change', function (e) {
      addFiles(e.target.files);
      e.target.value = '';
    });
  });

  ['dragenter', 'dragover'].forEach(function (ev) {
    drop.addEventListener(ev, function (e) { e.preventDefault(); drop.classList.add('is-over'); });
  });
  ['dragleave', 'drop'].forEach(function (ev) {
    drop.addEventListener(ev, function (e) { e.preventDefault(); drop.classList.remove('is-over'); });
  });
  drop.addEventListener('drop', function (e) {
    if (e.dataTransfer && e.dataTransfer.files) addFiles(e.dataTransfer.files);
  });

  function addFiles(liste) {
    var arr = Array.prototype.slice.call(liste);
    var frei = MAX_FILES - bilder.length;
    if (arr.length > frei) {
      setStatus('Es sind maximal ' + MAX_FILES + ' Bilder möglich. Die übrigen wurden nicht übernommen.', true);
      arr = arr.slice(0, Math.max(0, frei));
    }
    arr.forEach(function (f) {
      if (f.type.indexOf('image/') !== 0) {
        setStatus('„' + f.name + '“ ist kein Bild und wurde übersprungen.', true);
        return;
      }
      verkleinern(f).then(function (out) {
        if (out.size > MAX_BYTES) {
          setStatus('„' + f.name + '“ ist auch nach dem Verkleinern zu groß (max. 5 MB).', true);
          return;
        }
        bilder.push(out);
        renderPreviews();
        hideError('wcr-bilder');
      }).catch(function () {
        setStatus('„' + f.name + '“ konnte nicht gelesen werden. Bitte als JPG oder PNG hochladen.', true);
      });
    });
  }

  // Verkleinert per Canvas auf MAX_EDGE und wandelt in JPEG um.
  // Kleine Dateien (< 1,5 MB) bleiben unverändert.
  function verkleinern(datei) {
    return new Promise(function (resolve, reject) {
      var url = URL.createObjectURL(datei);
      var img = new Image();
      img.onload = function () {
        var w = img.naturalWidth, h = img.naturalHeight;
        var faktor = Math.min(1, MAX_EDGE / Math.max(w, h));
        if (faktor === 1 && datei.size <= 1572864) {
          URL.revokeObjectURL(url);
          return resolve(datei);
        }
        var c = document.createElement('canvas');
        c.width  = Math.round(w * faktor);
        c.height = Math.round(h * faktor);
        c.getContext('2d').drawImage(img, 0, 0, c.width, c.height);
        c.toBlob(function (blob) {
          URL.revokeObjectURL(url);
          if (!blob) return reject();
          var name = datei.name.replace(/\.[^.]+$/, '') + '.jpg';
          resolve(new File([blob], name, { type: 'image/jpeg' }));
        }, 'image/jpeg', QUALITAET);
      };
      img.onerror = function () { URL.revokeObjectURL(url); reject(); };
      img.src = url;
    });
  }

  function renderPreviews() {
    previews.innerHTML = '';
    bilder.forEach(function (f, i) {
      var fig = document.createElement('figure');
      fig.className = 'wcr__thumb';
      var img = document.createElement('img');
      img.src = URL.createObjectURL(f);
      img.alt = '';
      img.onload = function () { URL.revokeObjectURL(img.src); };
      var cap = document.createElement('figcaption');
      cap.textContent = Math.round(f.size / 1024) + ' KB';
      var btn = document.createElement('button');
      btn.type = 'button';
      btn.innerHTML = '&times;';
      btn.setAttribute('aria-label', 'Bild entfernen');
      btn.addEventListener('click', function () { bilder.splice(i, 1); renderPreviews(); });
      fig.appendChild(img); fig.appendChild(cap); fig.appendChild(btn);
      previews.appendChild(fig);
    });
  }

  // ------------------------------------------------ Meldungen
  function showError(id) {
    var el = form.querySelector('.wcr__err[data-for="' + id + '"]');
    if (el) el.classList.add('is-visible');
    var input = document.getElementById(id);
    if (input) input.setAttribute('aria-invalid', 'true');
  }
  function hideError(id) {
    var el = form.querySelector('.wcr__err[data-for="' + id + '"]');
    if (el) el.classList.remove('is-visible');
    var input = document.getElementById(id);
    if (input) input.removeAttribute('aria-invalid');
  }
  function setStatus(text, fehler) {
    statusEl.textContent = text || '';
    statusEl.className = 'wcr__status' + (fehler ? ' wcr__status--error' : '');
  }

  form.addEventListener('input', function (e) { if (e.target.id) hideError(e.target.id); });
  form.addEventListener('change', function (e) { if (e.target.id) hideError(e.target.id); });

  function pruefen() {
    var ok = true, erstes = null;
    Array.prototype.forEach.call(form.querySelectorAll('[required]'), function (el) {
      var gueltig = el.type === 'checkbox' ? el.checked : (el.checkValidity() && el.value.trim() !== '');
      if (!gueltig) {
        showError(el.id); ok = false;
        if (!erstes) erstes = el;
      } else {
        hideError(el.id);
      }
    });
    if (bilder.length === 0) {
      showError('wcr-bilder'); ok = false;
      if (!erstes) erstes = drop;
    }
    if (erstes) erstes.scrollIntoView({ block: 'center' });
    return ok;
  }

  // ------------------------------------------------ Absenden
  form.addEventListener('submit', function (e) {
    e.preventDefault();
    setStatus('');
    if (!pruefen()) {
      setStatus('Bitte prüfen Sie die markierten Felder.', true);
      return;
    }
    var dauer = Math.round((Date.now() - geladenAm) / 1000);
    if (dauer < MIN_DAUER) {
      setStatus('Bitte prüfen Sie Ihre Angaben und senden Sie in einem Moment erneut.', true);
      return;
    }

    var fd = new FormData();
    Array.prototype.forEach.call(form.querySelectorAll('input, select, textarea'), function (el) {
      if (el.type === 'file' || !el.name) return;
      if (el.type === 'checkbox') fd.append(el.name, el.checked ? '1' : '0');
      else fd.append(el.name, el.value);
    });
    fd.append('ladezeit', String(dauer));
    bilder.forEach(function (f) { fd.append('bilder[]', f, f.name); });

    submitBtn.disabled = true;
    setStatus('Reklamation wird übertragen …');

    fetch(ENDPOINT, { method: 'POST', body: fd })
      .then(function (r) { return r.json().then(function (j) { return { ok: r.ok, body: j }; }); })
      .then(function (res) {
        if (!res.ok || !res.body || !res.body.vorgangsnummer) {
          throw new Error((res.body && res.body.message) || 'Unbekannter Fehler.');
        }
        document.getElementById('wcr-vorgangsnr').textContent = res.body.vorgangsnummer;
        // Klasse blendet Headline, Intro, Hinweisbox und Formular aus (siehe CSS-Snippet)
        document.getElementById('wcr').classList.add('wcr--gesendet');
        document.getElementById('wcr').scrollIntoView({ block: 'start' });
      })
      .catch(function (err) {
        submitBtn.disabled = false;
        setStatus('Die Reklamation konnte nicht übertragen werden: ' + err.message +
                  ' Bitte versuchen Sie es erneut oder schreiben Sie an info@weco-naturstein.de.', true);
      });
  });
})();