{% extends "base.html" %}

{% block title %}Team - Tessera{% endblock %}

{% block content %}
<section>
  <div id="team-detail">
    <div class="loading">Loading...</div>
  </div>
</section>

<section>
  <h2>Team Members</h2>
  <div id="team-members">
    <div class="loading">Loading...</div>
  </div>
</section>

<section>
  <h2>Owned Assets</h2>
  <div id="bulk-actions" style="display: none; margin-bottom: 1rem; padding: 0.75rem; background: var(--light-gray); border-left: 4px solid var(--black);">
    <span id="selected-count">0</span> asset(s) selected
    <button class="secondary" style="margin-left: 1rem;" onclick="showReassignModal()">Reassign to Another Team</button>
    <button class="secondary" onclick="clearSelection()">Clear Selection</button>
  </div>
  <div id="team-assets">
    <div class="loading">Loading...</div>
  </div>
</section>

<!-- Reassign Modal -->
<div id="modal-overlay" class="modal-overlay" style="display: none;" onclick="closeModal()"></div>
<div id="reassign-modal" class="modal" style="display: none;">
  <div class="modal-content">
    <h3>Reassign Assets</h3>
    <p id="reassign-info" style="margin-bottom: 1rem; color: var(--gray);"></p>
    <form onsubmit="submitReassign(event)">
      <label for="target-team">Target Team</label>
      <select id="target-team" required>
        <option value="">Loading teams...</option>
      </select>
      <div style="margin-top: 1rem; display: flex; gap: 0.5rem;">
        <button type="submit">Reassign</button>
        <button type="button" class="secondary" onclick="closeModal()">Cancel</button>
      </div>
    </form>
  </div>
</div>

<style>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  backdrop-filter: blur(2px);
}
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem;
  z-index: 1001;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.modal-content h3 {
  margin-top: 0;
  margin-bottom: 1rem;
}
</style>
{% endblock %}

{% block scripts %}
<script>
const teamId = '{{ team_id }}';
let assetsOffset = 0;
const assetsLimit = 20;
let totalAssets = 0;
let selectedAssets = new Set();
let allTeams = [];

async function loadTeamDetail() {
  try {
    const team = await api.getTeam(teamId);

    document.getElementById('team-detail').innerHTML = `
      <h2>${escapeHtml(team.name)}</h2>
      <div class="card">
        <p><strong>ID:</strong> ${team.id}</p>
        <p><strong>Created:</strong> ${formatDate(team.created_at)}</p>
        ${team.metadata ? `<p><strong>Metadata:</strong> <pre>${JSON.stringify(team.metadata, null, 2)}</pre></p>` : ''}
      </div>
      <div style="margin-top: 1rem;">
        <a href="/teams">&larr; Back to Teams</a>
      </div>
    `;

    // Load team members and assets
    loadTeamMembers();
    loadTeamAssets();
  } catch (error) {
    showError(error.message);
    document.getElementById('team-detail').innerHTML = '<div class="error">Team not found</div>';
  }
}

async function loadTeamMembers() {
  const membersContainer = document.getElementById('team-members');
  membersContainer.innerHTML = '<div class="loading">Loading...</div>';

  try {
    const members = await api.getTeamMembers(teamId);

    if (!members.results || members.results.length === 0) {
      membersContainer.innerHTML = '<div class="empty">No members assigned to this team.</div>';
      return;
    }

    membersContainer.innerHTML = `
      <p style="margin-bottom: 0.5rem;"><strong>${members.total}</strong> member(s) in this team:</p>
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          ${members.results.map(m => `
            <tr>
              <td><a href="/users/${m.id}">${escapeHtml(m.name)}</a></td>
              <td>${escapeHtml(m.email)}</td>
              <td><a href="/users/${m.id}">View</a></td>
            </tr>
          `).join('')}
        </tbody>
      </table>
    `;
  } catch (error) {
    membersContainer.innerHTML = '<div class="error">Failed to load team members</div>';
  }
}

async function loadTeamAssets() {
  const assetsContainer = document.getElementById('team-assets');
  assetsContainer.innerHTML = '<div class="loading">Loading...</div>';

  try {
    const assets = await api.listAssets({ owner: teamId, limit: assetsLimit, offset: assetsOffset });
    totalAssets = assets.total || 0;

    if (!assets.results || assets.results.length === 0) {
      assetsContainer.innerHTML = '<div class="empty">No assets owned by this team.</div>';
      return;
    }

    const totalPages = Math.ceil(totalAssets / assetsLimit);
    const currentPage = Math.floor(assetsOffset / assetsLimit) + 1;

    assetsContainer.innerHTML = `
      <p style="margin-bottom: 0.5rem;"><strong>${totalAssets}</strong> asset(s) owned by this team:</p>
      <table>
        <thead>
          <tr>
            <th style="width: 30px;"><input type="checkbox" id="select-all" onchange="toggleSelectAll(this)"></th>
            <th>FQN</th>
            <th>Owner</th>
            <th>Active Contract</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          ${assets.results.map(a => `
            <tr>
              <td><input type="checkbox" class="asset-checkbox" data-asset-id="${a.id}" onchange="toggleAssetSelection('${a.id}')" ${selectedAssets.has(a.id) ? 'checked' : ''}></td>
              <td><a href="/assets/${a.id}">${escapeHtml(a.fqn)}</a></td>
              <td>${a.owner_user_name ? `<a href="/users/${a.owner_user_id}">${escapeHtml(a.owner_user_name)}</a>` : '<span style="color: var(--gray);">-</span>'}</td>
              <td>${a.active_contract_version || '<span style="color: var(--gray);">None</span>'}</td>
              <td><a href="/assets/${a.id}">View</a></td>
            </tr>
          `).join('')}
        </tbody>
      </table>
      ${totalPages > 1 ? `
        <div style="margin-top: 1rem;">
          <button class="secondary" ${assetsOffset === 0 ? 'disabled' : ''} onclick="goToAssetsPage(${currentPage - 1})">Prev</button>
          <span style="margin: 0 1rem;">Page ${currentPage} of ${totalPages}</span>
          <button class="secondary" ${currentPage >= totalPages ? 'disabled' : ''} onclick="goToAssetsPage(${currentPage + 1})">Next</button>
        </div>
      ` : ''}
    `;
    updateBulkActionsBar();
  } catch (error) {
    assetsContainer.innerHTML = '<div class="error">Failed to load assets</div>';
  }
}

function goToAssetsPage(page) {
  assetsOffset = (page - 1) * assetsLimit;
  loadTeamAssets();
}

function toggleAssetSelection(assetId) {
  if (selectedAssets.has(assetId)) {
    selectedAssets.delete(assetId);
  } else {
    selectedAssets.add(assetId);
  }
  updateBulkActionsBar();
  updateSelectAllCheckbox();
}

function toggleSelectAll(checkbox) {
  const checkboxes = document.querySelectorAll('.asset-checkbox');
  checkboxes.forEach(cb => {
    const assetId = cb.dataset.assetId;
    if (checkbox.checked) {
      selectedAssets.add(assetId);
    } else {
      selectedAssets.delete(assetId);
    }
    cb.checked = checkbox.checked;
  });
  updateBulkActionsBar();
}

function updateSelectAllCheckbox() {
  const selectAll = document.getElementById('select-all');
  const checkboxes = document.querySelectorAll('.asset-checkbox');
  if (selectAll && checkboxes.length > 0) {
    const allChecked = Array.from(checkboxes).every(cb => cb.checked);
    const someChecked = Array.from(checkboxes).some(cb => cb.checked);
    selectAll.checked = allChecked;
    selectAll.indeterminate = someChecked && !allChecked;
  }
}

function updateBulkActionsBar() {
  const bulkActions = document.getElementById('bulk-actions');
  const selectedCount = document.getElementById('selected-count');
  if (selectedAssets.size > 0) {
    bulkActions.style.display = 'block';
    selectedCount.textContent = selectedAssets.size;
  } else {
    bulkActions.style.display = 'none';
  }
}

function clearSelection() {
  selectedAssets.clear();
  const checkboxes = document.querySelectorAll('.asset-checkbox');
  checkboxes.forEach(cb => cb.checked = false);
  const selectAll = document.getElementById('select-all');
  if (selectAll) selectAll.checked = false;
  updateBulkActionsBar();
}

async function loadTeamsForModal() {
  if (allTeams.length === 0) {
    try {
      const data = await api.listTeams({ limit: 100 });
      allTeams = data.results.filter(t => t.id !== teamId);
    } catch (error) {
      showError('Failed to load teams: ' + error.message);
      return;
    }
  }
  const select = document.getElementById('target-team');
  select.innerHTML = '<option value="">Select a team...</option>' +
    allTeams.map(t => `<option value="${t.id}">${escapeHtml(t.name)}</option>`).join('');
}

function showReassignModal() {
  loadTeamsForModal();
  const info = document.getElementById('reassign-info');
  info.textContent = `Reassigning ${selectedAssets.size} asset(s) from this team.`;
  document.getElementById('modal-overlay').style.display = 'block';
  document.getElementById('reassign-modal').style.display = 'block';
}

function closeModal() {
  document.getElementById('modal-overlay').style.display = 'none';
  document.getElementById('reassign-modal').style.display = 'none';
}

async function submitReassign(event) {
  event.preventDefault();
  const targetTeamId = document.getElementById('target-team').value;
  if (!targetTeamId) {
    showError('Please select a target team');
    return;
  }

  const assetIds = Array.from(selectedAssets);
  const btn = event.target.querySelector('button[type="submit"]');
  btn.disabled = true;
  btn.textContent = 'Reassigning...';

  try {
    const result = await api.reassignTeamAssets(teamId, targetTeamId, assetIds);
    showSuccess(`Successfully reassigned ${result.reassigned} asset(s) to ${result.target_team.name}`);
    closeModal();
    clearSelection();
    loadTeamAssets();
  } catch (error) {
    showError('Failed to reassign assets: ' + error.message);
  } finally {
    btn.disabled = false;
    btn.textContent = 'Reassign';
  }
}

loadTeamDetail();
</script>
{% endblock %}