/** Sidebar DOM helpers. */

import { esc, timeLabel } from './utils.js';

export function renderProfiles(selectEl, profiles) {
  selectEl.innerHTML = profiles
    .map(p => `<option value="${esc(p.id)}">${esc(p.name)}</option>`)
    .join('');
}

export function renderSessions(listEl, sessions, currentId, { onSelect, onDelete, onPin }) {
  if (!sessions.length) {
    listEl.innerHTML = '<div class="empty-sessions">No conversations yet</div>';
    return;
  }

  listEl.innerHTML = sessions.map(s => {
    const active   = s.session_id === currentId ? ' active' : '';
    const pinned   = s.pinned ? ' pinned' : '';
    const preview  = esc(s.preview || 'No messages yet');
    const time     = timeLabel(s.last_active);
    const pinIcon  = s.pinned ? '📌' : '📍';
    const pinTitle = s.pinned ? 'Unpin' : 'Pin';
    return `
      <div class="session-item${active}${pinned}" data-id="${s.session_id}">
        <div class="s-body">
          <div class="s-preview">${s.pinned ? '📌 ' : ''}${preview}</div>
          <div class="s-time">${time}</div>
        </div>
        <div class="s-actions">
          <button class="btn-pin"    data-id="${s.session_id}" data-pinned="${s.pinned}" title="${pinTitle}">${pinIcon}</button>
          <button class="btn-delete" data-id="${s.session_id}" title="Delete">×</button>
        </div>
      </div>`;
  }).join('');

  listEl.querySelectorAll('.session-item').forEach(el =>
    el.addEventListener('click', () => onSelect(el.dataset.id))
  );
  listEl.querySelectorAll('.btn-pin').forEach(btn =>
    btn.addEventListener('click', e => {
      e.stopPropagation();
      onPin(btn.dataset.id, btn.dataset.pinned !== 'true');
    })
  );
  listEl.querySelectorAll('.btn-delete').forEach(btn =>
    btn.addEventListener('click', e => { e.stopPropagation(); onDelete(btn.dataset.id); })
  );
}

export function updateChatHeader(headerEl, profileId, profileName) {
  const titleEl = headerEl.querySelector('#chat-header-title');
  if (!titleEl) return;
  titleEl.innerHTML = profileId
    ? `<span class="profile-badge">${esc(profileId)}</span> ${esc(profileName || profileId)}`
    : 'Select a profile and start a new chat';
}