import { escapeHtml } from '/static/portal/common/formatters.js';
import { ERR_CODES } from '/static/portal/common/error-codes.js';

export function renderLoading(container, count = 3) {
  container.innerHTML = Array.from({ length: count }, () => '<div class="skeleton" aria-hidden="true"></div>').join('');
  container.setAttribute('aria-busy', 'true');
}

export function renderEmpty(container, title, message) {
  container.removeAttribute('aria-busy');
  container.innerHTML = `<div class="status-view"><div class="status-view__inner"><h2 class="status-view__title">${escapeHtml(title)}</h2><p class="status-view__message">${escapeHtml(message)}</p></div></div>`;
}

export function renderError(container, error, retry) {
  container.removeAttribute('aria-busy');
  if (error.code === ERR_CODES.AUTHENTICATION_REQUIRED || error.status === 401) {
    const next = encodeURIComponent(`${window.location.pathname}${window.location.search}`);
    const loginPath = window.location.pathname.includes('/employee-') ? '/portal/employee-console/login/' : '/portal/customer/login/';
    container.innerHTML = `<div class="status-view status-view--error"><div class="status-view__inner"><h2 class="status-view__title">登录状态已失效</h2><p class="status-view__message">请重新登录后继续访问。</p><a class="button" href="${loginPath}?next=${next}">重新登录</a></div></div>`;
    return;
  }
  if (error.code === ERR_CODES.AGENT_PERMISSION_DENIED || error.status === 403) {
    const needsQuestionnaire = String(error.message || '').includes('风险测评问卷');
    const action = needsQuestionnaire
      ? '<a class="button button--primary" href="/portal/customer/risk-questionnaire/">开始风险测评</a>'
      : '<a class="button button--secondary" href="/portal/guest/products/">浏览基金产品</a>';
    container.innerHTML = `<div class="status-view status-view--error"><div class="status-view__inner"><h2 class="status-view__title">当前账户暂不可访问</h2><p class="status-view__message">${escapeHtml(error.message || '该账号尚未开通此项权限')}</p>${action}</div></div>`;
    return;
  }
  container.innerHTML = `<div class="status-view status-view--error"><div class="status-view__inner"><h2 class="status-view__title">数据暂时不可用</h2><p class="status-view__message">${escapeHtml(error.message || '请求未完成')}</p><button class="button" type="button" data-retry>重试</button></div></div>`;
  container.querySelector('[data-retry]')?.addEventListener('click', retry, { once: true });
}