Aislo/B09_Estimation/B09_Estimation_UI_Tab_Progress.ts

/* =============================================================================
 * B09_Estimation_UI_Tab_Progress.ts
 * 기성 탭 — STmate 「기성 제잡비 계산서」(wM_KanJub_K)와 기성내역서(계약|전회|금회|누계)를 본뜸 (PLAN 12장 · 랩탑 메인).
 *
 *   - 좌측 = 회차 고르기 · [회차 추가] · 부가세 방식 넷(직접입력이면 금액) · [저장].
 *   - 본문 위 = 기성 제잡비 계산서 — 도급액 · 계약잡비율 · 전회/금회/누계 금액과 율.
 *   - 본문 아래 = 기성내역 — 계약 · 전회 · **금회 기성수량 칸** · 누계 · 기성(%) · 잔량.
 *   - ⚠ 값은 서버(`/estimation/progress`)가 계약내역·계약 원가계산서에서 파생 — 계약은 안 바뀜.
 *   - ⚠ 기성 표본이 없어 「구조가 선다」까지만 확인된 화면 — 머리에 그 한계를 적음.
 * ========================================================================== */

import { ui_locales, currentLanguageIndex } from "@ui/ui_template_locale";
import { createButton, showToast } from "@ui/ui_template_elements";
import { API_BASE_URL } from "@config/config_frontend";
import type { B09Tab, B09TabContext } from "./B09_Estimation_UI_Shell_Types";

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

type Column = "previous" | "current" | "cumulative";
const COLUMNS: [Column, string, string][] = [
  ["previous", "전회금액", "전율"],
  ["current", "금회금액", "금율"],
  ["cumulative", "누계금액", "누율"],
];

interface Round {
  quantities: Record<string, string>;
  vat_mode: string;
  vat_manual_krw: string;
}

interface AmountRow {
  key: string;
  name: string;
  contract_krw: string;
  contract_ratio_pct?: string | null;
  [column: string]: string | null | undefined;
}

interface ProgressRow {
  item_no: string;
  name: string;
  spec: string;
  unit: string;
  quantity: string | null;
  is_group: boolean;
  in_bill: boolean;
  contract_amount_krw?: string;
  progress_pct?: string | null;
  progress_remaining_quantity?: string;
  progress_note?: string;
  [column: string]: string | boolean | null | undefined;
}

interface ProgressDto {
  status: string;
  message?: string;
  rows: ProgressRow[];
  items: AmountRow[];
  summary: AmountRow[];
  contract_overhead_ratio_pct: string | null;
  round: number;
  round_count: number;
  notes: string[];
  settings: { rounds: Round[] };
  fields: { vat: { key: string; label: string }[] };
  limit_note: string;
}

const STYLE_ID = "b09-progress-styles";
function injectStyles(): void {
  if (document.getElementById(STYLE_ID)) return;
  const style = document.createElement("style");
  style.id = STYLE_ID;
  style.textContent = `
.b09pg { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 0; }
.b09pg__meta { font-size: 12px; color: var(--color-text-secondary); }
.b09pg__warn { font-size: 12px; color: var(--color-warning-text, #8a5a00); }
.b09pg__scroll { flex: 1; overflow: auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.b09pg__table { border-collapse: collapse; font-size: 12px; white-space: nowrap; }
.b09pg__table th, .b09pg__table td { border: 1px solid var(--color-border); padding: 2px 6px; }
.b09pg__table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.b09pg__table tr.is-group td, .b09pg__table tr.is-total td { font-weight: 600; }
.b09pg__table input { width: 7em; text-align: right; }
.b09pg__panel { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.b09pg__panel label { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
`;
  document.head.append(style);
}

function el<K extends keyof HTMLElementTagNameMap>(
  tag: K,
  className = "",
  text = "",
): HTMLElementTagNameMap[K] {
  const node = document.createElement(tag);
  if (className) node.className = className;
  if (text) node.textContent = text;
  return node;
}

function won(value: string | boolean | null | undefined): string {
  if (value === null || value === undefined || value === "" || typeof value === "boolean")
    return "";
  const n = Number(value);
  return Number.isFinite(n) ? n.toLocaleString("ko-KR") : value;
}

function pct(value: string | boolean | null | undefined): string {
  return typeof value === "string" ? `${value}%` : "";
}

/** 프로젝트별 입력 캐시 — [저장] 전 값(지침 5장 · 자동저장 없음). 고른 회차도 함께. */
const drafts = new Map<string, { rounds: Round[]; round: number }>();

function draftOf(projectId: string, data: ProgressDto) {
  let draft = drafts.get(projectId);
  if (!draft) {
    draft = { rounds: structuredClone(data.settings.rounds), round: data.round };
    drafts.set(projectId, draft);
  }
  return draft;
}

function endpoint(projectId: string): string {
  return `${API_BASE_URL}/projects/${encodeURIComponent(projectId)}/estimation/progress`;
}

async function fetchProgress(projectId: string, round: number | null): Promise<ProgressDto> {
  const query = round ? `?round=${round}` : "";
  const response = await fetch(`${endpoint(projectId)}${query}`, { credentials: "include" });
  const body = (await response.json()) as ProgressDto;
  if (!response.ok) throw new Error(body.message ?? `HTTP ${response.status}`);
  return body;
}

async function saveProgress(projectId: string, rounds: Round[]): Promise<void> {
  const response = await fetch(endpoint(projectId), {
    method: "PUT",
    credentials: "include",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ rounds }),
  });
  const body = (await response.json()) as { message?: string };
  if (!response.ok) throw new Error(body.message ?? `HTTP ${response.status}`);
}

function drawPanel(ctx: B09TabContext, data: ProgressDto, reload: (round: number) => void): void {
  const projectId = ctx.projectId as string;
  const draft = draftOf(projectId, data);
  const box = el("div", "b09pg__panel");
  const save = async (round: number): Promise<void> => {
    try {
      await saveProgress(projectId, draft.rounds);
      drafts.delete(projectId);
      showToast("기성 회차 저장 — 계약 내역은 그대로", "success");
      reload(round);
    } catch (error) {
      showToast(error instanceof Error ? error.message : "저장 못 함", "error");
    }
  };
  const pick = el("label");
  pick.append(el("span", "", "회차"));
  const select = el("select");
  for (let n = 1; n <= draft.rounds.length; n += 1) {
    const option = el("option", "", `${n}회`);
    option.value = String(n);
    select.append(option);
  }
  select.value = String(data.round);
  select.addEventListener("change", () => reload(Number(select.value)));
  pick.append(select);
  box.append(pick);
  box.append(
    createButton({
      label: "회차 추가(저장)",
      variant: "ghost",
      onClick: () => {
        const last = draft.rounds[draft.rounds.length - 1];
        draft.rounds.push({
          quantities: {},
          vat_mode: last?.vat_mode ?? "supply",
          vat_manual_krw: "",
        });
        void save(draft.rounds.length);
      },
    }),
  );
  if (draft.rounds.length) {
    box.append(
      createButton({
        label: `${draft.rounds.length}회 지우기(저장)`,
        variant: "ghost",
        onClick: () => {
          // 앞 회차를 지우면 뒤 회차의 전회가 통째로 바뀜 — 마지막 회차만 지움.
          draft.rounds.pop();
          void save(draft.rounds.length);
        },
      }),
    );
  }
  const current = draft.rounds[data.round - 1];
  if (current) {
    const vat = el("label");
    vat.append(el("span", "", "부가세"));
    const mode = el("select");
    for (const choice of data.fields.vat) {
      const option = el("option", "", choice.label);
      option.value = choice.key;
      mode.append(option);
    }
    mode.value = current.vat_mode;
    const manual = el("input");
    manual.type = "number";
    manual.min = "0";
    manual.placeholder = "직접입력 금액";
    manual.value = current.vat_manual_krw;
    manual.hidden = current.vat_mode !== "manual";
    mode.addEventListener("change", () => {
      current.vat_mode = mode.value;
      manual.hidden = mode.value !== "manual";
    });
    manual.addEventListener("input", () => (current.vat_manual_krw = manual.value));
    vat.append(mode, manual);
    box.append(vat, createButton({ label: "저장", onClick: () => save(data.round) }));
  } else {
    box.append(el("div", "b09pg__meta", "회차 없음 — [회차 추가]로 1회부터"));
  }
  ctx.panel.append(box);
}

/** 기성 제잡비 계산서 — 제잡비 줄 + 합계 줄(직접공사비 · 제잡비 계 · 공급가액 · 부가세 · 기성금액). */
function drawJab(data: ProgressDto): HTMLElement {
  const box = el("div");
  box.append(
    el(
      "strong",
      "",
      `기성 제잡비 계산서 — 금회직접공사비 × 계약잡비율 · 계약 제잡비율 ${pct(data.contract_overhead_ratio_pct)}`,
    ),
  );
  const table = el("table", "b09pg__table");
  const head = el("tr");
  for (const label of ["명칭", "도급액", "계약잡비율", ...COLUMNS.flatMap(([, a, r]) => [a, r])]) {
    head.append(el("th", "", label));
  }
  table.append(head);
  const line = (row: AmountRow, total: boolean): void => {
    const tr = el("tr", total ? "is-total" : "");
    tr.append(
      el("td", "", row.name),
      el("td", "num", won(row.contract_krw)),
      el("td", "num", pct(row.contract_ratio_pct)),
    );
    for (const [col] of COLUMNS) {
      tr.append(el("td", "num", won(row[`${col}_krw`])), el("td", "num", pct(row[`${col}_pct`])));
    }
    table.append(tr);
  };
  for (const row of data.items) line(row, false);
  for (const row of data.summary) line(row, true);
  box.append(table);
  return box;
}

function drawBill(data: ProgressDto, rounds: Round[]): HTMLElement {
  const box = el("div");
  box.append(el("strong", "", `기성내역 — ${data.round ? `${data.round}회` : "회차 없음"}`));
  const table = el("table", "b09pg__table");
  const head = el("tr");
  for (const label of [
    "공종번호",
    "명칭",
    "규격",
    "단위",
    "계약수량",
    "계약금액",
    "전회수량",
    "전회금액",
    "금회수량",
    "금회금액",
    "누계수량",
    "누계금액",
    "기성(%)",
    "잔량",
    "비고",
  ]) {
    head.append(el("th", "", label));
  }
  table.append(head);
  const current = rounds[data.round - 1];
  for (const row of data.rows) {
    const tr = el("tr", row.is_group ? "is-group" : "");
    const leaf = !row.is_group && row.in_bill && row.progress_current_quantity !== undefined;
    tr.append(
      el("td", "", row.item_no),
      el("td", "", row.name),
      el("td", "", row.spec ?? ""),
      el("td", "", row.unit ?? ""),
      el("td", "num", leaf ? (row.quantity ?? "") : ""),
      el("td", "num", won(row.contract_amount_krw)),
      el("td", "num", leaf ? String(row.progress_previous_quantity) : ""),
      el("td", "num", won(row.progress_previous_amount_krw)),
    );
    const cell = el("td");
    if (leaf && current) {
      const qty = el("input");
      qty.type = "number";
      qty.min = "0";
      qty.step = "any";
      qty.value = current.quantities[row.item_no] ?? "";
      qty.addEventListener("input", () => {
        if (qty.value === "") delete current.quantities[row.item_no];
        else current.quantities[row.item_no] = qty.value;
      });
      cell.append(qty);
    }
    tr.append(
      cell,
      el("td", "num", won(row.progress_current_amount_krw)),
      el("td", "num", leaf ? String(row.progress_cumulative_quantity) : ""),
      el("td", "num", won(row.progress_cumulative_amount_krw)),
      el("td", "num", pct(row.progress_pct)),
      el("td", "num", row.progress_remaining_quantity ?? ""),
      el("td", "", row.progress_note ?? ""),
    );
    table.append(tr);
  }
  box.append(table);
  return box;
}

function drawBody(ctx: B09TabContext, data: ProgressDto): void {
  const draft = draftOf(ctx.projectId as string, data);
  const wrap = el("div", "b09pg");
  wrap.append(el("div", "b09pg__warn", `⚠ ${data.limit_note}`));
  for (const note of data.notes) wrap.append(el("div", "b09pg__warn", `⚠ ${note}`));
  wrap.append(el("div", "b09pg__meta", "금회 기성수량을 넣고 [저장]하면 반영"));
  const scroll = el("div", "b09pg__scroll");
  scroll.append(drawJab(data), drawBill(data, draft.rounds));
  wrap.append(scroll);
  ctx.body.append(wrap);
}

function render(ctx: B09TabContext): void {
  injectStyles();
  if (!ctx.projectId) {
    ctx.body.append(el("div", "b09pg__meta", "프로젝트를 고르세요"));
    return;
  }
  const load = (round: number | null): void => {
    ctx.body.replaceChildren(
      el("div", "b09pg__meta", `${L("B09_Estimation_Tab_Progress")} 계산 중…`),
    );
    ctx.panel.replaceChildren();
    fetchProgress(ctx.projectId as string, round)
      .then((data) => {
        const draft = drafts.get(ctx.projectId as string);
        if (draft) draft.round = data.round;
        ctx.body.replaceChildren();
        drawPanel(ctx, data, load);
        drawBody(ctx, data);
      })
      .catch((error: unknown) => {
        ctx.body.replaceChildren(
          el(
            "div",
            "b09pg__warn",
            `기성을 세우지 못함 — ${error instanceof Error ? error.message : ""}`,
          ),
        );
      });
  };
  load(drafts.get(ctx.projectId)?.round ?? null);
}

export const progressTab: B09Tab = {
  key: "progress",
  label: () => L("B09_Estimation_Tab_Progress"),
  render,
};