{% extends "base.html" %}

{% block title %}연도별 수익 비용 정리{% endblock %}

{% block head_extra %}
<style>
    .filter-grid {
        display: grid;
        grid-template-columns: 220px 220px 1fr;
        gap: 12px;
        align-items: end;
    }

    .legend {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 10px;
    }

    .legend-item {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #363b44;
        font-size: 13px;
        font-weight: 700;
        background: rgba(255,255,255,0.92);
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 6px 10px;
    }

    .legend-swatch {
        width: 10px;
        height: 10px;
        border-radius: 999px;
    }

    .chart-box {
        background:
            linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,247,249,0.98)),
            radial-gradient(circle at top left, rgba(17, 17, 17, 0.045), transparent 36%);
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 16px;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.92);
    }

    .chart-legend {
        margin-bottom: 10px;
    }

    .chart-title {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 12px;
    }

    .chart-svg {
        width: 100%;
        height: auto;
        aspect-ratio: 1200 / 420;
        min-height: 320px;
        display: block;
    }

    .expense-chart-svg {
        aspect-ratio: 1600 / 420;
    }

    .chart-note {
        margin-top: 10px;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.6;
    }

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

    @media (max-width: 1000px) {
        .filter-grid,
        .metric-grid {
            grid-template-columns: 1fr;
        }
    }
</style>
{% endblock %}

{% block content %}
<section class="panel">
    <div class="section-title">
        <h2>연도별 수익 비용 정리</h2>
    </div>
    <div class="filter-grid">
        <div class="field">
            <select id="granularity" aria-label="보기 기준">
                <option value="yearly">연간</option>
                <option value="monthly">월간</option>
            </select>
        </div>
        <div class="field">
            <select id="yearFilter" aria-label="연도 선택">
                <option value="recent10">최근 10개년</option>
                {% for year in available_years %}
                    <option value="{{ year }}">{{ year }}</option>
                {% endfor %}
            </select>
        </div>
        <div></div>
    </div>
</section>

<section class="panel">
    <div class="section-title">
        <h2>선택 구간 요약</h2>
    </div>
    <div class="metric-grid" id="metricGrid"></div>
</section>

<section class="panel">
    <div class="section-title">
        <h2>비용 구조</h2>
    </div>
    <div class="chart-box">
        <div class="legend chart-legend" id="expenseLegend"></div>
        <svg id="expenseChart" class="chart-svg expense-chart-svg" viewBox="0 0 1600 420" preserveAspectRatio="xMidYMid meet"></svg>
    </div>
</section>

<section class="panel">
    <div class="section-title">
        <h2>수금/비용/영업수지 그래프</h2>
    </div>
    <div class="chart-box">
        <div class="legend chart-legend" id="balanceLegend"></div>
        <svg id="balanceChart" class="chart-svg" viewBox="0 0 1200 420" preserveAspectRatio="xMidYMid meet"></svg>
    </div>
</section>
{% endblock %}

{% block script %}
<script>
    const yearlySeries = {{ yearly_financial_series | tojson }};
    const monthlySeries = {{ monthly_financial_series | tojson }};
    const availableYears = [...new Set(yearlySeries.map((item) => item.year).filter((year) => year !== null && year !== undefined))];

    const palette = {
        revenue_sum: "#0f766e",
        project_cost_sum: "#0ea5a4",
        support_cost_sum: "#67b7dc",
        support_sga_sum: "#f59e0b",
        field_sga_sum: "#f97316",
        labor_sum: "#8b5cf6",
        outsourcing_sum: "#ec4899",
        total_expense: "#1d4ed8",
        operating_balance: "#dc2626",
    };

    const labels = {
        revenue_sum: "수금",
        project_cost_sum: "원가(프로젝트)",
        support_cost_sum: "원가(지원부서)",
        support_sga_sum: "판관비(지원부서)",
        field_sga_sum: "판관비(현업부서)",
        labor_sum: "원가인건비",
        outsourcing_sum: "원가외주비",
        total_expense: "비용합계",
        operating_balance: "영업수지",
    };

    function formatNumber(value) {
        return new Intl.NumberFormat("ko-KR", { maximumFractionDigits: 0 }).format(value || 0);
    }

    function formatAxisLabel(value) {
        const numeric = Number(value || 0);
        if (!numeric) return "0.0";
        const sign = numeric < 0 ? "-" : "";
        const absolute = Math.abs(numeric);
        if (absolute >= 100000000) return `${sign}${(absolute / 100000000).toFixed(1)}억`;
        if (absolute >= 1000000) return `${sign}${(absolute / 1000000).toFixed(1)}백만`;
        if (absolute >= 1000) return `${sign}${(absolute / 1000).toFixed(1)}천`;
        return formatNumber(numeric);
    }

    function pickTickStep(maxValue) {
        const baseUnit = maxValue < 1000000 ? 1000 : 1000000;
        const units = [1, 2, 5];
        const raw = Math.max(maxValue / baseUnit, 1);
        let power = 1;
        while (power * 10 <= raw) power *= 10;
        for (const unit of units) {
            const candidate = unit * power;
            if (candidate >= raw) return candidate * baseUnit;
        }
        return power * 10 * baseUnit;
    }

    function buildPositiveAxisScale(maxValue, tickCount = 4) {
        const safeMax = Math.max(Number(maxValue || 0), 1);
        const paddedMax = safeMax * (safeMax < 1000 ? 1.12 : 1.08);
        const tickStep = pickTickStep(paddedMax / tickCount);
        const tickMax = Math.max(tickStep, Math.ceil(paddedMax / tickStep) * tickStep);
        return { tickStep, tickMax };
    }

    function renderLegend(targetId, keys) {
        const target = document.getElementById(targetId);
        if (!target) return;
        target.innerHTML = keys.map((key) => `
            <span class="legend-item">
                <span class="legend-swatch" style="background:${palette[key]};"></span>
                ${labels[key]}
            </span>
        `).join("");
    }

    function getLatestAvailableYear() {
        return String(availableYears[availableYears.length - 1] || "recent10");
    }

    function syncYearFilter() {
        const granularity = document.getElementById("granularity").value;
        const yearFilterEl = document.getElementById("yearFilter");
        if (!yearFilterEl) return;

        if (granularity === "yearly") {
            yearFilterEl.value = "recent10";
            yearFilterEl.disabled = true;
            return;
        }

        const hasSelectedYear = availableYears.some((year) => String(year) === String(yearFilterEl.value));
        if (yearFilterEl.value === "recent10" || !hasSelectedYear) {
            yearFilterEl.value = getLatestAvailableYear();
        }
        yearFilterEl.disabled = false;
    }

    function getFilteredSeries() {
        const granularity = document.getElementById("granularity").value;
        const selectedYear = document.getElementById("yearFilter").value;
        if (granularity === "yearly" || selectedYear === "recent10") {
            return yearlySeries
                .slice(-10)
                .map((item) => ({ ...item, label: String(item.year) }));
        }
        return monthlySeries
            .filter((item) => String(item.year) === String(selectedYear))
            .map((item) => ({ ...item, label: `${item.month}월` }));
    }

    function renderMetrics(series) {
        const keys = [
            "revenue_sum",
            "project_cost_sum",
            "support_cost_sum",
            "support_sga_sum",
            "field_sga_sum",
            "labor_sum",
            "outsourcing_sum",
            "total_expense",
            "operating_balance",
        ];
        const totals = {};
        keys.forEach((key) => {
            totals[key] = series.reduce((sum, item) => sum + (item[key] || 0), 0);
        });
        const grid = document.getElementById("metricGrid");
        grid.innerHTML = keys.map((key) => `
            <div class="stat-card">
                <div class="label">${labels[key]}</div>
                <div class="value">${formatNumber(totals[key])}</div>
            </div>
        `).join("");
    }

    function buildAxis(maxValue, width, height, margin) {
        const { tickStep, tickMax } = buildPositiveAxisScale(maxValue, 4);
        let axis = "";
        for (let value = 0; value <= tickMax; value += tickStep) {
            const y = height - margin.bottom - ((height - margin.top - margin.bottom) * value) / tickMax;
            axis += `<line x1="${margin.left}" y1="${y}" x2="${width - margin.right}" y2="${y}" stroke="#d8dee5" stroke-dasharray="3 7" />`;
            axis += `<text x="${margin.left - 12}" y="${y + 4}" text-anchor="end" fill="#5a6672" font-size="11" font-weight="700">${formatAxisLabel(value)}</text>`;
        }
        axis += `<line x1="${margin.left}" y1="${height - margin.bottom}" x2="${width - margin.right}" y2="${height - margin.bottom}" stroke="#8ba0ae" stroke-width="1.2" />`;
        return { axis, tickMax };
    }

    function buildSignedAxis(maxPositiveValue, minNegativeValue, width, height, margin) {
        const rangeMax = Math.max(Math.abs(maxPositiveValue || 0), Math.abs(minNegativeValue || 0), 1);
        const { tickStep, tickMax } = buildPositiveAxisScale(rangeMax, 4);
        const plotHeight = height - margin.top - margin.bottom;
        const zeroY = margin.top + (plotHeight * tickMax) / (tickMax * 2);
        let axis = "";
        for (let value = -tickMax; value <= tickMax; value += tickStep) {
            const y = zeroY - (plotHeight * value) / (tickMax * 2);
            axis += `<line x1="${margin.left}" y1="${y}" x2="${width - margin.right}" y2="${y}" stroke="#d8dee5" stroke-dasharray="3 7" />`;
            axis += `<text x="${margin.left - 12}" y="${y + 4}" text-anchor="end" fill="#5a6672" font-size="11" font-weight="700">${formatAxisLabel(value)}</text>`;
        }
        axis += `<line x1="${margin.left}" y1="${zeroY}" x2="${width - margin.right}" y2="${zeroY}" stroke="#8ba0ae" stroke-width="1.2" />`;
        return { axis, tickMax, zeroY };
    }

    function renderEmptyChart(svgId, message) {
        const svg = document.getElementById(svgId);
        if (!svg) return;
        svg.innerHTML = `
            <rect x="0" y="0" width="1200" height="420" rx="8" fill="#f7fafb" stroke="#d6e2e8"></rect>
            <text x="600" y="210" text-anchor="middle" fill="#667887" font-size="18" font-weight="700">${message}</text>
        `;
    }

    function renderExpenseChart(series) {
        const svg = document.getElementById("expenseChart");
        const keys = ["labor_sum", "outsourcing_sum", "project_cost_sum", "support_cost_sum", "support_sga_sum", "field_sga_sum"];
        const isMonthlyView = series.some((item) => String(item.label || "").includes("월"));
        renderLegend("expenseLegend", keys);
        if (!series.length) {
            renderEmptyChart("expenseChart", "표시할 비용 구조 데이터가 없습니다.");
            return;
        }

        const width = 1600;
        const height = 420;
        const margin = { top: 30, right: isMonthlyView ? 72 : 36, bottom: 74, left: 98 };
        const barWidth = (width - margin.left - margin.right) / series.length * (isMonthlyView ? 0.18 : 0.29);
        const step = (width - margin.left - margin.right) / series.length;
        const maxValue = Math.max(...series.map((item) => keys.reduce((sum, key) => sum + (item[key] || 0), 0)), 1);
        const { axis, tickMax } = buildAxis(maxValue, width, height, margin);
        let markup = `
            <defs>
                <filter id="expenseShadow" x="-20%" y="-20%" width="140%" height="160%">
                    <feDropShadow dx="0" dy="8" stdDeviation="8" flood-color="rgba(44, 68, 89, 0.12)" />
                </filter>
            </defs>
            <rect x="${margin.left}" y="${margin.top}" width="${width - margin.left - margin.right}" height="${height - margin.top - margin.bottom}" rx="6" fill="rgba(255,255,255,0.7)" stroke="#dde7ec"></rect>
            ${axis}
        `;
        series.forEach((item, index) => {
            let cumulative = 0;
            const total = keys.reduce((sum, key) => sum + (item[key] || 0), 0);
            const x = margin.left + index * step + (step - barWidth) / 2;
            const detailX = x + barWidth + 8;
            const labelEntries = [];
            keys.forEach((key) => {
                const value = item[key] || 0;
                const barHeight = ((height - margin.top - margin.bottom) * value) / tickMax;
                const y = height - margin.bottom - barHeight - ((height - margin.top - margin.bottom) * cumulative) / tickMax;
                cumulative += value;
                markup += `<rect x="${x}" y="${y}" width="${barWidth}" height="${barHeight}" rx="2" fill="${palette[key]}" filter="url(#expenseShadow)" />`;
                if (value > 0) {
                    const percent = total ? ((value / total) * 100).toFixed(1) : "0.0";
                    labelEntries.push({
                        key,
                        value,
                        percent,
                        desiredY: y + (barHeight / 2),
                    });
                }
            });
            labelEntries.sort((a, b) => a.desiredY - b.desiredY);
            const minY = margin.top + 12;
            const maxY = height - margin.bottom - 12;
            const gap = isMonthlyView ? 16 : 18;
            let lastY = minY - gap;
            labelEntries.forEach((entry) => {
                const lineY = Math.max(entry.desiredY, lastY + gap, minY);
                const finalY = Math.min(lineY, maxY);
                lastY = finalY;
                markup += `<rect x="${detailX}" y="${finalY - 10}" width="8" height="8" rx="1.5" fill="${palette[entry.key]}"></rect>`;
                markup += `<text x="${detailX + 14}" y="${finalY + 4}" text-anchor="start" fill="#6b7b88" font-size="9" font-weight="700">${entry.percent}%</text>`;
            });
            if (total > 0) {
                const topY = height - margin.bottom - ((height - margin.top - margin.bottom) * total) / tickMax;
                markup += `<text x="${x + barWidth / 2}" y="${Math.max(topY - 10, margin.top + 10)}" text-anchor="middle" fill="#314555" font-size="10.5" font-weight="800">${formatAxisLabel(total)}</text>`;
            }
            markup += `<text x="${x + barWidth / 2}" y="${height - margin.bottom + 20}" text-anchor="middle" fill="#5a6672" font-size="11.5" font-weight="700">${item.label}</text>`;
        });
        svg.innerHTML = markup;
    }

    function renderBalanceChart(series) {
        const svg = document.getElementById("balanceChart");
        const metrics = ["revenue_sum", "total_expense", "operating_balance"];
        renderLegend("balanceLegend", metrics);
        if (!series.length) {
            renderEmptyChart("balanceChart", "표시할 수익/비용 데이터가 없습니다.");
            return;
        }

        const width = 1200;
        const height = 420;
        const margin = { top: 30, right: 24, bottom: 74, left: 98 };
        const plotWidth = width - margin.left - margin.right;
        const plotHeight = height - margin.top - margin.bottom;
        const maxPositiveValue = Math.max(...series.flatMap((item) => [
            item.revenue_sum || 0,
            item.total_expense || 0,
            Math.max(item.operating_balance || 0, 0),
        ]), 1);
        const minNegativeValue = Math.min(...series.map((item) => Math.min(item.operating_balance || 0, 0)), 0);
        const { axis, tickMax, zeroY } = buildSignedAxis(maxPositiveValue, minNegativeValue, width, height, margin);
        const groupWidth = plotWidth / Math.max(series.length, 1);
        const groupGap = groupWidth * 0.22;
        const innerGap = 0;
        const barWidth = Math.min((groupWidth - groupGap * 2) / metrics.length, 44);
        const actualGroupWidth = barWidth * metrics.length + innerGap * (metrics.length - 1);
        const groupStartOffset = (groupWidth - actualGroupWidth) / 2;
        let markup = `
            <defs>
                <filter id="balanceShadow" x="-20%" y="-20%" width="140%" height="160%">
                    <feDropShadow dx="0" dy="8" stdDeviation="8" flood-color="rgba(44, 68, 89, 0.12)" />
                </filter>
            </defs>
            <rect x="${margin.left}" y="${margin.top}" width="${plotWidth}" height="${plotHeight}" rx="6" fill="rgba(255,255,255,0.7)" stroke="#dde7ec"></rect>
            ${axis}
        `;
        series.forEach((item, index) => {
            const baseX = margin.left + index * groupWidth;
            metrics.forEach((key, metricIndex) => {
                const rawValue = Number(item[key] || 0);
                const value = key === "operating_balance" ? rawValue : Math.max(rawValue, 0);
                const barHeight = (plotHeight * Math.abs(value)) / (tickMax * 2);
                const x = baseX + groupStartOffset + metricIndex * (barWidth + innerGap);
                const y = value < 0 ? zeroY : zeroY - barHeight;
                markup += `<rect x="${x}" y="${y}" width="${barWidth}" height="${barHeight}" rx="2" fill="${palette[key]}" filter="url(#balanceShadow)" />`;
                if (value !== 0) {
                    const labelY = value < 0
                        ? Math.min(y + barHeight + 14, height - margin.bottom + 6)
                        : Math.max(y - 8, margin.top + 12);
                    markup += `<text x="${x + barWidth / 2}" y="${labelY}" text-anchor="middle" fill="#314555" font-size="9.5" font-weight="800">${formatAxisLabel(value)}</text>`;
                }
            });
            markup += `<text x="${baseX + groupWidth / 2}" y="${height - margin.bottom + 20}" text-anchor="middle" fill="#5a6672" font-size="11.5" font-weight="700">${item.label}</text>`;
        });

        svg.innerHTML = markup;
    }

    function renderAll() {
        syncYearFilter();
        const series = getFilteredSeries();
        renderMetrics(series);
        renderExpenseChart(series);
        renderBalanceChart(series);
    }

    document.getElementById("granularity").addEventListener("change", renderAll);
    document.getElementById("yearFilter").addEventListener("change", renderAll);
    const granularitySelect = document.getElementById("granularity");
    if (granularitySelect) {
        granularitySelect.value = "yearly";
    }
    const yearFilter = document.getElementById("yearFilter");
    if (yearFilter) {
        yearFilter.value = "recent10";
    }
    renderAll();
</script>
{% endblock %}