<?php
/**
 * HuSNS - 一款免费开源的社交平台
 */
$currentPage = 'profile';
$pageType = 'report_manage';
$this->setLayout('app');
?>
<style>
    .report-list {
        padding: 12px;
    }

    .report-item {
        background-color: var(--card-color);
        border-radius: 10px;
        padding: 14px;
        margin-bottom: 10px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    }

    .report-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    .report-id {
        font-size: 15px;
        font-weight: 600;
        color: var(--text-color);
    }

    .report-status {
        font-size: 12px;
        padding: 4px 10px;
        border-radius: 12px;
        flex-shrink: 0;
    }

    .report-status.pending {
        background-color: #fff3cd;
        color: #856404;
    }

    .report-status.resolved {
        background-color: #d1e7dd;
        color: #0f5132;
    }

    .report-status.dismissed {
        background-color: #f8d7da;
        color: #842029;
    }

    .report-content {
        margin-bottom: 10px;
    }

    .report-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 6px;
    }

    .report-reason {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-color);
    }

    .report-detail {
        font-size: 14px;
        color: var(--text-secondary-color);
        margin-bottom: 6px;
        padding: 8px 10px;
        background-color: rgba(0,0,0,0.03);
        border-radius: 6px;
    }

    .report-meta {
        font-size: 12px;
        color: var(--text-secondary-color);
        margin-bottom: 8px;
    }

    .report-time {
        font-size: 12px;
        color: var(--text-secondary-color);
    }

    .post-preview {
        background-color: rgba(0,0,0,0.03);
        border-radius: 8px;
        padding: 10px;
        margin-top: 8px;
    }

    .post-preview-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 6px;
    }

    .post-label {
        font-size: 12px;
        color: var(--text-secondary-color);
        font-weight: 500;
    }

    .post-author {
        font-size: 12px;
        color: var(--text-secondary-color);
    }

    .post-preview-content {
        font-size: 14px;
        color: var(--text-color);
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .report-actions {
        display: flex;
        gap: 8px;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid var(--border-color);
    }

    .report-action-btn {
        flex: 1;
        padding: 9px 12px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .report-action-btn.view {
        background-color: var(--primary-color);
        color: white;
    }

    .report-action-btn.resolve {
        background-color: #10b981;
        color: white;
    }

    .report-action-btn.dismiss {
        background-color: var(--border-color);
        color: var(--text-color);
    }

    .empty-state {
        text-align: center;
        padding: 40px 20px;
        color: var(--text-secondary-color);
    }

    .empty-icon {
        font-size: 48px;
        margin-bottom: 12px;
    }

    .loading-indicator {
        text-align: center;
        padding: 40px;
        color: var(--text-secondary-color);
    }
</style>

<div class="report-list" id="reportList">
    <div class="loading-indicator">加载中...</div>
</div>

<script>
const BASE_URL = '<?php echo Helper::getBaseUrl(); ?>';

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

async function loadReports() {
    try {
        const response = await fetch(BASE_URL + '/?r=mobileApi/getReports');
        const result = await response.json();

        const container = document.getElementById('reportList');

        if (result.code === 0 && result.data && result.data.items && result.data.items.length > 0) {
            container.innerHTML = result.data.items.map(report => renderReportItem(report)).join('');
        } else {
            container.innerHTML = `
                <div class="empty-state">
                    <div class="empty-icon">📭</div>
                    <div>暂无举报内容</div>
                </div>
            `;
        }
    } catch (error) {
        console.error('加载举报列表失败:', error);
        document.getElementById('reportList').innerHTML = `
            <div class="empty-state">
                <div class="empty-icon">❌</div>
                <div>加载失败，请重试</div>
            </div>
        `;
    }
}

function renderReportItem(report) {
    const reasonMap = {
        spam: '垃圾广告',
        porn: '色情低俗',
        violence: '暴力血腥',
        fraud: '欺诈诈骗',
        harassment: '人身攻击',
        privacy: '侵犯隐私',
        copyright: '抄袭侵权',
        other: '其他'
    };

    const statusMap = {
        0: { label: '待处理', class: 'pending' },
        1: { label: '已处理', class: 'resolved' },
        2: { label: '已驳回', class: 'dismissed' }
    };

    const status = statusMap[report.status] || statusMap[0];

    return `
        <div class="report-item" data-id="${report.id}">
            <div class="report-header">
                <span class="report-id">举报 #${report.id}</span>
                <span class="report-status ${status.class}">${status.label}</span>
            </div>
            <div class="report-content">
                <div class="report-row">
                    <span class="report-reason">${reasonMap[report.reason] || report.reason}</span>
                    <span class="report-time">${formatTime(report.created_at)}</span>
                </div>
                ${report.detail ? `<div class="report-detail">${escapeHtml(report.detail)}</div>` : ''}
                ${report.reporter_username ? `<div class="report-meta">举报者：@${escapeHtml(report.reporter_username)}</div>` : ''}
                ${report.post ? `
                    <div class="post-preview">
                        <div class="post-preview-header">
                            <span class="post-label">举报内容</span>
                            <span class="post-author">@${escapeHtml(report.post.username || '')}</span>
                        </div>
                        <div class="post-preview-content">${escapeHtml(report.post.content || '')}</div>
                    </div>
                ` : ''}
            </div>
            ${report.status === 0 ? `
                <div class="report-actions">
                    <button class="report-action-btn view" onclick="viewPost(${report.post_id})">查看帖子</button>
                    <button class="report-action-btn resolve" onclick="handleReport(${report.id}, 1)">处理举报</button>
                    <button class="report-action-btn dismiss" onclick="handleReport(${report.id}, 2)">驳回举报</button>
                </div>
            ` : ''}
        </div>
    `;
}

function viewPost(postId) {
    window.location.href = BASE_URL + '/?r=mobile/detail&id=' + postId;
}

function handleReport(reportId, status) {
    let handleResult = '';
    
    if (status === 1) {
        // 处理举报时可输入处理结果
        handleResult = prompt('请输入处理结果说明（可选）:', '已核实，该内容确实存在违规，已对相关内容进行处理');
        if (handleResult === null) return; // 用户取消
        doHandleReport(reportId, status, handleResult);
    } else {
        // 驳回举报时确认
        showConfirm('确定要驳回此举报吗？', function(confirmed) {
            if (!confirmed) return;
            doHandleReport(reportId, status, '');
        });
    }
}

async function doHandleReport(reportId, status, handleResult) {
    try {
        const response = await fetch(BASE_URL + '/?r=mobileApi/handleReport', {
            method: 'POST',
            credentials: 'include',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ 
                report_id: reportId, 
                status: status,
                handle_result: handleResult || ''
            })
        });

        const result = await response.json();

        if (result.code === 0) {
            showToast(status === 1 ? '已处理举报' : '已驳回举报');
            loadReports();
        } else {
            showToast(result.message || '操作失败');
        }
    } catch (error) {
        console.error('处理举报失败:', error);
        showToast('操作失败，请重试');
    }
}

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

// 确认对话框
function showConfirm(message, callback) {
    const confirmDiv = document.createElement('div');
    confirmDiv.style.cssText = `
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10000;
    `;
    
    const dialog = document.createElement('div');
    dialog.style.cssText = `
        background: white;
        border-radius: 12px;
        padding: 24px;
        width: 280px;
        text-align: center;
    `;
    
    const messageEl = document.createElement('p');
    messageEl.textContent = message;
    messageEl.style.marginBottom = '20px';
    messageEl.style.fontSize = '16px';
    messageEl.style.color = '#333';
    
    const btnWrap = document.createElement('div');
    btnWrap.style.display = 'flex';
    btnWrap.style.gap = '12px';
    
    const cancelBtn = document.createElement('button');
    cancelBtn.textContent = '取消';
    cancelBtn.style.cssText = `
        flex: 1;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 8px;
        background: white;
        color: #666;
        font-size: 14px;
        cursor: pointer;
    `;
    cancelBtn.onclick = function() {
        document.body.removeChild(confirmDiv);
        callback(false);
    };
    
    const confirmBtn = document.createElement('button');
    confirmBtn.textContent = '确定';
    confirmBtn.style.cssText = `
        flex: 1;
        padding: 10px;
        border: none;
        border-radius: 8px;
        background: #007aff;
        color: white;
        font-size: 14px;
        cursor: pointer;
    `;
    confirmBtn.onclick = function() {
        document.body.removeChild(confirmDiv);
        callback(true);
    };
    
    btnWrap.appendChild(cancelBtn);
    btnWrap.appendChild(confirmBtn);
    dialog.appendChild(messageEl);
    dialog.appendChild(btnWrap);
    confirmDiv.appendChild(dialog);
    document.body.appendChild(confirmDiv);
}

// Toast提示
function showToast(msg) {
    const t = document.createElement('div');
    t.style.cssText = 'position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.75);color:#fff;padding:12px 24px;border-radius:8px;font-size:14px;z-index:10001;';
    t.textContent = msg;
    document.body.appendChild(t);
    setTimeout(() => {
        t.style.opacity = '0';
        t.style.transition = 'opacity 0.3s';
        setTimeout(() => t.remove(), 300);
    }, 2000);
}
</script>