MovieMapper/utils/renderer/ModalManager.js

const { ipcRenderer } = window.electronAPI;

/**
 * ModalManager - Manages video preview modal
 */
class ModalManager {
  constructor() {
    this.videoPreviewModal = null;
  }

  /**
   * Open video preview modal
   * @param {string} filePath - File path to preview
   */
  async openVideoPreview(filePath) {
    console.log('Opening video preview for:', filePath);

    // Create modal if it doesn't exist
    if (!this.videoPreviewModal) {
      this.createVideoPreviewModal();
    }

    // Show the modal
    this.videoPreviewModal.style.display = 'block';

    // Load video content
    await this.loadVideoPreview(filePath);
  }

  /**
   * Create video preview modal
   */
  createVideoPreviewModal() {
    // Create modal container
    this.videoPreviewModal = document.createElement('div');
    this.videoPreviewModal.id = 'video-preview-modal';
    this.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 = '×';
    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() {
      this.videoPreviewModal.style.display = 'none';
    }.bind(this));

    // 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);
    this.videoPreviewModal.appendChild(modalContent);

    // Add click outside to close
    this.videoPreviewModal.addEventListener('click', function(e) {
      if (e.target === this.videoPreviewModal) {
        this.videoPreviewModal.style.display = 'none';
      }
    }.bind(this));

    // Add to body
    document.body.appendChild(this.videoPreviewModal);
  }

  /**
   * Load video preview
   * @param {string} filePath - File path to load
   */
  async loadVideoPreview(filePath) {
    const fileInfo = document.getElementById('video-preview-file-info');
    const videoContainer = document.getElementById('video-preview-container');
    const loadingIndicator = document.getElementById('video-preview-loading');

    loadingIndicator.style.display = 'block';
    videoContainer.textContent = '';
    const fileName = filePath.split('/').pop();
    fileInfo.textContent = `Loading: ${fileName}`;

    try {
      const statsResult = await ipcRenderer.invoke('get-file-stats', filePath);
      if (!statsResult.success) {
        throw new Error('File not found');
      }

      fileInfo.textContent = `File: ${fileName} | Size: ${(statsResult.size / (1024 * 1024)).toFixed(2)} MB | Path: ${filePath}`;

      const ext = filePath.toLowerCase().split('.').pop();
      if (ext === 'mkv') {
        this.videoPreviewModal.style.display = 'none';
        ipcRenderer.invoke('open-file-in-player', filePath);
      } else {
        const video = document.createElement('video');
        video.id = 'preview-video';
        video.controls = true;
        video.style.cssText = 'width: 100%; max-width: 800px; height: auto; margin: 0 auto; display: block;';
        const source = document.createElement('source');
        source.src = `file://${filePath}`;
        source.type = 'video/mp4';
        video.appendChild(source);
        videoContainer.appendChild(video);
        loadingIndicator.style.display = 'none';
      }
    } catch (error) {
      console.error('Error loading video preview:', error);
      fileInfo.textContent = 'Error: Could not load preview';
      const p = document.createElement('p');
      p.style.cssText = 'color: #dc3545; text-align: center;';
      p.textContent = 'Error loading video preview';
      videoContainer.appendChild(p);
      loadingIndicator.style.display = 'none';
    }
  }

  /**
   * Close the video preview modal
   */
  closeVideoPreview() {
    if (this.videoPreviewModal) {
      this.videoPreviewModal.style.display = 'none';
    }
  }

  /**
   * Get the modal element
   * @returns {HTMLElement|null} Modal element
   */
  getModal() {
    return this.videoPreviewModal;
  }
}

module.exports = ModalManager;