{% extends "layouts/base.twig" %}
{% block title %}{{ translations.revenue_dashboard_title ?? 'Dashboard przychodów' }}{% endblock %}
{% block head %}
<style>
    /* ── Paleta kolorów ─────────────────────────────────────────── */
    :root {
        --rd-green:     #1C3B2E;
        --rd-green-lt:  #e8f0ec;
        --rd-red:       #8D1D2C;
        --rd-red-lt:    #f5e8ea;
        --rd-gold:      #8B6914;
        --rd-gold-lt:   #fdf6e3;
        --rd-gold-bd:   #e8d78a;
        --rd-bg:        #F6F4F1;
        --rd-sf:        #ffffff;
        --rd-sf2:       #F0EDE9;
        --rd-sf3:       #E5E1DC;
        --rd-t1:        #0E0E0E;
        --rd-t2:        #5A5A5A;
        --rd-t3:        #9A9A9A;
        --rd-bd:        rgba(0,0,0,0.07);
        --rd-ok:        #16a34a;  --rd-ok-bg: #f0fdf4;  --rd-ok-bd: #bbf7d0;
        --rd-wn:        #b45309;  --rd-wn-bg: #fffbeb;  --rd-wn-bd: #fde68a;
        --rd-dg:        #dc2626;  --rd-dg-bg: #fef2f2;  --rd-dg-bd: #fecaca;
    }
    /* ── Karty KPI ──────────────────────────────────────────────── */
    .rd-kpi-card {
        border-radius: 14px;
        border: 0.5px solid var(--rd-bd);
        background: var(--rd-sf);
        padding: 18px 20px;
    }
    .rd-kpi-label { font-size: 0.72rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--rd-t3); margin-bottom: 6px; }
    .rd-kpi-value { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
    .rd-kpi-sub   { font-size: 0.78rem; color: var(--rd-t3); margin-top: 4px; }
    .rd-kpi-badge {
        display: inline-flex; align-items: center; gap: 4px;
        padding: 2px 8px; border-radius: 5px; font-size: 0.72rem; font-weight: 600;
    }
    .rd-badge-ok { background: var(--rd-ok-bg); color: var(--rd-ok); }
    .rd-badge-wn { background: var(--rd-wn-bg); color: var(--rd-wn); }
    .rd-badge-dg { background: var(--rd-dg-bg); color: var(--rd-dg); }
    /* ── Karta wyceny ─────────────────────────────────────────── */
    .rd-val-card { border-radius: 14px; border: 0.5px solid var(--rd-bd); background: var(--rd-sf); padding: 20px; }
    .rd-val-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
    .rd-va       { background: var(--rd-sf2); border-radius: 9px; padding: 13px 15px; }
    .rd-va-gold  { background: var(--rd-gold-lt); border: 0.5px solid var(--rd-gold-bd); }
    .rd-va-lbl   { font-size: 0.72rem; color: var(--rd-t3); font-weight: 500; margin-bottom: 5px; }
    .rd-va-v     { font-size: 1.3rem; font-weight: 700, letter-spacing: -.03em; line-height: 1; }
    .rd-va-s     { font-size: 0.72rem; margin-top: 3px; }
    /* gauge */
    .rd-gauge-track  { height: 8px; background: var(--rd-sf3); border-radius: 4px; position: relative; overflow: visible; margin-bottom: 6px; }
    .rd-gauge-fill   { height: 100%; border-radius: 4px; }
    .rd-gauge-marker { position: absolute; top: -5px; width: 2px; height: 18px; border-radius: 1px; transform: translateX(-50%); }
    .rd-gauge-needle { position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%; background: var(--rd-sf); border-width: 2px; border-style: solid; transform: translate(-50%,-50%); box-shadow: 0 0 0 2px var(--rd-sf); z-index: 2; }
    .rd-gauge-ticks  { position: relative; height: 18px; font-size: 0.68rem; color: var(--rd-t3); }
    .rd-gauge-ticks span { position: absolute; white-space: nowrap; }
    .rd-gauge-note   { font-size: 0.72rem; color: var(--rd-t3); margin-top: 5px; line-height: 1.5; }
    /* ── Sekcja filtry ─────────────────────────────────────────── */
    .rd-toggle-btn {
        padding: 5px 12px; border-radius: 6px; border: 0.5px solid var(--rd-bd);
        background: var(--rd-sf2); color: var(--rd-t2);
        font-size: 0.8rem; font-weight: 500; cursor: pointer;
        transition: background .12s, color .12s;
    }
    .rd-toggle-btn:hover { background: var(--rd-sf3); color: var(--rd-t1); }
    .rd-toggle-btn.active { background: var(--rd-green); color: #fff; border-color: var(--rd-green); font-weight: 600; }
    /* ── Tabela ────────────────────────────────────────────── */
    #rd-table { font-size: 0.68rem; table-layout: fixed; width: 100%; }
    #rd-table thead th {
        font-size: 0.6rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
        color: var(--rd-t2); background: #f8f8f6;
        white-space: normal; word-break: break-word;
        padding: 5px 4px; text-align: center; vertical-align: bottom;
    }
    #rd-table td { padding: 4px 5px; vertical-align: middle; white-space: nowrap; }
    #rd-table tbody tr { transition: background .1s; }
    #rd-table tbody tr:hover { background: #fafaf8; }
    #rd-table tbody tr.rd-row-partial { opacity: .55; }
    #rd-table tbody tr.rd-row-total { background: #f0ede9; font-weight: 700; border-top: 2px solid #ddd; }
    /* szerokosci kolumn definiowane przez <colgroup> w HTML */
    .rd-cost-inline { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
    .rd-bar { height: 3px; border-radius: 2px; flex-shrink: 0; }
    .rd-pos { color: var(--rd-ok); font-weight: 600; }
    .rd-neg { color: var(--rd-dg); font-weight: 600; }
    .rd-neu { color: var(--rd-t3); }
    .rd-ptag { display: inline-block; padding: 1px 4px; border-radius: 3px; font-size: 0.58rem; background: var(--rd-sf3); color: var(--rd-t3); vertical-align: middle; }
    .rd-sub { font-size: 0.6rem; color: var(--rd-t3); }
    /* info tooltip */
    .rd-info {
        display: inline-flex; align-items: center; justify-content: center;
        width: 15px; height: 15px; border-radius: 50%;
        background: var(--rd-sf2); border: 0.5px solid rgba(0,0,0,.15);
        font-size: 8.5px; font-weight: 700; color: var(--rd-t3);
        cursor: default; position: relative;
    }
    .rd-info-tip {
        display: none; position: absolute; left: 50%; top: 22px; transform: translateX(-50%);
        background: #1a1a1a; color: #fff;
        font-size: 0.7rem; line-height: 1.55; padding: 9px 11px;
        border-radius: 8px; width: 260px; z-index: 400; text-align: left; font-weight: 400;
        box-shadow: 0 6px 24px rgba(0,0,0,.28); pointer-events: none;
    }
    .rd-info:hover .rd-info-tip { display: block; }
    /* ── Delta badge ─────────────────────────────────────────── */
    .rd-delta-pos { color: var(--rd-ok); font-weight: 600; font-size: 0.75rem; }
    .rd-delta-neg { color: var(--rd-dg); font-weight: 600; font-size: 0.75rem; }
    .rd-delta-neu { color: var(--rd-t3); font-size: 0.75rem; }
    /* ── Status badge ─────────────────────────────────────────── */
    .rd-cbadge { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 4px; font-size: 0.7rem; font-weight: 700; }
    .rd-cb-ok { background: var(--rd-ok-bg); color: var(--rd-ok); }
    .rd-cb-wn { background: var(--rd-wn-bg); color: var(--rd-wn); }
    .rd-cb-dg { background: var(--rd-dg-bg); color: var(--rd-dg); }
    /* ── Chart wrapper ─────────────────────────────────────────── */
    .rd-chart-wrap { position: relative; height: 230px; }
    /* ── Sekcja tytułów ─────────────────────────────────────────── */
    .rd-section-title { font-size: 0.7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--rd-t3); }
    /* ── Legenda ─────────────────────────────────────────────── */
    /* ── Podświetlenie kolumny z legendy ──────────────────────── */
    #rd-table th.rd-col-hl,
    #rd-table td.rd-col-hl {
        background: #e8f0ec !important;
        transition: background .15s;
    }
    #rd-table thead th[data-col] {
        cursor: default;
    }
    #rd-table thead th[data-col]:hover {
        background: #e8f0ec !important;
        color: var(--rd-green);
    }
    .rd-legend-item {
        cursor: default;
        border-radius: 6px;
        padding: 3px 5px;
        transition: background .15s;
    }
    .rd-legend-item:hover,
    .rd-legend-item.rd-leg-hl {
        background: var(--rd-green-lt);
    }
    .rd-leg    { display: flex; align-items: center; gap: 4px; font-size: 0.72rem; color: var(--rd-t2); }
    .rd-leg-sq { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
    /* ── Zakres dat ─────────────────────────────────────────────── */
    .rd-date-range { display: flex; align-items: center; gap: 8px; }
    .rd-date-range input { font-size: 0.8rem; }
    /* ── Skeleton loader ──────────────────────────────────────────── */
    .rd-skeleton {
        background: linear-gradient(90deg, var(--rd-sf2) 25%, var(--rd-sf3) 50%, var(--rd-sf2) 75%);
        background-size: 200% 100%;
        animation: rd-shimmer 1.4s infinite;
        border-radius: 6px;
    }
    @keyframes rd-shimmer {
        0%   { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }
    .rd-skeleton-line { height: 14px; margin-bottom: 8px; }
    .rd-skeleton-value { height: 28px; margin-bottom: 6px; }
    .rd-skeleton-sub { height: 10px; width: 60%; }
    .rd-skeleton-chart { height: 100%; border-radius: 8px; }
    .rd-skeleton-row { height: 22px; margin-bottom: 4px; }
    .rd-kpi-skeleton { padding: 18px 20px; }
    /* ── Atrybucja targetów (Iteracja 3+4) ───────────────────────── */
    .rd-badge-wrap       { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
    .rd-target-source    { font-size: 0.6rem; color: var(--rd-t3); line-height: 1.2; }
    .rd-badge-secondary  {
        font-size: 0.6rem; color: var(--rd-t3);
        background: var(--rd-sf2); border: 0.5px solid var(--rd-bd);
        border-radius: 3px; padding: 1px 5px; display: inline-block;
        cursor: default;
    }
    .rd-default-info {
        cursor: help; border-bottom: 1px dashed var(--rd-t3);
    }
    /* ── Nota kontekstu czasowego targetu (Iteracja 5) ─────────── */
    .rd-target-ref {
        font-size: 0.62rem; color: var(--rd-t3); cursor: help;
        border-bottom: 1px dashed var(--rd-t3);
    }
    /* ── Karta pozycji względem targetów ───────────────────────── */
    .tp-metric-row { margin-bottom: 10px; }
    .tp-metric-header {
        display: flex; justify-content: space-between; align-items: baseline;
        font-size: 0.7rem; margin-bottom: 3px;
    }
    .tp-metric-name { font-weight: 600; color: var(--rd-t2); }
    .tp-metric-val  { font-weight: 700; font-size: 0.75rem; }
    .tp-bar-wrap { position: relative; height: 8px; border-radius: 4px; background: var(--rd-sf3); overflow: visible; }
    .tp-zone     { position: absolute; top: 0; height: 100%; }
    .tp-needle   {
        position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%;
        background: var(--rd-sf); border: 2px solid; transform: translate(-50%, -50%);
        box-shadow: 0 0 0 2px var(--rd-sf); z-index: 2;
    }
    .tp-ticks    { position: relative; height: 16px; font-size: 0.58rem; color: var(--rd-t3); margin-top: 1px; }
    .tp-ticks span { position: absolute; white-space: nowrap; }
</style>
{% endblock %}
{% block page_heading %}
<div class="page-heading">
    <h3>{{ translations.revenue_dashboard_title ?? 'Dashboard przychodów' }}</h3>
    <p class="text-subtitle text-muted">{{ translations.revenue_dashboard_subtitle ?? 'Analiza sprzedaży, kosztów i rentowności w wybranym okresie' }}</p>
</div>
{% endblock %}
{% block content %}
{# ── Filtry zakresu dat ────────────────────────────────────────────── #}
<div class="card mb-3">
    <div class="card-body py-3">
        <div class="d-flex align-items-center gap-3 flex-wrap">
            <div class="d-flex gap-2 flex-wrap" id="rd-quick-filters">
                <button class="rd-toggle-btn" data-filter="current_month">{{ translations.current_month ?? 'Bieżący miesiąc' }}</button>
                <button class="rd-toggle-btn" data-filter="current_quarter">{{ translations.current_quarter ?? 'Bieżący kwartał' }}</button>
                <button class="rd-toggle-btn active" data-filter="current_year">{{ translations.current_year ?? 'Bieżący rok' }}</button>
                <button class="rd-toggle-btn" data-filter="last_12m">{{ translations.last_12_months ?? 'Ostatnie 12 mies.' }}</button>
                <button class="rd-toggle-btn" data-filter="custom">{{ translations.custom ?? 'Własny zakres' }}</button>
            </div>
            {# Własny zakres — pokazuje się tylko po kliknięciu "Własny zakres" #}
            <div class="rd-date-range d-none" id="rd-custom-range">
                <label class="small mb-0">{{ translations.from ?? 'Od' }}</label>
                <input type="month" id="rd-date-from" class="form-control form-control-sm" style="width:150px">
                <label class="small mb-0">{{ translations.to ?? 'Do' }}</label>
                <input type="month" id="rd-date-to" class="form-control form-control-sm" style="width:150px">
                <button class="btn btn-sm btn-primary" id="rd-apply-custom">{{ translations.apply ?? 'Zastosuj' }}</button>
            </div>
            <div class="ms-auto d-flex align-items-center gap-2">
                <div class="spinner-border spinner-border-sm text-secondary d-none" id="rd-spinner" role="status"></div>
                <small class="text-muted" id="rd-period-label"></small>
            </div>
        </div>
    </div>
</div>
{# ── Wiersz KPI ────────────────────────────────────────────────────── #}
<div class="row g-3 mb-3">
    <div class="col-6 col-md-3">
        <div class="rd-kpi-card h-100">
            <div class="rd-kpi-label">{{ translations.total_revenue ?? 'Przychód brutto' }}</div>
            <div class="rd-kpi-value" id="kpi-revenue"><div class="rd-skeleton rd-skeleton-value"></div></div>
            <div class="rd-kpi-sub" id="kpi-revenue-sub"></div>
            <div id="kpi-revenue-badge" class="mt-1"></div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="rd-kpi-card h-100">
            <div class="rd-kpi-label">
                {{ translations.net_income ?? 'Wynik netto' }}
                <span class="rd-info ms-1" tabindex="0">i
                <span class="rd-info-tip">{{ translations.net_margin_tooltip ?? 'marża netto = wynik netto / przychód' }}</span>
                </span>
            </div>
            <div class="rd-kpi-value" id="kpi-net"><div class="rd-skeleton rd-skeleton-value"></div></div>
            <div class="rd-kpi-sub" id="kpi-net-sub"></div>
            <div id="kpi-net-badge" class="mt-1"></div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="rd-kpi-card h-100">
            <div class="rd-kpi-label">{{ translations.avg_ticket ?? 'Śr. wartość paragonu' }}</div>
            <div class="rd-kpi-value" id="kpi-ticket"><div class="rd-skeleton rd-skeleton-value"></div></div>
            <div class="rd-kpi-sub" id="kpi-ticket-sub"></div>
            <div id="kpi-ticket-badge" class="mt-1"></div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="rd-kpi-card h-100">
            <div class="rd-kpi-label">{{ translations.avg_daily_transactions ?? 'Śr. transakcji/dzień' }}</div>
            <div class="rd-kpi-value" id="kpi-transactions"><div class="rd-skeleton rd-skeleton-value"></div></div>
            <div class="rd-kpi-sub" id="kpi-transactions-sub"></div>
            <div id="kpi-transactions-badge" class="mt-1"></div>
        </div>
    </div>
</div>
{# Iteracja 5 — nota kontekstu czasowego targetu dla widoków zbiorczych #}
<div id="kpi-target-ref" class="mb-2 text-end" style="min-height:1.2rem"></div>
{# ── Karta wyceny sklepu (pełna szerokość) ───────────────────────────── #}
<div class="row g-3 mb-3">
    <div class="col-12">
        <div class="rd-val-card">
            <div class="d-flex align-items-center gap-2 mb-3">
                <span class="rd-section-title">{{ translations.shop_valuation ?? 'Wycena sklepu' }}</span>
                <span class="rd-info">i
                    <span class="rd-info-tip">{{ translations.valuation_tooltip ?? 'Szacunkowa wycena metodą mnożnikową: przychód roczny × marża netto × mnożnik 4,5.' }}</span>
                </span>
            </div>
            <div class="rd-val-row">
                <div class="rd-va">
                    <div class="rd-va-lbl">{{ translations.current_valuation ?? 'Wycena bieżąca' }}</div>
                    <div class="rd-va-v" id="val-current"><div class="rd-skeleton rd-skeleton-value" style="width:80%"></div></div>
                    <div class="rd-va-s text-muted" id="val-margin-label"></div>
                </div>
                <div class="rd-va rd-va-gold">
                    <div class="rd-va-lbl" style="color:var(--rd-gold)">{{ translations.target_valuation ?? 'Wycena przy celu 15%' }}</div>
                    <div class="rd-va-v" style="color:var(--rd-gold)" id="val-target"><div class="rd-skeleton rd-skeleton-value" style="width:80%"></div></div>
                    <div class="rd-va-s" style="color:var(--rd-gold);opacity:.7" id="val-target-sub"></div>
                </div>
            </div>
            <div class="rd-gauge-track" id="gauge-track">
                <div class="rd-gauge-fill" id="gauge-fill" style="width:0%;background:var(--rd-t3)"></div>
                <div class="rd-gauge-marker" id="gauge-marker-tgt" style="left:66.7%;background:var(--rd-gold)"></div>
                <div class="rd-gauge-needle" id="gauge-needle" style="left:0%;border-color:var(--rd-t3)"></div>
            </div>
            <div class="rd-gauge-ticks" id="gauge-ticks">
                <span style="left:0">5%</span>
                <span style="left:66.7%;transform:translateX(-50%);color:var(--rd-gold);font-weight:700">15%</span>
                <span style="right:0;left:auto">20%</span>
            </div>
            <div class="rd-gauge-note" id="gauge-note"></div>
        </div>
    </div>
</div>
{# ── Pozycja względem targetów (pełna szerokość) ─────────────────────── #}
<div class="row g-3 mb-3">
    <div class="col-12">
        <div class="rd-val-card" id="tp-card">
            <div class="d-flex align-items-center gap-2 mb-3">
                <span class="rd-section-title">{{ translations.target_position_title ?? 'Pozycja względem targetów' }}</span>
                <span class="rd-info">i
                    <span class="rd-info-tip">{{ translations.target_position_tooltip ?? 'Pasek pokazuje strefy oceny (zielona = dobry, żółta = średni, pomarańczowa = średnio zły, czerwona = zły). Igła wskazuje wartość zrealizowaną w wybranym zakresie.' }}</span>
                </span>
                <span class="ms-auto" id="tp-ref-label" style="font-size:0.6rem;color:var(--rd-t3)"></span>
            </div>
            <div id="tp-metrics" class="row g-2">
                {# Skeleton #}
                {% for i in 1..7 %}
                <div class="col-12 col-md-6 col-xl-4">
                    <div class="tp-metric-row">
                        <div class="rd-skeleton" style="height:10px;width:40%;margin-bottom:4px"></div>
                        <div class="rd-skeleton" style="height:8px"></div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
{# ── Wykres przychodów: bieżący rok vs N-1 (pełna szerokość) ────────── #}
<div class="row g-3 mb-3">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="d-flex align-items-start justify-content-between mb-3 flex-wrap gap-2">
                    <span class="rd-section-title" id="chart-title">{{ translations.revenue_chart_title ?? 'Przychód miesięczny: bieżący rok vs rok poprzedni' }}</span>
                    <div class="rd-legend">
                        <div class="rd-leg"><div class="rd-leg-sq" style="background:#1C3B2E"></div><span id="chart-legend-current">{{ current_year }}</span></div>
                        <div class="rd-leg"><div class="rd-leg-sq" style="background:rgba(28,59,46,.25)"></div><span id="chart-legend-prev">{{ prev_year }}</span></div>
                    </div>
                </div>
                <div class="rd-chart-wrap" style="position:relative">
                    <div id="rd-chart-skeleton" class="rd-skeleton rd-skeleton-chart" style="position:absolute;inset:0;z-index:2"></div>
                    <canvas id="rd-revenue-chart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>
{# ── Tabela szczegółowa ────────────────────────────────────────────── #}
<div class="card">
    <div class="card-body">
        <div class="d-flex align-items-center justify-content-between mb-3 flex-wrap gap-2">
            <span class="rd-section-title">{{ translations.period_detail ?? 'Szczegóły per okres' }}</span>
            <div class="rd-legend">
                <div class="rd-leg"><span class="rd-cbadge rd-cb-ok">✓</span>&nbsp;{{ translations.costs_ok ?? 'Koszty OK' }}</div>
                <div class="rd-leg"><span class="rd-cbadge rd-cb-wn">!</span>&nbsp;{{ translations.costs_limit ?? 'Na granicy' }}</div>
                <div class="rd-leg"><span class="rd-cbadge rd-cb-dg">⚠</span>&nbsp;{{ translations.costs_exceeded ?? 'Przekroczenie' }}</div>
            </div>
        </div>
        <table class="table table-bordered table-sm" id="rd-table">
                <colgroup>
                    <col style="width:5%">   {# Okres #}
                    <col style="width:4%">   {# Txn #}
                    <col style="width:4%">   {# Śr/d #}
                    <col style="width:8%">   {# Retail #}
                    <col style="width:6%">   {# B2B rev #}
                    <col style="width:5%">   {# Przychód #}
                    <col style="width:8%">   {# Śr. paragon #}
                    <col style="width:4%">   {# P/t #}
                    <col style="width:6%">   {# Food % #}
                    <col style="width:8%">   {# Labor % #}
                    <col style="width:6%">   {# Shop % #}
                    <col style="width:4%">   {# Waste % #}
                    <col style="width:8%">   {# Wynik netto #}
                    <col style="width:5%">   {# Status #}
                    <col style="width:5%">   {# B2B txn #}
                    <col style="width:6%">   {# Web pickup #}
                    <col style="width:8%">   {# Web delivery #}
                </colgroup>
                <thead>
                    <tr>
                        <th colspan="17" style="padding:0;border:0">
                            {% if b2b_min_transaction_value > 0 %}
                            <div style="background:var(--rd-wn-bg);border:1px solid var(--rd-wn-bd);color:var(--rd-wn);font-size:0.7rem;font-weight:500;padding:4px 10px;border-radius:6px 6px 0 0;margin-bottom:2px">
                                ⚠ {{ translations.b2b_threshold_banner ?? 'Dane B2B filtrowane przez próg minimalnej wartości transakcji:' }}
                                <strong>{{ b2b_min_transaction_value|number_format(2, '.', '') }} {{ currency_symbol }}</strong>
                                — {{ translations.b2b_threshold_banner_sub ?? 'transakcje poniżej progu są traktowane jako sprzedaż detaliczna.' }}
                            </div>
                            {% endif %}
                        </th>
                    </tr>
                    <tr>
                        <th data-col="1">{{ translations.period ?? 'Okres' }}</th>
                        <th data-col="2">{{ translations.transactions_abbr ?? 'Txn' }}</th>
                        <th data-col="3">{{ translations.avg_daily_abbr ?? 'Śr/d' }}</th>
                        <th data-col="4" title="{{ translations.retail_sales_col_title ?? 'Sprzedaż detaliczna (bez transakcji B2B)' }}">{{ translations.retail_abbr ?? 'Retail' }}<br><span style="font-weight:400;opacity:.7">{{ translations.income ?? 'Przychód' }}</span></th>
                        <th data-col="5" title="{{ translations.b2b_revenue_col_title ?? 'Przychód brutto z transakcji B2B' }}{% if b2b_min_transaction_value > 0 %} · {{ translations.b2b_threshold_note ?? 'min.' }} {{ b2b_min_transaction_value|number_format(2, '.', '') }} {{ currency_symbol }}{% endif %}">B2B<br><span style="font-weight:400;opacity:.7">{{ translations.income ?? 'Przychód' }}</span></th>
                        <th data-col="6">{{ translations.income ?? 'Przychód' }}<br><span style="font-weight:400;opacity:.7">{{ translations.delta_mom ?? 'Δ m/m' }}</span></th>
                        <th data-col="7">{{ translations.avg_ticket_abbr ?? 'Śr. paragon' }}</th>
                        <th data-col="8">{{ translations.avg_products_abbr ?? 'P/t' }}</th>
                        <th data-col="9">{{ translations.food_cost_pct ?? 'Food %' }}</th>
                        <th data-col="10">{{ translations.labor_cost_pct ?? 'Labor %' }}</th>
                        <th data-col="11">{{ translations.shop_cost_pct ?? 'Shop %' }}</th>
                        <th data-col="12">{{ translations.waste_pct ?? 'Waste %' }}</th>
                        <th data-col="13">{{ translations.net_income ?? 'Wynik netto' }}<br><span style="font-weight:400;opacity:.7">{{ translations.margin ?? 'marża' }}</span></th>
                        <th data-col="14">{{ translations.status ?? 'Status' }}</th>
                        <th data-col="15" title="{{ translations.b2b_txn_col_title ?? 'Liczba transakcji B2B' }}{% if b2b_min_transaction_value > 0 %} · {{ translations.b2b_threshold_note ?? 'min.' }} {{ b2b_min_transaction_value|number_format(2, '.', '') }} {{ currency_symbol }}{% endif %}">B2B<br><span style="font-weight:400;opacity:.7">txn</span></th>
                        <th data-col="16" title="{{ translations.webshop_pickup_col_title ?? 'Zamówienia webshop bez dostawy' }}">Web<br><span style="font-weight:400;opacity:.7">pickup</span></th>
                        <th data-col="17" title="{{ translations.webshop_delivery_col_title ?? 'Zamówienia webshop z dostawą' }}">Web<br><span style="font-weight:400;opacity:.7">delivery</span></th>
                    </tr>
                </thead>
                <tbody id="rd-tbody">
                         <tr>
                        <td colspan="17" class="text-center text-muted py-4">
                            <div class="spinner-border spinner-border-sm me-2"></div>
                            {{ translations.loading ?? 'Ładowanie danych&#8230;' }}
                        </td>
                    </tr>
                </tbody>
            </table>
        {# ── Legenda kolumn ─────────────────────────────────────────────── #}
        <div class="mt-3 pt-3" style="border-top:1px solid var(--rd-bd)">
            <div class="rd-section-title mb-2">{{ translations.col_legend_title ?? 'Objaśnienie kolumn' }}</div>
            <div class="row g-2" style="font-size:0.7rem;color:var(--rd-t2)">
                <div class="col-12 col-md-6 col-xl-4">
                    <div class="d-flex gap-2 rd-legend-item" data-col="1">
                        <span style="min-width:90px;font-weight:700;color:var(--rd-t1)">{{ translations.period ?? 'Okres' }}</span>
                        <span>{{ translations.col_desc_period ?? 'Miesiąc, którego dotyczy wiersz (format RRRR-MM).' }}</span>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-xl-4">
                    <div class="d-flex gap-2 rd-legend-item" data-col="2">
                        <span style="min-width:90px;font-weight:700;color:var(--rd-t1)">{{ translations.transactions_abbr ?? 'Txn' }}</span>
                        <span>{{ translations.col_desc_txn ?? 'Łączna liczba transakcji zrealizowanych w danym miesiącu.' }}</span>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-xl-4">
                    <div class="d-flex gap-2 rd-legend-item" data-col="3">
                        <span style="min-width:90px;font-weight:700;color:var(--rd-t1)">{{ translations.avg_daily_abbr ?? 'Śr/d' }}</span>
                        <span>{{ translations.col_desc_avg_daily ?? 'Średnia liczba transakcji na dzień roboczy w miesiącu.' }}</span>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-xl-4">
                    <div class="d-flex gap-2 rd-legend-item" data-col="4">
                        <span style="min-width:90px;font-weight:700;color:var(--rd-t1)">{{ translations.retail_abbr ?? 'Retail' }}</span>
                        <span>{{ translations.col_desc_retail ?? 'Przychód brutto z transakcji niebędących B2B (sprzedaż detaliczna). Obliczany jako przychód łączny minus przychód B2B.' }}</span>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-xl-4">
                    <div class="d-flex gap-2 rd-legend-item" data-col="5">
                        <span style="min-width:90px;font-weight:700;color:var(--rd-t1)">{{ translations.b2b_revenue_label ?? 'B2B Przychód' }}</span>
                        <span>{{ translations.col_desc_b2b_revenue ?? 'Łączny przychód brutto wygenerowany przez transakcje klientów B2B.' }}{% if b2b_min_transaction_value > 0 %} <strong style="color:var(--rd-wn)">{{ translations.b2b_threshold_active ?? 'Aktywny próg:' }} {{ b2b_min_transaction_value|number_format(2, '.', '') }} {{ currency_symbol }}</strong>{% endif %}</span>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-xl-4">
                    <div class="d-flex gap-2 rd-legend-item" data-col="6">
                        <span style="min-width:90px;font-weight:700;color:var(--rd-t1)">{{ translations.income ?? 'Przychód' }}</span>
                        <span>{{ translations.col_desc_income ?? 'Łączny przychód brutto w miesiącu. Δ m/m — zmiana procentowa względem poprzedniego miesiąca.' }}</span>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-xl-4">
                    <div class="d-flex gap-2 rd-legend-item" data-col="7">
                        <span style="min-width:90px;font-weight:700;color:var(--rd-t1)">{{ translations.avg_ticket_abbr ?? 'Śr. paragon' }}</span>
                        <span>{{ translations.col_desc_avg_ticket ?? 'Średnia wartość brutto jednej transakcji (przychód ÷ liczba transakcji).' }}</span>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-xl-4">
                    <div class="d-flex gap-2 rd-legend-item" data-col="8">
                        <span style="min-width:90px;font-weight:700;color:var(--rd-t1)">{{ translations.avg_products_abbr ?? 'P/t' }}</span>
                        <span>{{ translations.col_desc_avg_products ?? 'Średnia liczba produktów sprzedanych w jednej transakcji.' }}</span>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-xl-4">
                    <div class="d-flex gap-2 rd-legend-item" data-col="9">
                        <span style="min-width:90px;font-weight:700;color:var(--rd-t1)">{{ translations.food_cost_pct ?? 'Food %' }}</span>
                        <span>{{ translations.col_desc_food_pct ?? 'Koszt surowców (food cost) jako % przychodu brutto. Próg ostrzegawczy: 40%. Wyświetlany kolor sygnalizuje przekroczenie.' }}</span>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-xl-4">
                    <div class="d-flex gap-2 rd-legend-item" data-col="10">
                        <span style="min-width:90px;font-weight:700;color:var(--rd-t1)">{{ translations.labor_cost_pct ?? 'Labor %' }}</span>
                        <span>{{ translations.col_desc_labor_pct ?? 'Koszt pracowniczy jako % przychodu brutto. Próg ostrzegawczy: 20%.' }}</span>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-xl-4">
                    <div class="d-flex gap-2 rd-legend-item" data-col="11">
                        <span style="min-width:90px;font-weight:700;color:var(--rd-t1)">{{ translations.shop_cost_pct ?? 'Shop %' }}</span>
                        <span>{{ translations.col_desc_shop_pct ?? 'Stałe koszty sklepu (najem, media itp.) jako % przychodu brutto.' }}</span>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-xl-4">
                    <div class="d-flex gap-2 rd-legend-item" data-col="12">
                        <span style="min-width:90px;font-weight:700;color:var(--rd-t1)">{{ translations.waste_pct ?? 'Waste %' }}</span>
                        <span>{{ translations.col_desc_waste_pct ?? 'Koszt odpadów i strat produkcyjnych jako % przychodu brutto. Im niższy, tym lepiej.' }}</span>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-xl-4">
                    <div class="d-flex gap-2 rd-legend-item" data-col="13">
                        <span style="min-width:90px;font-weight:700;color:var(--rd-t1)">{{ translations.net_income ?? 'Wynik netto' }}</span>
                        <span>{{ translations.col_desc_net_income ?? 'Przychód brutto minus podatek VAT, food cost, labor cost i shop cost. Procent pod wartością to marża netto.' }}</span>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-xl-4">
                    <div class="d-flex gap-2 rd-legend-item" data-col="14">
                        <span style="min-width:90px;font-weight:700;color:var(--rd-t1)">{{ translations.status ?? 'Status' }}</span>
                        <span>
                            <span style="color:var(--rd-ok);font-weight:700">✓ OK</span> — {{ translations.col_desc_status_ok ?? 'food i labor w normie.' }}
                            <span style="color:var(--rd-wn);font-weight:700">!</span> — {{ translations.col_desc_status_warn ?? 'jeden lub oba na granicy progu.' }}
                            <span style="color:var(--rd-dg);font-weight:700">⚠</span> — {{ translations.col_desc_status_bad ?? 'przekroczenie progu.' }}
                        </span>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-xl-4">
                    <div class="d-flex gap-2 rd-legend-item" data-col="15">
                        <span style="min-width:90px;font-weight:700;color:var(--rd-t1)">{{ translations.b2b_txn_label ?? 'B2B txn' }}</span>
                        <span>{{ translations.col_desc_b2b_txn ?? 'Liczba transakcji zrealizowanych przez klientów B2B. Mniejsza liczba pod spodem (uniq.) to liczba unikalnych klientów B2B.' }}{% if b2b_min_transaction_value > 0 %} <strong style="color:var(--rd-wn)">{{ translations.b2b_threshold_active ?? 'Aktywny próg:' }} {{ b2b_min_transaction_value|number_format(2, '.', '') }} {{ currency_symbol }}</strong>{% endif %}</span>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-xl-4">
                    <div class="d-flex gap-2 rd-legend-item" data-col="16">
                        <span style="min-width:90px;font-weight:700;color:var(--rd-t1)">{{ translations.webshop_pickup_label ?? 'Web pickup' }}</span>
                        <span>{{ translations.col_desc_webshop_pickup ?? 'Zamówienia złożone przez webshop (płatność typ 15) z odbiorem własnym lub spożyciem na miejscu (sposób podania: eat-in / take away).' }}</span>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-xl-4">
                    <div class="d-flex gap-2 rd-legend-item" data-col="17">
                        <span style="min-width:90px;font-weight:700;color:var(--rd-t1)">{{ translations.webshop_delivery_label ?? 'Web delivery' }}</span>
                        <span>{{ translations.col_desc_webshop_delivery ?? 'Zamówienia złożone przez webshop (płatność typ 15) z dostawą do klienta (sposób podania: delivery).' }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block scripts %}
<script src="{{ root }}/assets/vendors/chartjs/Chart.bundle.min.js"></script>
<script>
const rdTrans = {
    vs_previous_year:     '{{ translations.vs_previous_year ?? "vs rok poprzedni" }}',
    margin_label:         '{{ translations.margin_label ?? "Marża" }}',
    net_margin_label:     '{{ translations.net_margin_label ?? "Marża netto" }}',
    valuation_min_months: '{{ translations.valuation_min_months ?? "Potrzeba min. 3 pełnych miesięcy danych." }}',
    annual_revenue_label: '{{ translations.annual_revenue_label ?? "CA roczny" }}',
    months_abbr:          '{{ translations.months_abbr ?? "mies." }}',
    margin_point_value:   '{{ translations.margin_point_value ?? "+1 pkt marży =" }}',
    vs_target_15:         '{{ translations.vs_target_15 ?? "vs cel 15%" }}',
    no_data_for_period:   '{{ translations.no_data_for_period ?? "Brak danych dla wybranego okresu." }}',
    no_data_found:        '{{ translations.no_data_found ?? "Brak danych" }}',
    year_prefix:          '{{ translations.year_prefix ?? "Rok" }}',
    last_12_months:       '{{ translations.last_12_months ?? "Ostatnie 12 mies." }}',
    valuation_basis:      '{{ translations.valuation_basis ?? "Baza" }}',
    months_short:         '{{ translations.months_short_csv ?? "Sty,Lut,Mar,Kwi,Maj,Cze,Lip,Sie,Wrz,Paź,Lis,Gru" }}'.split(','),
    // Iteracja 3+4 — atrybucja źródła targetu
    source_admin:              '{{ translations.source_admin ?? "wg Admin" }}',
    source_consultant:         '{{ translations.source_consultant ?? "wg Konsultant" }}',
    source_default:            '⚙ {{ translations.source_default ?? "domyślne" }}',
    source_default_tooltip:    '{{ translations.source_default_tooltip ?? "Brak zdefiniowanych targetów. Wyświetlane są wartości domyślne systemu." }}',
    // Iteracja 5 — kontekst czasowy
    target_from_month:         '{{ translations.target_from_month ?? "Target z" }}',
    target_ref_tooltip_prefix: '{{ translations.target_ref_tooltip_prefix ?? "Ocena KPI bazuje na targetach z" }}',
    target_ref_tooltip_suffix: '{{ translations.target_ref_tooltip_suffix ?? "— ostatniego miesiąca z dostępnymi targetami w wybranym zakresie." }}',
    // Karta pozycji względem targetów
    food_cost_label:    '{{ translations.food_cost_label ?? "Food cost" }}',
    labour_cost_label:  '{{ translations.labour_cost_label ?? "Labour cost" }}',
    shop_cost_label:    '{{ translations.shop_cost ?? "Koszt sklepu" }}',
    net_margin_label:   '{{ translations.net_margin_label ?? "Marża netto" }}',
    income_label:       '{{ translations.income ?? "Przychód" }}',
    avg_ticket_label:   '{{ translations.avg_ticket_abbr ?? "Śr. paragon" }}',
    transactions_label: '{{ translations.transactions_label ?? "Transakcje" }}',
    no_target:          '{{ translations.no_target ?? "brak targetu" }}',
    b2b_unique_abbr:    '{{ translations.b2b_unique_abbr ?? "uniq." }}',
    waste_cost_label:   '{{ translations.waste_cost_label ?? "Waste" }}',
};
/* ═══════════════════════════════════════════════════════════════
   KONFIGURACJA
═══════════════════════════════════════════════════════════════ */
const RD = {
    root:         '{{ root }}',
    currency:     '{{ currency_symbol }}',
    currentYear:  {{ current_year }},
    prevYear:     {{ prev_year }},
    shopId:       {{ shop_id | default(0) }},
    b2bMinValue:  {{ b2b_min_transaction_value | default(0) }},
    // Progi kosztowe pobierane dynamicznie z API (targets_json)
    // Wartości fallback używane gdy brak zdefiniowanych targetów
    foodThreshold:   40,   // fallback Food cost
    labourThreshold: 20,   // fallback Labour cost
    // Parametry wyceny — dynamiczne z targetów jeśli dostępne
    valuationMultiplier: 4.5,
    marginMin: 0.05,
    marginTarget: 0.15,
    marginMax: 0.20,
    // Zarezerwowane pola (niezaładowane — dane pobierane przez AJAX)
    initialCurrentYear: {{ current_year_data | raw }},
    initialPrevYear:    {{ prev_year_data | raw }},
    // Targety z API — bieżący miesiąc (SSR bootstrap)
    targets: {{ targets_json | default('{}') | raw }},
    targetsMonth: {{ targets_month | default(0) }},
    targetsYear:  {{ targets_year  | default(0) }},
    // Iteracja 5 — targety per miesiąc { 'YYYY-MM': {metrics...} }
    targetsByMonth: {},
    // Etykieta miesiąca referencyjnego dla KPI zbiorczych
    _refMonthLabel: null,
    _loadedYears: new Set(),
};
/* ═══════════════════════════════════════════════════════════════
   TARGETY — INICJALIZACJA DYNAMICZNYCH PROGÓW
═══════════════════════════════════════════════════════════════ */
/**
 * Przebudowuje RD._thresholds i RD._hasTargets na podstawie przekazanych targetów.
 * Wywoływana przy starcie (SSR) i przy każdej zmianie zakresu dat (AJAX).
 * @param {Object} targets — format { metric_key: { admin, consultant, default, source } }
 */
function applyTargets(targets) {
    RD.targets = targets;

    // Pomocnik — pobiera aktywne progi dla metryki (admin > consultant > default > null)
    function getThresholds(key) {
        const m = targets[key];
        if (!m) return null;
        const src = m.source;
        if (src === 'admin')      return m.admin      ? { t1: m.admin.t1,      t2: m.admin.t2,      t3: m.admin.t3      } : null;
        if (src === 'consultant') return m.consultant ? { t1: m.consultant.t1, t2: m.consultant.t2, t3: m.consultant.t3 } : null;
        if (src === 'default')    return m.default    ? { t1: m.default.t1,    t2: m.default.t2,    t3: m.default.t3    } : null;
        return null;
    }

    // Koszt surowca → foodThreshold (próg dobry/średni = t1)
    const food = getThresholds('material_cost_pct');
    if (food) RD.foodThreshold = food.t1;

    // Koszt pracownika → labourThreshold (próg dobry/średni = t1)
    const labour = getThresholds('employee_cost_pct');
    if (labour) RD.labourThreshold = labour.t1;

    // Marża netto — zastąp hardcoded wartości dynamicznymi z targetu
    const margin = getThresholds('net_margin_pct');
    if (margin) {
        RD.marginTarget = (margin.t2 ?? 0) / 100;
        RD.marginMin    = (margin.t3 ?? 0) / 100;
        RD.marginMax    = (margin.t1 ?? 0) / 100;
    }

    RD._thresholds = {
        material_cost_pct:  food,
        employee_cost_pct:  labour,
        shop_cost_pct:      getThresholds('shop_cost_pct'),
        waste_pct:          getThresholds('waste_pct'),
        net_margin_pct:     margin,
        revenue:            getThresholds('revenue'),
        avg_ticket:         getThresholds('avg_ticket'),
        transactions_count: getThresholds('transactions_count'),
        b2b_clients_count:  getThresholds('b2b_clients_count'),
    };

    RD._hasTargets = Object.fromEntries(
        Object.entries(RD._thresholds).map(([k, v]) => [k, !!v])
    );
}

// Inicjalizacja SSR — targety bieżącego miesiąca załadowane przez PHP
applyTargets(RD.targets);

/* ═══════════════════════════════════════════════════════════════
   TARGETY — KONTEKST CZASOWY (Iteracja 5)
═══════════════════════════════════════════════════════════════ */

/**
 * Ładuje targety roczne dla danego roku (z cache).
 * Zwraca mapę 'YYYY-MM' → {metrics...}
 */
async function loadYearlyTargets(year) {
    if (RD.shopId <= 0) return {};
    if (RD._loadedYears.has(year)) {
        // Zwróć z targetsByMonth to co już mamy dla tego roku
        const result = {};
        for (let m = 1; m <= 12; m++) {
            const key = `${year}-${String(m).padStart(2, '0')}`;
            if (RD.targetsByMonth[key]) result[key] = RD.targetsByMonth[key];
        }
        return result;
    }
    try {
        const resp = await fetch(`${RD.root}/ajax/analysis/revenue/yearly-targets?year=${year}`);
        if (!resp.ok) return {};
        const json = await resp.json();
        // API zwraca { "1": {...}, "2": {...}, ..., "12": {...} }
        const result = {};
        for (const [m, data] of Object.entries(json)) {
            const key = `${year}-${String(parseInt(m)).padStart(2, '0')}`;
            result[key] = data;
        }
        RD._loadedYears.add(year);
        return result;
    } catch (e) {
        console.error('Błąd ładowania targetów rocznych:', e);
        return {};
    }
}

/**
 * Wyodrębnia unikalne lata z zakresu YYYY-MM.
 */
function getYearsInRange(dateFrom, dateTo) {
    const y1 = parseInt(dateFrom.split('-')[0]);
    const y2 = parseInt(dateTo.split('-')[0]);
    const years = new Set();
    for (let y = y1; y <= y2; y++) years.add(y);
    return [...years];
}

/**
 * Zwraca progi dla danego okresu 'YYYY-MM' — tylko gdy source = admin lub consultant.
 * Jeśli source = default lub brak → zwraca null (brak kolorowania w tabeli).
 */
function getRowThresholds(period) {
    const m = RD.targetsByMonth[period];
    if (!m) return null;
    const result = {};
    let hasReal = false;
    for (const [key, metric] of Object.entries(m)) {
        const src = metric.source;
        if (src === 'admin' || src === 'consultant') {
            const thr = src === 'admin' ? metric.admin : metric.consultant;
            if (thr) { result[key] = thr; hasReal = true; }
        }
    }
    return hasReal ? result : null;
}

/**
 * Znajduje ostatni miesiąc w zakresie z targetami admin/consultant (nie default).
 * Zwraca 'YYYY-MM' lub null.
 */
function findReferenceMonth(dateFrom, dateTo) {
    // Generuj listę miesięcy od dateTo do dateFrom (malejąco)
    const [y1, m1] = dateFrom.split('-').map(Number);
    const [y2, m2] = dateTo.split('-').map(Number);
    // Iteruj od końca zakresu wstecz
    let y = y2, m = m2;
    while (y > y1 || (y === y1 && m >= m1)) {
        const key = `${y}-${String(m).padStart(2, '0')}`;
        const monthData = RD.targetsByMonth[key];
        if (monthData) {
            // Sprawdź czy choć jedna metryka ma source = admin lub consultant
            const hasReal = Object.values(monthData).some(
                metric => metric.source === 'admin' || metric.source === 'consultant'
            );
            if (hasReal) return key;
        }
        m--;
        if (m === 0) { m = 12; y--; }
        if (y < y1) break;
    }
    return null;
}

/**
 * Formatuje 'YYYY-MM' jako "Styczeń 2025".
 */
function formatMonthLabel(period) {
    const [y, m] = period.split('-').map(Number);
    const names = rdTrans.months_short;
    const monthFull = ['Styczeń','Luty','Marzec','Kwiecień','Maj','Czerwiec',
                       'Lipiec','Sierpień','Wrzesień','Październik','Listopad','Grudzień'];
    return `${monthFull[m - 1]} ${y}`;
}

/* ═══════════════════════════════════════════════════════════════
   TARGETY — KLASYFIKACJA WARTOŚCI
   Zwraca: { level: 'good'|'medium'|'medium_bad'|'bad'|null, color, label }
═══════════════════════════════════════════════════════════════ */
const LEVEL_COLORS = {
    good:       '#16a34a',
    medium:     '#b45309',
    medium_bad: '#d97706',
    bad:        '#dc2626',
};
const LEVEL_LABELS = {
    good:       'Dobry',
    medium:     'Średni',
    medium_bad: 'Średnio zły',
    bad:        'Zły',
};

/**
 * Klasyfikuje wartość względem progów.
 * lowerIsBetter: true = mniej jest lepiej (koszty)
 */
function classifyValue(value, thresholds, lowerIsBetter) {
    if (!thresholds) return null;
    const { t1, t2, t3 } = thresholds;
    let level;
    if (lowerIsBetter) {
        if (value < t1)      level = 'good';
        else if (value < t2) level = 'medium';
        else if (value < t3) level = 'medium_bad';
        else                 level = 'bad';
    } else {
        if (value >= t1)      level = 'good';
        else if (value >= t2) level = 'medium';
        else if (value >= t3) level = 'medium_bad';
        else                  level = 'bad';
    }
    return { level, color: LEVEL_COLORS[level], label: LEVEL_LABELS[level] };
}

/* ═══════════════════════════════════════════════════════════════
   STAN APLIKACJI
═══════════════════════════════════════════════════════════════ */
let state = {
    currentData: [],  // dane bieżącego zakresu
    prevData:    [],  // dane N-1
    filter:      'current_year',
};
let revenueChart = null;
/* ═══════════════════════════════════════════════════════════════
   NARZĘDZIA
═══════════════════════════════════════════════════════════════ */
const fmt = (n, d = 2) => Number(n ?? 0).toLocaleString('pl-PL', {
    minimumFractionDigits: d, maximumFractionDigits: d
}) + ' ' + RD.currency;
const fmtK = (v, d = 2) => {
    v = Number(v ?? 0);
    return v.toLocaleString('pl-PL', { minimumFractionDigits: d, maximumFractionDigits: d });
};
const fmtPct = (n, d = 1) => Number(n ?? 0).toFixed(d) + '%';
const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
function gPos(m) {
    return clamp((m - RD.marginMin) / (RD.marginMax - RD.marginMin) * 100, 0, 100);
}
function needleColor(nPos) {
    if (nPos <= 33) return 'var(--rd-dg)';
    if (nPos <= 67) return 'var(--rd-wn)';
    return 'var(--rd-ok)';
}
/* ═══════════════════════════════════════════════════════════════
   AGREGACJA KPI
═══════════════════════════════════════════════════════════════ */
function computeKPIs(rows) {
    const full = rows.filter(r => r.total_sales > 0);
    if (!full.length) return null;
    const totalRevenue   = full.reduce((s, r) => s + Number(r.total_sales), 0);
    const totalNet       = full.reduce((s, r) => s + Number(r.net_income), 0);
    const totalTxn       = full.reduce((s, r) => s + Number(r.transactions_count), 0);
    const avgTicket      = totalTxn > 0 ? totalRevenue / totalTxn : 0;
    const avgDailyTxn    = full.reduce((s, r) => s + Number(r.avg_transactions_count), 0) / full.length;
    const netMargin      = totalRevenue > 0 ? totalNet / totalRevenue : 0;
    const annualRevenue  = (totalRevenue / full.length) * 12;
    // Agregat udziałów kosztów (ważona śr. przez przychód)
    const avgFoodPct     = totalRevenue > 0
        ? full.reduce((s, r) => s + Number(r.material_cost), 0) / totalRevenue * 100
        : 0;
    const avgLabourPct   = totalRevenue > 0
        ? full.reduce((s, r) => s + Number(r.employee_cost), 0) / totalRevenue * 100
        : 0;
    const avgShopPct     = totalRevenue > 0
        ? full.reduce((s, r) => s + Number(r.shop_cost), 0) / totalRevenue * 100
        : 0;
    const avgWastePct    = totalRevenue > 0
        ? full.reduce((s, r) => s + Number(r.waste_cost ?? 0), 0) / totalRevenue * 100
        : 0;
    return { totalRevenue, totalNet, totalTxn, avgTicket, avgDailyTxn, netMargin, annualRevenue, full: full.length, avgFoodPct, avgLabourPct, avgShopPct, avgWastePct };
}
/* ═══════════════════════════════════════════════════════════════
   BADGE HELPER — poza renderKPIs (potrzebny też w tabeli)
═══════════════════════════════════════════════════════════════ */
/**
 * Tworzy HTML badge oceny KPI z atrybucją źródła (admin/consultant/default).
 * @param {number} value
 * @param {string} metricKey
 * @param {boolean} lowerIsBetter
 * @param {Object|null} overrideThresholds — opcjonalny override progów (dla tabeli per-wiersz)
 * @param {string|null} overrideSource — opcjonalny override source
 */
function kpiBadge(value, metricKey, lowerIsBetter, overrideThresholds = null, overrideSource = null) {
    const thr = overrideThresholds ?? RD._thresholds[metricKey];
    if (!thr) return '';
    const result = classifyValue(value, thr, lowerIsBetter);
    if (!result) return '';

    const m      = RD.targets[metricKey];
    const source = overrideSource ?? m?.source;
    const hasBoth = !!(m?.admin && m?.consultant);

    let badge = `<span class="rd-cbadge" style="background:${result.color}22;color:${result.color};border:1px solid ${result.color}55;font-size:.68rem;">${result.label}</span>`;

    // Chips konsultanta gdy oba targety istnieją
    let secondaryChip = '';
    if (!overrideThresholds && hasBoth && source === 'admin' && m.consultant) {
        const ct = m.consultant;
        const cLabel = `Konsultant: ${ct.t1} / ${ct.t2} / ${ct.t3}`;
        secondaryChip = `<span class="rd-badge-secondary" title="${cLabel}">kons. ${ct.t1}</span>`;
    }

    // Podpis źródła / ikona domyślnych
        let sourceLabel = '';
        if (source === 'admin')           sourceLabel = rdTrans.source_admin;
        else if (source === 'consultant') sourceLabel = rdTrans.source_consultant;
        else if (source === 'default')    sourceLabel = `<span class="rd-default-info" title="${rdTrans.source_default_tooltip}">${rdTrans.source_default}</span>`;

    return `<div class="rd-badge-wrap">${badge}${secondaryChip}` +
           (sourceLabel ? `<span class="rd-target-source">${sourceLabel}</span>` : '') +
           `</div>`;
}

/* ═══════════════════════════════════════════════════════════════
   RENDER KPI CARDS
═══════════════════════════════════════════════════════════════ */
function renderKPIs(kpi, kpiPrev) {
    if (!kpi) {
        ['kpi-revenue','kpi-net','kpi-ticket','kpi-transactions'].forEach(id => {
            document.getElementById(id).textContent = '—';
        });
        return;
    }

    // Przychód
    document.getElementById('kpi-revenue').textContent = fmt(kpi.totalRevenue);
    if (kpiPrev) {
        const delta = kpiPrev.totalRevenue > 0
            ? (kpi.totalRevenue - kpiPrev.totalRevenue) / kpiPrev.totalRevenue * 100
            : null;
        document.getElementById('kpi-revenue-sub').innerHTML = delta !== null
            ? `<span class="${delta >= 0 ? 'rd-delta-pos' : 'rd-delta-neg'}">${delta >= 0 ? '+' : ''}${delta.toFixed(1)}% ${rdTrans.vs_previous_year}</span>`
            : '';
    }
    document.getElementById('kpi-revenue-badge').innerHTML = kpiBadge(kpi.totalRevenue, 'revenue', false);
    // Wynik netto
    const netEl  = document.getElementById('kpi-net');
    netEl.textContent = fmt(kpi.totalNet);
    netEl.style.color = kpi.totalNet >= 0 ? 'var(--rd-ok)' : 'var(--rd-dg)';
    document.getElementById('kpi-net-sub').textContent = `${rdTrans.margin_label}: ${fmtPct(kpi.netMargin * 100)}`;
    document.getElementById('kpi-net-badge').innerHTML = kpiBadge(kpi.netMargin * 100, 'net_margin_pct', false);
    // Śr. paragon
    document.getElementById('kpi-ticket').textContent = fmt(kpi.avgTicket);
    if (kpiPrev) {
        const delta = kpiPrev.avgTicket > 0
            ? (kpi.avgTicket - kpiPrev.avgTicket) / kpiPrev.avgTicket * 100
            : null;
        document.getElementById('kpi-ticket-sub').innerHTML = delta !== null
            ? `<span class="${delta >= 0 ? 'rd-delta-pos' : 'rd-delta-neg'}">${delta >= 0 ? '+' : ''}${delta.toFixed(1)}% ${rdTrans.vs_previous_year}</span>`
            : '';
    }
    document.getElementById('kpi-ticket-badge').innerHTML = kpiBadge(kpi.avgTicket, 'avg_ticket', false);
    // Śr. transakcje/dzień
    document.getElementById('kpi-transactions').textContent = Math.round(kpi.avgDailyTxn);
    if (kpiPrev) {
        const delta = kpiPrev.avgDailyTxn > 0
            ? (kpi.avgDailyTxn - kpiPrev.avgDailyTxn) / kpiPrev.avgDailyTxn * 100
            : null;
        document.getElementById('kpi-transactions-sub').innerHTML = delta !== null
            ? `<span class="${delta >= 0 ? 'rd-delta-pos' : 'rd-delta-neg'}">${delta >= 0 ? '+' : ''}${delta.toFixed(1)}% ${rdTrans.vs_previous_year}</span>`
            : '';
    }
    // transactions_count target = miesięczna suma transakcji
    document.getElementById('kpi-transactions-badge').innerHTML = kpiBadge(kpi.totalTxn, 'transactions_count', false);

    // Iteracja 5 — nota kontekstu czasowego targetu
    const refEl = document.getElementById('kpi-target-ref');
    if (refEl) {
        if (RD._refMonthLabel) {
            const tooltip = `${rdTrans.target_ref_tooltip_prefix} ${RD._refMonthLabel} ${rdTrans.target_ref_tooltip_suffix}`;
            refEl.innerHTML = `<span class="rd-target-ref" title="${tooltip}">\uD83D\uDCC5 ${rdTrans.target_from_month} ${RD._refMonthLabel}</span>`;
        } else {
            refEl.innerHTML = '';
        }
    }
}
/* ═══════════════════════════════════════════════════════════════
   RENDER KARTA WYCENY
═══════════════════════════════════════════════════════════════ */
function renderValuation(kpi) {
    if (!kpi || kpi.full < 3) {
        document.getElementById('val-current').textContent = '—';
        document.getElementById('val-target').textContent  = '—';
        document.getElementById('gauge-note').textContent  = rdTrans.valuation_min_months;
        return;
    }
    const m        = kpi.netMargin;
    const caAnn    = kpi.annualRevenue;
    const valNow   = caAnn * m * RD.valuationMultiplier;
    const valTgt   = caAnn * RD.marginTarget * RD.valuationMultiplier;
    const nPos     = gPos(m);
    const tgtPos   = gPos(RD.marginTarget);
    const nc       = needleColor(nPos);
    const gap      = m - RD.marginTarget;
    document.getElementById('val-current').textContent   = fmtK(valNow);
    document.getElementById('val-current').style.color   = m >= 0 ? 'inherit' : 'var(--rd-dg)';
    document.getElementById('val-margin-label').textContent = `${rdTrans.net_margin_label}: ${fmtPct(m * 100)}`;
    document.getElementById('val-target').textContent    = fmtK(valTgt);
    const marginTargetPct = (RD.marginTarget * 100).toFixed(0) + '%';
    document.getElementById('val-target-sub').textContent = `${rdTrans.annual_revenue_label} ${fmtK(caAnn)} × ${marginTargetPct} × ${RD.valuationMultiplier}`;
    // Gauge
    document.getElementById('gauge-fill').style.width        = nPos.toFixed(1) + '%';
    document.getElementById('gauge-fill').style.background   = nc;
    document.getElementById('gauge-needle').style.left       = nPos.toFixed(1) + '%';
    document.getElementById('gauge-needle').style.borderColor= nc;
    document.getElementById('gauge-marker-tgt').style.left   = tgtPos.toFixed(1) + '%';
    const gapSign = gap >= 0 ? '+' : '';
    document.getElementById('gauge-note').innerHTML =
        `${rdTrans.valuation_basis}: ${kpi.full} ${rdTrans.months_abbr} · ${rdTrans.annual_revenue_label}: ${fmtK(caAnn)} · ${rdTrans.margin_point_value} <strong>+${fmtK(caAnn * 0.01 * RD.valuationMultiplier)}</strong>` +
        (gap !== 0 ? ` · <span style="color:${gap >= 0 ? 'var(--rd-ok)' : 'var(--rd-dg)'}">${gapSign}${fmtPct(gap * 100)} vs target ${marginTargetPct}</span>` : '');
}
/* ═══════════════════════════════════════════════════════════════
   RENDER POZYCJA WZGLĘDEM TARGETÓW
═══════════════════════════════════════════════════════════════ */
/**
 * Definicja metryk do wyświetlenia: metric_key, label, fn(kpi)→wartość, unit, lowerIsBetter
 */
const TP_METRICS = [
    { key: 'material_cost_pct',  label: () => rdTrans.food_cost_label,    unit: 'pct',    lower: true,  fn: kpi => kpi.avgFoodPct },
    { key: 'employee_cost_pct',  label: () => rdTrans.labour_cost_label,  unit: 'pct',    lower: true,  fn: kpi => kpi.avgLabourPct },
    { key: 'shop_cost_pct',      label: () => rdTrans.shop_cost_label,    unit: 'pct',    lower: true,  fn: kpi => kpi.avgShopPct },
    { key: 'waste_pct',          label: () => rdTrans.waste_cost_label,   unit: 'pct',    lower: true,  fn: kpi => kpi.avgWastePct },
    { key: 'net_margin_pct',     label: () => rdTrans.net_margin_label,   unit: 'pct',    lower: false, fn: kpi => kpi.netMargin * 100 },
    { key: 'revenue',            label: () => rdTrans.income_label,       unit: 'amount', lower: false, fn: kpi => kpi.totalRevenue },
    { key: 'avg_ticket',         label: () => rdTrans.avg_ticket_label,   unit: 'amount', lower: false, fn: kpi => kpi.avgTicket },
    { key: 'transactions_count', label: () => rdTrans.transactions_label, unit: 'count',  lower: false, fn: kpi => kpi.totalTxn },
];

function fmtTpVal(v, unit) {
    if (v === null || v === undefined) return '—';
    if (unit === 'pct')    return Number(v).toFixed(1) + '%';
    if (unit === 'amount') return Math.round(v).toLocaleString('pl-PL') + ' ' + RD.currency;
    if (unit === 'count')  return Math.round(v).toLocaleString('pl-PL');
    return String(v);
}

function renderTargetPosition(kpi) {
    const container = document.getElementById('tp-metrics');
    const refEl     = document.getElementById('tp-ref-label');
    if (!container) return;

    if (refEl) refEl.textContent = RD._refMonthLabel ? rdTrans.target_from_month + ' ' + RD._refMonthLabel : '';

    if (!kpi) {
        container.innerHTML = `<div class="col-12 text-muted" style="font-size:.75rem">${rdTrans.no_data_found}</div>`;
        return;
    }

    const rows = TP_METRICS.map(m => {
        const thr   = RD._thresholds[m.key];
        const value = m.fn(kpi);

        if (!thr) {
            return `<div class="col-12 col-md-6 col-xl-4">
                <div class="tp-metric-row">
                    <div class="tp-metric-header">
                        <span class="tp-metric-name">${m.label()}</span>
                        <span class="tp-metric-val" style="color:var(--rd-t3)">${fmtTpVal(value, m.unit)} <span style="font-size:.6rem;font-weight:400">${rdTrans.no_target}</span></span>
                    </div>
                </div>
            </div>`;
        }

        const cls  = classifyValue(value, thr, m.lower);
        const clr  = cls?.color ?? '#9A9A9A';

        const pts  = [thr.t1, thr.t2, thr.t3, value].filter(x => x != null);
        const minV = Math.min(...pts) * (m.lower ? 0.80 : 0.60);
        const maxV = Math.max(...pts) * (m.lower ? 1.20 : 1.40);
        const rng  = maxV - minV || 1;
        const pct  = v => Math.max(0, Math.min(100, (v - minV) / rng * 100)).toFixed(2);

        const p1 = parseFloat(pct(thr.t1));
        const p2 = parseFloat(pct(thr.t2));
        const p3 = parseFloat(pct(thr.t3));
        const pn = pct(value);

        let zones = '';
        if (m.lower) {
            zones = `
                <div class="tp-zone" style="left:0%;width:${p1}%;background:#dcfce7;border-radius:4px 0 0 4px"></div>
                <div class="tp-zone" style="left:${p1}%;width:${(p2-p1).toFixed(2)}%;background:#fef9c3"></div>
                <div class="tp-zone" style="left:${p2}%;width:${(p3-p2).toFixed(2)}%;background:#ffedd5"></div>
                <div class="tp-zone" style="left:${p3}%;right:0%;background:#fee2e2;border-radius:0 4px 4px 0"></div>`;
        } else {
            const ps = [p3.toFixed(2), p2.toFixed(2), p1.toFixed(2)];
            zones = `
                <div class="tp-zone" style="left:0%;width:${ps[0]}%;background:#fee2e2;border-radius:4px 0 0 4px"></div>
                <div class="tp-zone" style="left:${ps[0]}%;width:${(parseFloat(ps[1])-parseFloat(ps[0])).toFixed(2)}%;background:#ffedd5"></div>
                <div class="tp-zone" style="left:${ps[1]}%;width:${(parseFloat(ps[2])-parseFloat(ps[1])).toFixed(2)}%;background:#fef9c3"></div>
                <div class="tp-zone" style="left:${ps[2]}%;right:0%;background:#dcfce7;border-radius:0 4px 4px 0"></div>`;
        }

        const tick1 = `<span style="left:${p1}%;transform:translateX(-50%)">${fmtTpVal(thr.t1, m.unit)}</span>`;
        const tick3 = `<span style="left:${p3}%;transform:translateX(-50%)">${fmtTpVal(thr.t3, m.unit)}</span>`;

        return `<div class="col-12 col-md-6 col-xl-4">
            <div class="tp-metric-row">
                <div class="tp-metric-header">
                    <span class="tp-metric-name">${m.label()}</span>
                    <span class="tp-metric-val" style="color:${clr}">${fmtTpVal(value, m.unit)}</span>
                </div>
                <div class="tp-bar-wrap">
                    ${zones}
                    <div class="tp-needle" style="left:${pn}%;border-color:${clr}"></div>
                </div>
                <div class="tp-ticks">${tick1}${tick3}</div>
            </div>
        </div>`;
    });

    container.innerHTML = rows.join('');
}
/* ═══════════════════════════════════════════════════════════════
   RENDER WYKRES
═══════════════════════════════════════════════════════════════ */
function buildChartData(current, prev) {
    // Budujemy mapę YYYY-MM → wartość
    const curMap  = Object.fromEntries(current.map(r => [r.period, Number(r.total_sales)]));
    const prevMap = Object.fromEntries(prev.map(r => [r.period, Number(r.total_sales)]));
    // Zbieramy wszystkie etykiety (miesiące) z obu zestawów
    const allPeriods = [...new Set([
        ...current.map(r => r.period),
        ...prev.map(r => {
            // Przesuń datę o +1 rok, żeby wyświetlać na tej samej osi
            const [y, mo] = r.period.split('-');
            return `${parseInt(y) + 1}-${mo}`;
        })
    ])].sort();
    const labels    = allPeriods;
    const curValues = labels.map(p => curMap[p] ?? null);
    const prevValues = labels.map(p => {
        const [y, mo] = p.split('-');
        const prevKey = `${parseInt(y) - 1}-${mo}`;
        return prevMap[prevKey] ?? null;
    });
    return { labels, curValues, prevValues };
}
function renderChart(current, prev) {
    // Ukryj skeleton wykresu
    const chartSkeleton = document.getElementById('rd-chart-skeleton');
    if (chartSkeleton) chartSkeleton.style.display = 'none';
    const { labels, curValues, prevValues } = buildChartData(current, prev);
    const ctx = document.getElementById('rd-revenue-chart').getContext('2d');
    const shortenLabel = p => {
        const [y, m] = p.split('-');
        const names = rdTrans.months_short;
        return names[parseInt(m) - 1] + " '" + y.slice(2);
    };
    if (revenueChart) {
        revenueChart.data.labels           = labels.map(shortenLabel);
        revenueChart.data.datasets[0].data = curValues;
        revenueChart.data.datasets[1].data = prevValues;
        revenueChart.update();
        return;
    }
    revenueChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels.map(shortenLabel),
            datasets: [
                {
                    label: String(RD.currentYear),
                    data: curValues,
                    backgroundColor: '#1C3B2E',
                    borderRadius: 3,
                    borderSkipped: false,
                },
                {
                    label: String(RD.prevYear),
                    data: prevValues,
                    backgroundColor: 'rgba(28,59,46,.22)',
                    borderRadius: 3,
                    borderSkipped: false,
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false },
                tooltip: {
                    callbacks: {
                        label: ctx => ` ${ctx.dataset.label}: ${ctx.raw !== null ? fmt(ctx.raw) : '—'}`
                    }
                }
            },
            scales: {
                x: { grid: { display: false }, ticks: { font: { size: 9 } } },
                y: {
                    ticks: {
                        callback: v => Math.round(v / 1000) + 'k',
                        font: { size: 9 }
                    },
                    grid: { color: 'rgba(0,0,0,0.04)' }
                }
            }
        }
    });
}
/* ═══════════════════════════════════════════════════════════════
   RENDER TABELA
═══════════════════════════════════════════════════════════════ */
function costInline(pct, metricKey, threshold, amtStr, overrideThr = null) {
    // Iteracja 5: per-row override (null = brak targetu dla tego wiesiąca → fallback globalny)
    const thresholds = overrideThr ?? RD._thresholds?.[metricKey];
    let c, barW;
    if (thresholds) {
        const cls = classifyValue(pct, thresholds, true);
        if (cls) {
            c    = cls.color;
            barW = clamp(pct / (thresholds.t1 * 1.8) * 30, 1, 30);
            const over = cls.level !== 'good';
            return `<div class="rd-cost-inline">` +
                   `<div class="rd-bar" style="width:${barW}px;background:${c};opacity:.7"></div>` +
                   `<span style="color:${over ? c : 'inherit'};font-weight:${over ? 600 : 400}">${pct.toFixed(1)}%</span>` +
                   `</div><span class="rd-sub" style="display:block;text-align:right">${amtStr}</span>`;
        }
    }
    // Fallback do starego mechanizmu (hardcoded threshold)
    const over = pct > threshold;
    const warn = over && pct <= threshold + 4;
    c    = over ? (warn ? 'var(--rd-wn)' : 'var(--rd-dg)') : 'var(--rd-ok)';
    barW = clamp(pct / (threshold * 1.8) * 30, 1, 30);
    return `<div class="rd-cost-inline">` +
           `<div class="rd-bar" style="width:${barW}px;background:${c};opacity:.7"></div>` +
           `<span style="color:${over ? c : 'inherit'};font-weight:${over ? 600 : 400}">${pct.toFixed(1)}%</span>` +
           `</div><span class="rd-sub" style="display:block;text-align:right">${amtStr}</span>`;
}
function statusBadge(foodPct, labourPct, overrideFoodThr = null, overrideLabourThr = null) {
    // Iteracja 5: per-row override (null = brak targetu dla wiesiąca → globalny)
    const foodThresh   = overrideFoodThr   ?? RD._thresholds?.material_cost_pct;
    const labourThresh = overrideLabourThr ?? RD._thresholds?.employee_cost_pct;

    const foClass = foodThresh
        ? classifyValue(foodPct, foodThresh, true)
        : (foodPct <= RD.foodThreshold ? {level:'good'} : (foodPct <= RD.foodThreshold + 4 ? {level:'medium'} : {level:'bad'}));
    const loClass = labourThresh
        ? classifyValue(labourPct, labourThresh, true)
        : (labourPct <= RD.labourThreshold ? {level:'good'} : (labourPct <= RD.labourThreshold + 4 ? {level:'medium'} : {level:'bad'}));

    const fo = foClass.level === 'good';
    const lo = loClass.level === 'good';
    const fw = foClass.level === 'medium';
    const lw = loClass.level === 'medium';

    if (fo && lo)     return `<span class="rd-cbadge rd-cb-ok">✓ OK</span>`;
    if (!fo && !lo)   return `<span class="rd-cbadge ${fw && lw ? 'rd-cb-wn' : 'rd-cb-dg'}">${fw && lw ? '! F+L' : '⚠ F+L'}</span>`;
    if (!fo)          return `<span class="rd-cbadge ${fw ? 'rd-cb-wn' : 'rd-cb-dg'}">${fw ? '! Food' : '⚠ Food'}</span>`;
    return `<span class="rd-cbadge ${lw ? 'rd-cb-wn' : 'rd-cb-dg'}">${lw ? '! Labor' : '⚠ Labor'}</span>`;
}
function deltaTag(curr, prev) {
    if (prev === null || prev === undefined || !prev) return `<span class="rd-delta-neu">—</span>`;
    const g = (curr - prev) / Math.abs(prev) * 100;
    const cls = g > 0 ? 'rd-delta-pos' : (g < 0 ? 'rd-delta-neg' : 'rd-delta-neu');
    return `<span class="${cls}">${g >= 0 ? '+' : ''}${g.toFixed(1)}%</span>`;
}
function renderTable(rows) {
    const tbody = document.getElementById('rd-tbody');
    if (!rows || !rows.length) {
        tbody.innerHTML = `<tr><td colspan="17" class="text-center text-muted py-4">${rdTrans.no_data_for_period}</td></tr>`;
        return;
    }
    // Sortujemy po okreście
    const sorted = [...rows].sort((a, b) => a.period.localeCompare(b.period));
    const html = sorted.map((r, idx) => {
        const prev      = idx > 0 ? sorted[idx - 1] : null;
        const noData    = !r.total_sales || Number(r.total_sales) === 0;
        if (noData) {
            return `<tr class="rd-row-partial">
                <td>${r.period}</td>
                <td colspan="17" class="text-center text-muted">—</td>
            </tr>`;
        }
        const foodPct   = Number(r.material_cost_share ?? 0);
        const labourPct = Number(r.employee_cost_share ?? 0);
        const shopPct   = Number(r.shop_cost_share ?? 0);
        const wastePct  = Number(r.waste_cost_share ?? 0);
        const netVal    = Number(r.net_income ?? 0);
        const margin    = Number(r.profit_margin ?? 0);
        const netClass  = netVal >= 0 ? 'rd-pos' : 'rd-neg';
        const delta = deltaTag(Number(r.total_sales), prev ? Number(prev.total_sales) : null);
        const b2bTxn      = Number(r.b2b_transactions_count ?? 0);
        const b2bUniq     = Number(r.b2b_unique_clients_count ?? 0);
        const b2bSales    = Number(r.b2b_total_sales ?? 0);
        const retailSales = Number(r.total_sales) - b2bSales;
        const wsPickupCnt = Number(r.webshop_pickup_count ?? 0);
        const wsPickupVal = Number(r.webshop_pickup_sales ?? 0);
        const wsDelCnt    = Number(r.webshop_delivery_count ?? 0);
        const wsDelVal    = Number(r.webshop_delivery_sales ?? 0);

        // Iteracja 5 — progi właściwe dla tego wiesiąca (tylko admin/consultant, bez fallbacku między wierszami)
        const rowThr = getRowThresholds(r.period);
        const foodThr   = rowThr?.material_cost_pct  ?? null;
        const labourThr = rowThr?.employee_cost_pct  ?? null;
        const shopThr   = rowThr?.shop_cost_pct      ?? null;
        const wasteThr  = rowThr?.waste_pct           ?? null;

        return `<tr>
            <td><strong>${r.period}</strong></td>
            <td class="text-end">${Number(r.transactions_count).toLocaleString('pl-PL')}</td>
            <td class="text-end">${Math.round(Number(r.avg_transactions_count))}</td>
            <td class="text-end">${retailSales > 0 ? fmtK(retailSales) : '<span class="rd-neu">—</span>'}</td>
            <td class="text-end">${b2bSales > 0 ? fmtK(b2bSales) : '<span class="rd-neu">—</span>'}</td>
            <td class="text-end"><strong>${fmtK(r.total_sales)}</strong><br><span class="rd-sub">${delta}</span></td>
            <td class="text-end">${fmtK(r.avg_ticket_value)}</td>
            <td class="text-end">${Number(r.avg_products_per_transaction).toFixed(1)}</td>
            <td class="text-end">${costInline(foodPct,   'material_cost_pct', RD.foodThreshold,   fmtK(r.material_cost),  foodThr)}</td>
            <td class="text-end">${costInline(labourPct, 'employee_cost_pct', RD.labourThreshold, fmtK(r.employee_cost), labourThr)}</td>
            <td class="text-end">${costInline(shopPct,   'shop_cost_pct',     20,                 fmtK(r.shop_cost),      shopThr)}</td>
            <td class="text-end">${costInline(wastePct,  'waste_pct',          5,                 fmtK(r.waste_cost ?? 0), wasteThr)}</td>
            <td class="text-end"><strong class="${netClass}">${netVal >= 0 ? '+' : ''}${fmtK(netVal)}</strong><br><span class="rd-sub ${netClass}">${margin >= 0 ? '+' : ''}${margin.toFixed(1)}%</span></td>
            <td class="text-center">${statusBadge(foodPct, labourPct, foodThr, labourThr)}</td>
            <td class="text-end">${b2bTxn > 0 ? `${b2bTxn.toLocaleString('pl-PL')}<br><span class="rd-sub rd-neu">${b2bUniq.toLocaleString('pl-PL')} ${rdTrans.b2b_unique_abbr}</span>` : '<span class="rd-neu">—</span>'}</td>
            <td class="text-end">${wsPickupCnt > 0 ? `${wsPickupCnt.toLocaleString('pl-PL')}<br><span class="rd-sub">${fmtK(wsPickupVal)}</span>` : '<span class="rd-neu">—</span>'}</td>
            <td class="text-end">${wsDelCnt > 0 ? `${wsDelCnt.toLocaleString('pl-PL')}<br><span class="rd-sub">${fmtK(wsDelVal)}</span>` : '<span class="rd-neu">—</span>'}</td>
        </tr>`;
    });
    // Wiersz sumaryczny (tylko pełne miesiące)
    const full = sorted.filter(r => Number(r.total_sales) > 0);
    if (full.length > 1) {
        const tRev      = full.reduce((s, r) => s + Number(r.total_sales), 0);
        const tNet      = full.reduce((s, r) => s + Number(r.net_income), 0);
        const tTxn      = full.reduce((s, r) => s + Number(r.transactions_count), 0);
        const tMat      = full.reduce((s, r) => s + Number(r.material_cost), 0);
        const tEmp      = full.reduce((s, r) => s + Number(r.employee_cost), 0);
        const tShop     = full.reduce((s, r) => s + Number(r.shop_cost), 0);
        const tWaste    = full.reduce((s, r) => s + Number(r.waste_cost ?? 0), 0);
        const tB2bTxn   = full.reduce((s, r) => s + Number(r.b2b_transactions_count ?? 0), 0);
        const tB2bUniq  = full.reduce((s, r) => s + Number(r.b2b_unique_clients_count ?? 0), 0);
        const tB2bSales = full.reduce((s, r) => s + Number(r.b2b_total_sales ?? 0), 0);
        const tWsPickupCnt = full.reduce((s, r) => s + Number(r.webshop_pickup_count ?? 0), 0);
        const tWsPickupVal = full.reduce((s, r) => s + Number(r.webshop_pickup_sales ?? 0), 0);
        const tWsDelCnt    = full.reduce((s, r) => s + Number(r.webshop_delivery_count ?? 0), 0);
        const tWsDelVal    = full.reduce((s, r) => s + Number(r.webshop_delivery_sales ?? 0), 0);
        const tNP   = tRev > 0 ? tNet / tRev * 100 : 0;
        const tFP   = tRev > 0 ? tMat / tRev * 100 : 0;
        const tLP   = tRev > 0 ? tEmp / tRev * 100 : 0;
        const tSP   = tRev > 0 ? tShop / tRev * 100 : 0;
        const tWP   = tRev > 0 ? tWaste / tRev * 100 : 0;
        const tRetailSales = tRev - tB2bSales;
        html.push(`<tr class="rd-row-total">
            <td>\u03a3 ${full.length} ${rdTrans.months_abbr}</td>
            <td class="text-end">${tTxn.toLocaleString('pl-PL')}</td>
            <td class="text-end">&#8212;</td>
            <td class="text-end">${tRetailSales > 0 ? fmtK(tRetailSales) : '—'}</td>
            <td class="text-end">${tB2bSales > 0 ? fmtK(tB2bSales) : '—'}</td>
            <td class="text-end"><strong>${fmtK(tRev)}</strong></td>
            <td class="text-end">&#8212;</td>
            <td class="text-end">&#8212;</td>
            <td class="text-end">${costInline(tFP, 'material_cost_pct', RD.foodThreshold,   fmtK(tMat))}</td>
            <td class="text-end">${costInline(tLP, 'employee_cost_pct', RD.labourThreshold, fmtK(tEmp))}</td>
            <td class="text-end">${costInline(tSP, 'shop_cost_pct',     20,                 fmtK(tShop))}</td>
            <td class="text-end">${costInline(tWP, 'waste_pct',          5,                 fmtK(tWaste))}</td>
            <td class="text-end"><strong class="${tNet >= 0 ? 'rd-pos' : 'rd-neg'}">${tNet >= 0 ? '+' : ''}${fmtK(tNet)}</strong><br><span class="rd-sub ${tNet >= 0 ? 'rd-pos' : 'rd-neg'}">${tNP >= 0 ? '+' : ''}${tNP.toFixed(1)}%</span></td>
            <td class="text-center">${statusBadge(tFP, tLP)}</td>
            <td class="text-end">${tB2bTxn > 0 ? `${tB2bTxn.toLocaleString('pl-PL')}<br><span class="rd-sub rd-neu">${tB2bUniq.toLocaleString('pl-PL')} ${rdTrans.b2b_unique_abbr}</span>` : '—'}</td>
            <td class="text-end">${tWsPickupCnt > 0 ? `${tWsPickupCnt.toLocaleString('pl-PL')}<br><span class="rd-sub">${fmtK(tWsPickupVal)}</span>` : '—'}</td>
            <td class="text-end">${tWsDelCnt > 0 ? `${tWsDelCnt.toLocaleString('pl-PL')}<br><span class="rd-sub">${fmtK(tWsDelVal)}</span>` : '—'}</td>
        </tr>`);
    }
    tbody.innerHTML = html.join('');
}
/* ═══════════════════════════════════════════════════════════════
   FILTROWANIE ZAKRESU
═══════════════════════════════════════════════════════════════ */
function getDateRange(filter) {
    const now    = new Date();
    const y      = now.getFullYear();
    const m      = now.getMonth() + 1;
    const pad    = n => String(n).padStart(2, '0');
    switch (filter) {
        case 'current_month':
            return { from: `${y}-${pad(m)}`, to: `${y}-${pad(m)}`, label: `${y}-${pad(m)}` };
        case 'current_quarter': {
            const qs = Math.floor((m - 1) / 3) * 3 + 1;
            const qe = qs + 2;
            return { from: `${y}-${pad(qs)}`, to: `${y}-${pad(qe)}`, label: `Q${Math.ceil(m / 3)} ${y}` };
        }
        case 'current_year':
            return { from: `${y}-01`, to: `${y}-12`, label: `${rdTrans.year_prefix} ${y}` };
        case 'last_12m': {
            const fromD = new Date(now.getFullYear(), now.getMonth() - 11, 1);
            return {
                from: `${fromD.getFullYear()}-${pad(fromD.getMonth() + 1)}`,
                to:   `${y}-${pad(m)}`,
                label: rdTrans.last_12_months
            };
        }
        default:
            return null;
    }
}
function filterCurrentData(current, prevRaw, dateFrom, dateTo) {
    // prevRaw — dane N-1 z API są już odpowiednio przesunięte
    return { current, prev: prevRaw };
}
/* ═══════════════════════════════════════════════════════════════
   SKELETON — RESET KART PRZED ŁADOWANIEM
═══════════════════════════════════════════════════════════════ */
function showSkeletons() {
    // KPI cards
    ['kpi-revenue', 'kpi-net', 'kpi-ticket', 'kpi-transactions'].forEach(id => {
        const el = document.getElementById(id);
        if (el) el.innerHTML = '<div class="rd-skeleton rd-skeleton-value"></div>';
    });
    ['kpi-revenue-sub', 'kpi-net-sub', 'kpi-ticket-sub', 'kpi-transactions-sub'].forEach(id => {
        const el = document.getElementById(id);
        if (el) el.innerHTML = '<div class="rd-skeleton rd-skeleton-sub"></div>';
    });
    // Wycena
    const valCurrent = document.getElementById('val-current');
    if (valCurrent) valCurrent.innerHTML = '<div class="rd-skeleton rd-skeleton-value" style="width:80%"></div>';
    const valTarget = document.getElementById('val-target');
    if (valTarget) valTarget.innerHTML = '<div class="rd-skeleton rd-skeleton-value" style="width:80%"></div>';
    const valMarginLabel = document.getElementById('val-margin-label');
    if (valMarginLabel) valMarginLabel.innerHTML = '';
    const valTargetSub = document.getElementById('val-target-sub');
    if (valTargetSub) valTargetSub.innerHTML = '';
    const gaugeNote = document.getElementById('gauge-note');
    if (gaugeNote) gaugeNote.innerHTML = '<div class="rd-skeleton rd-skeleton-sub" style="width:70%"></div>';
    // Gauge reset
    const gaugeFill   = document.getElementById('gauge-fill');
    const gaugeNeedle = document.getElementById('gauge-needle');
    if (gaugeFill)   { gaugeFill.style.width = '0%'; gaugeFill.style.background = 'var(--rd-t3)'; }
    if (gaugeNeedle) { gaugeNeedle.style.left = '0%'; gaugeNeedle.style.borderColor = 'var(--rd-t3)'; }
    // Wykres
    const chartSkeleton = document.getElementById('rd-chart-skeleton');
    if (chartSkeleton) chartSkeleton.style.display = 'block';
    // Tabela
    const tbody = document.getElementById('rd-tbody');
    if (tbody) tbody.innerHTML = `<tr><td colspan="17" class="text-center text-muted py-4"><div class="spinner-border spinner-border-sm me-2"></div></td></tr>`;
    // Pozycja względem targetów
    const tpMetrics = document.getElementById('tp-metrics');
    if (tpMetrics) tpMetrics.innerHTML = Array(7).fill(
        `<div class="col-12 col-md-6 col-xl-4"><div class="tp-metric-row"><div class="rd-skeleton" style="height:10px;width:45%;margin-bottom:4px"></div><div class="rd-skeleton" style="height:8px"></div></div></div>`
    ).join('');
}
/* ═══════════════════════════════════════════════════════════════
   ŁADOWANIE DANYCH (AJAX)
═══════════════════════════════════════════════════════════════ */
async function loadData(dateFrom, dateTo) {
    const spinner = document.getElementById('rd-spinner');
    spinner.classList.remove('d-none');
    try {
        const resp = await fetch(`${RD.root}/ajax/analysis/revenue/monthly-data`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ date_from: dateFrom, date_to: dateTo }),
        });
        if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
        const json = await resp.json();
        return { current: json.current ?? [], prev: json.previous ?? [] };
    } catch (e) {
        console.error('Błąd ładowania danych:', e);
        return { current: [], prev: [] };
    } finally {
        spinner.classList.add('d-none');
    }
}
/* ═══════════════════════════════════════════════════════════════
   APLIKACJA FILTRA I ODŚWIEŻENIE WIDOKU
═══════════════════════════════════════════════════════════════ */
async function applyFilter(filter, customFrom = null, customTo = null) {
    state.filter = filter;
    let dateFrom, dateTo, label;
    if (filter === 'custom') {
        dateFrom = customFrom;
        dateTo   = customTo;
        label    = `${dateFrom} → ${dateTo}`;
    } else {
        const range = getDateRange(filter);
        if (!range) return;
        dateFrom = range.from;
        dateTo   = range.to;
        label    = range.label;
    }
    document.getElementById('rd-period-label').textContent = label;
    showSkeletons();

    // Iteracja 5 — ładuj targety roczne dla zakresu (równolegle z danymi)
    const years = getYearsInRange(dateFrom, dateTo);
    const [data, ...yearlyTargetsMaps] = await Promise.all([
        loadData(dateFrom, dateTo),
        ...years.map(y => loadYearlyTargets(y))
    ]);

    // Scalamy targety roczne do RD.targetsByMonth
    for (const map of yearlyTargetsMaps) {
        Object.assign(RD.targetsByMonth, map);
    }

    // Znajdź miesiąc referencyjny (ostatni z admin/consultant w zakresie)
    const refMonth = findReferenceMonth(dateFrom, dateTo);
    RD._refMonthLabel = refMonth ? formatMonthLabel(refMonth) : null;

    // Zaktualizuj progi dla KPI zbiorczych (z miesiąca referencyjnego)
    if (refMonth && RD.targetsByMonth[refMonth]) {
        applyTargets(RD.targetsByMonth[refMonth]);
    }
    // Jeśli zakres = 1 miesiąc, nie pokazuj noty referencyjnej
    if (dateFrom === dateTo) {
        RD._refMonthLabel = null;
    }

    const current = data.current;
    const prev    = data.prev;
    state.currentData = current;
    state.prevData    = prev;
    const kpi     = computeKPIs(current);
    const kpiPrev = computeKPIs(prev);
    renderKPIs(kpi, kpiPrev);
    renderValuation(kpi);
    renderTargetPosition(kpi);
    renderChart(current, prev);
    renderTable(current);
}
/* ═══════════════════════════════════════════════════════════════
   OBSŁUGA PRZYCISKÓW
═══════════════════════════════════════════════════════════════ */
document.getElementById('rd-quick-filters').addEventListener('click', e => {
    const btn = e.target.closest('.rd-toggle-btn');
    if (!btn) return;
    document.querySelectorAll('#rd-quick-filters .rd-toggle-btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    const filter = btn.dataset.filter;
    const customDiv = document.getElementById('rd-custom-range');
    if (filter === 'custom') {
        customDiv.classList.remove('d-none');
    } else {
        customDiv.classList.add('d-none');
        applyFilter(filter);
    }
});
document.getElementById('rd-apply-custom').addEventListener('click', () => {
    const from = document.getElementById('rd-date-from').value;
    const to   = document.getElementById('rd-date-to').value;
    if (!from || !to) { alert('{{ translations.select_date_range ?? "Wybierz zakres dat" }}'); return; }
    if (from > to)    { alert('{{ translations.invalid_date_range ?? "Nieprawidłowy zakres dat" }}'); return; }
    applyFilter('custom', from, to);
});
/* ═══════════════════════════════════════════════════════════════
   INICJALIZACJA
═══════════════════════════════════════════════════════════════ */
document.addEventListener('DOMContentLoaded', () => {
    // Ustaw domyślne daty w polach własnego zakresu
    const now = new Date();
    const pad = n => String(n).padStart(2, '0');
    document.getElementById('rd-date-from').value = `${now.getFullYear()}-01`;
    document.getElementById('rd-date-to').value   = `${now.getFullYear()}-${pad(now.getMonth() + 1)}`;
    // Renderuj od razu z danymi wstępnie załadowanymi
    applyFilter('current_year');
});
/* ═══════════════════════════════════════════════════════════════
   PODŚWIETLENIE KOLUMNY Z LEGENDY
═══════════════════════════════════════════════════════════════ */
(function () {
    function highlightCol(n, on) {
        const table = document.getElementById('rd-table');
        if (!table) return;
        table.querySelectorAll(`th:nth-child(${n}), td:nth-child(${n})`).forEach(cell => {
            cell.classList.toggle('rd-col-hl', on);
        });
    }

    function highlightLegend(n, on) {
        const item = document.querySelector(`.rd-legend-item[data-col="${n}"]`);
        if (item) item.classList.toggle('rd-leg-hl', on);
    }

    // hover na pozycji legendy → podświetl kolumnę w tabeli
    document.addEventListener('mouseover', e => {
        const item = e.target.closest('.rd-legend-item[data-col]');
        if (!item) return;
        highlightCol(item.dataset.col, true);
    });
    document.addEventListener('mouseout', e => {
        const item = e.target.closest('.rd-legend-item[data-col]');
        if (!item) return;
        highlightCol(item.dataset.col, false);
    });

    // hover na nagłówku kolumny tabeli → podświetl kolumnę w tabeli + opis w legendzie
    document.addEventListener('mouseover', e => {
        const th = e.target.closest('#rd-table thead th[data-col]');
        if (!th) return;
        highlightCol(th.dataset.col, true);
        highlightLegend(th.dataset.col, true);
    });
    document.addEventListener('mouseout', e => {
        const th = e.target.closest('#rd-table thead th[data-col]');
        if (!th) return;
        highlightCol(th.dataset.col, false);
        highlightLegend(th.dataset.col, false);
    });
}());
</script>
{% endblock %}