{% extends "layouts/base.twig" %}
{% block title %}{{ translations.network_insight ?? 'Insight — Benchmark sieci' }}{% endblock %}
{% block head %}
<style>
    :root {
        --ins-green:  #1C3B2E;
        --ins-ok:     #16a34a; --ins-ok-bg: #f0fdf4; --ins-ok-bd: #bbf7d0;
        --ins-dg:     #dc2626; --ins-dg-bg: #fef2f2; --ins-dg-bd: #fecaca;
        --ins-na:     #6b7280; --ins-na-bg: #f9fafb; --ins-na-bd: #e5e7eb;
        --ins-t1:     #0E0E0E; --ins-t2: #5A5A5A; --ins-t3: #9A9A9A;
        --ins-bd:     rgba(0,0,0,0.07);
        --ins-sf:     #ffffff; --ins-sf2: #F0EDE9; --ins-sf3: #E5E1DC;
        --ins-curr:   #1C3B2E;
    }
    /* Karta metryki */
    .ins-card {
        border-radius: 14px; border: 0.5px solid var(--ins-bd);
        background: var(--ins-sf); padding: 20px 22px; height: 100%;
    }
    .ins-metric-title {
        font-size: 0.72rem; font-weight: 700; letter-spacing: .07em;
        text-transform: uppercase; color: var(--ins-t2); margin-bottom: 10px;
    }
    /* KPI row */
    .ins-kpi-row { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
    .ins-kpi {
        flex: 1; min-width: 90px;
        background: var(--ins-sf2); border-radius: 8px; padding: 8px 12px;
        border: 0.5px solid var(--ins-bd);
    }
    .ins-kpi-label { font-size: 0.65rem; color: var(--ins-t3); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
    .ins-kpi-val   { font-size: 1.1rem; font-weight: 700; color: var(--ins-t1); line-height: 1.2; margin-top: 2px; }
    .ins-kpi-yours { background: var(--ins-green); border-color: var(--ins-green); }
    .ins-kpi-yours .ins-kpi-label,
    .ins-kpi-yours .ins-kpi-val   { color: #fff; }
    /* Delta badge */
    .ins-delta-pos { color: var(--ins-ok); font-size: 0.78rem; font-weight: 700; }
    .ins-delta-neg { color: var(--ins-dg); font-size: 0.78rem; font-weight: 700; }
    .ins-delta-neu { color: var(--ins-na); font-size: 0.78rem; font-weight: 700; }
    /* Rank badge */
    .ins-rank-badge {
        display: inline-flex; align-items: center; gap: 5px;
        padding: 3px 10px; border-radius: 5px; font-size: 0.75rem; font-weight: 700;
        background: var(--ins-green); color: #fff;
    }
    /* Ranking bar chart */
    .ins-bar-wrap { margin-top: 12px; }
    .ins-bar-row {
        display: flex; align-items: center; gap: 8px;
        margin-bottom: 5px; font-size: 0.72rem;
    }
    .ins-bar-label { width: 88px; flex-shrink: 0; color: var(--ins-t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ins-bar-label.is-current { font-weight: 700; color: var(--ins-curr); }
    .ins-bar-track { flex: 1; height: 8px; background: var(--ins-sf3); border-radius: 4px; position: relative; }
    .ins-bar-fill  { background: #c8c1bb; }
    .ins-bar-fill.is-current { background: var(--ins-green); }
    .ins-bar-val   { width: 72px; flex-shrink: 0; text-align: right; color: var(--ins-t2); font-variant-numeric: tabular-nums; }
    .ins-bar-val.is-current { font-weight: 700; color: var(--ins-curr); }
    /* Section header */
    .ins-section-header { padding: 8px 0 6px; border-bottom: 1.5px solid var(--ins-sf3); margin-bottom: 16px; }
    .ins-section-title  { font-size: 0.78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ins-t1); }
    .ins-section-desc   { font-size: 0.72rem; color: var(--ins-t3); margin-top: 2px; }
    /* Skeleton */
    .ins-skeleton {
        background: linear-gradient(90deg,var(--ins-sf2) 25%,var(--ins-sf3) 50%,var(--ins-sf2) 75%);
        background-size: 200% 100%; animation: ins-shimmer 1.4s infinite; border-radius: 6px;
    }
    @keyframes ins-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
    /* Filter */
    .ins-filter-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    /* Insufficient overlay */
    .ins-insufficient {
        background: var(--ins-sf2); border: 0.5px solid var(--ins-bd);
        border-radius: 14px; padding: 40px 20px; text-align: center;
    }
    /* Bar fill colors — non-current visible, current highlighted */
    .ins-bar-fill  { background: #c8c1bb; }
    .ins-bar-fill.is-current { background: var(--ins-green); }
</style>
{% endblock %}
{% block page_heading %}
<div class="page-heading">
    <h3>{{ translations.network_insight ?? 'Insight — Benchmark sieci' }}</h3>
    <p class="text-subtitle text-muted">{{ translations.insight_subtitle ?? 'Anonimowe porównanie Twojego sklepu z pozostałymi sklepami sieci. Tożsamość sklepów jest w pełni zanonimizowana.' }}</p>
</div>
{% endblock %}
{% block content %}

{# ── Pasek filtrów ──────────────────────────────────────────────────── #}
<div class="card mb-3">
    <div class="card-body py-3">
        <div class="ins-filter-bar">
            <label class="small fw-semibold mb-0">{{ translations.month_label ?? 'Miesiąc' }}:</label>
            <select class="form-select form-select-sm" id="ins-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="ins-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="ins-apply">{{ translations.apply ?? 'Zastosuj' }}</button>
            <div class="ms-auto">
                <div class="spinner-border spinner-border-sm text-secondary d-none" id="ins-spinner"></div>
            </div>
        </div>
    </div>
</div>

{# ── Treść ───────────────────────────────────────────────────────────── #}
<div id="ins-content">
    {# #ins-grid jest zawsze obecny w DOM — stan zarządza JavaScript #}
    <div id="ins-grid" class="row g-3">
        {% if shop_id <= 0 %}
        <div class="col-12">
            <div class="ins-insufficient">
                <div class="text-muted">{{ translations.no_shop_assigned ?? 'Brak przypisanego sklepu.' }}</div>
            </div>
        </div>
        {% else %}
        {# Skeleton — zastępowany przez JS natychmiast po załadowaniu danych #}
        {% for i in 1..4 %}
        <div class="col-12 col-lg-6">
            <div class="ins-card">
                <div class="ins-skeleton" style="height:12px;width:50%;margin-bottom:14px"></div>
                <div class="ins-skeleton" style="height:24px;width:35%;margin-bottom:10px"></div>
                <div class="ins-skeleton" style="height:80px;margin-bottom:10px"></div>
                <div class="ins-skeleton" style="height:10px;width:70%"></div>
            </div>
        </div>
        {% endfor %}
        {% endif %}
    </div>
</div>

{% endblock %}
{% block scripts %}
<script>
/* ── Konfiguracja ──────────────────────────────────────────────── */
const INS = {
    root:     '{{ root }}',
    currency: '{{ currency_symbol }}',
    year:     {{ current_year }},
    month:    {{ current_month }},
    shopId:   {{ shop_id }},
};

/* ── Tłumaczenia ───────────────────────────────────────────────── */
const insTrans = {
    your_shop:          '{{ translations.insight_your_shop ?? "Twój sklep" }}',
    network_avg:        '{{ translations.insight_network_avg ?? "Średnia sieci" }}',
    network_leader:     '{{ translations.insight_network_leader ?? "Lider sieci" }}',
    rank_label:         '{{ translations.insight_rank_label ?? "Pozycja" }}',
    vs_avg:             '{{ translations.insight_vs_avg ?? "vs średnia sieci" }}',
    insufficient_title: '{{ translations.insight_insufficient_title ?? "Niewystarczające dane do porównania" }}',
    insufficient_desc:  '{{ translations.insight_insufficient_desc ?? "Dane benchmarkowe są dostępne, gdy w wybranym miesiącu aktywność wykazały co najmniej 3 sklepy sieci." }}',
    data_for:           '{{ translations.insight_data_for ?? "Dane za:" }}',
    shops_count:        '{{ translations.insight_shops_count ?? "Liczba sklepów w porównaniu:" }}',
};

/* ── Formatowanie ──────────────────────────────────────────────── */
function insFmt(value, unit) {
    if (value === null || value === undefined) return '—';
    const v = Number(value);
    if (unit === 'currency') return v.toLocaleString('pl-PL', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + '\u00a0' + INS.currency;
    if (unit === 'pct')      return v.toLocaleString('pl-PL', { minimumFractionDigits: 1, maximumFractionDigits: 1 }) + '%';
    if (unit === 'count')    return v.toLocaleString('pl-PL', { minimumFractionDigits: 0, maximumFractionDigits: 2 });
    return String(v);
}

/* ── Karta metryki ──────────────────────────────────────────────── */
function buildInsCard(key, metric) {
    const yourVal  = metric.your_value;
    const avg      = metric.network_avg;
    const leader   = metric.leader_value;
    const rank     = metric.your_rank;
    const total    = metric.total_count;
    const delta    = metric.delta;
    const deltaPct = metric.delta_pct;
    const unit     = metric.unit;
    const ranking  = metric.ranking ?? [];

    // Delta html
    let deltaHtml = '';
    if (delta !== null && delta !== undefined) {
        const sign   = delta > 0 ? '+' : '';
        const cls    = delta > 0 ? 'ins-delta-pos' : (delta < 0 ? 'ins-delta-neg' : 'ins-delta-neu');
        const pctStr = deltaPct !== null ? ` (${delta > 0 ? '+' : ''}${deltaPct}%)` : '';
        deltaHtml = `<span class="${cls}">${sign}${insFmt(delta, unit)}${pctStr} ${insTrans.vs_avg}</span>`;
    }

    // Ranking bar chart
    const maxVal = ranking.length > 0 ? Math.max(...ranking.map(r => Number(r.value ?? 0))) : 0;
    const bars = ranking.map(r => {
        const isCurr = r.is_current;
        const barPct = maxVal > 0 ? (Number(r.value) / maxVal * 100).toFixed(1) : 0;
        const barCls = isCurr ? ' is-current' : '';
        const valCls = isCurr ? ' is-current' : '';
        const lblCls = isCurr ? ' is-current' : '';
        return `<div class="ins-bar-row">
            <div class="ins-bar-label${lblCls}">${r.label ?? '—'}</div>
            <div class="ins-bar-track">
                <div class="ins-bar-fill${barCls}" style="height:100%;border-radius:4px;width:${barPct}%"></div>
            </div>
            <div class="ins-bar-val${valCls}">${insFmt(r.value, unit)}</div>
        </div>`;
    }).join('');

    const rankDisplay = (rank && total) ? `${rank}/${total}` : '—';

    return `<div class="col-12 col-lg-6">
        <div class="ins-card">
            <div class="ins-metric-title">${metric.label}</div>
            <div class="ins-kpi-row">
                <div class="ins-kpi ins-kpi-yours">
                    <div class="ins-kpi-label">${insTrans.your_shop}</div>
                    <div class="ins-kpi-val">${insFmt(yourVal, unit)}</div>
                </div>
                <div class="ins-kpi">
                    <div class="ins-kpi-label">${insTrans.network_avg}</div>
                    <div class="ins-kpi-val">${insFmt(avg, unit)}</div>
                </div>
                <div class="ins-kpi">
                    <div class="ins-kpi-label">${insTrans.network_leader}</div>
                    <div class="ins-kpi-val">${insFmt(leader, unit)}</div>
                </div>
                <div class="ins-kpi" style="text-align:center;min-width:60px">
                    <div class="ins-kpi-label">${insTrans.rank_label}</div>
                    <div class="ins-kpi-val">${rankDisplay}</div>
                </div>
            </div>
            <div style="margin-bottom:10px">${deltaHtml}</div>
            <div class="ins-bar-wrap">${bars}</div>
        </div>
    </div>`;
}

/* ── Renderowanie ───────────────────────────────────────────────── */
function renderInsight(data) {
    const grid = document.getElementById('ins-grid');
    if (!grid) return;

    if (!data || !data.metrics) {
        grid.innerHTML = `<div class="col-12">
            <div class="ins-insufficient">
                <div class="fw-semibold mb-1">${insTrans.insufficient_title}</div>
                <div class="text-muted small">${insTrans.insufficient_desc}</div>
            </div>
        </div>`;
        return;
    }

    const cards = Object.entries(data.metrics)
        .map(([key, metric]) => buildInsCard(key, metric))
        .join('');

    const period  = data.period ?? '';
    const shopCnt = data.shop_count ?? 0;
    const subtitle = `<div class="col-12"><div class="ins-section-desc" style="margin-bottom:8px">${insTrans.data_for} <strong>${period}</strong> · ${insTrans.shops_count} <strong>${shopCnt}</strong></div></div>`;

    grid.innerHTML = subtitle + cards;
}

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

/* ── Inicjalizacja ──────────────────────────────────────────────── */
// Strona renderuje się natychmiast (skeleton), dane ładowane są asynchronicznie.
(async function () {
    if (INS.shopId <= 0) {
        // Brak przypisanego sklepu — komunikat już renderowany server-side.
        return;
    }
    const data = await loadInsight(INS.year, INS.month);
    renderInsight(data);
})();

document.getElementById('ins-apply').addEventListener('click', async () => {
    const year  = parseInt(document.getElementById('ins-year').value);
    const month = parseInt(document.getElementById('ins-month').value);

    const grid = document.getElementById('ins-grid');
    if (grid) {
        grid.innerHTML = Array(4).fill(
            `<div class="col-12 col-lg-6"><div class="ins-card"><div class="ins-skeleton" style="height:160px"></div></div></div>`
        ).join('');
    }

    const data = await loadInsight(year, month);
    renderInsight(data);
});
</script>
{% endblock %}