// Nexus — Shared Sidebar + Layout Component
// Usage: Include after Alpine.js. Call initLayout() on each page.
// Sets sidebar, highlights active nav item, loads user info.

function initLayout(activeNav) {
  // activeNav: 'index'|'servers'|'files'|'push'|'scripts'|'credentials'|'schedules'|'retries'|'commands'|'audit'|'settings'
  const navItems = [
    { id:'index',       icon:'🏠', label:'仪表盘',   href:'/app/index.html' },
    { id:'servers',     icon:'🖥', label:'服务器',   href:'/app/servers.html' },
    { id:'files',       icon:'📁', label:'文件管理', href:'/app/files.html' },
    { id:'push',        icon:'📤', label:'推送',     href:'/app/push.html' },
    { id:'scripts',     icon:'📜', label:'脚本库',   href:'/app/scripts.html' },
    { id:'script_exec', icon:'📑', label:'执行历史', href:'/app/script-executions.html' },
    { id:'credentials', icon:'🔑', label:'凭据',     href:'/app/credentials.html' },
    { id:'schedules',   icon:'⏰', label:'调度',     href:'/app/schedules.html' },
    { id:'retries',     icon:'🔄', label:'重试队列', href:'/app/retries.html' },
  ];

  const bottomNav = [
    { id:'commands', icon:'💻', label:'命令日志', href:'/app/commands.html' },
    { id:'alerts',  icon:'🔔', label:'告警中心', href:'/app/alerts.html' },
    { id:'audit',   icon:'📋', label:'审计日志', href:'/app/audit.html' },
    { id:'settings', icon:'⚙️', label:'设置',    href:'/app/settings.html' },
  ];

  // Build sidebar HTML
  const navHtml = navItems.map(n =>
    `<a href="${n.href}" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition ${n.id===activeNav?'bg-brand/10 text-brand-light font-medium':'text-slate-400 hover:text-white hover:bg-slate-800'}">${n.icon} ${n.label}</a>`
  ).join('');

  const bottomHtml = bottomNav.map(n =>
    `<a href="${n.href}" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition ${n.id===activeNav?'bg-brand/10 text-brand-light font-medium':'text-slate-400 hover:text-white hover:bg-slate-800'}">${n.icon} ${n.label}</a>`
  ).join('');

  // Find sidebar container
  const sidebar = document.querySelector('[data-sidebar]');
  if (!sidebar) return;

  // Responsive: on mobile (<768px), sidebar defaults to hidden and overlays
  const isMobile = window.innerWidth < 768;

  sidebar.innerHTML = `
    <div class="px-5 py-4 border-b border-slate-800">
      <div class="flex items-center gap-3">
        <div class="w-8 h-8 rounded-lg bg-brand/20 flex items-center justify-center">
          <svg class="w-5 h-5 text-brand-light" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2"/>
          </svg>
        </div>
        <span id="brandName" class="text-white font-bold text-lg">Nexus</span>
      </div>
    </div>
    <nav class="flex-1 overflow-y-auto py-3 px-3 space-y-1">
      ${navHtml}
      <div class="border-t border-slate-800 my-2"></div>
      ${bottomHtml}
    </nav>
    <div class="border-t border-slate-800 p-4">
      <!-- Global Search -->
      <div class="relative mb-3">
        <input id="globalSearchInput" type="text" placeholder="搜索..." class="w-full px-3 py-1.5 bg-slate-800 border border-slate-700 rounded-lg text-white text-sm placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-brand" oninput="debounceSearch(this.value)">
        <div id="searchResults" class="hidden absolute bottom-full left-0 right-0 mb-2 bg-slate-800 border border-slate-700 rounded-lg shadow-xl max-h-64 overflow-y-auto z-50"></div>
      </div>
      <div class="flex items-center justify-between">
        <span id="sidebarUser" class="text-slate-400 text-sm">...</span>
        <div class="flex items-center gap-2">
          <button onclick="toggleTheme()" id="themeToggle" class="text-slate-500 hover:text-white text-sm transition" title="切换主题">🌙</button>
          <button onclick="doLogout()" class="text-slate-500 hover:text-red-400 text-xs transition">退出</button>
        </div>
      </div>
    </div>
  `;

  // Load user info
  loadLayoutUser();
  loadTheme();

  // ── Mobile Responsive ──
  // On mobile: collapse sidebar by default, add overlay + backdrop
  if (isMobile) {
    // Find Alpine component and set sidebarOpen = false
    const alpineRoot = document.querySelector('[x-data]');
    if (alpineRoot && alpineRoot.__x) {
      alpineRoot.__x.$data.sidebarOpen = false;
    } else {
      // Direct DOM fallback
      sidebar.style.display = 'none';
    }
    // Make sidebar overlay on mobile instead of pushing content
    sidebar.style.position = 'fixed';
    sidebar.style.top = '0';
    sidebar.style.left = '0';
    sidebar.style.bottom = '0';
    sidebar.style.zIndex = '40';
    // Add backdrop
    let backdrop = document.getElementById('sidebarBackdrop');
    if (!backdrop) {
      backdrop = document.createElement('div');
      backdrop.id = 'sidebarBackdrop';
      backdrop.className = 'fixed inset-0 bg-black/50 z-30 hidden';
      backdrop.onclick = () => {
        const root = document.querySelector('[x-data]');
        if (root && root.__x) root.__x.$data.sidebarOpen = false;
        sidebar.style.display = 'none';
        backdrop.classList.add('hidden');
      };
      document.body.appendChild(backdrop);
    }
    // Watch for sidebar toggle to show/hide backdrop
    const origToggle = document.querySelector('[x-data]');
    if (origToggle) {
      const observer = new MutationObserver(() => {
        const isVisible = sidebar.style.display !== 'none' && sidebar.offsetParent !== null;
        backdrop.classList.toggle('hidden', !isVisible);
      });
      observer.observe(sidebar, { attributes: true, attributeFilter: ['style'] });
    }
  }

  // Make tables horizontally scrollable on all pages
  document.querySelectorAll('table').forEach(table => {
    if (!table.parentElement.classList.contains('overflow-x-auto')) {
      const wrapper = document.createElement('div');
      wrapper.className = 'overflow-x-auto';
      table.parentNode.insertBefore(wrapper, table);
      wrapper.appendChild(table);
    }
  });
}

async function loadLayoutUser() {
  try {
    const r = await apiFetch(API + '/auth/me');
    if (!r) { doLogout(); return; }
    const u = await r.json();
    const el = document.getElementById('sidebarUser');
    if (el) el.textContent = u.username;
    const headerEl = document.getElementById('headerUser');
    if (headerEl) headerEl.textContent = u.username;
    const brandEl = document.getElementById('brandName');
    if (brandEl && u.system_name) brandEl.textContent = u.system_name;
  } catch(e) { console.error('Failed to load user info:', e); }
}

// ── Theme System (Tailwind v4 native dark mode) ──
async function loadTheme() {
  try {
    const r = await apiFetch(API + '/settings/theme');
    if (r && r.ok) {
      const d = await r.json();
      const theme = d.value === 'light' ? 'light' : 'dark';
      applyTheme(theme);
    }
  } catch(e) {}
}

function applyTheme(theme) {
  const html = document.documentElement;
  if (theme === 'light') {
    html.classList.remove('dark');
  } else {
    html.classList.add('dark');
  }
  try { localStorage.setItem('nexus_theme', theme); } catch(e) {}
  updateThemeIcon();
}

function updateThemeIcon() {
  const el = document.getElementById('themeToggle');
  if (el) el.textContent = document.documentElement.classList.contains('dark') ? '🌙' : '☀️';
}

function toggleTheme() {
  const isDark = document.documentElement.classList.contains('dark');
  const next = isDark ? 'light' : 'dark';
  applyTheme(next);
  apiFetch(API + '/settings/theme', {
    method: 'PUT', headers: apiHeadersJSON(),
    body: JSON.stringify({ value: next })
  });
}

// ── Global Search ──
let _searchTimer = null;

function debounceSearch(q) {
  clearTimeout(_searchTimer);
  const panel = document.getElementById('searchResults');
  if (!q || q.length < 2) { panel.classList.add('hidden'); return; }
  _searchTimer = setTimeout(() => doGlobalSearch(q), 300);
}

async function doGlobalSearch(q) {
  try {
    const r = await apiFetch(API + '/search/?q=' + encodeURIComponent(q));
    if (!r) return;
    const data = await r.json();
    const panel = document.getElementById('searchResults');
    if (!data.total) { panel.innerHTML = '<div class="p-3 text-slate-500 text-sm">无匹配结果</div>'; panel.classList.remove('hidden'); return; }
    let html = '';
    if (data.servers.length) {
      html += '<div class="px-3 py-1.5 text-slate-500 text-xs uppercase">服务器</div>';
      html += data.servers.map(s => `<a href="/app/servers.html?highlight=${s.id}" class="flex items-center gap-2 px-3 py-2 hover:bg-slate-700 transition"><span class="${s.is_online?'text-green-400':'text-red-400'}">●</span><span class="text-white text-sm">${_esc(s.name)}</span><span class="text-slate-500 text-xs">${_esc(s.domain)}</span></a>`).join('');
    }
    if (data.scripts.length) {
      html += '<div class="px-3 py-1.5 text-slate-500 text-xs uppercase border-t border-slate-700">脚本</div>';
      html += data.scripts.map(s => `<a href="/app/scripts.html?highlight=${s.id}" class="flex items-center gap-2 px-3 py-2 hover:bg-slate-700 transition"><span class="text-brand-light">📜</span><span class="text-white text-sm">${_esc(s.name)}</span><span class="text-slate-500 text-xs">${_esc(s.category||'')}</span></a>`).join('');
    }
    if (data.credentials.length) {
      html += '<div class="px-3 py-1.5 text-slate-500 text-xs uppercase border-t border-slate-700">凭据</div>';
      html += data.credentials.map(c => `<a href="/app/credentials.html?highlight=${c.id}" class="flex items-center gap-2 px-3 py-2 hover:bg-slate-700 transition"><span>🔑</span><span class="text-white text-sm">${_esc(c.name)}</span><span class="text-slate-500 text-xs">${_esc(c.host)}</span></a>`).join('');
    }
    if (data.schedules.length) {
      html += '<div class="px-3 py-1.5 text-slate-500 text-xs uppercase border-t border-slate-700">调度</div>';
      html += data.schedules.map(s => `<a href="/app/schedules.html?highlight=${s.id}" class="flex items-center gap-2 px-3 py-2 hover:bg-slate-700 transition"><span>⏰</span><span class="text-white text-sm">${_esc(s.name)}</span><span class="text-slate-500 text-xs font-mono">${(s.run_mode||'once')==='cron'?_esc(s.cron_expr||''):'一次性'}</span></a>`).join('');
    }
    panel.innerHTML = html;
    panel.classList.remove('hidden');
  } catch(e) { console.error('Global search failed:', e); }
}

// Close search on click outside
document.addEventListener('click', (e) => {
  const panel = document.getElementById('searchResults');
  const input = document.getElementById('globalSearchInput');
  if (panel && !panel.contains(e.target) && e.target !== input) {
    panel.classList.add('hidden');
  }
});

function _esc(s) { if (!s) return ''; const d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
