document.addEventListener('DOMContentLoaded', () => {
    fetchTeamData();
    setupEventListeners();
    feather.replace();
});

// Fetch Data from Public API (RandomUser.me)
async function fetchTeamData() {
    const grid = document.getElementById('team-grid');
    const btn = document.getElementById('refresh-team');
    
    // Add loading state visual
    if(btn) {
        const icon = btn.querySelector('[data-feather]');
        if(icon) icon.classList.add('animate-spin');
        btn.disabled = true;
        btn.innerHTML = 'Loading...';
    }

    try {
        const response = await fetch('https://randomuser.me/api/?results=4&nat=us,gb,ca,au,de');
        const data = await response.json();
        renderTeam(data.results);
    } catch (error) {
        console.error('Error fetching team:', error);
        grid.innerHTML = `
            <div class="col-span-full text-center text-red-500 p-8 bg-red-50 rounded-xl border border-red-100">
                <i data-feather="alert-circle" class="inline-block mb-2"></i>
                <p>Failed to load team data. Please try again.</p>
            </div>
        `;
        feather.replace();
    } finally {
        // Reset button state
        if(btn) {
            btn.disabled = false;
            btn.innerHTML = `<i data-feather="refresh-cw" class="w-4 h-4"></i> Refresh Team`;
            feather.replace();
        }
    }
}

// Render Team Cards
function renderTeam(users) {
    const grid = document.getElementById('team-grid');
    grid.innerHTML = '';

    users.forEach((user, index) => {
        const card = document.createElement('div');
        card.className = 'bg-white rounded-2xl p-6 shadow-sm border border-slate-100 text-center hover:shadow-md transition-all duration-300 group animate-fade-in';
        card.style.animationDelay = `${index * 100}ms`;

        card.innerHTML = `
            <div class="relative w-24 h-24 mx-auto mb-4">
                <img src="${user.picture.large}" alt="${user.name.first}" class="w-full h-full rounded-full object-cover ring-4 ring-indigo-50 group-hover:ring-primary transition-all">
                <div class="absolute bottom-0 right-0 w-6 h-6 bg-green-500 border-2 border-white rounded-full"></div>
            </div>
            <h3 class="font-bold text-lg text-slate-800 capitalize">${user.name.first} ${user.name.last}</h3>
            <p class="text-primary text-sm font-medium mb-3">Product Designer</p>
            <p class="text-slate-500 text-xs mb-4">${user.location.city}, ${user.location.country}</p>
            <div class="flex justify-center gap-3">
                <a href="#" class="text-slate-400 hover:text-blue-500 transition-colors"><i data-feather="linkedin" class="w-4 h-4"></i></a>
                <a href="#" class="text-slate-400 hover:text-gray-800 transition-colors"><i data-feather="github" class="w-4 h-4"></i></a>
                <a href="#" class="text-slate-400 hover:text-blue-400 transition-colors"><i data-feather="twitter" class="w-4 h-4"></i></a>
            </div>
        `;
        grid.appendChild(card);
    });
    feather.replace();
}

function setupEventListeners() {
    const refreshBtn = document.getElementById('refresh-team');
    if (refreshBtn) {
        refreshBtn.addEventListener('click', fetchTeamData);
    }
}