```javascript
// API configuration
const API_BASE_URL = 'http://localhost:3000/api'; // Change to your backend URL

// Check backend connection
async function checkBackendConnection() {
  try {
    const response = await fetch(`${API_BASE_URL}/health`);
    const data = await response.json();
    const statusElement = document.getElementById('apiStatus');
    
    if (data.ok) {
      statusElement.textContent = 'API Status: Connected';
      statusElement.className = 'connected';
    } else {
      statusElement.textContent = 'API Status: Disconnected';
      statusElement.className = 'disconnected';
    }
  } catch (error) {
    console.error('Backend connection error:', error);
    document.getElementById('apiStatus').textContent = 'API Status: Connection Failed';
    document.getElementById('apiStatus').className = 'disconnected';
  }
}

document.addEventListener('DOMContentLoaded', () => {
  // First check backend status
  checkBackendConnection();
// Project creation handling
  const fileInput = document.getElementById('fileInput');
  const fileList = document.getElementById('fileList');
  const dropZone = document.getElementById('dropZone');
  const processBtn = document.getElementById('processBtn');
  const projectName = document.getElementById('projectName');
  const projectTypes = document.querySelectorAll('.project-type');
  
  // Project type selection
  projectTypes.forEach(type => {
    type.addEventListener('click', () => {
      projectTypes.forEach(t => t.classList.remove('active'));
      type.classList.add('active');
    });
  });
// Tab switching
  const tabBtns = document.querySelectorAll('.tab-btn');
  tabBtns.forEach(btn => {
    btn.addEventListener('click', () => {
      // Remove active class from all buttons and tabs
      document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
      document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
      
      // Add active class to clicked button and corresponding tab
      btn.classList.add('active');
      const tabId = btn.getAttribute('data-tab');
      document.getElementById(tabId).classList.add('active');
    });
  });

  // Drag and drop functionality
  ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    dropZone.addEventListener(eventName, preventDefaults, false);
  });

  function preventDefaults(e) {
    e.preventDefault();
    e.stopPropagation();
  }

  ['dragenter', 'dragover'].forEach(eventName => {
    dropZone.addEventListener(eventName, highlight, false);
  });

  ['dragleave', 'drop'].forEach(eventName => {
    dropZone.addEventListener(eventName, unhighlight, false);
  });

  function highlight() {
    dropZone.classList.add('drag-over');
  }

  function unhighlight() {
    dropZone.classList.remove('drag-over');
  }

  dropZone.addEventListener('drop', handleDrop, false);

  function handleDrop(e) {
    const dt = e.dataTransfer;
    const files = dt.files;
    handleFiles(files);
  }

  fileInput.addEventListener('change', function() {
    handleFiles(this.files);
  });
  function handleFiles(files) {
    fileList.innerHTML = '';
    if (files.length === 0) return;
    
    for (let i = 0; i < files.length; i++) {
      const file = files[i];
      if (!file.type.match('application/pdf|application/vnd.openxmlformats-officedocument.wordprocessingml.document|text/plain|application/vnd.ms-powerpoint|application/vnd.openxmlformats-officedocument.presentationml.presentation')) {
        continue;
      }
const fileItem = document.createElement('div');
      fileItem.className = 'file-item';
      fileItem.innerHTML = `
        <span>${file.name}</span>
        <i class="fas fa-times" data-index="${i}"></i>
      `;
      fileList.appendChild(fileItem);
      
      // Add remove file functionality
      fileItem.querySelector('i').addEventListener('click', function() {
        fileItem.remove();
        // In a real app, you would remove the file from the upload list
      });
    }
    
    if (fileList.children.length > 0) {
      processBtn.disabled = false;
    } else {
      processBtn.disabled = true;
    }
  }

  // Process files button
  processBtn.addEventListener('click', async function() {
    if (fileList.children.length === 0) {
      alert('אנא העלה לפחות קובץ אחד');
      return;
    }
    
    const projectNameValue = projectName.value.trim();
    if (!projectNameValue) {
      alert('אנא הזן שם לפרויקט');
      return;
    }
    
    // Get selected output options
    const outputOptions = [];
    document.querySelectorAll('input[name="output"]:checked').forEach(checkbox => {
      outputOptions.push(checkbox.value);
    });
    
    if (outputOptions.length === 0) {
      alert('אנא בחר לפחות אפשרות פלט אחת');
      return;
    }
// Show loading state
    const originalText = processBtn.innerHTML;
    processBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> מעבד...';
    processBtn.disabled = true;
    
    try {
      // Simulate processing (in a real app, this would be an API call)
      await new Promise(resolve => setTimeout(resolve, 3000));
      
      // Generate sample study materials
      generateSampleMaterials();
      
      // Show success message
      alert('חומרי הלימוד נוצרו בהצלחה!');
      
      // Switch to notes tab
      document.querySelector('.tab-btn[data-tab="notes"]').click();
      
    } catch (error) {
      console.error('Error processing files:', error);
      alert('אירעה שגיאה בעיבוד הקבצים. נסה שוב.');
    } finally {
      processBtn.innerHTML = originalText;
      processBtn.disabled = false;
    }
  });

  function generateSampleMaterials() {
    // Generate sample notes
    const notesTab = document.getElementById('notes');
    notesTab.innerHTML = `
      <div class="study-material">
        <h3>סיכום המסמך</h3>
        <div class="content">
          <p>המסמך דן בנושאים מרכזיים בתחום הלימוד. להלן עיקרי הדברים:</p>
          <ul>
            <li>הקדמה היסטורית להתפתחות התחום</li>
            <li>הגדרות יסוד ומושגי מפתח</li>
            <li>תיאוריות מרכזיות והשוואה ביניהן</li>
            <li>יישומים מעשיים ורלוונטיות לתקופה הנוכחית</li>
          </ul>
          <p>הסיכום מבוסס על ניתוח של 3 מסמכים שהעלית.</p>
        </div>
        <div class