/* Gardenas - site.js.php (patched, ES5 only)
 * - Mobile nav: close on link click / ESC / desktop resize, backdrop close, scroll lock
 * - Anchor jump: header-height offset (no CSS var dependency during scroll)
 * - Photo uploader: D&D + picker, 64px thumbs, × remove, ★ primary (keeps input.files for non-DataTransfer)
 * - Global D&D guard
 * - UI niceties: counters (files/MB), consent checkbox gates submit
 */
(function(){
  'use strict';

  /* -------------------------------
   * Utilities
   * ------------------------------- */
  function $(sel, root){ return (root||document).querySelector(sel); }
  function $all(sel, root){ return Array.prototype.slice.call((root||document).querySelectorAll(sel)); }
  function on(el, ev, fn, opts){ if(el){ el.addEventListener(ev, fn, opts||false); } }
  function hasClass(el, c){ return el && (' '+el.className+' ').indexOf(' '+c+' ') > -1; }
  function addClass(el, c){ if(el && !hasClass(el,c)){ el.className = (el.className ? el.className+' ' : '') + c; } }
  function remClass(el, c){ if(el && hasClass(el,c)){ el.className = (' '+el.className+' ').replace(' '+c+' ',' ').trim(); } }

  // Element.matches polyfill
  if(!Element.prototype.matches){
    Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector || function(s){
      var m = (this.document || this.ownerDocument).querySelectorAll(s), i = 0;
      while(m[i] && m[i] !== this){ i++; }
      return !!m[i];
    };
  }

  /* -------------------------------
   * Anchor offset + scrolling
   * ------------------------------- */
  function setAnchorOffset(){
    var header = $('header.site');
    var h = header ? header.getBoundingClientRect().height : 0;
    var offset = Math.round(h + 6);
    try{
      document.documentElement.style.setProperty('--anchor-offset', offset + 'px');
    }catch(_){}
  }
  window.setAnchorOffset = setAnchorOffset;

  function prefersReduced(){
    try{ return !!(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches); }
    catch(_){ return false; }
  }

  function scrollToWithOffset(targetEl){
    if(!targetEl){ return; }
    var header = $('header.site');
    var off = header ? Math.round(header.getBoundingClientRect().height + 6) : 0;
    var rect = targetEl.getBoundingClientRect();
    var y = (window.pageYOffset || document.documentElement.scrollTop) + rect.top - off;
    if(prefersReduced()){
      window.scrollTo(0, y);
    }else{
      try{ window.scrollTo({ top: y, behavior: 'smooth' }); }
      catch(_){ window.scrollTo(0, y); }
    }
  }

  /* -------------------------------
   * Mobile navigation
   * ------------------------------- */
  function syncMenuState(){
    var navc = $('#navc') || $('input.navc[type="checkbox"]');
    var label = $('#menuToggle') || $('.nav-toggle');
    var open = !!(navc && navc.checked);
    if(label){ try{ label.setAttribute('aria-expanded', open ? 'true' : 'false'); }catch(_){ } }
    var root = document.documentElement;
    if(open){ addClass(root, 'menu-open'); } else { remClass(root, 'menu-open'); }
    setTimeout(setAnchorOffset, 0);
  }

  function initMobileNav(){
    var navc = $('#navc') || $('input.navc[type="checkbox"]');
    var backdrop = $('label.backdrop');

    if(backdrop){
      on(backdrop, 'click', function(){
        if(navc){ navc.checked = false; syncMenuState(); }
      });
    }

    on(document, 'keydown', function(e){
      e = e || window.event;
      if((e.key && e.key.toLowerCase() === 'escape') || e.keyCode === 27){
        if(navc && navc.checked){ navc.checked = false; syncMenuState(); }
      }
    });

    on(window, 'resize', function(){
      setAnchorOffset();
      if(window.innerWidth >= 1024 && navc && navc.checked){ navc.checked = false; syncMenuState(); }
    });

    if(navc){ on(navc, 'change', syncMenuState); }

    syncMenuState();
  }

  /* -------------------------------
   * Anchor links
   * ------------------------------- */
  function initAnchorLinks(){
    var links = $all('a[href^=\"#\"]');
    var navc = $('#navc') || $('input.navc[type=\"checkbox\"]');

    function handleHash(href){
      if(!href || href === '#'){ return; }
      var id = href.charAt(0) === '#' ? href.slice(1) : href;
      var el = document.getElementById(id);
      if(!el){ try{ location.hash = href; }catch(_){ } return; }
      scrollToWithOffset(el);
      try{ history.pushState(null, '', '#' + id); }catch(_){ location.hash = '#' + id; }
    }

    for(var i=0;i<links.length;i++){
      (function(a){
        on(a, 'click', function(ev){
          var href = a.getAttribute('href') || '';
          if(!href || href.charAt(0) !== '#'){ return; }
          ev.preventDefault();

          // If same hash, just realign and bail
          if(location.hash === href){
            var el0 = document.getElementById(href.slice(1));
            if(el0){ scrollToWithOffset(el0); }
            return;
          }

          // Close menu if open and unlock scroll
          if(navc){ try{ navc.checked = false; }catch(_){ } }
          if(typeof syncMenuState === 'function'){ syncMenuState(); }
          else { try{ document.documentElement.classList.remove('menu-open'); }catch(_){ } }

          setTimeout(function(){
            setAnchorOffset();
            handleHash(href);
            // failsafe: ensure scroll unlock even on slow devices
            setTimeout(function(){
              if(document.documentElement.className.indexOf('menu-open') !== -1){
                document.documentElement.classList.remove('menu-open');
              }
            }, 200);
          }, 30);
        });
      })(links[i]);
    }

    if(location.hash){
      setTimeout(function(){
        setAnchorOffset();
        var el = document.getElementById(location.hash.slice(1));
        if(el){ scrollToWithOffset(el); }
      }, 120);
    }

    window.addEventListener('hashchange', function(){
      setTimeout(function(){
        var id = (location.hash || '').slice(1);
        var el = id && document.getElementById(id);
        if(el){ scrollToWithOffset(el); }
      }, 30);
    }, false);
  }

  /* -------------------------------
   * Global D&D guard
   * ------------------------------- */
  function initGlobalDnDGuard(){
    function guard(e){
      var t = e.target, ok = false;
      while(t){
        if(t.id === 'photo' || t.id === 'photo-drop' || (t.className && t.className.indexOf('dropzone') !== -1)){
          ok = true; break;
        }
        t = t.parentNode;
      }
      if(!ok){
        e.preventDefault();
        e.stopPropagation();
      }
    }
    on(window, 'dragover', guard);
    on(window, 'drop', guard);
  }

  /* -------------------------------
   * Photo uploader (preview/remove/star) + counters
   * ------------------------------- */
  
function initPhotoUploader(){
    var dz   = $('#photo-drop') || $('.dropzone'); // allow mock id/class
    var inp  = $('#p_photos');
    var grid = $('#photo-preview') || $('.thumb-grid');
    var starHidden = $('#primary_index');
    var metaRow = $('.meta-row');
    var submitBtn = $('#photo button[type="submit"]') || $('#photo .btn') || $('.footer .btn');
    var agree = $('#agree');

    if(!inp || !grid){ return; }

    var maxFiles = parseInt((inp.getAttribute('data-max-files') || '5'), 10) || 5;
    var maxMB = parseInt((inp.getAttribute('data-max-size-mb') || '10'), 10) || 10;

    var supportsDT = (function(){
      try { return !!(window.DataTransfer && new DataTransfer()); } catch(_){ return false; }
    })();

    function fileKey(f){
      // key for tracking the same file across reorders
      var lm = (typeof f.lastModified === 'number') ? f.lastModified : 0;
      return [f.name||'', f.size||0, f.type||'', lm].join('|');
    }

    function updateCounters(){
      if(!metaRow){ return; }
      var files = inp.files || [];
      var i, totalBytes = 0;
      for(i=0;i<files.length;i++){ totalBytes += files[i].size || 0; }
      var mb = totalBytes / (1024*1024);
      var pill = metaRow.querySelector('.pill');
      if(pill){
        pill.textContent = '現在：' + files.length + '/' + maxFiles + ' 枚・' + (mb.toFixed(1)) + '/' + (maxFiles*maxMB) + 'MB';
      }
    }

    function syncSubmitEnabled(){
      // Enable when consent checked; do not block by file count here (server validates 0枚)
      var ok = true;
      if(agree){ ok = !!agree.checked; }
      if(submitBtn){ submitBtn.disabled = !ok; }
    }

    function addClass(el, c){ if(el && el.classList){ el.classList.add(c); } }
    function remClass(el, c){ if(el && el.classList){ el.classList.remove(c); } }

    function rebuildPreview(){
      grid.innerHTML = '';
      var files = inp.files;
      if(!files || !files.length){ updateCounters(); syncSubmitEnabled(); return; }

      var starIndex = 0;
      if(starHidden && starHidden.value !== ''){
        var v = parseInt(starHidden.value, 10);
        if(!isNaN(v) && v >= 0 && v < files.length){ starIndex = v; }
      }

      // build thumbs
      for(var i=0;i<files.length;i++){
        (function(idx){
          var f = files[idx];
          var item = document.createElement('div');
          item.className = 'thumb';
          item.setAttribute('data-index', String(idx));
          item.setAttribute('data-key', fileKey(f));
          if(idx === starIndex){ addClass(item, 'is-primary'); }

          var img = document.createElement('img');
          img.alt = '';
          var fr = new FileReader();
          on(fr, 'load', function(ev){ img.src = ev.target.result; });
          try{ fr.readAsDataURL(f); }catch(_){}

          var btnX = document.createElement('button');
          btnX.type = 'button';
          btnX.className = 'btn-x';
          btnX.textContent = '×';
          btnX.setAttribute('aria-label','remove');

          var btnStar = document.createElement('button');
          btnStar.type = 'button';
          btnStar.className = 'btn-star';
          btnStar.textContent = '★';
          btnStar.setAttribute('aria-label','primary');

          on(btnX, 'click', function(){
            if(supportsDT){
              var dt = new DataTransfer();
              var fs = inp.files;
              var j;
              for(j=0;j<fs.length;j++){ if(j !== idx){ dt.items.add(fs[j]); } }
              // adjust star to keep the same file if possible
              var currentStar = parseInt(starHidden && starHidden.value ? starHidden.value : '0', 10) || 0;
              inp.files = dt.files;
              if(starHidden){
                if(currentStar === idx){ starHidden.value = 0; }
                else if(currentStar > idx){ starHidden.value = Math.max(0, currentStar - 1); }
              }
              rebuildPreview();
            }else{
              if(item && item.parentNode){ item.parentNode.removeChild(item); }
            }
          });

          on(btnStar, 'click', function(){
            var all = $all('.thumb', grid);
            for(var k=0;k<all.length;k++){ remClass(all[k], 'is-primary'); }
            addClass(item, 'is-primary');
            if(starHidden){ starHidden.value = idx; }
          });

          // --- Drag & drop reorder (supportsDT only) ---
          if(supportsDT){
            item.setAttribute('draggable', 'true');
            on(item, 'dragstart', function(e){
              addClass(item, 'dragging');
              try{
                e.dataTransfer.effectAllowed = 'move';
                e.dataTransfer.setData('text/plain', String(idx));
              }catch(_){}
            });
            on(item, 'dragend', function(){ remClass(item, 'dragging'); });

            on(item, 'dragover', function(e){
              e.preventDefault();
              addClass(item, 'is-dragover');
            });
            on(item, 'dragleave', function(e){
              if(e.target === item){ remClass(item, 'is-dragover'); }
            });
            on(item, 'drop', function(e){
              e.preventDefault();
              remClass(item, 'is-dragover');
              var fromStr;
              try{ fromStr = e.dataTransfer.getData('text/plain'); }catch(_){ fromStr = null; }
              var from = parseInt(fromStr, 10);
              if(isNaN(from)){ return; }
              var to = idx;
              if(from === to){ return; }

              var fs = inp.files;
              var before = [];
              for(var j=0;j<fs.length;j++){ before.push(fs[j]); }
              var beforeKeys = before.map(fileKey);
              var starKey = null;
              if(starHidden){
                var sIdx = parseInt(starHidden.value || '0', 10) || 0;
                if(before[sIdx]){ starKey = fileKey(before[sIdx]); }
              }
              // reorder
              var moved = before.splice(from, 1)[0];
              before.splice(to, 0, moved);
              // reflect to input
              var dt = new DataTransfer();
              for(var k=0;k<before.length;k++){ dt.items.add(before[k]); }
              inp.files = dt.files;

              // keep same primary file
              if(starHidden && starKey){
                var newIdx = -1;
                var cur = inp.files;
                for(var u=0;u<cur.length;u++){
                  if(fileKey(cur[u]) === starKey){ newIdx = u; break; }
                }
                starHidden.value = (newIdx >= 0) ? newIdx : 0;
              }
              rebuildPreview();
            });
          }

          item.appendChild(img);
          item.appendChild(btnX);
          item.appendChild(btnStar);
          grid.appendChild(item);
        })(i);
      }
      updateCounters();
      syncSubmitEnabled();
    }

    on(inp, 'change', function(){
      rebuildPreview();
    });

    if(dz){
      on(dz, 'dragenter', function(e){ e.preventDefault(); addClass(dz, 'is-dragover'); });
      on(dz, 'dragover', function(e){ e.preventDefault(); addClass(dz, 'is-dragover'); });
      on(dz, 'dragleave', function(e){
        if(e.target === dz){ remClass(dz, 'is-dragover'); }
      });
      on(dz, 'drop', function(e){
        e.preventDefault();
        remClass(dz, 'is-dragover');
        if(e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files.length){
          if(supportsDT){
            var dt = new DataTransfer();
            var existing = inp.files, i;
            if(existing){ for(i=0;i<existing.length;i++){ dt.items.add(existing[i]); } }
            for(i=0;i<e.dataTransfer.files.length;i++){ dt.items.add(e.dataTransfer.files[i]); }
            inp.files = dt.files;
          }
          rebuildPreview();
        }
      });
    }

    // initial
    rebuildPreview();
  }


  /* -------------------------------
   * Boot
   * ------------------------------- */
  on(document, 'DOMContentLoaded', function(){
    setAnchorOffset();
    initMobileNav();
    initGlobalDnDGuard();
    initPhotoUploader();
    initAnchorLinks();
  });
  on(window, 'load', setAnchorOffset);
  on(window, 'resize', setAnchorOffset);
})();