// 🌙 宵夜地圖 - 獨立 JS
const STORAGE_KEY = 'hesheeat_nightsnack';
let map;
let markers = [];
let shops = [];

// 初始化
document.addEventListener('DOMContentLoaded', () => {
    initMap();
    loadShops();
    renderShops();
});

function initMap() {
    map = L.map('map').setView([22.3193, 114.1694], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap'
    }).addTo(map);
    
    // 嘗試獲取用戶位置
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(pos => {
            map.setView([pos.coords.latitude, pos.coords.longitude], 15);
            L.marker([pos.coords.latitude, pos.coords.longitude])
                .addTo(map)
                .bindPopup('📍 你的位置')
                .openPopup();
        });
    }
}

function loadShops() {
    try {
        shops = JSON.parse(localStorage.getItem(STORAGE_KEY)) || [];
    } catch { shops = []; }
}

function saveShops() {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(shops));
}

function renderShops(filter = 'all') {
    const list = document.getElementById('shopList');
    const filtered = filter === 'all' ? shops : shops.filter(s => s.category === filter);
    
    // 清除舊 markers
    markers.forEach(m => map.removeLayer(m));
    markers = [];
    
    if (filtered.length === 0) {
        list.innerHTML = '<p style="text-align:center;color:#666;padding:30px;">暫無食店資料<br>點擊右上角「新增食店」添加</p>';
        return;
    }
    
    list.innerHTML = filtered.map(shop => {
        // 添加 marker
        if (shop.lat && shop.lng) {
            const marker = L.marker([shop.lat, shop.lng])
                .addTo(map)
                .bindPopup(`<b>${shop.name}</b><br>${shop.category}<br>評分: ${shop.rating}/5`);
            markers.push(marker);
        }
        
        const navLinks = generateNavLinks(shop.lat, shop.lng, shop.name);
        
        return `
            <div class="shop-card">
                <div class="shop-header">
                    <div>
                        <div class="shop-name">${shop.name}</div>
                        <div class="shop-category">${shop.category} · ${shop.openTime || '?'} - ${shop.closeTime || '?'}</div>
                    </div>
                    <div class="shop-rating">⭐ ${shop.rating}/5</div>
                </div>
                <div class="shop-info">
                    <span>📍 ${shop.address || '未提供'}</span>
                    <span>🚗 ${shop.parking}</span>
                </div>
                ${shop.recommendFood ? `<div class="shop-info">🍴 推薦：${shop.recommendFood}</div>` : ''}
                ${shop.review ? `<div class="shop-info" style="font-style:italic;">"${shop.review}"</div>` : ''}
                <div class="shop-nav">${navLinks}</div>
            </div>
        `;
    }).join('');
}

function generateNavLinks(lat, lng, name) {
    if (!lat || !lng) return '';
    const encodedName = encodeURIComponent(name || '宵夜店');
    return `
        <a href="https://www.google.com/maps/search/?api=1&query=${lat},${lng}" target="_blank" class="nav-btn">🗺️ Google</a>
        <a href="https://uri.amap.com/navigation?to=${lng},${lat},${encodedName}&mode=car" target="_blank" class="nav-btn">📍 高德</a>
        <a href="https://waze.com/ul?ll=${lat},${lng}&navigate=yes" target="_blank" class="nav-btn">🚗 Waze</a>
        <a href="http://api.map.baidu.com/direction?destination=latlng:${lat},${lng}|name:${encodedName}&mode=driving" target="_blank" class="nav-btn">🗺️ 百度</a>
    `;
}

function filterShops(category) {
    document.querySelectorAll('.filter-btn').forEach(btn => btn.classList.remove('active'));
    event.target.classList.add('active');
    renderShops(category);
}

function openModal() {
    document.getElementById('addModal').classList.add('show');
}

function closeModal() {
    document.getElementById('addModal').classList.remove('show');
}

// 提交表單
document.getElementById('shopForm').addEventListener('submit', (e) => {
    e.preventDefault();
    
    const shop = {
        id: Date.now(),
        name: document.getElementById('shopName').value,
        category: document.getElementById('shopCategory').value,
        rating: parseFloat(document.getElementById('shopRating').value) || 4,
        openTime: document.getElementById('openTime').value,
        closeTime: document.getElementById('closeTime').value,
        address: document.getElementById('shopAddress').value,
        lat: parseFloat(document.getElementById('shopLat').value) || null,
        lng: parseFloat(document.getElementById('shopLng').value) || null,
        recommendFood: document.getElementById('recommendFood').value,
        parking: document.getElementById('parking').value,
        review: document.getElementById('shopReview').value,
        created: new Date().toISOString()
    };
    
    shops.push(shop);
    saveShops();
    renderShops();
    closeModal();
    
    // 清空表單
    document.getElementById('shopForm').reset();
    document.getElementById('shopRating').value = '4';
    
    alert('✅ 新增成功！');
});