/* =============================================================================
 * B01_Dashboard_UI_View_Me.ts
 * 내 정보(549-2) — Linear 설정 꼴: 묶음 제목 + 둥근 상자 안 「제목 · 설명 · 오른쪽 조작」 줄.
 *   기본정보 · 보안(비밀번호) · 화면(밝음 · 어두움) · 내 설계 기본값(구조물 조합 개인 층).
 * ========================================================================== */

import { THEME_STORAGE_KEY } from "@config/config_frontend";
import { createButton } from "@ui/ui_template_elements";
import { settingLinks } from "../A00_Common/m_settings_nav";
import { navigateTo } from "../A00_Common/router";
import { pageFrame, settingCard, settingRow } from "./B01_Dashboard_UI_PageKit";
import { buildPasswordCard, buildProfileCard } from "./B01_Dashboard_UI_Profile";
import { el, group } from "./B01_Dashboard_UI_View_Parts";
import type { ViewCtx } from "./B01_Dashboard_UI_Views";

type Theme = "light" | "dark";

const currentTheme = (): Theme =>
  document.documentElement.getAttribute("data-theme") === "dark" ? "dark" : "light";

function setTheme(theme: Theme): void {
  document.documentElement.setAttribute("data-theme", theme);
  localStorage.setItem(THEME_STORAGE_KEY, theme);
}

/** 밝음 · 어두움 두 칸 — 고르면 바로 바뀌고 이 브라우저에 기억 */
function themeSwitch(): HTMLElement {
  const seg = el("div", "b01-sys-seg");
  const options: [Theme, string][] = [
    ["light", "밝음"],
    ["dark", "어두움"],
  ];
  const sync = (): void => {
    for (const b of seg.querySelectorAll("button"))
      b.setAttribute("aria-pressed", String(b.dataset.theme === currentTheme()));
  };
  for (const [theme, label] of options) {
    const b = el("button", "", label);
    b.type = "button";
    b.dataset.theme = theme;
    b.addEventListener("click", () => {
      setTheme(theme);
      sync();
    });
    seg.append(b);
  }
  sync();
  return seg;
}

export function mountMe(host: HTMLElement, ctx: ViewCtx): void {
  const page = pageFrame(host, "내 정보", "내 계정과 화면 설정을 관리합니다.");
  const defaults = settingLinks(ctx.me, ctx.companyId)
    .filter((link) => link.key === "구조물조합")
    .map((link) =>
      settingRow(
        `${link.title} (내 것)`,
        link.desc,
        createButton({
          label: "열기",
          variant: "ghost",
          onClick: () => navigateTo(link.route, link.query),
        }),
      ),
    );
  page.body.append(
    group("기본정보", buildProfileCard(ctx.me)),
    group("보안", buildPasswordCard()),
    group("화면", settingCard([settingRow("테마", "밝은 화면 · 어두운 화면", themeSwitch())])),
    ...(defaults.length ? [group("내 설계 기본값", settingCard(defaults))] : []),
  );
}