<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ME图片管理 · 安全图片管家</title>
    <style>
        *{margin:0;padding:0;box-sizing:border-box}
        body{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);font-family:'Segoe UI',sans-serif;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
        .card{background:white;border-radius:24px;box-shadow:0 20px 40px rgba(0,0,0,0.1);padding:30px;width:100%;max-width:750px}
        h1{font-size:28px;color:#333;margin-bottom:8px;display:flex;align-items:center;gap:10px}
        h1:before{content:"📸";font-size:32px}
        .sub{color:#666;border-left:3px solid #667eea;padding-left:12px;margin-bottom:24px;font-size:14px}
        .form-group{margin-bottom:16px}
        label{display:block;font-weight:600;margin-bottom:6px;color:#555}
        input{width:100%;padding:12px 16px;border:1px solid #ddd;border-radius:12px;font-size:14px;outline:none}
        input:focus{border-color:#667eea}
        .btn{background:#667eea;color:white;border:none;padding:12px 24px;border-radius:24px;font-size:16px;font-weight:600;cursor:pointer;width:100%}
        .btn:hover{background:#5a67d8}
        .upload-area{border:2px dashed #ccc;border-radius:16px;padding:20px;text-align:center;cursor:pointer;margin:16px 0;transition:0.2s}
        .upload-area:hover{border-color:#667eea;background:#f8f9ff}
        .message{padding:12px 16px;border-radius:12px;margin:12px 0}
        .success{background:#d4edda;color:#155724;border-left:4px solid #28a745}
        .error{background:#f8d7da;color:#721c24;border-left:4px solid #dc3545}
        .info{background:#d1ecf1;color:#0c5460;border-left:4px solid #17a2b8}
        .url-box{background:#f0f4ff;padding:12px;border-radius:12px;word-break:break-all;font-family:monospace;font-size:13px;display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px}
        .copy-btn{background:#667eea;color:white;border:none;padding:6px 12px;border-radius:20px;cursor:pointer;font-size:12px}
        .image-grid{margin-top:20px;max-height:400px;overflow-y:auto}
        .image-item{background:#f8f9fa;border-radius:12px;padding:12px;display:flex;align-items:center;gap:12px;margin-bottom:10px}
        .image-preview{width:50px;height:50px;object-fit:cover;border-radius:10px}
        .image-info{flex:1}
        .image-name{font-weight:600;font-size:14px}
        .image-url{font-size:11px;color:#667eea;cursor:pointer;margin-top:4px;display:inline-block}
        .image-url:hover{text-decoration:underline}
        .flex-between{display:flex;justify-content:space-between;align-items:center}
        .logout-btn{background:#e0e0e0;color:#555;padding:6px 16px;border-radius:20px;font-size:13px;width:auto;cursor:pointer;border:none}
        .logout-btn:hover{background:#ccc}
        footer{text-align:center;margin-top:20px;font-size:12px;color:#888}
        .hidden{display:none}
        
        /* 进度条样式 */
        .progress-container{background:#e0e0e0;border-radius:20px;height:10px;margin:15px 0;overflow:hidden}
        .progress-bar{background:linear-gradient(90deg,#667eea,#764ba2);width:0%;height:100%;border-radius:20px;transition:width 0.3s ease}
        .progress-text{font-size:12px;text-align:center;margin-top:5px;color:#667eea;font-weight:500}
    </style>
</head>
<body>
<div class="card">
    <!-- 登录界面 -->
    <div id="loginPanel">
        <h1>ME图片管理</h1>
        <div class="sub">安全 · 轻量 · 图片管家</div>
        <div id="loginMsg"></div>
        <div class="form-group"><label>用户名</label><input type="text" id="username" placeholder="mepic"></div>
        <div class="form-group"><label>密码</label><input type="password" id="password" placeholder="········"></div>
        <button class="btn" id="loginBtn">登入控制台</button>
        <footer>图片默认保留一年 · 支持 JPG/PNG/GIF ≤2MB</footer>
    </div>
    
    <!-- 管理界面 -->
    <div id="adminPanel" class="hidden">
        <div class="flex-between">
            <h1>ME图片管理</h1>
            <button class="logout-btn" id="logoutBtn">退出登录</button>
        </div>
        <div class="sub">上传即生效 · 1年自动清除 · 过期自动删除</div>
        <div id="adminMsg"></div>
        <div class="upload-area" id="uploadZone">
            <div>📤 点击或拖拽图片上传</div>
            <div style="font-size:12px;color:#888;margin-top:8px">支持 JPG/PNG/GIF，最大2MB</div>
            <input type="file" id="fileInput" accept="image/jpeg,image/png,image/gif" style="display:none">
        </div>
        
        <!-- 进度条区域 -->
        <div id="progressArea" class="hidden">
            <div class="progress-container">
                <div class="progress-bar" id="progressBar"></div>
            </div>
            <div class="progress-text" id="progressText">0%</div>
        </div>
        
        <div id="quickUrl"></div>
        <div id="imageGrid" class="image-grid"></div>
        <footer>© ME图片管理 · 文件自动清理，无需手动删除</footer>
    </div>
</div>

<script>
    const apiUrl = window.location.pathname.replace(/[^/]*$/, '') + 'api.aspx';
    let images = [];
    
    // 格式化日期为中文年月日
    function formatChineseDate(timestamp) {
        if (!timestamp) return '永久有效';
        var date = new Date(parseInt(timestamp));
        if (isNaN(date.getTime())) return '永久有效';
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        return year + '年' + month + '月' + day + '日';
    }
    
    // 显示消息
    function showMessage(containerId, msg, type) {
        const div = document.getElementById(containerId);
        if (div) {
            div.innerHTML = '<div class="message ' + type + '">' + msg + '</div>';
            setTimeout(() => { if (div) div.innerHTML = ''; }, 3000);
        }
    }
    
    // 显示进度条
    function showProgress(percent) {
        const progressArea = document.getElementById('progressArea');
        const progressBar = document.getElementById('progressBar');
        const progressText = document.getElementById('progressText');
        
        if (progressArea) progressArea.classList.remove('hidden');
        if (progressBar) progressBar.style.width = percent + '%';
        if (progressText) progressText.innerText = Math.floor(percent) + '%';
        
        // 上传完成后3秒隐藏进度条
        if (percent >= 100) {
            setTimeout(() => {
                if (progressArea) progressArea.classList.add('hidden');
                if (progressBar) progressBar.style.width = '0%';
                if (progressText) progressText.innerText = '0%';
            }, 2000);
        }
    }
    
    // 隐藏进度条
    function hideProgress() {
        const progressArea = document.getElementById('progressArea');
        if (progressArea) progressArea.classList.add('hidden');
    }
    
    // 复制链接
    function copyUrl(url) {
        navigator.clipboard.writeText(url).then(() => {
            showMessage('adminMsg', '✅ 链接已复制', 'success');
        }).catch(() => {
            // 降级方案
            const textarea = document.createElement('textarea');
            textarea.value = url;
            document.body.appendChild(textarea);
            textarea.select();
            document.execCommand('copy');
            document.body.removeChild(textarea);
            showMessage('adminMsg', '✅ 链接已复制', 'success');
        });
    }
    
    // 格式化文件大小
    function formatSize(bytes) {
        if (bytes < 1024) return bytes + ' B';
        if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
        return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
    }
    
    // 转义HTML
    function escapeHtml(str) {
        if (!str) return '';
        return str.replace(/[&<>]/g, function(m) {
            if (m === '&') return '&amp;';
            if (m === '<') return '&lt;';
            if (m === '>') return '&gt;';
            return m;
        });
    }
    
    // 渲染图片列表（无删除按钮）
    function renderImages() {
        const grid = document.getElementById('imageGrid');
        if (!grid) return;
        
        if (images.length === 0) {
            grid.innerHTML = '<div style="text-align:center;padding:20px;color:#888">✨ 暂无图片，点击上方区域上传~</div>';
            return;
        }
        
        let html = '';
        for (let i = 0; i < images.length; i++) {
            const img = images[i];
            const expiryChinese = formatChineseDate(img.expiryTime);
            html += '<div class="image-item">';
            html += '<img class="image-preview" src="' + img.url + '" onerror="this.src=\'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23ccc%22%3E%3Cpath%20d%3D%22M4%204h16v16H4z%22%2F%3E%3C%2Fsvg%3E\'">';
            html += '<div class="image-info">';
            html += '<div class="image-name">' + escapeHtml(img.originalName || img.name) + '</div>';
            html += '<div style="font-size:11px;color:#888">' + formatSize(img.size) + ' · 有效期至 ' + expiryChinese + '</div>';
            html += '<div class="image-url" onclick="copyUrl(\'' + img.url + '\')">📎 点击复制图片链接</div>';
            html += '</div>';
            html += '</div>';
        }
        grid.innerHTML = html;
    }
    
    // 加载图片列表
    async function loadImages() {
        try {
            const resp = await fetch(apiUrl + '?action=list');
            const data = await resp.json();
            if (data.success) {
                images = data.images || [];
                renderImages();
            }
        } catch(e) {
            console.error(e);
        }
    }
    
    // 上传文件（带进度条）
    function uploadFile(file) {
        const ext = file.name.split('.').pop().toLowerCase();
        if (!['jpg', 'jpeg', 'png', 'gif'].includes(ext)) {
            showMessage('adminMsg', '❌ 只支持 JPG/PNG/GIF 格式', 'error');
            return;
        }
        if (file.size > 2 * 1024 * 1024) {
            showMessage('adminMsg', '❌ 文件不能超过2MB', 'error');
            return;
        }
        
        // 使用 XMLHttpRequest 实现进度条
        const xhr = new XMLHttpRequest();
        const fd = new FormData();
        fd.append('image', file);
        
        // 进度监听
        xhr.upload.addEventListener('progress', function(e) {
            if (e.lengthComputable) {
                const percent = (e.loaded / e.total) * 100;
                showProgress(percent);
            }
        });
        
        xhr.addEventListener('loadstart', function() {
            showProgress(0);
            showMessage('adminMsg', '📤 正在上传...', 'info');
        });
        
        xhr.addEventListener('load', function() {
            if (xhr.status === 200) {
                try {
                    const data = JSON.parse(xhr.responseText);
                    if (data.success) {
                        showProgress(100);
                        loadImages();
                        showMessage('adminMsg', '✅ 上传成功！有效期1年', 'success');
                        const urlDiv = document.getElementById('quickUrl');
                        if (urlDiv) {
                            urlDiv.innerHTML = '<div class="url-box"><span>🔗 ' + data.url + '</span><button class="copy-btn" onclick="copyUrl(\'' + data.url + '\')">复制链接</button></div>';
                        }
                    } else {
                        showMessage('adminMsg', '❌ ' + (data.error || '上传失败'), 'error');
                        hideProgress();
                    }
                } catch(e) {
                    showMessage('adminMsg', '❌ 上传失败，请重试', 'error');
                    hideProgress();
                }
            } else {
                showMessage('adminMsg', '❌ 上传失败：服务器错误', 'error');
                hideProgress();
            }
        });
        
        xhr.addEventListener('error', function() {
            showMessage('adminMsg', '❌ 网络错误，上传失败', 'error');
            hideProgress();
        });
        
        xhr.open('POST', apiUrl + '?action=upload');
        xhr.send(fd);
    }
    
    // 登录
    async function login() {
        const username = document.getElementById('username').value.trim();
        const password = document.getElementById('password').value;
        
        if (!username || !password) {
            showMessage('loginMsg', '请输入用户名和密码', 'error');
            return;
        }
        
        const fd = new FormData();
        fd.append('username', username);
        fd.append('password', password);
        
        try {
            const resp = await fetch(apiUrl + '?action=login', { method: 'POST', body: fd });
            const data = await resp.json();
            if (data.success) {
                document.getElementById('loginPanel').classList.add('hidden');
                document.getElementById('adminPanel').classList.remove('hidden');
                await loadImages();
            } else {
                showMessage('loginMsg', data.error || '登录失败', 'error');
            }
        } catch(e) {
            showMessage('loginMsg', '请求失败：' + e.message, 'error');
        }
    }
    
    // 退出
    async function logout() {
        await fetch(apiUrl + '?action=logout');
        document.getElementById('loginPanel').classList.remove('hidden');
        document.getElementById('adminPanel').classList.add('hidden');
        document.getElementById('username').value = '';
        document.getElementById('password').value = '';
        // 清空上传成功显示的URL
        const urlDiv = document.getElementById('quickUrl');
        if (urlDiv) urlDiv.innerHTML = '';
    }
    
    // 检查登录状态
    async function checkAuth() {
        try {
            const resp = await fetch(apiUrl + '?action=check');
            const data = await resp.json();
            if (data.authenticated) {
                document.getElementById('loginPanel').classList.add('hidden');
                document.getElementById('adminPanel').classList.remove('hidden');
                await loadImages();
            }
        } catch(e) {
            console.log('未登录');
        }
    }
    
    // 绑定事件
    document.getElementById('loginBtn').onclick = login;
    document.getElementById('logoutBtn').onclick = logout;
    
    const uploadZone = document.getElementById('uploadZone');
    const fileInput = document.getElementById('fileInput');
    
    if (uploadZone) {
        uploadZone.onclick = () => fileInput.click();
        
        uploadZone.ondragover = (e) => {
            e.preventDefault();
            uploadZone.style.borderColor = '#667eea';
            uploadZone.style.background = '#f8f9ff';
        };
        
        uploadZone.ondragleave = () => {
            uploadZone.style.borderColor = '#ccc';
            uploadZone.style.background = 'transparent';
        };
        
        uploadZone.ondrop = (e) => {
            e.preventDefault();
            uploadZone.style.borderColor = '#ccc';
            uploadZone.style.background = 'transparent';
            if (e.dataTransfer.files[0]) uploadFile(e.dataTransfer.files[0]);
        };
    }
    
    if (fileInput) {
        fileInput.onchange = (e) => {
            if (e.target.files[0]) uploadFile(e.target.files[0]);
            fileInput.value = '';
        };
    }
    
    // 启动
    checkAuth();
    
    // 每30秒自动刷新图片列表（检查过期自动删除）
    setInterval(function() {
        if (document.getElementById('adminPanel') && !document.getElementById('adminPanel').classList.contains('hidden')) {
            loadImages();
        }
    }, 30000);
</script>
</body>
</html>