/* EDM V2 page interactions extracted from edm_dashboard_v2.html. */
let campaignPriceChartInstance = null;
    let activeCampaignHistoryRange = 'month';
    let currentCampaignICode = null;
    let currentCampaignProductName = '';
    let campaignChartLoader = null;

    function getCSRFToken() {
        return document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    }

    function copyCampaignProductId(text, element) {
        if (!text) return;
        const originalHtml = element.innerHTML;
        const showFeedback = () => {
            element.innerHTML = '已複製 <i class="fas fa-check" aria-hidden="true"></i>';
            setTimeout(() => {
                element.innerHTML = originalHtml;
            }, 1200);
        };

        if (navigator.clipboard && window.isSecureContext) {
            navigator.clipboard.writeText(text).then(showFeedback);
            return;
        }

        const textarea = document.createElement('textarea');
        textarea.value = text;
        textarea.style.position = 'fixed';
        textarea.style.opacity = '0';
        document.body.appendChild(textarea);
        textarea.focus();
        textarea.select();
        try {
            document.execCommand('copy');
            showFeedback();
        } finally {
            document.body.removeChild(textarea);
        }
    }

    function formatCampaignPriceTick(value) {
        return '$' + Number(value || 0).toLocaleString();
    }

    function setCampaignHistoryChartState(message, showCanvas = false) {
        const state = document.getElementById('campaignHistoryChartState');
        const canvas = document.getElementById('campaignPriceChart');
        if (!state || !canvas) return;
        state.textContent = message;
        state.classList.toggle('is-hidden', showCanvas);
        canvas.classList.toggle('is-hidden', !showCanvas);
    }

    function destroyCampaignPriceChart() {
        if (campaignPriceChartInstance) {
            campaignPriceChartInstance.destroy();
            campaignPriceChartInstance = null;
        }
    }

    function ensureCampaignChart() {
        if (window.EwoooCChartTheme && window.EwoooCChartTheme.loadChartJs) {
            return window.EwoooCChartTheme.loadChartJs();
        }
        if (typeof Chart !== 'undefined') {
            return Promise.resolve(window.Chart);
        }
        if (campaignChartLoader) {
            return campaignChartLoader;
        }
        campaignChartLoader = new Promise((resolve, reject) => {
            const existing = document.querySelector('script[data-chartjs-loader="campaign"]');
            if (existing) {
                existing.addEventListener('load', () => resolve(window.Chart), { once: true });
                existing.addEventListener('error', () => reject(new Error('Chart.js 載入失敗')), { once: true });
                return;
            }
            const script = document.createElement('script');
            script.src = 'https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js';
            script.async = true;
            script.dataset.chartjsLoader = 'campaign';
            script.onload = () => resolve(window.Chart);
            script.onerror = () => reject(new Error('Chart.js 載入失敗'));
            document.head.appendChild(script);
        });
        return campaignChartLoader;
    }

    function updateCampaignHistoryRangeButtons() {
        document.querySelectorAll('[data-campaign-history-range]').forEach(button => {
            button.classList.toggle('is-active', button.dataset.campaignHistoryRange === activeCampaignHistoryRange);
        });
    }

    function showCampaignHistory(iCode, productName, range = activeCampaignHistoryRange) {
        const modalEl = document.getElementById('campaignHistoryModal');
        const title = document.getElementById('campaignHistoryModalLabel');
        const subtitle = document.getElementById('campaignHistoryModalSubtitle');
        const canvas = document.getElementById('campaignPriceChart');

        if (!modalEl || !title || !subtitle || !canvas) return;

        currentCampaignICode = iCode;
        currentCampaignProductName = productName || '歷史價格走勢';
        activeCampaignHistoryRange = range;
        updateCampaignHistoryRangeButtons();

        title.textContent = currentCampaignProductName;
        subtitle.textContent = `商品 ID ${iCode} · 讀取真實價格紀錄`;
        destroyCampaignPriceChart();
        setCampaignHistoryChartState('載入價格歷史中...');

        const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
        modal.show();

        ensureCampaignChart()
            .then(() => fetch(`/api/history/i-code/${encodeURIComponent(iCode)}?range=${activeCampaignHistoryRange}`))
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}`);
                }
                return response.json();
            })
            .then(payload => {
                const points = payload.data || [];
                if (payload.range_label) {
                    subtitle.textContent = `商品 ID ${iCode} · ${payload.range_label}真實價格紀錄`;
                }

                if (!Array.isArray(points) || points.length === 0) {
                    setCampaignHistoryChartState('目前沒有可顯示的歷史價格紀錄。');
                    return;
                }

                setCampaignHistoryChartState('', true);
                const ctx = canvas.getContext('2d');
                const gradient = ctx.createLinearGradient(0, 0, 0, 380);
                gradient.addColorStop(0, 'rgba(190, 106, 45, 0.26)');
                gradient.addColorStop(1, 'rgba(190, 106, 45, 0.04)');

                campaignPriceChartInstance = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: points.map(point => point.t),
                        datasets: [{
                            label: '價格',
                            data: points.map(point => point.p),
                            borderColor: '#be6a2d',
                            backgroundColor: gradient,
                            borderWidth: 3,
                            fill: true,
                            tension: 0.35,
                            pointRadius: 3,
                            pointHoverRadius: 7,
                            pointBackgroundColor: '#be6a2d',
                            pointBorderColor: '#fff',
                            pointBorderWidth: 2
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        interaction: {
                            mode: 'index',
                            intersect: false
                        },
                        plugins: {
                            legend: { display: false },
                            tooltip: {
                                backgroundColor: 'rgba(55, 45, 35, 0.94)',
                                titleColor: '#faf7f0',
                                bodyColor: '#faf7f0',
                                borderColor: '#be6a2d',
                                borderWidth: 1,
                                displayColors: false,
                                padding: 12,
                                callbacks: {
                                    label: context => '價格 ' + formatCampaignPriceTick(context.parsed.y)
                                }
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: false,
                                grid: {
                                    color: 'rgba(71, 61, 49, 0.08)'
                                },
                                ticks: {
                                    color: '#7f715f',
                                    callback: formatCampaignPriceTick
                                }
                            },
                            x: {
                                grid: { display: false },
                                ticks: {
                                    color: '#9b8a77',
                                    maxRotation: 0,
                                    autoSkip: true,
                                    maxTicksLimit: 8
                                }
                            }
                        }
                    }
                });
            })
            .catch(error => {
                console.error('活動商品價格歷史載入失敗:', error);
                setCampaignHistoryChartState('價格歷史載入失敗，請稍後再試。');
            });
    }

    function applyCampaignFilter(card, filter) {
        const rows = Array.from(card.querySelectorAll('[data-campaign-row]'));
        const empty = card.querySelector('.campaign-filter-empty');
        const counter = card.querySelector('[data-campaign-visible-count]');
        let visibleCount = 0;

        rows.forEach(row => {
            const matches = filter === 'all' || row.dataset.campaignFilter === filter;
            row.classList.toggle('is-hidden', !matches);
            if (matches) visibleCount += 1;
        });

        if (empty) {
            empty.classList.toggle('is-hidden', visibleCount !== 0);
        }

        if (counter) {
            counter.textContent = `${visibleCount.toLocaleString()} 筆`;
        }
    }

    document.querySelectorAll('.campaign-table-card').forEach(card => {
        card.querySelectorAll('[data-campaign-filter]').forEach(button => {
            button.addEventListener('click', () => {
                card.querySelectorAll('[data-campaign-filter]').forEach(item => {
                    item.classList.toggle('is-active', item === button);
                });
                applyCampaignFilter(card, button.dataset.campaignFilter);
            });
        });
    });

    document.querySelectorAll('[data-campaign-copy]').forEach(button => {
        button.addEventListener('click', event => {
            event.stopPropagation();
            copyCampaignProductId(button.dataset.campaignCopy, button);
        });
    });

    document.querySelectorAll('[data-campaign-history-trigger]').forEach(button => {
        button.addEventListener('click', event => {
            event.stopPropagation();
            showCampaignHistory(button.dataset.iCode, button.dataset.productName);
        });
    });

    document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(element => {
        bootstrap.Tooltip.getOrCreateInstance(element);
    });

    document.querySelectorAll('[data-campaign-history-range]').forEach(button => {
        button.addEventListener('click', () => {
            if (!currentCampaignICode) return;
            showCampaignHistory(currentCampaignICode, currentCampaignProductName, button.dataset.campaignHistoryRange);
        });
    });

    const campaignTaskMap = {
        edm: {
            confirmText: '確定要手動執行 EDM 商品監控嗎？',
            url: '/api/run_edm_task'
        },
        festival: {
            confirmText: '確定要手動執行節慶活動監控嗎？',
            url: '/api/run_festival_task'
        },
        notification: {
            confirmText: '確定要發送 EDM 活動通知嗎？',
            url: '/api/trigger_edm_notification'
        }
    };

    function runCampaignTask(taskName) {
        const task = campaignTaskMap[taskName];
        if (!task || !confirm(task.confirmText)) return;
        fetch(task.url, {
            method: 'POST',
            headers: { 'X-CSRFToken': getCSRFToken() }
        })
            .then(response => response.json())
            .then(data => alert(data.message))
            .catch(error => alert('錯誤: ' + error));
    }

    document.querySelectorAll('[data-campaign-task]').forEach(button => {
        button.addEventListener('click', () => runCampaignTask(button.dataset.campaignTask));
    });

    function trackMomoLinkClick(event) {
        const link = event.target.closest('.momo-tracked-link');
        if (!link) {
            return;
        }

        const href = link.getAttribute('href') || '';
        const originalHref = link.dataset.momoOriginalUrl || href;
        if (!href || href === '#') {
            return;
        }

        const payload = {
            url: originalHref,
            page: location.pathname,
            source: link.dataset.trackSource || 'unknown',
            platform: link.dataset.trackPlatform || 'momo',
            product_id: link.dataset.trackProductId || '',
            i_code: link.dataset.trackIcode || '',
            product_name: link.dataset.trackProductName || '',
            label: (link.textContent || '').trim(),
            effective_url: href
        };

        const isBlocked = isBlockedMomoUrl(href);

        if (isBlocked) {
            console.warn('[EDM Dashboard V2] 嘗試打開 MOMO 404 網址', payload);
            event.preventDefault();

            const fallbackUrl = link.dataset.momoFallbackUrl || getSafeMomoFallbackUrl(link);
            if (fallbackUrl && fallbackUrl !== '#' && fallbackUrl !== href) {
                link.dataset.momoFallbackUrl = fallbackUrl;
                link.setAttribute('href', fallbackUrl);
                payload.effective_url = fallbackUrl;
                openMomoUrl(link, fallbackUrl);
                fetch('/api/track_momo_link', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': getCSRFToken()
                    },
                    body: JSON.stringify(payload)
                }).catch(() => {});
                return;
            }
        }

        fetch('/api/track_momo_link', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': getCSRFToken()
            },
            body: JSON.stringify(payload)
        }).catch(() => {});
    }

    function getSafeMomoFallbackUrl(link) {
        const iCode = (link.dataset.trackIcode || link.dataset.trackProductId || '').trim();
        if (!isLikelyMomoProductCode(iCode)) {
            return '#';
        }
        return `https://www.momoshop.com.tw/goods/GoodsDetail.jsp?i_code=${encodeURIComponent(iCode)}`;
    }

    function isBlockedMomoUrl(url) {
        const lowered = (url || '').toLowerCase();
        if (lowered.includes('EC404.html') || lowered.includes('ec404')) {
            return true;
        }
        try {
            const parsed = new URL(url, location.origin);
            const path = (parsed.pathname || '').toLowerCase();
            if (!path.includes('goodsdetail')) {
                return false;
            }
            const code = (parsed.searchParams.get('i_code') || '').trim();
            if (code) {
                return !isLikelyMomoProductCode(code);
            }
            return !/\/goodsdetail\/[^/?#]+/i.test(path);
        } catch (error) {
            if (!/goodsdetail\.jsp/i.test(lowered)) {
                return false;
            }
            const hasCode = /[?&]i_code=([^&#]+)/i.test(lowered);
            if (!hasCode) {
                return true;
            }
            const match = /[?&]i_code=([^&#]+)/i.exec(lowered);
            const code = match ? (match[1] || '').trim() : '';
            return !isLikelyMomoProductCode(code);
        }
    }

    function isLikelyMomoProductCode(value) {
        const cleaned = (value || '').trim();
        if (!cleaned) {
            return false;
        }
        const lowered = cleaned.toLowerCase();
        if (lowered === 'nan' || lowered === 'none' || lowered === 'null' || lowered === 'undefined') {
            return false;
        }
        if (lowered.startsWith('momo_') || lowered.startsWith('manual_') || lowered.startsWith('pchome_')) {
            return false;
        }
        return /^[A-Za-z0-9_-]{4,}$/.test(cleaned);
    }

    function openMomoUrl(link, url) {
        if (!url || url === '#') {
            return;
        }

        const target = (link.getAttribute('target') || '_self').toLowerCase();
        if (target === '_blank') {
            window.open(url, '_blank', 'noopener,noreferrer');
            return;
        }

        if (target === '_self' || target === '') {
            window.location.href = url;
            return;
        }

        window.open(url, target);
    }

    document.addEventListener('click', trackMomoLinkClick);