onedrive_sync/renderer/renderer.js

const { ipcRenderer, session } = require('electron');
const graphApi = require('./graphApi');

// Wait for webview to load
const webview = document.getElementById('main-content');
console.log('Setting up webview event listeners...');

webview.addEventListener('did-start-loading', () => {
  console.log('Webview started loading');
});

webview.addEventListener('did-finish-load', () => {
  console.log('Webview finished loading');
  
  // Create and add the configuration button
  console.log('Creating configuration button');
  const button = document.createElement('button');
  button.id = 'config-button';
  button.innerHTML = '<i class="fas fa-cog"></i> Configuration';
  document.body.appendChild(button);
  console.log('Configuration button added to DOM');

  button.addEventListener('click', () => {
    console.log('Configuration button clicked');
    ipcRenderer.send('toggle-config');
  });
});

webview.addEventListener('did-fail-load', (event) => {
  console.error('Webview failed to load:', event);
});

// Configuration panel toggle
ipcRenderer.on('toggle-config', () => {
  console.log('Toggling configuration panel');
  const panel = document.getElementById('config-panel');
  const isOpening = !panel.classList.contains('open');
  panel.classList.toggle('open');
  console.log(isOpening ? 'Panel opened' : 'Panel closed');
  
  if (isOpening) {
    console.log('Loading saved configuration...');
    ipcRenderer.send('load-config');
  }
});

// Folder selection
document.getElementById('select-folder').addEventListener('click', () => {
  console.log('Folder selection requested');
  ipcRenderer.send('select-folder');
});

ipcRenderer.on('folder-selected', (event, path) => {
  console.log('Folder selected:', path);
  document.getElementById('dest-folder').value = path;
});

// Form submission
document.getElementById('config-form').addEventListener('submit', (event) => {
  event.preventDefault();
  const destFolder = document.getElementById('dest-folder').value;
  const onedriveSource = document.getElementById('onedrive-source').value;
  console.log('Saving configuration:', { destFolder, onedriveSource });
  ipcRenderer.send('set-config', { destFolder, onedriveSource });
  document.getElementById('config-panel').classList.remove('open');
  console.log('Configuration panel closed');
});

document.getElementById('sync-button').addEventListener('click', async () => {
  const destFolder = document.getElementById('dest-folder').value;
  const onedriveSource = document.getElementById('onedrive-source').value;
  
  if (!destFolder || !onedriveSource) {
    alert('Please set both destination folder and OneDrive source path first');
    return;
  }

  try {
    // Show loading state
    const syncButton = document.getElementById('sync-button');
    const originalText = syncButton.textContent;
    syncButton.textContent = 'Syncing...';
    syncButton.disabled = true;

    // Get folder contents using GraphApiClient
    const items = await graphApi.listFolderContents(onedriveSource);
    console.log('Found items:', items.length);
    
    // Process the items
    // TODO: Handle the items as needed
    showStatus(`Found ${items.length} items`);

    // Send the items to the main process
    ipcRenderer.send('start-sync', { destFolder, onedriveSource , items});

  } catch (error) {
    console.error('Sync error:', error);
    showStatus(`Error: ${error.message}`, true);
  } finally {
    // Reset button state
    const syncButton = document.getElementById('sync-button');
    syncButton.textContent = originalText;
    syncButton.disabled = false;
  }
});

// Config loaded handler
ipcRenderer.on('config-loaded', (event, config) => {
  console.log('Received saved configuration:', config);
  document.getElementById('dest-folder').value = config.destFolder;
  document.getElementById('onedrive-source').value = config.onedriveSource;
});

// Video handling
ipcRenderer.on('video-saved', (event, { filename, path }) => {
  console.log('✓ Video saved successfully:', { filename, path });
  showStatus(`Saved: ${filename}`);
});

ipcRenderer.on('video-save-error', (event, error) => {
  console.error('⚠ Video save error:', error);
  showStatus(`Error: ${error}`, true);
});

function showStatus(message, isError = false) {
  console.log(`Showing status: ${message} (${isError ? 'error' : 'success'})`);
  const statusDiv = document.getElementById('status-display') || createStatusDisplay();
  statusDiv.textContent = message;
  statusDiv.className = `show ${isError ? 'error' : 'success'}`;
  
  // Reset animation
  statusDiv.style.animation = 'none';
  statusDiv.offsetHeight;
  statusDiv.style.animation = null;
}

function createStatusDisplay() {
  console.log('Creating status display element');
  const div = document.createElement('div');
  div.id = 'status-display';
  document.body.appendChild(div);
  return div;
}

// Add after the existing event listeners
document.getElementById('close-config').addEventListener('click', () => {
  console.log('Close button clicked');
  document.getElementById('config-panel').classList.remove('open');
});

// Add these event listeners with your other ipcRenderer.on handlers

ipcRenderer.on('sync-complete', (event, { totalItems, videoItems }) => {
  console.log('Sync completed:', { totalItems, videoItems });
  showStatus(`Sync complete: Downloaded ${videoItems} videos`);
});

ipcRenderer.on('sync-error', (event, error) => {
  console.error('Sync error:', error);
  showStatus(`Sync error: ${error}`, true);
});