// Modern helper functions for customer details modal

function formatCustomerPhonesModern(phones) {
    if (!phones || phones.length === 0) {
        return `
            <div class="flex items-center space-x-3 p-3 bg-neutral-50 dark:bg-neutral-700/50 rounded-lg">
                <div class="w-8 h-8 bg-neutral-100 dark:bg-neutral-600 rounded-lg flex items-center justify-center">
                    <i class="fa-solid fa-phone text-neutral-400 text-sm"></i>
                </div>
                <div>
                    <p class="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wide mb-1">Phone Numbers</p>
                    <span class="text-neutral-400 font-medium">Not provided</span>
                </div>
            </div>
        `;
    }
    
    return phones.map(phone => `
        <div class="flex items-start space-x-3 p-3 bg-neutral-50 dark:bg-neutral-700/50 rounded-lg">
            <div class="w-8 h-8 bg-green-100 dark:bg-green-900/50 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
                <i class="fa-solid fa-phone text-green-600 dark:text-green-400 text-sm"></i>
            </div>
            <div class="flex-1 min-w-0">
                <p class="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wide mb-1">${phone.location || 'Phone'}</p>
                <p class="font-mono text-neutral-900 dark:text-neutral-100 font-medium">${escapeHtml(phone.phone)}</p>
            </div>
        </div>
    `).join('');
}

function formatCustomerAddressModern(customer) {
    const addressParts = [];
    if (customer.a1) addressParts.push(escapeHtml(customer.a1));
    if (customer.a2) addressParts.push(escapeHtml(customer.a2));
    if (customer.a3) addressParts.push(escapeHtml(customer.a3));
    
    const cityState = formatCityState(customer);
    if (cityState !== '-') addressParts.push(escapeHtml(cityState));
    if (customer.zip) addressParts.push(escapeHtml(customer.zip));
    
    if (addressParts.length === 0) {
        return `
            <div class="flex items-center space-x-3 p-3 bg-neutral-50 dark:bg-neutral-700/50 rounded-lg">
                <div class="w-8 h-8 bg-neutral-100 dark:bg-neutral-600 rounded-lg flex items-center justify-center">
                    <i class="fa-solid fa-map-marker-alt text-neutral-400 text-sm"></i>
                </div>
                <div>
                    <p class="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wide mb-1">Address</p>
                    <span class="text-neutral-400 font-medium">Not provided</span>
                </div>
            </div>
        `;
    }
    
    return `
        <div class="space-y-2">
            ${addressParts.map(part => `
                <div class="flex items-start space-x-3 p-3 bg-neutral-50 dark:bg-neutral-700/50 rounded-lg">
                    <div class="w-8 h-8 bg-emerald-100 dark:bg-emerald-900/50 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
                        <i class="fa-solid fa-location-dot text-emerald-600 dark:text-emerald-400 text-sm"></i>
                    </div>
                    <div class="flex-1">
                        <p class="text-neutral-700 dark:text-neutral-300 font-medium leading-relaxed">${part}</p>
                    </div>
                </div>
            `).join('')}
        </div>
    `;
}

function formatCustomerPersonalInfo(customer) {
    const hasPersonalInfo = customer.dob || customer.legal_status || customer.ss_number || customer.prefix || customer.middle || customer.suffix;
    
    if (!hasPersonalInfo) {
        return `
            <div class="flex items-center space-x-3 p-3 bg-neutral-50 dark:bg-neutral-700/50 rounded-lg">
                <div class="w-8 h-8 bg-neutral-100 dark:bg-neutral-600 rounded-lg flex items-center justify-center">
                    <i class="fa-solid fa-user text-neutral-400 text-sm"></i>
                </div>
                <div>
                    <p class="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wide mb-1">Personal Information</p>
                    <span class="text-neutral-400 font-medium">Not provided</span>
                </div>
            </div>
        `;
    }
    
    const personalItems = [];
    
    if (customer.dob) {
        personalItems.push({
            icon: 'fa-calendar',
            label: 'Date of Birth',
            value: customer.dob,
            color: 'purple'
        });
    }
    
    if (customer.ss_number) {
        personalItems.push({
            icon: 'fa-id-card',
            label: 'SSN',
            value: customer.ss_number,
            color: 'purple',
            mono: true
        });
    }
    
    if (customer.legal_status) {
        personalItems.push({
            icon: 'fa-gavel',
            label: 'Legal Status',
            value: customer.legal_status,
            color: 'purple'
        });
    }
    
    if (customer.prefix) {
        personalItems.push({
            icon: 'fa-tag',
            label: 'Prefix',
            value: customer.prefix,
            color: 'purple'
        });
    }
    
    if (customer.middle) {
        personalItems.push({
            icon: 'fa-user',
            label: 'Middle Name',
            value: customer.middle,
            color: 'purple'
        });
    }
    
    if (customer.suffix) {
        personalItems.push({
            icon: 'fa-tag',
            label: 'Suffix',
            value: customer.suffix,
            color: 'purple'
        });
    }
    
    return `
        <div class="space-y-3">
            ${personalItems.map(item => `
                <div class="flex items-start space-x-3 p-3 bg-neutral-50 dark:bg-neutral-700/50 rounded-lg">
                    <div class="w-8 h-8 bg-purple-100 dark:bg-purple-900/50 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5">
                        <i class="fa-solid ${item.icon} text-purple-600 dark:text-purple-400 text-sm"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="text-xs font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wide mb-1">${item.label}</p>
                        <p class="${item.mono ? 'font-mono' : ''} text-neutral-900 dark:text-neutral-100 font-medium break-all">${escapeHtml(item.value)}</p>
                    </div>
                </div>
            `).join('')}
        </div>
    `;
}

// Updated showCustomerDetailsModal function - Legacy-style compact 2-column layout with larger text
function showCustomerDetailsModal(customer) {
    // Create modal content matching the legacy system layout exactly
    const modalContent = `
        <div class="fixed inset-0 bg-black/60 z-50 overflow-y-auto" id="customerDetailsModal">
            <div class="flex min-h-full items-center justify-center p-4">
                <div class="bg-white dark:bg-neutral-800 rounded-lg shadow-2xl w-full max-w-4xl border-4 border-neutral-600 dark:border-neutral-400 my-8">
                <!-- Header -->
                <div class="flex items-center justify-between px-6 py-4 border-b-2 border-neutral-300 dark:border-neutral-600 bg-gradient-to-r from-neutral-100 to-neutral-50 dark:from-neutral-700 dark:to-neutral-800">
                    <h2 class="text-lg font-bold text-neutral-900 dark:text-neutral-100">Customer Details</h2>
                    <button onclick="closeCustomerDetailsModal()" class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors p-1">
                        <i class="fa-solid fa-xmark text-lg"></i>
                    </button>
                </div>
                
                <!-- Content - Legacy Layout -->
                <div class="px-6 py-5 space-y-5">
                    <!-- Top Line: ID (Center Bold) -->
                    <div class="text-center">
                        <span class="text-xl font-bold text-neutral-900 dark:text-neutral-100 bg-neutral-200 dark:bg-neutral-700 px-6 py-2 rounded-lg border-2 border-neutral-400 dark:border-neutral-500 font-mono shadow-sm">${escapeHtml(customer.id || '')}</span>
                    </div>
                    
                    <!-- Second Line: Name Information (Left) | Phone with Location (Right) -->
                    <div class="grid grid-cols-2 gap-8 border-2 border-neutral-400 dark:border-neutral-500 rounded-lg p-5 bg-neutral-50 dark:bg-neutral-800/50">
                        <!-- Left: Name Information -->
                        <div class="space-y-3">
                            <div class="text-sm text-neutral-700 dark:text-neutral-300 font-bold mb-3 border-b border-neutral-300 dark:border-neutral-600 pb-2">Name Information</div>
                            ${customer.prefix ? `<div class="flex justify-between"><span class="text-sm text-neutral-600 dark:text-neutral-400">Prefix:</span><span class="text-sm text-neutral-900 dark:text-neutral-100">${escapeHtml(customer.prefix)}</span></div>` : ''}
                            ${customer.first ? `<div class="flex justify-between"><span class="text-sm text-neutral-600 dark:text-neutral-400">First:</span><span class="text-sm text-neutral-900 dark:text-neutral-100">${escapeHtml(customer.first)}</span></div>` : ''}
                            ${customer.middle ? `<div class="flex justify-between"><span class="text-sm text-neutral-600 dark:text-neutral-400">Middle:</span><span class="text-sm text-neutral-900 dark:text-neutral-100">${escapeHtml(customer.middle)}</span></div>` : ''}
                            ${customer.last ? `<div class="flex justify-between"><span class="text-sm text-neutral-600 dark:text-neutral-400">Last:</span><span class="text-sm text-neutral-900 dark:text-neutral-100 font-bold">${escapeHtml(customer.last)}</span></div>` : ''}
                            ${customer.suffix ? `<div class="flex justify-between"><span class="text-sm text-neutral-600 dark:text-neutral-400">Suffix:</span><span class="text-sm text-neutral-900 dark:text-neutral-100">${escapeHtml(customer.suffix)}</span></div>` : ''}
                        </div>
                        
                        <!-- Right: Phone with Location -->
                        <div class="space-y-3">
                            <div class="text-sm text-neutral-700 dark:text-neutral-300 font-bold mb-3 border-b border-neutral-300 dark:border-neutral-600 pb-2">Phone Numbers</div>
                            ${formatCustomerPhonesLegacyLarger(customer.phone_numbers || [])}
                        </div>
                    </div>
                    
                    <!-- Third Line: Group, Title, Address (Left) | Email, DOB, SS, Legal Status (Right) -->
                    <div class="grid grid-cols-2 gap-8 border-2 border-neutral-400 dark:border-neutral-500 rounded-lg p-5 bg-neutral-50 dark:bg-neutral-800/50">
                        <!-- Left: Group, Title, Address -->
                        <div class="space-y-3">
                            <div class="text-sm text-neutral-700 dark:text-neutral-300 font-bold mb-3 border-b border-neutral-300 dark:border-neutral-600 pb-2">General Information</div>
                            ${customer.group ? `<div class="flex justify-between"><span class="text-sm text-neutral-600 dark:text-neutral-400">Group:</span><span class="text-sm text-blue-700 dark:text-blue-300 font-bold">${escapeHtml(customer.group)}</span></div>` : ''}
                            ${customer.title ? `<div class="flex justify-between"><span class="text-sm text-neutral-600 dark:text-neutral-400">Title:</span><span class="text-sm text-neutral-900 dark:text-neutral-100">${escapeHtml(customer.title)}</span></div>` : ''}
                            <div class="pt-2">
                                <div class="text-sm text-neutral-700 dark:text-neutral-300 font-bold mb-2">Address</div>
                                ${formatCustomerAddressLegacyLarger(customer)}
                            </div>
                        </div>
                        
                        <!-- Right: Email, DOB, SS, Legal Status -->
                        <div class="space-y-3">
                            <div class="text-sm text-neutral-700 dark:text-neutral-300 font-bold mb-3 border-b border-neutral-300 dark:border-neutral-600 pb-2">Personal Details</div>
                            <div class="flex justify-between">
                                <span class="text-sm text-neutral-600 dark:text-neutral-400">Email:</span>
                                ${customer.email ? `<a href="mailto:${encodeURIComponent(customer.email)}" class="text-sm text-blue-600 dark:text-blue-400 hover:underline break-all max-w-xs">${escapeHtml(customer.email)}</a>` : '<span class="text-sm text-neutral-400">-</span>'}
                            </div>
                            ${customer.dob ? `<div class="flex justify-between"><span class="text-sm text-neutral-600 dark:text-neutral-400">DOB:</span><span class="text-sm text-neutral-900 dark:text-neutral-100">${escapeHtml(customer.dob)}</span></div>` : ''}
                            ${customer.ss_number ? `<div class="flex justify-between"><span class="text-sm text-neutral-600 dark:text-neutral-400">SSN:</span><span class="text-sm font-mono text-neutral-900 dark:text-neutral-100">${escapeHtml(customer.ss_number)}</span></div>` : ''}
                            ${customer.legal_status ? `<div class="flex justify-between"><span class="text-sm text-neutral-600 dark:text-neutral-400">Legal Status:</span><span class="text-sm text-neutral-900 dark:text-neutral-100">${escapeHtml(customer.legal_status)}</span></div>` : ''}
                        </div>
                    </div>
                    
                    <!-- Fourth Line: Full Single Column with Memo Information (ALWAYS SHOW) -->
                    <div class="border-2 border-neutral-400 dark:border-neutral-500 rounded-lg p-5 bg-neutral-50 dark:bg-neutral-800/50">
                        <div class="text-sm text-neutral-700 dark:text-neutral-300 font-bold mb-3 border-b border-neutral-300 dark:border-neutral-600 pb-1">Memo</div>
                        <div class="text-sm text-neutral-700 dark:text-neutral-300 leading-relaxed whitespace-pre-wrap bg-white dark:bg-neutral-800 p-3 rounded border border-neutral-300 dark:border-neutral-600 min-h-[60px] max-h-32 overflow-y-auto">
                            ${customer.memo ? escapeHtml(customer.memo) : 'No memo information available'}
                        </div>
                    </div>
                </div>
                
                <!-- Footer -->
                <div class="flex items-center justify-end gap-3 px-6 py-4 border-t-2 border-neutral-300 dark:border-neutral-600 bg-gradient-to-r from-neutral-100 to-neutral-50 dark:from-neutral-700 dark:to-neutral-800">
                    <button onclick="closeCustomerDetailsModal()" class="px-4 py-2 bg-neutral-300 dark:bg-neutral-600 text-neutral-800 dark:text-white hover:bg-neutral-400 dark:hover:bg-neutral-500 rounded-lg transition-colors text-sm font-medium border border-neutral-400 dark:border-neutral-500">
                        Close
                    </button>
                    <button onclick="closeCustomerDetailsModal(); editCustomer('${escapeHtml(customer.id)}');" class="inline-flex items-center px-4 py-2 bg-danger-600 text-white hover:bg-danger-700 rounded-lg transition-colors text-sm font-medium shadow-sm">
                        <i class="fa-solid fa-pencil mr-2"></i>
                        Edit
                    </button>
                </div>
                </div>
            </div>
        </div>
    `;
    
    // Add modal to body
    document.body.insertAdjacentHTML('beforeend', modalContent);
}

// Compact formatting functions for cleaner display
function formatCustomerPhonesCompact(phones) {
    if (!phones || phones.length === 0) {
        return `
            <div class="flex items-center justify-between">
                <span class="text-sm text-neutral-600 dark:text-neutral-400">Phone:</span>
                <span class="text-sm text-neutral-400">-</span>
            </div>
        `;
    }
    
    return phones.map(phone => `
        <div class="flex items-center justify-between">
            <span class="text-sm text-neutral-600 dark:text-neutral-400">${phone.location || 'Phone'}:</span>
            <span class="text-sm text-neutral-900 dark:text-neutral-100 font-mono">${escapeHtml(phone.phone)}</span>
        </div>
    `).join('');
}

function formatCustomerAddressCompact(customer) {
    const addressParts = [];
    if (customer.a1) addressParts.push(escapeHtml(customer.a1));
    if (customer.a2) addressParts.push(escapeHtml(customer.a2));
    if (customer.a3) addressParts.push(escapeHtml(customer.a3));
    
    const cityState = formatCityState(customer);
    if (cityState !== '-') addressParts.push(escapeHtml(cityState));
    if (customer.zip) addressParts.push(escapeHtml(customer.zip));
    
    if (addressParts.length === 0) {
        return `
            <div class="text-center text-neutral-400 py-2">
                <span class="text-sm">No address provided</span>
            </div>
        `;
    }
    
    return `
        <div class="text-sm text-neutral-700 dark:text-neutral-300 leading-relaxed">
            ${addressParts.map(part => `<div>${part}</div>`).join('')}
        </div>
    `;
}

// Ultra-compact formatting functions for minimal space usage
function formatCustomerPhonesUltraCompact(phones) {
    if (!phones || phones.length === 0) {
        return `
            <div class="flex items-center justify-between">
                <span class="text-xs text-neutral-600 dark:text-neutral-400">Phone:</span>
                <span class="text-xs text-neutral-400">-</span>
            </div>
        `;
    }
    
    return phones.map(phone => `
        <div class="flex items-center justify-between">
            <span class="text-xs text-neutral-600 dark:text-neutral-400">${phone.location || 'Phone'}:</span>
            <span class="text-xs text-neutral-900 dark:text-neutral-100 font-mono">${escapeHtml(phone.phone)}</span>
        </div>
    `).join('');
}

function formatCustomerAddressUltraCompact(customer) {
    const addressParts = [];
    if (customer.a1) addressParts.push(escapeHtml(customer.a1));
    if (customer.a2) addressParts.push(escapeHtml(customer.a2));
    if (customer.a3) addressParts.push(escapeHtml(customer.a3));
    
    const cityState = formatCityState(customer);
    if (cityState !== '-') addressParts.push(escapeHtml(cityState));
    if (customer.zip) addressParts.push(escapeHtml(customer.zip));
    
    if (addressParts.length === 0) {
        return `
            <div class="text-center text-neutral-400 py-1">
                <span class="text-xs">No address provided</span>
            </div>
        `;
    }
    
    return `
        <div class="text-xs text-neutral-700 dark:text-neutral-300 leading-tight">
            ${addressParts.map(part => `<div>${part}</div>`).join('')}
        </div>
    `;
}

// Legacy formatting functions to match the old system layout
function formatCustomerPhonesLegacy(phones) {
    if (!phones || phones.length === 0) {
        return `<div class="text-xs text-neutral-400">No phone numbers</div>`;
    }
    
    return phones.map(phone => `
        <div class="flex justify-between">
            <span class="text-xs text-neutral-600 dark:text-neutral-400">${phone.location || 'Phone'}:</span>
            <span class="text-xs text-neutral-900 dark:text-neutral-100 font-mono">${escapeHtml(phone.phone)}</span>
        </div>
    `).join('');
}

function formatCustomerAddressLegacy(customer) {
    const addressParts = [];
    if (customer.a1) addressParts.push(escapeHtml(customer.a1));
    if (customer.a2) addressParts.push(escapeHtml(customer.a2));
    if (customer.a3) addressParts.push(escapeHtml(customer.a3));
    
    const cityState = formatCityState(customer);
    if (cityState !== '-') addressParts.push(escapeHtml(cityState));
    if (customer.zip) addressParts.push(escapeHtml(customer.zip));
    
    if (addressParts.length === 0) {
        return `<div class="text-xs text-neutral-400">No address provided</div>`;
    }
    
    return `
        <div class="text-xs text-neutral-700 dark:text-neutral-300 leading-tight space-y-0.5">
            ${addressParts.map(part => `<div>${part}</div>`).join('')}
        </div>
    `;
}

// Legacy formatting functions with larger text
function formatCustomerPhonesLegacyLarger(phones) {
    if (!phones || phones.length === 0) {
        return `<div class="text-sm text-neutral-400">No phone numbers</div>`;
    }
    
    return phones.map(phone => `
        <div class="flex justify-between">
            <span class="text-sm text-neutral-600 dark:text-neutral-400">${phone.location || 'Phone'}:</span>
            <span class="text-sm text-neutral-900 dark:text-neutral-100 font-mono font-medium">${escapeHtml(phone.phone)}</span>
        </div>
    `).join('');
}

function formatCustomerAddressLegacyLarger(customer) {
    const addressParts = [];
    if (customer.a1) addressParts.push(escapeHtml(customer.a1));
    if (customer.a2) addressParts.push(escapeHtml(customer.a2));
    if (customer.a3) addressParts.push(escapeHtml(customer.a3));
    
    const cityState = formatCityState(customer);
    if (cityState !== '-') addressParts.push(escapeHtml(cityState));
    if (customer.zip) addressParts.push(escapeHtml(customer.zip));
    
    if (addressParts.length === 0) {
        return `<div class="text-sm text-neutral-400">No address provided</div>`;
    }
    
    return `
        <div class="text-sm text-neutral-700 dark:text-neutral-300 leading-relaxed space-y-1">
            ${addressParts.map(part => `<div>${part}</div>`).join('')}
        </div>
    `;
}

// Make functions globally available
window.formatCustomerPhonesModern = formatCustomerPhonesModern;
window.formatCustomerAddressModern = formatCustomerAddressModern;
window.formatCustomerPersonalInfo = formatCustomerPersonalInfo;
window.formatCustomerPhonesCompact = formatCustomerPhonesCompact;
window.formatCustomerAddressCompact = formatCustomerAddressCompact;
window.formatCustomerPhonesUltraCompact = formatCustomerPhonesUltraCompact;
window.formatCustomerAddressUltraCompact = formatCustomerAddressUltraCompact;
window.formatCustomerPhonesLegacy = formatCustomerPhonesLegacy;
window.formatCustomerAddressLegacy = formatCustomerAddressLegacy;
window.formatCustomerPhonesLegacyLarger = formatCustomerPhonesLegacyLarger;
window.formatCustomerAddressLegacyLarger = formatCustomerAddressLegacyLarger;
window.showCustomerDetailsModal = showCustomerDetailsModal;