app.js

/**
 * Sneaker Bot Simulator - Main Application
 * Educational visualization of how sneaker bots operate
 */

// ============================================
// STATE MANAGEMENT
// ============================================
const state = {
    currentView: 'drop',
    simulation: {
        running: false,
        countdown: 10,
        stock: 500,
        maxStock: 500,
        botTasks: 10,
        proxyCount: 100,
        botSpeed: 200
    },
    race: {
        running: false,
        participants: [],
        botWins: 0,
        humanWins: 0,
        stockRemaining: 500
    },
    market: {
        retailPrice: 180,
        resalePrice: 450,
        platformFees: 12.5,
        shippingCost: 15
    }
};

// ============================================
// DOM ELEMENTS
// ============================================
const elements = {
    // Navigation
    navBtns: document.querySelectorAll('.nav-btn'),
    views: document.querySelectorAll('.view'),
    
    // Drop Simulation
    hours: document.getElementById('hours'),
    minutes: document.getElementById('minutes'),
    seconds: document.getElementById('seconds'),
    startDropBtn: document.getElementById('start-drop'),
    currentStock: document.getElementById('current-stock'),
    stockFill: document.getElementById('stock-fill'),
    activityFeed: document.getElementById('activity-feed'),
    
    // Config sliders
    taskCount: document.getElementById('task-count'),
    taskCountValue: document.getElementById('task-count-value'),
    proxyCount: document.getElementById('proxy-count'),
    proxyCountValue: document.getElementById('proxy-count-value'),
    botSpeed: document.getElementById('bot-speed'),
    botSpeedValue: document.getElementById('bot-speed-value'),
    
    // Race
    raceLanes: document.getElementById('race-lanes'),
    startRaceBtn: document.getElementById('start-race'),
    resetRaceBtn: document.getElementById('reset-race'),
    botWins: document.getElementById('bot-wins'),
    humanWins: document.getElementById('human-wins'),
    stockRemaining: document.getElementById('stock-remaining'),
    
    // Market
    retailPriceInput: document.getElementById('retail-price'),
    resalePriceInput: document.getElementById('resale-price'),
    platformFeesInput: document.getElementById('platform-fees'),
    shippingCostInput: document.getElementById('shipping-cost'),
    grossProfit: document.getElementById('gross-profit'),
    totalFees: document.getElementById('total-fees'),
    netProfit: document.getElementById('net-profit'),
    roi: document.getElementById('roi')
};

// ============================================
// NAVIGATION
// ============================================
function initNavigation() {
    elements.navBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            const viewId = btn.dataset.view;
            switchView(viewId);
        });
    });
}

function switchView(viewId) {
    // Update nav buttons
    elements.navBtns.forEach(btn => {
        btn.classList.toggle('active', btn.dataset.view === viewId);
    });
    
    // Update views
    elements.views.forEach(view => {
        view.classList.toggle('active', view.id === `view-${viewId}`);
    });
    
    state.currentView = viewId;
}

// ============================================
// DROP SIMULATION
// ============================================
let countdownInterval = null;
let simulationInterval = null;

function initDropSimulation() {
    elements.startDropBtn.addEventListener('click', startDropSimulation);
    
    // Config sliders
    elements.taskCount.addEventListener('input', (e) => {
        state.simulation.botTasks = parseInt(e.target.value);
        elements.taskCountValue.textContent = e.target.value;
    });
    
    elements.proxyCount.addEventListener('input', (e) => {
        state.simulation.proxyCount = parseInt(e.target.value);
        elements.proxyCountValue.textContent = e.target.value;
    });
    
    elements.botSpeed.addEventListener('input', (e) => {
        state.simulation.botSpeed = parseInt(e.target.value);
        elements.botSpeedValue.textContent = e.target.value;
    });
    
    // Size buttons
    document.querySelectorAll('.size-btn:not(.sold-out)').forEach(btn => {
        btn.addEventListener('click', () => {
            document.querySelectorAll('.size-btn').forEach(b => b.classList.remove('selected'));
            btn.classList.add('selected');
        });
    });
}

function startDropSimulation() {
    if (state.simulation.running) return;
    
    state.simulation.running = true;
    state.simulation.stock = state.simulation.maxStock;
    elements.startDropBtn.textContent = 'Simulation Running...';
    elements.startDropBtn.disabled = true;
    
    clearActivityFeed();
    addActivity('Initializing bot instances...', 'info');
    
    // Start countdown
    countdownInterval = setInterval(() => {
        state.simulation.countdown--;
        updateCountdownDisplay();
        
        if (state.simulation.countdown <= 5 && state.simulation.countdown > 0) {
            addActivity(`Drop in ${state.simulation.countdown} seconds...`, 'warning');
        }
        
        if (state.simulation.countdown <= 0) {
            clearInterval(countdownInterval);
            startBotRace();
        }
    }, 1000);
}

function updateCountdownDisplay() {
    const hours = Math.floor(state.simulation.countdown / 3600);
    const minutes = Math.floor((state.simulation.countdown % 3600) / 60);
    const seconds = state.simulation.countdown % 60;
    
    elements.hours.textContent = hours.toString().padStart(2, '0');
    elements.minutes.textContent = minutes.toString().padStart(2, '0');
    elements.seconds.textContent = seconds.toString().padStart(2, '0');
}

function startBotRace() {
    addActivity('DROP IS LIVE! Bots engaging...', 'success');
    
    // Simulate bot purchases
    simulationInterval = setInterval(() => {
        if (state.simulation.stock <= 0) {
            endSimulation();
            return;
        }
        
        // Simulate bot activity
        const success = Math.random() > 0.3;
        const isBot = Math.random() > 0.15;
        
        if (success && state.simulation.stock > 0) {
            state.simulation.stock--;
            updateStockDisplay();
            
            if (isBot) {
                const botId = Math.floor(Math.random() * state.simulation.botTasks) + 1;
                const size = ['8', '8.5', '9', '9.5', '10', '10.5', '11'][Math.floor(Math.random() * 7)];
                addActivity(`Bot Task #${botId} checked out Size ${size}`, 'success');
            } else {
                addActivity('Manual user completed checkout', 'info');
            }
        } else if (!success && Math.random() > 0.5) {
            const reason = ['CAPTCHA failed', 'Payment declined', 'Session expired', 'Rate limited'][Math.floor(Math.random() * 4)];
            addActivity(`Checkout failed: ${reason}`, 'error');
        }
        
        // Random proxy rotations
        if (Math.random() > 0.7) {
            addActivity(`Rotating proxy pool... ${Math.floor(Math.random() * state.simulation.proxyCount)} IPs cycled`, 'info');
        }
        
    }, state.simulation.botSpeed);
}

function endSimulation() {
    clearInterval(simulationInterval);
    state.simulation.running = false;
    
    addActivity('SOLD OUT - All stock depleted', 'warning');
    addActivity(`Simulation complete. Final stock: 0/${state.simulation.maxStock}`, 'info');
    
    elements.startDropBtn.textContent = 'Restart Simulation';
    elements.startDropBtn.disabled = false;
    
    // Reset for next run
    state.simulation.countdown = 10;
    updateCountdownDisplay();
}

function updateStockDisplay() {
    elements.currentStock.textContent = state.simulation.stock;
    const percentage = (state.simulation.stock / state.simulation.maxStock) * 100;
    elements.stockFill.style.width = `${percentage}%`;
}

function clearActivityFeed() {
    elements.activityFeed.innerHTML = '';
}

function addActivity(message, type = 'info') {
    const now = new Date();
    const time = now.toLocaleTimeString('en-US', { hour12: false });
    
    const item = document.createElement('div');
    item.className = `activity-item ${type}`;
    item.innerHTML = `
        <span class="activity-time">${time}</span>
        <span class="activity-text">${message}</span>
    `;
    
    elements.activityFeed.insertBefore(item, elements.activityFeed.firstChild);
    
    // Keep only last 50 items
    while (elements.activityFeed.children.length > 50) {
        elements.activityFeed.removeChild(elements.activityFeed.lastChild);
    }
}

// ============================================
// BOT RACE VISUALIZATION
// ============================================
const RACE_STAGES = [
    { name: 'Queue', class: 'stage-queue', duration: [500, 2000] },
    { name: 'Add to Cart', class: 'stage-cart', duration: [200, 800] },
    { name: 'CAPTCHA', class: 'stage-captcha', duration: [1000, 5000] },
    { name: 'Checkout', class: 'stage-checkout', duration: [300, 1500] }
];

function initRaceView() {
    elements.startRaceBtn.addEventListener('click', startRace);
    elements.resetRaceBtn.addEventListener('click', resetRace);
    generateRaceLanes();
}

function generateRaceLanes() {
    elements.raceLanes.innerHTML = '';
    state.race.participants = [];
    
    // Generate 8 bots and 4 humans
    const participants = [
        ...Array(8).fill(null).map((_, i) => ({ type: 'bot', name: `Bot #${i + 1}`, id: `bot-${i}` })),
        ...Array(4).fill(null).map((_, i) => ({ type: 'human', name: `User #${i + 1}`, id: `human-${i}` }))
    ];
    
    // Shuffle participants
    participants.sort(() => Math.random() - 0.5);
    
    participants.forEach(p => {
        const lane = createRaceLane(p);
        elements.raceLanes.appendChild(lane);
        state.race.participants.push({
            ...p,
            progress: 0,
            stage: 0,
            status: 'waiting',
            element: lane
        });
    });
}

function createRaceLane(participant) {
    const lane = document.createElement('div');
    lane.className = 'race-lane';
    lane.id = participant.id;
    
    lane.innerHTML = `
        <div class="lane-label">
            <span class="lane-type ${participant.type}">${participant.type === 'bot' ? 'BOT' : 'USR'}</span>
            <span class="lane-name">${participant.name}</span>
        </div>
        <div class="lane-progress">
            <div class="lane-fill"></div>
        </div>
        <span class="lane-status">Waiting...</span>
    `;
    
    return lane;
}

function startRace() {
    if (state.race.running) return;
    
    state.race.running = true;
    state.race.stockRemaining = 500;
    elements.startRaceBtn.disabled = true;
    elements.startRaceBtn.textContent = 'Race in Progress...';
    
    // Start each participant with slight delays
    state.race.participants.forEach((participant, index) => {
        setTimeout(() => {
            runParticipant(participant);
        }, Math.random() * 500);
    });
}

function runParticipant(participant) {
    if (!state.race.running) return;
    
    const fill = participant.element.querySelector('.lane-fill');
    const statusEl = participant.element.querySelector('.lane-status');
    
    // Determine if this participant will succeed
    const willSucceed = participant.type === 'bot' 
        ? Math.random() > 0.25  // 75% bot success
        : Math.random() > 0.6;  // 40% human success
    
    // Determine failure point if failing
    const failStage = willSucceed ? -1 : Math.floor(Math.random() * 4);
    
    let currentStage = 0;
    let totalProgress = 0;
    
    const processStage = () => {
        if (!state.race.running || state.race.stockRemaining <= 0) {
            statusEl.textContent = 'Sold Out';
            statusEl.className = 'lane-status failed';
            return;
        }
        
        if (currentStage >= RACE_STAGES.length) {
            // Success!
            if (state.race.stockRemaining > 0) {
                state.race.stockRemaining--;
                elements.stockRemaining.textContent = state.race.stockRemaining;
                
                if (participant.type === 'bot') {
                    state.race.botWins++;
                    elements.botWins.textContent = state.race.botWins;
                } else {
                    state.race.humanWins++;
                    elements.humanWins.textContent = state.race.humanWins;
                }
                
                fill.style.backgroundColor = 'var(--color-success)';
                fill.style.width = '100%';
                statusEl.textContent = 'Success';
                statusEl.className = 'lane-status success';
            }
            return;
        }
        
        // Check for failure
        if (currentStage === failStage) {
            fill.style.backgroundColor = 'var(--color-error)';
            statusEl.textContent = 'Failed';
            statusEl.className = 'lane-status failed';
            return;
        }
        
        const stage = RACE_STAGES[currentStage];
        statusEl.textContent = stage.name;
        
        // Set color based on stage
        fill.style.backgroundColor = `var(--${stage.class.replace('stage-', 'color-')})`;
        if (stage.class === 'stage-queue') fill.style.backgroundColor = 'var(--color-gray-500)';
        if (stage.class === 'stage-cart') fill.style.backgroundColor = 'var(--color-gray-400)';
        if (stage.class === 'stage-captcha') fill.style.backgroundColor = 'var(--color-warning)';
        if (stage.class === 'stage-checkout') fill.style.backgroundColor = 'var(--color-info)';
        
        // Calculate duration - bots are faster
        const [minDur, maxDur] = stage.duration;
        const speedMultiplier = participant.type === 'bot' ? 0.3 : 1;
        const duration = (minDur + Math.random() * (maxDur - minDur)) * speedMultiplier;
        
        // Animate progress
        const stageProgress = 100 / RACE_STAGES.length;
        const targetProgress = totalProgress + stageProgress;
        
        animateProgress(fill, totalProgress, targetProgress, duration, () => {
            totalProgress = targetProgress;
            currentStage++;
            processStage();
        });
    };
    
    processStage();
}

function animateProgress(element, from, to, duration, callback) {
    const startTime = performance.now();
    
    const animate = (currentTime) => {
        const elapsed = currentTime - startTime;
        const progress = Math.min(elapsed / duration, 1);
        
        const currentValue = from + (to - from) * easeOutCubic(progress);
        element.style.width = `${currentValue}%`;
        
        if (progress < 1) {
            requestAnimationFrame(animate);
        } else {
            callback();
        }
    };
    
    requestAnimationFrame(animate);
}

function easeOutCubic(x) {
    return 1 - Math.pow(1 - x, 3);
}

function resetRace() {
    state.race.running = false;
    state.race.botWins = 0;
    state.race.humanWins = 0;
    state.race.stockRemaining = 500;
    
    elements.botWins.textContent = '0';
    elements.humanWins.textContent = '0';
    elements.stockRemaining.textContent = '500';
    elements.startRaceBtn.disabled = false;
    elements.startRaceBtn.textContent = 'Start Race';
    
    generateRaceLanes();
}

// ============================================
// MARKET CALCULATOR
// ============================================
function initMarketView() {
    const inputs = [
        elements.retailPriceInput,
        elements.resalePriceInput,
        elements.platformFeesInput,
        elements.shippingCostInput
    ];
    
    inputs.forEach(input => {
        input.addEventListener('input', calculateProfit);
    });
    
    // Initial calculation
    calculateProfit();
    
    // Draw simple chart
    drawPriceChart();
}

function calculateProfit() {
    const retail = parseFloat(elements.retailPriceInput.value) || 0;
    const resale = parseFloat(elements.resalePriceInput.value) || 0;
    const feePercent = parseFloat(elements.platformFeesInput.value) || 0;
    const shipping = parseFloat(elements.shippingCostInput.value) || 0;
    
    const gross = resale - retail;
    const platformFee = resale * (feePercent / 100);
    const totalFees = platformFee + shipping;
    const net = gross - totalFees;
    const roiPercent = retail > 0 ? (net / retail) * 100 : 0;
    
    elements.grossProfit.textContent = `$${gross.toFixed(2)}`;
    elements.totalFees.textContent = `-$${totalFees.toFixed(2)}`;
    elements.netProfit.textContent = `$${net.toFixed(2)}`;
    elements.roi.textContent = `${roiPercent.toFixed(1)}%`;
    
    // Update colors
    elements.netProfit.style.color = net >= 0 ? 'var(--color-success)' : 'var(--color-error)';
}

function drawPriceChart() {
    const canvas = document.getElementById('price-chart');
    if (!canvas) return;
    
    const ctx = canvas.getContext('2d');
    const container = canvas.parentElement;
    
    // Set canvas size
    canvas.width = container.clientWidth;
    canvas.height = container.clientHeight;
    
    const width = canvas.width;
    const height = canvas.height;
    const padding = 40;
    
    // Clear canvas
    ctx.fillStyle = '#171717';
    ctx.fillRect(0, 0, width, height);
    
    // Generate price data (simulated over 30 days)
    const days = 30;
    const retailPrice = 180;
    const data = [];
    
    for (let i = 0; i <= days; i++) {
        // Price starts high (hype), drops, then stabilizes
        let price;
        if (i === 0) {
            price = retailPrice * 3; // Day 1: 3x retail
        } else if (i < 7) {
            price = retailPrice * (2.5 - (i * 0.15)); // First week decline
        } else if (i < 14) {
            price = retailPrice * (1.8 + Math.random() * 0.3); // Stabilization
        } else {
            price = retailPrice * (1.5 + Math.random() * 0.4); // Long term
        }
        data.push({ day: i, price: price });
    }
    
    // Calculate scales
    const maxPrice = Math.max(...data.map(d => d.price));
    const minPrice = Math.min(...data.map(d => d.price), retailPrice * 0.9);
    const xScale = (width - padding * 2) / days;
    const yScale = (height - padding * 2) / (maxPrice - minPrice);
    
    // Draw grid
    ctx.strokeStyle = '#262626';
    ctx.lineWidth = 1;
    
    for (let i = 0; i <= 5; i++) {
        const y = padding + (height - padding * 2) * (i / 5);
        ctx.beginPath();
        ctx.moveTo(padding, y);
        ctx.lineTo(width - padding, y);
        ctx.stroke();
    }
    
    // Draw retail price line
    const retailY = height - padding - (retailPrice - minPrice) * yScale;
    ctx.strokeStyle = '#525252';
    ctx.setLineDash([5, 5]);
    ctx.beginPath();
    ctx.moveTo(padding, retailY);
    ctx.lineTo(width - padding, retailY);
    ctx.stroke();
    ctx.setLineDash([]);
    
    // Label retail price
    ctx.fillStyle = '#737373';
    ctx.font = '12px Inter';
    ctx.fillText('Retail: $180', padding + 5, retailY - 5);
    
    // Draw price line
    ctx.strokeStyle = '#ffffff';
    ctx.lineWidth = 2;
    ctx.beginPath();
    
    data.forEach((point, i) => {
        const x = padding + point.day * xScale;
        const y = height - padding - (point.price - minPrice) * yScale;
        
        if (i === 0) {
            ctx.moveTo(x, y);
        } else {
            ctx.lineTo(x, y);
        }
    });
    
    ctx.stroke();
    
    // Draw dots
    data.forEach((point, i) => {
        if (i % 5 === 0 || i === days) {
            const x = padding + point.day * xScale;
            const y = height - padding - (point.price - minPrice) * yScale;
            
            ctx.fillStyle = '#ffffff';
            ctx.beginPath();
            ctx.arc(x, y, 4, 0, Math.PI * 2);
            ctx.fill();
        }
    });
    
    // X-axis labels
    ctx.fillStyle = '#737373';
    ctx.font = '11px Inter';
    ctx.textAlign = 'center';
    
    [0, 7, 14, 21, 30].forEach(day => {
        const x = padding + day * xScale;
        ctx.fillText(`Day ${day}`, x, height - 10);
    });
    
    // Y-axis labels
    ctx.textAlign = 'right';
    for (let i = 0; i <= 5; i++) {
        const price = minPrice + (maxPrice - minPrice) * (1 - i / 5);
        const y = padding + (height - padding * 2) * (i / 5);
        ctx.fillText(`$${Math.round(price)}`, padding - 8, y + 4);
    }
    
    // Title
    ctx.fillStyle = '#ffffff';
    ctx.font = 'bold 14px Inter';
    ctx.textAlign = 'left';
    ctx.fillText('Resale Price Over Time', padding, 20);
}

// ============================================
// INITIALIZATION
// ============================================
function init() {
    initNavigation();
    initDropSimulation();
    initRaceView();
    initMarketView();
    
    // Handle window resize for chart
    window.addEventListener('resize', () => {
        if (state.currentView === 'market') {
            drawPriceChart();
        }
    });
}

// Start the app
document.addEventListener('DOMContentLoaded', init);