/* =============================================================================
 * B08_Quantity_UI_Page.ts
 * 로그인 후 08: 5차 워크플로우 (수량 산출) — 위 탭 화면 (PLAN 61)
 *
 *   탭 = 구조물 집계표 · 구조물도 · 토공 · 수리집수면적표 — 차례대로 만듦.
 *   위 탭 단추 = 공용 기본 크기(md) · 보조 탭 단추 = sm(PLAN 69-1).
 *   1탭(구조물 집계표 · 61-1) · 4탭(수리집수면적표 · 홍수량 계산서 62-2) 내용 · 나머지는 빈 탭.
 *   옛 수량 산출 코드(`old_code/B08_Quantity/`)는 가져오지 않음 — 새로 씀.
 * ========================================================================== */

import "@ui/ui_template_general_layout.css";
import "./B08_Quantity_UI_Page.css";
import { createWorkflowLayout } from "@ui/ui_template_workflow_layout";
import { createButton } from "@ui/ui_template_elements";
import { ui_locales, currentLanguageIndex } from "@ui/ui_template_locale";
import { CURRENT_PROJECT_ID_KEY } from "@config/config_frontend";
import { workflowSteps } from "../A00_Common/b_page_scaffold";
import { goToWorkflowStage, WORKFLOW_STEP_ROUTES } from "../A00_Common/b_workflow_nav";
import { renderStructureSummary } from "./B08_Quantity_UI_Summary";
import { renderHydro } from "./B08_Quantity_UI_Hydro";
import { renderStructureSheets } from "./B08_Quantity_UI_Drawing";
import { renderEarthwork } from "./B08_Quantity_UI_Earthwork";

function L(key: keyof typeof ui_locales): string {
  return ui_locales[key][currentLanguageIndex];
}

const TABS = [
  { id: "summary", label: "B08_Quantity_Tab_StructureSummary" },
  { id: "sheet", label: "B08_Quantity_Tab_StructureSheet" },
  { id: "earthwork", label: "B08_Quantity_Tab_Earthwork" },
  { id: "hydrology", label: "B08_Quantity_Tab_Hydrology" },
] as const;

type TabId = (typeof TABS)[number]["id"];

/** 탭마다 새 몸통 — 늦게 온 응답이 다른 탭 화면을 덮지 않게(떨어진 몸통에만 그림). */
function renderTab(host: HTMLElement, tab: TabId, projectId: string | null): void {
  const view = document.createElement("div");
  host.replaceChildren(view);
  if (tab === "summary" && projectId) {
    void renderStructureSummary(view, projectId);
    return;
  }
  if (tab === "hydrology" && projectId) {
    void renderHydro(view, projectId);
    return;
  }
  if (tab === "sheet" && projectId) return void renderStructureSheets(view, projectId);
  if (tab === "earthwork" && projectId) return void renderEarthwork(view, projectId);
  const pending = document.createElement("p");
  pending.className = "ui-general-block__empty";
  pending.textContent = L("B08_Quantity_Tab_Pending");
  view.append(pending);
}

export function renderB08Quantity(root: HTMLElement): void {
  const projectId = localStorage.getItem(CURRENT_PROJECT_ID_KEY);

  const tabBar = document.createElement("div");
  tabBar.className = "b08-quantity__tabs";
  tabBar.setAttribute("role", "tablist");
  const panel = document.createElement("div");
  panel.className = "b08-quantity__panel";
  panel.setAttribute("role", "tabpanel");

  const select = (tab: TabId): void => {
    tabBar.replaceChildren(
      ...TABS.map(({ id, label }) => {
        const button = createButton({
          label: L(label),
          variant: id === tab ? "filled" : "ghost",
          onClick: () => id !== tab && select(id),
        });
        button.setAttribute("role", "tab");
        button.setAttribute("aria-selected", String(id === tab));
        button.dataset.b08Tab = id;
        return button;
      }),
    );
    renderTab(panel, tab, projectId);
  };

  const body = document.createElement("div");
  body.className = "b08-quantity";
  body.append(tabBar, panel);
  select("summary");

  const layout = createWorkflowLayout({
    title: L("B08_Quantity_Title"),
    steps: workflowSteps(),
    activeStep: 5,
    mainContent: body,
    routes: WORKFLOW_STEP_ROUTES,
    onStepClick: (stepIndex: number) => {
      if (projectId) goToWorkflowStage(projectId, WORKFLOW_STEP_ROUTES[stepIndex]);
    },
  });
  root.append(layout.root);
}