modalUtils.js

export function openEditPlayerModal(container, playerId, store) {
  console.log('Opening edit player modal for ID:', playerId);
  const player = store.getPlayerDatabase().find(p => p.id === playerId);
  if (!player) {
    console.warn('Player not found for ID:', playerId);
    alert('Player not found');
    return;
  }
  store.currentEditingPlayerId = playerId;
  const firstNameInput = container.querySelector('#editFirstName');
  const lastNameInput = container.querySelector('#editLastName');
  const nicknameInput = container.querySelector('#editNickname');
  const emailInput = container.querySelector('#editEmail');
  const phoneInput = container.querySelector('#editPhone');
  const editTeamSelect = container.querySelector('#editTeam');
  
  if (!firstNameInput || !lastNameInput || !nicknameInput || !emailInput || !phoneInput || !editTeamSelect) {
    console.error('One or more modal inputs not found:', {
      firstNameInput, lastNameInput, nicknameInput, emailInput, phoneInput, editTeamSelect
    });
    return;
  }
  
  firstNameInput.value = player.firstName;
  lastNameInput.value = player.lastName;
  nicknameInput.value = player.nickname || '';
  emailInput.value = player.email || '';
  phoneInput.value = player.phoneNumber || '';
  
  const teamDatabase = store.getTeamDatabase() || [];
  editTeamSelect.innerHTML = `
    <option value="">No Team</option>
    ${teamDatabase.map(team => `
      <option value="${team.id}" ${team.id === player.teamId ? 'selected' : ''}>
        ${team.name}
      </option>
    `).join('')}
  `;
  container.querySelector('#editPlayerModal').style.display = 'block';
}

export function closeEditPlayerModal(container) {
  console.log('Closing edit player modal');
  container.querySelector('#editPlayerModal').style.display = 'none';
}

export function createModal(modalId, inputs, buttonClass, buttonText) {
  return `
    <div id="${modalId}" class="modal">
      <div class="modal-content">
        ${inputs.join('')}
        <div class="modal-actions">
          <button class="${buttonClass} btn">${buttonText}</button>
          <button class="cancel-btn btn">Cancel</button>
        </div>
      </div>
    </div>
  `;
}

export function showModal(modal) {
  console.log('Showing modal:', modal.id);
  if (modal) {
    modal.style.display = 'block';
  } else {
    console.warn('Modal not found');
  }
}