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

{% set active_nav = 'dashboard' %}

{% set net = summary.network ?? {} %}
{% set shops = summary.shops ?? [] %}
{% set today_date = 'now' | date('Y-m-d') %}
{% set today_label = date ?? today_date %}
{% set currency = currency_symbol ?? '€' %}

{% block title %}{{ translations.dashboard ?? 'Dashboard' }}{% endblock %}
{% block page_title %}{{ translations.dashboard ?? 'Dashboard' }}{% endblock %}
{% block page_subtitle %}
    {{- today_label | date('l, d M Y') -}}
    {%- if today_label != 'now' | date('Y-m-d') %}
        &nbsp;<span style="font-size:.68rem;background:#fff3cd;color:#856404;border-radius:8px;padding:1px 6px;font-weight:700;vertical-align:middle;">
            {{ translations.historical ?? 'historical' }}
        </span>
    {%- endif %}
{% endblock %}

{% block topbar_actions %}
<div class="d-flex align-items-center gap-1">

    {# ← poprzedni dzień #}
    {% set prev_date = date | date_modify('-1 day') | date('Y-m-d') %}
    <a href="{{ ROOT }}/dashboard?date={{ prev_date }}"
       class="btn btn-sm btn-light rounded-circle p-0 d-flex align-items-center justify-content-center"
       style="width:32px;height:32px;" title="{{ translations.previous_day ?? 'Previous day' }}">
        <i class="bi bi-chevron-left" style="font-size:.8rem;"></i>
    </a>

    {# kliknięcie na datę otwiera natywny date picker (ukryty input) #}
    <button type="button"
            class="btn btn-sm btn-light rounded-pill px-2"
            style="font-size:.75rem;font-weight:700;min-width:80px;"
            onclick="document.getElementById('dashDatePicker').showPicker()">
        <i class="bi bi-calendar3 me-1"></i>{{ date | date('d.m.Y') }}
    </button>
    <input type="date" id="dashDatePicker"
           value="{{ date }}"
           max="{{ 'now' | date('Y-m-d') }}"
           style="position:absolute;opacity:0;pointer-events:none;width:0;height:0;"
           onchange="window.location.href='{{ ROOT }}/dashboard?date=' + this.value">

    {# → następny dzień (blokada: nie więcej niż dziś) #}
    {% set next_date = date | date_modify('+1 day') | date('Y-m-d') %}
    {% if next_date <= today_date %}
        <a href="{{ ROOT }}/dashboard?date={{ next_date }}"
           class="btn btn-sm btn-light rounded-circle p-0 d-flex align-items-center justify-content-center"
           style="width:32px;height:32px;" title="{{ translations.next_day ?? 'Next day' }}">
            <i class="bi bi-chevron-right" style="font-size:.8rem;"></i>
        </a>
    {% else %}
        <span class="btn btn-sm btn-light rounded-circle p-0 d-flex align-items-center justify-content-center disabled"
              style="width:32px;height:32px;opacity:.3;">
            <i class="bi bi-chevron-right" style="font-size:.8rem;"></i>
        </span>
    {% endif %}

    {# "dziś" — pojawia się tylko gdy przeglądamy inny dzień #}
    {% if date != today_date %}
        <a href="{{ ROOT }}/dashboard"
           class="btn btn-sm btn-primary rounded-pill px-2"
           style="font-size:.72rem;font-weight:700;">
            {{ translations.today ?? 'Today' }}
        </a>
    {% endif %}

</div>
{% endblock %}

{% block head %}
<style>
    /* ── HERO CARD ── */
    .hero-card {
        background: linear-gradient(135deg, #3a56d4 0%, #6b7ff5 100%);
        border-radius: 20px;
        color: #fff;
        padding: 20px;
        position: relative;
        overflow: hidden;
    }
    .hero-card::before {
        content: '';
        position: absolute;
        top: -40px; right: -40px;
        width: 180px; height: 180px;
        background: rgba(255,255,255,.08);
        border-radius: 50%;
    }
    .hero-revenue {
        font-size: 2.4rem;
        font-weight: 900;
        letter-spacing: -.03em;
        line-height: 1.1;
    }
    .hero-label { font-size: .78rem; opacity: .75; text-transform: uppercase; letter-spacing: .06em; }
    .yoy-badge {
        display: inline-flex; align-items: center; gap: 4px;
        padding: 3px 9px; border-radius: 20px;
        font-size: .78rem; font-weight: 700;
    }
    .yoy-up   { background: rgba(52,199,89,.2); color: #34c759; }
    .yoy-down { background: rgba(255,69,58,.2);  color: #ff453a; }
    .yoy-flat { background: rgba(255,255,255,.15); color: rgba(255,255,255,.7); }

    /* ── STAT PILLS (sieć) ── */
    .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .stat-pill {
        background: #fff;
        border-radius: 16px;
        padding: 14px 16px;
        box-shadow: 0 2px 8px rgba(0,0,0,.06);
    }
    .stat-pill-icon {
        width: 36px; height: 36px;
        border-radius: 10px;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.1rem;
        margin-bottom: 8px;
    }
    .stat-pill-value { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
    .stat-pill-label { font-size: .72rem; color: #6c757d; }

    /* ── SHOP CARDS ── */
    .shop-card {
        background: #fff;
        border-radius: 16px;
        padding: 16px;
        box-shadow: 0 2px 8px rgba(0,0,0,.06);
        margin-bottom: 10px;
    }
    .shop-rank {
        width: 28px; height: 28px;
        border-radius: 8px;
        background: #f2f7ff;
        display: flex; align-items: center; justify-content: center;
        font-size: .78rem; font-weight: 800;
        color: #435ebe;
        flex-shrink: 0;
    }
    .shop-rank.gold   { background: #fff3cd; color: #856404; }
    .shop-rank.silver { background: #f0f0f0; color: #6c757d; }
    .shop-rank.bronze { background: #fde6d8; color: #a0522d; }

    .shop-metric { text-align: right; }
    .shop-metric-value { font-size: 1rem; font-weight: 800; }
    .shop-metric-label { font-size: .68rem; color: #6c757d; }
    .shop-divider { height: 1px; background: #f2f2f2; margin: 10px 0; }
    .shop-stats-row { display: flex; gap: 12px; }
    .shop-mini-stat { flex: 1; }
    .shop-mini-val  { font-size: .88rem; font-weight: 700; color: #212529; }
    .shop-mini-lbl  { font-size: .65rem; color: #6c757d; }

    /* ── PROGRESS BAR ── */
    .progress-thin { height: 5px; border-radius: 3px; background: #eef0f5; overflow: hidden; margin-top: 6px; }
    .progress-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #435ebe, #6b7ff5); transition: width .6s ease; }

    /* ── SECTION TITLE ── */
    .section-title {
        font-size: .72rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: .08em;
        color: #6c757d;
        padding: 8px 4px 6px;
    }

    /* ── EMPTY STATE ── */
    .empty-state { text-align: center; padding: 40px 20px; color: #adb5bd; }
    .empty-state i { font-size: 2.5rem; margin-bottom: 8px; display: block; }
</style>
{% endblock %}

{% block content %}

{# ── SKELETON ── #}
<div id="dash-skeleton">
    <div class="skeleton-hero" style="min-height:130px;"></div>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;">
        <div class="skeleton-card" style="padding:14px;min-height:90px;">
            <div class="skeleton-line" style="width:50%;height:12px;"></div>
            <div class="skeleton-line" style="width:70%;height:24px;margin-top:8px;"></div>
        </div>
        <div class="skeleton-card" style="padding:14px;min-height:90px;">
            <div class="skeleton-line" style="width:50%;height:12px;"></div>
            <div class="skeleton-line" style="width:70%;height:24px;margin-top:8px;"></div>
        </div>
        <div class="skeleton-card" style="padding:14px;min-height:90px;">
            <div class="skeleton-line" style="width:50%;height:12px;"></div>
            <div class="skeleton-line" style="width:70%;height:24px;margin-top:8px;"></div>
        </div>
        <div class="skeleton-card" style="padding:14px;min-height:90px;">
            <div class="skeleton-line" style="width:50%;height:12px;"></div>
            <div class="skeleton-line" style="width:70%;height:24px;margin-top:8px;"></div>
        </div>
    </div>
    <div class="skeleton-card" style="min-height:80px;margin-bottom:8px;"></div>
    <div class="skeleton-card" style="min-height:80px;margin-bottom:8px;"></div>
    <div class="skeleton-card" style="min-height:80px;"></div>
</div>

{# ── DYNAMICZNA TREŚĆ ── #}
<div id="dash-content" style="display:none;" class="page-content-loaded"></div>

{# ── QUICK LINKI (zawsze widoczne, nie wymagają danych) ── #}
<div id="dash-quicklinks" style="display:none;">
    <a href="{{ ROOT }}/tasks?date={{ date }}" style="text-decoration:none;">
        <div style="background:linear-gradient(135deg,#1b4332,#2d6a4f);border-radius:16px;padding:14px 18px;margin-top:4px;display:flex;align-items:center;justify-content:space-between;color:#fff;">
            <div>
                <div style="font-size:.68rem;opacity:.65;text-transform:uppercase;letter-spacing:.06em;"><i class="bi bi-check2-square me-1"></i>{{ translations.daily_tasks ?? 'Daily tasks' }}</div>
                <div style="font-size:1rem;font-weight:800;margin-top:2px;">{{ translations.view_tasks_ranking ?? 'View completion ranking' }}</div>
            </div>
            <i class="bi bi-chevron-right" style="font-size:1.2rem;opacity:.6;"></i>
        </div>
    </a>
    <a href="{{ ROOT }}/trend" style="text-decoration:none;margin-top:8px;display:block;">
        <div style="background:linear-gradient(135deg,#0f2027,#203a43,#2c5364);border-radius:16px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;color:#fff;">
            <div>
                <div style="font-size:.68rem;opacity:.65;text-transform:uppercase;letter-spacing:.06em;"><i class="bi bi-graph-up-arrow me-1"></i>{{ translations.sales_trend ?? 'Sales trend' }}</div>
                <div style="font-size:1rem;font-weight:800;margin-top:2px;">{{ translations.view_monthly_trend ?? 'View 12-month trend & YoY' }}</div>
            </div>
            <i class="bi bi-chevron-right" style="font-size:1.2rem;opacity:.6;"></i>
        </div>
    </a>
    <a href="{{ ROOT }}/schedule" style="text-decoration:none;margin-top:8px;display:block;">
        <div style="background:linear-gradient(135deg,#6a11cb,#2575fc);border-radius:16px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;color:#fff;">
            <div>
                <div style="font-size:.68rem;opacity:.65;text-transform:uppercase;letter-spacing:.06em;"><i class="bi bi-calendar-week me-1"></i>{{ translations.schedule ?? 'Schedule' }}</div>
                <div style="font-size:1rem;font-weight:800;margin-top:2px;">{{ translations.view_weekly_schedule ?? 'View weekly staff schedule' }}</div>
            </div>
            <i class="bi bi-chevron-right" style="font-size:1.2rem;opacity:.6;"></i>
        </div>
    </a>
</div>

{# ── LOGOUT ── #}
<div class="text-center mt-3 mb-1">
    <a href="{{ ROOT }}/logout"
       class="btn btn-light rounded-pill px-4"
       style="font-size:.8rem;color:#adb5bd;border:1.5px solid #e9ecef;">
        <i class="bi bi-box-arrow-right me-1"></i>{{ translations.log_out ?? 'Log out' }}
    </a>
</div>

{% endblock %}

{% block scripts %}
<script>
(function () {
    const ROOT     = window.__ownerRoot || '';
    const currency = {{ currency_symbol | default('€') | json_encode | raw }};
    const date     = {{ date | json_encode | raw }};
    const langCode = {{ (lang_code ?? 'en') | json_encode | raw }};
    const TRANS    = {{ translations | json_encode | raw }};

    function fmt(n, dec = 0) {
        return parseFloat(n || 0).toLocaleString(langCode, { minimumFractionDigits: dec, maximumFractionDigits: dec });
    }

    function yoyHtml(pct, style = '') {
        if (pct === null || pct === undefined) return '';
        const cls  = pct > 0 ? 'yoy-up' : (pct < 0 ? 'yoy-down' : 'yoy-flat');
        const icon = pct > 0 ? 'bi-arrow-up-short' : (pct < 0 ? 'bi-arrow-down-short' : 'bi-dash');
        return `<span class="yoy-badge ${cls} ${style}"><i class="bi ${icon}"></i>${pct > 0 ? '+' : ''}${pct}% YoY</span>`;
    }

    function renderDashboard(data) {
        const net   = data.network || {};
        const shops = data.shops   || [];

        // ── HERO ──
        let html = `
        <div class="hero-card mb-3">
            <div class="hero-label mb-1"><i class="bi bi-lightning-charge-fill me-1"></i>${TRANS.network_revenue_today ?? 'Network revenue today'}</div>
            <div class="hero-revenue">${fmt(net.total_revenue, 2)} <span style="font-size:1rem;opacity:.7;font-weight:600">${currency}</span></div>
            <div class="mt-2 d-flex align-items-center gap-2 flex-wrap">
                ${yoyHtml(net.revenue_yoy_pct)}
                <span style="font-size:.78rem;opacity:.65">${TRANS.vs_last_year ?? 'vs last year'} (${fmt(net.ly_total_revenue, 2)} ${currency})</span>
            </div>
            <div class="mt-3 d-flex justify-content-between" style="opacity:.85;font-size:.8rem;">
                <span><i class="bi bi-receipt me-1"></i>${net.transactions_count || 0} ${TRANS.transactions ?? 'transactions'}</span>
                <span><i class="bi bi-shop me-1"></i>${net.shops_count || 0} ${TRANS.shops ?? 'shops'}</span>
                <span><i class="bi bi-people-fill me-1"></i>${net.employees_on_shift || 0} ${TRANS.on_shift ?? 'on shift'}</span>
            </div>
        </div>

        <div class="stat-grid mb-3">
            <div class="stat-pill">
                <div class="stat-pill-icon" style="background:#eef2ff;color:#435ebe"><i class="bi bi-receipt-cutoff"></i></div>
                <div class="stat-pill-value">${net.transactions_count || 0}</div>
                <div class="stat-pill-label">${TRANS.transactions ?? 'Transactions'}</div>
                ${net.transactions_yoy_pct !== null && net.transactions_yoy_pct !== undefined ? `<div class="mt-1" style="font-size:.72rem;font-weight:700;color:${net.transactions_yoy_pct >= 0 ? '#34c759' : '#ff453a'}">${net.transactions_yoy_pct >= 0 ? '↑' : '↓'} ${Math.abs(net.transactions_yoy_pct)}% YoY</div>` : ''}
            </div>
            <div class="stat-pill">
                <div class="stat-pill-icon" style="background:#fff3e0;color:#e67e22"><i class="bi bi-tag"></i></div>
                <div class="stat-pill-value">${fmt(net.avg_ticket_value, 2)}</div>
                <div class="stat-pill-label">${TRANS.avg_ticket ?? 'Avg ticket'} ${currency}</div>
            </div>
            <div class="stat-pill">
                <div class="stat-pill-icon" style="background:#f0fff4;color:#27ae60"><i class="bi bi-person-check"></i></div>
                <div class="stat-pill-value">${net.employees_on_shift || 0}</div>
                <div class="stat-pill-label">${TRANS.on_shift ?? 'On shift'}</div>
                ${net.total_employees > 0 ? `<div class="progress-thin mt-1"><div class="progress-fill" style="width:${Math.round((net.employees_on_shift/net.total_employees)*100)}%"></div></div><div style="font-size:.65rem;color:#6c757d;margin-top:3px">${Math.round((net.employees_on_shift/net.total_employees)*100)}% ${TRANS.of_team ?? 'of team'}</div>` : ''}
            </div>
            <div class="stat-pill">
                <div class="stat-pill-icon" style="background:#fdf0f8;color:#9b59b6"><i class="bi bi-basket3"></i></div>
                <div class="stat-pill-value">${net.total_items_sold || 0}</div>
                <div class="stat-pill-label">${TRANS.items_sold ?? 'Items sold'}</div>
            </div>
        </div>`;

        // ── RANKING SKLEPÓW ──
        if (shops.length > 0) {
            const medals = ['🥇','🥈','🥉'];
            const maxRev = Math.max(...shops.map(s => parseFloat(s.total_revenue) || 0), 1);

            html += `<div class="section-title"><i class="bi bi-trophy me-1"></i>${TRANS.shops_ranking_today ?? 'Shops ranking — today'}</div>`;

            shops.forEach((s, i) => {
                const rank     = i + 1;
                const rankCls  = rank === 1 ? 'gold' : (rank === 2 ? 'silver' : (rank === 3 ? 'bronze' : ''));
                const rankIcon = medals[i] || rank;
                const barPct   = ((parseFloat(s.total_revenue)||0) / maxRev * 100).toFixed(0);
                const syp      = s.revenue_yoy_pct;
                const yoyLine  = syp !== null && syp !== undefined
                    ? `<div class="mt-2"><span style="font-size:.72rem;font-weight:700;color:${syp >= 0 ? '#34c759' : '#ff453a'}">${syp >= 0 ? '↑' : '↓'} ${Math.abs(syp)}% YoY</span> <span style="font-size:.68rem;color:#adb5bd;">(${fmt(s.ly_total_revenue, 2)} ${currency} ${TRANS.last_year ?? 'last year'})</span></div>`
                    : '';

                html += `
                <a href="${ROOT}/shops/${s.shop_id}?date=${date}" style="text-decoration:none;color:inherit;">
                <div class="shop-card" style="cursor:pointer;">
                    <div class="d-flex align-items-start gap-3">
                        <div class="shop-rank ${rankCls}">${rankIcon}</div>
                        <div class="flex-grow-1 min-width-0">
                            <div class="fw-bold text-truncate" style="font-size:.92rem;">${s.shop_name}</div>
                            <div style="font-size:.72rem;color:#6c757d;"><i class="bi bi-geo-alt me-1"></i>${s.shop_city}</div>
                        </div>
                        <div class="shop-metric">
                            <div class="shop-metric-value">${fmt(s.total_revenue, 2)} ${currency}</div>
                            <div class="shop-metric-label">${TRANS.revenue ?? 'Revenue'}</div>
                        </div>
                    </div>
                    <div class="progress-thin mt-2"><div class="progress-fill" style="width:${barPct}%"></div></div>
                    <div class="shop-divider"></div>
                    <div class="shop-stats-row">
                        <div class="shop-mini-stat">
                            <div class="shop-mini-val"><i class="bi bi-receipt text-primary me-1"></i>${s.transactions_count}</div>
                            <div class="shop-mini-lbl">${TRANS.transactions ?? 'transactions'}</div>
                        </div>
                        <div class="shop-mini-stat">
                            <div class="shop-mini-val"><i class="bi bi-tag text-warning me-1"></i>${fmt(s.avg_ticket_value, 2)} ${currency}</div>
                            <div class="shop-mini-lbl">${TRANS.avg_ticket ?? 'avg ticket'}</div>
                        </div>
                        <div class="shop-mini-stat">
                            <div class="shop-mini-val"><i class="bi bi-people text-success me-1"></i>${s.employees_on_shift}</div>
                            <div class="shop-mini-lbl">${TRANS.on_shift ?? 'on shift'}</div>
                        </div>
                    </div>
                    ${yoyLine}
                </div>
                </a>`;
            });
        } else {
            html += `<div class="empty-state"><i class="bi bi-graph-up-arrow"></i><div style="font-size:.9rem;">${TRANS.no_data_today ?? 'No data yet for today.'}</div></div>`;
        }

        document.getElementById('dash-content').innerHTML = html;
        document.getElementById('dash-quicklinks').style.display = '';
    }

    OwnerAjax.load({
        endpoint: '/owner/network/dashboard/today',
        params:   { date },
        skeleton: '#dash-skeleton',
        target:   '#dash-content',
        onSuccess: renderDashboard,
        onError: () => {
            document.getElementById('dash-quicklinks').style.display = '';
        },
    });
})();
</script>
{% endblock %}