const { ipcRenderer } = require('electron');
const path = require('path');

// DOM Elements
const selectDirBtn = document.getElementById('select-dir-btn');
const selectedDirEl = document.getElementById('selected-dir');
const searchInput = document.getElementById('search-input');
const searchResultsEl = document.getElementById('search-results');
const fileListEl = document.getElementById('file-list');
const showDetailsEl = document.getElementById('show-details');
const progressContainer = document.getElementById('progress-container');
const progressText = document.getElementById('progress-text');
const progressCount = document.getElementById('progress-count');

// Current state
let currentDirectory = null;
let currentFiles = [];
let currentShow = null;
let currentSeasons = [];
let currentEpisodes = [];
let selectedSeasonEpisodeCount = 0;

// Event Listeners
selectDirBtn.addEventListener('click', selectDirectory);
searchInput.addEventListener('input', debounce(searchShows, 300));

// Add click handler for the floating circle (play button) to move all tagged files
document.getElementById('tagged-circle').addEventListener('click', moveAllTaggedFiles);

// Listen for scan progress updates from main process
ipcRenderer.on('scan-progress', (event, { current, total, fileName }) => {
  updateProgress(current, total, fileName);
});

// Listen for auto-select directory message
window.addEventListener('message', (event) => {
  if (event.data.type === 'auto-select-directory') {
    autoSelectDirectory(event.data.directory);
  }
});

// Listen for auto-select directory from main process
ipcRenderer.on('auto-select-directory', (event, directory) => {
  autoSelectDirectory(directory);
});

// Open a specific directory (for folder navigation)
async function openDirectory(directory) {
  try {
    console.log('Opening directory:', directory);
    
    // Set the current directory
    currentDirectory = directory;
    selectedDirEl.textContent = `Selected: ${directory}`;
    
    // Log audit event for directory selection
    logAuditEvent('select_directory', { directory: directory });
    
    // Scan the directory for media files
    await scanDirectory(directory);
  } catch (error) {
    console.error('Error opening directory:', error);
    alert(`Error: ${error.message}`);
  }
}

// Auto-select directory function
async function autoSelectDirectory(directory) {
  try {
    console.log('Auto-selecting directory:', directory);
    
    // Set the current directory
    currentDirectory = directory;
    selectedDirEl.textContent = `Selected: ${directory}`;
    
    // Log audit event for directory selection
    logAuditEvent('select_directory', { directory: directory });
    
    // Scan the directory for media files
    await scanDirectory(directory);
  } catch (error) {
    console.error('Error auto-selecting directory:', error);
    alert(`Error: ${error.message}`);
  }
}

// Select directory function
async function selectDirectory() {
  try {
    // Use IPC to handle directory selection
    const result = await ipcRenderer.invoke('select-directory');
    
    if (result.success) {
      const directory = result.directory;
      currentDirectory = directory;
      selectedDirEl.textContent = `Selected: ${directory}`;
      
      // Log audit event for directory selection
      logAuditEvent('select_directory', { directory: directory });
      
      // Scan the directory for media files
      await scanDirectory(directory);
    } else {
      throw new Error(result.error);
    }
  } catch (error) {
    console.error('Error selecting directory:', error);
    alert(`Error: ${error.message}`);
  }
}

// Function to log audit events to the main process
function logAuditEvent(action, details) {
  if (currentDirectory) {
    ipcRenderer.invoke('log-audit-event', {
      directoryPath: currentDirectory,
      action: action,
      details: details
    }).catch(error => {
      console.error('Failed to log audit event:', error);
    });
  }
}

// Scan directory for media files
async function scanDirectory(directoryPath) {
  try {
    // Show progress bar
    showProgress();
    
    const result = await ipcRenderer.invoke('scan-directory', directoryPath);
    
    // Hide progress bar
    hideProgress();
    
    if (result.success) {
      currentFiles = result.files;
      displayFiles(currentFiles);
    } else {
      throw new Error(result.error);
    }
  } catch (error) {
    hideProgress();
    console.error('Error scanning directory:', error);
    alert(`Error scanning directory: ${error.message}`);
  }
}

// Progress spinner functions
function showProgress() {
  if (progressContainer) {
    progressContainer.style.display = 'block';
    progressText.textContent = 'Scanning directory...';
    progressCount.textContent = '';
  }
}

function hideProgress() {
  if (progressContainer) {
    progressContainer.style.display = 'none';
  }
}

function updateProgress(current, total, fileName) {
  if (progressContainer) {
    const displayCurrent = current + 1;
    progressText.textContent = `Processing: ${fileName}`;
    progressCount.textContent = `${displayCurrent} of ${total} files`;
  }
}

// Display files in the UI
function displayFiles(files) {
  fileListEl.innerHTML = '';
  
  if (files.length === 0) {
    fileListEl.innerHTML = '<p>No media files found in this directory.</p>';
    return;
  }
  
  // Separate folders from media files
  const folders = files.filter(f => f.isFolder);
  const mediaFiles = files.filter(f => !f.isFolder);
  
  // Track episode number for media files only
  let episodeNumber = 1;
  
  // Display folders first (not draggable, no episode number)
  folders.forEach(file => {
    const fileItem = document.createElement('div');
    fileItem.className = 'file-item folder-item';
    fileItem.innerHTML = `
      <div style="font-size: 18px; margin-right: 10px;">📁</div>
      <div class="file-name folder-name" data-file-path="${file.path}">${file.name}</div>
      <div class="file-duration"></div>
      <div class="file-quality"></div>
      <div class="file-fps"></div>
      <div class="file-tags"></div>
    `;
    
    // Add click handler to navigate into folder
    fileItem.addEventListener('click', function() {
      openDirectory(file.path);
    });
    
    fileListEl.appendChild(fileItem);
  });
  
  // Display media files with episode numbers and drag/drop
  mediaFiles.forEach((file, index) => {
    const fileItem = document.createElement('div');
    fileItem.className = 'file-item';
    fileItem.draggable = true;
    fileItem.dataset.index = index;
    fileItem.dataset.filePath = file.path;
    
    // Use actual duration from file metadata
    const duration = file.duration || '00:00';
    const quality = file.quality || 'unknown';
    const fps = file.fps || 'unknown';
    
    // Add label for problematic files
    const problemLabel = file.isProblematic ? '<span class="problematic-label">⚠️</span> ' : '';
    
    fileItem.innerHTML = `
      <div class="drag-handle">⋮⋮</div>
      <div class="episode-number" data-episode="${episodeNumber}">${episodeNumber}</div>
      <div class="file-name" data-file-path="${file.path}">${file.name}</div>
      <div class="file-duration">${duration}</div>
      <div class="file-quality">${quality}</div>
      <div class="file-fps">${fps}</div>
      <div class="file-tags">
        <span class="tag-icon extra-tag" data-file-path="${file.path}" title="Mark as Extra">🏷️</span>
        <span class="tag-icon commentary-tag" data-file-path="${file.path}" title="Add Commentary">💬</span>
        <span class="tag-icon delete-tag" data-file-path="${file.path}" title="Mark for Deletion">🗑️</span>
        <span class="video-preview-btn" data-file-path="${file.path}" title="Preview Video">🎬</span>
        <button class="play-button" style="opacity: 0.3; cursor: default; flex-shrink: 0;" data-file-path="${file.path}" disabled>▶️</button>
      </div>
    `;
    
    // Add drag and drop event listeners
    fileItem.addEventListener('dragstart', handleDragStart);
    fileItem.addEventListener('dragend', handleDragEnd);
    fileItem.addEventListener('dragover', handleDragOver);
    fileItem.addEventListener('dragleave', handleDragLeave);
    fileItem.addEventListener('drop', handleDrop);
    
    // Add click event to make file name editable
    const fileNameElement = fileItem.querySelector('.file-name');
    fileNameElement.addEventListener('click', function(e) {
      e.stopPropagation();
      makeEditable(e.target);
    });
    
    // Add hover effects for tags
    const tagIcons = fileItem.querySelectorAll('.tag-icon');
    tagIcons.forEach(icon => {
      icon.addEventListener('mouseenter', function() {
        this.style.opacity = '1';
        this.style.transform = 'scale(1.1)';
      });
      
      icon.addEventListener('mouseleave', function() {
        this.style.opacity = '0.7';
        this.style.transform = 'scale(1)';
      });
      
      // Add click handlers for tagging
      icon.addEventListener('click', function(e) {
        e.stopPropagation(); // Prevent event bubbling
        const filePath = this.dataset.filePath;
        let tagType;
        if (this.classList.contains('extra-tag')) {
          tagType = 'extra';
        } else if (this.classList.contains('commentary-tag')) {
          tagType = 'commentary';
        } else if (this.classList.contains('delete-tag')) {
          tagType = 'delete';
        } else {
          return;
        }
        
        // Check if file is already tagged with this type
        const fileItem = this.closest('.file-item');
        const isTagged = fileItem.hasAttribute('data-tagged-' + tagType);
        
        if (isTagged) {
          // Untag the file
          untagFile(filePath, tagType);
        } else {
          // If tagging this type, untag any existing tag of other types
          ['extra', 'commentary', 'delete'].forEach(otherType => {
            if (otherType !== tagType && fileItem.hasAttribute('data-tagged-' + otherType)) {
              untagFile(filePath, otherType);
            }
          });
          // Tag the file
          addTagToEpisode(filePath, tagType);
        }
      });
    });
    
    // Add click handler for preview button
    const previewBtn = fileItem.querySelector('.video-preview-btn');
    previewBtn.addEventListener('click', function(e) {
      e.stopPropagation(); // Prevent event bubbling
      const filePath = this.dataset.filePath;
      openVideoPreview(filePath);
    });
    
    // Add click handler for play button
    const playButton = fileItem.querySelector('.play-button');
    playButton.addEventListener('click', async function(e) {
      e.stopPropagation();
      console.log('Play button clicked for file:', file.path);
      
      // Get the file item and tag type
      const fileItemEl = this.closest('.file-item');
      let tagType = null;
      if (fileItemEl.hasAttribute('data-tagged-extra')) {
        tagType = 'extra';
      } else if (fileItemEl.hasAttribute('data-tagged-commentary')) {
        tagType = 'commentary';
      } else if (fileItemEl.hasAttribute('data-tagged-delete')) {
        tagType = 'delete';
      }
      
      console.log('Tag type determined:', tagType);
      if (tagType) {
        // Move the file to the appropriate folder
        const result = await moveTaggedFile(file.path, tagType);
        if (result.success) {
          // Remove the item from the file list after successful move
          fileItemEl.remove();
          updateTaggedCount();
          updateEpisodeNumbers();
          checkEpisodeCountMatch();
        }
      } else {
        console.log('No tag type found for file');
      }
    });
    
    fileListEl.appendChild(fileItem);
    episodeNumber++;
  });
  
  // Check if episode count matches after displaying files
  checkEpisodeCountMatch();
}

// Drag and drop handlers
let draggedItem = null;

function handleDragStart(e) {
  draggedItem = this;
  this.classList.add('dragging');
  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('text/plain', this.dataset.index);
}

function handleDragEnd(e) {
  this.classList.remove('dragging');
  // Remove drag-over class from all items
  document.querySelectorAll('.file-item').forEach(item => {
    item.classList.remove('drag-over');
  });
  draggedItem = null;
}

function handleDragOver(e) {
  e.preventDefault();
  e.dataTransfer.dropEffect = 'move';
  
  // Only show drag-over for non-folder items
  if (!this.classList.contains('folder-item') && this !== draggedItem) {
    this.classList.add('drag-over');
  }
}

function handleDragLeave(e) {
  this.classList.remove('drag-over');
}

function handleDrop(e) {
  e.preventDefault();
  this.classList.remove('drag-over');
  
  if (this === draggedItem || this.classList.contains('folder-item')) return;
  
  // Get all media file items (not folders)
  const fileItems = Array.from(fileListEl.querySelectorAll('.file-item:not(.folder-item)'));
  const draggedIndex = fileItems.indexOf(draggedItem);
  const dropIndex = fileItems.indexOf(this);
  
  if (draggedIndex === -1 || dropIndex === -1) return;
  
  // Move the dragged item in the DOM
  if (draggedIndex < dropIndex) {
    this.parentNode.insertBefore(draggedItem, this.nextSibling);
  } else {
    this.parentNode.insertBefore(draggedItem, this);
  }
  
  // Update episode numbers
  updateEpisodeNumbers();
}

function updateEpisodeNumbers() {
  const fileItems = fileListEl.querySelectorAll('.file-item:not(.folder-item)');
  let episodeNum = 1;
  
  fileItems.forEach(item => {
    const episodeEl = item.querySelector('.episode-number');
    if (episodeEl) {
      episodeEl.textContent = episodeNum;
      episodeEl.dataset.episode = episodeNum;
      episodeNum++;
    }
  });
}

// Make a file name editable
function makeEditable(element) {
  // Prevent editing if already in edit mode
  if (element.contentEditable === 'true') return;
  
  // Store original text
  const originalText = element.textContent;
  
  // Make element editable
  element.contentEditable = 'true';
  element.focus();
  element.classList.add('editing');
  
  // Select all text when editing starts
  const range = document.createRange();
  range.selectNodeContents(element);
  const selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
  
  // Handle saving when user finishes editing
  const saveEdit = async function() {
    if (element.textContent.trim() !== originalText.trim()) {
      // Send request to main process to rename the file
      try {
        const result = await ipcRenderer.invoke('rename-file', { 
          oldPath: element.dataset.filePath, 
          newName: element.textContent.trim() 
        });
        
        if (result.success) {
          console.log('File renamed successfully:', result.message);
          // Update the file name in the UI to reflect the change
          element.textContent = element.textContent.trim();
          
          // Also update the data attribute to reflect the new path
          const oldPath = element.dataset.filePath;
          const newPath = oldPath.substring(0, oldPath.lastIndexOf(path.sep) + 1) + element.textContent.trim();
          element.dataset.filePath = newPath;
        } else {
          console.error('Failed to rename file:', result.error);
          // Revert to original name on failure
          element.textContent = originalText;
        }
      } catch (error) {
        console.error('Error renaming file:', error);
        // Revert to original name on error
        element.textContent = originalText;
      }
    }
    
    // Clean up
    element.contentEditable = 'false';
    element.classList.remove('editing');
  };
  
  // Save on Enter key or blur
  element.addEventListener('keydown', function(e) {
    if (e.key === 'Enter') {
      e.preventDefault();
      saveEdit();
    }
  });
  
  element.addEventListener('blur', saveEdit);
}

// Function to handle tagging
function addTagToEpisode(filePath, tagType) {
  console.log(`Tagging file ${filePath} as ${tagType}`);
  
  // Find the file item in the UI
  const fileItems = document.querySelectorAll('.file-item');
  fileItems.forEach(item => {
    const fileNameElement = item.querySelector('.file-name');
    if (fileNameElement && fileNameElement.dataset.filePath === filePath) {
      // Add visual indication of tagging using data attribute for CSS styling
      const tagIcon = item.querySelector(`.${tagType}-tag`);
      if (tagIcon) {
        // Set color based on tag type
        let tagColor;
        if (tagType === 'extra') {
          tagColor = '#FFD700'; // Yellow
        } else if (tagType === 'commentary') {
          tagColor = '#17a2b8'; // Teal
        } else if (tagType === 'delete') {
          tagColor = '#dc3545'; // Red
        }
        
        // Make the icon fully saturated and highlight
        tagIcon.style.opacity = '1';
        tagIcon.style.filter = 'none';
        tagIcon.style.color = tagColor;
        tagIcon.style.textShadow = `0 0 15px ${tagColor}`;
        tagIcon.style.transform = 'scale(1.3)';
        
        // Add a data attribute to track that this file is tagged
        item.setAttribute('data-tagged-' + tagType, 'true');
        
        // Enable the play button
        const playButton = item.querySelector('.play-button');
        if (playButton) {
          playButton.style.opacity = '1';
          playButton.style.cursor = 'pointer';
          playButton.disabled = false;
          playButton.style.pointerEvents = 'auto';
        }
      }
    }
  });
  
  // Update the tagged count display
  updateTaggedCount();
  
  // In a real implementation, this would save to a database or file
  // For now, we'll just log to console
  console.log(`File ${filePath} tagged as ${tagType} - would be saved in real implementation`);
}

// Function to handle moving tagged files (also logs audit)
function moveTaggedFile(filePath, tagType) {
  console.log(`[RENDERER] Moving file ${filePath} to ${tagType} folder`);
  
  // Log audit event
  logAuditEvent('move_file', {
    filePath: filePath,
    folderName: tagType
  });
  
  // Send request to main process to move the file
  return ipcRenderer.invoke('move-file-to-folder', {
    filePath: filePath,
    folderName: tagType
  }).then(result => {
    console.log(`[RENDERER] Move result:`, result);
    if (result.success) {
      console.log(`[RENDERER] File moved successfully to ${tagType} folder`);
      // Show visual feedback that directory was created
      showDirectoryFeedback(tagType);
      return { success: true, filePath };
    } else {
      console.error(`[RENDERER] Failed to move file: ${result.error}`);
      return { success: false, error: result.error, filePath };
    }
  }).catch(error => {
    console.error('[RENDERER] Error moving file:', error);
    return { success: false, error: error.message, filePath };
  });
}

// Function to move all tagged files at once
async function moveAllTaggedFiles() {
  const taggedItems = document.querySelectorAll('.file-item[data-tagged-extra], .file-item[data-tagged-commentary], .file-item[data-tagged-delete]');
  
  if (taggedItems.length === 0) {
    console.log('[RENDERER] No tagged files to move');
    return;
  }
  
  console.log(`[RENDERER] Moving ${taggedItems.length} tagged files`);
  
  // Visual feedback - change circle color while processing
  const taggedCircle = document.getElementById('tagged-circle');
  if (taggedCircle) {
    taggedCircle.style.backgroundColor = '#ffc107';
    taggedCircle.style.pointerEvents = 'none';
  }
  
  const results = [];
  for (const item of taggedItems) {
    const filePath = item.querySelector('.file-name').dataset.filePath;
    let tagType;
    if (item.hasAttribute('data-tagged-extra')) {
      tagType = 'extra';
    } else if (item.hasAttribute('data-tagged-commentary')) {
      tagType = 'commentary';
    } else if (item.hasAttribute('data-tagged-delete')) {
      tagType = 'delete';
    }
    
    const result = await moveTaggedFile(filePath, tagType);
    results.push(result);
    
    if (result.success) {
      // Remove the item from the file list after successful move
      item.remove();
    }
  }
  
  // Reset circle appearance
  if (taggedCircle) {
    taggedCircle.style.backgroundColor = '';
    taggedCircle.style.pointerEvents = '';
  }
  
  // Update the tagged count after all moves
  updateTaggedCount();
  updateEpisodeNumbers();
  checkEpisodeCountMatch();
  
  // Summary of results
  const successful = results.filter(r => r.success).length;
  const failed = results.filter(r => !r.success).length;
  
  if (failed > 0) {
    alert(`Moved ${successful} files. ${failed} files failed to move.`);
  } else if (successful > 0) {
    console.log(`[RENDERER] Successfully moved all ${successful} files`);
  }
}

// Function to display created folders in UI
function displayCreatedFolder(folderName) {
  // Check if folder entry already exists
  const existingFolder = document.querySelector(`.folder-item[data-folder-name="${folderName}"]`);
  if (existingFolder) {
    // Update the file count
    const countEl = existingFolder.querySelector('.folder-count');
    if (countEl) {
      const currentCount = parseInt(countEl.textContent) || 0;
      countEl.textContent = currentCount + 1;
    }
    return;
  }
  
  // Create folder item element
  const folderItem = document.createElement('div');
  folderItem.className = 'folder-item';
  folderItem.setAttribute('data-folder-name', folderName);
  
  let displayName, folderIcon, folderColor;
  if (folderName === 'extra') {
    displayName = 'extras';
    folderIcon = '📁';
    folderColor = '#FFD700';
  } else if (folderName === 'commentary') {
    displayName = 'commentary';
    folderIcon = '💬';
    folderColor = '#17a2b8';
  } else if (folderName === 'delete') {
    displayName = 'delete';
    folderIcon = '🗑️';
    folderColor = '#dc3545';
  }
  
  folderItem.innerHTML = `
    <div class="folder-icon" style="font-size: 24px;">${folderIcon}</div>
    <div class="folder-name" style="font-weight: bold; color: ${folderColor};">${displayName}</div>
    <div class="folder-count" style="background-color: ${folderColor}; color: white; border-radius: 12px; padding: 2px 8px; font-size: 12px;">1</div>
  `;
  
  folderItem.style.cssText = `
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    margin-bottom: 8px;
    background-color: #16213e;
    border: 2px solid ${folderColor};
    border-radius: 8px;
    cursor: pointer;
  `;
  
  // Insert at the top of the file list
  if (fileListEl.firstChild) {
    fileListEl.insertBefore(folderItem, fileListEl.firstChild);
  } else {
    fileListEl.appendChild(folderItem);
  }
  
  console.log(`Folder "${displayName}" displayed in UI`);
}

// Function to show visual feedback for directory creation
function showDirectoryFeedback(folderName) {
  console.log(`Directory "${folderName}" created and file moved`);
  // Display the folder in the UI
  displayCreatedFolder(folderName);
}

// Function to handle untagging
function untagFile(filePath, tagType) {
  console.log(`Untagging file ${filePath} from ${tagType}`);
  
  // Find the file item in the UI
  const fileItems = document.querySelectorAll('.file-item');
  fileItems.forEach(item => {
    const fileNameElement = item.querySelector('.file-name');
    if (fileNameElement && fileNameElement.dataset.filePath === filePath) {
      // Remove visual indication of tagging
      const tagIcon = item.querySelector(`.${tagType}-tag`);
      if (tagIcon) {
        // Reset to original appearance
        tagIcon.style.opacity = '0.7';
        tagIcon.style.filter = 'none';
        tagIcon.style.color = ''; // Reset to default color
        tagIcon.style.textShadow = 'none';
        tagIcon.style.transform = 'scale(1)';
        tagIcon.style.boxShadow = 'none';
        
        // Remove the data attribute
        item.removeAttribute('data-tagged-' + tagType);
        
        // Disable the play button when untagging (only if no other tags)
        const hasOtherTags = item.hasAttribute('data-tagged-extra') || 
                            item.hasAttribute('data-tagged-commentary') || 
                            item.hasAttribute('data-tagged-delete');
        if (!hasOtherTags) {
          const playButton = item.querySelector('.play-button');
          if (playButton) {
            playButton.style.opacity = '0.3';
            playButton.style.cursor = 'default';
            playButton.disabled = true;
            playButton.style.pointerEvents = 'none';
          }
        }
      }
    }
  });
  
  // Update the tagged count display
  updateTaggedCount();
  
  // In a real implementation, this would remove from database or file
  // For now, we'll just log to console
  console.log(`File ${filePath} untagged from ${tagType} - would be removed in real implementation`);
}

// Function to update the tagged items count display
function updateTaggedCount() {
  const taggedItems = document.querySelectorAll('.file-item[data-tagged-extra], .file-item[data-tagged-commentary], .file-item[data-tagged-delete]');
  const count = taggedItems.length;
  const taggedCircle = document.getElementById('tagged-circle');
  const taggedCount = document.getElementById('tagged-count');
  
  if (taggedCount) {
    taggedCount.textContent = count;
  }
  
  // Animate the circle position based on count
  if (taggedCircle) {
    if (count === 0) {
      // Move down out of sight
      taggedCircle.style.transform = 'translateY(100px)';
      taggedCircle.style.bottom = '-100px';
    } else {
      // Move up to show count (appears at the same spot at bottom right)
      taggedCircle.style.transform = 'translateY(0)';
      taggedCircle.style.bottom = '20px';
    }
  }
}

// Function to check if media file count matches selected season episode count
function checkEpisodeCountMatch() {
  const fileList = document.getElementById('file-list');
  // Count only actual media files (not folders)
  const mediaFiles = document.querySelectorAll('.file-item:not(.folder-item)');
  const mediaCount = mediaFiles.length;
  
  if (selectedSeasonEpisodeCount > 0 && mediaCount === selectedSeasonEpisodeCount) {
    // Perfect match - add green outline
    fileList.style.border = '3px solid #28a745';
    fileList.style.boxShadow = '0 0 15px rgba(40, 167, 69, 0.4)';
  } else {
    // No match or no season selected - remove green outline
    fileList.style.border = '';
    fileList.style.boxShadow = '';
  }
}

// Initialize tagged count on page load
document.addEventListener('DOMContentLoaded', function() {
  updateTaggedCount();
});

// Function to log audit events to the directory's .audit file
function logAuditEvent(action, details) {
  // This function will be called from the renderer process to notify main process
  console.log(`[AUDIT] ${action}:`, details);
  // In a real implementation, this would send an IPC message to main process to log audit
}

// Search shows function
async function searchShows() {
  const query = searchInput.value.trim();
  
  if (query.length < 2) {
    searchResultsEl.innerHTML = '';
    return;
  }
  
  try {
    const result = await ipcRenderer.invoke('search-tvdb', query);
    
    if (result.success) {
      displaySearchResults(result.results);
    } else {
      throw new Error(result.error);
    }
  } catch (error) {
    console.error('Error searching shows:', error);
    searchResultsEl.innerHTML = `<p>Error: ${error.message}</p>`;
  }
}

// Clear search results when a show is selected
function clearSearchResults() {
  searchResultsEl.innerHTML = '';
}

// Test TVDB API connectivity
async function testTVDBAPI() {
  try {
    const result = await ipcRenderer.invoke('test-tvdb-api');
    console.log('TVDB API Test:', result);
    if (result.success) {
      console.log('TVDB API is working:', result.message);
      alert('TVDB API Test Successful!\n' + result.message);
    } else {
      console.error('TVDB API test failed:', result.error);
      alert('TVDB API Test Failed!\n' + result.error);
    }
  } catch (error) {
    console.error('Error testing TVDB API:', error);
    alert('Error testing TVDB API: ' + error.message);
  }
}

// Add a test button to the UI (you can add this to the HTML or call it manually)
// For now, we'll just make it available in the console
console.log('TVDB API test function available: testTVDBAPI()');

// Debug function to log problematic file info
async function debugProblematicFile(filePath) {
  try {
    const result = await ipcRenderer.invoke('log-file-info', filePath);
    if (result.success) {
      console.log('File info:', result.fileInfo);
    } else {
      console.error('Failed to get file info:', result.error);
    }
  } catch (error) {
    console.error('Error debugging file:', error);
  }
}

// Display search results
function displaySearchResults(results) {
  searchResultsEl.innerHTML = '';
  
  if (results.length === 0) {
    searchResultsEl.innerHTML = '<p style="color: #888; text-align: center; padding: 10px;">No shows found.</p>';
    return;
  }
  
  results.forEach(show => {
    const resultItem = document.createElement('div');
    resultItem.className = 'search-result-item';
    
    // Create a more detailed display with separate elements
    const showName = show.seriesName || show.name;
    const showYear = show.firstAired ? show.firstAired.split('-')[0] : '';
    
    resultItem.innerHTML = `
      <div class="show-name">${showName}</div>
      ${showYear ? `<div class="show-year">${showYear}</div>` : ''}
    `;
    
    resultItem.addEventListener('click', () => selectShow(show));
    searchResultsEl.appendChild(resultItem);
  });
}

// Select a show and display more details
async function selectShow(show) {
  console.log('Selected show:', show);
  currentShow = show;
  
  // Clear search results when a show is selected
  clearSearchResults();
  
  // Display show title
  document.getElementById('show-title').textContent = show.seriesName || show.name;
  
  // Fetch show details including seasons
  try {
    const result = await ipcRenderer.invoke('get-show-details', show.id);
    
    if (result.success && result.data) {
      const showData = result.data;
      currentSeasons = showData.seasons || [];
      
      // Display seasons - since we're not getting seasons from the API directly,
      // we'll show a message indicating we need to fetch seasons separately
      if (currentSeasons.length === 0) {
        document.getElementById('seasons-container').innerHTML = '<p>Seasons will be loaded when you click on a season.</p>';
      } else {
        displaySeasons(currentSeasons);
      }
    } else {
      console.error('Failed to fetch show details:', result.error);
      document.getElementById('seasons-container').innerHTML = '<p>Error loading seasons: ' + (result.error || 'Unknown error') + '</p>';
    }
  } catch (error) {
    console.error('Error fetching show details:', error);
    document.getElementById('seasons-container').innerHTML = '<p>Error loading seasons: ' + error.message + '</p>';
  }
}

// Display seasons with episode counts
function displaySeasons(seasons) {
  const seasonsContainer = document.getElementById('seasons-container');
  seasonsContainer.innerHTML = '';
  
  if (!seasons || seasons.length === 0) {
    seasonsContainer.innerHTML = '<p style="color: #888;">No seasons available.</p>';
    return;
  }
  
  seasons.forEach(season => {
    const seasonItem = document.createElement('div');
    seasonItem.className = 'season-item';
    
    // Format season display with episode count
    let seasonDisplay = `Season ${season.number}`;
    if (season.type && season.type !== 'Unknown') {
      seasonDisplay += ` (${season.type})`;
    }
    
    const episodeCount = season.episodeCount || 0;
    
    seasonItem.innerHTML = `
      <div style="display: flex; justify-content: space-between; align-items: center;">
        <span>${seasonDisplay}</span>
        <span style="background-color: #e94560; color: white; padding: 4px 8px; border-radius: 12px; font-size: 11px;">
          ${episodeCount} eps
        </span>
      </div>
    `;
    
    // Add click event to fetch episodes
    seasonItem.addEventListener('click', () => {
      // Remove selected class from all seasons
      document.querySelectorAll('.season-item').forEach(item => item.classList.remove('selected'));
      // Add selected class to clicked season
      seasonItem.classList.add('selected');
      fetchAndDisplayEpisodes(currentShow.id, season.number);
    });
    
    seasonsContainer.appendChild(seasonItem);
  });
}

// Fetch and display episodes for a season
async function fetchAndDisplayEpisodes(showId, seasonNumber) {
  try {
    // Show loading message while fetching
    document.getElementById('seasons-container').innerHTML = '<p>Loading episodes...</p>';
    
    const result = await ipcRenderer.invoke('get-season-episodes', showId, seasonNumber);
    
    if (result.success && result.data) {
      const episodes = result.data.episodes || [];
      displayEpisodes(episodes);
    } else {
      console.error('Failed to fetch episodes:', result.error);
      document.getElementById('seasons-container').innerHTML = '<p>Error loading episodes: ' + (result.error || 'Unknown error') + '</p>';
    }
  } catch (error) {
    console.error('Error fetching episodes:', error);
    // Show a more user-friendly error message
    document.getElementById('seasons-container').innerHTML = `
      <div style="padding: 10px; background-color: #f8d7da; color: #721c24; border-radius: 4px;">
        <p>Error loading episodes: ${error.message || 'Failed to load episodes'}</p>
        <p style="font-size: 12px; margin-top: 5px;">Note: This may be due to API limitations with the TVDB v4 API.</p>
      </div>
    `;
  }
}

// Display episodes in clean table format
function displayEpisodes(episodes) {
  const seasonsContainer = document.getElementById('seasons-container');
  seasonsContainer.innerHTML = '';
  
  if (!episodes || episodes.length === 0) {
    seasonsContainer.innerHTML = '<p style="color: #888;">No episodes available.</p>';
    selectedSeasonEpisodeCount = 0;
    checkEpisodeCountMatch();
    return;
  }
  
  // Store the episode count for this season
  selectedSeasonEpisodeCount = episodes.length;
  checkEpisodeCountMatch();
  
  // Create a back button to return to seasons
  const backButton = document.createElement('div');
  backButton.className = 'season-item';
  backButton.innerHTML = '← Back to Seasons';
  backButton.addEventListener('click', () => {
    selectedSeasonEpisodeCount = 0;
    checkEpisodeCountMatch();
    displaySeasons(currentSeasons);
  });
  seasonsContainer.appendChild(backButton);
  
  // Create episodes container
  const episodesContainer = document.createElement('div');
  episodesContainer.id = 'episodes-container';
  
  episodes.forEach(episode => {
    const episodeRow = document.createElement('div');
    episodeRow.className = 'episode-item';
    
    // Format episode display
    const episodeName = episode.name || 'Untitled';
    const episodeRuntime = episode.runtime ? `${episode.runtime}m` : '';
    
    episodeRow.innerHTML = `
      <div style="display: flex; justify-content: space-between; align-items: center;">
        <span><strong>E${episode.number}</strong> ${episodeName}</span>
        ${episodeRuntime ? `<span style="color: #888; font-size: 11px;">${episodeRuntime}</span>` : ''}
      </div>
    `;
    
    episodesContainer.appendChild(episodeRow);
  });
  
  seasonsContainer.appendChild(episodesContainer);
  
  // Also update the main file list to show episode matching information
  updateFileListWithEpisodeInfo(episodes);
}

// Enhanced function to create a more integrated view
function createIntegratedEpisodeFileView(episodes) {
  // This function would create a more integrated view showing both files and episodes
  // For now, we're enhancing the existing functionality to better align the views
  
  // Add a section that shows how files might align with episodes
  const fileListContainer = document.getElementById('file-list');
  
  // Create a section showing the relationship
  const relationshipSection = document.createElement('div');
  relationshipSection.style.marginTop = '15px';
  relationshipSection.style.padding = '12px';
  relationshipSection.style.backgroundColor = '#fff8e1';
  relationshipSection.style.border = '1px solid #ffd54f';
  relationshipSection.style.borderRadius = '6px';
  relationshipSection.innerHTML = `
    <h4 style="margin-top: 0; color: #ff9800;">File-Episode Relationship</h4>
    <p style="font-size: 14px; margin: 5px 0;">
      <strong>Matching Strategy:</strong> Files are matched to episodes based on naming patterns.
    </p>
    <p style="font-size: 14px; margin: 5px 0;">
      <strong>Example:</strong> "Show.S01E01.Title.mp4" matches Episode 1 of Season 1.
    </p>
    <p style="font-size: 14px; margin: 5px 0;">
      <strong>Status:</strong> ${currentFiles.length} files in directory, ${episodes.length} episodes available.
    </p>
  `;
  
  // Insert this section after the episode info
  const episodeInfo = fileListContainer.querySelector('.episode-info');
  if (episodeInfo) {
    fileListContainer.insertBefore(relationshipSection, episodeInfo.nextSibling);
  }
}

// Update file list to show episode matching information
function updateFileListWithEpisodeInfo(episodes) {
  // When we have episodes, we want to show basic episode information
  if (currentFiles && currentFiles.length > 0 && episodes && episodes.length > 0) {
    console.log('Updating file list with episode info for', episodes.length, 'episodes');
    
    // Create a simple note about episode availability
    const fileListContainer = document.getElementById('file-list');
    
    // Add a simple note about episodes
    const episodeNote = document.createElement('div');
    episodeNote.style.marginTop = '15px';
    episodeNote.style.padding = '10px';
    episodeNote.style.backgroundColor = '#e7f3ff';
    episodeNote.style.border = '1px solid #b3d9ff';
    episodeNote.style.borderRadius = '5px';
    episodeNote.style.fontSize = '14px';
    episodeNote.innerHTML = `
      <strong>Episode Information:</strong> 
      ${episodes.length} episodes available for this show.
      <br><small>Episode details are displayed in the sidebar.</small>
    `;
    
    // Add this note to the file list container
    if (fileListContainer.firstChild) {
      fileListContainer.insertBefore(episodeNote, fileListContainer.firstChild);
    } else {
      fileListContainer.appendChild(episodeNote);
    }
  }
}

// Debounce function for search input
function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

// Modal element for video preview
let videoPreviewModal = null;

// Initialize the application
console.log('Movie Mapper application initialized');

// Function to open video preview modal
function openVideoPreview(filePath) {
  console.log('Opening video preview for:', filePath);
  
  // Create modal if it doesn't exist
  if (!videoPreviewModal) {
    createVideoPreviewModal();
  }
  
  // Show the modal
  videoPreviewModal.style.display = 'block';
  
  // Load video content
  loadVideoPreview(filePath);
}

// Function to create video preview modal
function createVideoPreviewModal() {
  // Create modal container
  videoPreviewModal = document.createElement('div');
  videoPreviewModal.id = 'video-preview-modal';
  videoPreviewModal.style.cssText = `
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    overflow: auto;
  `;
  
  // Create modal content
  const modalContent = document.createElement('div');
  modalContent.style.cssText = `
    position: relative;
    max-width: 90%;
    max-height: 90%;
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    margin: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  `;
  
  // Create close button
  const closeButton = document.createElement('span');
  closeButton.innerHTML = '&times;';
  closeButton.style.cssText = `
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 30px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
    transition: color 0.3s;
  `;
  
  closeButton.addEventListener('mouseenter', function() {
    this.style.color = '#000';
  });
  
  closeButton.addEventListener('click', function() {
    videoPreviewModal.style.display = 'none';
  });
  
  // Create video container
  const videoContainer = document.createElement('div');
  videoContainer.id = 'video-preview-container';
  videoContainer.style.cssText = `
    text-align: center;
    margin-bottom: 15px;
  `;
  
  // Create file info display
  const fileInfo = document.createElement('div');
  fileInfo.id = 'video-preview-file-info';
  fileInfo.style.cssText = `
    text-align: center;
    margin-bottom: 15px;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 5px;
    font-size: 14px;
  `;
  
  // Create loading indicator
  const loadingIndicator = document.createElement('div');
  loadingIndicator.id = 'video-preview-loading';
  loadingIndicator.textContent = 'Loading video preview...';
  loadingIndicator.style.cssText = `
    text-align: center;
    padding: 20px;
    font-size: 16px;
    color: #666;
  `;
  
  // Assemble modal
  modalContent.appendChild(closeButton);
  modalContent.appendChild(fileInfo);
  modalContent.appendChild(videoContainer);
  modalContent.appendChild(loadingIndicator);
  videoPreviewModal.appendChild(modalContent);
  
  // Add click outside to close
  videoPreviewModal.addEventListener('click', function(e) {
    if (e.target === videoPreviewModal) {
      videoPreviewModal.style.display = 'none';
    }
  });
  
  // Add to body
  document.body.appendChild(videoPreviewModal);
}

// Function to load video preview
async function loadVideoPreview(filePath) {
  const fileInfo = document.getElementById('video-preview-file-info');
  const videoContainer = document.getElementById('video-preview-container');
  const loadingIndicator = document.getElementById('video-preview-loading');
  
  // Show loading
  loadingIndicator.style.display = 'block';
  videoContainer.innerHTML = '';
  fileInfo.innerHTML = `<strong>Loading:</strong> ${filePath.split('/').pop()}`;
  
  try {
    // Check if file exists
    const fs = require('fs');
    if (!fs.existsSync(filePath)) {
      throw new Error('File not found');
    }
    
    // Get file stats for info
    const stats = fs.statSync(filePath);
    const fileName = filePath.split('/').pop();
    
    // Update file info
    fileInfo.innerHTML = `
      <strong>File:</strong> ${fileName}<br>
      <strong>Size:</strong> ${(stats.size / (1024 * 1024)).toFixed(2)} MB<br>
      <strong>Path:</strong> ${filePath}
    `;
    
    // For MKV files, open directly in default player
    const ext = filePath.toLowerCase().split('.').pop();
    if (ext === 'mkv') {
      // Close the modal and open in default player directly
      videoPreviewModal.style.display = 'none';
      ipcRenderer.invoke('open-file-in-player', filePath);
    } else {
      // For other formats, try to create a video player
      videoContainer.innerHTML = `
        <video id="preview-video" controls style="width: 100%; max-width: 800px; height: auto; margin: 0 auto; display: block;">
          <source src="${filePath}" type="video/mp4">
          Your browser does not support the video tag.
        </video>
      `;
      
      // Hide loading
      loadingIndicator.style.display = 'none';
    }
  } catch (error) {
    console.error('Error loading video preview:', error);
    fileInfo.innerHTML = `<strong>Error:</strong> Could not load preview for ${filePath}`;
    videoContainer.innerHTML = '<p style="color: #dc3545; text-align: center;">Error loading video preview</p>';
    loadingIndicator.style.display = 'none';
  }
}