// Location: /pwa/assets/pwa_app.js
(function () {
    function initNavActiveState() {
        const nav = document.querySelector('.pwa-bottom-nav');
        if (!nav) return;
        const currentPage = document.body.getAttribute('data-page');
        const items = nav.querySelectorAll('.pwa-nav-item');
        items.forEach(item => {
            const page = item.getAttribute('data-page');
            if (page === currentPage) {
                item.classList.add('active');
            } else {
                item.classList.remove('active');
            }
        });
    }

    function renderDashboard() {
        const role = document.body.getAttribute('data-role');
        const data = (window.PWA_DUMMY && window.PWA_DUMMY[role]) ? window.PWA_DUMMY[role] : null;
        if (!data) return;

        const kpiEl = document.querySelector('#pwa-kpi-container');
        if (kpiEl && data.kpi) {
            kpiEl.innerHTML = `
                <div class="pwa-kpi-grid">
                    <div class="pwa-kpi-tile">
                        <div class="pwa-kpi-label">Total Customers</div>
                        <div class="pwa-kpi-value">${data.kpi.total_customers}</div>
                    </div>
                    <div class="pwa-kpi-tile">
                        <div class="pwa-kpi-label">New this month</div>
                        <div class="pwa-kpi-value">${data.kpi.new_this_month}</div>
                    </div>
                    <div class="pwa-kpi-tile">
                        <div class="pwa-kpi-label">Follow-ups today</div>
                        <div class="pwa-kpi-value">${data.kpi.followups_today}</div>
                    </div>
                    <div class="pwa-kpi-tile">
                        <div class="pwa-kpi-label">Tasks today</div>
                        <div class="pwa-kpi-value">${data.kpi.tasks_today}</div>
                    </div>
                </div>
            `;
        }

        const followList = document.querySelector('#pwa-dashboard-followups');
        if (followList && data.followups) {
            followList.innerHTML = data.followups.map(f => {
                let statusClass = 'pwa-status-pending';
                if (f.status === 'Done') statusClass = 'pwa-status-done';
                return `
                    <div class="pwa-list-row">
                        <div>
                            <strong>${f.customer}</strong><br>
                            <span class="pwa-card-meta">Last: ${f.last}</span>
                        </div>
                        <div>
                            <span class="pwa-card-meta">Next:</span><br>
                            <span>${f.next}</span>
                        </div>
                        <div style="text-align:right;">
                            <span class="pwa-status-chip ${statusClass}">${f.status}</span>
                        </div>
                    </div>
                `;
            }).join('');
        }
    }

    function renderCustomers() {
        const role = document.body.getAttribute('data-role');
        const data = (window.PWA_DUMMY && window.PWA_DUMMY[role]) ? window.PWA_DUMMY[role] : null;
        if (!data) return;

        const listEl = document.querySelector('#pwa-customers-list');
        if (!listEl) return;

        listEl.innerHTML = data.customers.map(c => {
            const isDomestic = (c.type === 'Domestic' || c.type === 'Home' || c.type === 'Clinic');
            const badgeClass = isDomestic ? 'pwa-badge-domestic' : 'pwa-badge-commercial';
            return `
                <div class="pwa-card">
                    <div class="pwa-card-header">
                        <div>
                            <strong>${c.name}</strong><br>
                            <span class="pwa-card-meta">${c.city}</span>
                        </div>
                        <div>
                            <span class="pwa-badge ${badgeClass}">${c.type}</span>
                        </div>
                    </div>
                    <div class="pwa-card-meta">
                        Est. Capacity: ${c.kw} kW
                    </div>
                </div>
            `;
        }).join('');
    }

    function renderFollowupsPage() {
        const role = document.body.getAttribute('data-role');
        const data = (window.PWA_DUMMY && window.PWA_DUMMY[role]) ? window.PWA_DUMMY[role] : null;
        if (!data) return;
        const container = document.querySelector('#pwa-followups-list');
        if (!container) return;

        container.innerHTML = data.followups.map(f => {
            let statusClass = 'pwa-status-pending';
            if (f.status === 'Done') statusClass = 'pwa-status-done';
            return `
                <div class="pwa-list-row">
                    <div>
                        <strong>${f.customer}</strong><br>
                        <span class="pwa-card-meta">Last: ${f.last}</span>
                    </div>
                    <div>
                        <span class="pwa-card-meta">Next:</span><br>
                        <strong>${f.next}</strong>
                    </div>
                    <div style="text-align:right;">
                        <span class="pwa-status-chip ${statusClass}">${f.status}</span>
                    </div>
                </div>
            `;
        }).join('');
    }

    function renderTasksPage() {
        const role = document.body.getAttribute('data-role');
        const data = (window.PWA_DUMMY && window.PWA_DUMMY[role]) ? window.PWA_DUMMY[role] : null;
        if (!data) return;
        const container = document.querySelector('#pwa-tasks-list');
        if (!container) return;

        container.innerHTML = data.tasks.map(t => {
            return `
                <div class="pwa-card">
                    <div class="pwa-card-header">
                        <span>${t.title}</span>
                        <span class="pwa-card-meta">${t.priority} • ${t.status}</span>
                    </div>
                    <div class="pwa-card-meta">
                        Due: ${t.due}
                    </div>
                </div>
            `;
        }).join('');
    }

    document.addEventListener('DOMContentLoaded', function () {
        initNavActiveState();
        const page = document.body.getAttribute('data-page');
        if (page === 'dashboard') {
            renderDashboard();
        } else if (page === 'customers') {
            renderCustomers();
        } else if (page === 'followups') {
            renderFollowupsPage();
        } else if (page === 'tasks') {
            renderTasksPage();
        }
    });
})();


navigator.serviceWorker.addEventListener("message", (evt)=>{
    if (evt.data.action === "sync_queue") {
        OfflineQueue.trySync();
    }
});
