script.js

// Tier List Maker Drag & Drop
function initializeDragDrop() {
    document.addEventListener('dragstart', function(ev) {
        if (ev.target.classList.contains('char-card')) {
            ev.dataTransfer.setData("text", ev.target.id);
        }
    });

    document.addEventListener('dragover', function(ev) {
        if (ev.target.classList.contains('tier-drop-zone') || 
            ev.target.classList.contains('character-pool') ||
            ev.target.closest('.tier-drop-zone') || 
            ev.target.closest('.character-pool')) {
            ev.preventDefault();
        }
    });

    document.addEventListener('drop', function(ev) {
        if (ev.target.classList.contains('tier-drop-zone') || 
            ev.target.classList.contains('character-pool')) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("text");
            var draggedElement = document.getElementById(data);
            ev.target.appendChild(draggedElement);
        } else {
            var targetZone = ev.target.closest('.tier-drop-zone') || 
                            ev.target.closest('.character-pool');
            if (targetZone) {
                ev.preventDefault();
                var data = ev.dataTransfer.getData("text");
                var draggedElement = document.getElementById(data);
                targetZone.appendChild(draggedElement);
            }
        }
    });
}

// Build Calculator and Utility Handling
document.addEventListener('DOMContentLoaded', function() {
    // Initialize drag and drop if on tier list maker page
    if (document.getElementById('tier-list')) {
        initializeDragDrop();
    }

// Star Rating Functionality
document.addEventListener('click', function(e) {
    if (e.target.classList.contains('star')) {
        const stars = e.target.parentElement.querySelectorAll('.star');
        const rating = parseInt(e.target.getAttribute('data-value'));
        const hiddenInput = e.target.parentElement.nextElementSibling;
        
        stars.forEach((star, index) => {
            if (index < rating) {
                star.classList.add('active');
            } else {
                star.classList.remove('active');
            }
        });
        
        hiddenInput.value = rating;
    }
});
const buildForm = document.getElementById('build-form');
const previewElements = {
        toon: document.getElementById('preview-toon'),
        buildName: document.getElementById('preview-build-name'),
        trinkets: document.getElementById('preview-trinkets'),
        rationale: document.getElementById('preview-rationale'),
        ratingSection: document.getElementById('build-rating')
    };

    // --- Configuration Maps ---
    const config = {
        toonNames: { 'vee': 'Vee', 'pebble': 'Pebble', 'sprout': 'Sprout', 'shelly': 'Shelly' },
        goalNames: { 'ichor': 'Ichor Farming', 'survival': 'Solo Survival', 'research': 'Research Farming', 'support': 'Team Support' },
        trinketNames: { 'remote': "Vee's Remote", 'magnifying': 'Magnifying Glass', 'plush': 'Dandy Plush', 'bow': 'Pink Bow' }
    };

    if (buildForm) {
        // --- Real-time Preview Update ---
        buildForm.addEventListener('input', function() {
            const formData = new FormData(buildForm);
            const data = Object.fromEntries(formData.entries());

            // Toon and Goal Display
            const toonDisplay = config.toonNames[data.toon] || 'Select a Toon';
            previewElements.toon.textContent = toonDisplay;
            
            // Build Name and Goal
            let buildNameDisplay = data.buildName || 'No build name yet';
            if (data.goal && config.goalNames[data.goal]) {
                buildNameDisplay = `${buildNameDisplay} - ${config.goalNames[data.goal]}`;
            }
            previewElements.buildName.textContent = buildNameDisplay;

            // Trinket Display
            const trinkets = [];
            if (data.trinket1 && config.trinketNames[data.trinket1]) trinkets.push(config.trinketNames[data.trinket1]);
            if (data.trinket2 && config.trinketNames[data.trinket2]) trinkets.push(config.trinketNames[data.trinket2]);
            previewElements.trinkets.textContent = trinkets.join(' + ') || 'No trinkets selected';

            // Rationale Display
            previewElements.rationale.textContent = data.rationale || 'Add your strategic rationale to see it here';

            // Show rating section when key fields are filled
            const isComplete = data.toon && data.goal && data.trinket1 && data.trinket2 && data.buildName;
            previewElements.ratingSection.classList.toggle('hidden', !isComplete);

            // Re-render Feather icons if used in the preview
            feather.replace();
        });

        // --- Form Submission and Local Storage Save ---
        buildForm.addEventListener('submit', function(e) {
            e.preventDefault();
            const formData = new FormData(buildForm);
            const data = Object.fromEntries(formData.entries());
            
            // Simple validation check (assuming select fields have default value="")
            if (!data.toon || !data.goal || !data.trinket1 || !data.trinket2 || !data.buildName || !data.rationale) {
                alert('Please fill all required fields, including the rationale!');
                return;
            }

            // Save to localStorage
            const builds = JSON.parse(localStorage.getItem('builds') || '[]');
            builds.push({ ...data, date: new Date().toISOString() }); // Use spread syntax for efficiency
            localStorage.setItem('builds', JSON.stringify(builds));

            alert('Build saved successfully!');
            buildForm.reset();
            
            // Re-render Feather icons after reset
            feather.replace(); 
        });
    }

    // --- Smooth Scrolling for Anchor Links ---
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({ behavior: 'smooth' });
            }
        });
    });

    // --- Initialize Tooltips ---
    const tooltipTriggers = document.querySelectorAll('[data-tooltip]');
    
    tooltipTriggers.forEach(trigger => {
        const tooltip = document.createElement('div');
        // Use consistent classes for styling
        tooltip.className = 'tooltip hidden md:block bg-gray-800 text-white px-3 py-1 rounded text-xs absolute z-40 whitespace-nowrap opacity-95 transition-opacity duration-200';
        tooltip.textContent = trigger.getAttribute('data-tooltip');
        
        // Use a relative container for better positioning
        trigger.style.position = 'relative'; 
        trigger.appendChild(tooltip);
        
        trigger.addEventListener('mouseenter', () => {
            tooltip.classList.remove('hidden');
        });
        
        trigger.addEventListener('mouseleave', () => {
            tooltip.classList.add('hidden');
        });
    });
});