// Google Maps API 配置
let GOOGLE_MAPS_API_KEY = '';
let isDemoMode = false;

// 全域變數
let map;
let userLocation = null;
let markers = [];
let infoWindow = null;

// 台灣動物醫院資料庫
const TAIWAN_HOSPITALS = [
    // 台北市
    { name: '台北動物醫院', address: '台北市信義區信義路五段7號', phone: '02-2720-1234', rating: 4.5, price_level: 2, lat: 25.0330, lng: 121.5654, services: ['一般診療', '手術', '急診'], hours: '24小時' },
    { name: '愛心動物診所', address: '台北市大安區敦化南路二段216號', phone: '02-2700-5678', rating: 4.2, price_level: 1, lat: 25.0260, lng: 121.5500, services: ['一般診療', '疫苗', '健康檢查'], hours: '09:00-21:00' },
    { name: '寵物健康中心', address: '台北市中山區南京東路二段100號', phone: '02-2500-9999', rating: 4.8, price_level: 3, lat: 25.0520, lng: 121.5300, services: ['專科診療', '手術', '復健'], hours: '08:00-22:00' },
    { name: '台北獸醫院', address: '台北市松山區民生東路五段150號', phone: '02-2766-7890', rating: 4.3, price_level: 2, lat: 25.0570, lng: 121.5650, services: ['一般診療', '手術', '急診'], hours: '09:00-21:00' },
    { name: '和平動物醫院', address: '台北市中正區和平東路一段100號', phone: '02-2365-1234', rating: 4.6, price_level: 2, lat: 25.0250, lng: 121.5250, services: ['一般診療', '疫苗', '健康檢查'], hours: '08:00-20:00' },
    { name: '台大動物醫院', address: '台北市大安區羅斯福路四段1號', phone: '02-2365-8900', rating: 4.9, price_level: 3, lat: 25.0230, lng: 121.5350, services: ['專科診療', '手術', '教學醫院'], hours: '08:00-17:00' },
    { name: '遠見動物醫院', address: '台北市大安區敦化南路二段216號', phone: '02-2325-5678', rating: 4.4, price_level: 2, lat: 25.0300, lng: 121.5450, services: ['一般診療', '手術', '眼科'], hours: '09:00-21:00' },
    { name: '台灣大學動物醫院', address: '台北市大安區基隆路三段152號', phone: '02-2739-6828', rating: 4.7, price_level: 3, lat: 25.0170, lng: 121.5440, services: ['專科診療', '手術', '急診', '教學'], hours: '08:00-17:00' },
    { name: '台北縣永和動物醫院', address: '新北市永和區永和路二段168號', phone: '02-2926-5678', rating: 4.2, price_level: 1, lat: 25.0140, lng: 121.5150, services: ['一般診療', '疫苗'], hours: '09:00-19:00' },
    { name: '長庚動物醫院', address: '台北市松山區敦化北路199號', phone: '02-2717-1234', rating: 4.5, price_level: 2, lat: 25.0600, lng: 121.5500, services: ['一般診療', '手術', '急診'], hours: '24小時' },
    
    // 新北市
    { name: '新北市動物醫院', address: '新北市板橋區文化路一段188號', phone: '02-2250-8888', rating: 4.3, price_level: 2, lat: 25.0100, lng: 121.4600, services: ['一般診療', '急診', '疫苗'], hours: '24小時' },
    { name: '板橋動物醫院', address: '新北市板橋區中山路一段296號', phone: '02-2963-5678', rating: 4.1, price_level: 2, lat: 25.0080, lng: 121.4650, services: ['一般診療', '疫苗', '手術'], hours: '09:00-21:00' },
    { name: '中和動物診所', address: '新北市中和區景平路258號', phone: '02-2242-7890', rating: 4.0, price_level: 1, lat: 24.9990, lng: 121.5050, services: ['一般診療', '疫苗'], hours: '09:00-18:00' },
    { name: '新店獸醫院', address: '新北市新店區北新路二段100號', phone: '02-2915-3333', rating: 4.4, price_level: 2, lat: 24.9900, lng: 121.5400, services: ['一般診療', '手術'], hours: '09:00-21:00' },
    
    // 桃園市
    { name: '桃園寵物診所', address: '桃園市桃園區中正路123號', phone: '03-333-7777', rating: 4.1, price_level: 1, lat: 24.9900, lng: 121.3000, services: ['一般診療', '健康檢查'], hours: '09:00-18:00' },
    { name: '桃園動物醫院', address: '桃園市桃園區復興路100號', phone: '03-337-5678', rating: 4.3, price_level: 2, lat: 24.9930, lng: 121.3010, services: ['一般診療', '手術', '疫苗'], hours: '09:00-20:00' },
    { name: '中壢獸醫院', address: '桃園市中壢區中山路100號', phone: '03-427-1234', rating: 4.2, price_level: 2, lat: 24.9650, lng: 121.2250, services: ['一般診療', '手術'], hours: '09:00-19:00' },
    
    // 台中市
    { name: '台中動物醫療中心', address: '台中市西區台灣大道二段285號', phone: '04-2300-5555', rating: 4.6, price_level: 2, lat: 24.1500, lng: 120.6600, services: ['專科診療', '手術', '急診'], hours: '24小時' },
    { name: '中興動物醫院', address: '台中市西屯區台灣大道二段300號', phone: '04-2320-7890', rating: 4.4, price_level: 2, lat: 24.1580, lng: 120.6580, services: ['一般診療', '手術'], hours: '09:00-21:00' },
    { name: '東海動物醫院', address: '台中市西屯區台灣大道三段181號', phone: '04-2359-1234', rating: 4.5, price_level: 2, lat: 24.1750, lng: 120.6000, services: ['一般診療', '疫苗', '手術'], hours: '08:00-20:00' },
    { name: '台中市動物醫院', address: '台中市北區健行路256號', phone: '04-2201-5678', rating: 4.3, price_level: 2, lat: 24.1670, lng: 120.6830, services: ['一般診療', '手術', '急診'], hours: '09:00-21:00' },
    
    // 高雄市
    { name: '高雄寵物醫院', address: '高雄市前金區中正四路211號', phone: '07-215-3333', rating: 4.4, price_level: 2, lat: 22.6300, lng: 120.3000, services: ['一般診療', '手術', '疫苗'], hours: '08:00-20:00' },
    { name: '高雄獸醫院', address: '高雄市苓雅區三多一路100號', phone: '07-336-5678', rating: 4.2, price_level: 2, lat: 22.6150, lng: 120.3150, services: ['一般診療', '疫苗', '手術'], hours: '09:00-19:00' },
    { name: '中正動物醫院', address: '高雄市前金區中正四路120號', phone: '07-286-7890', rating: 4.3, price_level: 2, lat: 22.6250, lng: 120.2980, services: ['一般診療', '急診'], hours: '24小時' },
    
    // 台南市
    { name: '台南動物醫院', address: '台南市中西區成功路200號', phone: '06-221-1234', rating: 4.4, price_level: 2, lat: 22.9940, lng: 120.2020, services: ['一般診療', '手術', '疫苗'], hours: '09:00-21:00' },
    { name: '成大動物醫院', address: '台南市北區大學路1號', phone: '06-235-3535', rating: 4.7, price_level: 3, lat: 22.9970, lng: 120.2200, services: ['專科診療', '手術', '教學'], hours: '08:00-17:00' },
    { name: '永康動物診所', address: '台南市永康區中正路250號', phone: '06-253-5678', rating: 4.2, price_level: 2, lat: 23.0250, lng: 120.2270, services: ['一般診療', '疫苗'], hours: '09:00-19:00' }
];

// 初始化醫療地圖
function initMedicalMap(apiKey) {
    GOOGLE_MAPS_API_KEY = apiKey;
    
    // 檢查是否為演示模式
    isDemoMode = !GOOGLE_MAPS_API_KEY || GOOGLE_MAPS_API_KEY === '';

    if (isDemoMode) {
        console.warn('Google Maps API Key 未配置，啟用演示模式');
    } else {
        // 載入 Google Maps API (包含 Places API)
        const script = document.createElement('script');
        script.src = `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_API_KEY}&libraries=places&callback=initMap`;
        script.async = true;
        script.defer = true;
        document.head.appendChild(script);
    }

    // 綁定事件監聽器
    bindEventListeners();

    // 如果沒有 Google Maps API，直接初始化演示模式
    if (isDemoMode) {
        setTimeout(initMap, 100);
    }
}

// 初始化地圖
function initMap() {
    // 隱藏載入畫面
    document.getElementById('map-loading').style.display = 'none';
    
    if (isDemoMode) {
        // 演示模式：顯示模擬地圖
        showDemoMap();
        return;
    }
    
    // 創建地圖，預設中心為台北
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 15,
        center: { lat: 25.0330, lng: 121.5654 }, // 台北101
        mapTypeId: 'roadmap',
        styles: [
            {
                featureType: 'poi',
                elementType: 'labels',
                stylers: [{ visibility: 'off' }]
            }
        ]
    });

    // 創建資訊視窗
    infoWindow = new google.maps.InfoWindow();

    // 綁定事件監聽器
    bindEventListeners();
}

// 演示模式地圖
function showDemoMap() {
    const mapContainer = document.getElementById('map');
    mapContainer.innerHTML = `
        <div class="demo-map">
            <div class="demo-map-content">
                <h4 class="mb-3">醫療地圖</h4>
                <p class="text-muted mb-4">使用內建動物醫院資料庫</p>
                <div class="demo-features">
                    <div class="demo-feature">
                        <i class="fas fa-location-arrow text-primary"></i>
                        <span>定位功能</span>
                    </div>
                    <div class="demo-feature">
                        <i class="fas fa-search text-success"></i>
                        <span>搜尋醫院</span>
                    </div>
                    <div class="demo-feature">
                        <i class="fas fa-map-marker-alt text-danger"></i>
                        <span>地圖標記</span>
                    </div>
                </div>
                <div class="mt-3">
                    <small class="text-muted">
                        <i class="fas fa-info-circle me-1"></i>
                        點擊「取得我的位置」開始搜尋附近的動物醫院
                    </small>
                </div>
            </div>
        </div>
    `;
    
    // 綁定事件監聽器
    bindEventListeners();
}

// 綁定事件監聽器
function bindEventListeners() {
    // 定位方式切換
    document.querySelectorAll('input[name="locationType"]').forEach(radio => {
        radio.addEventListener('change', handleLocationTypeChange);
    });
    
    // 取得位置按鈕
    document.getElementById('getLocationBtn').addEventListener('click', getCurrentLocation);
    
    // 地址輸入框監聽
    document.getElementById('addressInput').addEventListener('input', handleAddressInput);
    
    // 搜尋地址按鈕
    document.getElementById('searchAddressBtn').addEventListener('click', searchAddress);
    
    // 搜尋醫院按鈕
    document.getElementById('searchHospitalsBtn').addEventListener('click', searchNearbyHospitals);
    
    // 回到我的位置按鈕
    document.getElementById('centerMapBtn').addEventListener('click', centerMapOnUser);
    
}

// 處理定位方式切換
function handleLocationTypeChange() {
    const locationType = document.querySelector('input[name="locationType"]:checked').value;
    const currentPanel = document.getElementById('currentLocationPanel');
    const manualPanel = document.getElementById('manualLocationPanel');
    
    if (locationType === 'current') {
        currentPanel.style.display = 'block';
        manualPanel.style.display = 'none';
        // 重置手動定位狀態
        userLocation = null;
        document.getElementById('searchHospitalsBtn').disabled = true;
        document.getElementById('locationInfo').style.display = 'none';
    } else {
        currentPanel.style.display = 'none';
        manualPanel.style.display = 'block';
    }
}

// 處理地址輸入
function handleAddressInput() {
    const addressInput = document.getElementById('addressInput');
    const searchBtn = document.getElementById('searchAddressBtn');
    
    if (addressInput.value.trim() !== '') {
        searchBtn.disabled = false;
    } else {
        searchBtn.disabled = true;
    }
}

// 搜尋地址
function searchAddress() {
    const addressInput = document.getElementById('addressInput');
    const address = addressInput.value.trim();
    
    if (!address) {
        showAlert('請輸入地址', 'warning');
        return;
    }
    
    if (isDemoMode) {
        showAlert('演示模式：已設定為台北市位置', 'success');
        userLocation = {
            lat: 25.0330,
            lng: 121.5654
        };
        updateLocationInfo();
        document.getElementById('searchHospitalsBtn').disabled = false;
        document.getElementById('centerMapBtn').disabled = false;
        return;
    }
    
    const button = document.getElementById('searchAddressBtn');
    const originalText = button.innerHTML;
    
    button.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>搜尋中...';
    button.disabled = true;
    
    const geocoder = new google.maps.Geocoder();
    geocoder.geocode({ address: address }, function(results, status) {
        button.innerHTML = originalText;
        button.disabled = false;
        
        if (status === 'OK' && results[0]) {
            userLocation = {
                lat: results[0].geometry.location.lat(),
                lng: results[0].geometry.location.lng()
            };
            
            // 更新地圖中心
            map.setCenter(userLocation);
            map.setZoom(15);
            
            // 添加用戶位置標記
            addUserLocationMarker();
            
            // 更新位置資訊顯示
            updateLocationInfo();
            
            // 啟用搜尋按鈕
            document.getElementById('searchHospitalsBtn').disabled = false;
            document.getElementById('centerMapBtn').disabled = false;
            
            showAlert('地址定位成功！', 'success');
        } else {
            showAlert('無法找到該地址，請重新輸入', 'danger');
        }
    });
}

// 取得用戶當前位置
function getCurrentLocation() {
    if (isDemoMode) {
        // 演示模式：模擬定位
        userLocation = {
            lat: 25.0330 + (Math.random() - 0.5) * 0.01,
            lng: 121.5654 + (Math.random() - 0.5) * 0.01
        };
        
        updateLocationInfo();
        document.getElementById('searchHospitalsBtn').disabled = false;
        document.getElementById('centerMapBtn').disabled = false;
        
        showAlert('已取得位置，可以開始搜尋附近的動物醫院', 'success');
        return;
    }
    
    const button = document.getElementById('getLocationBtn');
    const originalText = button.innerHTML;
    
    // 顯示載入狀態
    button.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>定位中...';
    button.disabled = true;

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
            function(position) {
                // 成功取得位置
                userLocation = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };

                // 更新地圖中心
                map.setCenter(userLocation);
                map.setZoom(16);

                // 添加用戶位置標記
                addUserLocationMarker();

                // 更新位置資訊顯示
                updateLocationInfo();

                // 啟用搜尋按鈕
                document.getElementById('searchHospitalsBtn').disabled = false;
                document.getElementById('centerMapBtn').disabled = false;

                // 恢復按鈕狀態
                button.innerHTML = '<i class="fas fa-check me-2"></i>定位成功';
                button.classList.remove('btn-primary');
                button.classList.add('btn-success');

                showAlert('位置定位成功！', 'success');
            },
            function(error) {
                // 定位失敗
                console.error('定位錯誤:', error);
                let errorMessage = '無法取得您的位置';
                
                switch(error.code) {
                    case error.PERMISSION_DENIED:
                        errorMessage = '請允許瀏覽器存取您的位置';
                        break;
                    case error.POSITION_UNAVAILABLE:
                        errorMessage = '位置資訊不可用';
                        break;
                    case error.TIMEOUT:
                        errorMessage = '定位請求超時';
                        break;
                }

                // 恢復按鈕狀態
                button.innerHTML = originalText;
                button.disabled = false;
                
                showAlert(errorMessage, 'danger');
            },
            {
                enableHighAccuracy: true,
                timeout: 10000,
                maximumAge: 60000
            }
        );
    } else {
        // 不支援地理定位
        button.innerHTML = originalText;
        button.disabled = false;
        showAlert('您的瀏覽器不支援地理定位功能', 'danger');
    }
}

// 添加用戶位置標記
function addUserLocationMarker() {
    if (userLocation && map) {
        const userMarker = new google.maps.Marker({
            position: userLocation,
            map: map,
            title: '我的位置',
            icon: {
                url: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(`
                    <svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="20" cy="20" r="18" fill="#004767" stroke="#fff" stroke-width="4"/>
                        <circle cx="20" cy="20" r="8" fill="#fff"/>
                    </svg>
                `),
                scaledSize: new google.maps.Size(40, 40),
                anchor: new google.maps.Point(20, 20)
            }
        });

        // 添加點擊事件
        userMarker.addListener('click', function() {
            infoWindow.setContent(`
                <div class="p-2">
                    <h6 class="mb-1">我的位置</h6>
                    <p class="mb-0 text-muted">經度: ${userLocation.lng.toFixed(6)}<br>緯度: ${userLocation.lat.toFixed(6)}</p>
                </div>
            `);
            infoWindow.open(map, userMarker);
        });
    }
}

// 更新位置資訊顯示
function updateLocationInfo() {
    if (userLocation) {
        document.getElementById('longitude').textContent = userLocation.lng.toFixed(6);
        document.getElementById('latitude').textContent = userLocation.lat.toFixed(6);
        document.getElementById('locationInfo').style.display = 'block';

        if (!isDemoMode && map) {
            // 使用地理編碼取得地址
            const geocoder = new google.maps.Geocoder();
            geocoder.geocode({ location: userLocation }, function(results, status) {
                if (status === 'OK' && results[0]) {
                    document.getElementById('address').textContent = results[0].formatted_address;
                } else {
                    document.getElementById('address').textContent = '無法取得地址';
                }
            });
        } else {
            document.getElementById('address').textContent = '演示模式：台北市信義區';
        }
    }
}

// 搜尋附近的動物醫院
function searchNearbyHospitals() {
    if (!userLocation) {
        showAlert('請先取得您的位置', 'warning');
        return;
    }

    const button = document.getElementById('searchHospitalsBtn');
    const originalText = button.innerHTML;
    
    // 顯示載入狀態
    button.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>搜尋中...';
    button.disabled = true;

    const radius = parseInt(document.getElementById('searchRadius').value);
    
    if (isDemoMode) {
        // 演示模式：使用靜態資料庫
        setTimeout(() => {
            const nearbyHospitals = findNearbyHospitals(userLocation, radius);
            
            button.innerHTML = originalText;
            button.disabled = false;
            
            displaySearchResults(nearbyHospitals);
            addHospitalMarkers(nearbyHospitals);
            showAlert(`找到 ${nearbyHospitals.length} 家動物醫院`, 'success');
        }, 1000);
        return;
    }
    
    // 使用 Google Maps Places API 搜尋
    const service = new google.maps.places.PlacesService(map);
    const request = {
        location: userLocation,
        radius: radius,
        query: '動物醫院 OR 獸醫院 OR 動物診所 OR 寵物醫院',
        type: 'veterinary_care'
    };
    
    service.nearbySearch(request, function(results, status) {
        button.innerHTML = originalText;
        button.disabled = false;
        
        if (status === google.maps.places.PlacesServiceStatus.OK && results) {
            // 處理搜尋結果
            const nearbyHospitals = results.map(place => ({
                name: place.name,
                address: place.vicinity || place.formatted_address,
                phone: place.formatted_phone_number || place.international_phone_number || '無電話',
                rating: place.rating || 0,
                price_level: place.price_level || 0,
                lat: place.geometry.location.lat(),
                lng: place.geometry.location.lng(),
                place_id: place.place_id,
                distance: calculateDistance(
                    userLocation.lat, userLocation.lng,
                    place.geometry.location.lat(), place.geometry.location.lng()
                ) * 1000,
                geometry: place.geometry,
                services: ['一般診療'],
                hours: place.opening_hours ? (place.opening_hours.open_now ? '營業中' : '已關閉') : '營業時間不詳'
            }));
            
            // 按距離排序
            nearbyHospitals.sort((a, b) => a.distance - b.distance);
            
            displaySearchResults(nearbyHospitals);
            addHospitalMarkers(nearbyHospitals);
            showAlert(`找到 ${nearbyHospitals.length} 家動物醫院`, 'success');
        } else {
            console.error('搜尋失敗:', status);
            showAlert('搜尋失敗，請稍後再試', 'danger');
            
            // 顯示空結果
            displaySearchResults([]);
        }
    });
}

// 計算兩點間距離（公里）
function calculateDistance(lat1, lng1, lat2, lng2) {
    const R = 6371; // 地球半徑（公里）
    const dLat = (lat2 - lat1) * Math.PI / 180;
    const dLng = (lng2 - lng1) * Math.PI / 180;
    const a = Math.sin(dLat/2) * Math.sin(dLat/2) +
              Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
              Math.sin(dLng/2) * Math.sin(dLng/2);
    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
    return R * c;
}

// 尋找附近的動物醫院
function findNearbyHospitals(userLocation, radiusKm) {
    const results = [];
    
    TAIWAN_HOSPITALS.forEach((hospital, index) => {
        const distance = calculateDistance(
            userLocation.lat, userLocation.lng,
            hospital.lat, hospital.lng
        ) * 1000; // 轉換為公尺
        
        if (distance <= radiusKm) {
            results.push({
                ...hospital,
                distance: distance,
                vicinity: hospital.address
            });
        }
    });
    
    // 按距離排序
    const sortedResults = results.sort((a, b) => a.distance - b.distance);
    return sortedResults;
}

// 顯示搜尋結果
function displaySearchResults(results) {
    const resultsContainer = document.getElementById('searchResults');
    const resultCount = document.getElementById('resultCount');
    
    // 檢查 DOM 元素是否存在
    if (!resultsContainer) {
        console.error('找不到 searchResults 元素');
        return;
    }
    if (!resultCount) {
        console.error('找不到 resultCount 元素');
        return;
    }
    
    resultCount.textContent = results.length;
    
    if (results.length === 0) {
        resultsContainer.innerHTML = `
            <div class="no-results">
                <i class="fas fa-search text-muted"></i>
                <p class="text-muted">附近沒有找到動物醫院</p>
                <p class="text-muted small">請嘗試增加搜尋範圍</p>
            </div>
        `;
        return;
    }

    let html = '';
    results.forEach((hospital, index) => {
        const rating = hospital.rating ? hospital.rating.toFixed(1) : '無評分';
        const priceLevel = hospital.price_level ? '💰'.repeat(hospital.price_level) : '';
        const distance = hospital.distance ? `距離約 ${Math.round(hospital.distance)} 公尺` : '';
        const services = hospital.services ? hospital.services.join('、') : '';
        
        html += `
            <div class="hospital-item" data-index="${index}">
                <div class="hospital-header">
                    <h6 class="hospital-name">${hospital.name || '名稱不詳'}</h6>
                    <div class="hospital-rating">
                        <i class="fas fa-star text-warning"></i>
                        <span>${rating}</span>
                    </div>
                </div>
                <p class="hospital-address text-muted">${hospital.address || '地址不詳'}</p>
                <div class="hospital-info">
                    <span class="badge bg-light text-dark">${priceLevel}</span>
                    <span class="text-muted">${distance}</span>
                </div>
                <div class="hospital-services">
                    <small class="text-muted">
                        <i class="fas fa-phone me-1"></i>${hospital.phone || '無電話'}
                        <br>
                        <i class="fas fa-clock me-1"></i>${hospital.hours || '營業時間不詳'}
                        <br>
                        <i class="fas fa-stethoscope me-1"></i>${services || '服務項目不詳'}
                    </small>
                </div>
            </div>
        `;
    });

    resultsContainer.innerHTML = html;

    // 添加點擊事件
    setTimeout(() => {
        const hospitalItems = document.querySelectorAll('.hospital-item');
        
        hospitalItems.forEach((item, index) => {
            item.addEventListener('click', function() {
                const hospital = results[index];
                
                if (map) {
                    // 如果有座標資訊，移動地圖到該位置
                    if (hospital.lat && hospital.lng) {
                        const position = { lat: hospital.lat, lng: hospital.lng };
                        map.setCenter(position);
                        map.setZoom(18);
                    } else if (hospital.geometry && hospital.geometry.location) {
                        let position;
                        if (typeof hospital.geometry.location.lat === 'function') {
                            position = {
                                lat: hospital.geometry.location.lat(),
                                lng: hospital.geometry.location.lng()
                            };
                        } else {
                            position = hospital.geometry.location;
                        }
                        map.setCenter(position);
                        map.setZoom(18);
                    }
                    
                    // 顯示該醫院的詳細資訊
                    if (markers[index]) {
                        if (typeof google !== 'undefined' && google.maps) {
                            google.maps.event.trigger(markers[index], 'click');
                        }
                    }
                }
            });
        });
    }, 100);
}

// 添加醫院標記
function addHospitalMarkers(results) {
    if (!map) {
        console.error('地圖尚未初始化');
        return;
    }

    // 清除現有標記
    markers.forEach(marker => {
        marker.setMap(null);
    });
    markers = [];

    results.forEach((hospital, index) => {
        // 獲取座標
        let position;
        if (hospital.geometry && hospital.geometry.location) {
            if (typeof hospital.geometry.location.lat === 'function') {
                position = {
                    lat: hospital.geometry.location.lat(),
                    lng: hospital.geometry.location.lng()
                };
            } else {
                position = hospital.geometry.location;
            }
        } else if (hospital.lat && hospital.lng) {
            position = {
                lat: hospital.lat,
                lng: hospital.lng
            };
        } else {
            console.warn('醫院沒有座標資訊:', hospital);
            return;
        }

        const marker = new google.maps.Marker({
            position: position,
            map: map,
            title: hospital.name,
            icon: {
                url: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(`
                    <svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="15" cy="15" r="12" fill="#dc3545" stroke="#fff" stroke-width="2"/>
                        <path d="M10 12h2v6h-2v-6zm4 0h2v6h-2v-6zm-2-4h2v2h-2v-2z" fill="#fff"/>
                    </svg>
                `),
                scaledSize: new google.maps.Size(30, 30),
                anchor: new google.maps.Point(15, 15)
            }
        });

        // 添加點擊事件
        marker.addListener('click', function() {
            const rating = hospital.rating ? hospital.rating.toFixed(1) : '無評分';
            const priceLevel = hospital.price_level ? '💰'.repeat(hospital.price_level) : '';
            const services = hospital.services ? hospital.services.join('、') : '';
            const distance = hospital.distance ? `距離約 ${Math.round(hospital.distance)} 公尺` : '';
            
            infoWindow.setContent(`
                <div class="p-3">
                    <h6 class="mb-2">${hospital.name}</h6>
                    <p class="mb-1"><strong>地址：</strong>${hospital.address || '不詳'}</p>
                    <p class="mb-1"><strong>電話：</strong>${hospital.phone || '不詳'}</p>
                    <p class="mb-1"><strong>營業時間：</strong>${hospital.hours || '不詳'}</p>
                    <p class="mb-1"><strong>服務項目：</strong>${services || '不詳'}</p>
                    <div class="d-flex justify-content-between mb-2">
                        <span><i class="fas fa-star text-warning"></i> ${rating}</span>
                        <span>${priceLevel}</span>
                    </div>
                    <small class="text-muted">${distance}</small>
                </div>
            `);
            infoWindow.open(map, marker);
        });

        markers.push(marker);
    });
    
}

// 取得地點詳細資訊
function getPlaceDetails(placeId) {
    if (isDemoMode) {
        showAlert('演示模式：無法取得詳細資訊', 'info');
        return;
    }
    
    const service = new google.maps.places.PlacesService(map);
    const request = {
        placeId: placeId,
        fields: ['name', 'formatted_address', 'formatted_phone_number', 'opening_hours', 'website', 'rating', 'reviews']
    };

    service.getDetails(request, function(place, status) {
        if (status === google.maps.places.PlacesServiceStatus.OK) {
            let content = `
                <div class="p-3">
                    <h6 class="mb-2">${place.name}</h6>
                    <p class="mb-1"><strong>地址：</strong>${place.formatted_address || '不詳'}</p>
            `;
            
            if (place.formatted_phone_number) {
                content += `<p class="mb-1"><strong>電話：</strong>${place.formatted_phone_number}</p>`;
            }
            
            if (place.website) {
                content += `<p class="mb-1"><strong>網站：</strong><a href="${place.website}" target="_blank">${place.website}</a></p>`;
            }
            
            if (place.opening_hours) {
                content += `<p class="mb-1"><strong>營業時間：</strong></p><ul class="mb-1">`;
                place.opening_hours.weekday_text.forEach(time => {
                    content += `<li class="small">${time}</li>`;
                });
                content += `</ul>`;
            }
            
            if (place.rating) {
                content += `<p class="mb-1"><strong>評分：</strong>${place.rating.toFixed(1)} ⭐</p>`;
            }
            
            content += `</div>`;
            
            infoWindow.setContent(content);
        }
    });
}

// 回到我的位置
function centerMapOnUser() {
    if (userLocation) {
        if (map) {
            map.setCenter(userLocation);
            map.setZoom(16);
        }
    }
}

// 清除標記
function clearMarkers() {
    markers.forEach(marker => {
        if (marker.setMap) {
            marker.setMap(null);
        }
    });
    markers = [];
    
    if (infoWindow) {
        infoWindow.close();
    }
    
    // 更新結果顯示
    document.getElementById('searchResults').innerHTML = `
        <div class="no-results">
            <i class="fas fa-info-circle text-muted"></i>
            <p class="text-muted">請先取得您的位置，然後搜尋附近的動物醫院</p>
        </div>
    `;
    document.getElementById('resultCount').textContent = '0';
}

// 顯示提示訊息
function showAlert(message, type) {
    // 移除現有的提示訊息
    const existingAlert = document.querySelector('.alert');
    if (existingAlert) {
        existingAlert.remove();
    }

    // 創建新的提示訊息
    const alertDiv = document.createElement('div');
    alertDiv.className = `alert alert-${type} alert-dismissible fade show position-fixed`;
    alertDiv.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
    alertDiv.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;

    document.body.appendChild(alertDiv);

    // 3秒後自動移除
    setTimeout(() => {
        if (alertDiv.parentNode) {
            alertDiv.remove();
        }
    }, 3000);
}

// 如果沒有 Google Maps API，直接初始化演示模式
if (isDemoMode) {
    document.addEventListener('DOMContentLoaded', function() {
        setTimeout(initMap, 100);
    });
}