// ── 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">💬 ${esc(msgLabel)}</span>` : ''}
            ${workspaceLabel ? `<span class="card-meta-item card-workspace" title="${esc(workspaceLabel)}">📁 ${esc(workspaceLabel)}</span>` : ''}
          </div>
        </div>
      `;
      card.addEventListener('click', () => navigateTo('session', { id: s.sessionId }));
      grid.appendChild(card);
    }

    // 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">🎭 ${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'
  });
}