{% extends "base.html" %}

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

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

<section>
  <h2>Owned Assets</h2>
  <div id="user-assets">
    <div class="loading">Loading...</div>
  </div>
</section>
{% endblock %}

{% block scripts %}
<script>
const userId = '{{ user_id }}';
let assetsOffset = 0;
const assetsLimit = 20;
let totalAssets = 0;

async function loadUserDetail() {
  try {
    const user = await api.getUser(userId);

    document.getElementById('user-detail').innerHTML = `
      <h2>${escapeHtml(user.name)}</h2>
      <div class="card">
        <p><strong>Email:</strong> ${escapeHtml(user.email)}</p>
        <p><strong>ID:</strong> ${user.id}</p>
        <p><strong>Team:</strong> ${user.team_name ? `<a href="/teams/${user.team_id}">${escapeHtml(user.team_name)}</a>` : '<span style="color: var(--gray);">None</span>'}</p>
        <p><strong>Created:</strong> ${formatDate(user.created_at)}</p>
        ${user.metadata && Object.keys(user.metadata).length > 0 ? `<p><strong>Metadata:</strong> <pre>${JSON.stringify(user.metadata, null, 2)}</pre></p>` : ''}
      </div>
      <div style="margin-top: 1rem;">
        <a href="/users">&larr; Back to Users</a>
      </div>
    `;

    // Load assets
    loadUserAssets();
  } catch (error) {
    showError(error.message);
    document.getElementById('user-detail').innerHTML = '<div class="error">User not found</div>';
  }
}

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

  try {
    const assets = await api.listAssets({ owner_user: userId, 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 user.</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 user:</p>
      <table>
        <thead>
          <tr>
            <th>FQN</th>
            <th>Team</th>
            <th>Active Contract</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          ${assets.results.map(a => `
            <tr>
              <td><a href="/assets/${a.id}">${escapeHtml(a.fqn)}</a></td>
              <td>${a.owner_team_name ? `<a href="/teams/${a.owner_team_id}">${escapeHtml(a.owner_team_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>
      ` : ''}
    `;
  } catch (error) {
    assetsContainer.innerHTML = '<div class="error">Failed to load assets</div>';
  }
}

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

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