script.js

// Global variables
let currentFileId = null;
let activeFilter = 'all';

// Initialize application
document.addEventListener('DOMContentLoaded', function() {
  // Load files
  loadFiles();
  
  // Setup event listeners
  setupEventListeners();
  
  // Display confirmation message
  console.log('Website loaded successfully!');
  console.log('Available files:', filesData.length);
});

// Load and display files
function loadFiles() {
  const filesContainer = document.getElementById('filesContainer');
  
  if (!filesContainer) {
    console.error('filesContainer element not found!');
    return;
  }
  
  filesContainer.innerHTML = '';
  
  // Filter files by type
  const filteredFiles = activeFilter === 'all' 
    ? filesData 
    : filesData.filter(file => file.type === activeFilter);
  
  console.log('Filtered files:', filteredFiles.length);
  
  if (filteredFiles.length === 0) {
    filesContainer.innerHTML = `
      <div class="no-files">
        <i class="fas fa-folder-open"></i>
        <h3>No files in this category</h3>
        <p>Try changing the filter or click "All" to view all files</p>
      </div>
    `;
    return;
  }
  
  // Create file cards
  filteredFiles.forEach(file => {
    const fileCard = createFileCard(file);
    filesContainer.appendChild(fileCard);
  });
}

// Create file card
function createFileCard(file) {
  const card = document.createElement('div');
  card.className = 'file-card';
  card.dataset.id = file.id;
  card.dataset.type = file.type;
  card.dataset.name = file.title.toLowerCase();
  
  // Create darker color for gradient
  const darkColor = darkenColor(file.color, 30);
  
  card.innerHTML = `
    <div class="file-header" style="background: linear-gradient(135deg, ${file.color} 0%, ${darkColor} 100%);">
      <div class="file-icon">${file.icon}</div>
      <h3 class="file-title">${file.title}</h3>
      <span class="file-type">${getTypeLabel(file.type)}</span>
    </div>
    <div class="file-body">
      <p class="file-description">${file.description}</p>
      <div class="file-details">
        <span><i class="fas fa-calendar"></i> ${formatDate(file.date)}</span>
        <span><i class="fas fa-weight-hanging"></i> ${file.size}</span>
      </div>
      <div class="file-actions">
        <button class="btn-preview" onclick="previewFile(${file.id})">
          <i class="fas fa-eye"></i> Preview
        </button>
        <button class="btn-download" onclick="downloadFile(${file.id})">
          <i class="fas fa-download"></i> Download
        </button>
      </div>
    </div>
  `;
  
  return card;
}

// Setup event listeners
function setupEventListeners() {
  // Search files
  const searchInput = document.getElementById('searchInput');
  if (searchInput) {
    searchInput.addEventListener('input', searchFiles);
  }
  
  // Filter files
  document.querySelectorAll('.filter-btn').forEach(btn => {
    btn.addEventListener('click', function() {
      // Remove active from all buttons
      document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
      // Add active to clicked button
      this.classList.add('active');
      // Apply filter
      activeFilter = this.dataset.filter;
      loadFiles();
    });
  });
  
  // Download button in preview
  const downloadPreviewBtn = document.getElementById('downloadPreviewBtn');
  if (downloadPreviewBtn) {
    downloadPreviewBtn.addEventListener('click', function() {
      if (currentFileId) {
        downloadFile(currentFileId);
        closePreview();
      }
    });
  }
  
  // Close modal
  const closeModalBtn = document.querySelector('.close-modal');
  if (closeModalBtn) {
    closeModalBtn.addEventListener('click', closePreview);
  }
  
  const previewModal = document.getElementById('previewModal');
  if (previewModal) {
    previewModal.addEventListener('click', function(e) {
      if (e.target === this) closePreview();
    });
  }
  
  // Close with ESC key
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') closePreview();
  });
}

// Search files
function searchFiles() {
  const searchTerm = document.getElementById('searchInput').value.toLowerCase();
  const fileCards = document.querySelectorAll('.file-card');
  
  fileCards.forEach(card => {
    const titleElement = card.querySelector('.file-title');
    const descriptionElement = card.querySelector('.file-description');
    
    if (!titleElement || !descriptionElement) return;
    
    const title = titleElement.textContent.toLowerCase();
    const description = descriptionElement.textContent.toLowerCase();
    
    if (title.includes(searchTerm) || description.includes(searchTerm) || searchTerm === '') {
      card.style.display = 'block';
      setTimeout(() => {
        card.style.opacity = '1';
        card.style.transform = 'translateY(0)';
      }, 10);
    } else {
      card.style.opacity = '0';
      card.style.transform = 'translateY(20px)';
      setTimeout(() => {
        card.style.display = 'none';
      }, 300);
    }
  });
}

// Preview file content
function previewFile(fileId) {
  currentFileId = fileId;
  const file = filesData.find(f => f.id === fileId);
  
  if (!file) {
    console.error('File not found:', fileId);
    return;
  }
  
  // Update preview title
  const previewTitle = document.getElementById('previewTitle');
  if (previewTitle) {
    previewTitle.textContent = `Preview: ${file.title}`;
  }
  
  // Build preview content
  const previewContent = document.getElementById('contentPreview');
  if (!previewContent) return;
  
  let contentHTML = `
    <h3>${file.content.title}</h3>
    <div class="file-info-preview">
      <span><i class="fas fa-tag"></i> ${getTypeLabel(file.type)}</span>
      <span><i class="fas fa-calendar"></i> ${formatDate(file.date)}</span>
      <span><i class="fas fa-weight-hanging"></i> ${file.size}</span>
    </div>
    <hr>
  `;
  
  // Add sections
  file.content.sections.forEach(section => {
    contentHTML += `
      <div class="section">
        <h4>${section.title}</h4>
        <p>${section.content.replace(/\n/g, '<br>')}</p>
      </div>
    `;
  });
  
  // Add footer
  contentHTML += `
    <hr>
    <div class="footer">
      <p>${file.content.footer.replace(/\n/g, '<br>')}</p>
      <p class="notes">${additionalContent.notes.replace(/\n/g, '<br>')}</p>
      <p class="watermark">${additionalContent.watermark}</p>
    </div>
  `;
  
  previewContent.innerHTML = contentHTML;
  
  // Show preview modal
  const previewModal = document.getElementById('previewModal');
  if (previewModal) {
    previewModal.classList.add('active');
    document.body.style.overflow = 'hidden';
  }
}

// Close preview
function closePreview() {
  const previewModal = document.getElementById('previewModal');
  if (previewModal) {
    previewModal.classList.remove('active');
    document.body.style.overflow = 'auto';
  }
}

// Download file as PDF
function downloadFile(fileId) {
  const file = filesData.find(f => f.id === fileId);
  
  if (!file) {
    console.error('File not found for download:', fileId);
    return;
  }
  
  // Start notification
  showNotification(`Preparing "${file.title}" for download...`, 'info');
  
  // Create PDF document
  const { jsPDF } = window.jspdf;
  const doc = new jsPDF();
  
  // Document settings
  doc.setFontSize(16);
  doc.setFont('helvetica', 'bold');
  
  // Main title
  doc.text(file.content.title, 105, 20, { align: 'center' });
  
  // File information
  doc.setFontSize(10);
  doc.setFont('helvetica', 'normal');
  doc.text(`File Type: ${getTypeLabel(file.type)}`, 20, 35);
  doc.text(`Creation Date: ${formatDate(file.date)}`, 105, 35, { align: 'center' });
  doc.text(`File Size: ${file.size}`, 180, 35, { align: 'right' });
  
  // Separator line
  doc.setLineWidth(0.5);
  doc.line(20, 40, 190, 40);
  
  // Content
  let yPosition = 50;
  doc.setFontSize(12);
  
  // Add sections
  file.content.sections.forEach((section) => {
    // Subtitle
    if (yPosition > 250) {
      doc.addPage();
      yPosition = 20;
    }
    
    doc.setFont('helvetica', 'bold');
    doc.text(section.title, 20, yPosition);
    yPosition += 10;
    
    // Content
    doc.setFont('helvetica', 'normal');
    const lines = doc.splitTextToSize(section.content, 170);
    doc.text(lines, 20, yPosition);
    yPosition += (lines.length * 7) + 10;
  });
  
  // Footer
  if (yPosition > 270) {
    doc.addPage();
    yPosition = 20;
  }
  
  doc.setFontSize(10);
  const footerLines = doc.splitTextToSize(file.content.footer, 170);
  doc.text(footerLines, 20, yPosition);
  yPosition += (footerLines.length * 5) + 10;
  
  // Watermark
  doc.setFontSize(8);
  doc.setTextColor(200, 200, 200);
  doc.text(additionalContent.watermark, 105, 140, { align: 'center', angle: 45 });
  doc.setTextColor(0, 0, 0);
  
  // Save file
  setTimeout(() => {
    doc.save(`${file.title}.pdf`);
    showNotification(`"${file.title}" downloaded successfully`, 'success');
  }, 1000);
}

// Helper functions
function getTypeLabel(type) {
  const labels = {
    report: 'Report',
    contract: 'Contract',
    invoice: 'Invoice',
    other: 'Other'
  };
  return labels[type] || 'File';
}

function formatDate(dateString) {
  const date = new Date(dateString);
  return date.toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  });
}

function darkenColor(color, percent) {
  try {
    // Remove # if present
    let hex = color.replace("#", "");
    
    // If short color (like #FFF) expand it
    if (hex.length === 3) {
      hex = hex.split('').map(c => c + c).join('');
    }
    
    // Convert to RGB
    const num = parseInt(hex, 16);
    const amt = Math.round(2.55 * percent);
    
    // Calculate new values
    const R = Math.max(0, (num >> 16) - amt);
    const G = Math.max(0, (num >> 8 & 0x00FF) - amt);
    const B = Math.max(0, (num & 0x0000FF) - amt);
    
    // Convert to hex
    return "#" + ((1 << 24) + (R << 16) + (G << 8) + B).toString(16).slice(1).toUpperCase();
  } catch (error) {
    console.error('Color conversion error:', color, error);
    return '#000000'; // Default color in case of error
  }
}

// Show notifications
function showNotification(message, type = 'info') {
  // Remove any previous notifications
  const existingNotification = document.querySelector('.notification');
  if (existingNotification) {
    existingNotification.remove();
  }
  
  // Create notification element
  const notification = document.createElement('div');
  notification.className = `notification ${type}`;
  
  // Icons by type
  const icons = {
    info: 'fas fa-info-circle',
    success: 'fas fa-check-circle',
    warning: 'fas fa-exclamation-circle'
  };
  
  notification.innerHTML = `
    <i class="${icons[type] || icons.info}"></i>
    <span>${message}</span>
  `;
  
  document.body.appendChild(notification);
  
  // Show notification
  setTimeout(() => notification.classList.add('show'), 10);
  
  // Hide notification after 3 seconds
  setTimeout(() => {
    notification.classList.remove('show');
    setTimeout(() => {
      if (notification.parentNode) {
        notification.parentNode.removeChild(notification);
      }
    }, 300);
  }, 3000);
}

// Ensure files load when page is fully loaded
window.onload = function() {
  console.log('Page fully loaded');
  loadFiles();
};

// Add CSS for additional elements
const additionalStyles = document.createElement('style');
additionalStyles.textContent = `
  .file-info-preview {
    display: flex;
    gap: 20px;
    margin: 15px 0;
    padding: 10px;
    background: #e8f4fc;
    border-radius: 8px;
    font-size: 14px;
  }
  
  .file-info-preview span {
    display: flex;
    align-items: center;
    gap: 5px;
  }
  
  .section {
    margin: 25px 0;
  }
  
  .section h4 {
    color: #2c3e50;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 2px solid #3498db;
  }
  
  .footer {
    margin-top: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    font-size: 14px;
  }
  
  .notes {
    color: #e74c3c;
    margin: 10px 0;
    padding: 10px;
    background: #fdedec;
    border-radius: 5px;
    border-left: 3px solid #e74c3c;
  }
  
  .watermark {
    text-align: center;
    color: #95a5a6;
    font-style: italic;
    margin-top: 15px;
  }
  
  hr {
    border: none;
    border-top: 1px solid #ecf0f1;
    margin: 20px 0;
  }
`;
document.head.appendChild(additionalStyles);