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

{% block title %}{{ translations.nav_dashboard|default('Sprzedaz') }} · TFBuddy{% endblock %}
{% block topbar_title %}{{ translations.nav_dashboard|default('Sprzedaz') }}{% endblock %}
{% block topbar_subtitle %}{{ shop.name ?? '' }}{% endblock %}

{% block topbar_actions %}
    <button class="pwa-topbar-icon-btn" id="btn-date-prev"
            title="{{ translations.previous_day|default('Poprzedni dzien') }}">
        <i class="bi bi-chevron-left"></i>
    </button>
    <input type="date" class="pwa-date-input" id="date-picker" value="{{ date }}">
    <button class="pwa-topbar-icon-btn" id="btn-today"
            title="{{ translations.today|default('Dzis') }}"
            style="font-size:.72rem;font-weight:700;color:#435ebe;padding:5px 8px;">
        {{ translations.today|default('Dzis') }}
    </button>
{% endblock %}

{% block head %}
<style>
    .pwa-topbar-icon-btn {
        background: none; border: none; padding: 6px 8px;
        color: #435ebe; font-size: 1rem; cursor: pointer;
        border-radius: 8px; line-height: 1;
        -webkit-tap-highlight-color: transparent;
    }
    .pwa-topbar-icon-btn:active { background: #f0f4ff; }
    .pwa-date-input {
        border: none; background: #f0f4ff; border-radius: 20px;
        padding: 5px 10px; font-size: .78rem; font-weight: 700; color: #435ebe;
        cursor: pointer; max-width: 120px;
    }
    .pwa-date-input:focus { outline: none; box-shadow: 0 0 0 2px #c7d2fe; }

    .cost-row {
        display: flex; align-items: center; justify-content: space-between;
        padding: .5rem 0; border-bottom: 1px solid #f3f4f6; font-size: .875rem;
    }
    .cost-row:last-child { border-bottom: none; }
    .cost-label { color: #6c757d; }
    .cost-value { font-weight: 700; color: #111827; }
    .cost-share { font-size: .72rem; color: #9ca3af; margin-left: .35rem; }
    .badge-historical {
        background: #fef9c3; color: #854d0e;
        border-radius: 999px; font-size: .65rem; font-weight: 700;
        padding: .2rem .55rem; vertical-align: middle;
    }

    /* skeleton overrides for dashboard */
    #dash-skeleton .skeleton-hero { height: 100px; border-radius: 16px; margin-bottom: 12px; }
    #dash-skeleton .sk-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
    #dash-skeleton .sk-pill { height: 64px; border-radius: 12px; }
    #dash-skeleton .sk-card { height: 110px; border-radius: 12px; margin-bottom: 12px; }
</style>
{% endblock %}

{% block content %}

<div id="dash-skeleton">
    <div class="skeleton-hero"></div>
    <div class="sk-pills">
        <div class="sk-pill skeleton-card"></div>
        <div class="sk-pill skeleton-card"></div>
        <div class="sk-pill skeleton-card"></div>
        <div class="sk-pill skeleton-card"></div>
    </div>
    <div class="sk-card skeleton-card"></div>
</div>

<div id="dash-alerts-wrap"></div>
<div id="dash-content" style="display:none;"></div>

{% endblock %}

{% block scripts %}
<script>
(function () {
    const ROOT     = '{{ root }}';
    const CURRENCY = '{{ currency_symbol }}';
    const T        = {{ translations | json_encode | raw }};

    // ── Date helpers (local timezone safe) ────────────────────────────────
    function fmtDate(d) {
        const y = d.getFullYear();
        const m = String(d.getMonth() + 1).padStart(2, '0');
        const day = String(d.getDate()).padStart(2, '0');
        return y + '-' + m + '-' + day;
    }

    function shiftDate(dateStr, delta) {
        const d = new Date(dateStr + 'T00:00:00');
        d.setDate(d.getDate() + delta);
        return fmtDate(d);
    }

    function todayStr() {
        return fmtDate(new Date());
    }

    // ── State ──────────────────────────────────────────────────────────────
    let currentDate = '{{ date }}';

    const picker  = document.getElementById('date-picker');
    const prevBtn = document.getElementById('btn-date-prev');
    const todayBtn = document.getElementById('btn-today');

    // ── Load data via AJAX ─────────────────────────────────────────────────
    async function loadDay(dateStr) {
        currentDate  = dateStr;
        picker.value = dateStr;

        document.getElementById('dash-skeleton').style.display = '';
        document.getElementById('dash-content').style.display  = 'none';

        let payload = null;
        try {
            const res = await fetch(ROOT + '/ajax/pwa/dashboard/summary?date=' + dateStr, { credentials: 'include' });
            payload = await res.json();
        } catch (e) {
            console.error(e);
        }

        document.getElementById('dash-skeleton').style.display = 'none';
        document.getElementById('dash-content').style.display  = '';

        render(payload, dateStr);
        loadTransactions(dateStr);
    }

    // ── Render HTML ────────────────────────────────────────────────────────
    function render(payload, dateStr) {
        const summary = payload?.data;
        const isToday = dateStr === todayStr();
        const content = document.getElementById('dash-content');

        if (!summary) {
            content.innerHTML = `
            ${!isToday ? `<div class="mb-2"><span class="badge-historical"><i class="bi bi-clock-history me-1"></i>${T.historical ?? 'Dane historyczne'}</span></div>` : ''}
            <div class="pwa-hero" style="background:linear-gradient(135deg,#6c757d,#495057);">
                <div class="hero-label">${T.nav_dashboard ?? 'Sprzedaz'}</div>
                <div class="hero-value">&mdash;</div>
                <div class="hero-sub">${dateStr}</div>
            </div>
            <div class="pwa-empty-state">
                <i class="bi bi-bar-chart text-secondary"></i>
                <p>${T.no_data_for_day ?? 'Brak danych sprzedazy dla wybranego dnia.'}</p>
            </div>`;
            return;
        }

        const n = (v, dec = 2) => parseFloat(v || 0).toLocaleString(undefined, {
            minimumFractionDigits: dec, maximumFractionDigits: dec
        });

        content.innerHTML = `
        ${!isToday ? `<div class="mb-2"><span class="badge-historical"><i class="bi bi-clock-history me-1"></i>${T.historical ?? 'Dane historyczne'}</span></div>` : ''}

        <div class="pwa-hero">
            <div class="hero-label">${T.income ?? 'Przychod'}</div>
            <div class="hero-value">${n(summary.income)} ${CURRENCY}</div>
            <div class="hero-sub">${summary.transactions} ${T.transactions ?? 'transakcji'} &middot; ${dateStr}</div>
        </div>

        <div class="row g-2 mb-3">
            <div class="col-6">
                <div class="stat-pill">
                    <div class="stat-value">${n(summary.profit)}</div>
                    <div class="stat-label">${T.profit ?? 'Zysk'} ${CURRENCY}</div>
                </div>
            </div>
            <div class="col-6">
                <div class="stat-pill">
                    <div class="stat-value">${n(summary.profit_margin, 1)}%</div>
                    <div class="stat-label">${T.margin ?? 'Marza'}</div>
                </div>
            </div>
            <div class="col-6">
                <div class="stat-pill">
                    <div class="stat-value">${n(summary.total_cost)}</div>
                    <div class="stat-label">${T.total_cost ?? 'Koszty'} ${CURRENCY}</div>
                </div>
            </div>
            <div class="col-6">
                <div class="stat-pill">
                    <div class="stat-value">${n(summary.tax)}</div>
                    <div class="stat-label">${T.tax ?? 'Podatek'} ${CURRENCY}</div>
                </div>
            </div>
        </div>

        <p class="pwa-section-title">${T.cost_breakdown ?? 'Struktura kosztow'}</p>
        <div class="pwa-card">
            <div class="cost-row">
                <span class="cost-label"><i class="bi bi-people me-1 text-primary"></i>${T.employee_cost ?? 'Pracownicy'}</span>
                <span class="cost-value">${n(summary.employee_cost)} ${CURRENCY} <span class="cost-share">(${n(summary.employee_cost_share, 1)}%)</span></span>
            </div>
            <div class="cost-row">
                <span class="cost-label"><i class="bi bi-box me-1 text-warning"></i>${T.material_cost ?? 'Materialy'}</span>
                <span class="cost-value">${n(summary.material_cost)} ${CURRENCY} <span class="cost-share">(${n(summary.material_cost_share, 1)}%)</span></span>
            </div>
            <div class="cost-row">
                <span class="cost-label"><i class="bi bi-building me-1 text-secondary"></i>${T.shop_cost ?? 'Sklep'}</span>
                <span class="cost-value">${n(summary.shop_cost)} ${CURRENCY} <span class="cost-share">(${n(summary.shop_cost_share, 1)}%)</span></span>
            </div>
        </div>

        <a href="${ROOT}/Statistic/sales?date=${dateStr}" class="btn btn-outline-primary w-100 mb-3">
            <i class="bi bi-graph-up-arrow me-1"></i>${T.full_statistics ?? 'Pelne statystyki'}
        </a>

        <p class="pwa-section-title">${T.recent_transactions ?? 'Ostatnie transakcje'}</p>
        <div id="dash-tx-wrap">
            <div class="pwa-card" style="display:flex;align-items:center;gap:.5rem;color:#9ca3af;font-size:.8rem;padding:.75rem 1rem;">
                <i class="bi bi-arrow-repeat spin" style="animation:spin 1s linear infinite;font-size:1rem;"></i>
                ${T.loading ?? 'Wczytywanie...'}
            </div>
        </div>`;
    }

    // ── Controls ───────────────────────────────────────────────────────────
        // ── Alerts + Transactions ─────────────────────────────────────────────────
    async function loadAlerts() {
        let count = 0;
        try {
            const res = await fetch(ROOT + '/ajax/pwa/dashboard/alerts', { credentials: 'include' });
            const j   = await res.json();
            count = j.count || 0;
            if (count > 0) {
                const wrap = document.getElementById('dash-alerts-wrap');
                const html = j.data.slice(0, 5).map(function (a) {
                    return '<div class="cost-row">' +
                        '<span class="cost-label"><i class="bi bi-exclamation-circle-fill me-1 text-warning"></i>' + a.material_name + '</span>' +
                        '<span class="cost-value" style="color:#ca8a04;">' + parseFloat(a.current).toFixed(1) + ' / ' + parseFloat(a.minimum).toFixed(1) + ' ' + (a.unit || '') + '</span>' +
                        '</div>';
                }).join('');
                if (wrap) {
                    wrap.innerHTML = '<p class="pwa-section-title"><i class="bi bi-exclamation-triangle-fill text-warning me-1"></i>' +
                        (T.inventory_alerts ?? 'Braki magazynowe') + ' <span style="background:#fef9c3;color:#92400e;border-radius:999px;padding:.1rem .45rem;font-size:.65rem;font-weight:800;">' + count + '</span></p>' +
                        '<div class="pwa-card">' + html + (count > 5 ? '<div class="cost-row" style="color:#9ca3af;font-size:.75rem;">' + (T.and_more ?? 'i') + ' ' + (count - 5) + ' ' + (T.more ?? 'więcej') + '...</div>' : '') + '</div>';
                }
            }
        } catch (e) {}
    }

    async function loadTransactions(dateStr) {
        const wrap = document.getElementById('dash-tx-wrap');
        if (!wrap) return;
        try {
            const res = await fetch(ROOT + '/ajax/transactions?date=' + dateStr, { credentials: 'include' });
            const items = await res.json();
            const list = Array.isArray(items) ? items : (items.data || []);
            if (!list.length) {
                wrap.innerHTML = '<div class="pwa-card" style="color:#9ca3af;font-size:.8rem;padding:.75rem 1rem;">' + (T.no_transactions ?? 'Brak transakcji') + '</div>';
                return;
            }
            const PAYMENT_ICONS = { 1: 'bi-cash', 2: 'bi-credit-card-2-front' };
            const slice = list.slice(0, 8);
            wrap.innerHTML = '<div class="pwa-card" style="padding:.25rem 1rem;">' +
                slice.map(function (t) {
                    const icon = PAYMENT_ICONS[t.id_payment_type] || 'bi-receipt';
                    const time = t.insert_time || (t.insert_timestamp || '').slice(11, 16);
                    const amt  = parseFloat(t.total_gross_amount_after_discount || 0).toFixed(2);
                    return '<div class="cost-row">' +
                        '<span class="cost-label"><i class="bi ' + icon + ' me-1"></i>' + (time || '') + '</span>' +
                        '<span class="cost-value">' + amt + ' ' + CURRENCY + '</span>' +
                        '</div>';
                }).join('') +
                (list.length > 8 ? '<div class="cost-row" style="color:#9ca3af;font-size:.75rem;">' + (T.and_more ?? 'i') + ' ' + (list.length - 8) + ' ' + (T.more_transactions ?? 'więcej transakcji') + '</div>' : '') +
                '</div>';
        } catch (e) {
            wrap.innerHTML = '<div class="pwa-card" style="color:#9ca3af;font-size:.8rem;padding:.75rem 1rem;">' + (T.error_loading ?? 'Błąd wczytywania') + '</div>';
        }
    }

    // ── Controls ──────────────────────────────────────────────────────────────
    prevBtn.addEventListener('click', () => loadDay(shiftDate(currentDate, -1)));

    todayBtn.addEventListener('click', () => {
        const t = todayStr();
        if (currentDate !== t) loadDay(t);
    });

    picker.addEventListener('change', function () {
        loadDay(this.value);
    });

    // ── Init ───────────────────────────────────────────────────────────────
    loadDay(currentDate);
    loadAlerts();
})();
</script>
{% endblock %}