{% extends "layouts/mobile_base.twig" %}

{% set active_nav = 'trend' %}
{% set currency   = currency_symbol ?? '€' %}

{% block title %}{{ translations.sales_trend ?? 'Sales Trend' }}{% endblock %}
{% block page_title %}{{ translations.sales_trend ?? 'Sales Trend' }}{% endblock %}
{% block page_subtitle %}{{ translations.last_12_months ?? 'Last 12 months · network' }}{% endblock %}

{% block head %}
<style>
    /* ── HERO ── */
    .trend-hero {
        background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
        border-radius: 20px; color: #fff;
        padding: 18px 20px; margin-bottom: 12px;
        overflow: hidden; position: relative;
    }
    .trend-hero::before {
        content:''; position:absolute;
        top:-50px; right:-50px; width:180px; height:180px;
        background:rgba(255,255,255,.05); border-radius:50%;
    }
    .hero-big-num {
        font-size: 2rem; font-weight: 900;
        letter-spacing: -.03em; line-height:1;
    }
    .hero-lbl { font-size:.68rem; opacity:.6; text-transform:uppercase; letter-spacing:.07em; }
    .hero-yoy {
        display:inline-flex; align-items:center; gap:4px;
        padding:3px 10px; border-radius:20px;
        font-size:.75rem; font-weight:700; margin-top:8px;
    }
    .yoy-pos { background:rgba(52,199,89,.25);  color:#6effa0; }
    .yoy-neg { background:rgba(255,69,58,.25);  color:#ffb3ae; }
    .yoy-neu { background:rgba(255,255,255,.15); color:#fff; }
    .hero-grid {
        display:grid; grid-template-columns:1fr 1fr;
        gap:10px; margin-top:12px;
    }
    .hero-cell {
        background:rgba(255,255,255,.08);
        border-radius:12px; padding:10px 12px;
    }
    .hero-cell-val { font-size:1rem; font-weight:800; }
    .hero-cell-lbl { font-size:.62rem; opacity:.6; margin-top:1px; }
    /* ── CHART CARD ── */
    .chart-card {
        background:#fff; border-radius:16px;
        padding:16px; margin-bottom:12px;
        box-shadow:0 2px 8px rgba(0,0,0,.06);
    }
    .chart-title {
        font-size:.72rem; font-weight:700;
        text-transform:uppercase; letter-spacing:.07em;
        color:#6c757d; margin-bottom:10px;
        display:flex; justify-content:space-between; align-items:center;
    }
    .chart-legend { display:flex; gap:12px; flex-wrap:wrap; font-size:.68rem; color:#6c757d; }
    .leg-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:4px; vertical-align:middle; }
    /* ── SECTION TITLE ── */
    .section-title {
        font-size:.72rem; font-weight:700;
        text-transform:uppercase; letter-spacing:.08em;
        color:#6c757d; padding:10px 4px 6px;
    }
    /* ── MONTH TABLE ── */
    .month-table { background:#fff; border-radius:16px; overflow:hidden; margin-bottom:12px; box-shadow:0 2px 8px rgba(0,0,0,.06); }
    .mt-row {
        display:grid; grid-template-columns:60px 1fr auto auto;
        align-items:center; gap:8px;
        padding:9px 14px; border-bottom:1px solid #f2f4f8;
        font-size:.83rem;
    }
    .mt-row:last-child { border-bottom:none; }
    .mt-month { font-weight:700; font-size:.78rem; }
    .mt-bar-wrap { height:6px; background:#eef0f5; border-radius:3px; overflow:hidden; }
    .mt-bar { height:100%; border-radius:3px; }
    .mt-rev { font-weight:800; font-size:.82rem; text-align:right; }
    .mt-yoy { font-size:.68rem; font-weight:700; text-align:right; min-width:44px; }
    .yoy-green { color:#27ae60; } .yoy-red { color:#e74c3c; } .yoy-grey { color:#adb5bd; }
    .mt-row.best-month  { background:#f0fff4; }
    .mt-row.worst-month { background:#fff5f5; }
    .mt-row.current-month { background:#f0f4ff; }
    /* ── TOP EVER ── */
    .top-card {
        background:#fff; border-radius:14px; padding:12px 16px; margin-bottom:8px;
        box-shadow:0 1px 5px rgba(0,0,0,.05); display:flex; align-items:center; gap:12px;
    }
    .top-medal { font-size:1.4rem; width:36px; text-align:center; flex-shrink:0; }
    .top-period { font-weight:700; font-size:.9rem; }
    .top-rev { font-weight:900; font-size:.95rem; color:#435ebe; }
</style>
{% endblock %}

{% block content %}

{# ── SKELETON (widoczny do załadowania danych) ── #}
<div id="trend-skeleton">
    <div class="skeleton-hero"></div>
    <div class="skeleton-card">
        <div class="skeleton-line" style="width:40%;height:14px;"></div>
        <div class="skeleton-line" style="height:180px;border-radius:12px;"></div>
    </div>
    <div class="skeleton-card">
        <div class="skeleton-line" style="width:40%;height:14px;"></div>
        <div class="skeleton-line" style="height:130px;border-radius:12px;"></div>
    </div>
    <div class="skeleton-card">
        {% for i in 1..6 %}
            <div class="skeleton-line" style="width:{{ loop.index % 3 == 0 ? '65%' : '100%' }};"></div>
        {% endfor %}
    </div>
</div>

{# ── TREŚĆ (ukryta do załadowania) ── #}
<div id="trend-content" style="display:none;" class="page-content-loaded">
</div>

{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
(function () {
    const currency = {{ currency | json_encode | raw }};
    const langCode = {{ (lang_code ?? 'en') | json_encode | raw }};
    const TRANS    = {{ translations | json_encode | raw }};

    // Pomocnicza funkcja formatowania liczby
    function fmt(n, decimals = 0) {
        return parseFloat(n || 0).toLocaleString(langCode, {
            minimumFractionDigits: decimals,
            maximumFractionDigits: decimals,
        });
    }

    function shortMonth(period) {
        const [y, m] = period.split('-');
        return new Date(y, m - 1).toLocaleDateString(langCode, { month: 'short', year: '2-digit' });
    }

    function renderTrend(data) {
        const summary    = data.summary    || {};
        const series     = data.series     || [];
        const topEver    = data.top_months_ever || [];
        const currentMonth = new Date().toISOString().slice(0, 7);

        // ── HERO ──
        const yoy = summary.yoy_pct;
        let yoyBadge = '';
        if (yoy !== null && yoy !== undefined) {
            const cls  = yoy > 0 ? 'yoy-pos' : (yoy < 0 ? 'yoy-neg' : 'yoy-neu');
            const icon = yoy > 0 ? '↑' : (yoy < 0 ? '↓' : '—');
            yoyBadge = `<div class="hero-yoy ${cls}">${icon} ${yoy > 0 ? '+' : ''}${yoy}% ${TRANS.vs_last_year ?? 'vs last year'}</div>`;
        }

        let html = `
        <div class="trend-hero">
            <div class="hero-lbl">${TRANS.total_revenue_12_months ?? 'Total revenue \u00b7 12 months'}</div>
            <div class="hero-big-num">${fmt(summary.total_revenue_cy, 2)} <span style="font-size:.9rem;opacity:.6;font-weight:600">${currency}</span></div>
            ${yoyBadge}
            <div class="hero-grid">
                <div class="hero-cell">
                    <div class="hero-cell-val">${fmt(summary.total_revenue_ly, 2)} ${currency}</div>
                    <div class="hero-cell-lbl">${TRANS.last_year_same_period ?? 'Last year (same period)'}</div>
                </div>
                <div class="hero-cell">
                    <div class="hero-cell-val">${summary.best_month || '—'}</div>
                    <div class="hero-cell-lbl">${TRANS.best_month ?? 'Best month'}</div>
                </div>
            </div>
        </div>

        <!-- CHART LINE -->
        <div class="chart-card">
            <div class="chart-title">
                <span><i class="bi bi-graph-up-arrow me-1"></i>${TRANS.revenue_trend ?? 'Revenue trend'}</span>
                <div class="chart-legend">
                    <span><span class="leg-dot" style="background:#435ebe;"></span>${TRANS.this_year ?? 'This year'}</span>
                    <span><span class="leg-dot" style="border:2px dashed #adb5bd;border-radius:50%;display:inline-block;width:10px;height:10px;margin-right:4px;"></span>${TRANS.last_year ?? 'Last year'}</span>
                </div>
            </div>
            <canvas id="trendChart" height="200"></canvas>
        </div>

        <!-- CHART BAR -->
        <div class="chart-card">
            <div class="chart-title"><span><i class="bi bi-receipt me-1"></i>${TRANS.transactions_per_month ?? 'Transactions per month'}</span></div>
            <canvas id="trxChart" height="160"></canvas>
        </div>

        <!-- TABLE -->
        <div class="section-title"><i class="bi bi-table me-1"></i>${TRANS.monthly_breakdown ?? 'Monthly breakdown'}</div>
        <div class="month-table">`;

        const maxRev = summary.max_revenue || 1;
        const medals = ['🥇','🥈','🥉'];

        // tabela od najnowszego
        [...series].reverse().forEach(s => {
            let rowClass = '';
            if (s.month === summary.best_month)  rowClass = 'best-month';
            else if (s.month === summary.worst_month) rowClass = 'worst-month';
            else if (s.month === currentMonth)   rowClass = 'current-month';

            const barPct   = maxRev > 0 ? ((s.revenue_cy / maxRev) * 100).toFixed(1) : 0;
            const barColor = s.month === summary.best_month ? '#27ae60' : (s.month === summary.worst_month ? '#e74c3c' : '#435ebe');
            const yoyVal   = s.yoy_pct;
            let yoyHtml = '—';
            if (yoyVal !== null && yoyVal !== undefined) {
                const cls = yoyVal > 0 ? 'yoy-green' : (yoyVal < 0 ? 'yoy-red' : 'yoy-grey');
                const arrow = yoyVal > 0 ? '▲' : (yoyVal < 0 ? '▼' : '—');
                yoyHtml = `<span class="${cls}">${arrow}${Math.abs(yoyVal)}%</span>`;
            }
            const nowTag = s.month === currentMonth ? `<br><span style="font-size:.6rem;color:#435ebe;font-weight:700;">${TRANS.now ?? 'NOW'}</span>` : '';

            html += `
            <div class="mt-row ${rowClass}">
                <div class="mt-month">${shortMonth(s.month)}${nowTag}</div>
                <div>
                    <div class="mt-bar-wrap"><div class="mt-bar" style="width:${barPct}%;background:${barColor};"></div></div>
                    <div style="font-size:.63rem;color:#adb5bd;margin-top:2px;">${fmt(s.transactions_count)} ${TRANS.trx ?? 'trx'} · ${fmt(s.avg_ticket, 2)} ${currency}/${TRANS.trx ?? 'trx'}</div>
                </div>
                <div class="mt-rev">${fmt(s.revenue_cy, 0)}<span style="font-size:.65rem;opacity:.6;"> ${currency}</span></div>
                <div class="mt-yoy">${yoyHtml}</div>
            </div>`;
        });

        html += `</div>`;

        // TOP EVER
        if (topEver.length > 0) {
            html += `<div class="section-title"><i class="bi bi-trophy me-1"></i>${TRANS.all_time_top_months ?? 'All-time top months'}</div>`;
            topEver.forEach((t, i) => {
                const d = new Date(t.period + '-01');
                const label = d.toLocaleDateString(langCode, { month: 'long', year: 'numeric' });
                html += `
                <div class="top-card">
                    <div class="top-medal">${medals[i] || (i+1)}</div>
                    <div class="flex-grow-1">
                        <div class="top-period">${label}</div>
                        <div style="font-size:.7rem;color:#6c757d;">${TRANS.record_revenue ?? 'Record revenue'}</div>
                    </div>
                    <div class="top-rev">${fmt(t.revenue, 0)} ${currency}</div>
                </div>`;
            });
        }

        document.getElementById('trend-content').innerHTML = html;

        // ── WYKRESY ──
        const labels  = series.map(s => shortMonth(s.month));
        const revCY   = series.map(s => parseFloat(s.revenue_cy)   || 0);
        const revLY   = series.map(s => parseFloat(s.revenue_ly)   || 0);
        const trxData = series.map(s => parseInt(s.transactions_count) || 0);

        new Chart(document.getElementById('trendChart'), {
            type: 'line',
            data: {
                labels,
                datasets: [
                    {
                        label: TRANS.this_year ?? 'This year',
                        data: revCY,
                        borderColor: '#435ebe',
                        backgroundColor: 'rgba(67,94,190,.08)',
                        borderWidth: 2.5,
                        pointBackgroundColor: '#435ebe',
                        pointRadius: 3,
                        tension: 0.35,
                        fill: true,
                    },
                    {
                        label: TRANS.last_year ?? 'Last year',
                        data: revLY,
                        borderColor: '#adb5bd',
                        borderWidth: 1.5,
                        borderDash: [5, 4],
                        pointBackgroundColor: '#adb5bd',
                        pointRadius: 2,
                        tension: 0.35,
                        fill: false,
                    },
                ],
            },
            options: {
                responsive: true,
                interaction: { mode: 'index', intersect: false },
                plugins: {
                    legend: { display: false },
                    tooltip: { callbacks: { label: ctx => ` ${ctx.dataset.label}: ${fmt(ctx.parsed.y, 2)} ${currency}` } },
                },
                scales: {
                    x: { grid: { display: false }, ticks: { font: { size: 10 } } },
                    y: { grid: { color: 'rgba(0,0,0,.04)' }, ticks: { font: { size: 10 }, callback: v => (v >= 1000 ? (v/1000).toFixed(0)+'k' : v) + ' ' + currency } },
                },
            },
        });

        new Chart(document.getElementById('trxChart'), {
            type: 'bar',
            data: {
                labels,
                datasets: [{
                    label: TRANS.transactions_per_month ?? 'Transactions',
                    data: trxData,
                    backgroundColor: revCY.map((v) => {
                        const max = Math.max(...revCY);
                        const alpha = max > 0 ? 0.4 + (v / max) * 0.55 : 0.4;
                        return `rgba(67,94,190,${alpha.toFixed(2)})`;
                    }),
                    borderRadius: 5,
                    borderSkipped: false,
                }],
            },
            options: {
                responsive: true,
                plugins: { legend: { display: false }, tooltip: { callbacks: { label: ctx => ` ${fmt(ctx.parsed.y)} trx` } } },
                scales: {
                    x: { grid: { display: false }, ticks: { font: { size: 10 } } },
                    y: { grid: { color: 'rgba(0,0,0,.04)' }, ticks: { font: { size: 10 } } },
                },
            },
        });
    }

    // ── ŁADOWANIE ──
    OwnerAjax.load({
        endpoint: '/owner/network/sales/trend',
        skeleton: '#trend-skeleton',
        target:   '#trend-content',
        onSuccess: renderTrend,
    });
})();
</script>
{% endblock %}