/* =============================================================================
 * A05_EduDetail_UI_Page.ts
 * 로그인 전 05: 교육 상세 (교육 과정 소개 + 문의 CTA)
 *
 * 제약 준수:
 *   - 모든 문구는 ui_template_locale.ts 참조 (하드코딩 금지).
 *   - 색상/간격은 A05_EduDetail_UI_Style.css + theme.css 변수만 사용.
 *   - 공통 컴포넌트(createButton/createCard) 우선 사용.
 *   - 이벤트 핸들러는 on[페이지]_[기능]_[액션] 명명.
 * ========================================================================== */

import { ui_locales, currentLanguageIndex } from "@ui/ui_template_locale";
import { createButton, createCard } from "@ui/ui_template_elements";
import { navigateTo } from "../A00_Common/router";
import { ROUTES } from "@config/config_frontend";
import "./A05_EduDetail_UI_Style.css";

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

/* -----------------------------------------------------------------------------
 * 이벤트 핸들러
 * -------------------------------------------------------------------------- */
function onA05_EduDetail_Inquiry_Click(): void {
  navigateTo(ROUTES.A08_SUPPORT);
}

/* -----------------------------------------------------------------------------
 * 섹션 빌더
 * -------------------------------------------------------------------------- */
function buildHero(): HTMLElement {
  const hero = document.createElement("section");
  hero.className = "a05-hero";

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

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

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

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

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

  const heading = document.createElement("h2");
  heading.className = "a05-section__title";
  heading.textContent = L("A05_EduDetail_Course_SectionTitle");

  const grid = document.createElement("div");
  grid.className = "a05-course-grid";

  const courses: [keyof typeof ui_locales, keyof typeof ui_locales][] = [
    ["A05_EduDetail_Course1_Title", "A05_EduDetail_Course1_Desc"],
    ["A05_EduDetail_Course2_Title", "A05_EduDetail_Course2_Desc"],
    ["A05_EduDetail_Course3_Title", "A05_EduDetail_Course3_Desc"],
  ];

  for (const [titleKey, descKey] of courses) {
    const desc = document.createElement("p");
    desc.className = "a05-course__desc";
    desc.textContent = L(descKey);
    const card = createCard({ title: L(titleKey), body: [desc] });
    card.classList.add("a05-course-card");
    grid.append(card);
  }

  section.append(heading, grid);
  return section;
}

function buildCta(): HTMLElement {
  const section = document.createElement("section");
  section.className = "a05-section a05-cta";

  section.append(
    createButton({
      label: L("A05_EduDetail_Cta"),
      variant: "filled",
      onClick: onA05_EduDetail_Inquiry_Click,
    }),
  );
  return section;
}

/* -----------------------------------------------------------------------------
 * 페이지 진입점
 * -------------------------------------------------------------------------- */
export function renderA05EduDetail(root: HTMLElement): void {
  const page = document.createElement("div");
  page.className = "a05-edu-detail";
  page.append(buildHero(), buildCourses(), buildCta());
  root.append(page);
}