{% extends "base.html" %}

{% block title %}프로세스 원가{% endblock %}

{% block head_extra %}
<style>
    .pc-grid {
        display: grid;
        grid-template-columns: minmax(260px, 300px) minmax(0, 1fr) minmax(280px, 340px);
        gap: 14px;
        align-items: start;
    }

    .pc-shell {
        display: grid;
        gap: 14px;
    }

    .pc-toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .pc-source-tabs {
        display: inline-flex;
        gap: 6px;
        background: rgba(245, 247, 249, 0.95);
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 4px;
    }

    .pc-source-tabs a {
        text-decoration: none;
        color: var(--ink);
        font-size: 13px;
        font-weight: 800;
        padding: 8px 12px;
        border-radius: 999px;
        white-space: nowrap;
    }

    .pc-source-tabs a.active {
        background: var(--accent);
        color: #fff;
    }

    .pc-tab-row {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .pc-filter {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .pc-filter select {
        min-width: 110px;
    }

    .pc-project-search {
        width: 100%;
    }

    .pc-project-list {
        display: grid;
        gap: 8px;
        max-height: calc(100vh - 285px);
        overflow: auto;
        padding-right: 2px;
    }

    .pc-project-item {
        border: 1px solid var(--line);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.94);
        padding: 10px;
        text-decoration: none;
        color: var(--ink);
        display: grid;
        gap: 5px;
    }

    .pc-project-item.active {
        border-color: #111;
        box-shadow: 0 0 0 1px #111 inset;
    }

    .pc-project-head {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        align-items: baseline;
        font-size: 13px;
    }

    .pc-project-code {
        font-weight: 800;
    }

    .pc-project-name {
        color: var(--muted);
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .pc-metric-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    .pc-card {
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #fff;
        padding: 12px;
        display: grid;
        gap: 6px;
    }

    .pc-card .label {
        font-size: 12px;
        color: var(--muted);
        font-weight: 700;
    }

    .pc-card .value {
        font-size: 24px;
        font-weight: 900;
        letter-spacing: -0.03em;
    }

    .pc-card .meta {
        font-size: 12px;
        color: var(--muted);
    }

    .pc-note {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.6;
    }

    .pc-related-box {
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #fff;
        padding: 12px;
        display: grid;
        gap: 10px;
    }

    .pc-related-box h3 {
        font-size: 14px;
    }

    .pc-chip-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .pc-chip {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: #f8fafc;
        padding: 6px 10px;
        font-size: 12px;
        min-height: 32px;
    }

    .pc-chip button {
        border: none;
        background: transparent;
        color: var(--muted);
        padding: 0;
        min-width: 16px;
        min-height: 16px;
        line-height: 1;
        cursor: pointer;
    }

    .pc-related-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 8px;
        align-items: center;
    }

    .pc-related-list {
        border: 1px solid var(--line);
        border-radius: 10px;
        background: #fff;
        max-height: 200px;
        overflow: auto;
        display: none;
    }

    .pc-related-list.active {
        display: block;
    }

    .pc-related-item {
        width: 100%;
        border: none;
        background: transparent;
        text-align: left;
        padding: 9px 10px;
        cursor: pointer;
        font-size: 12px;
        color: var(--ink);
    }

    .pc-related-item:hover {
        background: #f5f7fa;
    }

    .pc-block {
        border: 1px solid var(--line);
        border-radius: 14px;
        overflow: hidden;
        background: #fff;
    }

    .pc-block h3 {
        font-size: 15px;
        padding: 11px 12px;
        border-bottom: 1px solid var(--line);
        background: linear-gradient(180deg, #ffffff, #f7f8fa);
    }

    .pc-table-wrap {
        overflow: auto;
        max-height: 390px;
    }

    .pc-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 12px;
        min-width: 620px;
    }

    .pc-table th,
    .pc-table td {
        border-bottom: 1px solid #eceff4;
        padding: 9px 10px;
        text-align: right;
        white-space: nowrap;
    }

    .pc-table th:first-child,
    .pc-table td:first-child {
        text-align: left;
    }

    .pc-table thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: #f5f7fa;
        font-weight: 800;
        color: #353b45;
    }

    .pc-table tr:nth-child(even) td {
        background: #fcfcfd;
    }

    .pc-table td.negative {
        color: #b0272d;
        font-weight: 800;
    }

    .pc-table td.positive {
        color: #1f6f3d;
        font-weight: 800;
    }

    .pc-side-stack {
        display: grid;
        gap: 12px;
    }

    .pc-kpi {
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #fff;
        padding: 12px;
        display: grid;
        gap: 10px;
    }

    .pc-kpi h3 {
        font-size: 15px;
    }

    .pc-kpi-row {
        display: grid;
        gap: 6px;
    }

    .pc-kpi-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
    }

    .pc-bar {
        height: 8px;
        border-radius: 999px;
        background: #edf1f5;
        overflow: hidden;
    }

    .pc-bar > span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, #445a7e, #67a2d4);
        width: 0;
    }

    .pc-mini-chart {
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #fff;
        padding: 12px;
    }

    .pc-mini-chart h3 {
        font-size: 15px;
        margin-bottom: 8px;
    }

    .pc-mini-chart svg {
        width: 100%;
        height: auto;
        display: block;
        min-height: 170px;
    }

    .pc-badge {
        display: inline-flex;
        align-items: center;
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 4px 8px;
        font-size: 11px;
        color: var(--muted);
    }

    body[data-view-mode="dual"] .pc-grid {
        grid-template-columns: minmax(250px, 280px) minmax(0, 1fr) minmax(300px, 360px);
    }

    body[data-view-mode="dual"] .pc-project-list {
        max-height: calc(100vh - 250px);
    }

    @media (max-width: 1260px) {
        .pc-grid {
            grid-template-columns: 1fr;
        }

        .pc-project-list {
            max-height: 260px;
        }

        .pc-metric-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
</style>
{% endblock %}

{% block content %}
{% set detail = process_cost_detail or {} %}
{% set overview = detail.overview or {} %}
{% set diagnostics = detail.diagnostics or {} %}
<section class="panel pc-shell">
    <div class="pc-toolbar">
        <div class="pc-tab-row">
            <div class="pc-source-tabs">
                <a href="/process-cost?source=hanmac{% if process_cost_selected_year %}&year={{ process_cost_selected_year }}{% endif %}{% if process_cost_selected_code %}&code={{ process_cost_selected_code }}{% endif %}{% if process_cost_include_related %}&include_related=1{% endif %}" class="{% if process_cost_source == 'hanmac' %}active{% endif %}">Hanmac ERP</a>
                <a href="/process-cost?source=wehago{% if process_cost_selected_year %}&year={{ process_cost_selected_year }}{% endif %}{% if process_cost_selected_code %}&code={{ process_cost_selected_code }}{% endif %}{% if process_cost_include_related %}&include_related=1{% endif %}" class="{% if process_cost_source == 'wehago' %}active{% endif %}">WEHAGO</a>
            </div>
            <div class="pc-source-tabs">
                <a href="/process-cost?source={{ process_cost_source }}{% if process_cost_selected_year %}&year={{ process_cost_selected_year }}{% endif %}{% if process_cost_selected_code %}&code={{ process_cost_selected_code }}{% endif %}" class="{% if not process_cost_include_related %}active{% endif %}">연계 미반영</a>
                <a href="/process-cost?source={{ process_cost_source }}{% if process_cost_selected_year %}&year={{ process_cost_selected_year }}{% endif %}{% if process_cost_selected_code %}&code={{ process_cost_selected_code }}{% endif %}&include_related=1" class="{% if process_cost_include_related %}active{% endif %}">연계 반영</a>
            </div>
        </div>
        <form method="get" action="/process-cost" class="pc-filter">
            <input type="hidden" name="source" value="{{ process_cost_source }}">
            <input type="hidden" name="code" value="{{ process_cost_selected_code }}">
            {% if process_cost_include_related %}
                <input type="hidden" name="include_related" value="1">
            {% endif %}
            <select name="year" aria-label="연도 선택">
                {% if not process_cost_years %}
                    <option value="">연도 없음</option>
                {% else %}
                    <option value="" {% if not process_cost_selected_year %}selected{% endif %}>전체 기간</option>
                    {% for y in process_cost_years|sort(reverse=True) %}
                        <option value="{{ y }}" {% if process_cost_selected_year == y %}selected{% endif %}>{{ y }}</option>
                    {% endfor %}
                {% endif %}
            </select>
            <button type="submit" class="button-secondary">적용</button>
        </form>
    </div>

    <div class="pc-grid">
        <section class="pc-block">
            <h3>프로젝트 선택</h3>
            <div style="padding: 10px;">
                <input type="text" id="projectSearchInput" class="pc-project-search" placeholder="프로젝트 코드/명 검색">
            </div>
            <div class="pc-project-list" id="projectList">
                {% for item in process_cost_projects %}
                    <a
                        href="/process-cost?source={{ process_cost_source }}{% if process_cost_selected_year %}&year={{ process_cost_selected_year }}{% endif %}&code={{ item.support_dept_code }}{% if process_cost_include_related %}&include_related=1{% endif %}"
                        class="pc-project-item {% if process_cost_selected_code == item.support_dept_code %}active{% endif %}"
                        data-project-search="{{ (item.support_dept_code ~ ' ' ~ item.support_dept_name ~ ' ' ~ (item.client_name or ''))|lower }}"
                        title="{{ item.support_dept_code }} {{ item.support_dept_name }}"
                    >
                        <div class="pc-project-head">
                            <span class="pc-project-code">{{ item.support_dept_code }}</span>
                            <span class="pc-badge">{{ "{:,.0f}".format(item.expense_amount|default(0)) }}원</span>
                        </div>
                        <div class="pc-project-name">{{ item.support_dept_name }}</div>
                        {% if item.client_name %}
                            <div class="pc-project-name">{{ item.client_name }}</div>
                        {% endif %}
                    </a>
                {% endfor %}
                {% if not process_cost_projects %}
                    <div class="pc-note" style="padding: 12px;">해당 조건의 프로젝트 데이터가 없습니다.</div>
                {% endif %}
            </div>
        </section>

        <section class="pc-shell" style="gap: 12px;">
            <div class="pc-metric-grid">
                <article class="pc-card">
                    <span class="label">계약금액</span>
                    <strong class="value">{{ "{:,.0f}".format(overview.contract_amount|default(0)) }}원</strong>
                </article>
                <article class="pc-card">
                    <span class="label">누적 수익</span>
                    <strong class="value">{{ "{:,.0f}".format(overview.revenue_amount|default(0)) }}원</strong>
                </article>
                <article class="pc-card">
                    <span class="label">누적 비용</span>
                    <strong class="value">{{ "{:,.0f}".format(overview.expense_amount|default(0)) }}원</strong>
                    <span class="meta">목표원가 {{ "{:,.0f}".format(overview.target_cost_amount|default(0)) }}원</span>
                </article>
                <article class="pc-card">
                    <span class="label">예상 영업수지</span>
                    <strong class="value">{{ "{:,.0f}".format(overview.profit_amount|default(0)) }}원</strong>
                    <span class="meta">마진율 {{ "{:.1f}".format(overview.profit_rate|default(0)) }}%</span>
                </article>
            </div>

            <section class="pc-related-box">
                <h3>연계 프로젝트</h3>
                <div class="pc-chip-row" id="relatedChipRow">
                    {% if process_cost_selected_code %}
                        <span class="pc-chip">{{ process_cost_selected_code }} 기준</span>
                    {% endif %}
                    {% for related_code in process_cost_related_codes or [] %}
                        <span class="pc-chip" data-related-code="{{ related_code }}">
                            <span>{{ related_code }}</span>
                            <button type="button" class="pc-related-remove" data-related-remove="{{ related_code }}">x</button>
                        </span>
                    {% endfor %}
                </div>
                <div class="pc-related-form">
                    <input type="text" id="relatedSearchInput" placeholder="추가할 프로젝트 코드/명 검색" {% if not process_cost_selected_code %}disabled{% endif %}>
                    <button type="button" class="button-secondary" id="relatedSaveButton" {% if not process_cost_selected_code %}disabled{% endif %}>저장</button>
                    <button type="button" class="button-secondary" id="relatedResetButton" {% if not process_cost_selected_code %}disabled{% endif %}>초기화</button>
                </div>
                <div class="pc-related-list" id="relatedSuggestList"></div>
            </section>

            <section class="pc-block">
                <h3>설계 프로세스별 원가 현황</h3>
                <div class="pc-table-wrap">
                    <table class="pc-table">
                        <thead>
                            <tr>
                                <th>구분</th>
                                <th>목표 원가</th>
                                <th>실제 집행</th>
                                <th>차이(목표-실제)</th>
                                <th>집행률</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for row in detail.phase_rows or [] %}
                                <tr>
                                    <td>{{ row.phase }}</td>
                                    <td>{{ "{:,.0f}".format(row.target_amount|default(0)) }}</td>
                                    <td>{{ "{:,.0f}".format(row.actual_amount|default(0)) }}</td>
                                    <td class="{% if (row.gap_amount|default(0)) < 0 %}negative{% elif (row.gap_amount|default(0)) > 0 %}positive{% endif %}">
                                        {{ "{:,.0f}".format(row.gap_amount|default(0)) }}
                                    </td>
                                    <td>{{ "{:.1f}".format(row.progress_rate|default(0)) }}%</td>
                                </tr>
                            {% endfor %}
                            {% if not (detail.phase_rows or []) %}
                                <tr><td colspan="5" style="text-align:center; color: var(--muted);">표시할 데이터가 없습니다.</td></tr>
                            {% endif %}
                        </tbody>
                    </table>
                </div>
            </section>

            <section class="pc-block">
                <h3>계정별 집행 상위 항목</h3>
                <div class="pc-table-wrap">
                    <table class="pc-table">
                        <thead>
                            <tr>
                                <th>계정</th>
                                <th>집행금액</th>
                                <th>비중</th>
                                <th>전표건수</th>
                                <th>최근 증빙일</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for row in detail.account_rows or [] %}
                                <tr>
                                    <td title="{{ row.account_code }} {{ row.account_name }}">{{ row.account_code }} {{ row.account_name }}</td>
                                    <td>{{ "{:,.0f}".format(row.amount|default(0)) }}</td>
                                    <td>{{ "{:.1f}".format(row.share_rate|default(0)) }}%</td>
                                    <td>{{ "{:,}".format(row.row_count|default(0)) }}</td>
                                    <td>{{ row.last_posting_date or '-' }}</td>
                                </tr>
                            {% endfor %}
                            {% if not (detail.account_rows or []) %}
                                <tr><td colspan="5" style="text-align:center; color: var(--muted);">표시할 데이터가 없습니다.</td></tr>
                            {% endif %}
                        </tbody>
                    </table>
                </div>
            </section>
        </section>

        <aside class="pc-side-stack">
            <section class="pc-kpi">
                <h3>원가 건전성 지표</h3>
                <div class="pc-kpi-row">
                    <div class="pc-kpi-head"><span>비용/수익 비율</span><strong>{{ "{:.1f}".format(diagnostics.cost_to_revenue_ratio|default(0)) }}%</strong></div>
                    <div class="pc-bar"><span data-rate="{{ diagnostics.cost_to_revenue_ratio|default(0) }}"></span></div>
                </div>
                <div class="pc-kpi-row">
                    <div class="pc-kpi-head"><span>직접인건비 비중</span><strong>{{ "{:.1f}".format(diagnostics.labor_ratio|default(0)) }}%</strong></div>
                    <div class="pc-bar"><span data-rate="{{ diagnostics.labor_ratio|default(0) }}"></span></div>
                </div>
                <div class="pc-kpi-row">
                    <div class="pc-kpi-head"><span>외주비 비중</span><strong>{{ "{:.1f}".format(diagnostics.outsourcing_ratio|default(0)) }}%</strong></div>
                    <div class="pc-bar"><span data-rate="{{ diagnostics.outsourcing_ratio|default(0) }}"></span></div>
                </div>
                <div class="pc-kpi-row">
                    <div class="pc-kpi-head"><span>제경비 비중</span><strong>{{ "{:.1f}".format(diagnostics.design_cost_ratio|default(0)) }}%</strong></div>
                    <div class="pc-bar"><span data-rate="{{ diagnostics.design_cost_ratio|default(0) }}"></span></div>
                </div>
                <div class="pc-kpi-row">
                    <div class="pc-kpi-head"><span>판관비 비중</span><strong>{{ "{:.1f}".format(diagnostics.sga_ratio|default(0)) }}%</strong></div>
                    <div class="pc-bar"><span data-rate="{{ diagnostics.sga_ratio|default(0) }}"></span></div>
                </div>
            </section>

            <section class="pc-kpi">
                <h3>데이터 현황</h3>
                <div class="pc-kpi-head"><span>선택 소스</span><strong>{% if process_cost_source == 'wehago' %}WEHAGO{% else %}Hanmac ERP{% endif %}</strong></div>
                <div class="pc-kpi-head"><span>연도</span><strong>{{ process_cost_selected_year or '전체 기간' }}</strong></div>
                <div class="pc-kpi-head"><span>전표 건수</span><strong>{{ "{:,}".format(overview.voucher_count|default(0)) }}</strong></div>
                <div class="pc-kpi-head"><span>행 건수</span><strong>{{ "{:,}".format(overview.row_count|default(0)) }}</strong></div>
                <div class="pc-kpi-head"><span>실행률</span><strong>{{ "{:.1f}".format(overview.execution_rate|default(0)) }}%</strong></div>
                <div class="pc-kpi-head"><span>연계 반영</span><strong>{% if process_cost_include_related %}반영{% else %}미반영{% endif %}</strong></div>
            </section>

            <section class="pc-mini-chart">
                <h3>최근 월별 수익/비용 추이</h3>
                <svg id="processMonthlyChart" viewBox="0 0 540 220" preserveAspectRatio="xMidYMid meet"></svg>
            </section>
        </aside>
    </div>
</section>
{% endblock %}

{% block script %}
<script>
    (() => {
        const processCostProjects = {{ process_cost_projects | tojson }};
        const selectedCode = {{ process_cost_selected_code | tojson }};
        const initialRelatedCodes = {{ (process_cost_related_codes or []) | tojson }};
        const searchInput = document.getElementById("projectSearchInput");
        const list = document.getElementById("projectList");
        if (searchInput && list) {
            searchInput.addEventListener("input", () => {
                const keyword = (searchInput.value || "").trim().toLowerCase();
                list.querySelectorAll("[data-project-search]").forEach((item) => {
                    const text = (item.dataset.projectSearch || "").toLowerCase();
                    item.style.display = !keyword || text.includes(keyword) ? "" : "none";
                });
            });
        }

        document.querySelectorAll(".pc-bar > span[data-rate]").forEach((bar) => {
            const raw = Number(bar.dataset.rate || 0);
            const width = Math.max(0, Math.min(raw, 100));
            bar.style.width = `${width}%`;
        });

        const relatedSearchInput = document.getElementById("relatedSearchInput");
        const relatedSuggestList = document.getElementById("relatedSuggestList");
        const relatedChipRow = document.getElementById("relatedChipRow");
        const relatedSaveButton = document.getElementById("relatedSaveButton");
        const relatedResetButton = document.getElementById("relatedResetButton");
        const relatedEmptyState = document.getElementById("relatedEmptyState");
        const relatedSet = new Set(initialRelatedCodes || []);

        function renderRelatedChips() {
            if (!relatedChipRow) return;
            const fixedHead = selectedCode ? `<span class="pc-chip">${selectedCode} 기준</span>` : "";
            const chips = [...relatedSet].sort().map((code) => `
                <span class="pc-chip" data-related-code="${code}">
                    <span>${code}</span>
                    <button type="button" class="pc-related-remove" data-related-remove="${code}">x</button>
                </span>
            `).join("");
            const empty = "";
            relatedChipRow.innerHTML = fixedHead + chips + empty;
            relatedChipRow.querySelectorAll("[data-related-remove]").forEach((button) => {
                button.addEventListener("click", () => {
                    const code = button.dataset.relatedRemove || "";
                    if (code) {
                        relatedSet.delete(code);
                        renderRelatedChips();
                    }
                });
            });
        }

        function renderRelatedSuggestions(keyword) {
            if (!relatedSuggestList) return;
            const normalized = (keyword || "").trim().toLowerCase();
            if (!normalized || !selectedCode) {
                relatedSuggestList.classList.remove("active");
                relatedSuggestList.innerHTML = "";
                return;
            }
            const rows = processCostProjects
                .filter((item) => item.support_dept_code !== selectedCode)
                .filter((item) => !relatedSet.has(item.support_dept_code))
                .filter((item) => `${item.support_dept_code} ${item.support_dept_name || ""} ${item.client_name || ""}`.toLowerCase().includes(normalized))
                .slice(0, 30);
            if (!rows.length) {
                relatedSuggestList.classList.remove("active");
                relatedSuggestList.innerHTML = "";
                return;
            }
            relatedSuggestList.innerHTML = rows.map((item) => `
                <button type="button" class="pc-related-item" data-related-pick="${item.support_dept_code}">
                    ${item.support_dept_code} ${item.support_dept_name || ""}
                </button>
            `).join("");
            relatedSuggestList.classList.add("active");
            relatedSuggestList.querySelectorAll("[data-related-pick]").forEach((button) => {
                button.addEventListener("click", () => {
                    const code = button.dataset.relatedPick || "";
                    if (code) {
                        relatedSet.add(code);
                        if (relatedSearchInput) relatedSearchInput.value = "";
                        relatedSuggestList.classList.remove("active");
                        relatedSuggestList.innerHTML = "";
                        renderRelatedChips();
                    }
                });
            });
        }

        if (relatedSearchInput) {
            relatedSearchInput.addEventListener("input", () => {
                renderRelatedSuggestions(relatedSearchInput.value || "");
            });
            relatedSearchInput.addEventListener("focus", () => {
                renderRelatedSuggestions(relatedSearchInput.value || "");
            });
        }

        if (relatedResetButton) {
            relatedResetButton.addEventListener("click", () => {
                relatedSet.clear();
                for (const code of initialRelatedCodes || []) {
                    relatedSet.add(code);
                }
                if (relatedSearchInput) relatedSearchInput.value = "";
                if (relatedSuggestList) {
                    relatedSuggestList.classList.remove("active");
                    relatedSuggestList.innerHTML = "";
                }
                renderRelatedChips();
            });
        }

        if (relatedSaveButton) {
            relatedSaveButton.addEventListener("click", async () => {
                if (!selectedCode) return;
                relatedSaveButton.disabled = true;
                try {
                    const response = await fetch("/projects/related-links", {
                        method: "POST",
                        headers: { "Content-Type": "application/json" },
                        body: JSON.stringify({
                            base_code: selectedCode,
                            related_codes: [...relatedSet],
                        }),
                    });
                    const payload = await response.json();
                    if (!response.ok || payload.error) {
                        throw new Error(payload.error || "연계 프로젝트 저장에 실패했습니다.");
                    }
                    window.location.reload();
                } catch (error) {
                    alert(error.message || "연계 프로젝트 저장에 실패했습니다.");
                } finally {
                    relatedSaveButton.disabled = false;
                }
            });
        }

        renderRelatedChips();

        const monthlyRows = {{ (process_cost_detail.monthly_rows or []) | tojson }};
        const svg = document.getElementById("processMonthlyChart");
        if (!svg || !Array.isArray(monthlyRows) || !monthlyRows.length) {
            if (svg) {
                svg.innerHTML = '<text x="50%" y="50%" text-anchor="middle" fill="#7a8089" font-size="13">월별 데이터가 없습니다.</text>';
            }
            return;
        }

        const width = 540;
        const height = 220;
        const pad = { top: 16, right: 14, bottom: 36, left: 42 };
        const plotW = width - pad.left - pad.right;
        const plotH = height - pad.top - pad.bottom;
        const maxVal = Math.max(
            ...monthlyRows.map((row) => Number(row.revenue_amount || 0)),
            ...monthlyRows.map((row) => Number(row.expense_amount || 0)),
            1
        );
        const stepX = monthlyRows.length > 1 ? plotW / (monthlyRows.length - 1) : 0;
        const y = (v) => pad.top + (1 - Math.min(v / maxVal, 1)) * plotH;
        const x = (i) => pad.left + stepX * i;

        const revenuePoints = monthlyRows.map((row, i) => `${x(i)},${y(Number(row.revenue_amount || 0))}`).join(" ");
        const expensePoints = monthlyRows.map((row, i) => `${x(i)},${y(Number(row.expense_amount || 0))}`).join(" ");

        let labels = "";
        monthlyRows.forEach((row, i) => {
            labels += `<text x="${x(i)}" y="${height - 12}" text-anchor="middle" fill="#677182" font-size="10">${(row.month_label || '').slice(2)}</text>`;
        });

        svg.innerHTML = `
            <line x1="${pad.left}" y1="${pad.top}" x2="${pad.left}" y2="${height - pad.bottom}" stroke="#d9dde3" />
            <line x1="${pad.left}" y1="${height - pad.bottom}" x2="${width - pad.right}" y2="${height - pad.bottom}" stroke="#d9dde3" />
            <polyline points="${revenuePoints}" fill="none" stroke="#2c5f96" stroke-width="2.3" />
            <polyline points="${expensePoints}" fill="none" stroke="#d9822b" stroke-width="2.3" />
            ${labels}
            <text x="${pad.left}" y="${pad.top - 3}" fill="#2c5f96" font-size="11">수익</text>
            <text x="${pad.left + 36}" y="${pad.top - 3}" fill="#d9822b" font-size="11">비용</text>
        `;
    })();
</script>
{% endblock %}