{% extends "base.html" %}
{% block title %}通知中心 - 智联青云{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto py-8 px-4 sm:px-6">
    <!-- 头部区域 -->
    <div class="bg-white rounded-3xl p-6 shadow-sm border border-slate-100 mb-6 flex flex-col sm:flex-row sm:items-center justify-between gap-4 relative overflow-hidden group">
        <div class="absolute top-0 right-0 w-32 h-32 bg-indigo-50/50 rounded-bl-full -z-10 group-hover:scale-110 transition-transform duration-500"></div>
        <div class="flex items-center gap-4">
            <div class="w-12 h-12 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-2xl flex items-center justify-center text-white shadow-lg shadow-indigo-200 transform group-hover:rotate-12 transition-transform duration-300">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
            </div>
            <div>
                <h1 class="text-2xl font-extrabold text-slate-900 tracking-tight">通知中心</h1>
                <p class="text-sm text-slate-500 font-medium mt-0.5">查看系统通知、审核结果及最新公告</p>
            </div>
        </div>
        <button onclick="markAllRead()" class="px-5 py-2.5 text-sm font-bold text-slate-600 bg-slate-50 border border-slate-200 rounded-xl hover:bg-white hover:text-indigo-600 hover:border-indigo-200 hover:shadow-sm transition-all flex items-center gap-2 group/btn">
            <svg class="w-4 h-4 text-slate-400 group-hover/btn:text-indigo-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
            全部标为已读
        </button>
    </div>

    <!-- 标签切换 (玻璃拟物化) -->
    <div class="bg-white/80 backdrop-blur-md rounded-2xl p-1.5 shadow-sm border border-slate-100 mb-6 flex overflow-x-auto hide-scrollbar sticky top-4 z-10">
        <button onclick="switchTab('all')" id="tab-all" class="flex-1 min-w-[100px] px-4 py-2.5 text-sm font-bold bg-white text-indigo-600 shadow-sm rounded-xl transition-all duration-300">全部</button>
        <button onclick="switchTab('system')" id="tab-system" class="flex-1 min-w-[100px] px-4 py-2.5 text-sm font-medium text-slate-500 hover:text-slate-800 hover:bg-slate-50 rounded-xl transition-all duration-300">📢 系统公告</button>
        <button onclick="switchTab('teacher')" id="tab-teacher" class="flex-1 min-w-[100px] px-4 py-2.5 text-sm font-medium text-slate-500 hover:text-slate-800 hover:bg-slate-50 rounded-xl transition-all duration-300">👨‍🏫 教师相关</button>
        <button onclick="switchTab('contest')" id="tab-contest" class="flex-1 min-w-[100px] px-4 py-2.5 text-sm font-medium text-slate-500 hover:text-slate-800 hover:bg-slate-50 rounded-xl transition-all duration-300">🏆 杯赛相关</button>
        <button onclick="switchTab('exam')" id="tab-exam" class="flex-1 min-w-[100px] px-4 py-2.5 text-sm font-medium text-slate-500 hover:text-slate-800 hover:bg-slate-50 rounded-xl transition-all duration-300">📝 考试相关</button>
    </div>

    <!-- 列表内容区 -->
    <div class="space-y-6">
        <!-- 系统公告区域 -->
        <div id="announcements-section" class="hidden">
            <div class="flex items-center gap-2 mb-4 px-2">
                <span class="w-8 h-8 rounded-lg bg-amber-100 text-amber-600 flex items-center justify-center font-bold">📢</span>
                <h2 class="text-lg font-bold text-slate-800">系统公告</h2>
            </div>
            <div id="announcements-list" class="space-y-4"></div>
        </div>

        <!-- 个人通知列表 -->
        <div id="notif-container" class="space-y-3">
            <div class="flex flex-col items-center justify-center py-16 text-slate-400">
                <svg class="animate-spin -ml-1 mr-3 h-8 w-8 text-indigo-500 mb-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
                <span class="font-medium">正在加载通知...</span>
            </div>
        </div>
    </div>
</div>

<style>
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
</style>
{% endblock %}

{% block scripts %}
<script>
const currentUser = {{ user | tojson }};
let currentTab = 'all';
let allNotifs = [];
let announcements = [];

function esc(s) { if(!s)return''; const d=document.createElement('div'); d.textContent=s; return d.innerHTML; }

function switchTab(tab) {
    currentTab = tab;
    document.querySelectorAll('[id^="tab-"]').forEach(el => {
        el.className = 'flex-1 min-w-[100px] px-4 py-2.5 text-sm font-medium text-slate-500 hover:text-slate-800 hover:bg-slate-50 rounded-xl transition-all duration-300';
    });
    const activeBtn = document.getElementById('tab-' + tab);
    activeBtn.className = 'flex-1 min-w-[100px] px-4 py-2.5 text-sm font-bold bg-white text-indigo-600 shadow-sm rounded-xl transition-all duration-300';
    renderNotifications();
}

function getTypeFilter(tab) {
    if (tab === 'all') return null;
    if (tab === 'system') return ['system_announcement'];
    if (tab === 'teacher') return ['teacher_application', 'teacher_result'];
    if (tab === 'contest') return ['contest_application', 'contest_result', 'contest_new_exam'];
    if (tab === 'exam') return ['exam_graded', 'contest_new_exam'];
    return null;
}

function getTypeIcon(type) {
    const icons = {
        'teacher_application': '👨‍🏫', 'teacher_result': '🎓',
        'contest_application': '🏆', 'contest_result': '🏅',
        'contest_new_exam': '📝', 'exam_graded': '✅',
        'system_announcement': '📢'
    };
    return icons[type] || '🔔';
}

function getTypeLabel(type) {
    const labels = {
        'teacher_application': '教师申请', 'teacher_result': '教师审核结果',
        'contest_application': '杯赛申请', 'contest_result': '杯赛通知',
        'contest_new_exam': '新考试', 'exam_graded': '成绩通知',
        'system_announcement': '系统公告'
    };
    return labels[type] || '通知';
}

function renderNotifications() {
    const container = document.getElementById('notif-container');
    const annSection = document.getElementById('announcements-section');
    const annList = document.getElementById('announcements-list');

    // Show announcements only on 'all' or 'system' tab
    if ((currentTab === 'all' || currentTab === 'system') && announcements.length > 0) {
        annSection.style.display = '';
        annList.innerHTML = announcements.map(a => `
            <div class="bg-white rounded-2xl p-5 shadow-sm border ${a.pinned ? 'border-amber-200 shadow-amber-100/50' : 'border-indigo-100 shadow-indigo-100/50'} relative overflow-hidden group hover:shadow-md transition-all duration-300">
                <div class="absolute top-0 right-0 w-24 h-24 ${a.pinned ? 'bg-amber-50' : 'bg-indigo-50'} rounded-bl-full -z-10 group-hover:scale-110 transition-transform duration-500"></div>
                <div class="flex items-start gap-4">
                    <div class="flex-1">
                        <div class="flex items-center gap-2">
                            ${a.pinned ? '<span class="text-[10px] bg-gradient-to-r from-amber-400 to-orange-500 text-white px-2 py-0.5 rounded-full font-bold shadow-sm flex items-center gap-1"><svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/></svg> 置顶</span>' : ''}
                            <h3 class="text-lg font-bold text-slate-900 group-hover:text-indigo-600 transition-colors">${esc(a.title)}</h3>
                        </div>
                        <p class="text-sm text-slate-600 mt-3 whitespace-pre-wrap leading-relaxed">${esc(a.content)}</p>
                        <div class="flex items-center gap-3 mt-4 pt-4 border-t border-slate-100/60">
                            <span class="flex items-center gap-1.5 text-xs font-medium text-slate-500 bg-slate-50 px-2.5 py-1 rounded-lg">
                                <span class="w-4 h-4 rounded-full bg-slate-200 flex items-center justify-center text-[8px]">${esc(a.author_name)[0]}</span>
                                ${esc(a.author_name)}
                            </span>
                            <span class="text-xs font-medium text-slate-400 flex items-center gap-1">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                ${a.created_at}
                            </span>
                        </div>
                    </div>
                </div>
            </div>`).join('');
    } else {
        annSection.style.display = 'none';
        if(annList) annList.innerHTML = '';
    }

    // Filter personal notifications
    const filter = getTypeFilter(currentTab);
    let filtered = allNotifs;
    if (filter) {
        if (currentTab === 'system') {
            filtered = []; // system tab only shows announcements above
        } else {
            filtered = allNotifs.filter(n => filter.includes(n.type));
        }
    }

    if (currentTab === 'system') {
        container.innerHTML = announcements.length === 0 ? `
            <div class="flex flex-col items-center justify-center py-16 text-slate-400 bg-white rounded-3xl border border-slate-100 border-dashed">
                <div class="w-16 h-16 bg-slate-50 rounded-full flex items-center justify-center text-3xl mb-4">📭</div>
                <div class="font-medium">暂无系统公告</div>
            </div>` : '';
        return;
    }

    if (filtered.length === 0) {
        container.innerHTML = `
            <div class="flex flex-col items-center justify-center py-16 text-slate-400 bg-white rounded-3xl border border-slate-100 border-dashed">
                <div class="w-16 h-16 bg-slate-50 rounded-full flex items-center justify-center text-3xl mb-4">📭</div>
                <div class="font-medium">暂无通知</div>
            </div>`;
        return;
    }

    container.innerHTML = filtered.map(n => {
        let actions = buildActions(n);
        const iconBgColor = {
            'teacher_application': 'bg-purple-100 text-purple-600', 'teacher_result': 'bg-fuchsia-100 text-fuchsia-600',
            'contest_application': 'bg-orange-100 text-orange-600', 'contest_result': 'bg-amber-100 text-amber-600',
            'contest_new_exam': 'bg-indigo-100 text-indigo-600', 'exam_graded': 'bg-emerald-100 text-emerald-600',
            'system_announcement': 'bg-blue-100 text-blue-600'
        }[n.type] || 'bg-slate-100 text-slate-600';

        return `<div class="bg-white border ${n.read ? 'border-slate-100' : 'border-indigo-200 shadow-md shadow-indigo-100/50 relative'} rounded-2xl p-4 sm:p-5 hover:border-indigo-300 hover:shadow-lg transition-all duration-300 cursor-pointer group" onclick="markSingleRead(${n.id}, this)">
            ${!n.read ? '<div class="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full border-2 border-white animate-pulse"></div>' : ''}
            <div class="flex items-start gap-4">
                <div class="w-12 h-12 rounded-2xl ${iconBgColor} flex items-center justify-center text-2xl flex-shrink-0 shadow-inner group-hover:scale-110 group-hover:rotate-6 transition-transform">
                    ${getTypeIcon(n.type)}
                </div>
                <div class="flex-1 min-w-0 pt-0.5">
                    <div class="flex items-center gap-2 mb-1.5 flex-wrap">
                        <span class="text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-full bg-slate-100 text-slate-600 border border-slate-200/60">${getTypeLabel(n.type)}</span>
                        ${n.from_user ? `<span class="text-xs font-medium text-slate-500 flex items-center gap-1"><svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>${esc(n.from_user)}</span>` : ''}
                        <span class="text-xs font-medium text-slate-400 flex items-center gap-1 ml-auto">
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            ${n.created_at}
                        </span>
                    </div>
                    <div class="text-sm font-medium text-slate-800 leading-relaxed ${!n.read ? 'font-bold' : ''}">${esc(n.content)}</div>
                    ${actions}
                </div>
            </div>
        </div>`;
    }).join('');
}

function buildActions(n) {
    if (n.type === 'teacher_application' && n.application_status === 'pending' && n.application_id && currentUser.role === 'admin') {
        return `<div class="flex gap-3 mt-4 pt-3 border-t border-slate-100">
            <button onclick="event.stopPropagation();approveTeacherN(${n.application_id})" class="px-4 py-1.5 text-xs font-bold bg-emerald-50 text-emerald-600 border border-emerald-200 rounded-lg hover:bg-emerald-500 hover:text-white hover:border-emerald-500 transition-colors shadow-sm">✅ 同意申请</button>
            <button onclick="event.stopPropagation();rejectTeacherN(${n.application_id})" class="px-4 py-1.5 text-xs font-bold bg-rose-50 text-rose-600 border border-rose-200 rounded-lg hover:bg-rose-500 hover:text-white hover:border-rose-500 transition-colors shadow-sm">❌ 拒绝申请</button>
        </div>`;
    }
    if (n.type === 'teacher_application' && n.application_status === 'approved') return '<div class="mt-3 inline-flex items-center gap-1.5 px-3 py-1 bg-emerald-50 border border-emerald-100 text-emerald-600 text-xs font-bold rounded-lg"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> 已同意</div>';
    if (n.type === 'teacher_application' && n.application_status === 'rejected') return '<div class="mt-3 inline-flex items-center gap-1.5 px-3 py-1 bg-rose-50 border border-rose-100 text-rose-600 text-xs font-bold rounded-lg"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg> 已拒绝</div>';
    
    if (n.type === 'contest_application' && n.application_status === 'pending' && n.post_id && currentUser.role === 'admin') {
        return `<div class="flex gap-3 mt-4 pt-3 border-t border-slate-100">
            <button onclick="event.stopPropagation();approveContestN(${n.post_id})" class="px-4 py-1.5 text-xs font-bold bg-emerald-50 text-emerald-600 border border-emerald-200 rounded-lg hover:bg-emerald-500 hover:text-white hover:border-emerald-500 transition-colors shadow-sm">✅ 同意申请</button>
            <button onclick="event.stopPropagation();rejectContestN(${n.post_id})" class="px-4 py-1.5 text-xs font-bold bg-rose-50 text-rose-600 border border-rose-200 rounded-lg hover:bg-rose-500 hover:text-white hover:border-rose-500 transition-colors shadow-sm">❌ 拒绝申请</button>
        </div>`;
    }
    if (n.type === 'contest_application' && n.application_status === 'approved') return '<div class="mt-3 inline-flex items-center gap-1.5 px-3 py-1 bg-emerald-50 border border-emerald-100 text-emerald-600 text-xs font-bold rounded-lg"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> 已同意</div>';
    if (n.type === 'contest_application' && n.application_status === 'rejected') return '<div class="mt-3 inline-flex items-center gap-1.5 px-3 py-1 bg-rose-50 border border-rose-100 text-rose-600 text-xs font-bold rounded-lg"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg> 已拒绝</div>';
    
    // 如果有考试关联的通知，添加快捷入口
    if (n.type === 'contest_new_exam' || n.type === 'exam_graded') {
        if(n.post_id) {
             return `<div class="mt-4 pt-3 border-t border-slate-100"><a href="/exams/${n.post_id}" class="inline-flex items-center gap-1.5 px-4 py-1.5 text-xs font-bold bg-indigo-50 text-indigo-600 border border-indigo-200 rounded-lg hover:bg-indigo-600 hover:text-white hover:border-indigo-600 transition-colors shadow-sm"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg> 查看考试</a></div>`;
        }
    }
    return '';
}

async function approveTeacherN(appId) {
    try {
        const res = await fetch(`/api/teacher-applications/${appId}/approve`, {method:'POST'});
        const d = await res.json();
        alert(d.message);
        loadAll();
    } catch(e) { alert('操作失败'); }
}
async function rejectTeacherN(appId) {
    if (!confirm('确定拒绝该申请？')) return;
    try {
        const res = await fetch(`/api/teacher-applications/${appId}/reject`, {method:'POST'});
        const d = await res.json();
        alert(d.message);
        loadAll();
    } catch(e) { alert('操作失败'); }
}
async function approveContestN(appId) {
    try {
        const res = await fetch(`/api/contest-applications/${appId}/approve`, {method:'POST'});
        const d = await res.json();
        alert(d.message);
        loadAll();
    } catch(e) { alert('操作失败'); }
}
async function rejectContestN(appId) {
    if (!confirm('确定拒绝该申请？')) return;
    try {
        const res = await fetch(`/api/contest-applications/${appId}/reject`, {method:'POST'});
        const d = await res.json();
        alert(d.message);
        loadAll();
    } catch(e) { alert('操作失败'); }
}

function markSingleRead(nid, el) {
    fetch(`/api/notifications/${nid}/read`, {method:'POST'});
    // 移除未读的特定样式
    el.classList.remove('border-indigo-200', 'shadow-md', 'shadow-indigo-100/50');
    el.classList.add('border-slate-100');
    const content = el.querySelector('.font-bold.leading-relaxed');
    if(content) content.classList.remove('font-bold');
    const dot = el.querySelector('.bg-red-500.animate-pulse');
    if (dot) dot.remove();
}

function markAllRead() {
    fetch('/api/notifications/read-all', {method:'POST'}).then(() => {
        allNotifs.forEach(n => n.read = true);
        renderNotifications();
    });
}

async function loadAll() {
    const [notifRes, annRes] = await Promise.all([
        fetch('/api/notifications').then(r => r.json()),
        fetch('/api/system-notifications').then(r => r.json())
    ]);
    if (notifRes.success) allNotifs = notifRes.notifications;
    if (annRes.success) announcements = annRes.notifications;
    renderNotifications();
}

loadAll();
</script>
{% endblock %}