{% extends "base.html" %}

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

{% block content %}
<section>
  <h2>Assets</h2>

  <div id="owner-filter-banner" style="display: none; margin-bottom: 1rem; padding: 0.75rem; background: var(--light-gray); border-radius: 4px;"></div>

  <!-- Filters -->
  <div class="filters" style="margin-bottom: 1rem; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr auto; gap: 0.75rem; align-items: end; padding: 0.75rem 1rem; background: var(--light-gray); border: 1px solid #ddd;">
    <div style="display: flex; flex-direction: column; gap: 0.25rem;">
      <label for="search-fqn" style="margin: 0; font-size: 0.875rem;">FQN</label>
      <input type="text" id="search-fqn" placeholder="Search..." style="width: 100%; padding: 0.4rem 0.5rem; margin: 0; box-sizing: border-box;">
    </div>
    <div style="display: flex; flex-direction: column; gap: 0.25rem;">
      <label for="filter-team" style="margin: 0; font-size: 0.875rem;">Team</label>
      <select id="filter-team" style="width: 100%; padding: 0.4rem; margin: 0; box-sizing: border-box;" onchange="onTeamFilterChange()">
        <option value="">All teams</option>
      </select>
    </div>
    <div style="display: flex; flex-direction: column; gap: 0.25rem;">
      <label for="filter-owner" style="margin: 0; font-size: 0.875rem;">Owner</label>
      <select id="filter-owner" style="width: 100%; padding: 0.4rem; margin: 0; box-sizing: border-box;">
        <option value="">All owners</option>
        <option value="unassigned">Unassigned</option>
      </select>
    </div>
    <div style="display: flex; flex-direction: column; gap: 0.25rem;">
      <label for="filter-type" style="margin: 0; font-size: 0.875rem;">Type</label>
      <select id="filter-type" style="width: 100%; padding: 0.4rem; margin: 0; box-sizing: border-box;">
        <option value="">All types</option>
        <option value="model">Model</option>
        <option value="source">Source</option>
        <option value="seed">Seed</option>
        <option value="snapshot">Snapshot</option>
        <option value="api_endpoint">API Endpoint</option>
        <option value="graphql_query">GraphQL</option>
        <option value="kafka_topic">Kafka Topic</option>
        <option value="event_stream">Event Stream</option>
        <option value="other">Other</option>
      </select>
    </div>
    <div style="display: flex; gap: 0.5rem; padding-bottom: 0.1rem;">
      <button onclick="loadAssets()" style="padding: 0.4rem 1rem;">Filter</button>
      <button class="secondary" onclick="clearFilters()" style="padding: 0.4rem 1rem;">Clear</button>
    </div>
  </div>

  <!-- Bulk actions -->
  <div id="bulk-actions" style="display: none; margin-bottom: 1rem; padding: 0.75rem 1rem; background: var(--light-gray); border: 1px solid #ddd; gap: 1rem; align-items: center; flex-wrap: wrap;">
    <span><strong id="selected-count">0</strong> selected</span>
    <div style="display: flex; gap: 0.5rem; align-items: center;">
      <select id="bulk-owner-select" style="width: 180px; margin: 0;">
        <option value="">Select user...</option>
      </select>
      <button onclick="bulkAssignOwner()">Assign User</button>
    </div>
    <div style="display: flex; gap: 0.5rem; align-items: center;">
      <select id="bulk-team-select" style="width: 180px; margin: 0;">
        <option value="">Select team...</option>
      </select>
      <button onclick="bulkReassignTeam()">Reassign Team</button>
    </div>
    <button class="secondary" onclick="bulkDeleteAssets()" style="color: #dc3545;">Delete Selected</button>
    <button class="secondary" onclick="clearSelection()">Clear</button>
  </div>

  <div id="assets-list">
    <div class="loading">Loading...</div>
  </div>

  <div id="pagination" style="margin-top: 1rem;"></div>
</section>
{% endblock %}

{% block scripts %}
<script>
let currentOffset = 0;
const limit = 20;
let currentSortBy = 'fqn';
let currentSortOrder = 'asc';
let selectedAssets = new Set();
let allUsers = [];  // Store all users with team_id for intelligent filtering
let allTeams = [];  // Store all teams for create form

// Resource type badge styling
const typeColors = {
  // dbt types
  'model': { bg: '#e3f2fd', color: '#1565c0', label: 'model' },
  'seed': { bg: '#fff3e0', color: '#e65100', label: 'seed' },
  'source': { bg: '#f3e5f5', color: '#7b1fa2', label: 'source' },
  'snapshot': { bg: '#e8f5e9', color: '#2e7d32', label: 'snapshot' },
  // API types
  'api_endpoint': { bg: '#e8eaf6', color: '#3949ab', label: 'api' },
  'graphql_query': { bg: '#ede7f6', color: '#7b1fa2', label: 'graphql' },
  // Streaming types
  'kafka_topic': { bg: '#fce4ec', color: '#c2185b', label: 'kafka' },
  'event_stream': { bg: '#fff8e1', color: '#ff8f00', label: 'stream' },
  // Other
  'other': { bg: '#eceff1', color: '#546e7a', label: 'other' },
};

function getTypeBadge(asset) {
  const resourceType = asset.resource_type || 'model';
  const style = typeColors[resourceType] || { bg: '#f5f5f5', color: '#616161', label: resourceType };
  return `<span style="display: inline-block; padding: 0.15rem 0.4rem; font-size: 0.75em; background: ${style.bg}; color: ${style.color}; border-radius: 3px; margin-left: 0.5rem; vertical-align: middle;">${style.label}</span>`;
}

async function deleteAsset(id, fqn) {
  if (!confirm(`Delete asset "${fqn}"?`)) return;

  try {
    await api.deleteAsset(id);
    loadAssets();
  } catch (error) {
    showError(error.message);
  }
}

function sortBy(field) {
  if (currentSortBy === field) {
    currentSortOrder = currentSortOrder === 'asc' ? 'desc' : 'asc';
  } else {
    currentSortBy = field;
    currentSortOrder = 'asc';
  }
  currentOffset = 0;
  loadAssets();
}

function getSortClass(field) {
  if (currentSortBy !== field) return 'sortable';
  return 'sortable ' + currentSortOrder;
}

async function loadAssets() {
  const container = document.getElementById('assets-list');
  container.innerHTML = '<div class="loading">Loading...</div>';

  const searchFqn = document.getElementById('search-fqn').value.trim();
  const filterTeam = document.getElementById('filter-team').value;
  const filterOwner = document.getElementById('filter-owner').value;
  const filterType = document.getElementById('filter-type').value;

  // Get filter from URL query params (for links from other pages)
  const urlParams = new URLSearchParams(window.location.search);
  const ownerTeamFilter = filterTeam || urlParams.get('owner');
  const ownerUserFilter = filterOwner && filterOwner !== 'unassigned' ? filterOwner : urlParams.get('owner_user');
  const showUnowned = filterOwner === 'unassigned';

  // Show filter banner if filtering via URL
  const banner = document.getElementById('owner-filter-banner');
  if (urlParams.get('owner') || urlParams.get('owner_user')) {
    const teamId = urlParams.get('owner');
    const userId = urlParams.get('owner_user');
    if (teamId) {
      try {
        const team = await api.getTeam(teamId);
        banner.innerHTML = `Showing assets owned by team <strong><a href="/teams/${teamId}">${escapeHtml(team.name)}</a></strong> &nbsp; <a href="/assets" style="font-size: 0.9em;">[Clear filter]</a>`;
        banner.style.display = 'block';
      } catch (e) {
        banner.innerHTML = `Filtering by team ID: ${escapeHtml(teamId)} &nbsp; <a href="/assets" style="font-size: 0.9em;">[Clear filter]</a>`;
        banner.style.display = 'block';
      }
    } else if (userId) {
      try {
        const user = await api.getUser(userId);
        banner.innerHTML = `Showing assets owned by <strong><a href="/users/${userId}">${escapeHtml(user.name)}</a></strong> &nbsp; <a href="/assets" style="font-size: 0.9em;">[Clear filter]</a>`;
        banner.style.display = 'block';
      } catch (e) {
        banner.innerHTML = `Filtering by user ID: ${escapeHtml(userId)} &nbsp; <a href="/assets" style="font-size: 0.9em;">[Clear filter]</a>`;
        banner.style.display = 'block';
      }
    }
  } else {
    banner.style.display = 'none';
  }

  try {
    const params = { offset: currentOffset, limit, sort_by: currentSortBy, sort_order: currentSortOrder };
    if (searchFqn) params.fqn = searchFqn;
    if (ownerTeamFilter) params.owner = ownerTeamFilter;
    if (ownerUserFilter) params.owner_user = ownerUserFilter;
    if (showUnowned) params.unowned = true;
    if (filterType) params.resource_type = filterType;

    const data = await api.listAssets(params);

    if (!data.results || data.results.length === 0) {
      container.innerHTML = '<div class="empty">No assets found. Create one to get started.</div>';
      document.getElementById('bulk-actions').style.display = 'none';
      return;
    }

    container.innerHTML = `
      <table>
        <thead>
          <tr>
            <th style="width: 30px;"><input type="checkbox" id="select-all" onchange="toggleSelectAll(this.checked)"></th>
            <th class="${getSortClass('fqn')}" onclick="sortBy('fqn')">FQN</th>
            <th class="${getSortClass('owner_user')}" onclick="sortBy('owner_user')">Owner</th>
            <th class="${getSortClass('owner')}" onclick="sortBy('owner')">Team</th>
            <th>Contract</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          ${data.results.map(asset => `
            <tr>
              <td><input type="checkbox" class="asset-checkbox" data-id="${asset.id}" ${selectedAssets.has(asset.id) ? 'checked' : ''} onchange="toggleAssetSelection('${asset.id}', this.checked)"></td>
              <td><a href="/assets/${asset.id}">${escapeHtml(asset.fqn)}</a>${getTypeBadge(asset)}</td>
              <td>${asset.owner_user_name ? `<a href="/users/${asset.owner_user_id}">${escapeHtml(asset.owner_user_name)}</a>` : '<span style="color: var(--gray);">-</span>'}</td>
              <td><a href="/teams/${asset.owner_team_id}">${escapeHtml(asset.owner_team_name || asset.owner_team_id)}</a></td>
              <td>${asset.active_contract_version || '<span style="color: var(--gray);">-</span>'}</td>
              <td>
                <button class="secondary" onclick="deleteAsset('${asset.id}', '${escapeHtml(asset.fqn)}')" style="padding: 0.25rem 0.5rem;">Delete</button>
              </td>
            </tr>
          `).join('')}
        </tbody>
      </table>
    `;

    updateBulkActionsVisibility();

    // Pagination and results count
    const paginationContainer = document.getElementById('pagination');
    const totalPages = Math.ceil(data.total / limit);
    const currentPage = Math.floor(currentOffset / limit) + 1;
    const showingStart = currentOffset + 1;
    const showingEnd = Math.min(currentOffset + data.results.length, data.total);

    if (totalPages > 1) {
      paginationContainer.innerHTML = `
        <div style="display: flex; justify-content: space-between; align-items: center;">
          <span style="color: var(--gray);">Showing ${showingStart}-${showingEnd} of ${data.total} results</span>
          <div>
            <button class="secondary" ${currentOffset === 0 ? 'disabled' : ''} onclick="goToPage(${currentPage - 1})">Prev</button>
            <span style="margin: 0 1rem;">Page ${currentPage} of ${totalPages}</span>
            <button class="secondary" ${currentPage >= totalPages ? 'disabled' : ''} onclick="goToPage(${currentPage + 1})">Next</button>
          </div>
        </div>
      `;
    } else {
      paginationContainer.innerHTML = `<span style="color: var(--gray);">Showing ${data.results.length} of ${data.total} results</span>`;
    }
  } catch (error) {
    showError(error.message);
    container.innerHTML = '<div class="error">Failed to load assets</div>';
  }
}

function goToPage(page) {
  currentOffset = (page - 1) * limit;
  loadAssets();
}

// Allow searching on Enter
document.getElementById('search-fqn').addEventListener('keypress', (e) => {
  if (e.key === 'Enter') loadAssets();
});

// Selection functions
function toggleSelectAll(checked) {
  const checkboxes = document.querySelectorAll('.asset-checkbox');
  checkboxes.forEach(cb => {
    cb.checked = checked;
    if (checked) {
      selectedAssets.add(cb.dataset.id);
    } else {
      selectedAssets.delete(cb.dataset.id);
    }
  });
  updateBulkActionsVisibility();
}

function toggleAssetSelection(assetId, checked) {
  if (checked) {
    selectedAssets.add(assetId);
  } else {
    selectedAssets.delete(assetId);
  }
  updateBulkActionsVisibility();
}

function updateBulkActionsVisibility() {
  const bulkActions = document.getElementById('bulk-actions');
  const count = selectedAssets.size;
  document.getElementById('selected-count').textContent = count;
  bulkActions.style.display = count > 0 ? 'flex' : 'none';
}

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

async function bulkAssignOwner() {
  const ownerId = document.getElementById('bulk-owner-select').value;
  if (!ownerId) {
    showError('Please select a user');
    return;
  }

  if (selectedAssets.size === 0) {
    showError('No assets selected');
    return;
  }

  try {
    await api.bulkAssignAssets(Array.from(selectedAssets), ownerId);
    showSuccess(`Assigned user to ${selectedAssets.size} assets`);
    clearSelection();
    loadAssets();
  } catch (error) {
    showError(error.message);
  }
}

async function bulkReassignTeam() {
  const teamId = document.getElementById('bulk-team-select').value;
  if (!teamId) {
    showError('Please select a team');
    return;
  }

  if (selectedAssets.size === 0) {
    showError('No assets selected');
    return;
  }

  const count = selectedAssets.size;
  if (!confirm(`Reassign ${count} asset(s) to the selected team?`)) return;

  try {
    // Update each asset's owner_team_id
    let successCount = 0;
    for (const assetId of selectedAssets) {
      try {
        await api.updateAsset(assetId, { owner_team_id: teamId });
        successCount++;
      } catch (e) {
        console.error(`Failed to update asset ${assetId}:`, e);
      }
    }
    showSuccess(`Reassigned ${successCount} of ${count} assets to new team`);
    clearSelection();
    loadAssets();
  } catch (error) {
    showError(error.message);
  }
}

async function bulkDeleteAssets() {
  if (selectedAssets.size === 0) {
    showError('No assets selected');
    return;
  }

  const count = selectedAssets.size;
  if (!confirm(`Delete ${count} asset(s)? This action cannot be undone.`)) return;

  try {
    let successCount = 0;
    for (const assetId of selectedAssets) {
      try {
        await api.deleteAsset(assetId);
        successCount++;
      } catch (e) {
        console.error(`Failed to delete asset ${assetId}:`, e);
      }
    }
    showSuccess(`Deleted ${successCount} of ${count} assets`);
    clearSelection();
    loadAssets();
  } catch (error) {
    showError(error.message);
  }
}

function clearFilters() {
  document.getElementById('search-fqn').value = '';
  document.getElementById('filter-team').value = '';
  document.getElementById('filter-owner').value = '';
  document.getElementById('filter-type').value = '';
  window.history.replaceState({}, '', '/assets');
  loadAssets();
}

// Load filter options
async function loadFilterOptions() {
  try {
    // Load teams
    const teamsData = await api.listTeams({ limit: 100 });
    allTeams = teamsData.results || [];
    const teamSelect = document.getElementById('filter-team');
    teamSelect.innerHTML = '<option value="">All teams</option>' +
      allTeams.map(t => `<option value="${t.id}">${escapeHtml(t.name)}</option>`).join('');

    // Also populate bulk team select
    const bulkTeamSelect = document.getElementById('bulk-team-select');
    bulkTeamSelect.innerHTML = '<option value="">Select team...</option>' +
      allTeams.map(t => `<option value="${t.id}">${escapeHtml(t.name)}</option>`).join('');

    // Load users and store for intelligent filtering
    const usersData = await api.listUsers({ limit: 100 });
    allUsers = usersData.results;  // Store for team filtering

    const ownerSelect = document.getElementById('filter-owner');
    ownerSelect.innerHTML = '<option value="">All owners</option><option value="unassigned">Unassigned</option>' +
      allUsers.map(u => `<option value="${u.id}">${escapeHtml(u.name)}</option>`).join('');

    // Also populate bulk user assign select
    const bulkSelect = document.getElementById('bulk-owner-select');
    bulkSelect.innerHTML = '<option value="">Select user...</option>' +
      allUsers.map(u => `<option value="${u.id}">${escapeHtml(u.name)}</option>`).join('');
  } catch (error) {
    console.error('Failed to load filter options:', error);
  }
}

// Handle team filter change - filter owner dropdown to show only users from selected team
function onTeamFilterChange() {
  const selectedTeamId = document.getElementById('filter-team').value;
  const ownerSelect = document.getElementById('filter-owner');
  const bulkOwnerSelect = document.getElementById('bulk-owner-select');
  const currentOwnerValue = ownerSelect.value;

  if (!selectedTeamId) {
    // No team filter - show all users
    ownerSelect.innerHTML = '<option value="">All owners</option><option value="unassigned">Unassigned</option>' +
      allUsers.map(u => `<option value="${u.id}">${escapeHtml(u.name)}</option>`).join('');
    bulkOwnerSelect.innerHTML = '<option value="">Select user...</option>' +
      allUsers.map(u => `<option value="${u.id}">${escapeHtml(u.name)}</option>`).join('');
  } else {
    // Filter to users from the selected team
    const teamUsers = allUsers.filter(u => u.team_id === selectedTeamId);
    ownerSelect.innerHTML = '<option value="">All owners</option><option value="unassigned">Unassigned</option>' +
      teamUsers.map(u => `<option value="${u.id}">${escapeHtml(u.name)}</option>`).join('');
    bulkOwnerSelect.innerHTML = '<option value="">Select user...</option>' +
      teamUsers.map(u => `<option value="${u.id}">${escapeHtml(u.name)}</option>`).join('');
  }

  // Reset owner selection if the previously selected owner isn't in the new list
  const ownerOptions = Array.from(ownerSelect.options).map(o => o.value);
  if (currentOwnerValue && !ownerOptions.includes(currentOwnerValue)) {
    ownerSelect.value = '';
  }
}

// Initialize
loadFilterOptions();
loadAssets();
</script>
{% endblock %}