// YouTube URL 轉換為嵌入格式
function convertYouTubeToEmbed(url) {
    if (!url) return '';
    
    try {
        // 如果已經是 embed 格式，直接返回
        if (url.includes('youtube.com/embed/')) {
            return url;
        }
        
        let videoId = '';
        
        // youtu.be 短網址格式
        if (url.includes('youtu.be/')) {
            const match = url.match(/youtu\.be\/([^?&\s]+)/);
            if (match) {
                videoId = match[1];
            }
        }
        // youtube.com/watch?v=VIDEO_ID 格式
        else if (url.includes('youtube.com/watch')) {
            const match = url.match(/[?&]v=([^&]+)/);
            if (match) {
                videoId = match[1];
            }
        }
        // youtube.com/shorts/VIDEO_ID 格式
        else if (url.includes('youtube.com/shorts/')) {
            const match = url.match(/shorts\/([^?&\s]+)/);
            if (match) {
                videoId = match[1];
            }
        }
        // youtube.com/live/VIDEO_ID 格式
        else if (url.includes('youtube.com/live/')) {
            const match = url.match(/live\/([^?&\s]+)/);
            if (match) {
                videoId = match[1];
            }
        }
        
        if (videoId) {
            return `https://www.youtube.com/embed/${videoId}`;
        }
        
        return '';
    } catch (error) {
        console.error('轉換 YouTube URL 時發生錯誤:', error);
        return '';
    }
}

// 這裡可以添加互動功能
document.addEventListener('DOMContentLoaded', function() {    
    // 確保 petData 已載入
    if (!window.petData) {
        console.error('petData 未定義');
        return;
    }
    
    // 處理 YouTube 影片嵌入
    const youtubeVideo = document.getElementById('youtubeVideo');
    if (youtubeVideo) {
        const videoUrl = window.petData.videoUrl || '';
        if (videoUrl && videoUrl.trim()) {
            const embedUrl = convertYouTubeToEmbed(videoUrl.trim());
            if (embedUrl) {
                youtubeVideo.src = embedUrl;
            } else {
                // 如果無法轉換，隱藏 iframe 並顯示錯誤訊息
                youtubeVideo.parentElement.innerHTML = `
                    <div class="no-video-message">
                        <i class="fas fa-exclamation-triangle"></i>
                        <p>影片連結格式錯誤</p>
                    </div>
                `;
            }
        }
    }
    
    // 載入並顯示配對分數雷達圖
    loadMatchingRadarChart();
    
    // 檢查按鈕是否存在
    const viewMapBtn = document.getElementById('viewMapBtn');
    
    if (viewMapBtn) {
        // 查看地圖按鈕
        viewMapBtn.addEventListener('click', function() {
            // 使用收容所名稱開啟 Google 地圖
            const shelterName = window.petData.shelterName || '';
            if (shelterName) {
                const googleMapsUrl = `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(shelterName)}`;
                window.open(googleMapsUrl, '_blank');
            }
        });
    } else {
        console.error('找不到 viewMapBtn 按鈕');
    }
    
    // 查看收容所資訊按鈕
    const viewShelterInfoBtn = document.getElementById('viewShelterInfoBtn');
    if (viewShelterInfoBtn) {
        viewShelterInfoBtn.addEventListener('click', function() {
            const shelterName = window.petData.shelterName || '';
            let shelterInfoUrl = '';
            
            // 根據收容所名稱判斷連結
            if (shelterName === '新北市板橋區公立動物之家') {
                shelterInfoUrl = 'https://animal.moa.gov.tw/Frontend/PublicShelter/Detail/PS00000003';
            } else if (shelterName === '新北市中和區公立動物之家') {
                shelterInfoUrl = 'https://animal.moa.gov.tw/Frontend/PublicShelter/Detail/PS00000005';
            } else {
                // 如果沒有匹配的收容所，則不顯示按鈕
                viewShelterInfoBtn.style.display = 'none';
                return;
            }
            
            // 在新視窗開啟連結
            window.open(shelterInfoUrl, '_blank');
        });
    }
    
    // 立即致電按鈕（如果存在）
    const callBtn = document.querySelector('.btn-success');
    if (callBtn) {
        callBtn.addEventListener('click', function() {
            const shelterPhone = window.petData.shelterPhone || '';
            if (shelterPhone) {
                window.location.href = `tel:${shelterPhone}`;
            }
        });
    }
    
    // 查看更多按鈕
    const viewMoreBtn = document.querySelector('.view-more-btn');
    if (viewMoreBtn) {
        viewMoreBtn.addEventListener('click', function() {
            window.location.href = '/start_match';
        });
    }
});

// 載入並顯示狗狗特質雷達圖
function loadMatchingRadarChart() {
    try {
        // 從 petData 獲取狗狗特質數據
        const petName = window.petData ? window.petData.name : '';
        const traits = window.petData ? window.petData.traits : [];

        if (!traits || traits.length === 0) {
            return;
        }

        // 檢查 ApexCharts 是否已載入
        if (typeof ApexCharts === 'undefined') {
            console.error('ApexCharts 庫未載入');
            return;
        }

        // 按 sort_order 排序特質
        const sortedTraits = [...traits].sort((a, b) => (a.sort_order || 0) - (b.sort_order || 0));

        // 準備雷達圖數據
        // 根據特質數量決定多邊形邊數（最少3邊，最多顯示所有特質）
        const traitCount = Math.max(3, sortedTraits.length);
        const selectedTraits = sortedTraits.slice(0, traitCount);

        // 自動換行函數：根據文字內容決定換行字數
        const autoWrapText = (text) => {
            if (!text) {
                return text;
            }
            
            // 針對特定標籤使用不同的換行字數
            let maxChars;
            if (text === '訓練專注度') {
                maxChars = 5; 
            }
            else if (text === '對狗的社交性') {
                maxChars = 3;  
            } else {
                maxChars = 4;  
            }
            
            // 如果文字長度小於等於換行字數，直接返回
            if (text.length <= maxChars) {
                return text;
            }
            
            // 將文字按照 maxChars 長度分割成多行
            const lines = [];
            for (let i = 0; i < text.length; i += maxChars) {
                lines.push(text.substring(i, i + maxChars));
            }
            return lines;
        };

        // 準備標籤和數據
        const categories = selectedTraits.map(trait => {
            // 只顯示 category_name，隱藏 group_label
            const categoryName = trait.category_name || '未知特質';
            return autoWrapText(categoryName);
        });
        const scores = selectedTraits.map(trait => parseFloat(trait.score) || 0);

        // 如果特質少於3個，補充到3個
        while (scores.length < 3) {
            scores.push(0);
            categories.push('未評估');
        }

        // 為所有標籤生成相同的顏色陣列（確保顏色一致）
        const labelColors = new Array(categories.length).fill('#333');

        // 配置雷達圖選項
        const chartOptions = {
            series: [{
                name: '特質分數',
                data: scores
            }],
            chart: {
                height: 400,
                width: '100%',
                type: 'radar',
                toolbar: {
                    show: false
                },
                offsetY: 0
            },
            colors: ['#004767'],
            labels: categories,
            xaxis: {
                labels: {
                    show: true,
                    style: {
                        fontSize: '12px',
                        fontWeight: 500,
                        colors: labelColors  // 使用動態生成的顏色陣列
                    },
                    trim: false,
                    offsetX: 0,
                    offsetY: -15
                }
            },
            yaxis: {
                min: 0,
                max: 100,
                tickAmount: 5,
                labels: {
                    formatter: function(val) {
                        return Math.round(val) + '';
                    },
                    style: {
                        fontSize: '11px'
                    }
                }
            },
            plotOptions: {
                radar: {
                    polygons: {
                        strokeColors: '#e0e0e0',
                        fill: {
                            colors: ['#f8f9fa', '#fff']
                        }
                    }
                }
            },
            dataLabels: {
                enabled: true,
                style: {
                    fontSize: '11px',
                    fontWeight: 600,
                    colors: ['#004767']
                },
                background: {
                    enabled: true,
                    borderRadius: 2,
                    padding: 4,
                    opacity: 0.9
                },
                offsetY: -8
            },
            fill: {
                opacity: 0.3,
                colors: ['#004767']
            },
            stroke: {
                width: 2,
                colors: ['#004767']
            },
            markers: {
                size: 4,
                colors: ['#004767'],
                strokeColors: '#fff',
                strokeWidth: 2,
                hover: {
                    size: 6
                }
            },
            tooltip: {
                y: {
                    formatter: function(val) {
                        return Math.round(val) + ' 分';
                    }
                }
            },
            title: {
                text: '', //petName ? `${petName} 的特質分析` : '狗狗特質分析',
                align: 'center',
                style: {
                    fontSize: '14px',
                    fontWeight: 600,
                    color: '#2c3e50'
                },
                margin: 0,
                offsetY: -20
            }
        };

        // 創建並渲染雷達圖
        const chart = new ApexCharts(document.querySelector('#radarChartContainer'), chartOptions);
        chart.render();

        // 顯示雷達圖容器
        const radarChartContainer = document.getElementById('matchingRadarChart');
        if (radarChartContainer) {
            radarChartContainer.style.display = 'block';
        }

    } catch (error) {
        console.error('載入狗狗特質雷達圖時發生錯誤:', error);
    }
}