/* =============================================================================
 * A04_NewsHistory_UI_Page.ts
 * 로그인 전 04: 최신소식 및 개선 이력 (타임라인 목록)
 *
 * 제약 준수:
 *   - 모든 문구는 ui_template_locale.ts 참조 (하드코딩 금지).
 *   - 색상/간격은 A04_NewsHistory_UI_Style.css + theme.css 변수만 사용.
 *   - 공통 부품(createPublicFrame/createCard/createBadge) 우선 사용.
 *   - Mock 데이터는 나중에 GET /api/a04/history로 교체.
 * ========================================================================== */

import { ui_locales, currentLanguageIndex } from "@ui/ui_template_locale";
import { createBadge, type BadgeTone } from "@ui/ui_template_badge";
import { createCard } from "@ui/ui_template_elements";
import { createEmpty } from "@ui/ui_template_empty";
import { createPublicFrame } from "@ui/ui_template_public_layout";
import "./A04_NewsHistory_UI_Style.css";

/** locale 헬퍼 */
function L(key: keyof typeof ui_locales): string {
  return ui_locales[key][currentLanguageIndex];
}

/* -----------------------------------------------------------------------------
 * Mock 데이터 (백엔드 연결 전) — 나중에 GET /api/a04/history로 교체
 * -------------------------------------------------------------------------- */
type HistoryKind = "feature" | "fix" | "notice";

interface HistoryItem {
  id: number;
  kind: HistoryKind;
  title: string;
  date: string;
}

const MOCK_HISTORY: HistoryItem[] = [
  { id: 1, kind: "feature", title: "회사 소개 및 교육 안내 페이지 추가", date: "2026-07-05" },
  { id: 2, kind: "feature", title: "프로그램 상세 6단계 워크플로우 소개 공개", date: "2026-07-04" },
  { id: 3, kind: "fix", title: "다크 모드 색상 대비 개선", date: "2026-07-03" },
  { id: 4, kind: "notice", title: "베타 서비스 오픈 안내", date: "2026-07-01" },
];

/** 이력 종류별 태그 변형/라벨 매핑 */
const KIND_META: Record<HistoryKind, { variant: BadgeTone; labelKey: keyof typeof ui_locales }> = {
  feature: { variant: "accent", labelKey: "A04_NewsHistory_Tag_Feature" },
  fix: { variant: "success", labelKey: "A04_NewsHistory_Tag_Fix" },
  notice: { variant: "neutral", labelKey: "A04_NewsHistory_Tag_Notice" },
};

/* -----------------------------------------------------------------------------
 * 섹션 빌더
 * -------------------------------------------------------------------------- */
function buildTimeline(): HTMLElement {
  if (MOCK_HISTORY.length === 0) return createEmpty({ text: L("A04_NewsHistory_Empty") });

  const list = document.createElement("div");
  list.className = "a04-timeline";
  for (const item of MOCK_HISTORY) {
    const meta = KIND_META[item.kind];
    const tag = createBadge(L(meta.labelKey), meta.variant);

    const titleEl = document.createElement("span");
    titleEl.className = "a04-timeline-row__title";
    titleEl.textContent = item.title;

    const dateEl = document.createElement("span");
    dateEl.className = "a04-timeline-row__date";
    dateEl.textContent = item.date;

    const row = createCard({ body: [tag, titleEl, dateEl] });
    row.classList.add("a04-timeline-row");
    list.append(row);
  }
  return list;
}

/* -----------------------------------------------------------------------------
 * 페이지 진입점
 * -------------------------------------------------------------------------- */
export function renderA04NewsHistory(root: HTMLElement): void {
  const frame = createPublicFrame({
    title: L("A04_NewsHistory_Title"),
    lead: L("A04_NewsHistory_Hero_Subtitle"),
    wide: true,
  });
  frame.addSection().append(buildTimeline());
  root.append(frame.root);
}