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

import { ui_locales, currentLanguageIndex } from "@ui/ui_template_locale";
import { createTag, type TagVariant } from "@ui/ui_template_elements";
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: TagVariant; 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 buildHero(): HTMLElement {
  const hero = document.createElement("section");
  hero.className = "a04-hero";

  const inner = document.createElement("div");
  inner.className = "a04-hero__inner";

  const title = document.createElement("h1");
  title.className = "a04-hero__title";
  title.textContent = L("A04_NewsHistory_Title");

  const subtitle = document.createElement("p");
  subtitle.className = "a04-hero__subtitle";
  subtitle.textContent = L("A04_NewsHistory_Hero_Subtitle");

  inner.append(title, subtitle);
  hero.append(inner);
  return hero;
}

function buildTimeline(): HTMLElement {
  const section = document.createElement("section");
  section.className = "a04-section";

  const list = document.createElement("div");
  list.className = "a04-timeline";

  if (MOCK_HISTORY.length === 0) {
    const empty = document.createElement("p");
    empty.className = "a04-timeline__empty";
    empty.textContent = L("A04_NewsHistory_Empty");
    section.append(empty);
    return section;
  }

  for (const item of MOCK_HISTORY) {
    const meta = KIND_META[item.kind];
    const row = document.createElement("div");
    row.className = "a04-timeline-row";

    const tag = createTag(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;

    row.append(tag, titleEl, dateEl);
    list.append(row);
  }

  section.append(list);
  return section;
}

/* -----------------------------------------------------------------------------
 * 페이지 진입점
 * -------------------------------------------------------------------------- */
export function renderA04NewsHistory(root: HTMLElement): void {
  const page = document.createElement("div");
  page.className = "a04-news-history";
  page.append(buildHero(), buildTimeline());
  root.append(page);
}