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

/** Read-only composition presenter: one untitled line of logo · name · count and
 * the total. The standalone AffiliationSummary keeps its titled card layout;
 * both use the same selector and Summary counts. */
export function createAffiliationBar(document: Document, context: RenderContext, signal: AbortSignal): HTMLElement {
  const section = document.createElement('section');
  section.className = 'hm-orgchart-affiliation-bar';
  section.dataset.contentSection = 'affiliation-bar';
  section.setAttribute('aria-label', '관계사별 인원 현황');
  const list = document.createElement('dl');
  list.className = 'hm-orgchart-affiliation-bar-list';
  for (const { affiliation, count } of selectAffiliationSummary(context.data, context.summary)) {
    const item = document.createElement('div');
    item.className = 'hm-orgchart-affiliation-bar-item';
    item.dataset.affiliationId = affiliation.id;
    item.dataset.employeeCount = String(count);
    const name = document.createElement('dt');
    name.textContent = affiliation.name;
    name.prepend(createAffiliationMark(document, affiliation.id, affiliation.name, signal));
    const value = document.createElement('dd');
    value.textContent = `${count}명`;
    item.append(name, value);
    list.append(item);
  }
  const total = document.createElement('div');
  total.className = 'hm-orgchart-affiliation-bar-item hm-orgchart-affiliation-bar-total';
  total.dataset.totalCount = String(context.summary.raw.total);
  const label = document.createElement('dt'); label.textContent = '총계';
  const value = document.createElement('dd'); value.textContent = `${context.summary.raw.total}명`;
  total.append(label, value);
  list.append(total);
  section.append(list);
  return section;
}