{% extends "base.html" %}

{% block title %}대시보드{% endblock %}

{% block head_extra %}
<style>
    .hero {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 18px;
        flex-wrap: wrap;
    }

    .hero-copy {
        display: grid;
        gap: 8px;
    }

    .hero-copy p {
        color: var(--muted);
        max-width: 920px;
        line-height: 1.7;
    }

    .upload-actions {
        position: relative;
        display: inline-flex;
        align-items: center;
    }

    .upload-actions:hover .upload-tooltip,
    .upload-actions:focus-within .upload-tooltip {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .upload-tooltip {
        position: absolute;
        top: calc(100% + 12px);
        right: 0;
        width: 280px;
        background: rgba(20, 20, 20, 0.96);
        color: #f8fbfd;
        border-radius: 14px;
        padding: 14px 16px;
        font-size: 13px;
        line-height: 1.7;
        box-shadow: 0 18px 35px rgba(20, 20, 20, 0.18);
        opacity: 0;
        transform: translateY(-6px);
        pointer-events: none;
        transition: opacity 0.18s ease, transform 0.18s ease;
        z-index: 10;
    }

    .upload-tooltip::before {
        content: "";
        position: absolute;
        top: -8px;
        right: 22px;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid rgba(20, 20, 20, 0.96);
    }

    .hidden-file-input {
        display: none;
    }

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

    .chart-panel {
        display: grid;
        gap: 16px;
    }

    .filter-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 220px)) auto;
        gap: 12px;
        align-items: end;
    }

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

    .chart-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 10px;
        flex-wrap: wrap;
    }

    .chart-head p {
        color: var(--muted);
        font-size: 14px;
        line-height: 1.7;
    }

    .legend-box {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 12px;
    }

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

    .metric-grid .stat-card {
        min-height: 118px;
    }

    .metric-grid .stat-card .value {
        margin-top: 2px;
    }

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

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

    @media (max-width: 1200px) {
        .metric-grid,
        .filter-row {
            grid-template-columns: 1fr 1fr;
        }
    }

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

{% block content %}
<section class="panel">
    <div class="hero">
        <div class="hero-copy">
            <div class="section-title" style="margin-bottom: 0;">
                <h2>대시보드</h2>
            </div>
        </div>
        <div class="upload-actions">
            <form action="/upload" method="post" enctype="multipart/form-data" id="uploadForm">
                <input id="excel_file" class="hidden-file-input" type="file" name="excel_file" accept=".xlsx,.xlsm,.xltx,.xltm" required>
                <button type="button" id="uploadButton" class="button-icon" title="업로드 저장" aria-label="업로드 저장">
                    <svg viewBox="0 0 24 24" aria-hidden="true">
                        <path d="M6 4h9l3 3v13H6z"></path>
                        <path d="M9 4v6h6V4"></path>
                        <path d="M9 17h6"></path>
                    </svg>
                    <span class="sr-only">업로드 저장</span>
                </button>
            </form>
            <div class="upload-tooltip">엑셀 파일을 선택하면 회계 데이터를 DB에 바로 저장합니다. 프로젝트 폴더에 둔 파일 외에 추가 파일을 수동 반영할 때 사용하세요.</div>
        </div>
    </div>
</section>

<section class="panel">
    <div class="section-title">
        <h2>현황 요약</h2>
    </div>
    <form method="get" action="/" class="filter-row" style="margin-bottom: 16px;">
        <div class="field">
            <select id="overviewYear" name="overview_year" aria-label="연도 선택">
                <option value="" {% if not overview_selected_year %}selected{% endif %}>최근 10개년</option>
                {% for year in available_years %}
                    <option value="{{ year }}" {% if overview_selected_year == year %}selected{% endif %}>{{ year }}</option>
                {% endfor %}
            </select>
        </div>
    </form>
    <div class="metric-grid">
        <div class="stat-card">
            <div class="label">집계 대상 사업 수</div>
            <div class="value">{{ overview.business_count or 0 }}</div>
        </div>
        <div class="stat-card">
            <div class="label">수입금액</div>
            <div class="value">{{ "{:,.0f}".format(overview.total_revenue or 0) }}</div>
        </div>
        <div class="stat-card">
            <div class="label">원가 총액</div>
            <div class="value">{{ "{:,.0f}".format(overview.total_cost or 0) }}</div>
        </div>
        <div class="stat-card">
            <div class="label">판관비 총액</div>
            <div class="value">{{ "{:,.0f}".format(overview.total_sga or 0) }}</div>
        </div>
    </div>
</section>

<section class="panel chart-panel">
    <div class="section-title">
        <h2>통합 비용 집계</h2>
    </div>
    <div class="filter-row">
        <div class="field">
            <select id="summaryGranularity" aria-label="집계 단위">
                <option value="yearly">연도별</option>
                <option value="monthly">월별</option>
            </select>
        </div>
        <div class="field">
            <select id="summaryYear" aria-label="연도 선택">
                <option value="all">전체연도</option>
                {% for year in available_years %}
                    <option value="{{ year }}">{{ year }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="field">
            <select id="summaryMetric" aria-label="강조 항목">
                <option value="all">전체 항목</option>
                <option value="cost_sum">원가</option>
                <option value="sga_sum">판관비</option>
                <option value="labor_sum">원가인건비</option>
                <option value="outsourcing_sum">원가외주비</option>
            </select>
        </div>
        <div class="legend-box" id="summaryLegend"></div>
    </div>
    <div class="chart-shell">
        <svg id="summaryChart" class="chart-svg" viewBox="0 0 1120 390" preserveAspectRatio="xMidYMid meet"></svg>
    </div>
</section>

<section class="panel chart-panel">
    <div class="section-title">
        <h2>원가·판관비 추세</h2>
    </div>
    <div class="filter-row">
        <div class="field">
            <select id="trendYear" aria-label="연도 선택">
                <option value="recent10">최근 10개년</option>
                {% for year in available_years %}
                    <option value="{{ year }}">{{ year }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="field">
            <select id="trendMetric" aria-label="표시 방식">
                <option value="cost_sga">원가 + 판관비</option>
                <option value="all">전체 항목</option>
                <option value="labor_outsourcing">인건비 + 외주비</option>
            </select>
        </div>
        <div></div>
        <div class="legend-box" id="trendLegend"></div>
    </div>
    <div class="chart-shell">
        <svg id="trendChart" class="chart-svg" viewBox="0 0 1120 390" preserveAspectRatio="xMidYMid meet"></svg>
    </div>
</section>
{% endblock %}

{% block script %}
<script>
    const yearlySummary = {{ yearly_summary | tojson }};
    const monthlySummary = {{ monthly_summary | tojson }};
    const availableYears = {{ available_years | tojson }};

    const palette = {
        cost_sum: { label: "원가", color: "#4f7cff" },
        sga_sum: { label: "판관비", color: "#67c7c9" },
        labor_sum: { label: "원가인건비", color: "#233a5a" },
        outsourcing_sum: { label: "원가외주비", color: "#ffb54a" },
    };

    const summaryMetricsMap = {
        all: ["cost_sum", "sga_sum", "labor_sum", "outsourcing_sum"],
        cost_sum: ["cost_sum"],
        sga_sum: ["sga_sum"],
        labor_sum: ["labor_sum"],
        outsourcing_sum: ["outsourcing_sum"],
    };

    const trendMetricsMap = {
        cost_sga: ["cost_sum", "sga_sum"],
        all: ["cost_sum", "sga_sum", "labor_sum", "outsourcing_sum"],
        labor_outsourcing: ["labor_sum", "outsourcing_sum"],
    };

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

    function formatValueLabel(value) {
        const numeric = Number(value || 0);
        if (!numeric) return "0.0";
        if (numeric >= 100000000) return `${(numeric / 100000000).toFixed(1)}억`;
        if (numeric >= 1000000) return `${(numeric / 1000000).toFixed(1)}백만`;
        if (numeric >= 1000) return `${(numeric / 1000).toFixed(1)}천`;
        return numeric.toFixed(1);
    }

    function formatAxisLabel(value) {
        const numeric = Number(value || 0);
        if (!numeric) return "0";
        if (numeric >= 100000000) return `${numeric / 100000000}억`;
        if (numeric >= 1000000) return `${numeric / 1000000}백만`;
        if (numeric >= 1000) return `${numeric / 1000}천`;
        return formatNumber(numeric);
    }

    function pickTickStep(maxValue) {
        const baseUnit = maxValue < 1000000 ? 1000 : 1000000;
        const units = [1, 2, 5];
        const raw = Math.max(maxValue / 5 / 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 setLegend(containerId, metricKeys) {
        const target = document.getElementById(containerId);
        if (!target) return;
        target.innerHTML = metricKeys.map((key) => `
            <span class="legend-item">
                <span class="legend-swatch" style="background:${palette[key].color}"></span>
                ${palette[key].label}
            </span>
        `).join("");
    }

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

    function renderGroupedBarChart(svgId, rows, metricKeys, options = {}) {
        const svg = document.getElementById(svgId);
        if (!svg) return;
        if (!rows.length || !metricKeys.length) {
            renderEmptyChart(svgId, "표시할 집계 데이터가 없습니다.");
            return;
        }

        const granularity = options.granularity || "yearly";
        const width = 1120;
        const height = 390;
        const margin = { top: 42, right: 36, bottom: 78, left: 94 };
        const plotWidth = width - margin.left - margin.right;
        const plotHeight = height - margin.top - margin.bottom;
        const maxValue = Math.max(
            1,
            ...rows.flatMap((row) => metricKeys.map((key) => Number(row[key] || 0))),
        );
        const tickStep = pickTickStep(maxValue);
        const tickMax = Math.ceil(maxValue / tickStep) * tickStep;
        const groupWidth = plotWidth / Math.max(rows.length, 1);
        const axisBaseY = height - margin.bottom;
        const groupGapRatio = granularity === "monthly" ? 0.28 : 0.18;
        const innerGap = granularity === "monthly" ? 7 : 10;
        const groupInset = Math.max(groupWidth * groupGapRatio, granularity === "monthly" ? 8 : 12);
        const usableGroupWidth = Math.max(groupWidth - groupInset * 2, metricKeys.length * 12);
        const barWidth = Math.min((usableGroupWidth - innerGap * Math.max(metricKeys.length - 1, 0)) / Math.max(metricKeys.length, 1), granularity === "monthly" ? 18 : 34);
        const actualGroupWidth = barWidth * metricKeys.length + innerGap * Math.max(metricKeys.length - 1, 0);
        const groupStartOffset = (groupWidth - actualGroupWidth) / 2;
        const xLabelStep = granularity === "monthly" ? 1 : Math.max(1, Math.ceil(rows.length / 10));

        let markup = `
            <defs>
                <linearGradient id="${svgId}Bg" x1="0" x2="1" y1="0" y2="1">
                    <stop offset="0%" stop-color="#fcfefe" />
                    <stop offset="100%" stop-color="#edf4f7" />
                </linearGradient>
                <filter id="${svgId}Shadow" x="-20%" y="-20%" width="140%" height="160%">
                    <feDropShadow dx="0" dy="8" stdDeviation="8" flood-color="rgba(44, 68, 89, 0.14)" />
                </filter>
            </defs>
            <rect x="0" y="0" width="${width}" height="${height}" rx="8" fill="url(#${svgId}Bg)"></rect>
            <rect x="${margin.left}" y="${margin.top}" width="${plotWidth}" height="${plotHeight}" rx="4" fill="rgba(255,255,255,0.72)" stroke="#dde7ec"></rect>
            <text x="${margin.left}" y="24" fill="#334654" font-size="14" font-weight="700">${granularity === "monthly" ? "월간 비교" : "연간 비교"}</text>
        `;

        for (let value = 0; value <= tickMax; value += tickStep) {
            const y = margin.top + plotHeight - (value / tickMax) * plotHeight;
            markup += `<line x1="${margin.left}" y1="${y}" x2="${width - margin.right}" y2="${y}" stroke="#d8e3e8" stroke-dasharray="3 7"></line>`;
            markup += `<text x="${margin.left - 16}" y="${y + 4}" text-anchor="end" fill="#60717d" font-size="11.5" font-weight="700">${formatAxisLabel(value)}</text>`;
        }
        markup += `<line x1="${margin.left}" y1="${axisBaseY}" x2="${width - margin.right}" y2="${axisBaseY}" stroke="#8ea0ac" stroke-width="1.2"></line>`;

        rows.forEach((row, rowIndex) => {
            const baseX = margin.left + rowIndex * groupWidth;
            const showXAxisLabel = rows.length <= 14 || rowIndex % xLabelStep === 0 || rowIndex === rows.length - 1;
            metricKeys.forEach((key, metricIndex) => {
                const value = Number(row[key] || 0);
                const x = baseX + groupStartOffset + metricIndex * (barWidth + innerGap);
                const drawWidth = Math.max(barWidth, 10);
                const barHeight = tickMax ? (value / tickMax) * plotHeight : 0;
                const y = margin.top + plotHeight - barHeight;
                const labelY = Math.max(y - 12, margin.top - 8);
                const showValueLabel = barHeight > 24 && (granularity === "yearly" || metricKeys.length <= 2 || drawWidth >= 16);
                markup += `<rect x="${x}" y="${y}" width="${drawWidth}" height="${barHeight}" rx="3" fill="${palette[key].color}" filter="url(#${svgId}Shadow)"></rect>`;
                if (showValueLabel) {
                    markup += `<text x="${x + drawWidth / 2}" y="${labelY}" text-anchor="middle" fill="#35505f" font-size="10" font-weight="700">${formatValueLabel(value)}</text>`;
                }
            });
            if (showXAxisLabel) {
                markup += `<text x="${baseX + groupWidth / 2}" y="${height - 28}" text-anchor="middle" fill="#405362" font-size="12.5" font-weight="700">${row.label}</text>`;
            }
        });

        svg.innerHTML = markup;
    }

    function renderLineChart(svgId, rows, metricKeys) {
        const svg = document.getElementById(svgId);
        if (!svg) return;
        const width = 1120;
        const height = 390;
        const margin = { top: 24, right: 24, bottom: 64, left: 86 };
        const plotWidth = width - margin.left - margin.right;
        const plotHeight = height - margin.top - margin.bottom;
        const maxValue = Math.max(
            1,
            ...rows.flatMap((row) => metricKeys.map((key) => Number(row[key] || 0))),
        );
        const tickStep = pickTickStep(maxValue);
        const tickMax = Math.ceil(maxValue / tickStep) * tickStep;
        const xStep = rows.length > 1 ? plotWidth / (rows.length - 1) : 0;
        const axisBaseY = height - margin.bottom;

        let markup = `
            <defs>
                <linearGradient id="${svgId}Bg" x1="0" x2="0" y1="0" y2="1">
                    <stop offset="0%" stop-color="#ffffff" stop-opacity="0.9" />
                    <stop offset="100%" stop-color="#f3f8fa" stop-opacity="0.98" />
                </linearGradient>
                <filter id="${svgId}Shadow" x="-20%" y="-20%" width="140%" height="160%">
                    <feDropShadow dx="0" dy="8" stdDeviation="8" flood-color="rgba(44, 68, 89, 0.16)" />
                </filter>
            </defs>
            <rect x="0" y="0" width="${width}" height="${height}" rx="24" fill="url(#${svgId}Bg)"></rect>
            <rect x="${margin.left}" y="${margin.top}" width="${plotWidth}" height="${plotHeight}" rx="18" fill="rgba(255,255,255,0.68)"></rect>
        `;

        for (let value = 0; value <= tickMax; value += tickStep) {
            const y = margin.top + plotHeight - (value / tickMax) * plotHeight;
            markup += `<line x1="${margin.left}" y1="${y}" x2="${width - margin.right}" y2="${y}" stroke="#d6e2e8" stroke-dasharray="4 7"></line>`;
            markup += `<text x="${margin.left - 14}" y="${y + 5}" text-anchor="end" fill="#62717f" font-size="12">${formatAxisLabel(value)}</text>`;
        }
        markup += `<line x1="${margin.left}" y1="${axisBaseY}" x2="${width - margin.right}" y2="${axisBaseY}" stroke="#7f95a5" stroke-width="1.2"></line>`;

        metricKeys.forEach((key) => {
            const points = rows.map((row, index) => {
                const x = margin.left + index * xStep;
                const y = margin.top + plotHeight - ((Number(row[key] || 0) / tickMax) * plotHeight);
                return { x, y, value: Number(row[key] || 0), label: row.label };
            });
            markup += `<path d="M ${points.map((p) => `${p.x} ${p.y}`).join(" L ")}" fill="none" stroke="${palette[key].color}" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" filter="url(#${svgId}Shadow)"></path>`;
            points.forEach((point) => {
                markup += `<circle cx="${point.x}" cy="${point.y}" r="5.5" fill="${palette[key].color}" stroke="#ffffff" stroke-width="2"></circle>`;
            });
        });

        rows.forEach((row, index) => {
            const x = margin.left + index * xStep;
            if (rows.length <= 18 || index % Math.ceil(rows.length / 12) === 0) {
                markup += `<text x="${x}" y="${height - 26}" text-anchor="middle" fill="#425464" font-size="13" font-weight="700">${row.label}</text>`;
            }
        });

        svg.innerHTML = markup;
    }

    function getSummaryRows() {
        const granularity = document.getElementById("summaryGranularity").value;
        const yearFilter = document.getElementById("summaryYear").value;
        const source = granularity === "yearly" ? yearlySummary : monthlySummary;
        return source
            .filter((row) => {
                if (granularity === "yearly") return true;
                return yearFilter === "all" ? true : String(row.year) === yearFilter;
            })
            .map((row) => ({
                ...row,
                label: granularity === "yearly" ? String(row.year) : `${row.month}월`,
            }))
            .slice(granularity === "yearly" ? -10 : 0);
    }

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

    function syncSummaryYearSelection(granularity) {
        const summaryYearSelect = document.getElementById("summaryYear");
        if (!summaryYearSelect) return;

        if (granularity === "yearly") {
            summaryYearSelect.value = "all";
            summaryYearSelect.disabled = true;
            return;
        }

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

    function updateSummaryChart() {
        const granularity = document.getElementById("summaryGranularity").value;
        const metricMode = document.getElementById("summaryMetric").value;
        const metricKeys = summaryMetricsMap[metricMode];
        syncSummaryYearSelection(granularity);
        const rows = getSummaryRows();
        setLegend("summaryLegend", metricKeys);
        renderGroupedBarChart("summaryChart", rows, metricKeys, { granularity });
    }

    function updateTrendChart() {
        const selectedYear = document.getElementById("trendYear").value;
        const metricMode = document.getElementById("trendMetric").value;
        const metricKeys = trendMetricsMap[metricMode];
        const rows = selectedYear === "recent10"
            ? yearlySummary
                .slice(-10)
                .map((row) => ({
                    ...row,
                    label: String(row.year),
                }))
            : monthlySummary
                .filter((row) => String(row.year) === String(selectedYear))
                .map((row) => ({ ...row, label: `${row.month}월` }));
        setLegend("trendLegend", metricKeys);
        renderLineChart("trendChart", rows, metricKeys);
    }

    document.getElementById("summaryGranularity")?.addEventListener("change", updateSummaryChart);
    document.getElementById("summaryYear")?.addEventListener("change", updateSummaryChart);
    document.getElementById("summaryMetric")?.addEventListener("change", updateSummaryChart);
    document.getElementById("trendYear")?.addEventListener("change", updateTrendChart);
    document.getElementById("trendMetric")?.addEventListener("change", updateTrendChart);

    const defaultYear = getLatestAvailableYear();
    const trendYear = document.getElementById("trendYear");
    if (trendYear) {
        trendYear.value = "recent10";
    }
    const summaryYear = document.getElementById("summaryYear");
    if (summaryYear) {
        syncSummaryYearSelection(document.getElementById("summaryGranularity")?.value || "yearly");
    }

    const uploadButton = document.getElementById("uploadButton");
    const excelInput = document.getElementById("excel_file");
    const uploadForm = document.getElementById("uploadForm");
    const overviewYear = document.getElementById("overviewYear");

    overviewYear?.addEventListener("change", (event) => {
        event.target.form?.submit();
    });

    uploadButton?.addEventListener("click", () => {
        excelInput?.click();
    });

    excelInput?.addEventListener("change", () => {
        if (excelInput.files && excelInput.files.length > 0) {
            uploadForm.submit();
        }
    });

    updateSummaryChart();
    updateTrendChart();
</script>
{% endblock %}