{% extends "layouts/base.twig" %}
{% block title %}{{ translations.b2b_dashboard ?? 'B2B — Analityka' }}{% endblock %}
{% block head %}
<style>
    :root {
        --b2b-green:  #1C3B2E;
        --b2b-ok:     #16a34a; --b2b-ok-bg: #f0fdf4; --b2b-ok-bd: #bbf7d0;
        --b2b-dg:     #dc2626; --b2b-dg-bg: #fef2f2; --b2b-dg-bd: #fecaca;
        --b2b-na:     #6b7280; --b2b-na-bg: #f9fafb; --b2b-na-bd: #e5e7eb;
        --b2b-t1:     #0E0E0E; --b2b-t2: #5A5A5A; --b2b-t3: #9A9A9A;
        --b2b-bd:     rgba(0,0,0,0.07);
        --b2b-sf:     #ffffff; --b2b-sf2: #F0EDE9; --b2b-sf3: #E5E1DC;
    }
    /* KPI karta */
    .b2b-kpi-card {
        border-radius: 14px; border: 0.5px solid var(--b2b-bd);
        background: var(--b2b-sf); padding: 18px 20px; height: 100%;
    }
    .b2b-kpi-label {
        font-size: 0.68rem; font-weight: 700; letter-spacing: .07em;
        text-transform: uppercase; color: var(--b2b-t3); margin-bottom: 6px;
    }
    .b2b-kpi-value {
        font-size: 1.55rem; font-weight: 800; color: var(--b2b-t1); line-height: 1.1;
        margin-bottom: 6px;
    }
    .b2b-kpi-value.accent { color: var(--b2b-green); }
    /* Trend badges */
    .b2b-trend {
        display: inline-flex; align-items: center; gap: 4px;
        padding: 2px 8px; border-radius: 4px; font-size: 0.71rem; font-weight: 700;
    }
    .b2b-trend-up   { background: var(--b2b-ok-bg); color: var(--b2b-ok);  }
    .b2b-trend-down { background: var(--b2b-dg-bg); color: var(--b2b-dg);  }
    .b2b-trend-flat { background: var(--b2b-na-bg); color: var(--b2b-na);  }
    .b2b-trend-meta { font-size: 0.65rem; color: var(--b2b-t3); margin-top: 4px; }
    /* Donut */
    .b2b-donut-wrap { position: relative; height: 160px; width: 160px; margin: 0 auto; }
    /* Chart */
    .b2b-chart-wrap { position: relative; height: 240px; }
    /* Section header */
    .b2b-section-hdr {
        font-size: 0.72rem; font-weight: 700; letter-spacing: .07em;
        text-transform: uppercase; color: var(--b2b-t2);
        padding-bottom: 6px; border-bottom: 1.5px solid var(--b2b-sf3);
        margin-bottom: 16px;
    }
    /* Skeleton */
    .b2b-skeleton {
        background: linear-gradient(90deg,var(--b2b-sf2) 25%,var(--b2b-sf3) 50%,var(--b2b-sf2) 75%);
        background-size: 200% 100%; animation: b2b-shimmer 1.4s infinite; border-radius: 6px;
    }
    @keyframes b2b-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
    /* Filter bar */
    .b2b-filter-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    /* Threshold notice */
    .b2b-threshold-notice {
        font-size: 0.72rem; color: var(--b2b-t3);
        background: var(--b2b-sf2); border: 0.5px solid var(--b2b-bd);
        border-radius: 8px; padding: 6px 12px; display: inline-flex; align-items: center; gap: 6px;
    }
    /* Invoice table */
    .b2b-inv-sum {
        font-size: 0.72rem; color: var(--b2b-t3); margin-top: 4px;
    }
</style>
{% endblock %}
{% block page_heading %}
<div class="page-heading">
    <h3>{{ translations.b2b_dashboard ?? 'B2B — Analityka' }}</h3>
    <p class="text-subtitle text-muted">{{ translations.b2b_dashboard_subtitle ?? 'Kompleksowy panel wskaźników sprzedaży B2B dla wybranego okresu.' }}</p>
</div>
{% endblock %}
{% block content %}

{# ── Baner progu B2B ────────────────────────────────────────────── #}
{% if b2b_min_transaction_value > 0 %}
<div class="d-flex align-items-center gap-3 mb-3" style="background:#fffbeb;border:0.5px solid #fde68a;border-radius:10px;padding:10px 16px">
    <span style="font-size:1.1rem;flex-shrink:0">⚠️</span>
    <span class="small" style="color:#92400e">
        {{ translations.b2b_threshold_notice ?? 'Aktywny próg klasyfikacji B2B:' }}
        <strong>{{ b2b_min_transaction_value|number_format(2, ',', ' ') }} {{ currency_symbol }}</strong>
        — {{ translations.b2b_threshold_notice_desc ?? 'transakcje poniżej tej kwoty nie są wliczane do statystyk B2B.' }}
    </span>
</div>
{% endif %}

{# ══════════════════════════════════════════════════════════════════
   SEKCJA 1 — Analiza miesięczna
   Filtr: miesiąc + rok → KPI karty + donut
   ══════════════════════════════════════════════════════════════════ #}
<div class="card mb-3">
    <div class="card-body py-3">
        <div class="d-flex align-items-center gap-2 mb-2">
            <span class="fw-bold small">{{ translations.b2b_section_monthly ?? 'Analiza miesięczna' }}</span>
            <span class="badge rounded-pill" style="background:var(--b2b-sf2);color:var(--b2b-t3);font-size:0.65rem;font-weight:600;border:0.5px solid var(--b2b-bd)">
                {{ translations.b2b_section_monthly_hint ?? 'KPI wybranego miesiąca' }}
            </span>
        </div>
        <div class="b2b-filter-bar">
            <label class="small fw-semibold mb-0">{{ translations.month_label ?? 'Miesiąc' }}:</label>
            <select class="form-select form-select-sm" id="b2b-month" style="width:140px">
                {% set months = (translations.months_long_csv ?? 'Styczeń,Luty,Marzec,Kwiecień,Maj,Czerwiec,Lipiec,Sierpień,Wrzesień,Październik,Listopad,Grudzień')|split(',') %}
                {% for m in 1..12 %}
                <option value="{{ m }}" {% if m == current_month %}selected{% endif %}>{{ months[m-1] }}</option>
                {% endfor %}
            </select>
            <label class="small fw-semibold mb-0">{{ translations.year_label ?? 'Rok' }}:</label>
            <select class="form-select form-select-sm" id="b2b-year" style="width:100px">
                {% for y in (current_year - 2)..(current_year) %}
                <option value="{{ y }}" {% if y == current_year %}selected{% endif %}>{{ y }}</option>
                {% endfor %}
            </select>
            <button class="btn btn-sm btn-primary" id="b2b-apply">{{ translations.apply ?? 'Zastosuj' }}</button>
            <div class="spinner-border spinner-border-sm text-secondary d-none ms-2" id="b2b-spinner"></div>
        </div>
    </div>
</div>

{# ── KPI ─────────────────────────────────────────────────────────── #}
<div class="b2b-section-hdr" id="b2b-period-label">{{ translations.b2b_kpi_section ?? 'Wskaźniki bieżącego okresu' }}</div>
<div id="b2b-kpi-grid" class="row g-3 mb-4">
    {% for i in 1..6 %}
    <div class="col-6 col-md-4 col-xl-2">
        <div class="b2b-kpi-card">
            <div class="b2b-skeleton" style="height:10px;width:60%;margin-bottom:10px"></div>
            <div class="b2b-skeleton" style="height:26px;width:50%;margin-bottom:8px"></div>
            <div class="b2b-skeleton" style="height:8px;width:40%"></div>
        </div>
    </div>
    {% endfor %}
</div>

{# ── Donut (udział B2B) ─────────────────────────────────────────── #}
<div class="row g-3 mb-3">
    <div class="col-12 col-sm-6 col-md-4 col-xl-3">
        <div class="card h-100">
            <div class="card-body d-flex flex-column align-items-center justify-content-center">
                <div class="b2b-section-hdr w-100 text-center" style="border:none">{{ translations.b2b_share_chart_title ?? 'Udział B2B w przychodach' }}</div>
                <div class="b2b-donut-wrap">
                    <canvas id="b2b-donut-chart"></canvas>
                </div>
                <div id="b2b-donut-legend" class="mt-3 text-center" style="font-size:0.75rem"></div>
            </div>
        </div>
    </div>
</div>

{# ── Informacja kontekstowa (pełna szerokość) ───────────────────── #}
<div class="d-flex align-items-start gap-3 mb-4 px-1" style="background:var(--b2b-sf2);border:0.5px solid var(--b2b-bd);border-radius:10px;padding:12px 16px">
    <span style="font-size:1.3rem;line-height:1.2;flex-shrink:0">📅</span>
    <span class="small text-muted">{{ translations.b2b_monthly_context_note ?? 'Powyższe dane dotyczą wybranego miesiąca. Aby zobaczyć pełny przebieg roczny, użyj sekcji poniżej.' }}</span>
</div>

{# ══════════════════════════════════════════════════════════════════
   SEKCJA 2 — Porównanie roczne
   Filtr: tylko rok → grouped bar chart
   ══════════════════════════════════════════════════════════════════ #}
<div class="card mb-3">
    <div class="card-body py-3">
        <div class="d-flex align-items-center gap-2 mb-2">
            <span class="fw-bold small">{{ translations.b2b_section_yearly ?? 'Porównanie roczne' }}</span>
            <span class="badge rounded-pill" style="background:var(--b2b-sf2);color:var(--b2b-t3);font-size:0.65rem;font-weight:600;border:0.5px solid var(--b2b-bd)">
                {{ translations.b2b_section_yearly_hint ?? 'Wszystkie 12 miesięcy wybranego roku' }}
            </span>
        </div>
        <div class="b2b-filter-bar">
            <label class="small fw-semibold mb-0">{{ translations.year_label ?? 'Rok' }}:</label>
            <select class="form-select form-select-sm" id="b2b-chart-year" style="width:100px">
                {% for y in (current_year - 2)..(current_year) %}
                <option value="{{ y }}" {% if y == current_year %}selected{% endif %}>{{ y }}</option>
                {% endfor %}
            </select>
            <button class="btn btn-sm btn-outline-secondary" id="b2b-chart-apply">{{ translations.apply ?? 'Zastosuj' }}</button>
            <div class="spinner-border spinner-border-sm text-secondary d-none ms-2" id="b2b-chart-spinner"></div>
        </div>
    </div>
</div>

<div class="card mb-4">
    <div class="card-body">
        <div class="d-flex align-items-center gap-3 mb-3 flex-wrap">
            <div class="b2b-section-hdr mb-0" style="border:none">{{ translations.b2b_monthly_chart_title ?? 'Sprzedaż B2B miesięcznie — rok bieżący vs poprzedni' }}</div>
            <select class="form-select form-select-sm ms-auto" id="b2b-chart-metric" style="width:auto">
                <option value="sales">{{ translations.b2b_metric_sales ?? 'Wartość sprzedaży B2B' }}</option>
                <option value="txn">{{ translations.b2b_metric_txn ?? 'Liczba transakcji B2B' }}</option>
                <option value="uniq">{{ translations.b2b_metric_uniq ?? 'Unikalni klienci B2B' }}</option>
                <option value="share">{{ translations.b2b_metric_share ?? 'Udział B2B w przychodach (%)' }}</option>
            </select>
        </div>
        <div class="b2b-chart-wrap">
            <canvas id="b2b-monthly-chart"></canvas>
        </div>
    </div>
</div>

{% endblock %}
{% block scripts %}
<script src="{{ root }}/assets/vendors/chartjs/Chart.bundle.min.js"></script>
<script>
/* ── Konfiguracja ──────────────────────────────────────────────── */
const B2B = {
    root:     '{{ root }}',
    currency: '{{ currency_symbol ?? '' }}',
    year:     {{ current_year }},
    month:    {{ current_month }},
    data:     {{ dashboard_json | raw }},
};

/* ── Tłumaczenia JS ────────────────────────────────────────────── */
const b2bTrans = {
    kpi_sales:          '{{ translations.b2b_kpi_sales          ?? "Sprzedaż B2B" }}',
    kpi_transactions:   '{{ translations.b2b_kpi_transactions   ?? "Transakcje B2B" }}',
    kpi_avg_ticket:     '{{ translations.b2b_kpi_avg_ticket     ?? "Średni paragon B2B" }}',
    kpi_unique_clients: '{{ translations.b2b_kpi_unique_clients ?? "Klienci B2B (uniq.)" }}',
    kpi_share:          '{{ translations.b2b_kpi_share          ?? "Udział B2B" }}',
    kpi_invoices:       '{{ translations.b2b_kpi_invoices       ?? "Faktury B2B" }}',
    trend_mom:          '{{ translations.b2b_trend_mom          ?? "vs poprzedni miesiąc" }}',
    trend_yoy:          '{{ translations.b2b_trend_yoy          ?? "vs ten sam miesiąc rok temu" }}',
    no_data:            '{{ translations.no_data_for_period     ?? "Brak danych dla wybranego okresu." }}',
    inv_sum:            '{{ translations.b2b_inv_sum            ?? "Wartość faktur:" }}',
    retail:             '{{ translations.b2b_retail             ?? "Detaliczny" }}',
    months_short:       '{{ translations.months_short_csv       ?? "Sty,Lut,Mar,Kwi,Maj,Cze,Lip,Sie,Wrz,Paź,Lis,Gru" }}',
};
const MONTHS_SHORT = b2bTrans.months_short.split(',');

/* ── Formatowanie ──────────────────────────────────────────────── */
function b2bFmt(v, unit) {
    if (v === null || v === undefined) return '—';
    const n = Number(v);
    if (unit === 'amount') return n.toLocaleString('pl-PL', {minimumFractionDigits:0, maximumFractionDigits:0}) + ' ' + B2B.currency;
    if (unit === 'pct')   return n.toFixed(1) + '%';
    return n.toLocaleString('pl-PL', {minimumFractionDigits:0, maximumFractionDigits:0});
}

function trendBadge(pct, momLabel) {
    if (pct === null || pct === undefined) return '';
    const sign  = pct > 0 ? '+' : '';
    const cls   = pct > 0 ? 'b2b-trend-up' : (pct < 0 ? 'b2b-trend-down' : 'b2b-trend-flat');
    const arrow = pct > 0 ? '↑' : (pct < 0 ? '↓' : '→');
    return `<span class="b2b-trend ${cls}">${arrow} ${sign}${pct}%</span>
            <div class="b2b-trend-meta">${momLabel}</div>`;
}

/* ── Karty KPI ─────────────────────────────────────────────────── */
function renderKPI(data) {
    const grid = document.getElementById('b2b-kpi-grid');
    const lbl  = document.getElementById('b2b-period-label');
    if (!data) {
        grid.innerHTML = `<div class="col-12 text-muted small">${b2bTrans.no_data}</div>`;
        return;
    }

    lbl.textContent = `{{ translations.b2b_kpi_section ?? 'Wskaźniki bieżącego okresu' }} — ${data.period}`;

    const kpi = data.kpi;
    const defs = [
        { key: 'b2b_sales',          label: b2bTrans.kpi_sales,          accent: true },
        { key: 'b2b_transactions',   label: b2bTrans.kpi_transactions,   accent: false },
        { key: 'b2b_avg_ticket',     label: b2bTrans.kpi_avg_ticket,     accent: false },
        { key: 'b2b_unique_clients', label: b2bTrans.kpi_unique_clients, accent: false },
        { key: 'b2b_share_pct',      label: b2bTrans.kpi_share,          accent: false },
        { key: 'b2b_invoices',       label: b2bTrans.kpi_invoices,       accent: false },
    ];

    grid.innerHTML = defs.map(d => {
        const m = kpi[d.key];
        if (!m) return '';
        const valStr  = b2bFmt(m.value, m.unit);
        const momHtml = trendBadge(m.mom_pct, b2bTrans.trend_mom);
        const yoyHtml = trendBadge(m.yoy_pct, b2bTrans.trend_yoy);
        const extra   = d.key === 'b2b_invoices' && m.inv_sum
            ? `<div class="b2b-inv-sum">${b2bTrans.inv_sum} ${b2bFmt(m.inv_sum, 'amount')}</div>` : '';
        return `<div class="col-6 col-md-4 col-xl-2">
            <div class="b2b-kpi-card">
                <div class="b2b-kpi-label">${d.label}</div>
                <div class="b2b-kpi-value${d.accent ? ' accent' : ''}">${valStr}</div>
                ${momHtml}
                ${yoyHtml}
                ${extra}
            </div>
        </div>`;
    }).join('');
}

/* ── Donut chart (udział B2B vs detaliczny) ────────────────────── */
let donutChart = null;
function renderDonut(data) {
    if (!data) return;
    const kpi       = data.kpi;
    const b2bSales  = kpi.b2b_sales?.value  ?? 0;
    const total     = kpi.b2b_share_pct?.total_sales ?? 0;
    const retail    = Math.max(0, total - b2bSales);
    const sharePct  = kpi.b2b_share_pct?.value ?? 0;

    const legend = document.getElementById('b2b-donut-legend');
    legend.innerHTML = `<span style="color:var(--b2b-green);font-weight:700">B2B ${sharePct}%</span>
                        &nbsp;·&nbsp;
                        <span style="color:var(--b2b-t3)">${b2bTrans.retail} ${(100 - sharePct).toFixed(1)}%</span>`;

    const ctx = document.getElementById('b2b-donut-chart').getContext('2d');
    if (donutChart) donutChart.destroy();
    donutChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ['B2B', b2bTrans.retail],
            datasets: [{
                data: [b2bSales, retail],
                backgroundColor: ['rgba(28,59,46,0.85)', 'rgba(229,225,220,0.9)'],
                borderWidth: 1,
                borderColor: ['#1C3B2E', '#E5E1DC'],
            }],
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            cutoutPercentage: 68,
            legend: { display: false },
            tooltips: {
                callbacks: {
                    label: (item, d) => {
                        const v = d.datasets[0].data[item.index];
                        return ` ${d.labels[item.index]}: ${b2bFmt(v, 'amount')}`;
                    },
                },
            },
        },
    });
}

/* ── Wykres miesięczny ─────────────────────────────────────────── */
let monthlyChart = null;
let currentChartMetric = 'sales';

const METRIC_MAP = {
    sales: { curr: 'curr_sales', prev: 'prev_sales', unit: 'amount' },
    txn:   { curr: 'curr_txn',   prev: 'prev_txn',   unit: 'count'  },
    uniq:  { curr: 'curr_uniq',  prev: 'prev_uniq',  unit: 'count'  },
    share: { curr: 'curr_share', prev: 'prev_share', unit: 'pct'    },
};

function renderMonthlyChart(data, metric) {
    if (!data?.chart) return;
    const chart   = data.chart;
    const map     = METRIC_MAP[metric] ?? METRIC_MAP.sales;
    const currVals = chart.months.map(m => m[map.curr]);
    const prevVals = chart.months.map(m => m[map.prev]);

    const ctx = document.getElementById('b2b-monthly-chart').getContext('2d');
    if (monthlyChart) monthlyChart.destroy();

    monthlyChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: MONTHS_SHORT,
            datasets: [
                {
                    label: String(chart.current_year),
                    data: currVals,
                    backgroundColor: 'rgba(28,59,46,0.8)',
                    borderColor: 'rgba(28,59,46,1)',
                    borderWidth: 1,
                    order: 2,
                },
                {
                    label: String(chart.prev_year),
                    data: prevVals,
                    backgroundColor: 'rgba(28,59,46,0.18)',
                    borderColor: 'rgba(28,59,46,0.4)',
                    borderWidth: 1,
                    order: 3,
                },
                {
                    label: String(chart.current_year) + ' trend',
                    data: currVals,
                    type: 'line',
                    borderColor: '#16a34a',
                    borderWidth: 2,
                    pointBackgroundColor: '#16a34a',
                    pointRadius: 3,
                    fill: false,
                    spanGaps: true,
                    order: 1,
                },
            ],
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            legend: { position: 'top', labels: { fontSize: 11, usePointStyle: true, padding: 14 } },
            tooltips: {
                mode: 'index', intersect: false,
                callbacks: {
                    label: (item, d) => {
                        const ds  = d.datasets[item.datasetIndex];
                        const val = item.yLabel;
                        if (val === null || val === undefined) return `${ds.label}: —`;
                        return `${ds.label}: ${b2bFmt(val, map.unit)}`;
                    },
                },
            },
            scales: {
                xAxes: [{ gridLines: { display: false }, ticks: { fontSize: 11 } }],
                yAxes: [{
                    ticks: { beginAtZero: true, fontSize: 11, callback: v => b2bFmt(v, map.unit) },
                    gridLines: { color: 'rgba(0,0,0,0.05)' },
                }],
            },
        },
    });
}

/* ── Render kompletny (init) ────────────────────────────────────── */
// Nieużywane po podziale na dwie sekcje — zachowane dla ewentualnego re-use

/* ── Ładowanie AJAX ─────────────────────────────────────────────── */
async function loadDashboard(year, month) {
    const spinner = document.getElementById('b2b-spinner');
    spinner.classList.remove('d-none');
    try {
        const resp = await fetch(`${B2B.root}/ajax/analysis/b2b/dashboard?year=${year}&month=${month}`);
        if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
        return await resp.json();
    } catch (e) {
        console.error('Błąd ładowania dashboardu B2B:', e);
        return null;
    } finally {
        spinner.classList.add('d-none');
    }
}

/* ── Zdarzenia ─────────────────────────────────────────────────── */

// Sekcja 1 — KPI miesięczne
document.getElementById('b2b-apply').addEventListener('click', async () => {
    const year  = parseInt(document.getElementById('b2b-year').value);
    const month = parseInt(document.getElementById('b2b-month').value);

    document.getElementById('b2b-kpi-grid').innerHTML = Array(6).fill(
        `<div class="col-6 col-md-4 col-xl-2"><div class="b2b-kpi-card"><div class="b2b-skeleton" style="height:90px"></div></div></div>`
    ).join('');

    const data = await loadDashboard(year, month);
    if (data) {
        renderKPI(data);
        renderDonut(data);
    }
});

// Sekcja 2 — Wykres roczny (niezależny od sekcji 1)
document.getElementById('b2b-chart-apply').addEventListener('click', async () => {
    const year  = parseInt(document.getElementById('b2b-chart-year').value);
    const month = parseInt(document.getElementById('b2b-month').value); // miesiąc do API, chart ignoruje

    const spinner = document.getElementById('b2b-chart-spinner');
    spinner.classList.remove('d-none');

    const data = await loadDashboard(year, month);
    spinner.classList.add('d-none');

    if (data) {
        renderMonthlyChart(data, currentChartMetric);
    }
});

document.getElementById('b2b-chart-metric').addEventListener('change', function () {
    currentChartMetric = this.value;
    if (B2B.data) renderMonthlyChart(B2B.data, currentChartMetric);
});

/* ── Init ───────────────────────────────────────────────────────── */
(function () {
    if (B2B.data) {
        renderKPI(B2B.data);
        renderDonut(B2B.data);
        renderMonthlyChart(B2B.data, currentChartMetric);
    } else {
        document.getElementById('b2b-kpi-grid').innerHTML =
            `<div class="col-12 text-muted small">${b2bTrans.no_data}</div>`;
    }
})();
</script>
{% endblock %}