/**
 * HuSNS - 地图弹窗模块
 * 显示位置信息和地图
 */

var HuSNS = window.HuSNS || {};

/**
 * 显示位置地图弹窗
 * @param {string} name - 位置名称
 * @param {string} lat - 纬度
 * @param {string} lng - 经度
 */
HuSNS.showLocationMap = function(name, lat, lng) {
    // 创建遮罩层
    var overlay = document.createElement('div');
    overlay.className = 'location-map-overlay';
    overlay.style.cssText = [
        'position: fixed',
        'top: 0',
        'left: 0',
        'width: 100%',
        'height: 100%',
        'background: rgba(0, 0, 0, 0.7)',
        'z-index: 10000',
        'display: flex',
        'align-items: center',
        'justify-content: center'
    ].join(';');
    
    // 创建弹窗容器
    var modal = document.createElement('div');
    modal.style.cssText = [
        'width: 90%',
        'max-width: 500px',
        'background: white',
        'border-radius: 16px',
        'overflow: hidden',
        'box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3)',
        'max-height: 80vh'
    ].join(';');
    
    // 创建头部
    var header = document.createElement('div');
    header.style.cssText = [
        'padding: 16px',
        'border-bottom: 1px solid #f0f0f0',
        'display: flex',
        'justify-content: space-between',
        'align-items: center'
    ].join(';');
    header.innerHTML = 
        '<span style="font-size: 16px; font-weight: 600; color: #333;">📍 ' + HuSNS.escape(name) + '</span>' +
        '<button onclick="this.parentElement.parentElement.parentElement.remove()" style="width: 32px; height: 32px; border: none; background: #f5f5f5; border-radius: 50%; display: flex; align-items: center; justify-content: center;">' +
            '<span class="iconify" data-icon="mdi:close" style="font-size: 18px; color: #666;"></span>' +
        '</button>';
    
    // 创建地图容器
    var mapContainer = document.createElement('div');
    mapContainer.style.cssText = [
        'height: 300px',
        'position: relative',
        'background: #f5f5f5'
    ].join(';');
    
    if (lat && lng) {
        mapContainer.innerHTML = HuSNS.createMockMapHTML(lat, lng);
    } else {
        mapContainer.innerHTML = HuSNS.createEmptyMapHTML();
    }
    
    // 创建底部按钮
    var footer = document.createElement('div');
    footer.style.cssText = [
        'padding: 12px 16px',
        'display: flex',
        'gap: 12px'
    ].join(';');
    
    var openBtn = document.createElement('button');
    openBtn.textContent = '在地图应用中打开';
    openBtn.style.cssText = [
        'flex: 1',
        'padding: 10px',
        'background: #2196F3',
        'color: white',
        'border: none',
        'border-radius: 8px',
        'font-size: 14px'
    ].join(';');
    openBtn.onclick = function() {
        if (lat && lng) {
            var schemes = [
                'geo:' + lat + ',' + lng,
                'maps://maps.google.com/maps?q=' + lat + ',' + lng,
                'comgooglemaps://?q=' + lat + ',' + lng
            ];
            window.location.href = schemes[0];
            setTimeout(function() {
                window.open('https://maps.google.com/maps?q=' + lat + ',' + lng + '&z=15', '_blank');
            }, 500);
        }
    };
    
    var closeBtn = document.createElement('button');
    closeBtn.textContent = '关闭';
    closeBtn.style.cssText = [
        'flex: 1',
        'padding: 10px',
        'background: #f5f5f5',
        'color: #666',
        'border: none',
        'border-radius: 8px',
        'font-size: 14px'
    ].join(';');
    closeBtn.onclick = function() {
        overlay.remove();
    };
    
    footer.appendChild(openBtn);
    footer.appendChild(closeBtn);
    
    // 组装弹窗
    modal.appendChild(header);
    modal.appendChild(mapContainer);
    modal.appendChild(footer);
    overlay.appendChild(modal);
    
    // 点击遮罩关闭
    overlay.onclick = function(e) {
        if (e.target === overlay) {
            overlay.remove();
        }
    };
    
    // ESC键关闭
    var handleEsc = function(e) {
        if (e.key === 'Escape') {
            overlay.remove();
            document.removeEventListener('keydown', handleEsc);
        }
    };
    document.addEventListener('keydown', handleEsc);
    
    document.body.appendChild(overlay);
};

/**
 * 创建模拟地图HTML
 * @param {string} lat - 纬度
 * @param {string} lng - 经度
 * @returns {string} 地图HTML
 */
HuSNS.createMockMapHTML = function(lat, lng) {
    return '<div style="width: 100%; height: 100%; background: linear-gradient(135deg, #87CEEB 0%, #E0F7FA 50%, #81D4FA 100%); position: relative; overflow: hidden;">' +
        '<!-- 地图网格 -->' +
        '<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px); background-size: 20px 20px;"></div>' +
        '<!-- 道路 -->' +
        '<div style="position: absolute; top: 30%; left: 0; right: 0; height: 3px; background: rgba(139, 195, 74, 0.6);"></div>' +
        '<div style="position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: rgba(139, 195, 74, 0.6);"></div>' +
        '<div style="position: absolute; top: 60%; left: 20%; right: 30%; height: 2px; background: rgba(139, 195, 74, 0.4); transform: rotate(-15deg);"></div>' +
        '<div style="position: absolute; top: 40%; left: 10%; right: 60%; height: 2px; background: rgba(139, 195, 74, 0.4); transform: rotate(10deg);"></div>' +
        '<!-- 定位标记 -->' +
        '<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">' +
            '<div style="width: 40px; height: 40px; background: #fff; border-radius: 50%; box-shadow: 0 4px 12px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center;">' +
                '<div style="width: 24px; height: 24px; background: #E53935; border-radius: 50%; display: flex; align-items: center; justify-content: center;">' +
                    '<svg viewBox="0 0 24 24" fill="#fff" style="width: 14px; height: 14px;">' +
                        '<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>' +
                    '</svg>' +
                '</div>' +
            '</div>' +
        '</div>' +
        '<!-- 提示 -->' +
        '<div style="position: absolute; bottom: 10px; right: 10px; background: rgba(255,255,255,0.9); padding: 4px 8px; border-radius: 4px; font-size: 12px; color: #666;">' +
            '点击"在地图应用中打开"查看完整地图' +
        '</div>' +
    '</div>';
};

/**
 * 创建空地图HTML
 * @returns {string} 空地图HTML
 */
HuSNS.createEmptyMapHTML = function() {
    return '<div style="width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #999;">' +
        '<svg viewBox="0 0 24 24" fill="currentColor" style="width: 48px; height: 48px; margin-bottom: 12px;">' +
            '<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>' +
        '</svg>' +
        '<span style="font-size: 14px;">暂无精确位置信息</span>' +
    '</div>';
};

// 全局暴露
window.HuSNS = HuSNS;