// Public profile view (/users/{id}): full bio, contact, links and custom
// details from the user's profile card.
import { api } from '/static/js/api.js';

const root = document.getElementById('profile-root');
const errorBox = document.getElementById('error');
const uid = root.dataset.userId;

const HIDDEN_EXTRA = new Set(['ticketingIdentities', 'savedBoardFilters']);

const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({
  '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
}[c]));

// only allow safe link schemes; bare domains get https://, others are blocked
export function safeUrl(u) {
  const s = String(u ?? '').trim();
  if (/^(https?:\/\/|mailto:)/i.test(s)) return s;
  if (/^[a-z][a-z0-9+.-]*:/i.test(s)) return '#';
  return s ? 'https://' + s : '#';
}

async function load() {
  try {
    const res = await api('GET', `/api/v1/users/${uid}/card`);
    const c = res.card;
    const roles = ['admin', 'consultant', 'developer'].filter((r) => c.roles && c.roles[r]);
    const links = ((c.contact && c.contact.links) || []).filter(Boolean);
    const extra = Object.entries(c.extra || {})
      .filter(([k, v]) => !HIDDEN_EXTRA.has(k) && v !== null && typeof v !== 'object');
    const hasContact = (c.contact && (c.contact.phone || c.contact.location)) || links.length;
    root.innerHTML = `
      <div class="card">
        <div style="display:flex;gap:16px;align-items:center">
          ${c.avatarFileId
            ? `<img class="avatar large" src="/files/${c.avatarFileId}" alt="">`
            : `<span class="avatar large">${esc((c.name || '?').slice(0, 1).toUpperCase())}</span>`}
          <div>
            <h1 style="margin:0">${esc(c.name)}</h1>
            <p style="margin:4px 0">${roles.map((r) => `<span class="badge">${r}</span>`).join(' ')}</p>
          </div>
        </div>
        ${c.bio ? `<h2 class="mt">Bio</h2><p style="white-space:pre-wrap">${esc(c.bio)}</p>` : ''}
        ${hasContact ? '<h2 class="mt">Contact</h2>' : ''}
        ${c.contact && c.contact.location ? `<p class="muted">📍 ${esc(c.contact.location)}</p>` : ''}
        ${c.contact && c.contact.phone ? `<p class="muted">📞 ${esc(c.contact.phone)}</p>` : ''}
        ${links.length ? `<ul>${links.map((l) =>
          `<li><a href="${esc(safeUrl(l))}" target="_blank" rel="noopener">${esc(l)}</a></li>`).join('')}</ul>` : ''}
        ${extra.length ? `<h2 class="mt">Details</h2>${extra.map(([k, v]) =>
          `<p class="muted"><strong>${esc(k)}:</strong> ${esc(String(v))}</p>`).join('')}` : ''}
      </div>`;
  } catch (e) {
    errorBox.textContent = 'Could not load this profile.';
  }
}

load();