<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>数据库版短链接生成器</title>
    <style>
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; max-width: 600px; margin: 50px auto; padding: 20px; line-height: 1.6; color: #333; }
        h2 { border-bottom: 2px solid #007bff; padding-bottom: 10px; }
        input { width: 70%; padding: 12px; font-size: 16px; border: 1px solid #ddd; border-radius: 4px; }
        button { padding: 12px 24px; cursor: pointer; background: #007bff; color: white; border: none; font-size: 16px; border-radius: 4px; margin-left: 5px;}
        button:hover { background: #0056b3; }
        #result { margin-top: 20px; padding: 15px; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 4px; display: none; word-break: break-all;}
        .error { color: #dc3545; }
        .success { color: #28a745; font-weight: bold; }
        .stats { margin-top: 10px; font-size: 0.9em; color: #666; }
    </style>
</head>
<body>
    <h2>🔗 数据库版短链接生成器</h2>
    <p>基于 MySQL 存储，支持高并发和点击统计。</p>
    <p>当前域名：<code>https://m.h5.tb.0497.org</code></p>
    
    <div>
        <input type="text" id="longUrl" placeholder="请输入需要缩短的链接 (https://...)" />
        <button onclick="generate()">生成</button>
    </div>

    <div id="result"></div>

    <script>
        function generate() {
            var urlInput = document.getElementById('longUrl');
            var resultDiv = document.getElementById('result');
            var url = urlInput.value;
            
            if(!url) { alert('请输入链接'); return; }

            resultDiv.style.display = 'block';
            resultDiv.innerHTML = '正在连接数据库生成...';
            resultDiv.className = '';

            var xhr = new XMLHttpRequest();
            // 请求自身
            xhr.open('GET', 'api.php?id=' + encodeURIComponent(url), true);
            
            xhr.onload = function() {
                if (xhr.status === 200) {
                    try {
                        var data = JSON.parse(xhr.responseText);
                        
                        if(data.status === 'success') {
                            resultDiv.innerHTML = '<span class="success">✅ 生成成功!</span><br>' +
                                '短链接：<a href="' + data.short + '" target="_blank" style="font-size:1.2em; color:#007bff;">' + data.short + '</a><br>' +
                                '<div class="stats">原链接：' + data.original + '</div>' +
                                (data.message ? '<small>(' + data.message + ')</small>' : '');
                        } else {
                            resultDiv.innerHTML = '<span class="error">❌ 失败:</span> ' + (data.message || '未知错误');
                        }
                    } catch (e) {
                        console.error('Raw Response:', xhr.responseText);
                        resultDiv.innerHTML = '<span class="error">❌ 解析失败:</span> 服务器返回了非 JSON 内容。<br>' +
                            '<small>请检查数据库配置或文件权限。<br>原始返回前100字符: ' + xhr.responseText.substring(0, 100) + '...</small>';
                    }
                } else {
                    resultDiv.innerHTML = '<span class="error">❌ 请求错误:</span> HTTP Status ' + xhr.status;
                }
            };
            
            xhr.onerror = function() {
                resultDiv.innerHTML = '<span class="error">❌ 网络错误:</span> 无法连接到服务器';
            };

            xhr.send();
        }
    </script>
</body>
</html>