import { selectAffiliationSummary } from '../data/content-selectors.js';
import type { RenderContext } from './render.js';
import { createAffiliationMark } from './affiliation-mark.js';

export function createAffiliationSummary(document: Document, context: RenderContext): HTMLElement {
  const section = document.createElement('section');
  section.className = 'hm-orgchart-affiliation-summary';
  section.dataset.contentSection = 'affiliation-summary';
  section.setAttribute('aria-label', '관계사별 원본 인원 현황');
  const heading = document.createElement('h3');
  heading.className = 'hm-orgchart-summary-title';
  heading.textContent = '관계사별 인원 현황';
  const total = document.createElement('p');
  total.className = 'hm-orgchart-raw-total';
  total.textContent = `Raw Count · 전체 ${context.summary.raw.total}명`;
  section.append(heading, total);
  const list = document.createElement('dl');
  list.className = 'hm-orgchart-affiliation-list';
  for (const { affiliation, count } of selectAffiliationSummary(context.data, context.summary)) {
    const item = document.createElement('div');
    item.className = 'hm-orgchart-affiliation-item';
    item.dataset.affiliationId = affiliation.id;
    const name = document.createElement('dt');
    name.className = 'hm-orgchart-affiliation-name';
    // The contract has no logo field. The declared name is the safe textual fallback.
    name.textContent = affiliation.name;
    name.prepend(createAffiliationMark(document, affiliation.id, affiliation.name));
    const value = document.createElement('dd');
    value.className = 'hm-orgchart-affiliation-count';
    value.textContent = `${count}명`;
    item.append(name, value);
    list.append(item);
  }
  section.append(list);
  if (!context.data.affiliations.length) {
    const empty = document.createElement('p');
    empty.className = 'hm-orgchart-content-empty';
    empty.textContent = '등록된 관계사가 없습니다.';
    section.append(empty);
  }
  return section;
}