document.addEventListener('DOMContentLoaded', () => {
    // Add modal functionality
    const addModal = document.querySelector('add-modal');
    const addBtn = document.querySelector('data-table').shadowRoot.getElementById('addCustomerBtn');
    
    addBtn.addEventListener('click', () => {
        addModal.openModal();
    });

    // Handle new customer addition
    document.addEventListener('add-customer', (e) => {
        const newCustomer = e.detail;
        addCustomerToTable(newCustomer);
    });

    function addCustomerToTable(customer) {
        const tableBody = document.querySelector('data-table').shadowRoot.querySelector('tbody');
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${customer.phone}</td>
            <td>${customer.name}</td>
            <td><a href="https://${customer.facebook}" target="_blank">${customer.facebook ? 'View' : ''}</a></td>
            <td>${customer.date}</td>
            <td>${customer.report1}</td>
            <td>${customer.report2}</td>
            <td>${customer.report3}</td>
            <td class="actions">
                <button class="edit-btn">Edit</button>
                <button class="delete-btn">Delete</button>
            </td>
        `;
        tableBody.appendChild(row);
    }

// Sample data - in real app this would come from API
    const sampleData = [
        {
            phone: '0987654321',
            name: 'Nguyen Van A',
            facebook: 'facebook.com/nguyenvana',
            date: '2023-05-15',
            report1: 'Done',
            report2: 'Pending',
            report3: 'Not started'
        },
        {
            phone: '0123456789',
            name: 'Tran Thi B',
            facebook: 'facebook.com/tranthib',
            date: '2023-05-16',
            report1: 'Done',
            report2: 'Done',
            report3: 'Pending'
        }
    ];

    // Role switching functionality
    document.addEventListener('click', (e) => {
        if (e.target.classList.contains('role-btn')) {
            const buttons = document.querySelectorAll('.role-btn');
            buttons.forEach(btn => {
                btn.classList.remove('active');
                btn.classList.add('inactive');
            });
            e.target.classList.remove('inactive');
            e.target.classList.add('active');
            
            // Here you would adjust UI based on role
            const role = e.target.dataset.role;
            console.log(`Switched to ${role} mode`);
        }
    });

    // Initialize table with sample data
    const tableBody = document.querySelector('data-table').shadowRoot.querySelector('tbody');
    
    sampleData.forEach(item => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${item.phone}</td>
            <td>${item.name}</td>
            <td><a href="https://${item.facebook}" target="_blank">View</a></td>
            <td>${item.date}</td>
            <td>${item.report1}</td>
            <td>${item.report2}</td>
            <td>${item.report3}</td>
            <td class="actions">
                <button class="edit-btn">Edit</button>
                <button class="delete-btn">Delete</button>
            </td>
        `;
        tableBody.appendChild(row);
    });
    // Add event listeners for table actions
    tableBody.addEventListener('click', (e) => {
        if (e.target.classList.contains('edit-btn')) {
            const row = e.target.closest('tr');
            const cells = row.querySelectorAll('td');
            const customerData = {
                phone: cells[0].textContent,
                name: cells[1].textContent,
                facebook: cells[2].querySelector('a')?.href.replace('https://', ''),
                date: cells[3].textContent,
                report1: cells[4].textContent,
                report2: cells[5].textContent,
                report3: cells[6].textContent
            };
            
            // Open modal with existing data
            const modal = document.querySelector('add-modal');
            modal.shadowRoot.getElementById('phone').value = customerData.phone;
            modal.shadowRoot.getElementById('name').value = customerData.name;
            modal.shadowRoot.getElementById('facebook').value = customerData.facebook || '';
            modal.shadowRoot.getElementById('date').value = customerData.date;
            modal.shadowRoot.getElementById('report1').value = customerData.report1;
            modal.shadowRoot.getElementById('report2').value = customerData.report2;
            modal.shadowRoot.getElementById('report3').value = customerData.report3;
            
            modal.openModal();
            
            // Remove old row after edit
            modal.addEventListener('add-customer', () => {
                row.remove();
            }, { once: true });
            
        } else if (e.target.classList.contains('delete-btn')) {
            if (confirm('Are you sure you want to delete this customer?')) {
                e.target.closest('tr').remove();
            }
        }
    });
// Search functionality
    const searchInput = document.querySelector('data-table').shadowRoot.querySelector('input');
    searchInput.addEventListener('input', (e) => {
        const searchTerm = e.target.value.toLowerCase();
        const rows = tableBody.querySelectorAll('tr');
        
        rows.forEach(row => {
            const cells = row.querySelectorAll('td');
            let rowMatches = false;
            
            cells.forEach(cell => {
                if (cell.textContent.toLowerCase().includes(searchTerm)) {
                    rowMatches = true;
                }
            });
            
            row.style.display = rowMatches ? '' : 'none';
        });
    });

    // Filter duplicates functionality
    const filterBtn = document.querySelector('data-table').shadowRoot.querySelector('.filter-btn');
    filterBtn.addEventListener('click', () => {
        console.log('Filtering duplicates...');
        // Implement duplicate filtering logic
    });
});