export default class ArtistView {
  constructor() {
    this.artistsContainer = document.getElementById('artistsContainer');
    this.artistForm = document.getElementById('artistForm');
    this.editArtistModal = document.getElementById('editArtistModal');
    this.saveEditArtistBtn = document.getElementById('saveEditArtist');

    if (!this.artistsContainer || !this.artistForm || !this.editArtistModal || !this.saveEditArtistBtn) {
      console.error('Не найдены необходимые элементы DOM');
    }
  }

  renderArtists(artists) {
    console.log('Рендеринг артистов:', artists); // Отладка
    this.artistsContainer.innerHTML = artists.map(artist => {
      console.log('Обработка артиста:', artist); // Отладка
      return `
        <div class="col-md-4 mb-4">
          <div class="card bg-dark border-punk">
            <div class="card-body">
              <h5 class="card-title text-punk">${artist.name}</h5>
              <p class="card-text text-light">${artist.description || 'Нет описания'}</p>
              <p class="card-text text-light"><small>Эпоха: ${artist.epoch?.name || 'Не указана'}</small></p>
              <p class="card-text text-light"><small>Страна: ${artist.country?.name || 'Не указана'}</small></p>
              <button class="btn btn-outline-primary edit-btn me-2" data-id="${artist.id}">
                <i class="bi bi-pencil-square"></i> Изменить
              </button>
              <button class="btn btn-outline-danger delete-btn" data-id="${artist.id}">
                <i class="bi bi-trash"></i> Удалить
              </button>
            </div>
          </div>
        </div>
      `;
    }).join('');
  }

  initCountries(countries) {
    const renderSelect = (selectId) => {
      const select = document.getElementById(selectId);
      select.innerHTML = '<option value="">Выберите страну</option>';
      countries.forEach(country => {
        const option = document.createElement('option');
        option.value = country.id;
        option.textContent = country.name;
        select.appendChild(option);
      });
    };

    renderSelect('artistCountry');
    renderSelect('editArtistCountry');
  }

  initEpochs(epochs) {
    const renderSelect = (selectId) => {
      const select = document.getElementById(selectId);
      select.innerHTML = '<option value="">Выберите эпоху</option>';
      epochs.forEach(epoch => {
        const option = document.createElement('option');
        option.value = epoch.id;
        option.textContent = epoch.name;
        select.appendChild(option);
      });
    };

    renderSelect('artistEpoch');
    renderSelect('editArtistEpoch');
  }

  showEditForm(artist) {
    console.log('Открытие формы редактирования:', artist); // Отладка
    document.getElementById('editArtistName').value = artist.name || '';
    document.getElementById('editDescription').value = artist.description || '';
    document.getElementById('editArtistEpoch').value = artist.epoch?.id || artist.epochId || '';
    document.getElementById('editArtistCountry').value = artist.country?.id || artist.countryId || '';
    document.getElementById('editArtistId').value = artist.id;

    new bootstrap.Modal(this.editArtistModal).show();
  }

  bindAddArtist(handler) {
    this.artistForm.addEventListener('submit', async (e) => {
      e.preventDefault();
      const artist = {
        name: document.getElementById('artistName').value.trim(),
        description: document.getElementById('description').value.trim(),
        epochId: parseInt(document.getElementById('artistEpoch').value) || null,
        countryId: parseInt(document.getElementById('artistCountry').value) || null
      };

      console.log('Данные для добавления:', artist); // Отладка
      if (!artist.name || !artist.description || !artist.epochId || !artist.countryId) {
        alert('Все поля обязательны!');
        return;
      }

      try {
        await handler(artist);
        this.artistForm.reset();
      } catch (error) {
        alert('Ошибка при добавлении исполнителя: ' + error.message);
      }
    });
  }

  bindDeleteArtist(handler) {
    this.artistsContainer.addEventListener('click', (e) => {
      if (e.target.closest('.delete-btn')) {
        const id = e.target.closest('.delete-btn').dataset.id;
        handler(id);
      }
    });
  }

  bindEditArtist(handler) {
    this.artistsContainer.addEventListener('click', (e) => {
      if (e.target.closest('.edit-btn')) {
        const id = e.target.closest('.edit-btn').dataset.id;
        handler(id);
      }
    });
  }

  bindSaveEditArtist(handler) {
    this.saveEditArtistBtn.addEventListener('click', async () => {
      const artist = {
        id: document.getElementById('editArtistId').value,
        name: document.getElementById('editArtistName').value.trim(),
        description: document.getElementById('editDescription').value.trim(),
        epochId: parseInt(document.getElementById('editArtistEpoch').value) || null,
        countryId: parseInt(document.getElementById('editArtistCountry').value) || null
      };

      console.log('Данные для обновления:', artist); // Отладка
      if (!artist.name || !artist.description || !artist.epochId || !artist.countryId) {
        alert('Все поля обязательны!');
        return;
      }

      try {
        await handler(artist);
        bootstrap.Modal.getInstance(this.editArtistModal).hide();
      } catch (error) {
        alert('Ошибка при обновлении исполнителя: ' + error.message);
      }
    });
  }
}