ewoooc/templates/price_comparison.html

{% extends "base.html" %}

{% block title %}比價系統 - Momo Pro{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="row mb-4">
        <div class="col">
            <h2><i class="fas fa-balance-scale me-2"></i>PChome vs MOMO 比價</h2>
            <p class="text-muted">比較 PChome 24h 和 MOMO 美妝商品價格</p>
        </div>
    </div>

    <!-- 操作區 -->
    <div class="row mb-4">
        <!-- Step 1: 選擇品牌 -->
        <div class="col-lg-4 mb-3">
            <div class="card h-100">
                <div class="card-header bg-primary text-white">
                    <i class="fas fa-tag me-2"></i>Step 1: 選擇品牌
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <select class="form-select" id="brandSelect">
                            <option value="">-- 選擇品牌 --</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">或輸入品牌/關鍵字</label>
                        <input type="text" class="form-control" id="customKeyword" placeholder="如: 理膚寶水、雅漾">
                    </div>
                </div>
            </div>
        </div>

        <!-- Step 2: 取得 PChome 商品 -->
        <div class="col-lg-4 mb-3">
            <div class="card h-100">
                <div class="card-header bg-info text-white">
                    <i class="fas fa-shopping-cart me-2"></i>Step 2: PChome 商品
                </div>
                <div class="card-body">
                    <button class="btn btn-info w-100 mb-2" id="fetchPchomeBtn">
                        <i class="fas fa-download me-1"></i>自動爬取 PChome
                    </button>
                    <div class="text-center my-2"><small class="text-muted">或</small></div>
                    <button class="btn btn-outline-info w-100" id="manualPchomeBtn" data-bs-toggle="modal" data-bs-target="#manualInputModal" data-source="pchome">
                        <i class="fas fa-keyboard me-1"></i>手動輸入
                    </button>
                    <div class="mt-3">
                        <span class="badge bg-secondary" id="pchomeCount">0 筆商品</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Step 3: 取得 MOMO 商品 -->
        <div class="col-lg-4 mb-3">
            <div class="card h-100">
                <div class="card-header bg-warning text-dark">
                    <i class="fas fa-store me-2"></i>Step 3: MOMO 商品
                </div>
                <div class="card-body">
                    <button class="btn btn-warning w-100 mb-2" id="uploadMomoBtn" data-bs-toggle="modal" data-bs-target="#uploadModal">
                        <i class="fas fa-file-excel me-1"></i>上傳 Excel
                    </button>
                    <div class="text-center my-2"><small class="text-muted">或</small></div>
                    <button class="btn btn-outline-warning w-100" id="manualMomoBtn" data-bs-toggle="modal" data-bs-target="#manualInputModal" data-source="momo">
                        <i class="fas fa-keyboard me-1"></i>手動輸入
                    </button>
                    <div class="mt-3">
                        <span class="badge bg-secondary" id="momoCount">0 筆商品</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 比價按鈕 -->
    <div class="row mb-4">
        <div class="col text-center">
            <button class="btn btn-lg btn-success px-5" id="compareBtn" disabled>
                <i class="fas fa-balance-scale me-2"></i>開始比價
            </button>
        </div>
    </div>

    <!-- 進度顯示 -->
    <div class="row mb-4" id="progressSection" style="display: none;">
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="spinner-border text-primary me-3" role="status"></div>
                        <div>
                            <strong id="progressText">處理中...</strong>
                            <br><small class="text-muted" id="progressDetail"></small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 比價結果 -->
    <div class="row" id="resultSection" style="display: none;">
        <div class="col">
            <!-- 統計卡片 -->
            <div class="row mb-4">
                <div class="col-md-3 mb-3">
                    <div class="card bg-light">
                        <div class="card-body text-center">
                            <h4 class="mb-0" id="matchedCount">0</h4>
                            <small class="text-muted">成功匹配</small>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 mb-3">
                    <div class="card bg-info text-white">
                        <div class="card-body text-center">
                            <h4 class="mb-0" id="pchomeCheaperCount">0</h4>
                            <small>PChome 較便宜</small>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 mb-3">
                    <div class="card bg-warning text-dark">
                        <div class="card-body text-center">
                            <h4 class="mb-0" id="momoCheaperCount">0</h4>
                            <small>MOMO 較便宜</small>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 mb-3">
                    <div class="card bg-secondary text-white">
                        <div class="card-body text-center">
                            <h4 class="mb-0" id="avgPriceDiff">$0</h4>
                            <small>平均價差</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 結果表格 -->
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span><i class="fas fa-list me-2"></i>比價結果</span>
                    <div>
                        <button class="btn btn-sm btn-outline-primary" id="exportResultBtn">
                            <i class="fas fa-file-excel me-1"></i>匯出 Excel
                        </button>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover table-striped mb-0">
                            <thead class="table-dark">
                                <tr>
                                    <th style="width: 35%;">PChome 商品</th>
                                    <th style="width: 35%;">MOMO 商品</th>
                                    <th class="text-center">相似度</th>
                                    <th class="text-end">PChome 價</th>
                                    <th class="text-end">MOMO 價</th>
                                    <th class="text-end">價差</th>
                                    <th class="text-center">推薦</th>
                                </tr>
                            </thead>
                            <tbody id="resultBody">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 上傳 Excel Modal -->
<div class="modal fade" id="uploadModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-file-excel me-2"></i>上傳 MOMO 商品 Excel</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">選擇 Excel 檔案</label>
                    <input type="file" class="form-control" id="momoExcelFile" accept=".xlsx,.xls,.csv">
                </div>
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-1"></i>
                    Excel 需包含「商品名稱」和「售價」欄位。可選包含「商品編號」和「連結」。
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-warning" id="parseExcelBtn">
                    <i class="fas fa-upload me-1"></i>上傳並解析
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 手動輸入 Modal -->
<div class="modal fade" id="manualInputModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-keyboard me-2"></i>手動輸入商品</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info py-2">
                    <i class="fas fa-info-circle me-1"></i>
                    <strong>格式說明:</strong> 每行一筆商品，用<strong>逗號</strong>或 <strong>Tab</strong> 分隔<br>
                    <code>商品名稱,價格</code> 或 <code>商品名稱,價格,商品連結(選填)</code>
                </div>
                <div class="mb-3">
                    <label class="form-label">商品資料</label>
                    <textarea class="form-control" id="manualInput" rows="10" placeholder="理膚寶水 多容安舒緩濕潤乳液 40ml,850,https://www.momoshop.com.tw/goods/GoodsDetail.jsp?i_code=12345
理膚寶水 B5全面修復霜 100ml,680
La Roche-Posay 安得利防曬液 50ml,920

也可以直接從 Excel 複製貼上 (Tab 分隔)"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="parseManualBtn">
                    <i class="fas fa-check me-1"></i>確認
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    let pchomeProducts = [];
    let momoProducts = [];
    let comparisonResult = null;
    let currentManualSource = null;

    document.addEventListener('DOMContentLoaded', function() {
        loadBrands();
        bindEvents();
    });

    async function loadBrands() {
        try {
            const response = await fetchWithCSRF('/api/price_comparison/brands');
            const data = await response.json();

            if (data.success) {
                const select = document.getElementById('brandSelect');
                for (const brand of data.data.brands) {
                    const option = document.createElement('option');
                    option.value = brand.code;
                    option.textContent = brand.name;
                    select.appendChild(option);
                }
            }
        } catch (error) {
            console.error('載入品牌失敗:', error);
        }
    }

    function bindEvents() {
        // 品牌選擇
        document.getElementById('brandSelect').addEventListener('change', function() {
            const selected = this.options[this.selectedIndex];
            if (selected.value) {
                document.getElementById('customKeyword').value = selected.textContent;
            }
        });

        // 爬取 PChome
        document.getElementById('fetchPchomeBtn').addEventListener('click', fetchPchome);

        // 上傳 Excel
        document.getElementById('parseExcelBtn').addEventListener('click', parseMomoExcel);

        // 手動輸入來源
        document.querySelectorAll('[data-bs-target="#manualInputModal"]').forEach(btn => {
            btn.addEventListener('click', function() {
                currentManualSource = this.dataset.source;
            });
        });

        // 解析手動輸入
        document.getElementById('parseManualBtn').addEventListener('click', parseManualInput);

        // 比價
        document.getElementById('compareBtn').addEventListener('click', runComparison);

        // 匯出
        document.getElementById('exportResultBtn').addEventListener('click', exportResult);
    }

    function getKeyword() {
        const custom = document.getElementById('customKeyword').value.trim();
        if (custom) return custom;

        const select = document.getElementById('brandSelect');
        return select.options[select.selectedIndex]?.textContent || '';
    }

    async function fetchPchome() {
        const keyword = getKeyword();
        if (!keyword) {
            showToast('請先選擇品牌或輸入關鍵字', 'warning');
            return;
        }

        showProgress('爬取 PChome...', `搜尋: ${keyword}`);

        try {
            const response = await fetchWithCSRF('/api/price_comparison/fetch_pchome', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ keyword, limit: 100 })
            });

            const data = await response.json();
            hideProgress();

            if (data.success) {
                pchomeProducts = data.data.products;
                document.getElementById('pchomeCount').textContent = `${pchomeProducts.length} 筆商品`;
                document.getElementById('pchomeCount').classList.replace('bg-secondary', 'bg-info');
                updateCompareButton();
                showToast(`成功取得 ${pchomeProducts.length} 筆 PChome 商品`, 'success');
            } else {
                showToast(data.message, 'danger');
            }
        } catch (error) {
            hideProgress();
            showToast('爬取失敗: ' + error.message, 'danger');
        }
    }

    async function parseMomoExcel() {
        const fileInput = document.getElementById('momoExcelFile');
        if (!fileInput.files.length) {
            showToast('請選擇檔案', 'warning');
            return;
        }

        const formData = new FormData();
        formData.append('file', fileInput.files[0]);

        try {
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            const response = await fetch('/api/price_comparison/parse_momo_excel', {
                method: 'POST',
                headers: { 'X-CSRFToken': csrfToken },
                body: formData
            });

            const data = await response.json();

            if (data.success) {
                momoProducts = data.data.products;
                document.getElementById('momoCount').textContent = `${momoProducts.length} 筆商品`;
                document.getElementById('momoCount').classList.replace('bg-secondary', 'bg-warning');
                updateCompareButton();
                bootstrap.Modal.getInstance(document.getElementById('uploadModal')).hide();
                showToast(`成功解析 ${momoProducts.length} 筆 MOMO 商品`, 'success');
            } else {
                showToast(data.message, 'danger');
            }
        } catch (error) {
            showToast('解析失敗: ' + error.message, 'danger');
        }
    }

    function parseManualInput() {
        const input = document.getElementById('manualInput').value.trim();
        if (!input) {
            showToast('請輸入商品資料', 'warning');
            return;
        }

        const lines = input.split('\n');
        const products = [];

        for (let i = 0; i < lines.length; i++) {
            const line = lines[i].trim();
            if (!line) continue;

            // 支援逗號或 Tab 分隔
            let parts = line.split(',');
            if (parts.length < 2) {
                parts = line.split('\t');
            }
            if (parts.length < 2) {
                showToast(`第 ${i + 1} 行格式錯誤: 請使用「商品名稱,價格」格式<br><small>例如: 理膚寶水 B5修復霜,680</small><br><small>您輸入的: ${escapeHtml(line.substring(0, 50))}...</small>`, 'warning');
                return;
            }

            // 驗證價格是否為數字
            const price = parseInt(parts[1].trim());
            if (isNaN(price) || price <= 0) {
                showToast(`第 ${i + 1} 行價格格式錯誤: 「${escapeHtml(parts[1].trim())}」不是有效的價格<br><small>請輸入數字，例如: 680</small>`, 'warning');
                return;
            }

            const rawUrl = parts[2]?.trim() || '';
            const productId = currentManualSource === 'momo'
                ? extractMomoCodeFromUrl(rawUrl)
                : `manual_${i}`;

            products.push({
                name: parts[0].trim(),
                price: price,
                product_id: productId,
                url: rawUrl
            });
        }

        if (currentManualSource === 'pchome') {
            pchomeProducts = products;
            document.getElementById('pchomeCount').textContent = `${products.length} 筆商品`;
            document.getElementById('pchomeCount').classList.replace('bg-secondary', 'bg-info');
        } else {
            momoProducts = products;
            document.getElementById('momoCount').textContent = `${products.length} 筆商品`;
            document.getElementById('momoCount').classList.replace('bg-secondary', 'bg-warning');
        }

        updateCompareButton();
        bootstrap.Modal.getInstance(document.getElementById('manualInputModal')).hide();
        document.getElementById('manualInput').value = '';
        showToast(`成功新增 ${products.length} 筆商品`, 'success');
    }

    function updateCompareButton() {
        const btn = document.getElementById('compareBtn');
        btn.disabled = !(pchomeProducts.length > 0 && momoProducts.length > 0);
    }

    async function runComparison() {
        showProgress('比價中...', '分析商品相似度');

        try {
            const response = await fetchWithCSRF('/api/price_comparison/quick_compare', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    pchome_products: pchomeProducts,
                    momo_products: momoProducts
                })
            });

            const data = await response.json();
            hideProgress();

            if (data.success) {
                comparisonResult = data.data;
                displayResult(comparisonResult);
                showToast(`比價完成，匹配 ${comparisonResult.matched_count} 筆`, 'success');
            } else {
                showToast(data.message, 'danger');
            }
        } catch (error) {
            hideProgress();
            showToast('比價失敗: ' + error.message, 'danger');
        }
    }

    function displayResult(result) {
        // 更新統計
        document.getElementById('matchedCount').textContent = result.matched_count;
        document.getElementById('pchomeCheaperCount').textContent = result.stats.pchome_cheaper_count;
        document.getElementById('momoCheaperCount').textContent = result.stats.momo_cheaper_count;
        document.getElementById('avgPriceDiff').textContent = `$${result.stats.avg_price_diff}`;

        // 建立表格
        const tbody = document.getElementById('resultBody');
        tbody.innerHTML = '';

        for (const m of result.matches) {
            const row = document.createElement('tr');

            const similarityClass = m.similarity >= 0.8 ? 'text-success' : (m.similarity >= 0.6 ? 'text-warning' : 'text-danger');
            const cheaperBadge = m.cheaper_at === 'pchome'
                ? '<span class="badge bg-info">PChome</span>'
                : (m.cheaper_at === 'momo' ? '<span class="badge bg-warning text-dark">MOMO</span>' : '<span class="badge bg-secondary">相同</span>');

            // 處理 URL (可能是 url 或 product_url)
            const pchomeUrl = m.pchome.url || m.pchome.product_url || '';
            const momoUrl = m.momo.url || m.momo.product_url || '';

            row.innerHTML = `
                <td>
                    <div class="d-flex align-items-start">
                        <div class="flex-grow-1">
                            <small class="text-truncate d-block" style="max-width: 220px;" title="${escapeHtml(m.pchome.name)}">
                                ${escapeHtml(m.pchome.name)}
                            </small>
                            <small class="text-muted">${m.pchome.product_id || ''}</small>
                        </div>
                        ${pchomeUrl ? `<a href="${pchomeUrl}" target="_blank" class="btn btn-sm btn-outline-info ms-1" title="前往 PChome 查看"><i class="fas fa-external-link-alt"></i></a>` : ''}
                    </div>
                </td>
                <td>
                    <div class="d-flex align-items-start">
                        <div class="flex-grow-1">
                            <small class="text-truncate d-block" style="max-width: 220px;" title="${escapeHtml(m.momo.name)}">
                                ${escapeHtml(m.momo.name)}
                            </small>
                            <small class="text-muted">${m.momo.product_id || ''}</small>
                        </div>
                        ${momoUrl ? `<a
                            href="${momoUrl}"
                            target="_blank"
                            class="btn btn-sm btn-outline-warning ms-1 momo-tracked-link"
                            title="前往 MOMO 查看"
                            data-momo-original-url="${momoUrl}"
                            data-track-platform="momo"
                            data-track-source="price-comparison"
                            data-track-product-id="${escapeHtml((m.momo.product_id || '').toString())}"
                            data-track-icode="${escapeHtml((m.momo.product_id || '').toString())}"
                            data-track-product-name="${escapeHtml(m.momo.name)}">
                            <i class="fas fa-external-link-alt"></i>
                        </a>` : ''}
                    </div>
                </td>
                <td class="text-center ${similarityClass}">
                    <strong>${Math.round(m.similarity * 100)}%</strong>
                </td>
                <td class="text-end ${m.cheaper_at === 'pchome' ? 'text-success fw-bold' : ''}">
                    $${m.pchome.price.toLocaleString()}
                </td>
                <td class="text-end ${m.cheaper_at === 'momo' ? 'text-warning fw-bold' : ''}">
                    $${m.momo.price.toLocaleString()}
                </td>
                <td class="text-end ${m.price_diff < 0 ? 'text-success' : (m.price_diff > 0 ? 'text-danger' : '')}">
                    ${m.price_diff > 0 ? '+' : ''}$${m.price_diff}
                    <br><small>(${m.price_diff_percent}%)</small>
                </td>
                <td class="text-center">
                    ${cheaperBadge}
                </td>
            `;
            tbody.appendChild(row);
        }

        document.getElementById('resultSection').style.display = 'block';
    }

    function exportResult() {
        if (!comparisonResult || !comparisonResult.matches.length) {
            showToast('沒有資料可匯出', 'warning');
            return;
        }

        const headers = ['PChome商品', 'MOMO商品', '相似度%', 'PChome價', 'MOMO價', '價差', '較便宜'];
        const rows = comparisonResult.matches.map(m => [
            `"${m.pchome.name.replace(/"/g, '""')}"`,
            `"${m.momo.name.replace(/"/g, '""')}"`,
            Math.round(m.similarity * 100),
            m.pchome.price,
            m.momo.price,
            m.price_diff,
            m.cheaper_at
        ]);

        const csv = '\uFEFF' + [headers.join(','), ...rows.map(r => r.join(','))].join('\n');
        downloadFile(csv, 'price_comparison.csv', 'text/csv;charset=utf-8');
    }

    function showProgress(title, detail) {
        document.getElementById('progressText').textContent = title;
        document.getElementById('progressDetail').textContent = detail;
        document.getElementById('progressSection').style.display = 'block';
    }

    function hideProgress() {
        document.getElementById('progressSection').style.display = 'none';
    }

    function downloadFile(content, filename, type) {
        const blob = new Blob([content], { type });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = filename;
        a.click();
        URL.revokeObjectURL(url);
    }

    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    function extractMomoCodeFromUrl(url) {
        const target = (url || '').trim();
        if (!target) {
            return '';
        }
        try {
            const parsed = new URL(target, location.origin);
            const iCode = parsed.searchParams.get('i_code');
            if (iCode) {
                return iCode.trim();
            }
        } catch (error) {
            // ignore
        }
        const match = /[?&]i_code=([^&#]+)/i.exec(target);
        return match ? decodeURIComponent(match[1] || '').trim() : '';
    }

    function showToast(message, type = 'info') {
        const toast = document.createElement('div');
        toast.className = `alert alert-${type} position-fixed`;
        toast.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
        toast.innerHTML = `
            <button type="button" class="btn-close float-end" onclick="this.parentElement.remove()"></button>
            ${message}
        `;
        document.body.appendChild(toast);
        setTimeout(() => toast.remove(), 5000);
    }
</script>
{% endblock %}