// Location: /pwa/assets/pwa_customer_view.js
window.PWA_CUSTOMER_VIEW = (function () {
    function getQueryParam(name) {
        const params = new URLSearchParams(window.location.search);
        return params.get(name);
    }

    function findCustomer(data, id) {
        id = parseInt(id, 10);
        if (!data || !data.customers) return null;
        return data.customers.find(c => parseInt(c.id, 10) === id) || null;
    }

    function findFollowupsForCustomer(data, customerId) {
        if (!data || !data.followups) return [];
        return data.followups.filter(f => parseInt(f.customer_id, 10) === parseInt(customerId, 10));
    }

    function statusTagClass(status) {
        switch ((status || '').toLowerCase()) {
            case 'new': return 'pwa-tag pwa-tag-status-new';
            case 'active': return 'pwa-tag pwa-tag-status-active';
            case 'closed': return 'pwa-tag pwa-tag-status-closed';
            case 'lost': return 'pwa-tag pwa-tag-status-lost';
            default: return 'pwa-tag';
        }
    }

    function initCustomerView(data) {
        const id = getQueryParam('id');
        const container = document.getElementById('pwa-customer-view');
        if (!container) return;

        const customer = findCustomer(data, id);
        if (!customer) {
            container.innerHTML = '<div class="pwa-card"><div class="pwa-card-meta">Customer not found (dummy data).</div></div>';
            return;
        }

        const followups = findFollowupsForCustomer(data, customer.id);

        const statusClass = statusTagClass(customer.customer_status);
        const typeText = customer.customer_type || '';
        const solarType = customer.solar_type || '';
        const companyLine = customer.company_name ? `<div class="pwa-field-row"><span class="pwa-field-label">Company</span><span class="pwa-field-value">${customer.company_name}</span></div>` : '';

        const addressParts = [customer.city, customer.district, customer.state, customer.pincode].filter(Boolean).join(', ');

        const followupHtml = followups.length
            ? followups.map(f => {
                let statusClassInner = 'pwa-status-pending';
                if (f.status === 'Done') statusClassInner = 'pwa-status-done';
                if (f.status === 'Overdue') statusClassInner = 'pwa-status-overdue';
                return `
                    <div class="pwa-list-row">
                        <div>
                            <strong>${f.channel || ''}</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 ${statusClassInner}">${f.status}</span>
                        </div>
                    </div>
                `;
            }).join('')
            : '<div class="pwa-card-meta">No follow-up history (dummy).</div>';

        const role = document.body.getAttribute('data-role');
        const addFollowHref = '/pwa/' + role + '/add_followup.php?customer_id=' + encodeURIComponent(customer.id);

        container.innerHTML = `
            <div class="pwa-card">
                <div class="pwa-card-header">
                    <div>
                        <div class="pwa-section-title">${customer.name}</div>
                        <div class="pwa-card-meta">${addressParts}</div>
                    </div>
                    <div class="pwa-tag-row" style="justify-content:flex-end;">
                        <span class="${statusClass}">${customer.customer_status || 'Status N/A'}</span>
                        <span class="pwa-tag">${typeText || 'Type N/A'}</span>
                        <span class="pwa-tag">${solarType || 'Solar N/A'}</span>
                    </div>
                </div>
                <div class="pwa-section-body">
                    ${companyLine}
                    <div class="pwa-field-row">
                        <span class="pwa-field-label">Customer Code</span>
                        <span class="pwa-field-value">${customer.customer_code || '-'}</span>
                    </div>
                    <div class="pwa-field-row">
                        <span class="pwa-field-label">Capacity</span>
                        <span class="pwa-field-value">${customer.kw || 0} kW</span>
                    </div>
                </div>
            </div>

            <div class="pwa-card">
                <div class="pwa-section-title">Contact</div>
                <div class="pwa-section-body">
                    <div class="pwa-field-row">
                        <span class="pwa-field-label">Mobile</span>
                        <span class="pwa-field-value">${customer.mobile || '-'}</span>
                    </div>
                    <div class="pwa-field-row">
                        <span class="pwa-field-label">Alt. Mobile</span>
                        <span class="pwa-field-value">${customer.alt_mobile || '-'}</span>
                    </div>
                    <div class="pwa-field-row">
                        <span class="pwa-field-label">Email</span>
                        <span class="pwa-field-value">${customer.email || '-'}</span>
                    </div>
                </div>
            </div>

            <div class="pwa-card">
                <div class="pwa-section-title">Address</div>
                <div class="pwa-section-body">
                    <div class="pwa-field-row">
                        <span class="pwa-field-label">State</span>
                        <span class="pwa-field-value">${customer.state || '-'}</span>
                    </div>
                    <div class="pwa-field-row">
                        <span class="pwa-field-label">District</span>
                        <span class="pwa-field-value">${customer.district || '-'}</span>
                    </div>
                    <div class="pwa-field-row">
                        <span class="pwa-field-label">City</span>
                        <span class="pwa-field-value">${customer.city || '-'}</span>
                    </div>
                    <div class="pwa-field-row">
                        <span class="pwa-field-label">Pincode</span>
                        <span class="pwa-field-value">${customer.pincode || '-'}</span>
                    </div>
                </div>
            </div>

            <div class="pwa-card">
                <div class="pwa-section-title">Remarks</div>
                <div class="pwa-section-body">
                    ${customer.remarks || 'No remarks (dummy).'}
                </div>
                <div class="pwa-card-meta" style="margin-top:8px;">
                    Created: ${customer.created_on || '-'} • Updated: ${customer.updated_on || '-'}
                </div>
            </div>

            <div class="pwa-card">
                <div class="pwa-card-header">
                    <span>Recent Follow-ups</span>
                    <span class="pwa-card-meta">Dummy history</span>
                </div>
                ${followupHtml}
                <div style="margin-top:10px;text-align:right;">
                    <a href="${addFollowHref}" style="text-decoration:none;">
                        <button type="button"
                            style="padding:8px 14px;border-radius:999px;border:none;background:#F39C12;color:#34495E;font-size:12px;font-weight:600;">
                            + Add Follow-up
                        </button>
                    </a>
                </div>
            </div>
        `;
    }

    return {
        initCustomerView
    };
})();
