// ============================================
// EXPLORER VIEW
// ============================================
// File tree browser with .gitignore filtering and CLAUDE.md update support
// Split-panel layout: file tree (left) + preview (right)

// Explorer state
let explorerCurrentPath = null;
let explorerSelectedFile = null;
let explorerExpandedDirs = new Set();

// Task queue for CLAUDE.md updates
let updateTaskQueue = [];
let isTaskQueueVisible = false;
let isTaskRunning = false;
// Note: defaultCliTool is defined in components/cli-status.js


/**
 * Safe base64 encode that handles Unicode characters
 * Returns alphanumeric-only string suitable for HTML IDs
 */
function safeBase64Encode(str) {
  try {
    // Encode Unicode string to UTF-8 bytes, then to base64
    const encoded = btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (_, p1) => String.fromCharCode(parseInt(p1, 16))));
    return encoded.replace(/[^a-zA-Z0-9]/g, '');
  } catch (e) {
    // Fallback: use simple hash if encoding fails
    let hash = 0;
    for (let i = 0; i < str.length; i++) {
      const char = str.charCodeAt(i);
      hash = ((hash << 5) - hash) + char;
      hash = hash & hash;
    }
    return 'path' + Math.abs(hash).toString(36);
  }
}

/**
 * Render the Explorer view
 */
async function renderExplorer() {
  const container = document.getElementById('mainContent');
  if (!container) return;

  // Hide stats grid and search
  const statsGrid = document.getElementById('statsGrid');
  const searchInput = document.getElementById('searchInput');
  if (statsGrid) statsGrid.style.display = 'none';
  if (searchInput) searchInput.parentElement.style.display = 'none';

  // Initialize explorer path to project path
  explorerCurrentPath = projectPath;

  container.innerHTML = `
    <div class="explorer-container">
      <!-- Left Panel: File Tree -->
      <div class="explorer-tree-panel">
        <div class="explorer-tree-header">
          <div class="explorer-tree-title">
            <i data-lucide="folder-tree" class="explorer-icon"></i>
            <span class="explorer-title-text">${t('explorer.title')}</span>
          </div>
          <button class="explorer-refresh-btn" onclick="refreshExplorerTree()" title="${t('explorer.refresh')}">
            <i data-lucide="refresh-cw" class="w-4 h-4"></i>
          </button>
        </div>
        <div class="explorer-tree-content" id="explorerTreeContent">
          <div class="explorer-loading">${t('explorer.loading')}</div>
        </div>
      </div>

      <!-- Right Panel: Preview -->
      <div class="explorer-preview-panel">
        <div class="explorer-preview-header" id="explorerPreviewHeader">
          <span class="preview-filename">${t('explorer.selectFile')}</span>
        </div>
        <div class="explorer-preview-content" id="explorerPreviewContent">
          <div class="explorer-preview-empty">
            <div class="preview-empty-icon"><i data-lucide="file-text" class="w-12 h-12"></i></div>
            <div class="preview-empty-text">${t('explorer.selectFileHint')}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Floating Action Button -->
    <div class="explorer-fab" onclick="toggleTaskQueue()" title="${t('taskQueue.title')}">
      <span class="fab-icon"><i data-lucide="list-todo" class="w-5 h-5"></i></span>
      <span class="fab-badge" id="fabBadge">0</span>
    </div>

    <!-- Task Queue Panel -->
    <div class="task-queue-panel" id="taskQueuePanel">
      <div class="task-queue-header">
        <span class="task-queue-title"><i data-lucide="clipboard-list" class="w-4 h-4 inline-block mr-1"></i> ${t('taskQueue.title')}</span>
        <button class="task-queue-close" onclick="toggleTaskQueue()">×</button>
      </div>
      <div class="task-queue-toolbar">
        <div class="queue-cli-selector">
          <label>${t('taskQueue.cli')}</label>
          <select id="queueCliTool" onchange="updateDefaultCliTool(this.value)">
            <option value="gemini">Gemini</option>
            <option value="qwen">Qwen</option>
            <option value="codex">Codex</option>
            <option value="claude">Claude</option>
          </select>
        </div>
        <div class="task-queue-actions">
          <button class="queue-action-btn" onclick="openAddTaskModal()" title="${t('taskQueue.addTask')}">
            <i data-lucide="plus" class="w-4 h-4"></i>
          </button>
          <button class="queue-action-btn queue-start-btn" onclick="startTaskQueue()" id="startQueueBtn" disabled title="${t('taskQueue.startAll')}">
            <i data-lucide="play" class="w-4 h-4"></i>
          </button>
          <button class="queue-action-btn queue-clear-btn" onclick="clearCompletedTasks()" title="${t('taskQueue.clearCompleted')}">
            <i data-lucide="trash-2" class="w-4 h-4"></i>
          </button>
        </div>
      </div>
      <div class="task-queue-list" id="taskQueueList">
        <div class="task-queue-empty">
          <span>${t('taskQueue.noTasks')}</span>
          <p>${t('taskQueue.noTasksHint')}</p>
        </div>
      </div>
    </div>
  `;

  // Load initial file tree
  await loadExplorerTree(explorerCurrentPath);
  
  // Initialize Lucide icons for dynamically rendered content
  if (typeof lucide !== 'undefined') lucide.createIcons();
}

/**
 * Load and render file tree for a directory
 */
async function loadExplorerTree(dirPath) {
  const treeContent = document.getElementById('explorerTreeContent');
  if (!treeContent) return;

  try {
    const response = await fetch(`/api/files?path=${encodeURIComponent(dirPath)}`);
    const data = await response.json();

    if (data.error) {
      treeContent.innerHTML = `<div class="explorer-error">${escapeHtml(data.error)}</div>`;
      return;
    }

    // Render root level
    treeContent.innerHTML = renderTreeLevel(data.files, dirPath, 0);
    attachTreeEventListeners();
    
    // Initialize Lucide icons for tree items
    if (typeof lucide !== 'undefined') lucide.createIcons();

  } catch (error) {
    treeContent.innerHTML = `<div class="explorer-error">Failed to load: ${escapeHtml(error.message)}</div>`;
  }
}

/**
 * Render a level of the file tree
 */
function renderTreeLevel(files, parentPath, depth) {
  if (!files || files.length === 0) {
    return `<div class="tree-empty" style="padding-left: ${depth * 16 + 8}px">${t('explorer.emptyDir')}</div>`;
  }

  return files.map(file => {
    const isExpanded = explorerExpandedDirs.has(file.path);
    const isSelected = explorerSelectedFile === file.path;

    if (file.type === 'directory') {
      const folderIcon = getFolderIcon(file.name, isExpanded, file.hasClaudeMd);
      const chevronIcon = isExpanded ? '<i data-lucide="chevron-down" class="w-3 h-3"></i>' : '<i data-lucide="chevron-right" class="w-3 h-3"></i>';
      return `
        <div class="tree-item tree-folder ${isExpanded ? 'expanded' : ''} ${file.hasClaudeMd ? 'has-claude-md' : ''}" data-path="${escapeHtml(file.path)}" data-type="directory">
          <div class="tree-item-row ${isSelected ? 'selected' : ''}" style="padding-left: ${depth * 16}px">
            <span class="tree-chevron">${chevronIcon}</span>
            <span class="tree-icon">${folderIcon}</span>
            <span class="tree-name">${escapeHtml(file.name)}</span>
            ${file.hasClaudeMd ? `
              <span class="claude-md-badge" title="Contains CLAUDE.md documentation">
                <span class="badge-icon"><i data-lucide="file-check" class="w-3 h-3"></i></span>
                <span class="badge-text">DOC</span>
              </span>
            ` : ''}
            <div class="tree-folder-actions">
              <button class="tree-update-btn" onclick="event.stopPropagation(); addFolderToQueue('${escapeHtml(file.path)}', 'single-layer')" title="${t('explorer.currentFolderOnly')}">
                <span class="update-icon"><i data-lucide="file" class="w-3.5 h-3.5"></i></span>
              </button>
              <button class="tree-update-btn tree-update-multi" onclick="event.stopPropagation(); addFolderToQueue('${escapeHtml(file.path)}', 'multi-layer')" title="${t('explorer.withSubdirs')}">
                <span class="update-icon"><i data-lucide="folder-tree" class="w-3.5 h-3.5"></i></span>
              </button>
            </div>
          </div>
          <div class="tree-children ${isExpanded ? 'show' : ''}" id="children-${safeBase64Encode(file.path)}">
            ${isExpanded ? '' : ''}
          </div>
        </div>
      `;
    } else {
      const ext = file.name.includes('.') ? file.name.split('.').pop().toLowerCase() : '';
      const fileIcon = getFileIcon(ext);
      // Special highlight for CLAUDE.md files
      const isClaudeMd = file.name === 'CLAUDE.md';
      return `
        <div class="tree-item tree-file ${isSelected ? 'selected' : ''} ${isClaudeMd ? 'is-claude-md' : ''}" data-path="${escapeHtml(file.path)}" data-type="file">
          <div class="tree-item-row" style="padding-left: ${depth * 16}px">
            <span class="tree-chevron-spacer"></span>
            <span class="tree-icon">${isClaudeMd ? '<span class="file-icon file-icon-claude"><i data-lucide="bot" class="w-3 h-3"></i></span>' : fileIcon}</span>
            <span class="tree-name">${escapeHtml(file.name)}</span>
          </div>
        </div>
      `;
    }
  }).join('');
}

/**
 * Get file icon based on extension - using colored SVG icons for better distinction
 */
function getFileIcon(ext) {
  const iconMap = {
    // JavaScript/TypeScript - distinct colors
    'js': '<span class="file-icon file-icon-js">JS</span>',
    'mjs': '<span class="file-icon file-icon-js">JS</span>',
    'cjs': '<span class="file-icon file-icon-js">JS</span>',
    'jsx': '<span class="file-icon file-icon-jsx">JSX</span>',
    'ts': '<span class="file-icon file-icon-ts">TS</span>',
    'tsx': '<span class="file-icon file-icon-tsx">TSX</span>',
    
    // Python
    'py': '<span class="file-icon file-icon-py">PY</span>',
    'pyw': '<span class="file-icon file-icon-py">PY</span>',
    
    // Other languages
    'go': '<span class="file-icon file-icon-go">GO</span>',
    'rs': '<span class="file-icon file-icon-rs">RS</span>',
    'java': '<span class="file-icon file-icon-java">JV</span>',
    'rb': '<span class="file-icon file-icon-rb">RB</span>',
    'php': '<span class="file-icon file-icon-php">PHP</span>',
    'c': '<span class="file-icon file-icon-c">C</span>',
    'cpp': '<span class="file-icon file-icon-cpp">C++</span>',
    'h': '<span class="file-icon file-icon-h">H</span>',
    'cs': '<span class="file-icon file-icon-cs">C#</span>',
    'swift': '<span class="file-icon file-icon-swift">SW</span>',
    'kt': '<span class="file-icon file-icon-kt">KT</span>',
    
    // Web
    'html': '<span class="file-icon file-icon-html">HTML</span>',
    'htm': '<span class="file-icon file-icon-html">HTML</span>',
    'css': '<span class="file-icon file-icon-css">CSS</span>',
    'scss': '<span class="file-icon file-icon-scss">SCSS</span>',
    'sass': '<span class="file-icon file-icon-scss">SASS</span>',
    'less': '<span class="file-icon file-icon-less">LESS</span>',
    'vue': '<span class="file-icon file-icon-vue">VUE</span>',
    'svelte': '<span class="file-icon file-icon-svelte">SV</span>',
    
    // Config/Data
    'json': '<span class="file-icon file-icon-json">{}</span>',
    'yaml': '<span class="file-icon file-icon-yaml">YML</span>',
    'yml': '<span class="file-icon file-icon-yaml">YML</span>',
    'xml': '<span class="file-icon file-icon-xml">XML</span>',
    'toml': '<span class="file-icon file-icon-toml">TML</span>',
    'ini': '<span class="file-icon file-icon-ini">INI</span>',
    'env': '<span class="file-icon file-icon-env">ENV</span>',
    
    // Documentation
    'md': '<span class="file-icon file-icon-md">MD</span>',
    'markdown': '<span class="file-icon file-icon-md">MD</span>',
    'txt': '<span class="file-icon file-icon-txt">TXT</span>',
    'log': '<span class="file-icon file-icon-log">LOG</span>',
    
    // Shell/Scripts
    'sh': '<span class="file-icon file-icon-sh">SH</span>',
    'bash': '<span class="file-icon file-icon-sh">SH</span>',
    'zsh': '<span class="file-icon file-icon-sh">ZSH</span>',
    'ps1': '<span class="file-icon file-icon-ps1">PS1</span>',
    'bat': '<span class="file-icon file-icon-bat">BAT</span>',
    'cmd': '<span class="file-icon file-icon-bat">CMD</span>',
    
    // Database
    'sql': '<span class="file-icon file-icon-sql">SQL</span>',
    'db': '<span class="file-icon file-icon-db">DB</span>',
    
    // Docker/Container
    'dockerfile': '<span class="file-icon file-icon-docker"><i data-lucide="container" class="w-3 h-3"></i></span>',
    
    // Images
    'png': '<span class="file-icon file-icon-img">IMG</span>',
    'jpg': '<span class="file-icon file-icon-img">IMG</span>',
    'jpeg': '<span class="file-icon file-icon-img">IMG</span>',
    'gif': '<span class="file-icon file-icon-img">GIF</span>',
    'svg': '<span class="file-icon file-icon-svg">SVG</span>',
    'ico': '<span class="file-icon file-icon-img">ICO</span>',
    
    // Package
    'lock': '<span class="file-icon file-icon-lock"><i data-lucide="lock" class="w-3 h-3"></i></span>'
  };
  
  return iconMap[ext] || '<span class="file-icon file-icon-default"><i data-lucide="file" class="w-3 h-3"></i></span>';
}

/**
 * Get folder icon based on folder name and state
 */
function getFolderIcon(name, isExpanded, hasClaudeMd) {
  // Only special icon for .workflow folder
  if (name === '.workflow') {
    return '<i data-lucide="zap" class="w-4 h-4 text-warning"></i>';
  }
  return isExpanded 
    ? '<i data-lucide="folder-open" class="w-4 h-4 text-warning"></i>' 
    : '<i data-lucide="folder" class="w-4 h-4 text-warning"></i>';
}

// Flag to track if event delegation is already set up
let explorerEventsDelegated = false;

/**
 * Attach event listeners using event delegation (only once on container)
 */
function attachTreeEventListeners() {
  const treeContent = document.getElementById('explorerTreeContent');
  if (!treeContent || explorerEventsDelegated) return;

  explorerEventsDelegated = true;

  // Use event delegation - single listener on container handles all clicks
  treeContent.addEventListener('click', async (e) => {
    // Check if clicked on folder row (but not on action buttons)
    const folderRow = e.target.closest('.tree-folder > .tree-item-row');
    if (folderRow && !e.target.closest('.tree-folder-actions')) {
      const folder = folderRow.closest('.tree-folder');
      const path = folder.dataset.path;
      await toggleFolderExpand(path, folder);
      return;
    }

    // Check if clicked on file
    const fileItem = e.target.closest('.tree-file');
    if (fileItem) {
      const path = fileItem.dataset.path;
      await previewFile(path);

      // Update selection
      document.querySelectorAll('.tree-item-row.selected, .tree-file.selected').forEach(el => {
        el.classList.remove('selected');
      });
      fileItem.classList.add('selected');
      explorerSelectedFile = path;
    }
  });
}
/**
 * Toggle folder expand/collapse
 */
async function toggleFolderExpand(path, folderElement) {
  const isExpanded = explorerExpandedDirs.has(path);
  const childrenContainer = folderElement.querySelector('.tree-children');
  const chevron = folderElement.querySelector('.tree-chevron');
  const folderIcon = folderElement.querySelector('.tree-icon');

  if (isExpanded) {
    // Collapse
    explorerExpandedDirs.delete(path);
    folderElement.classList.remove('expanded');
    childrenContainer.classList.remove('show');
    // Update chevron and folder icon
    if (chevron) chevron.innerHTML = '<i data-lucide="chevron-right" class="w-3 h-3"></i>';
    if (folderIcon && !folderElement.querySelector('[data-lucide="zap"]')) {
      folderIcon.innerHTML = '<i data-lucide="folder" class="w-4 h-4 text-warning"></i>';
    }
  } else {
    // Expand - load children if not loaded
    explorerExpandedDirs.add(path);
    folderElement.classList.add('expanded');
    childrenContainer.classList.add('show');
    // Update chevron and folder icon
    if (chevron) chevron.innerHTML = '<i data-lucide="chevron-down" class="w-3 h-3"></i>';
    if (folderIcon && !folderElement.querySelector('[data-lucide="zap"]')) {
      folderIcon.innerHTML = '<i data-lucide="folder-open" class="w-4 h-4 text-warning"></i>';
    }

    if (!childrenContainer.innerHTML.trim()) {
      childrenContainer.innerHTML = '<div class="tree-loading">Loading...</div>';
      
      try {
        const response = await fetch(`/api/files?path=${encodeURIComponent(path)}`);
        const data = await response.json();
        
        const depth = (path.match(/\//g) || []).length - (explorerCurrentPath.match(/\//g) || []).length + 1;
        childrenContainer.innerHTML = renderTreeLevel(data.files, path, depth);
      } catch (error) {
        childrenContainer.innerHTML = `<div class="tree-error">Failed to load</div>`;
      }
    }
  }
  
  // Reinitialize Lucide icons after DOM changes
  if (typeof lucide !== 'undefined') lucide.createIcons();
}

/**
 * Preview a file in the right panel
 */
async function previewFile(filePath) {
  const previewHeader = document.getElementById('explorerPreviewHeader');
  const previewContent = document.getElementById('explorerPreviewContent');
  
  const fileName = filePath.split('/').pop();
  const ext = fileName.includes('.') ? fileName.split('.').pop().toLowerCase() : '';
  const isMarkdown = ext === 'md' || ext === 'markdown';
  
  // Build header with tabs for markdown files
  previewHeader.innerHTML = `
    <div class="preview-header-left">
      <span class="preview-filename">${escapeHtml(fileName)}</span>
      <span class="preview-path" title="${escapeHtml(filePath)}">${escapeHtml(filePath)}</span>
    </div>
    ${isMarkdown ? `
      <div class="preview-header-tabs" id="previewHeaderTabs">
        <button class="preview-tab active" data-tab="rendered" onclick="switchPreviewTab(this, 'rendered')">${t('explorer.preview')}</button>
        <button class="preview-tab" data-tab="source" onclick="switchPreviewTab(this, 'source')">${t('explorer.source')}</button>
      </div>
    ` : ''}
  `;
  
  previewContent.innerHTML = '<div class="explorer-loading">Loading file...</div>';

  try {
    const response = await fetch(`/api/file-content?path=${encodeURIComponent(filePath)}`);
    const data = await response.json();

    if (data.error) {
      previewContent.innerHTML = `<div class="explorer-error">${escapeHtml(data.error)}</div>`;
      return;
    }

    if (data.isMarkdown) {
      // Render markdown with tabs content (tabs are in header)
      const rendered = marked.parse(data.content);
      previewContent.innerHTML = `
        <div class="preview-tab-content rendered show" data-tab="rendered">
          <div class="markdown-preview prose">${rendered}</div>
        </div>
        <div class="preview-tab-content source" data-tab="source">
          <pre><code class="language-markdown">${escapeHtml(data.content)}</code></pre>
        </div>
      `;
    } else {
      // Render code with syntax highlighting
      previewContent.innerHTML = `
        <div class="preview-info">
          <span class="preview-lang">${data.language}</span>
          <span class="preview-lines">${data.lines} ${t('explorer.lines')}</span>
          <span class="preview-size">${formatFileSize(data.size)}</span>
        </div>
        <pre class="preview-code"><code class="language-${data.language}">${escapeHtml(data.content)}</code></pre>
      `;
    }

    // Apply syntax highlighting if hljs is available
    if (typeof hljs !== 'undefined') {
      previewContent.querySelectorAll('pre code').forEach(block => {
        hljs.highlightElement(block);
      });
    }

  } catch (error) {
    previewContent.innerHTML = `<div class="explorer-error">Failed to load: ${escapeHtml(error.message)}</div>`;
  }
}

/**
 * Switch preview tab (for markdown files)
 */
function switchPreviewTab(btn, tabName) {
  const previewPanel = btn.closest('.explorer-preview-panel');
  const contentArea = previewPanel.querySelector('.explorer-preview-content');
  
  // Update tab buttons in header
  previewPanel.querySelectorAll('.preview-tab').forEach(t => t.classList.remove('active'));
  btn.classList.add('active');
  
  // Update tab content
  contentArea.querySelectorAll('.preview-tab-content').forEach(c => c.classList.remove('show'));
  contentArea.querySelector(`[data-tab="${tabName}"]`).classList.add('show');
}

/**
 * Format file size
 */
function formatFileSize(bytes) {
  if (bytes < 1024) return bytes + ' B';
  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
  return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
}

/**
 * Refresh the explorer tree
 */
async function refreshExplorerTree() {
  const btn = document.querySelector('.explorer-refresh-btn');
  if (btn) {
    btn.classList.add('refreshing');
  }
  
  explorerExpandedDirs.clear();
  explorerEventsDelegated = false;
  await loadExplorerTree(explorerCurrentPath);
  
  if (btn) {
    btn.classList.remove('refreshing');
  }
}

/**
 * Open Update CLAUDE.md modal
 */
function openUpdateClaudeMdModal(folderPath) {
  const modal = document.getElementById('updateClaudeMdModal');
  if (!modal) return;

  // Set folder path
  document.getElementById('claudeMdTargetPath').textContent = folderPath;
  document.getElementById('claudeMdTargetPath').dataset.path = folderPath;
  
  // Reset form
  document.getElementById('claudeMdTool').value = 'gemini';
  document.getElementById('claudeMdStrategy').value = 'single-layer';
  
  // Show modal
  modal.classList.remove('hidden');
}

/**
 * Close Update CLAUDE.md modal
 */
function closeUpdateClaudeMdModal() {
  const modal = document.getElementById('updateClaudeMdModal');
  if (modal) {
    modal.classList.add('hidden');
  }
}

/**
 * Execute Update CLAUDE.md
 */
async function executeUpdateClaudeMd() {
  const pathEl = document.getElementById('claudeMdTargetPath');
  const toolSelect = document.getElementById('claudeMdTool');
  const strategySelect = document.getElementById('claudeMdStrategy');
  const executeBtn = document.getElementById('claudeMdExecuteBtn');
  const statusEl = document.getElementById('claudeMdStatus');

  const path = pathEl.dataset.path;
  const tool = toolSelect.value;
  const strategy = strategySelect.value;

  // Update UI
  executeBtn.disabled = true;
  executeBtn.textContent = 'Updating...';
  statusEl.innerHTML = '<div class="status-running">⏳ Running update...</div>';

  try {
    const response = await fetch('/api/update-claude-md', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ path, tool, strategy })
    });

    const result = await response.json();

    if (result.success) {
      statusEl.innerHTML = `<div class="status-success"><i data-lucide="check-circle" class="w-4 h-4 inline text-success"></i> ${escapeHtml(result.message)}</div>`;
      // Refresh tree to update CLAUDE.md indicators
      await refreshExplorerTree();
      if (typeof lucide !== 'undefined') lucide.createIcons();
    } else {
      statusEl.innerHTML = `<div class="status-error"><i data-lucide="x-circle" class="w-4 h-4 inline text-destructive"></i> ${escapeHtml(result.error || 'Update failed')}</div>`;
      if (typeof lucide !== 'undefined') lucide.createIcons();
    }

  } catch (error) {
    statusEl.innerHTML = `<div class="status-error"><i data-lucide="x-circle" class="w-4 h-4 inline text-destructive"></i> ${escapeHtml(error.message)}</div>`;
    if (typeof lucide !== 'undefined') lucide.createIcons();
  } finally {
    executeBtn.disabled = false;
    executeBtn.textContent = 'Execute';
  }
}

// ============================================
// TASK QUEUE FUNCTIONS
// ============================================

/**
 * Toggle task queue panel visibility
 */
function toggleTaskQueue() {
  isTaskQueueVisible = !isTaskQueueVisible;
  const panel = document.getElementById('taskQueuePanel');
  const fab = document.querySelector('.explorer-fab');
  
  if (isTaskQueueVisible) {
    panel.classList.add('show');
    fab.classList.add('active');
  } else {
    panel.classList.remove('show');
    fab.classList.remove('active');
  }
}

/**
 * Update default CLI tool
 */
function updateDefaultCliTool(tool) {
  defaultCliTool = tool;
}

/**
 * Update the FAB badge count
 */
function updateFabBadge() {
  const badge = document.getElementById('fabBadge');
  if (badge) {
    const pendingCount = updateTaskQueue.filter(t => t.status === 'pending' || t.status === 'running').length;
    badge.textContent = pendingCount || '';
    badge.style.display = pendingCount > 0 ? 'flex' : 'none';
  }
}

/**
 * Open add task modal
 */
function openAddTaskModal() {
  const modal = document.getElementById('updateClaudeMdModal');
  if (!modal) return;

  // Set default path to current project
  document.getElementById('claudeMdTargetPath').textContent = explorerCurrentPath;
  document.getElementById('claudeMdTargetPath').dataset.path = explorerCurrentPath;
  
  // Reset form
  document.getElementById('claudeMdTool').value = 'gemini';
  document.getElementById('claudeMdStrategy').value = 'single-layer';
  document.getElementById('claudeMdStatus').innerHTML = '';
  
  // Change button to "Add to Queue"
  const executeBtn = document.getElementById('claudeMdExecuteBtn');
  executeBtn.textContent = 'Add to Queue';
  executeBtn.onclick = addTaskToQueue;
  
  modal.classList.remove('hidden');
}

/**
 * Add task to queue from modal
 */
function addTaskToQueue() {
  const pathEl = document.getElementById('claudeMdTargetPath');
  const toolSelect = document.getElementById('claudeMdTool');
  const strategySelect = document.getElementById('claudeMdStrategy');

  const path = pathEl.dataset.path;
  const tool = toolSelect.value;
  const strategy = strategySelect.value;
  
  addUpdateTask(path, tool, strategy);
  closeUpdateClaudeMdModal();
  
  // Show task queue
  if (!isTaskQueueVisible) {
    toggleTaskQueue();
  }
}

/**
 * Add a task to the update queue
 */
function addUpdateTask(path, tool = 'gemini', strategy = 'single-layer') {
  const task = {
    id: Date.now(),
    path,
    tool,
    strategy,
    status: 'pending', // pending, running, completed, failed
    message: '',
    addedAt: new Date().toISOString()
  };
  
  updateTaskQueue.push(task);
  renderTaskQueue();
  updateFabBadge();
  
  // Enable start button
  document.getElementById('startQueueBtn').disabled = false;
}

/**
 * Add task from folder context (right-click or button)
 */
function addFolderToQueue(folderPath, strategy = 'single-layer') {
  // Use the sidebar queue instead of floating panel
  if (typeof addUpdateTaskToSidebar === 'function') {
    addUpdateTaskToSidebar(folderPath, defaultCliTool, strategy);
  } else {
    // Fallback to local queue
    addUpdateTask(folderPath, defaultCliTool, strategy);

    // Show task queue if not visible
    if (!isTaskQueueVisible) {
      toggleTaskQueue();
    }
  }
}

/**
 * Render the task queue list
 */
function renderTaskQueue() {
  const listEl = document.getElementById('taskQueueList');
  
  if (updateTaskQueue.length === 0) {
    listEl.innerHTML = `
      <div class="task-queue-empty">
        <span>${t('taskQueue.noTasks')}</span>
        <p>${t('taskQueue.noTasksHint')}</p>
      </div>
    `;
    return;
  }
  
  listEl.innerHTML = updateTaskQueue.map(task => {
    const folderName = task.path.split('/').pop() || task.path;
    const strategyLabel = task.strategy === 'multi-layer' 
      ? '<i data-lucide="folder-tree" class="w-3 h-3 inline"></i> ' + t('taskQueue.withSubdirs')
      : '<i data-lucide="file" class="w-3 h-3 inline"></i> ' + t('taskQueue.currentOnly');
    const statusIcon = {
      'pending': '<i data-lucide="clock" class="w-4 h-4"></i>',
      'running': '<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i>',
      'completed': '<i data-lucide="check-circle" class="w-4 h-4 text-success"></i>',
      'failed': '<i data-lucide="x-circle" class="w-4 h-4 text-destructive"></i>'
    }[task.status];
    
    return `
      <div class="task-queue-item status-${task.status}" data-task-id="${task.id}">
        <div class="task-item-header">
          <span class="task-status-icon">${statusIcon}</span>
          <span class="task-folder-name" title="${escapeHtml(task.path)}">${escapeHtml(folderName)}</span>
          ${task.status === 'pending' ? `
            <button class="task-remove-btn" onclick="removeTask(${task.id})" title="Remove">×</button>
          ` : ''}
        </div>
        <div class="task-item-meta">
          <span class="task-strategy">${strategyLabel}</span>
          <span class="task-tool">${task.tool}</span>
        </div>
        ${task.message ? `<div class="task-item-message">${escapeHtml(task.message)}</div>` : ''}
      </div>
    `;
  }).join('');
  
  // Reinitialize Lucide icons
  if (typeof lucide !== 'undefined') lucide.createIcons();
}

/**
 * Remove a task from queue
 */
function removeTask(taskId) {
  updateTaskQueue = updateTaskQueue.filter(t => t.id !== taskId);
  renderTaskQueue();
  updateFabBadge();
  
  // Disable start button if no pending tasks
  const hasPending = updateTaskQueue.some(t => t.status === 'pending');
  document.getElementById('startQueueBtn').disabled = !hasPending;
}

/**
 * Clear completed/failed tasks
 */
function clearCompletedTasks() {
  updateTaskQueue = updateTaskQueue.filter(t => t.status === 'pending' || t.status === 'running');
  renderTaskQueue();
  updateFabBadge();
}

/**
 * Execute a single task asynchronously
 */
async function executeTask(task) {
  const folderName = task.path.split('/').pop() || task.path;
  
  // Update status to running
  task.status = 'running';
  task.message = t('taskQueue.processing');
  renderTaskQueue();
  
  addGlobalNotification('info', `Processing: ${folderName}`, `Strategy: ${task.strategy}, Tool: ${task.tool}`, 'Explorer');
  
  try {
    const response = await fetch('/api/update-claude-md', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        path: task.path,
        tool: task.tool,
        strategy: task.strategy
      })
    });

    const result = await response.json();

    if (result.success) {
      task.status = 'completed';
      task.message = t('taskQueue.updated');
      addGlobalNotification('success', `Completed: ${folderName}`, result.message, 'Explorer');
      return { success: true };
    } else {
      task.status = 'failed';
      task.message = result.error || t('taskQueue.failed');
      addGlobalNotification('error', `Failed: ${folderName}`, result.error || 'Unknown error', 'Explorer');
      return { success: false };
    }
  } catch (error) {
    task.status = 'failed';
    task.message = error.message;
    addGlobalNotification('error', `Error: ${folderName}`, error.message, 'Explorer');
    return { success: false };
  } finally {
    renderTaskQueue();
    updateFabBadge();
  }
}

/**
 * Start processing task queue - executes tasks asynchronously in parallel
 */
async function startTaskQueue() {
  if (isTaskRunning) return;
  
  const pendingTasks = updateTaskQueue.filter(t => t.status === 'pending');
  if (pendingTasks.length === 0) return;
  
  isTaskRunning = true;
  document.getElementById('startQueueBtn').disabled = true;
  
  addGlobalNotification('info', t('taskQueue.startingTasks', { count: pendingTasks.length }), null, 'Explorer');
  
  // Execute all tasks in parallel
  const results = await Promise.all(pendingTasks.map(task => executeTask(task)));
  
  const successCount = results.filter(r => r.success).length;
  const failCount = results.filter(r => !r.success).length;
  
  isTaskRunning = false;
  
  // Summary notification
  addGlobalNotification(
    failCount === 0 ? 'success' : 'warning',
    t('taskQueue.queueCompleted', { success: successCount, failed: failCount }),
    null,
    'Explorer'
  );
  
  // Force refresh notification list to ensure all notifications are displayed
  if (typeof renderGlobalNotifications === 'function') {
    renderGlobalNotifications();
    updateGlobalNotifBadge();
  }
  
  // Re-enable start button if there are pending tasks
  const hasPending = updateTaskQueue.some(t => t.status === 'pending');
  document.getElementById('startQueueBtn').disabled = !hasPending;
  
  // Refresh tree to show updated CLAUDE.md files
  await refreshExplorerTree();
}

