{% extends "base.html" %}

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

{% block content %}
<section>
  <h2>Overview</h2>
  <div class="stats">
    <a href="/teams" class="stat stat-link">
      <div class="stat-value" id="stat-teams">-</div>
      <div class="stat-label">Teams</div>
    </a>
    <a href="/assets" class="stat stat-link">
      <div class="stat-value" id="stat-assets">-</div>
      <div class="stat-label">Assets</div>
    </a>
    <a href="/contracts" class="stat stat-link">
      <div class="stat-value" id="stat-contracts">-</div>
      <div class="stat-label">Contracts</div>
    </a>
    <a href="/proposals" class="stat stat-link stat-alert" id="stat-proposals-card">
      <div class="stat-value" id="stat-proposals">-</div>
      <div class="stat-label">Pending Proposals</div>
    </a>
  </div>
</section>

<section>
  <h2>Quick Actions</h2>
  <div class="quick-actions">
    <a href="/teams" class="quick-action" onclick="event.preventDefault(); showQuickCreateTeam();">
      <span class="quick-action-icon">+</span>
      <span>Create Team</span>
    </a>
    <a href="/users" class="quick-action" onclick="event.preventDefault(); showQuickCreateUser();">
      <span class="quick-action-icon">+</span>
      <span>Create User</span>
    </a>
    {% if current_user and current_user.role == 'admin' %}
    <a href="/import" class="quick-action">
      <span class="quick-action-icon">&#8593;</span>
      <span>Import dbt Manifest</span>
    </a>
    {% endif %}
  </div>
</section>

<!-- Quick Create Modals -->
<div id="modal-overlay" class="modal-overlay" style="display: none;" onclick="closeQuickModal()"></div>

<div id="quick-team-modal" class="modal" style="display: none;">
  <div class="modal-content">
    <h3>Create Team</h3>
    <form onsubmit="quickCreateTeam(event)">
      <label for="quick-team-name">Name</label>
      <input type="text" id="quick-team-name" required placeholder="e.g., data-platform">
      <div style="margin-top: 1rem; display: flex; gap: 0.5rem;">
        <button type="submit">Create</button>
        <button type="button" class="secondary" onclick="closeQuickModal()">Cancel</button>
      </div>
    </form>
  </div>
</div>

<div id="quick-user-modal" class="modal" style="display: none;">
  <div class="modal-content">
    <h3>Create User</h3>
    <form onsubmit="quickCreateUser(event)">
      <label for="quick-user-name">Name</label>
      <input type="text" id="quick-user-name" required placeholder="e.g., Jane Smith">
      <label for="quick-user-email">Email</label>
      <input type="email" id="quick-user-email" required placeholder="e.g., jane@example.com">
      <label for="quick-user-team">Team (optional)</label>
      <select id="quick-user-team">
        <option value="">No team</option>
      </select>
      <div style="margin-top: 1rem; display: flex; gap: 0.5rem;">
        <button type="submit">Create</button>
        <button type="button" class="secondary" onclick="closeQuickModal()">Cancel</button>
      </div>
    </form>
  </div>
</div>


<style>
.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.quick-action {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 4px;
  text-decoration: none;
  color: var(--black);
  transition: all 0.2s ease;
}
.quick-action:hover {
  border-color: var(--black);
  background: var(--bg-secondary);
}
.quick-action-icon {
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--primary);
}
.stat-link {
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
}
.stat-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.stat-alert .stat-value {
  color: #dc3545;
}
.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>

<section>
  <h2>Pending Proposals</h2>
  <div id="pending-proposals">
    <div class="loading">Loading...</div>
  </div>
</section>

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

{% block scripts %}
<script>
async function loadDashboard() {
  try {
    // Load stats in parallel
    const [teams, assets, contracts, proposals] = await Promise.all([
      api.listTeams({ limit: 1 }),
      api.listAssets({ limit: 1 }),
      api.listContracts({ limit: 1 }),
      api.listProposals({ status: 'pending', limit: 1 }),
    ]);

    document.getElementById('stat-teams').textContent = teams.total || 0;
    document.getElementById('stat-assets').textContent = assets.total || 0;
    document.getElementById('stat-contracts').textContent = contracts.total || 0;
    document.getElementById('stat-proposals').textContent = proposals.total || 0;

    // Load pending proposals
    const pendingProposals = await api.listProposals({ status: 'pending', limit: 5 });
    const proposalsContainer = document.getElementById('pending-proposals');

    if (!pendingProposals.results || pendingProposals.results.length === 0) {
      proposalsContainer.innerHTML = '<div class="empty">No pending proposals</div>';
    } else {
      proposalsContainer.innerHTML = `
        <table>
          <thead>
            <tr>
              <th>Asset</th>
              <th>Change Type</th>
              <th>Breaking Changes</th>
              <th>Acknowledgments</th>
              <th>Created</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            ${pendingProposals.results.map(p => `
              <tr>
                <td><a href="/assets/${p.asset_id}">${escapeHtml(p.asset_fqn || p.asset_id)}</a></td>
                <td><span class="status status-${p.change_type === 'major' ? 'deprecated' : 'active'}">${escapeHtml(p.change_type || 'unknown')}</span></td>
                <td>${p.breaking_changes_count || 0}</td>
                <td>
                  ${p.total_consumers > 0
                    ? `<span style="color: ${p.acknowledgment_count >= p.total_consumers ? 'green' : 'orange'};">${p.acknowledgment_count || 0}/${p.total_consumers}</span>`
                    : '<span style="color: var(--gray);">N/A</span>'
                  }
                </td>
                <td>${formatDate(p.proposed_at)}</td>
                <td><a href="/proposals/${p.id}">View</a></td>
              </tr>
            `).join('')}
          </tbody>
        </table>
      `;
    }

    // Load recent assets
    const recentAssets = await api.listAssets({ limit: 5 });
    const assetsContainer = document.getElementById('recent-assets');

    if (!recentAssets.results || recentAssets.results.length === 0) {
      assetsContainer.innerHTML = '<div class="empty">No assets found</div>';
    } else {
      assetsContainer.innerHTML = `
        <table>
          <thead>
            <tr>
              <th>FQN</th>
              <th>Owner</th>
              <th>Active Contract</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            ${recentAssets.results.map(a => `
              <tr>
                <td><a href="/assets/${a.id}">${escapeHtml(a.fqn)}</a></td>
                <td><a href="/teams/${a.owner_team_id}">${escapeHtml(a.owner_team_name || a.owner_team_id)}</a></td>
                <td>${a.active_contract_version ? `<span class="status status-active">${escapeHtml(a.active_contract_version)}</span>` : '<span style="color: var(--gray);">None</span>'}</td>
                <td><a href="/assets/${a.id}">View</a></td>
              </tr>
            `).join('')}
          </tbody>
        </table>
      `;
    }
  } catch (error) {
    showError(error.message);
  }
}

loadDashboard();

// Quick Create Modal Functions
let teamsCache = [];

async function loadTeamsCache() {
  if (teamsCache.length === 0) {
    try {
      const data = await api.listTeams({ limit: 100 });
      teamsCache = data.results || [];
    } catch (e) {
      console.error('Failed to load teams:', e);
    }
  }
  return teamsCache;
}

function closeQuickModal() {
  document.getElementById('modal-overlay').style.display = 'none';
  document.getElementById('quick-team-modal').style.display = 'none';
  document.getElementById('quick-user-modal').style.display = 'none';
}

function showQuickCreateTeam() {
  document.getElementById('modal-overlay').style.display = 'block';
  document.getElementById('quick-team-modal').style.display = 'block';
  document.getElementById('quick-team-name').value = '';
  document.getElementById('quick-team-name').focus();
}

async function showQuickCreateUser() {
  document.getElementById('modal-overlay').style.display = 'block';
  document.getElementById('quick-user-modal').style.display = 'block';
  document.getElementById('quick-user-name').value = '';
  document.getElementById('quick-user-email').value = '';
  document.getElementById('quick-user-name').focus();

  // Populate teams dropdown
  const teams = await loadTeamsCache();
  const select = document.getElementById('quick-user-team');
  select.innerHTML = '<option value="">No team</option>' +
    teams.map(t => `<option value="${t.id}">${escapeHtml(t.name)}</option>`).join('');
}

async function quickCreateTeam(event) {
  event.preventDefault();
  const name = document.getElementById('quick-team-name').value.trim();
  if (!name) return;

  try {
    const team = await api.createTeam({ name });
    teamsCache = []; // Clear cache
    closeQuickModal();
    showSuccess(`Team "${name}" created successfully`);
    loadDashboard(); // Refresh stats
  } catch (error) {
    showError(error.message);
  }
}

async function quickCreateUser(event) {
  event.preventDefault();
  const name = document.getElementById('quick-user-name').value.trim();
  const email = document.getElementById('quick-user-email').value.trim();
  const teamId = document.getElementById('quick-user-team').value || null;
  if (!name || !email) return;

  try {
    await api.createUser({ name, email, team_id: teamId });
    closeQuickModal();
    showSuccess(`User "${name}" created successfully`);
  } catch (error) {
    showError(error.message);
  }
}

</script>
{% endblock %}