// logs.js
import API from '../api.js';

const LogsModule = {
  async getAllLogs() {
    return await API.get('logs');
  },
  
  async getLog(id) {
    return await API.get(`logs/${id}`);
  },
  
  async createLog(logData) {
    return await API.post('logs', logData);
  },
  
  async updateLog(id, logData) {
    return await API.put(`logs/${id}`, logData);
  },
  
  async deleteLog(id) {
    return await API.delete(`logs/${id}`);
  },
  
  renderLogsList(logs, containerId) {
    const container = document.getElementById(containerId);
    container.innerHTML = '';
    
    logs.forEach(log => {
      const logElement = document.createElement('div');
      logElement.className = 'log-item';
      logElement.innerHTML = `
        <h3>${log.title || 'Untitled Log'}</h3>
        <p>${log.date || 'No date'}</p>
        <div class="actions">
          <button class="view-btn" data-id="${log.id}">View</button>
          <button class="edit-btn" data-id="${log.id}">Edit</button>
          <button class="delete-btn" data-id="${log.id}">Delete</button>
        </div>
      `;
      container.appendChild(logElement);
    });
    
    // Add event listeners
    this.addEventListeners(containerId);
  },
  
  addEventListeners(containerId) {
    const container = document.getElementById(containerId);
    
    container.addEventListener('click', async (e) => {
      const id = e.target.dataset.id;
      if (!id) return;
      
      if (e.target.classList.contains('view-btn')) {
        const log = await this.getLog(id);
        // Display log details
        document.getElementById('detail-view').innerHTML = `
          <h2>${log.title || 'Untitled Log'}</h2>
          <p>Date: ${log.date || 'No date'}</p>
          <p>Description: ${log.description || 'No description'}</p>
          <!-- Add more fields as needed -->
        `;
      } else if (e.target.classList.contains('edit-btn')) {
        const log = await this.getLog(id);
        // Populate edit form
        document.getElementById('edit-form').innerHTML = `
          <form id="log-edit-form" data-id="${log.id}">
            <input type="text" name="title" value="${log.title || ''}">
            <input type="date" name="date" value="${log.date || ''}">
            <textarea name="description">${log.description || ''}</textarea>
            <button type="submit">Save Changes</button>
          </form>
        `;
        
        document.getElementById('log-edit-form').addEventListener('submit', async (e) => {
          e.preventDefault();
          const formData = new FormData(e.target);
          const logData = {
            title: formData.get('title'),
            date: formData.get('date'),
            description: formData.get('description')
          };
          
          await this.updateLog(id, logData);
          // Refresh the list
          const logs = await this.getAllLogs();
          this.renderLogsList(logs, containerId);
        });
      } else if (e.target.classList.contains('delete-btn')) {
        if (confirm('Are you sure you want to delete this log?')) {
          await this.deleteLog(id);
          // Refresh the list
          const logs = await this.getAllLogs();
          this.renderLogsList(logs, containerId);
        }
      }
    });
  }
};

export default LogsModule;