// ==UserScript==
// @name         Amazon公式セラー絞り込みトグル 🔄（p_6:AN1VRQENFRJN5対応）
// @namespace    https://github.com/koyasi777/amazon-seller-filter-toggle
// @version      14.1
// @description  Amazon検索結果に「Amazon公式セラー（p_6:AN1VRQENFRJN5）」の絞り込みトグルを追加！SPA対応・レイアウト崩れ対策・高速安定版。
// @author       koyasi777
// @match        https://www.amazon.co.jp/s*
// @grant        none
// @license      MIT
// @homepageURL  https://github.com/koyasi777/amazon-seller-filter-toggle
// @supportURL   https://github.com/koyasi777/amazon-seller-filter-toggle/issues
// @downloadURL none
// ==/UserScript==

(() => {
  'use strict';

  const CONST = {
    P6_KEY: 'p_6:AN1VRQENFRJN5',
    STORAGE_KEY: 'p6_filter_enabled',
    WRAPPER_ID: 'p6-switch-wrapper',
    STYLE_ID: 'p6-style',
    TEMPLATE_ID: 'p6-template'
  };

  const log = (...args) => console.debug('[p6-toggle]', ...args);
  const State = {
    get: () => localStorage.getItem(CONST.STORAGE_KEY) === 'true',
    set: (val) => localStorage.setItem(CONST.STORAGE_KEY, val ? 'true' : 'false'),
  };

  const isP6InURL = () => new URLSearchParams(location.search).get('rh')?.includes(CONST.P6_KEY);
  const getKeyword = () => document.querySelector('input[name="field-keywords"]')?.value.trim() || '';

  const navigateToSearch = (keyword, includeP6) => {
    const params = new URLSearchParams(location.search);
    params.delete('rh');
    if (includeP6) params.set('rh', CONST.P6_KEY);
    if (keyword) params.set('k', keyword);
    params.set('timestamp', Date.now());
    const newURL = `/s?${params.toString()}`;
    if (location.pathname + location.search !== newURL) location.assign(newURL);
  };

  const insertStyle = () => {
    if (document.getElementById(CONST.STYLE_ID)) return;
    const style = document.createElement('style');
    style.id = CONST.STYLE_ID;
    style.textContent = `
      #${CONST.WRAPPER_ID} {
        display: flex;
        align-items: center;
        margin-left: 10px;
        gap: 8px;
        font-size: 13px;
        user-select: none;
        color: white;
        z-index: 9999;
      }
      .p6-label { font-weight: bold; }
      .p6-switch {
        position: relative;
        display: inline-block;
        width: 36px;
        height: 20px;
      }
      .p6-switch input {
        opacity: 0;
        width: 0;
        height: 0;
      }
      .p6-slider {
        position: absolute;
        cursor: pointer;
        top: 0; left: 0; right: 0; bottom: 0;
        background-color: #666;
        transition: .3s;
        border-radius: 34px;
      }
      .p6-circle {
        position: absolute;
        height: 14px;
        width: 14px;
        left: 4px;
        bottom: 3px;
        background-color: white;
        transition: .3s;
        border-radius: 50%;
      }
      input:checked + .p6-slider { background-color: #4CAF50; }
      input:checked + .p6-slider .p6-circle { left: 18px; }
    `;
    document.head.appendChild(style);
  };

  const insertTemplate = () => {
    if (document.getElementById(CONST.TEMPLATE_ID)) return;
    const tpl = document.createElement('template');
    tpl.id = CONST.TEMPLATE_ID;
    tpl.innerHTML = `
      <div id="${CONST.WRAPPER_ID}">
        <label class="p6-switch">
          <input type="checkbox">
          <span class="p6-slider"><span class="p6-circle"></span></span>
        </label>
        <span class="p6-label"></span>
      </div>
    `;
    document.body.appendChild(tpl);
  };

  const createToggleUI = (enabled) => {
    const wrapper = document.getElementById(CONST.TEMPLATE_ID).content.firstElementChild.cloneNode(true);
    const checkbox = wrapper.querySelector('input');
    const label = wrapper.querySelector('.p6-label');

    const updateLabel = (on) => {
      label.textContent = `セラー絞り込み: ${on ? '有効中' : '無効'}`;
      label.style.color = on ? '#90ee90' : '#eee';
    };

    checkbox.checked = enabled;
    updateLabel(enabled);
    checkbox.addEventListener('change', () => {
      const newState = checkbox.checked;
      State.set(newState);
      updateLabel(newState);
      navigateToSearch(getKeyword(), newState);
    });

    return wrapper;
  };

  const mount = () => {
    try {
      const form = document.querySelector('#nav-search-bar-form');
      const target = form?.querySelector('.nav-search-submit');
      if (!form || !target || document.getElementById(CONST.WRAPPER_ID)) return;

      insertStyle();
      insertTemplate();

      const stateInURL = isP6InURL();
      if (State.get() !== stateInURL) State.set(stateInURL);

      const toggle = createToggleUI(stateInURL);
      target.parentNode.insertBefore(toggle, target.nextSibling);

      const input = form.querySelector('input[name="field-keywords"]');
      const submit = form.querySelector('.nav-search-submit input[type="submit"]');

      const trigger = () => navigateToSearch(input.value.trim(), State.get());
      form.addEventListener('submit', (e) => (e.preventDefault(), trigger()));
      submit.addEventListener('click', (e) => (e.preventDefault(), trigger()));
      input.addEventListener('keydown', (e) => e.key === 'Enter' && (e.preventDefault(), trigger()));
    } catch (e) {
      log('mount failed:', e);
    }
  };

  const observeSuggestions = () => {
    const hooked = new WeakSet();
    const observer = new MutationObserver(() => {
      document.querySelectorAll('.s-suggestion[role="button"]').forEach((el) => {
        if (hooked.has(el)) return;
        hooked.add(el);
        el.addEventListener('click', (e) => {
          e.preventDefault();
          e.stopPropagation();
          const keyword = el.getAttribute('aria-label') || el.textContent.trim();
          if (keyword) navigateToSearch(keyword, State.get());
        }, { once: true });
      });
    });
    observer.observe(document.body, { childList: true, subtree: true });
  };

  const hookSPARouting = () => {
    const origPushState = history.pushState;
    history.pushState = function (...args) {
      const r = origPushState.apply(this, args);
      queueMicrotask(() => mount());
      return r;
    };
    window.addEventListener('popstate', () => queueMicrotask(() => mount()));
  };

  const disableNavActive = () => {
    const form = document.querySelector('#nav-search-bar-form');
    if (!form) return;
    const observer = new MutationObserver(() => {
      if (form.classList.contains('nav-active')) {
        form.classList.remove('nav-active');
        log('Removed nav-active to prevent layout shift');
      }
    });
    observer.observe(form, { attributes: true, attributeFilter: ['class'] });
  };

  requestIdleCallback(() => {
    mount();
    observeSuggestions();
    hookSPARouting();
    disableNavActive();
  });
})();