/* ========================================
   LUNARON TOOLS — JavaScript
   ======================================== */

window.LunaronApp = (() => {
  'use strict';

  /* --- STATE --- */
  const state = {
    theme: localStorage.getItem('lunaronTheme') || 'light',
    isLoggedIn: localStorage.getItem('lunaron_isLoggedIn') === 'true',
    currentUser: JSON.parse(localStorage.getItem('lunaron_user') || 'null'),
    activeTab: 'login',
  };

  /* --- ELEMENTS (resolved lazily) --- */
  const $ = id => document.getElementById(id);
  const $$ = sel => document.querySelectorAll(sel);



  /* --- THEME --- */
  function applyTheme(theme) {
    document.documentElement.setAttribute('data-theme', theme);
    state.theme = theme;
    localStorage.setItem('lunaronTheme', theme);
  }

  /* --- FILTER --- */
  function setFilter(filter) {
    $$('.filter-btn').forEach(btn =>
      btn.classList.toggle('active', btn.dataset.filter === filter)
    );
    $$('.category-section').forEach(sec => {
      if(sec.id !== 'fav-section') sec.style.display = (filter === 'all' || sec.dataset.category === filter) ? '' : 'none';
    });
  }

  /* --- SEARCH --- */
  function handleSearch(e) {
    const term = e.target.value.toLowerCase();
    if (term.length > 0) {
      $$('.filter-btn').forEach(btn => btn.classList.toggle('active', btn.dataset.filter === 'all'));
      $$('.category-section').forEach(sec => { if(sec.id !== 'fav-section') sec.style.display = ''; });
    } else {
      setFilter('all');
    }

    $$('.category-section:not(#fav-section) .tool-card').forEach(card => {
      const name = card.querySelector('.tool-name')?.textContent.toLowerCase() || '';
      const desc = card.querySelector('.tool-desc')?.textContent.toLowerCase() || '';
      if (name.includes(term) || desc.includes(term)) {
        card.style.display = '';
        card.style.animation = 'none'; 
        card.style.opacity = '1';
      } else {
        card.style.display = 'none';
      }
    });

    $$('.category-section:not(#fav-section)').forEach(sec => {
      const visibleCards = sec.querySelectorAll('.tool-card[style*="display: none"]');
      const totalCards = sec.querySelectorAll('.tool-card');
      if (term.length > 0) {
        sec.style.display = visibleCards.length === totalCards.length ? 'none' : '';
      }
    });
  }

  /* --- CARD STAGGER ANIMATION --- */
  function initCards() {
    $$('.tool-card').forEach((card, i) => {
      card.style.animationDelay = (i * 0.04) + 's';
    });
  }

  /* --- FAVORITES --- */
  function toggleFavorite(toolId, btnEl) {
    let favs = JSON.parse(localStorage.getItem('lunaron_favs') || '[]');
    const isFav = favs.includes(toolId);
    
    if (isFav) {
      favs = favs.filter(id => id !== toolId);
      btnEl.classList.remove('active');
      btnEl.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>`;
    } else {
      favs.push(toolId);
      btnEl.classList.add('active');
      btnEl.innerHTML = `<svg viewBox="0 0 24 24" fill="#f59e0b" stroke="#f59e0b" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>`;
    }
    localStorage.setItem('lunaron_favs', JSON.stringify(favs));
    
    $$('.tool-card').forEach(card => {
       if(card.dataset.toolId === toolId) {
          const b = card.querySelector('.fav-btn');
          if(b && b !== btnEl) {
             b.classList.toggle('active', !isFav);
             b.innerHTML = !isFav ? `<svg viewBox="0 0 24 24" fill="#f59e0b" stroke="#f59e0b" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>` : `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>`;
          }
       }
    });
    renderFavorites();
  }

  function renderFavorites() {
    const favSection = $('fav-section');
    const favGrid = $('fav-grid');
    if (!favSection || !favGrid) return;
    
    let favs = JSON.parse(localStorage.getItem('lunaron_favs') || '[]');
    if (favs.length === 0) {
      favSection.style.display = 'none';
      return;
    }
    
    favSection.style.display = '';
    favGrid.innerHTML = '';
    
    favs.forEach(toolId => {
      const originalCard = document.querySelector(`.category-section:not(#fav-section) .tool-card[data-tool-id="${toolId}"]`);
      if (originalCard) {
        const clone = originalCard.cloneNode(true);
        const btn = clone.querySelector('.fav-btn');
        if (btn) {
          btn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); toggleFavorite(toolId, btn); });
        }
        favGrid.appendChild(clone);
      }
    });
  }

  function initFavorites() {
    if (!window.location.pathname.endsWith('index.html') && !window.location.pathname.endsWith('/')) return;
    
    let favs = JSON.parse(localStorage.getItem('lunaron_favs') || '[]');
    $$('.category-section:not(#fav-section) .tool-card').forEach(card => {
      const toolId = card.getAttribute('href');
      card.dataset.toolId = toolId;
      const starBtn = document.createElement('button');
      starBtn.className = `fav-btn ${favs.includes(toolId) ? 'active' : ''}`;
      starBtn.innerHTML = `<svg viewBox="0 0 24 24" fill="${favs.includes(toolId) ? '#f59e0b' : 'none'}" stroke="${favs.includes(toolId) ? '#f59e0b' : 'currentColor'}" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>`;
      starBtn.style.cssText = 'position: absolute; top: 16px; right: 16px; background: var(--bg-glass); border: 1px solid var(--border-glass); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: all 0.2s; backdrop-filter: blur(4px); color: var(--text-primary);';
      starBtn.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); toggleFavorite(toolId, starBtn); });
      starBtn.addEventListener('mouseenter', () => { starBtn.style.transform = 'scale(1.1)'; });
      starBtn.addEventListener('mouseleave', () => { starBtn.style.transform = 'scale(1)'; });
      card.appendChild(starBtn);
    });
    renderFavorites();
  }

  /* --- MODAL --- */
  function openModal(tab) {
    const overlay = $('authOverlay');
    if (overlay) { overlay.classList.add('open'); document.body.style.overflow = 'hidden'; }
    setTab(tab || 'login');
  }

  function closeModal() {
    const overlay = $('authOverlay');
    if (overlay) { overlay.classList.remove('open'); document.body.style.overflow = ''; }
  }

  function setTab(tab) {
    state.activeTab = tab;
    $$('.modal-tab').forEach(t => t.classList.toggle('active', t.dataset.tab === tab));
    const lf = $('loginForm'), sf = $('signupForm');
    if (lf) lf.style.display = tab === 'login' ? '' : 'none';
    if (sf) sf.style.display = tab === 'signup' ? '' : 'none';
  }

  /* --- ACCOUNT MENU --- */
  function openAccountMenu(e) {
    e && e.stopPropagation();
    $('accountMenu') && $('accountMenu').classList.toggle('open');
  }

  function closeAccountMenu() {
    $('accountMenu') && $('accountMenu').classList.remove('open');
  }

  /* --- AUTH --- */
  function loginUser(user) {
    state.isLoggedIn = true;
    state.currentUser = user;
    localStorage.setItem('lunaron_isLoggedIn', 'true');
    localStorage.setItem('lunaron_user', JSON.stringify(user));
    updateNavUI();
    closeModal();
  }

  function logout() {
    state.isLoggedIn = false;
    state.currentUser = null;
    localStorage.removeItem('lunaron_isLoggedIn');
    localStorage.removeItem('lunaron_user');
    closeAccountMenu();
    updateNavUI();
  }

  function updateNavUI() {
    const nl = $('navLogin'), ns = $('navSignup'), na = $('navAvatar');
    const ab = $('avatarBtn'), an = $('accountName'), ae = $('accountEmail'), ap = $('accountPlan');

    if (state.isLoggedIn && state.currentUser) {
      if (nl) nl.style.display = 'none';
      if (ns) ns.style.display = 'none';
      if (na) na.style.display = '';
      if (ab) ab.textContent = (state.currentUser.name || '?')[0].toUpperCase();
      if (an) an.textContent = state.currentUser.name;
      if (ae) ae.textContent = state.currentUser.email;
      if (ap) {
        const isPro = state.currentUser.plan === 'pro';
        ap.textContent = isPro ? 'Pro Plan' : 'Free Plan';
        ap.className = 'account-plan ' + (isPro ? 'pro-plan' : 'free-plan');
      }
    } else {
      if (nl) nl.style.display = '';
      if (ns) ns.style.display = '';
      if (na) na.style.display = 'none';
    }
  }

  /* --- SCROLL --- */
  function scrollTo(id) {
    const el = document.getElementById(id);
    if (el) {
      window.scrollTo({ top: el.getBoundingClientRect().top + scrollY - 80, behavior: 'smooth' });
    } else {
      // Not on home page, redirect
      window.location.href = (window.location.pathname.includes('/tools/') ? '../index.html' : './index.html') + '#' + id;
    }
  }

  /* --- NAV HIGHLIGHT --- */
  function initNavHighlight() {
    const links = $$('.nav-link[data-section]');
    if (!links.length) return;
    const obs = new IntersectionObserver(entries => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          links.forEach(l => l.classList.toggle('active', l.dataset.section === e.target.id));
        }
      });
    }, { rootMargin: '-35% 0px -35% 0px' });
    links.forEach(l => { const s = document.getElementById(l.dataset.section); if (s) obs.observe(s); });
  }

  /* --- SCROLL REVEAL --- */
  function initReveal() {
    $$('.category-section, .pricing-section, .tool-page > div').forEach(el => {
      el.classList.add('reveal');
    });

    const reveals = $$('.reveal');
    if (!reveals.length) return;
    
    const observer = new IntersectionObserver(entries => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('active');
          observer.unobserve(e.target);
        }
      });
    }, { rootMargin: '0px 0px -10% 0px' });
    
    reveals.forEach(r => observer.observe(r));
  }

  /* --- EVENT BINDING (Event Delegation for robustness) --- */
  function bindEvents() {
    // Delegation for nav/global actions
    document.addEventListener('click', e => {
      // Theme
      const themeBtn = e.target.closest('#themeToggle');
      if (themeBtn) applyTheme(state.theme === 'dark' ? 'light' : 'dark');

      // Modal open
      const loginBtn = e.target.closest('[data-action="open-login"]');
      if (loginBtn) openModal('login');
      const signupBtn = e.target.closest('[data-action="open-signup"]');
      if (signupBtn) openModal('signup');

      // Scroll to pricing
      const priceBtn = e.target.closest('[data-action="scroll-pricing"]');
      if (priceBtn) scrollTo('pricing');

      // Nav links (section scroll)
      const navLink = e.target.closest('.nav-link[data-section]');
      if (navLink) scrollTo(navLink.dataset.section);

      // Account menu
      const avatarBtn = e.target.closest('#avatarBtn');
      if (avatarBtn) openAccountMenu(e);
      const logoutBtn = e.target.closest('#logoutBtn');
      if (logoutBtn) logout();

      // Modal tabs
      const modalTab = e.target.closest('.modal-tab');
      if (modalTab) setTab(modalTab.dataset.tab);

      // Switch tab links
      const switchLink = e.target.closest('[data-switch-tab]');
      if (switchLink) { e.preventDefault(); setTab(switchLink.dataset.switchTab); }

      // Close modal on overlay click
      if (e.target === $('authOverlay')) closeModal();

      // Close account menu on outside click
      const menu = $('accountMenu');
      const abtn = $('avatarBtn');
      if (menu && abtn && !menu.contains(e.target) && e.target !== abtn) closeAccountMenu();
    });

    // Filters (usually static)
    $$('.filter-btn').forEach(btn => btn.addEventListener('click', () => setFilter(btn.dataset.filter)));
    
    // Search
    const searchInput = $('toolSearchInput');
    if (searchInput) searchInput.addEventListener('input', handleSearch);

    // Modal close (static)
    $('authClose') && $('authClose').addEventListener('click', closeModal);

    // Keyboard
    document.addEventListener('keydown', e => { if (e.key === 'Escape') { closeModal(); closeAccountMenu(); } });

    // Forms — Supabase 認証
    document.addEventListener('submit', async e => {
      const auth = window.LunaronAuth;

      // ログインフォーム
      if (e.target.id === 'loginFormEl') {
        e.preventDefault();
        const email    = e.target.querySelector('[name="email"]').value.trim();
        const password = e.target.querySelector('[name="password"]')?.value || '';
        const btn = e.target.querySelector('button[type="submit"]');
        if (btn) { btn.disabled = true; btn.textContent = '認証中...'; }

        if (auth) {
          const { data, error } = await auth.signIn(email, password);
          if (error) {
            alert('ログインに失敗しました: ' + (error.message || '入力内容を確認してください'));
          }
          // onAuthStateChange が UI を更新する
        } else {
          // Supabase未設定時はフォールバック
          loginUser({ name: email.split('@')[0], email, plan: 'free' });
        }
        if (btn) { btn.disabled = false; btn.textContent = 'ログイン'; }
      }

      // 新規登録フォーム
      if (e.target.id === 'signupFormEl') {
        e.preventDefault();
        const name     = e.target.querySelector('[name="name"]').value.trim();
        const email    = e.target.querySelector('[name="email"]').value.trim();
        const password = e.target.querySelector('[name="password"]')?.value || '';
        const btn = e.target.querySelector('button[type="submit"]');
        if (btn) { btn.disabled = true; btn.textContent = '登録中...'; }

        if (auth) {
          const { data, error } = await auth.signUp(email, password, name);
          if (error) {
            alert('登録に失敗しました: ' + (error.message || '入力内容を確認してください'));
          } else {
            alert('確認メールを送信しました。メールをご確認ください。');
            closeModal();
          }
        } else {
          loginUser({ name, email, plan: 'free' });
        }
        if (btn) { btn.disabled = false; btn.textContent = '無料で登録する'; }
      }
    });

    // Google OAuth ボタン
    document.addEventListener('click', async e => {
      const googleBtn = e.target.closest('.social-btn');
      if (googleBtn) {
        if (window.LunaronAuth) {
          googleBtn.disabled = true;
          googleBtn.textContent = 'Googleに接続中...';
          const { error } = await window.LunaronAuth.signInWithGoogle();
          if (error) {
            alert('Google認証に失敗しました。');
            googleBtn.disabled = false;
          }
          // リダイレクトするので復元不要
        } else {
          alert('認証設定が必要です。.env に SUPABASE_URL と SUPABASE_ANON_KEY を設定してください。');
        }
      }
    });


    // Pricing CTA
    document.addEventListener('click', e => {
      const pCta = e.target.closest('[data-action="pricing-cta"]');
      if (pCta && !state.isLoggedIn) openModal('signup');
    });
  }

  /* --- GLOBAL UX --- */
  function initGlobalUX() {
    if (!document.getElementById('globalLoading')) {
      const loader = document.createElement('div');
      loader.id = 'globalLoading';
      loader.className = 'global-loading-overlay';
      loader.innerHTML = '<div class="moon-loader"></div><div class="moon-loader-text">処理中...</div>';
      document.body.appendChild(loader);
    }

    document.addEventListener('dragover', e => {
      e.preventDefault();
    });

    document.addEventListener('drop', e => {
      // 特定の要素やクラスを持つ場合はグローバルな処理を無視する
      if (e.target.closest('.drop-zone, .drop-zone-wrap, [type="file"], canvas, textarea, input')) return; 
      e.preventDefault();
      const files = e.dataTransfer.files;
      if (files.length > 0) {
        const type = files[0].type;
        const basePath = window.location.pathname.includes('/tools/') ? '' : 'tools/';
        if (type.startsWith('image/')) {
          window.location.href = basePath + 'compress.html';
        } else if (type.startsWith('video/')) {
          window.location.href = basePath + 'video-compress.html';
        }
      }
    });

    document.addEventListener('keydown', e => {
      if (e.ctrlKey || e.metaKey) {
        if (e.key.toLowerCase() === 'k') {
          e.preventDefault();
          const searchInput = document.getElementById('toolSearchInput');
          if (searchInput) {
            searchInput.focus();
            scrollTo('tools-section');
          }
        } else if (e.key.toLowerCase() === 's') {
          e.preventDefault();
          const saveBtn = document.querySelector('[id^="dl-"], .dl-btn, [data-action="save"]');
          if (saveBtn) saveBtn.click();
        } else if (e.key.toLowerCase() === 'z') {
          // Allow default undo for inputs
          if (e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA') {
            const undoBtn = document.querySelector('[data-action="undo"]');
            if (undoBtn) {
              e.preventDefault();
              undoBtn.click();
            }
          }
        }
      }
    });
  }

  /* --- INIT --- */
  function init() {
    applyTheme(state.theme);
    initCards();
    initFavorites();
    bindEvents();
    updateNavUI();
    initNavHighlight();
    initReveal();
    initGlobalUX();

    // Handle hash on load (for redirects from tool pages)
    if (window.location.hash) {
      const id = window.location.hash.substring(1);
      setTimeout(() => {
        const el = document.getElementById(id);
        if (el) scrollTo(id);
      }, 500);
    }
  }

  // Global helper for loader
  window.LunaronLoader = {
    show: () => { const l = $('globalLoading'); if (l) l.classList.add('active'); },
    hide: () => { const l = $('globalLoading'); if (l) l.classList.remove('active'); }
  };

  return { init, updateNavUI };
})();

// Initialize or re-initialize if needed
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', window.LunaronApp.init);
} else {
  window.LunaronApp.init();
}