{% extends 'base/base.html' %}
{% load static %}

{% block title %}{{ page_title }} - ThrillWiki{% endblock %}

{% block extra_head %}
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<!-- Leaflet MarkerCluster CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css" />

<style>
.map-container {
    height: 75vh;
    min-height: 600px;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.park-status-badge {
    @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium;
}

.park-status-operating {
    @apply bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100;
}

.park-status-closed {
    @apply bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100;
}

.park-status-construction {
    @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100;
}

.park-status-demolished {
    @apply bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-100;
}

.park-marker {
    background: transparent;
    border: none;
}

.park-marker-inner {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 18px;
    border: 3px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.park-marker-operating {
    background: #10b981;
}

.park-marker-closed {
    background: #ef4444;
}

.park-marker-construction {
    background: #f59e0b;
}

.park-marker-demolished {
    background: #6b7280;
}

.park-info-popup {
    max-width: 350px;
}

.park-info-popup h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.2rem;
    font-weight: 600;
}

.park-info-popup .park-meta {
    margin: 0.25rem 0;
    font-size: 0.9rem;
    color: #666;
}

.dark .park-info-popup .park-meta {
    color: #ccc;
}

.quick-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.quick-stat-card {
    @apply bg-white dark:bg-gray-800 rounded-lg p-4 text-center shadow-sm;
}

.quick-stat-value {
    @apply text-2xl font-bold text-blue-600 dark:text-blue-400;
}

.quick-stat-label {
    @apply text-sm text-gray-600 dark:text-gray-400 mt-1;
}
</style>
{% endblock %}

{% block content %}
<div class="container px-4 mx-auto">
    <!-- Header -->
    <div class="flex flex-col items-start justify-between gap-4 mb-6 md:flex-row md:items-center">
        <div>
            <h1 class="text-3xl font-bold text-gray-900 dark:text-white">{{ page_title }}</h1>
            <p class="mt-2 text-gray-600 dark:text-gray-400">
                Discover theme parks and amusement parks worldwide
            </p>
        </div>
        <div class="flex gap-3">
            <a href="{% url 'maps:universal_map' %}" 
               class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition-colors">
                <i class="mr-2 fas fa-globe"></i>All Locations
            </a>
            <a href="{% url 'parks:roadtrip_planner' %}" 
               class="px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-lg hover:bg-green-700 transition-colors">
                <i class="mr-2 fas fa-route"></i>Plan Road Trip
            </a>
            <a href="{% url 'parks:park_list' %}" 
               class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition-colors">
                <i class="mr-2 fas fa-list"></i>List View
            </a>
        </div>
    </div>

    <!-- Quick Stats -->
    <div class="quick-stats mb-6" id="park-stats">
        <div class="quick-stat-card">
            <div class="quick-stat-value" id="total-parks">-</div>
            <div class="quick-stat-label">Total Parks</div>
        </div>
        <div class="quick-stat-card">
            <div class="quick-stat-value" id="operating-parks">-</div>
            <div class="quick-stat-label">Operating</div>
        </div>
        <div class="quick-stat-card">
            <div class="quick-stat-value" id="countries-count">-</div>
            <div class="quick-stat-label">Countries</div>
        </div>
        <div class="quick-stat-card">
            <div class="quick-stat-value" id="total-rides">-</div>
            <div class="quick-stat-label">Total Rides</div>
        </div>
    </div>

    <!-- Filters Panel -->
    <div class="p-4 mb-6 bg-white rounded-lg shadow dark:bg-gray-800">
        <form id="park-filters" 
              hx-get="{% url 'maps:htmx_filter' %}"
              hx-trigger="change, submit"
              hx-target="#map-container"
              hx-swap="none"
              hx-push-url="false">
            
            <!-- Hidden input to specify park-only filtering -->
            <input type="hidden" name="types" value="park">
            
            <div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2 lg:grid-cols-4">
                <!-- Search -->
                <div>
                    <label for="search" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Search Parks</label>
                    <input type="text" name="q" id="search" 
                           class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                           placeholder="Search park names..."
                           hx-get="{% url 'maps:htmx_search' %}"
                           hx-trigger="input changed delay:500ms"
                           hx-target="#search-results"
                           hx-indicator="#search-loading">
                </div>
                
                <!-- Country -->
                <div>
                    <label for="country" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Country</label>
                    <input type="text" name="country" id="country" 
                           class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                           placeholder="Filter by country...">
                </div>
                
                <!-- State/Region -->
                <div>
                    <label for="state" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">State/Region</label>
                    <input type="text" name="state" id="state" 
                           class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                           placeholder="Filter by state...">
                </div>
                
                <!-- Clustering Toggle -->
                <div class="flex items-end">
                    <label class="flex items-center cursor-pointer">
                        <input type="checkbox" name="cluster" value="true" id="cluster-toggle" 
                               class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700" 
                               checked>
                        <span class="ml-2 text-sm font-medium text-gray-700 dark:text-gray-300">Group Nearby Parks</span>
                    </label>
                </div>
            </div>

            <!-- Park Status Filters -->
            <div class="mb-4">
                <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Park Status</label>
                <div class="flex flex-wrap gap-2">
                    <label class="park-status-badge park-status-operating cursor-pointer">
                        <input type="checkbox" name="park_status" value="OPERATING" class="hidden status-checkbox" checked>
                        <i class="mr-1 fas fa-check-circle"></i>Operating
                    </label>
                    <label class="park-status-badge park-status-closed cursor-pointer">
                        <input type="checkbox" name="park_status" value="CLOSED_TEMP" class="hidden status-checkbox">
                        <i class="mr-1 fas fa-clock"></i>Temporarily Closed
                    </label>
                    <label class="park-status-badge park-status-closed cursor-pointer">
                        <input type="checkbox" name="park_status" value="CLOSED_PERM" class="hidden status-checkbox">
                        <i class="mr-1 fas fa-times-circle"></i>Permanently Closed
                    </label>
                    <label class="park-status-badge park-status-construction cursor-pointer">
                        <input type="checkbox" name="park_status" value="UNDER_CONSTRUCTION" class="hidden status-checkbox">
                        <i class="mr-1 fas fa-hard-hat"></i>Under Construction
                    </label>
                    <label class="park-status-badge park-status-demolished cursor-pointer">
                        <input type="checkbox" name="park_status" value="DEMOLISHED" class="hidden status-checkbox">
                        <i class="mr-1 fas fa-ban"></i>Demolished
                    </label>
                </div>
            </div>
        </form>

        <!-- Search Results -->
        <div id="search-results" class="mt-4"></div>
        <div id="search-loading" class="htmx-indicator">
            <div class="flex items-center justify-center p-4">
                <div class="w-6 h-6 border-2 border-blue-500 rounded-full border-t-transparent animate-spin"></div>
                <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">Searching parks...</span>
            </div>
        </div>
    </div>

    <!-- Map Container -->
    <div class="relative">
        <div id="map-container" class="map-container"></div>
        
        <!-- Map Loading Indicator -->
        <div id="map-loading" class="htmx-indicator absolute inset-0 flex items-center justify-center bg-gray-100 dark:bg-gray-800 rounded-lg">
            <div class="text-center">
                <div class="w-8 h-8 mx-auto mb-4 border-4 border-blue-500 rounded-full border-t-transparent animate-spin"></div>
                <p class="text-sm text-gray-600 dark:text-gray-400">Loading park data...</p>
            </div>
        </div>
    </div>

    <!-- Location Details Modal -->
    <div id="location-modal" class="fixed inset-0 z-50 hidden">
        <!-- Modal content will be loaded here via HTMX -->
    </div>
</div>
{% endblock %}

{% block extra_js %}
<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<!-- Leaflet MarkerCluster JS -->
<script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>

<script>
// Park-specific map class
class ParkMap {
    constructor(containerId, options = {}) {
        this.containerId = containerId;
        this.options = {
            center: [39.8283, -98.5795],
            zoom: 4,
            enableClustering: true,
            ...options
        };
        this.map = null;
        this.markers = new L.MarkerClusterGroup({
            maxClusterRadius: 50,
            spiderfyOnMaxZoom: true,
            showCoverageOnHover: false
        });
        this.currentData = [];
        this.init();
    }
    
    init() {
        // Initialize the map
        this.map = L.map(this.containerId, {
            center: this.options.center,
            zoom: this.options.zoom,
            zoomControl: false
        });
        
        // Add custom zoom control
        L.control.zoom({
            position: 'bottomright'
        }).addTo(this.map);
        
        // Add tile layers with dark mode support
        const lightTiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        });
        
        const darkTiles = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
            attribution: '© OpenStreetMap contributors, © CARTO'
        });
        
        // Set initial tiles based on theme
        if (document.documentElement.classList.contains('dark')) {
            darkTiles.addTo(this.map);
        } else {
            lightTiles.addTo(this.map);
        }
        
        // Listen for theme changes
        this.observeThemeChanges(lightTiles, darkTiles);
        
        // Add markers cluster group
        this.map.addLayer(this.markers);
        
        // Bind map events
        this.bindEvents();
        
        // Load initial data
        this.loadMapData();
    }
    
    observeThemeChanges(lightTiles, darkTiles) {
        const observer = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                if (mutation.attributeName === 'class') {
                    if (document.documentElement.classList.contains('dark')) {
                        this.map.removeLayer(lightTiles);
                        this.map.addLayer(darkTiles);
                    } else {
                        this.map.removeLayer(darkTiles);
                        this.map.addLayer(lightTiles);
                    }
                }
            });
        });
        
        observer.observe(document.documentElement, {
            attributes: true,
            attributeFilter: ['class']
        });
    }
    
    bindEvents() {
        // Update map when bounds change
        this.map.on('moveend zoomend', () => {
            this.updateMapBounds();
        });
        
        // Handle filter form changes
        document.getElementById('park-filters').addEventListener('htmx:afterRequest', (event) => {
            if (event.detail.successful) {
                this.loadMapData();
            }
        });
    }
    
    loadMapData() {
        try {
            document.getElementById('map-loading').style.display = 'flex';
            
            const formData = new FormData(document.getElementById('park-filters'));
            const queryParams = {};
            
            // Add form data to params
            for (let [key, value] of formData.entries()) {
                queryParams[key] = value;
            }
            
            // Add map bounds
            const bounds = this.map.getBounds();
            queryParams.north = bounds.getNorth();
            queryParams.south = bounds.getSouth();
            queryParams.east = bounds.getEast();
            queryParams.west = bounds.getWest();
            queryParams.zoom = this.map.getZoom();
            
            // Create temporary form for HTMX request
            const tempForm = document.createElement('form');
            tempForm.setAttribute('hx-get', '{{ map_api_urls.locations }}');
            tempForm.setAttribute('hx-vals', JSON.stringify(queryParams));
            tempForm.setAttribute('hx-trigger', 'submit');
            tempForm.setAttribute('hx-swap', 'none');
            
            tempForm.addEventListener('htmx:afterRequest', (event) => {
                try {
                    const data = JSON.parse(event.detail.xhr.responseText);
                    
                    if (data.status === 'success') {
                        this.updateMarkers(data.data);
                        this.updateStats(data.data);
                    } else {
                        console.error('Park data error:', data.message);
                    }
                } catch (error) {
                    console.error('Failed to load park data:', error);
                } finally {
                    document.getElementById('map-loading').style.display = 'none';
                    document.body.removeChild(tempForm);
                }
            });
            
            tempForm.addEventListener('htmx:error', (event) => {
                console.error('Failed to load park data:', event.detail.error);
                document.getElementById('map-loading').style.display = 'none';
                document.body.removeChild(tempForm);
            });
            
            document.body.appendChild(tempForm);
            htmx.trigger(tempForm, 'submit');
        } catch (error) {
            console.error('Failed to load park data:', error);
            document.getElementById('map-loading').style.display = 'none';
        }
    }
    
    updateStats(data) {
        // Update quick stats
        const totalParks = (data.locations || []).length + (data.clusters || []).reduce((sum, cluster) => sum + cluster.count, 0);
        const operatingParks = (data.locations || []).filter(park => park.status === 'OPERATING').length;
        const countries = new Set((data.locations || []).map(park => park.country).filter(Boolean)).size;
        const totalRides = (data.locations || []).reduce((sum, park) => sum + (park.ride_count || 0), 0);
        
        document.getElementById('total-parks').textContent = totalParks.toLocaleString();
        document.getElementById('operating-parks').textContent = operatingParks.toLocaleString();
        document.getElementById('countries-count').textContent = countries.toLocaleString();
        document.getElementById('total-rides').textContent = totalRides.toLocaleString();
    }
    
    updateMarkers(data) {
        // Clear existing markers
        this.markers.clearLayers();
        
        // Add park markers
        if (data.locations) {
            data.locations.forEach(park => {
                this.addParkMarker(park);
            });
        }
        
        // Add cluster markers
        if (data.clusters) {
            data.clusters.forEach(cluster => {
                this.addClusterMarker(cluster);
            });
        }
    }
    
    addParkMarker(park) {
        const icon = this.getParkIcon(park.status);
        const marker = L.marker([park.latitude, park.longitude], { icon });
        
        // Create popup content
        const popupContent = this.createParkPopupContent(park);
        marker.bindPopup(popupContent, { maxWidth: 350 });
        
        // Add click handler for detailed view
        marker.on('click', () => {
            this.showParkDetails(park.id);
        });
        
        this.markers.addLayer(marker);
    }
    
    addClusterMarker(cluster) {
        const marker = L.marker([cluster.latitude, cluster.longitude], {
            icon: L.divIcon({
                className: 'cluster-marker',
                html: `<div class="cluster-marker-inner">${cluster.count}</div>`,
                iconSize: [40, 40]
            })
        });
        
        marker.bindPopup(`${cluster.count} parks in this area`);
        this.markers.addLayer(marker);
    }
    
    getParkIcon(status) {
        const statusClass = {
            'OPERATING': 'park-marker-operating',
            'CLOSED_TEMP': 'park-marker-closed',
            'CLOSED_PERM': 'park-marker-closed',
            'UNDER_CONSTRUCTION': 'park-marker-construction',
            'DEMOLISHED': 'park-marker-demolished'
        }[status] || 'park-marker-operating';
        
        return L.divIcon({
            className: 'park-marker',
            html: `<div class="park-marker-inner ${statusClass}">🎢</div>`,
            iconSize: [32, 32],
            iconAnchor: [16, 16]
        });
    }
    
    createParkPopupContent(park) {
        const statusClass = {
            'OPERATING': 'park-status-operating',
            'CLOSED_TEMP': 'park-status-closed',
            'CLOSED_PERM': 'park-status-closed',
            'UNDER_CONSTRUCTION': 'park-status-construction',
            'DEMOLISHED': 'park-status-demolished'
        }[park.status] || 'park-status-operating';
        
        return `
            <div class="park-info-popup">
                <h3>${park.name}</h3>
                <div class="park-meta">
                    <span class="park-status-badge ${statusClass}">
                        ${this.getStatusDisplayName(park.status)}
                    </span>
                </div>
                ${park.formatted_location ? `<div class="park-meta"><i class="fas fa-map-marker-alt mr-1"></i>${park.formatted_location}</div>` : ''}
                ${park.operator ? `<div class="park-meta"><i class="fas fa-building mr-1"></i>${park.operator}</div>` : ''}
                ${park.ride_count ? `<div class="park-meta"><i class="fas fa-rocket mr-1"></i>${park.ride_count} rides</div>` : ''}
                ${park.average_rating ? `<div class="park-meta"><i class="fas fa-star mr-1"></i>${park.average_rating}/10 rating</div>` : ''}
                <div class="mt-3 flex gap-2">
                    <button onclick="parkMap.showParkDetails(${park.id})" 
                            class="px-3 py-1 text-sm text-white bg-blue-600 rounded hover:bg-blue-700">
                        View Details
                    </button>
                    <a href="/parks/${park.slug}/" 
                       class="px-3 py-1 text-sm text-blue-600 border border-blue-600 rounded hover:bg-blue-50">
                        Visit Page
                    </a>
                </div>
            </div>
        `;
    }
    
    getStatusDisplayName(status) {
        const statusMap = {
            'OPERATING': 'Operating',
            'CLOSED_TEMP': 'Temporarily Closed',
            'CLOSED_PERM': 'Permanently Closed',
            'UNDER_CONSTRUCTION': 'Under Construction',
            'DEMOLISHED': 'Demolished'
        };
        return statusMap[status] || 'Unknown';
    }
    
    showParkDetails(parkId) {
        // Create temporary form for HTMX request
        const tempForm = document.createElement('form');
        tempForm.setAttribute('hx-get', `{% url 'maps:htmx_location_detail' 'park' 0 %}`.replace('0', parkId));
        tempForm.setAttribute('hx-target', '#location-modal');
        tempForm.setAttribute('hx-swap', 'innerHTML');
        tempForm.setAttribute('hx-trigger', 'submit');
        
        tempForm.addEventListener('htmx:afterRequest', (event) => {
            if (event.detail.successful) {
                document.getElementById('location-modal').classList.remove('hidden');
            }
            document.body.removeChild(tempForm);
        });
        
        tempForm.addEventListener('htmx:error', (event) => {
            console.error('Failed to load park details:', event.detail.error);
            document.body.removeChild(tempForm);
        });
        
        document.body.appendChild(tempForm);
        htmx.trigger(tempForm, 'submit');
    }
    
    updateMapBounds() {
        // Reload data when the map moves significantly
        clearTimeout(this.boundsUpdateTimeout);
        this.boundsUpdateTimeout = setTimeout(() => {
            this.loadMapData();
        }, 1000);
    }
}

// Initialize map when page loads
document.addEventListener('DOMContentLoaded', function() {
    window.parkMap = new ParkMap('map-container', {
        enableClustering: {{ enable_clustering|yesno:"true,false" }}
    });
    
    // Handle status filter toggles
    document.querySelectorAll('.park-status-badge').forEach(badge => {
        const checkbox = badge.querySelector('input[type="checkbox"]');
        
        // Set initial state
        if (checkbox && checkbox.checked) {
            badge.style.opacity = '1';
        } else if (checkbox) {
            badge.style.opacity = '0.5';
        }
        
        badge.addEventListener('click', () => {
            if (checkbox) {
                checkbox.checked = !checkbox.checked;
                badge.style.opacity = checkbox.checked ? '1' : '0.5';
                
                // Trigger form change
                document.getElementById('park-filters').dispatchEvent(new Event('change'));
            }
        });
    });
    
    // Close modal handler
    document.addEventListener('click', (e) => {
        if (e.target.id === 'location-modal') {
            document.getElementById('location-modal').classList.add('hidden');
        }
    });
});
</script>

<style>
.cluster-marker {
    background: transparent;
    border: none;
}

.cluster-marker-inner {
    background: #3b82f6;
    color: white;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    border: 3px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.dark .cluster-marker-inner {
    border-color: #374151;
}
</style>
{% endblock %}