// ==UserScript==
// @name         福利云xwteam金价信息美化显示
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  美化https://free.xwteam.cn/api/gold/trade页面的JSON数据显示
// @author       Dr.S
// @match        https://free.xwteam.cn/api/gold/trade
// @grant        MIT

// ==/UserScript==

(function() {
    'use strict';

    // 大字号触控样式
    GM_addStyle(`
        :root {
            --primary-color: #2c3e50;
            --buy-color: #e55039;
            --sell-color: #2ecc71;
            --bg-color: #f4f5f7;
        }
        * {
            box-sizing: border-box;
        }
        body {
            margin: 0;
            background: var(--bg-color);
            font-family: -apple-system, BlinkMacSystemFont,
                        'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
                        sans-serif;
        }
        .container {
            padding: 10px;
            max-width: 600px;
            margin: 0 auto;
        }
        .header {
            background: white;
            padding: 16px;
            border-radius: 16px;
            margin-bottom: 12px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
        }
        .update-time {
            font-size: 15px;
            color: #666;
            text-align: center;
            margin: 8px 0;
        }
        .commodity-card {
            background: white;
            border-radius: 16px;
            margin-bottom: 12px;
            padding: 16px;
            box-shadow: 0 3px 6px rgba(0,0,0,0.1);
        }
        .commodity-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        .commodity-name {
            font-size: 18px;
            font-weight: 700;
            color: var(--primary-color);
        }
        .commodity-symbol {
            font-size: 14px;
            color: #666;
            background: #f0f2f5;
            padding: 4px 8px;
            border-radius: 4px;
        }
        .price-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }
        .price-item {
            padding: 12px;
            border-radius: 8px;
            border: 1px solid #eee;
        }
        .price-label {
            font-size: 14px;
            color: #666;
            margin-bottom: 6px;
        }
        .price-value {
            font-size: 20px;
            font-weight: 700;
            font-family: 'Roboto Mono', monospace;
        }
        .buy .price-value { color: var(--buy-color); }
        .sell .price-value { color: var(--sell-color); }
        .price-range {
            display: flex;
            justify-content: space-between;
            margin-top: 12px;
            font-size: 14px;
            color: #666;
        }
        .section-title {
            font-size: 20px;
            font-weight: 700;
            color: var(--primary-color);
            margin: 20px 0 12px;
            padding-left: 8px;
        }
        @media (max-width: 375px) {
            .price-value {
                font-size: 18px;
            }
        }
    `);

    function init() {
        GM_xmlhttpRequest({
            method: "GET",
            url: window.location.href,
            onload: function(response) {
                try {
                    const data = JSON.parse(response.responseText.replace('x1.00', ''));
                    renderUltraClearView(data.data);
                } catch (e) {
                    document.body.innerHTML = `<div class="container">数据解析失败</div>`;
                }
            }
        });
    }

    function renderUltraClearView(data) {
        const container = document.createElement('div');
        container.className = 'container';

        container.innerHTML = `
            <div class="header">
                <div class="update-time">📅 更新于 ${data.UpTime}</div>
            </div>
            ${createSection('基础金属', data.LF)}
            ${createSection('上海黄金', data.SH)}
            ${createSection('国际行情', data.GJ)}
        `;

        document.body.innerHTML = '';
        document.body.appendChild(container);
    }

    function createSection(title, items) {
        return `
            <div>
                <h2 class="section-title">${title}</h2>
                ${items.map(item => `
                    <div class="commodity-card">
                        <div class="commodity-header">
                            <span class="commodity-name">${item.Name}</span>
                            <span class="commodity-symbol">${item.Symbol}</span>
                        </div>
                        <div class="price-grid">
                            <div class="price-item buy">
                                <div class="price-label">买入价</div>
                                <div class="price-value">${formatPrice(item.BP)}</div>
                            </div>
                            <div class="price-item sell">
                                <div class="price-label">卖出价</div>
                                <div class="price-value">${formatPrice(item.SP)}</div>
                            </div>
                        </div>
                        <div class="price-range">
                            <span>▲ ${formatPrice(item.High)}</span>
                            <span>▼ ${formatPrice(item.Low)}</span>
                        </div>
                    </div>
                `).join('')}
            </div>
        `;
    }

    function formatPrice(num) {
        if (!num && num !== 0) return '-';
        return num.toLocaleString('en', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });
    }

    init();
})();