// Configuration - Replace with your API keys or run in demo mode
const CONFIG = {
    DEMO_MODE: true,
    MAP_TILES_KEY: 'pk.yourmapboxkeyhere',
    GEOCODING_KEY: 'yourgeocodingkeyhere',
    ROUTING_KEY: 'yourroutingkeyhere',
    TRAFFIC_KEY: 'yourtraffickeyhere',
    WEATHER_KEY: 'yourweatherapikeyhere',
    DEFAULT_MIATA_COLOR: '#EF4444', // Tailwind red-500
    OFFLINE_REGIONS: ['ontario'], // Default offline regions
    REROUTE_THRESHOLD: 5, // minutes
    ROUTE_PREFERENCES: {
        avoidTolls: false,
        avoidHighways: false,
        avoidFerries: true,
        preferScenic: false
    }
};

// Voice Commands System
class VoiceNavigation {
    constructor() {
        this.commands = {
            'take me home': () => this.navigateTo('home'),
            'add stop for gas': () => this.addStop('gas station'),
            'avoid highways': () => this.setPreference('avoidHighways', true),
            'find coffee': () => this.searchAlongRoute('coffee'),
            'mute guidance': () => this.toggleVoice(false)
        };
    }

    processCommand(command) {
        const handler = this.commands[command.toLowerCase()];
        if (handler) handler();
    }

    // Command implementations would go here
    // (Actual implementations would interact with routing system)
}
// Demo Map Initialization
function initDemoMap() {
    if (CONFIG.DEMO_MODE) {
        // Mock map initialization for demo purposes
        document.getElementById('map').innerHTML = `
            <div class="absolute inset-0 bg-gray-900 flex items-center justify-center">
                <div class="text-center">
                    <div class="text-2xl font-semibold mb-2">Miata Nav OS</div>
                    <div class="text-gray-400">Running in Demo Mode</div>
                    <div class="mt-4 text-sm text-gray-500">Connect to internet for live maps</div>
                </div>
            </div>
        `;
    } else {
        mapboxgl.accessToken = CONFIG.MAP_TILES_KEY;
        const map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/dark-v10',
            center: [-73.985664, 40.748514], // Default center (NYC)
            zoom: 14,
            pitch: 45,
            antialias: true
        });
        
        // Add Miata navigation marker
        const el = document.createElement('div');
        el.className = 'miata-icon';
        el.style.width = '40px';
        el.style.height = '40px';
        el.style.backgroundImage = `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 50"><path fill="${encodeURIComponent(CONFIG.DEFAULT_MIATA_COLOR)}" d="M85,25c0,10-35,15-35,15S15,35,15,25s35-15,35-15S85,15,85,25z"/></svg>')`;
        el.style.backgroundSize = 'contain';
        el.style.backgroundRepeat = 'no-repeat';
        
        new mapboxgl.Marker(el)
            .setLngLat([-73.985664, 40.748514])
            .addTo(map);
    }
}

// Event Listeners Setup
function setupEventListeners() {
    // Simulate offline mode toggle for demo
    setTimeout(() => {
        document.getElementById('offline-indicator').classList.toggle('hidden');
    }, 3000);

    // Navigation buttons
    document.querySelectorAll('.nav-icon').forEach(button => {
        button.addEventListener('click', () => {
            document.querySelectorAll('.nav-icon').forEach(btn => btn.classList.remove('active'));
            button.classList.add('active');
            // In a real app, this would switch between views
        });
    });
}

// Mock API functions for demo mode
function getRouteSuggestions(destination) {
    return [
        { id: 1, name: "Fastest", time: "32 min", distance: "15.2 mi", trafficDelay: "3 min", backroadScore: 2 },
        { id: 2, name: "Scenic", time: "38 min", distance: "18.7 mi", trafficDelay: "1 min", backroadScore: 8 },
        { id: 3, name: "Efficient", time: "35 min", distance: "16.5 mi", trafficDelay: "2 min", backroadScore: 5 }
    ];
}