script.js

document.addEventListener('DOMContentLoaded', function() {
    // Initialize Chart
    const ctx = document.getElementById('airdropChart').getContext('2d');
    let airdropChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: [],
            datasets: [{
                label: 'Airdrop Value (USD)',
                data: [],
                backgroundColor: '#3B82F6',
                borderColor: '#3B82F6',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

    // Sample data (in a real app, this would come from a database)
    let airdrops = [
        {
            id: 1,
            project: 'Ethereum',
            token: 'ETH',
            amount: 0.5,
            value: 1000,
            status: 'claimed',
            date: '2023-05-15'
        },
        {
            id: 2,
            project: 'Solana',
            token: 'SOL',
            amount: 10,
            value: 500,
            status: 'pending',
            date: '2023-06-20'
        },
        {
            id: 3,
            project: 'Polygon',
            token: 'MATIC',
            amount: 200,
            value: 150,
            status: 'pending',
            date: '2023-07-10'
        }
    ];

    // DOM Elements
    const airdropTableBody = document.getElementById('airdropTableBody');
    const totalAirdropsElement = document.getElementById('totalAirdrops');
    const claimedAirdropsElement = document.getElementById('claimedAirdrops');
    const pendingAirdropsElement = document.getElementById('pendingAirdrops');
    const openModalBtn = document.getElementById('openModalBtn');
    const modal = document.querySelector('custom-add-airdrop-modal');

    // Render airdrops table
    function renderAirdrops() {
        airdropTableBody.innerHTML = '';
        
        // Update stats
        totalAirdropsElement.textContent = airdrops.length;
        claimedAirdropsElement.textContent = airdrops.filter(a => a.status === 'claimed').length;
        pendingAirdropsElement.textContent = airdrops.filter(a => a.status === 'pending').length;
        
        // Update chart data
        const chartLabels = airdrops.map(a => a.project);
        const chartData = airdrops.map(a => a.value);
        
        airdropChart.data.labels = chartLabels;
        airdropChart.data.datasets[0].data = chartData;
        airdropChart.update();
        
        // Render table rows
        airdrops.forEach(airdrop => {
            const row = document.createElement('tr');
            
            // Determine status class
            let statusClass = 'status-pending';
            if (airdrop.status === 'claimed') statusClass = 'status-claimed';
            if (airdrop.status === 'failed') statusClass = 'status-failed';
            
            row.innerHTML = `
                <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                        <div class="flex-shrink-0 h-10 w-10">
                            <img class="h-10 w-10 rounded-full" src="http://static.photos/technology/200x200/${airdrop.id}" alt="${airdrop.project} logo">
                        </div>
                        <div class="ml-4">
                            <div class="text-sm font-medium text-gray-900">${airdrop.project}</div>
                        </div>
                    </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm text-gray-900">${airdrop.token}</div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm text-gray-900">${airdrop.amount}</div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm text-gray-900">$${airdrop.value.toLocaleString()}</div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <span class="${statusClass}">${airdrop.status.charAt(0).toUpperCase() + airdrop.status.slice(1)}</span>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    ${new Date(airdrop.date).toLocaleDateString()}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                    <button class="text-blue-600 hover:text-blue-900 mr-3 edit-btn" data-id="${airdrop.id}">Edit</button>
                    <button class="text-red-600 hover:text-red-900 delete-btn" data-id="${airdrop.id}">Delete</button>
                </td>
            `;
            
            airdropTableBody.appendChild(row);
        });
        
        // Add event listeners to buttons
        document.querySelectorAll('.edit-btn').forEach(btn => {
            btn.addEventListener('click', (e) => {
                const id = parseInt(e.target.getAttribute('data-id'));
                editAirdrop(id);
            });
        });
        
        document.querySelectorAll('.delete-btn').forEach(btn => {
            btn.addEventListener('click', (e) => {
                const id = parseInt(e.target.getAttribute('data-id'));
                deleteAirdrop(id);
            });
        });
    }
    
    // Add new airdrop
    function addAirdrop(newAirdrop) {
        newAirdrop.id = airdrops.length > 0 ? Math.max(...airdrops.map(a => a.id)) + 1 : 1;
        airdrops.push(newAirdrop);
        renderAirdrops();
    }
    
    // Edit airdrop
    function editAirdrop(id) {
        const airdrop = airdrops.find(a => a.id === id);
        if (airdrop) {
            modal.openForEdit(airdrop);
        }
    }
    
    // Update airdrop
    function updateAirdrop(updatedAirdrop) {
        const index = airdrops.findIndex(a => a.id === updatedAirdrop.id);
        if (index !== -1) {
            airdrops[index] = updatedAirdrop;
            renderAirdrops();
        }
    }
    
    // Delete airdrop
    function deleteAirdrop(id) {
        if (confirm('Are you sure you want to delete this airdrop?')) {
            airdrops = airdrops.filter(a => a.id !== id);
            renderAirdrops();
        }
    }
    
    // Modal open button
    openModalBtn.addEventListener('click', () => {
        modal.open();
    });
    
    // Handle modal events
    modal.addEventListener('addAirdrop', (e) => {
        addAirdrop(e.detail);
    });
    
    modal.addEventListener('updateAirdrop', (e) => {
        updateAirdrop(e.detail);
    });
    
    // Initial render
    renderAirdrops();
});