@extends('layouts.app')

@section('content')
<div class="page-header mb-4">
    <h3>Global Weather Monitoring</h3>
    <p>Real-time weather conditions at key supply chain hubs · Powered by Open-Meteo (no API key required)</p>
</div>

<div class="row g-3 mb-4">
    {{-- Location cards --}}
    @foreach($locations as $loc)
    <div class="col-6 col-md-4 col-lg-2">
        <div class="card h-100 text-center p-3"
             style="cursor:pointer; transition:.2s;"
             onclick="flyTo({{ $loc['lat'] }}, {{ $loc['lon'] }}, '{{ $loc['name'] }}', '{{ $loc['country'] }}')"
             onmouseenter="this.style.borderColor='rgba(0,210,255,.5)'"
             onmouseleave="this.style.borderColor='rgba(255,255,255,.08)'">
            @if($loc['weather'])
                @php
                    $w = $loc['weather'];
                    $icon = $w['risk'] >= 80 ? 'bi-lightning-charge-fill text-danger'
                          : ($w['risk'] >= 50 ? 'bi-cloud-rain-fill text-warning'
                          : ($w['risk'] >= 30 ? 'bi-cloud-fill text-info'
                          : 'bi-sun-fill text-warning'));
                @endphp
                <i class="bi {{ $icon }}" style="font-size:1.8rem;"></i>
                <div class="fw-bold mt-2" style="font-size:1.3rem;">{{ $w['temp'] }}°C</div>
                <div style="font-size:.72rem; color:#00d2ff;" class="fw-semibold">{{ $loc['name'] }}</div>
                <div style="font-size:.68rem; color:#5a8099;">{{ $loc['country'] }}</div>
                <div style="font-size:.7rem; color:#8899aa; margin-top:4px;">{{ $w['label'] }}</div>
                <div class="mt-2">
                    <span class="badge" style="font-size:.65rem;
                        background:{{ $w['risk'] >= 70 ? 'rgba(220,53,69,.2)' : ($w['risk'] >= 40 ? 'rgba(255,193,7,.2)' : 'rgba(40,199,111,.2)') }};
                        color:{{ $w['risk'] >= 70 ? '#ff6b6b' : ($w['risk'] >= 40 ? '#ffcc33' : '#28c76f') }};">
                        Risk {{ $w['risk'] }}
                    </span>
                </div>
            @else
                <i class="bi bi-cloud-slash" style="font-size:1.8rem; color:#5a8099;"></i>
                <div class="fw-bold mt-2" style="font-size:.85rem; color:#5a8099;">Unavailable</div>
                <div style="font-size:.72rem; color:#00d2ff;" class="fw-semibold">{{ $loc['name'] }}</div>
                <div style="font-size:.68rem; color:#5a8099;">{{ $loc['country'] }}</div>
            @endif
        </div>
    </div>
    @endforeach
</div>

<div class="row g-3">
    {{-- Map --}}
    <div class="col-lg-8">
        <div class="card">
            <div class="card-body p-2">
                <div class="d-flex justify-content-between align-items-center px-2 pb-2">
                    <span class="fw-semibold" style="font-size:.85rem;">
                        <i class="bi bi-map me-1 text-info"></i> Weather Map
                    </span>
                    <span id="map-location-label" style="font-size:.75rem; color:#5a8099;">Click a hub card to focus</span>
                </div>
                <div id="weather-map" style="height:420px; border-radius:10px;"></div>
            </div>
        </div>
    </div>

    {{-- Right panel: custom location + hourly forecast --}}
    <div class="col-lg-4 d-flex flex-column gap-3">

        {{-- Global City/Country Search --}}
        <div class="card">
            <div class="card-body">
                <div class="fw-semibold mb-3" style="font-size:.8rem; color:#5a8099; text-transform:uppercase; letter-spacing:1px;">
                    <i class="bi bi-globe me-1"></i> Search Any City/Country Worldwide
                </div>
                
                <div class="input-group mb-2">
                    <input id="city-search-input" type="text" class="form-control" 
                           placeholder="Search: Tokyo, New York, Paris, etc..."
                           style="font-size:.85rem;">
                    <button id="btn-search-city" class="btn btn-accent px-4">
                        <i class="bi bi-search me-1"></i> Search
                    </button>
                </div>
                
                <div id="search-results" class="d-none mb-2" style="max-height:150px; overflow-y:auto;">
                    <!-- Search results will appear here -->
                </div>
                
                <div class="d-flex gap-2 mb-2" style="flex-wrap:wrap;">
                    <button class="btn btn-sm" style="background:rgba(0,210,255,.1); color:#00d2ff; font-size:.7rem;" 
                            onclick="quickSearch('London')">London</button>
                    <button class="btn btn-sm" style="background:rgba(0,210,255,.1); color:#00d2ff; font-size:.7rem;" 
                            onclick="quickSearch('New York')">New York</button>
                    <button class="btn btn-sm" style="background:rgba(0,210,255,.1); color:#00d2ff; font-size:.7rem;" 
                            onclick="quickSearch('Tokyo')">Tokyo</button>
                    <button class="btn btn-sm" style="background:rgba(0,210,255,.1); color:#00d2ff; font-size:.7rem;" 
                            onclick="quickSearch('Sydney')">Sydney</button>
                    <button class="btn btn-sm" style="background:rgba(0,210,255,.1); color:#00d2ff; font-size:.7rem;" 
                            onclick="quickSearch('Mumbai')">Mumbai</button>
                    <button class="btn btn-sm" style="background:rgba(0,210,255,.1); color:#00d2ff; font-size:.7rem;" 
                            onclick="quickSearch('Cairo')">Cairo</button>
                </div>
                
                <small class="text-muted" style="font-size:.7rem;">
                    <i class="bi bi-info-circle me-1"></i> Search any city, country, or address globally
                </small>
            </div>
        </div>

        {{-- Custom coordinates --}}
        <div class="card">
            <div class="card-body">
                <div class="fw-semibold mb-3" style="font-size:.8rem; color:#5a8099; text-transform:uppercase; letter-spacing:1px;">
                    <i class="bi bi-geo-alt me-1"></i> Or Use Custom Coordinates
                </div>
                <div class="row g-2 mb-2">
                    <div class="col-6">
                        <input id="custom-lat" type="number" step="0.01" class="form-control" placeholder="Latitude" value="-6.21">
                    </div>
                    <div class="col-6">
                        <input id="custom-lon" type="number" step="0.01" class="form-control" placeholder="Longitude" value="106.85">
                    </div>
                </div>
                <button id="btn-fetch-weather" class="btn btn-accent w-100">
                    <i class="bi bi-search me-1"></i> Fetch Weather
                </button>

                <div id="custom-weather-result" class="mt-3 d-none">
                    <div id="current-location-name" class="mb-2" style="font-size:.85rem; color:#00d2ff; font-weight:600;">
                        <!-- Location name will appear here -->
                    </div>
                    <div class="d-flex gap-3 align-items-center">
                        <div>
                            <div style="font-size:2.5rem; font-weight:700;" id="cw-temp">—</div>
                            <div style="font-size:.8rem; color:#5a8099;" id="cw-label">—</div>
                        </div>
                        <div style="font-size:.78rem;">
                            <div><i class="bi bi-droplet me-1 text-info"></i> <span id="cw-humidity">—</span>% humidity</div>
                            <div><i class="bi bi-wind me-1 text-warning"></i> <span id="cw-wind">—</span> km/h</div>
                            <div><i class="bi bi-cloud-rain me-1 text-primary"></i> <span id="cw-precip">—</span> mm</div>
                            <div class="mt-1">
                                <span class="badge" id="cw-risk-badge" style="font-size:.72rem;"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Hourly chart --}}
        <div class="card flex-grow-1">
            <div class="card-body">
                <div class="fw-semibold mb-3" style="font-size:.8rem; color:#5a8099; text-transform:uppercase; letter-spacing:1px;">
                    24-Hour Temperature Forecast
                </div>
                <canvas id="hourly-chart" style="max-height:200px;"></canvas>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function () {

    // ── Map ──────────────────────────────────────────────────────────────────
    const map = L.map('weather-map').setView([20, 60], 2);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap'
    }).addTo(map);
    setTimeout(() => map.invalidateSize(), 300);

    // Add markers for each monitoring location
    const locations = @json($locations);
    locations.forEach(loc => {
        if (!loc.weather) return;
        const risk  = loc.weather.risk;
        const color = risk >= 70 ? '#dc3545' : risk >= 40 ? '#ffc107' : '#28c76f';
        const marker = L.circleMarker([loc.lat, loc.lon], {
            radius: 10, fillColor: color, color: color,
            weight: 2, opacity: 1, fillOpacity: 0.7,
        }).addTo(map);
        marker.bindPopup(`
            <b>${loc.name}, ${loc.country}</b><br>
            🌡 ${loc.weather.temp}°C · ${loc.weather.label}<br>
            💨 ${loc.weather.wind} km/h · 💧 ${loc.weather.humidity}%<br>
            <span style="color:${color}">Risk: ${loc.weather.risk}</span>
        `);
    });

    // Hourly chart instance
    const hourlyCtx = document.getElementById('hourly-chart').getContext('2d');
    let hourlyChart = new Chart(hourlyCtx, {
        type: 'line',
        data: { labels: [], datasets: [{
            label: 'Temp (°C)',
            data: [],
            borderColor: '#00d2ff',
            backgroundColor: 'rgba(0,210,255,.1)',
            tension: 0.4,
            fill: true,
            pointRadius: 2,
        }, {
            label: 'Rain Prob (%)',
            data: [],
            borderColor: '#ff6b6b',
            backgroundColor: 'rgba(255,107,107,.1)',
            tension: 0.4,
            fill: false,
            pointRadius: 2,
            yAxisID: 'y2',
        }] },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: { legend: { labels: { color: '#5a8099', font: { size: 10 } } } },
            scales: {
                y:  { grid: { color: 'rgba(255,255,255,.06)' }, ticks: { color: '#5a8099', font: { size: 10 } } },
                y2: { position: 'right', min: 0, max: 100, grid: { display: false }, ticks: { color: '#ff6b6b', font: { size: 10 } } },
                x:  { grid: { display: false }, ticks: { color: '#5a8099', font: { size: 9 }, maxTicksLimit: 8 } },
            },
        }
    });

    function fetchAndUpdate(lat, lon, locationName = null) {
        fetch(`/api/weather?lat=${lat}&lon=${lon}`)
            .then(r => r.json())
            .then(d => {
                if (d.error) return;
                const c = d.current;

                // Update custom weather panel
                document.getElementById('custom-weather-result').classList.remove('d-none');
                
                // Show location name if provided
                if (locationName) {
                    document.getElementById('current-location-name').textContent = locationName;
                    document.getElementById('current-location-name').style.display = 'block';
                } else {
                    document.getElementById('current-location-name').style.display = 'none';
                }
                
                document.getElementById('cw-temp').textContent    = c.temp + '°C';
                document.getElementById('cw-label').textContent   = c.label;
                document.getElementById('cw-humidity').textContent= c.humidity;
                document.getElementById('cw-wind').textContent    = c.wind;
                document.getElementById('cw-precip').textContent  = c.precip;

                const rb = document.getElementById('cw-risk-badge');
                rb.textContent = 'Weather Risk: ' + c.risk;
                rb.style.cssText = c.risk >= 70
                    ? 'background:rgba(220,53,69,.2);color:#ff6b6b;'
                    : c.risk >= 40
                    ? 'background:rgba(255,193,7,.2);color:#ffcc33;'
                    : 'background:rgba(40,199,111,.2);color:#28c76f;';

                // Hourly chart
                const labels = d.hourly.map(h => h.time.slice(11, 16));
                const temps  = d.hourly.map(h => h.temp);
                const probs  = d.hourly.map(h => h.precip_prob);

                hourlyChart.data.labels                    = labels;
                hourlyChart.data.datasets[0].data          = temps;
                hourlyChart.data.datasets[1].data          = probs;
                hourlyChart.update();
            });
    }

    // ── Global City Search with Geocoding ───────────────────────────────────
    const searchInput = document.getElementById('city-search-input');
    const searchBtn = document.getElementById('btn-search-city');
    const searchResults = document.getElementById('search-results');
    
    function searchCity(query) {
        if (!query || query.trim().length < 2) {
            showToast('Please enter at least 2 characters', 'warning');
            return;
        }
        
        // Show loading state
        searchBtn.disabled = true;
        searchBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Searching...';
        searchResults.classList.remove('d-none');
        searchResults.innerHTML = '<div class="text-center py-2" style="color:#5a8099; font-size:.8rem;"><div class="spinner-border spinner-border-sm me-2"></div>Searching worldwide...</div>';
        
        // Use Nominatim OpenStreetMap Geocoding API (FREE, no key required)
        fetch(`https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(query)}&format=json&limit=8&addressdetails=1`, {
            headers: {
                'Accept': 'application/json',
                'User-Agent': 'NextGenZ-Weather-App'
            }
        })
        .then(response => response.json())
        .then(data => {
            searchBtn.disabled = false;
            searchBtn.innerHTML = '<i class="bi bi-search me-1"></i> Search';
            
            if (data.length === 0) {
                searchResults.innerHTML = '<div class="alert alert-warning mb-0 py-2" style="font-size:.75rem;">No locations found. Try: "Paris", "Tokyo", "New York", etc.</div>';
                return;
            }
            
            // Display results
            let resultsHtml = '<div class="list-group" style="font-size:.8rem;">';
            data.forEach((place, index) => {
                const displayName = place.display_name;
                const lat = parseFloat(place.lat);
                const lon = parseFloat(place.lon);
                const icon = place.type === 'city' ? 'bi-building' : 
                            place.type === 'country' ? 'bi-globe' : 
                            place.type === 'town' ? 'bi-house' : 'bi-geo-alt';
                
                resultsHtml += `
                    <button class="list-group-item list-group-item-action py-2" 
                            style="background:rgba(0,210,255,.05); border-color:rgba(0,210,255,.2); color:#e0e8f0; cursor:pointer; transition:all 0.2s;"
                            onmouseover="this.style.background='rgba(0,210,255,.15)'"
                            onmouseout="this.style.background='rgba(0,210,255,.05)'"
                            onclick="selectLocation(${lat}, ${lon}, '${displayName.replace(/'/g, "\\'")}')">
                        <i class="bi ${icon} me-2 text-info"></i>
                        <span style="font-size:.8rem;">${displayName}</span>
                    </button>
                `;
            });
            resultsHtml += '</div>';
            
            searchResults.innerHTML = resultsHtml;
            
            // Show success toast
            showToast(`Found ${data.length} location(s)`, 'success');
        })
        .catch(error => {
            console.error('Geocoding error:', error);
            searchBtn.disabled = false;
            searchBtn.innerHTML = '<i class="bi bi-search me-1"></i> Search';
            searchResults.innerHTML = '<div class="alert alert-danger mb-0 py-2" style="font-size:.75rem;"><i class="bi bi-exclamation-triangle me-1"></i>Search failed. Please check your internet connection.</div>';
            showToast('Search failed. Try again.', 'error');
        });
    }
    
    // Select location from search results
    window.selectLocation = function(lat, lon, displayName) {
        // Update coordinates
        document.getElementById('custom-lat').value = lat;
        document.getElementById('custom-lon').value = lon;
        
        // Fly to location on map
        map.flyTo([lat, lon], 10, { duration: 1.5 });
        
        // Update map label
        document.getElementById('map-location-label').textContent = displayName;
        
        // Fetch weather
        fetchAndUpdate(lat, lon, displayName);
        
        // Hide search results
        searchResults.classList.add('d-none');
        searchResults.innerHTML = '';
        
        // Clear search input
        searchInput.value = '';
        
        // Show success toast
        showToast('Weather loaded for ' + (displayName.length > 30 ? displayName.substring(0, 30) + '...' : displayName), 'success');
        
        // Add marker to map
        L.marker([lat, lon])
            .addTo(map)
            .bindPopup(`<b>${displayName}</b><br><small>Click "Fetch Weather" to see details</small>`)
            .openPopup();
    };
    
    // Quick search function for preset buttons
    window.quickSearch = function(cityName) {
        searchInput.value = cityName;
        searchCity(cityName);
    };
    
    // Search button click
    searchBtn.addEventListener('click', function() {
        const query = searchInput.value.trim();
        searchCity(query);
    });
    
    // Enter key in search input
    searchInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            const query = this.value.trim();
            searchCity(query);
        }
    });
    
    // Toast notification function
    function showToast(message, type = 'info') {
        const bgColor = type === 'success' ? 'rgba(40,199,111,0.9)' : 
                       type === 'error' ? 'rgba(220,53,69,0.9)' : 
                       type === 'warning' ? 'rgba(255,193,7,0.9)' : 
                       'rgba(0,210,255,0.9)';
        const icon = type === 'success' ? 'bi-check-circle' : 
                    type === 'error' ? 'bi-exclamation-triangle' : 
                    type === 'warning' ? 'bi-info-circle' : 
                    'bi-info-circle';
        
        const toast = document.createElement('div');
        toast.innerHTML = `
            <div style="position:fixed; top:20px; right:20px; z-index:9999; background:${bgColor}; color:white; padding:10px 15px; border-radius:6px; font-size:.8rem; box-shadow:0 4px 15px rgba(0,0,0,0.3); animation:slideIn 0.3s ease;">
                <i class="bi ${icon} me-2"></i>${message}
            </div>
        `;
        document.body.appendChild(toast);
        
        // Add animation
        if (!document.getElementById('toast-animation')) {
            const style = document.createElement('style');
            style.id = 'toast-animation';
            style.textContent = `
                @keyframes slideIn {
                    from { transform: translateX(400px); opacity: 0; }
                    to { transform: translateX(0); opacity: 1; }
                }
            `;
            document.head.appendChild(style);
        }
        
        setTimeout(() => {
            if (toast.parentNode) {
                toast.parentNode.removeChild(toast);
            }
        }, 3000);
    }

    // Fetch button
    document.getElementById('btn-fetch-weather').addEventListener('click', function () {
        const lat = parseFloat(document.getElementById('custom-lat').value) || -6.21;
        const lon = parseFloat(document.getElementById('custom-lon').value) || 106.85;
        map.setView([lat, lon], 6);
        fetchAndUpdate(lat, lon);
    });

    // Fly-to from hub cards
    window.flyTo = function (lat, lon, name, country) {
        map.flyTo([lat, lon], 6, { duration: 1 });
        document.getElementById('map-location-label').textContent = name + ', ' + country;
        document.getElementById('custom-lat').value = lat;
        document.getElementById('custom-lon').value = lon;
        fetchAndUpdate(lat, lon, name + ', ' + country);
    };

    // Load default on page open
    fetchAndUpdate(-6.21, 106.85, 'Jakarta, Indonesia');
});
</script>
@endpush