script.js

// Mobile Navigation Toggle
const hamburger = document.querySelector('.hamburger');
const navMenu = document.querySelector('.nav-menu');

hamburger.addEventListener('click', () => {
    hamburger.classList.toggle('active');
    navMenu.classList.toggle('active');
});

// Close mobile menu when clicking on a link
document.querySelectorAll('.nav-link').forEach(n => n.addEventListener('click', () => {
    hamburger.classList.remove('active');
    navMenu.classList.remove('active');
}));

// Sample data for parts
const sampleParts = [
    {
        id: 1,
        name: "REV HD Hex Motor",
        category: "motors",
        condition: "like-new",
        description: "REV HD Hex Motor, used for one season. Works perfectly.",
        donor: "Team 12345",
        date: "2024-01-15",
        image: "https://via.placeholder.com/300x200/374151/ffffff?text=REV+HD+Motor"
    },
    {
        id: 2,
        name: "REV Robotics Color Sensor",
        category: "sensors",
        condition: "new",
        description: "Brand new REV Robotics Color Sensor, never used.",
        donor: "Team 11111",
        date: "2024-01-10",
        image: "https://via.placeholder.com/300x200/374151/ffffff?text=Color+Sensor"
    },
    {
        id: 3,
        name: "REV Pneumatic Cylinder Set",
        category: "mechanical",
        condition: "good",
        description: "Set of 4 REV pneumatic cylinders, good condition.",
        donor: "Team 67890",
        date: "2024-01-08",
        image: "https://via.placeholder.com/300x200/374151/ffffff?text=REV+Pneumatic+Cylinders"
    },
    {
        id: 4,
        name: "REV Control Hub",
        category: "electronics",
        condition: "good",
        description: "REV Control Hub with USB cable, tested and working.",
        donor: "Team 22222",
        date: "2024-01-05",
        image: "https://via.placeholder.com/300x200/374151/ffffff?text=REV+Control+Hub"
    },
    {
        id: 5,
        name: "REV Hex Wrench Set",
        category: "tools",
        condition: "like-new",
        description: "Complete set of REV hex wrenches, barely used.",
        donor: "Team 33333",
        date: "2024-01-03",
        image: "https://via.placeholder.com/300x200/374151/ffffff?text=REV+Hex+Wrenches"
    },
    {
        id: 6,
        name: "REV Robotics Touch Sensor",
        category: "sensors",
        condition: "new",
        description: "New REV Robotics Touch Sensor, still in packaging.",
        donor: "Team 12345",
        date: "2024-01-01",
        image: "https://via.placeholder.com/300x200/374151/ffffff?text=Touch+Sensor"
    }
];

// Sample leaderboard data (will be replaced with real data from Firebase)
const leaderboardData = {
    donations: [
        { rank: 1, team: "Team 12345", teamNumber: "12345", points: 1250, action: "View Profile" },
        { rank: 2, team: "Team 67890", teamNumber: "67890", points: 980, action: "View Profile" },
        { rank: 3, team: "Team 11111", teamNumber: "11111", points: 845, action: "View Profile" },
        { rank: 4, team: "Team 22222", teamNumber: "22222", points: 720, action: "View Profile" },
        { rank: 5, team: "Team 33333", teamNumber: "33333", points: 650, action: "View Profile" }
    ],
    requests: [
        { rank: 1, team: "Team 22222", teamNumber: "22222", points: 45, action: "View Profile" },
        { rank: 2, team: "Team 11111", teamNumber: "11111", points: 38, action: "View Profile" },
        { rank: 3, team: "Team 67890", teamNumber: "67890", points: 32, action: "View Profile" },
        { rank: 4, team: "Team 12345", teamNumber: "12345", points: 28, action: "View Profile" },
        { rank: 5, team: "Team 33333", teamNumber: "33333", points: 25, action: "View Profile" }
    ],
    teams: [
        { rank: 1, team: "Team 12345", teamNumber: "12345", points: 2100, action: "View Profile" },
        { rank: 2, team: "Team 67890", teamNumber: "67890", points: 1850, action: "View Profile" },
        { rank: 3, team: "Team 11111", teamNumber: "11111", points: 1650, action: "View Profile" },
        { rank: 4, team: "Team 22222", teamNumber: "22222", points: 1420, action: "View Profile" },
        { rank: 5, team: "Team 33333", teamNumber: "33333", points: 1280, action: "View Profile" }
    ]
};

// Populate parts grid
function populatePartsGrid(parts = sampleParts) {
    const partsGrid = document.querySelector('.parts-grid');
    if (!partsGrid) return;

    partsGrid.innerHTML = '';
    
    parts.forEach(part => {
        const partCard = document.createElement('div');
        partCard.className = 'feature-card';
        partCard.innerHTML = `
            <div class="part-image">
                <img src="${part.image}" alt="${part.name}" onerror="this.src='https://via.placeholder.com/300x200/374151/ffffff?text=No+Image'">
            </div>
            <div class="part-content">
                <div class="feature-icon">
                    <i class="fas ${getPartIcon(part.category)}"></i>
                </div>
                <h3>${part.name}</h3>
                <p><strong>Condition:</strong> ${part.condition}</p>
                <p>${part.description}</p>
                <p><strong>Donor:</strong> ${part.donor}</p>
                <p><strong>Date:</strong> ${new Date(part.date).toLocaleDateString()}</p>
                <button class="btn btn-primary" onclick="requestPart(${part.id})">Request Part</button>
            </div>
        `;
        partsGrid.appendChild(partCard);
    });
}

// Get icon for part category
function getPartIcon(category) {
    const icons = {
        motors: 'fa-cogs',
        sensors: 'fa-microchip',
        electronics: 'fa-bolt',
        mechanical: 'fa-wrench',
        tools: 'fa-tools'
    };
    return icons[category] || 'fa-cube';
}

// Populate leaderboard
function populateLeaderboard(type = 'donations') {
    const leaderboardBody = document.getElementById('leaderboard-body');
    if (!leaderboardBody) return;

    const data = leaderboardData[type];
    leaderboardBody.innerHTML = '';

    data.forEach(item => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${item.rank}</td>
            <td>${item.team}</td>
            <td>${item.points}</td>
            <td><button class="btn btn-secondary" onclick="viewProfile('${item.teamNumber}')">${item.action}</button></td>
        `;
        leaderboardBody.appendChild(row);
    });
}

// Leaderboard tab switching
document.querySelectorAll('.tab-btn').forEach(btn => {
    btn.addEventListener('click', () => {
        // Remove active class from all tabs
        document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
        // Add active class to clicked tab
        btn.classList.add('active');
        // Populate leaderboard with corresponding data
        const tabType = btn.getAttribute('data-tab');
        populateLeaderboard(tabType);
    });
});

// Search functionality
function searchParts() {
    const searchInput = document.querySelector('.search-box input');
    const searchTerm = searchInput.value.toLowerCase();
    
    const filteredParts = sampleParts.filter(part => 
        part.name.toLowerCase().includes(searchTerm) ||
        part.description.toLowerCase().includes(searchTerm) ||
        part.category.toLowerCase().includes(searchTerm)
    );
    
    populatePartsGrid(filteredParts);
}

// Filter functionality
function filterParts() {
    const categoryFilter = document.querySelector('.filter-select:first-of-type').value;
    const conditionFilter = document.querySelector('.filter-select:last-of-type').value;
    
    let filteredParts = sampleParts;
    
    if (categoryFilter) {
        filteredParts = filteredParts.filter(part => part.category === categoryFilter);
    }
    
    if (conditionFilter) {
        filteredParts = filteredParts.filter(part => part.condition === conditionFilter);
    }
    
    populatePartsGrid(filteredParts);
}

// Form handling
function handleDonateForm(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    
    // Get image data
    const imageInput = document.getElementById('part-image');
    const imageFile = imageInput.files[0];
    
    // Validate required fields
    const teamNumber = document.getElementById('team-number').value;
    const partName = document.getElementById('part-name').value;
    const partCategory = document.getElementById('part-category').value;
    const partCondition = document.getElementById('part-condition').value;
    
    if (!teamNumber || !partName || !partCategory || !partCondition) {
        alert('Please fill in all required fields.');
        return;
    }
    
    // Simulate form submission
    const submitBtn = event.target.querySelector('button[type="submit"]');
    const originalText = submitBtn.textContent;
    submitBtn.textContent = 'Submitting...';
    submitBtn.disabled = true;
    
    setTimeout(() => {
        let message = 'Thank you for donating! Your part has been added to our database.';
        if (imageFile) {
            message += ' Image uploaded successfully.';
        }
        alert(message);
        
        // Reset form and image
        event.target.reset();
        removeImage();
        submitBtn.textContent = originalText;
        submitBtn.disabled = false;
    }, 2000);
}

function handleRequestForm(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    
    // Simulate form submission
    const submitBtn = event.target.querySelector('button[type="submit"]');
    const originalText = submitBtn.textContent;
    submitBtn.textContent = 'Submitting...';
    submitBtn.disabled = true;
    
    setTimeout(() => {
        alert('Your request has been submitted! We\'ll notify you when a match is found.');
        event.target.reset();
        submitBtn.textContent = originalText;
        submitBtn.disabled = false;
    }, 2000);
}

function handleContactForm(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    
    // Simulate form submission
    const submitBtn = event.target.querySelector('button[type="submit"]');
    const originalText = submitBtn.textContent;
    submitBtn.textContent = 'Sending...';
    submitBtn.disabled = true;
    
    setTimeout(() => {
        alert('Thank you for your message! We\'ll get back to you within 24-48 hours.');
        event.target.reset();
        submitBtn.textContent = originalText;
        submitBtn.disabled = false;
    }, 2000);
}

// Button click handlers
function requestPart(partId) {
    alert(`Request submitted for part ID: ${partId}. The donor will be notified.`);
}

function viewProfile(teamNumber) {
    // Redirect to team profile page with team number
    window.location.href = `team-profile.html?number=${teamNumber}`;
}

// Social media and external link handlers
function openDiscord() {
    alert('Discord link would open here. For now, please contact us at support@ignitepathways.org');
}

function openSocialMedia(platform) {
    switch(platform) {
        case 'Instagram':
            window.open('https://www.instagram.com/ignite.pathways/?hl=en', '_blank');
            break;
        case 'Twitter':
            alert('Twitter link would open here. For now, please contact us at support@ignitepathways.org');
            break;
        case 'Facebook':
            alert('Facebook link would open here. For now, please contact us at support@ignitepathways.org');
            break;
        default:
            alert(`${platform} link would open here. For now, please contact us at support@ignitepathways.org`);
    }
}

// Image upload functionality
function initializeImageUpload() {
    const imageInput = document.getElementById('part-image');
    const uploadArea = document.getElementById('image-upload-area');
    const imagePreview = document.getElementById('image-preview');
    const previewImg = document.getElementById('preview-img');
    
    if (!imageInput || !uploadArea || !imagePreview || !previewImg) return;
    
    // Handle file selection
    imageInput.addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            handleImageFile(file);
        }
    });
    
    // Handle drag and drop
    uploadArea.addEventListener('click', () => imageInput.click());
    
    uploadArea.addEventListener('dragover', function(e) {
        e.preventDefault();
        uploadArea.classList.add('dragover');
    });
    
    uploadArea.addEventListener('dragleave', function(e) {
        e.preventDefault();
        uploadArea.classList.remove('dragover');
    });
    
    uploadArea.addEventListener('drop', function(e) {
        e.preventDefault();
        uploadArea.classList.remove('dragover');
        
        const files = e.dataTransfer.files;
        if (files.length > 0) {
            handleImageFile(files[0]);
        }
    });
}

// Handle image file
function handleImageFile(file) {
    // Validate file type
    if (!file.type.startsWith('image/')) {
        alert('Please select a valid image file.');
        return;
    }
    
    // Validate file size (5MB limit)
    if (file.size > 5 * 1024 * 1024) {
        alert('Image size must be less than 5MB.');
        return;
    }
    
    const reader = new FileReader();
    reader.onload = function(e) {
        const previewImg = document.getElementById('preview-img');
        const imagePreview = document.getElementById('image-preview');
        const uploadArea = document.getElementById('image-upload-area');
        
        previewImg.src = e.target.result;
        imagePreview.style.display = 'block';
        uploadArea.style.display = 'none';
    };
    
    reader.readAsDataURL(file);
}

// Remove image
function removeImage() {
    const imageInput = document.getElementById('part-image');
    const imagePreview = document.getElementById('image-preview');
    const uploadArea = document.getElementById('image-upload-area');
    
    imageInput.value = '';
    imagePreview.style.display = 'none';
    uploadArea.style.display = 'block';
}

// Initialize FIRST verification image upload
function initializeFirstImageUpload() {
    const imageInput = document.getElementById('first-dashboard-image');
    const uploadArea = document.getElementById('first-upload-area');
    const imagePreview = document.getElementById('first-image-preview');
    const previewImg = document.getElementById('first-preview-img');
    
    if (!imageInput || !uploadArea || !imagePreview || !previewImg) return;
    
    // Handle file selection
    imageInput.addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            handleFirstImageFile(file);
        }
    });
    
    // Handle drag and drop
    uploadArea.addEventListener('click', () => imageInput.click());
    
    uploadArea.addEventListener('dragover', function(e) {
        e.preventDefault();
        uploadArea.classList.add('dragover');
    });
    
    uploadArea.addEventListener('dragleave', function(e) {
        e.preventDefault();
        uploadArea.classList.remove('dragover');
    });
    
    uploadArea.addEventListener('drop', function(e) {
        e.preventDefault();
        uploadArea.classList.remove('dragover');
        
        const files = e.dataTransfer.files;
        if (files.length > 0) {
            handleFirstImageFile(files[0]);
        }
    });
}

// Handle FIRST verification image file
function handleFirstImageFile(file) {
    // Validate file type
    if (!file.type.startsWith('image/')) {
        alert('Please select a valid image file.');
        return;
    }
    
    // Validate file size (10MB limit)
    if (file.size > 10 * 1024 * 1024) {
        alert('Image size must be less than 10MB.');
        return;
    }
    
    const reader = new FileReader();
    reader.onload = function(e) {
        const previewImg = document.getElementById('first-preview-img');
        const imagePreview = document.getElementById('first-image-preview');
        const uploadArea = document.getElementById('first-upload-area');
        
        previewImg.src = e.target.result;
        imagePreview.style.display = 'block';
        uploadArea.style.display = 'none';
    };
    
    reader.readAsDataURL(file);
}

// Remove FIRST verification image
function removeFirstImage() {
    const imageInput = document.getElementById('first-dashboard-image');
    const imagePreview = document.getElementById('first-image-preview');
    const uploadArea = document.getElementById('first-upload-area');
    
    imageInput.value = '';
    imagePreview.style.display = 'none';
    uploadArea.style.display = 'block';
}

// Require authentication and redirect
function requireAuthAndRedirect(page) {
    if (!currentUser) {
        showMessage('Please log in to access this feature', 'error');
        window.location.href = 'login.html';
        return false;
    }
    
    if (!isFirstVerified) {
        showMessage('FIRST verification required. Please verify your FIRST affiliation.', 'error');
        window.location.href = 'profile.html';
        return false;
    }
    
    window.location.href = page;
    return true;
}

// Initialize the page
document.addEventListener('DOMContentLoaded', function() {
    // Populate initial data
    populatePartsGrid();
    populateLeaderboard();
    
    // Initialize image upload
    initializeImageUpload();
    
    // Initialize FIRST verification image upload
    initializeFirstImageUpload();
    
    // Add event listeners for forms
    const donateForm = document.querySelector('#donate form');
    const requestForm = document.querySelector('#request form');
    const contactForm = document.querySelector('#contactForm');
    
    if (donateForm) {
        donateForm.addEventListener('submit', handleDonateForm);
    }
    
    if (requestForm) {
        requestForm.addEventListener('submit', handleRequestForm);
    }
    
    if (contactForm) {
        contactForm.addEventListener('submit', handleContactForm);
    }
    
    // Add event listeners for search and filter
    const searchInput = document.querySelector('.search-box input');
    const searchBtn = document.querySelector('.search-btn');
    const filterSelects = document.querySelectorAll('.filter-select');
    
    if (searchInput) {
        searchInput.addEventListener('input', searchParts);
    }
    
    if (searchBtn) {
        searchBtn.addEventListener('click', searchParts);
    }
    
    filterSelects.forEach(select => {
        select.addEventListener('change', filterParts);
    });
    
    // Add FAQ functionality
    const faqQuestions = document.querySelectorAll('.faq-question');
    faqQuestions.forEach(question => {
        question.addEventListener('click', () => {
            const faqItem = question.parentElement;
            const isActive = faqItem.classList.contains('active');
            
            // Close all FAQ items
            document.querySelectorAll('.faq-item').forEach(item => {
                item.classList.remove('active');
            });
            
            // Open clicked item if it wasn't active
            if (!isActive) {
                faqItem.classList.add('active');
            }
        });
    });
    
    // Add smooth reveal animations
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
            }
        });
    }, observerOptions);
    
    // Observe all sections for animation
    document.querySelectorAll('section').forEach(section => {
        section.style.opacity = '0';
        section.style.transform = 'translateY(30px)';
        section.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
        observer.observe(section);
    });
});

// Navbar scroll effect
window.addEventListener('scroll', () => {
    const navbar = document.querySelector('.navbar');
    if (window.scrollY > 100) {
        navbar.style.background = 'rgba(15, 15, 15, 0.98)';
        navbar.style.boxShadow = '0 2px 20px rgba(220, 38, 38, 0.1)';
    } else {
        navbar.style.background = 'rgba(15, 15, 15, 0.95)';
        navbar.style.boxShadow = 'none';
    }
});