import { renderTable } from '../utils/uiUtils.js';
import { renderTeamDropdown } from '../utils/dropdownUtils.js';
import TeamCreation from './TeamCreation.js';
import TeamEdit from './TeamEdit.js';
import TeamCaptainEdit from './TeamCaptainEdit.js';

export default class TeamManagement {
  constructor(store) {
    this.store = store;
    this.container = document.createElement('div');
    this.container.id = 'teamManagementSection';
    this.container.className = 'team-management-section';
    this.container.style.display = 'block';
    this.selectedTeamId = null;
    this.teamCreation = new TeamCreation(store, () => {
      this.refreshTable();
      this.refreshTeamSelectDropdown();
    });
    this.teamEdit = new TeamEdit(store, this.container, () => {
      this.refreshTable();
      this.refreshTeamPlayersList();
    });
    this.teamCaptainEdit = new TeamCaptainEdit(store, this.container, () => {
      this.refreshTable();
      this.refreshTeamPlayersList();
    });
  }

  async render() {
    console.log('TeamManagement.js loaded');
    this.container.innerHTML = `
      <h2>Team Management</h2>
      <div id="teamCreationContainer"></div>
      <div class="form-group">
        <label for="teamSearchInput">Search Teams:</label>
        <div class="search-container">
          <span class="search-icon">🔍</span>
          <input type="text" id="teamSearchInput" placeholder="To be added" disabled>
        </div>
        <select id="teamSelect" class="team-select">
          <option value="">Select a team</option>
        </select>
        <div id="teamPlayersList" class="player-list-container"></div>
      </div>
      <table id="teamDatabaseTable" border="1">
        <thead>
          <tr>
            <th>Team Name</th>
            <th>Players</th>
            <th>Captain</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
      <div id="editTeamModal" class="modal">
        <div class="modal-content">
          <h3>Edit Team</h3>
          <div class="form-group">
            <label for="editTeamName">Team Name: <span class="required">*</span></label>
            <input type="text" id="editTeamName" placeholder="Team Name" required>
          </div>
          <div class="form-group">
            <label for="editPlayerSearchInput">Team Members:</label>
            <div class="search-container">
              <span class="search-icon">🔍</span>
              <input type="text" id="editPlayerSearchInput" placeholder="Search players...">
              <span class="clear-icon edit-player-clear-icon" style="display: none;">X</span>
            </div>
            <div id="editPlayerSelect" class="player-select-container"></div>
          </div>
          <div class="modal-actions">
            <button id="saveEditTeamBtn" class="btn">Save</button>
            <button id="cancelEditTeamBtn" class="btn">Cancel</button>
          </div>
        </div>
      </div>
      <div id="editCaptainModal" class="modal">
        <div class="modal-content">
          <h3>Edit Team Captain</h3>
          <div class="form-group">
            <label for="editCaptainSearchInput">Select Captain:</label>
            <div class="search-container">
              <span class="search-icon">🔍</span>
              <input type="text" id="editCaptainSearchInput" placeholder="Search captain...">
              <span class="clear-icon edit-captain-clear-icon" style="display: none;">X</span>
            </div>
            <div id="editCaptainSelect" class="captain-select-container"></div>
          </div>
          <div class="modal-actions">
            <button id="saveEditCaptainBtn" class="btn">Save</button>
            <button id="cancelEditCaptainBtn" class="btn">Cancel</button>
          </div>
        </div>
      </div>
    `;
    this.container.querySelector('#teamCreationContainer').appendChild(this.teamCreation.render());
    this.teamEdit.setupEventListeners();
    this.teamCaptainEdit.setupEventListeners();
    await this.refreshTable();
    await this.refreshTeamSelectDropdown();
    this.setupEventListeners();
    document.addEventListener('playerDatabaseUpdated', async () => {
      console.log('Received playerDatabaseUpdated event');
      await this.refreshTable();
      await this.refreshTeamPlayersList();
    });
    document.addEventListener('teamDatabaseUpdated', async () => {
      console.log('Received teamDatabaseUpdated event');
      await this.refreshTable();
      await this.refreshTeamSelectDropdown();
      await this.refreshTeamPlayersList();
    });
    return this.container;
  }

  setupEventListeners() {
    console.log('Setting up event listeners for TeamManagement');
    this.container.addEventListener('click', (e) => {
      const target = e.target.closest('button');
      if (!target) return;
      const teamId = target.closest('tr')?.dataset.teamId;
      if (target.classList.contains('delete-team-btn') && teamId) {
        console.log('Delete Team button clicked');
        if (confirm('Are you sure you want to delete this team?')) {
          this.store.deleteTeam(teamId);
          this.refreshTable();
          this.refreshTeamSelectDropdown();
          this.refreshTeamPlayersList();
          document.dispatchEvent(new CustomEvent('playerDatabaseUpdated'));
        }
      } else if (target.classList.contains('edit-team-btn') && teamId) {
        console.log('Edit Team button clicked');
        this.teamEdit.openEditTeamModal(teamId);
      } else if (target.classList.contains('edit-captain-btn') && teamId) {
        console.log('Edit Captain button clicked');
        this.teamCaptainEdit.openEditCaptainModal(teamId);
      }
    });

    this.container.querySelector('#teamSelect').addEventListener('change', (e) => {
      console.log('Team select changed:', e.target.value);
      this.selectedTeamId = e.target.value || null;
      this.refreshTeamPlayersList();
    });
  }

  async refreshTable() {
    console.log('Refreshing team table');
    const teamDatabase = this.store.getTeamDatabase() || [];
    const playerDatabase = this.store.getPlayerDatabase() || [];
    console.log('Team database:', teamDatabase);
    console.log('Player database for team table:', playerDatabase);
    const tbody = this.container.querySelector('#teamDatabaseTable tbody');
    if (teamDatabase.length === 0) {
      tbody.innerHTML = '<tr><td colspan="4">No teams found. Add a team to get started.</td></tr>';
      return;
    }
    const fields = [
      { key: 'name', label: 'Team Name' },
      { key: 'playerIds', label: 'Players', transform: (playerIds) => {
        return playerIds.map(pid => {
          const player = playerDatabase.find(p => p.id === pid);
          return player ? `${player.firstName} ${player.lastName}` : 'Unknown';
        }).join(', ');
      }},
      { key: 'captainId', label: 'Captain', transform: (captainId) => {
        console.log('Rendering captain for captainId:', captainId);
        const captain = playerDatabase.find(p => p.id === captainId);
        return captain ? `${captain.firstName} ${captain.lastName}` : 'None';
      }}
    ];
    renderTable(this.container, teamDatabase, fields, (team) => `
      <tr data-team-id="${team.id}">
        <td>${team.name}</td>
        <td>${team.playerIds.map(pid => {
          const player = playerDatabase.find(p => p.id === pid);
          return player ? `${player.firstName} ${player.lastName}` : 'Unknown';
        }).join(', ')}</td>
        <td>${playerDatabase.find(p => p.id === team.captainId) ? 
          playerDatabase.find(p => p.id === team.captainId).firstName + ' ' + 
          playerDatabase.find(p => p.id === team.captainId).lastName : 'None'}</td>
        <td>
          <button class="edit-team-btn btn">Edit</button>
          <button class="edit-captain-btn btn">Edit Captain</button>
          <button class="delete-team-btn btn">Delete</button>
        </td>
      </tr>
    `, false);
  }

  async refreshTeamSelectDropdown() {
    console.log('Refreshing team select dropdown');
    const teamDatabase = this.store.getTeamDatabase() || [];
    console.log('Team database for dropdown:', teamDatabase);
    renderTeamDropdown(this.container, teamDatabase, this.selectedTeamId, 'teamSelect');
  }

  async refreshTeamPlayersList() {
    console.log('Refreshing team players list for teamId:', this.selectedTeamId);
    const playerDatabase = this.store.getPlayerDatabase() || [];
    const teamDatabase = this.store.getTeamDatabase() || [];
    console.log('Team database for players list:', teamDatabase);
    const teamPlayersList = this.container.querySelector('#teamPlayersList');
    if (!this.selectedTeamId) {
      teamPlayersList.innerHTML = '<p>Select a team to view its players.</p>';
      return;
    }
    const team = teamDatabase.find(t => t.id === this.selectedTeamId);
    if (!team) {
      teamPlayersList.innerHTML = '<p>Team not found.</p>';
      return;
    }
    const players = team.playerIds
      .map(pid => playerDatabase.find(p => p.id === pid))
      .filter(p => p)
      .map(p => ({
        ...p,
        isCaptain: p.id === team.captainId
      }));
    teamPlayersList.innerHTML = `
      <h3>Players in ${team.name}</h3>
      <ul>
        ${players.map(player => `
          <li>${player.firstName} ${player.lastName}${player.isCaptain ? ' (Captain)' : ''}</li>
        `).join('')}
      </ul>
    `;
  }
}