<?php
$title='消息通知';
include __DIR__ . '/head.php';
?>
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
    <div class="px-4 py-3 bg-gray-50 border-b border-gray-100 flex items-center justify-between">
        <h3 class="font-medium text-gray-800 flex items-center">
            <i class="fas fa-bell text-indigo-500 mr-1.5"></i>
            消息通知
        </h3>
        <div id="readAll" class="hidden">
            <button onclick="readAll()" class="px-3 py-1.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg font-medium transition-colors text-sm">
                <i class="fas fa-envelope-open mr-1"></i>一键已读
            </button>
        </div>
    </div>
    <div class="p-4">
        <div class="space-y-2" id="list">
            <div class="flex items-center justify-center py-8">
                <div class="animate-spin rounded-full h-6 w-6 border-t-2 border-b-2 border-indigo-500"></div>
            </div>
        </div>
    </div>
    <div class="px-4 py-3 flex items-center justify-between border-t border-gray-100">
        <div class="text-sm text-gray-500">
            共 <span id="total" class="font-medium text-indigo-600">0</span> 条消息
        </div>
        <div class="flex items-center gap-2">
            <span class="text-sm text-gray-500">页码：</span>
            <select id="page" class="px-3 py-1.5 bg-gray-50 border border-gray-200 rounded-lg text-sm">
                <option value="1">1</option>
            </select>
        </div>
    </div>
</div>

<div class="text-center mt-4">
    <a href="javascript:history.back(-1)" class="text-sm text-gray-500 hover:text-gray-700 transition-colors">
        <i class="fas fa-arrow-left mr-1"></i>返回上一层
    </a>
</div>

<div id="appModal" class="fixed inset-0 z-50 hidden">
    <div class="fixed inset-0 bg-black/50 backdrop-blur-sm" onclick="closeModal()"></div>
    <div class="fixed inset-0 flex items-center justify-center p-4">
        <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md max-h-[85vh] flex flex-col">
            <div class="flex items-center justify-between px-5 py-4 border-b border-gray-100 bg-gray-50/50 rounded-t-2xl">
                <h3 id="modalTitle" class="text-lg font-semibold text-gray-800"></h3>
                <button onclick="closeModal()" class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-200 text-gray-400 hover:text-gray-600 transition-colors"><i class="fas fa-times"></i></button>
            </div>
            <div id="modalBody" class="px-5 py-4 overflow-y-auto"></div>
            <div id="modalFooter" class="px-5 py-3 border-t border-gray-100 hidden"></div>
        </div>
    </div>
</div>

<script>
function openModal(title, content, footerCallback) {
    document.getElementById('modalTitle').textContent = title;
    document.getElementById('modalBody').innerHTML = content;
    const modalFooter = document.getElementById('modalFooter');
    if (footerCallback) {
        modalFooter.innerHTML = footerCallback();
        modalFooter.classList.remove('hidden');
    } else {
        modalFooter.classList.add('hidden');
    }
    document.getElementById('appModal').classList.remove('hidden');
    document.body.style.overflow = 'hidden';
}

function closeModal() {
    document.getElementById('appModal').classList.add('hidden');
    document.body.style.overflow = '';
}

$(document).ready(function() {
    var pagesize = 30, page = 1;
    get_list(page, pagesize);
    $('#page').change(function() { get_list($(this).val(), pagesize); });
});

function get_list(page, pagesize) {
    showLoading();
    $.ajax({
        type: 'POST',
        data: {pagesize:pagesize, page:page},
        url: 'ajax.php?act=get_message',
        dataType: 'json',
        success: function(data) {
            hideLoading();
            if (data && data.data) {
                renderList(data.data);
                $('#total').html(data.total || 0);
                if(data.end >= 1){
                    $('#page').html('');
                    var end = data.end, cur = data.page;
                    var start = cur - 10 > 1 ? cur - 10 : 1;
                    var endPage = cur + 10 < end ? cur + 10 : end;
                    for(var i = start; i <= cur; i++) $('#page').append('<option value="' + i + '">' + i + '</option>');
                    for(var i = cur + 1; i <= endPage; i++) $('#page').append('<option value="' + i + '">' + i + '</option>');
                    $('#page').val(cur);
                }
                if(data.read_num >= 1) $("#readAll").removeClass('hidden');
            } else {
                renderList([]);
                $('#total').html(0);
            }
        },
        error: function(){ hideLoading(); showToast('服务器错误'); }
    });
}

function renderList(data) {
    $("#list").empty();
    if(data.length === 0){
        $("#list").html('<div class="text-center py-8 text-gray-400"><i class="fas fa-bell-slash text-3xl mb-2"></i><p class="text-sm">暂无消息通知</p></div>');
        return;
    }
    var msgData = {};
    $.each(data, function(i, v) {
        msgData[v.id] = {read: v.read, content: v.content};
        var badge = v.read == false ? '<span class="ml-2 px-1.5 py-0.5 bg-red-100 text-red-700 rounded text-xs" id="read' + v.id + '">未读</span>' : '';
        var bg = v.read == false ? 'bg-blue-50' : 'bg-gray-50';
        var tmp = '<div class="rounded-lg p-3 border border-gray-100 ' + bg + '">' +
            '<div class="flex justify-between items-center">' +
            '<div class="flex-1 min-w-0"><h4 class="font-medium text-gray-800 text-sm truncate flex items-center">' + v.title + badge + '</h4></div>' +
            '<div class="flex items-center gap-2 flex-shrink-0">' +
            '<button class="px-2 py-1 bg-indigo-100 hover:bg-indigo-200 text-indigo-700 rounded text-xs transition-colors" onclick="showDetail(' + v.id + ')">查看</button>' +
            '</div></div>' +
            '<div class="text-xs text-gray-400 mt-2 text-right">' + v.addtime + '</div></div>';
        $("#list").append(tmp);
    });
    window.msgData = msgData;
}

function showDetail(id) {
    var data = window.msgData[id];
    if(!data) return;
    if(data.read == false){
        $.get('ajax.php?act=set_message&id=' + id, function(d) {
            if(d.code == 1){
                $("#read" + id).html("已读").attr("class", "px-1.5 py-0.5 bg-green-100 text-green-700 rounded text-xs");
                data.read = true;
            }
        }, 'json');
    }
    openModal('通知详情', data.content, function() {
        return '<button onclick="closeModal()" class="w-full py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg font-medium transition-colors">关闭</button>';
    });
}

function readAll() {
    $.get('ajax.php?act=set_message&types=1', function(d) {
        if(d.code == 1){ showToast(d.msg); location.reload(); }
    }, 'json');
}
</script>
