const teamMembers = []; // We'll fetch from backend

// Initialize team section
async function initTeamSection() {
    const teamGrid = document.getElementById('teamGrid');
    const viewToggleBtn = document.getElementById('viewToggleBtn');
    
    if (!teamGrid || !viewToggleBtn) return;

    try {
        // Fetch team members from backend
        const response = await fetch('backend/get_team_members.php?limit=3');
        const data = await response.json();
        
        if (data.success) {
            teamMembers.length = 0; // Clear array
            teamMembers.push(...data.data);
            
            // Clear existing content
            teamGrid.innerHTML = '';
            
            // Generate team members
            data.data.forEach(member => {
                const teamMember = createTeamMember(member);
                teamGrid.appendChild(teamMember);
            });
            
            // Initialize team animations
            initTeamAnimations();
            
            // Initialize background elements
            initBackgroundElements();
            
            // Initialize view toggle functionality
            initViewToggle(viewToggleBtn, teamGrid);
        } else {
            console.error('Failed to load team members:', data.error);
        }
    } catch (error) {
        console.error('Error loading team members:', error);
    }
}

// Create team member element - UPDATED: Using anchor tags for dedicated pages
function createTeamMember(member) {
    const memberDiv = document.createElement('div');
    memberDiv.className = 'team-member';
    memberDiv.setAttribute('data-member-id', member.id);
    
    memberDiv.innerHTML = `
        <div class="member-image">
            <img src="${member.image}" alt="${member.name}" loading="lazy">
            <div class="image-overlay">
                <a href="backend/team_member_page.php?id=${member.id}" class="view-profile">View Profile</a>
            </div>
        </div>
        <div class="member-info">
            <h3 class="member-name">${member.name}</h3>
            <p class="member-role">${member.role}</p>
            <p class="member-bio">${member.bio}</p>
        </div>
        <div class="member-stats">
            <div class="member-stat">
                <div class="stat-value">${member.stats.years}</div>
                <div class="stat-label">Years</div>
            </div>
            <div class="member-stat">
                <div class="stat-value">${member.stats.projects}</div>
                <div class="stat-label">Projects</div>
            </div>
            <div class="member-stat">
                <div class="stat-value">${member.stats.success}</div>
                <div class="stat-label">Success</div>
            </div>
        </div>
        <div class="member-social">
            <a href="${member.social.linkedin}" class="social-link" target="_blank">
                <i class="fab fa-linkedin-in"></i>
            </a>
            <a href="${member.social.twitter}" class="social-link" target="_blank">
                <i class="fab fa-x-twitter"></i>
            </a>
            <a href="${member.social.instagram}" class="social-link" target="_blank">
                <i class="fab fa-instagram"></i>
            </a>
        </div>
    `;

    return memberDiv;
}

// Initialize view toggle functionality
function initViewToggle(button, grid) {
    let isExpanded = false;
    
    button.addEventListener('click', async function() {
        try {
            if (!isExpanded) {
                // Show all team members
                const response = await fetch('backend/get_team_members.php');
                const data = await response.json();
                
                if (data.success) {
                    grid.innerHTML = '';
                    data.data.forEach(member => {
                        const teamMember = createTeamMember(member);
                        grid.appendChild(teamMember);
                    });
                    
                    button.querySelector('span').textContent = 'Show Less';
                    button.classList.add('show-less');
                    isExpanded = true;
                    
                    // Re-initialize animations
                    setTimeout(() => {
                        initTeamAnimations();
                    }, 100);
                }
            } else {
                // Show only 3 team members
                const response = await fetch('backend/get_team_members.php?limit=3');
                const data = await response.json();
                
                if (data.success) {
                    grid.innerHTML = '';
                    data.data.forEach(member => {
                        const teamMember = createTeamMember(member);
                        grid.appendChild(teamMember);
                    });
                    
                    button.querySelector('span').textContent = 'View More';
                    button.classList.remove('show-less');
                    isExpanded = false;
                    
                    // Re-initialize animations
                    setTimeout(() => {
                        initTeamAnimations();
                    }, 100);
                }
            }
        } catch (error) {
            console.error('Error toggling team members:', error);
        }
    });
}

// Remove overlay-related CSS and add clickable card functionality
function makeCardsClickable() {
    document.addEventListener('click', function(e) {
        const teamMember = e.target.closest('.team-member');
        if (teamMember && !e.target.closest('.social-link') && !e.target.closest('.view-profile')) {
            const memberId = teamMember.getAttribute('data-member-id');
            window.location.href = `backend/team_member_page.php?id=${memberId}`;
        }
    });
}

// Keep the animation and background functions as they are
function initTeamAnimations() {
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
            }
        });
    }, observerOptions);

    document.querySelectorAll('.team-member').forEach(member => {
        member.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
        observer.observe(member);
    });
}

function initBackgroundElements() {
    const bgContainer = document.getElementById('teamBgElements');
    if (!bgContainer) return;

    for (let i = 0; i < 5; i++) {
        const orb = document.createElement('div');
        orb.className = 'bg-orb';
        
        const size = Math.random() * 200 + 100;
        const left = Math.random() * 80 + 10;
        const top = Math.random() * 80 + 10;
        const delay = Math.random() * 10;
        
        orb.style.width = `${size}px`;
        orb.style.height = `${size}px`;
        orb.style.left = `${left}%`;
        orb.style.top = `${top}%`;
        orb.style.animationDelay = `${delay}s`;
        
        bgContainer.appendChild(orb);
    }
}

// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
    initTeamSection();
    makeCardsClickable();
});