{% extends "base.html" %}

{% block title %}Credential Vault{% endblock %}
{% block page_title %}Credential Vault{% endblock %}

{% block content %}
<div class="space-y-5">
  <!-- Header info -->
  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
    <div class="flex items-center gap-3">
      <div class="w-10 h-10 rounded-lg bg-violet-500/10 flex items-center justify-center">
        <svg class="w-5 h-5 text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
      </div>
      <div>
        <div class="text-sm font-display font-semibold text-slate-200">Credential Vault</div>
        <div class="text-xs text-slate-500">Names and keys only. Values are never exposed in the dashboard.</div>
      </div>
      <div class="ml-auto flex items-center gap-4">
        <div class="text-center">
          <div class="text-lg font-mono font-semibold text-slate-200" id="total-creds">--</div>
          <div class="text-[10px] text-slate-500">credentials</div>
        </div>
        <div class="text-center">
          <div class="text-lg font-mono font-semibold text-violet-400" id="total-services">--</div>
          <div class="text-[10px] text-slate-500">services</div>
        </div>
      </div>
    </div>
  </div>

  <!-- Search -->
  <div class="flex items-center gap-3">
    <input type="text" id="cred-search" placeholder="Search services or keys..." class="flex-1 px-3 py-2 rounded-lg bg-slate-800/50 border border-slate-700/50 text-sm text-slate-200 placeholder-slate-600 focus:outline-none focus:ring-1 focus:ring-violet-500" oninput="searchCredentials(this.value)">
  </div>

  <!-- Credentials grouped by service -->
  <div class="space-y-4" id="cred-groups">
    <div class="text-xs text-slate-600 py-8 text-center">loading...</div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let allCredentials = [];
let serviceGroups = {};

function searchCredentials(query) {
  const q = query.toLowerCase();
  document.querySelectorAll('#cred-groups .cred-group').forEach(group => {
    const items = group.querySelectorAll('.cred-item');
    let anyVisible = false;
    items.forEach(item => {
      const match = item.textContent.toLowerCase().includes(q);
      item.style.display = match ? '' : 'none';
      if (match) anyVisible = true;
    });
    // Also check the group title
    const title = group.querySelector('.group-title');
    if (title && title.textContent.toLowerCase().includes(q)) {
      items.forEach(item => item.style.display = '');
      anyVisible = true;
    }
    group.style.display = anyVisible ? '' : 'none';
  });
}

function renderCredentials() {
  const container = document.getElementById('cred-groups');

  const groups = {};
  allCredentials.forEach(c => {
    const svc = c.service || 'unknown';
    if (!groups[svc]) groups[svc] = [];
    groups[svc].push(c);
  });

  const sortedServices = Object.keys(groups).sort();
  document.getElementById('total-creds').textContent = allCredentials.length;
  document.getElementById('total-services').textContent = sortedServices.length;

  if (!sortedServices.length) {
    container.innerHTML = '<div class="text-xs text-slate-600 py-8 text-center">No credentials stored</div>';
    return;
  }

  container.innerHTML = sortedServices.map(svc => {
    const creds = groups[svc];
    return `<div class="cred-group bg-slate-900/50 border border-slate-800/50 rounded-xl overflow-hidden card">
      <div class="flex items-center gap-3 px-5 py-3 border-b border-slate-800/30 bg-slate-800/20">
        <svg class="w-4 h-4 text-violet-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/></svg>
        <span class="group-title text-sm font-display font-medium text-slate-200">${escapeHtml(svc)}</span>
        <span class="ml-auto text-xs font-mono text-slate-500">${creds.length} key${creds.length !== 1 ? 's' : ''}</span>
      </div>
      <div class="divide-y divide-slate-800/20">
        ${creds.map(c => `<div class="cred-item flex items-center gap-3 px-5 py-2.5 hover:bg-slate-800/20 transition-colors">
          <svg class="w-3.5 h-3.5 text-slate-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
          <span class="text-xs font-mono text-slate-300">${escapeHtml(c.key || '--')}</span>
          ${c.notes ? `<span class="text-[10px] text-slate-500 ml-auto truncate max-w-[200px]">${escapeHtml(c.notes)}</span>` : ''}
        </div>`).join('')}
      </div>
    </div>`;
  }).join('');
}

async function loadCredentials() {
  const data = await fetchJSON('/api/credentials');
  if (!data) return;

  allCredentials = data.credentials || [];
  serviceGroups = data.services || {};

  // If only services grouping provided, flatten
  if (!allCredentials.length && Object.keys(serviceGroups).length) {
    Object.entries(serviceGroups).forEach(([svc, keys]) => {
      (Array.isArray(keys) ? keys : []).forEach(k => {
        allCredentials.push({ service: svc, key: typeof k === 'string' ? k : k.key, notes: typeof k === 'object' ? k.notes : '' });
      });
    });
  }

  renderCredentials();
}

loadCredentials();
setInterval(loadCredentials, 60000);
</script>
{% endblock %}