// ── Dashboard Page ──

registerPage('dashboard', {
  async init() {
    const agents = await apiGetAgents();
    const agentMap = {};
    for (const a of agents) agentMap[a.agentId] = a;

    // Sessions
    const sessions = await apiGetSessions();
    const grid = document.getElementById('sessionCards');
    grid.innerHTML = '';

    for (const s of sessions) {
      const agent = s.agentId ? agentMap[s.agentId] : null;
      const card = document.createElement('div');
      card.className = 'card clickable';
      const msgLabel = s.messageCount !== undefined
        ? `${s.messageCount}${s.totalMessageCount !== s.messageCount ? ` (${s.totalMessageCount})` : ''} Nachrichten`
        : '';
      const workspaceLabel = s.workspace ? s.workspace : '';

      card.innerHTML = `
        <div class="card-image">${s.image ? `<img src="${s.image}" alt="">` : ''}</div>
        <div class="card-body">
          <div class="card-title-row">
            <span class="card-title">${esc(s.name || 'Unbenannt')}</span>
            ${agent ? `<span class="badge">${esc(agent.name)}</span>` : ''}
          </div>
          ${s.description ? `<div class="card-desc">${esc(s.description)}</div>` : ''}
          <div class="card-meta">
            ${msgLabel ? `<span class="card-meta-item"><i class="fa fa-comment"></i> ${esc(msgLabel)}</span>` : ''}
            ${workspaceLabel ? `<span class="card-meta-item card-workspace" title="${esc(workspaceLabel)}"><i class="fa fa-folder"></i> ${esc(workspaceLabel)}</span>` : ''}
          </div>
        </div>
      `;
      card.addEventListener('click', () => navigateTo('session', { id: s.sessionId }));
      grid.appendChild(card);

      // Git-Status asynchron laden
      if (s.workspace) {
        apiGitStatus(s.sessionId).then(status => {
          if (!status || status.error) return;
          const addCount = (status.add || []).length;
          const editCount = (status.edit || []).length;
          const deleteCount = (status.delete || []).length;
          const outgoing = status.outgoing || 0;
          if (addCount + editCount + deleteCount + outgoing === 0) return;

          const metaEl = card.querySelector('.card-meta');
          if (!metaEl) return;

          const parts = [];
          const tooltipParts = [];
          if (addCount > 0) {
            parts.push(`<span class="git-badge git-add">+${addCount}</span>`);
            tooltipParts.push(`${addCount} ${addCount === 1 ? 'Datei' : 'Dateien'} hinzugefügt`);
          }
          if (editCount > 0) {
            parts.push(`<span class="git-badge git-edit">~${editCount}</span>`);
            tooltipParts.push(`${editCount} ${editCount === 1 ? 'Datei' : 'Dateien'} geändert`);
          }
          if (deleteCount > 0) {
            parts.push(`<span class="git-badge git-delete">-${deleteCount}</span>`);
            tooltipParts.push(`${deleteCount} ${deleteCount === 1 ? 'Datei' : 'Dateien'} gelöscht`);
          }
          if (outgoing > 0) {
            parts.push(`<span class="git-badge git-outgoing"><i class="fa fa-arrow-up"></i> ${outgoing}</span>`);
            tooltipParts.push(`${outgoing} ${outgoing === 1 ? 'Commit muss' : 'Commits müssen'} noch gepusht werden`);
          }

          const gitEl = document.createElement('span');
          gitEl.className = 'card-meta-item card-git-status';
          gitEl.title = tooltipParts.join('\n');
          gitEl.innerHTML = `<i class="fa fa-code-fork"></i> ${parts.join(' ')}`;
          metaEl.appendChild(gitEl);
        });
      }
    }

    // Neue Session Placeholder
    const newSession = document.createElement('div');
    newSession.className = 'card placeholder clickable';
    newSession.innerHTML = '<div class="card-body"><div class="card-title">+ Neue Session</div></div>';
    newSession.addEventListener('click', () => navigateTo('session'));
    document.getElementById('newSessionCard').appendChild(newSession);

    // Agents
    const agentGrid = document.getElementById('agentCards');
    agentGrid.innerHTML = '';

    for (const a of agents) {
      const card = document.createElement('div');
      card.className = 'card clickable';
      card.innerHTML = `
        <div class="card-image">${a.avatar ? `<img src="${a.avatar}" alt="">` : ''}</div>
        <div class="card-body">
          <div class="card-title-row">
            <span class="card-title">${esc(a.name)}</span>
            <span class="badge">${esc(a.model)}</span>
          </div>
          ${a.description ? `<div class="card-desc">${esc(a.description)}</div>` : ''}
          ${a.persona ? `<div class="card-meta"><span class="card-meta-item card-persona"><i class="fa fa-user-secret"></i> ${esc(a.persona)}</span></div>` : ''}
        </div>
      `;
      card.addEventListener('click', () => navigateTo('agent', { id: a.agentId }));
      agentGrid.appendChild(card);
    }

    const placeholder = document.createElement('div');
    placeholder.className = 'card placeholder clickable';
    placeholder.innerHTML = '<div class="card-body"><div class="card-title">+ Neuer Agent</div></div>';
    placeholder.addEventListener('click', () => navigateTo('agent'));
    document.getElementById('newAgentCard').appendChild(placeholder);
  },
  destroy() {}
});

function esc(s) {
  const d = document.createElement('div');
  d.textContent = s;
  return d.innerHTML;
}

function formatDate(iso) {
  if (!iso) return '';
  return new Date(iso).toLocaleString('de-AT', {
    day: '2-digit', month: '2-digit', year: '2-digit',
    hour: '2-digit', minute: '2-digit'
  });
}