export function handleAreaCreated(areasLayer, layer, apiKey) {
  console.log('handleAreaCreated called with apiKey:', apiKey);
  const radius = layer.getRadius();
  const center = layer.getLatLng();

  const formHtml = `
    <div class="card w-96 bg-base-100 shadow-xl">
      <div class="card-body">
        <h2 class="card-title">New Area</h2>
        <form id="circle-form" class="space-y-4">
          <div class="form-control">
            <label for="circle-name" class="label">
              <span class="label-text">Area Name</span>
            </label>
            <input type="text"
                   id="circle-name"
                   name="area[name]"
                   class="input input-bordered w-full"
                   placeholder="Enter area name"
                   autofocus
                   required>
          </div>
          <input type="hidden" name="area[latitude]" value="${center.lat}">
          <input type="hidden" name="area[longitude]" value="${center.lng}">
          <input type="hidden" name="area[radius]" value="${radius}">
          <div class="flex justify-between mt-4">
            <button type="button"
                    class="btn btn-ghost"
                    onclick="this.closest('.leaflet-popup').querySelector('.leaflet-popup-close-button').click()">
              Cancel
            </button>
            <button type="button" id="save-area-btn" class="btn btn-primary">Save Area</button>
          </div>
        </form>
      </div>
    </div>
  `;

  console.log('Binding popup to layer');
  layer.bindPopup(formHtml, {
    maxWidth: "auto",
    minWidth: 300,
    closeButton: true,
    closeOnClick: false,
    className: 'area-form-popup'
  }).openPopup();

  console.log('Adding layer to areasLayer');
  areasLayer.addLayer(layer);

  // Bind the event handler immediately after opening the popup
  setTimeout(() => {
    console.log('Setting up form handlers');
    const form = document.getElementById('circle-form');
    const saveButton = document.getElementById('save-area-btn');
    const nameInput = document.getElementById('circle-name');

    console.log('Form:', form);
    console.log('Save button:', saveButton);
    console.log('Name input:', nameInput);

    if (!form || !saveButton || !nameInput) {
      console.error('Required elements not found');
      return;
    }

    // Focus the name input
    nameInput.focus();

    // Remove any existing click handlers
    const newSaveButton = saveButton.cloneNode(true);
    saveButton.parentNode.replaceChild(newSaveButton, saveButton);

    // Add click handler
    newSaveButton.addEventListener('click', (e) => {
      console.log('Save button clicked');
      e.preventDefault();
      e.stopPropagation();

      if (!nameInput.value.trim()) {
        console.log('Name is empty');
        nameInput.classList.add('input-error');
        return;
      }

      console.log('Creating FormData');
      const formData = new FormData(form);
      formData.forEach((value, key) => {
        console.log(`FormData: ${key} = ${value}`);
      });

      console.log('Calling saveArea');
      saveArea(formData, areasLayer, layer, apiKey);
    });
  }, 100); // Small delay to ensure DOM is ready
}

export function saveArea(formData, areasLayer, layer, apiKey) {
  console.log('saveArea called with apiKey:', apiKey);
  const data = {};
  formData.forEach((value, key) => {
    console.log('FormData entry:', key, value);
    const keys = key.split('[').map(k => k.replace(']', ''));
    if (keys.length > 1) {
      if (!data[keys[0]]) data[keys[0]] = {};
      data[keys[0]][keys[1]] = value;
    } else {
      data[keys[0]] = value;
    }
  });

  console.log('Sending fetch request with data:', data);
  fetch(`/api/v1/areas?api_key=${apiKey}`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json'},
    body: JSON.stringify(data)
  })
  .then(response => {
    console.log('Received response:', response);
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log('Area saved successfully:', data);
    layer.closePopup();
    layer.bindPopup(`
      Name: ${data.name}<br>
      Radius: ${Math.round(data.radius)} meters<br>
      <a href="#" data-id="${data.id}" class="delete-area">[Delete]</a>
    `).openPopup();

    // Add event listener for the delete button
    layer.on('popupopen', () => {
      const deleteButton = document.querySelector('.delete-area');
      if (deleteButton) {
        deleteButton.addEventListener('click', (e) => {
          e.preventDefault();
          deleteArea(data.id, areasLayer, layer, apiKey);
        });
      }
    });
  })
  .catch(error => {
    console.error('There was a problem with the save request:', error);
  });
}

export function deleteArea(id, areasLayer, layer, apiKey) {
  fetch(`/api/v1/areas/${id}?api_key=${apiKey}`, {
    method: 'DELETE',
    headers: {
      'Content-Type': 'application/json'
    }
  })
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    areasLayer.removeLayer(layer); // Remove the layer from the areas layer group
  })
  .catch(error => {
    console.error('There was a problem with the delete request:', error);
  });
}

export function fetchAndDrawAreas(areasLayer, apiKey) {
  fetch(`/api/v1/areas?api_key=${apiKey}`, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json'
    }
  })
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    data.forEach(area => {
      // Check if necessary fields are present
      if (area.latitude && area.longitude && area.radius && area.name && area.id) {
        const layer = L.circle([area.latitude, area.longitude], {
          radius: area.radius,
          color: 'red',
          fillColor: '#f03',
          fillOpacity: 0.5
        }).bindPopup(`
          Name: ${area.name}<br>
          Radius: ${Math.round(area.radius)} meters<br>
          <a href="#" data-id="${area.id}" class="delete-area">[Delete]</a>
        `);

        areasLayer.addLayer(layer); // Add to areas layer group

        // Add event listener for the delete button
        layer.on('popupopen', () => {
          document.querySelector('.delete-area').addEventListener('click', (e) => {
            e.preventDefault();
            if (confirm('Are you sure you want to delete this area?')) {
              deleteArea(area.id, areasLayer, layer, apiKey);
            }
          });
        });
      } else {
        console.error('Area missing required fields:', area);
      }
    });
  })
  .catch(error => {
    console.error('There was a problem with the fetch request:', error);
  });
}