<?php
$pageTitle = '历史上的今天';
$pageCss = '/css/history.css';
require_once '../includes/header.php';

$userId = $_SESSION['user_id'];
$todayMonth = date('n');
$todayDay = date('j');
$todayDateStr = date('m月d日');
?>

<!-- 页面头部 -->
<div class="page-header-simple">
    <div class="header-left">
        <div class="header-title">历史上的今天</div>
        <div class="header-sub"><?php echo $todayDateStr; ?></div>
    </div>
    <div class="refresh-btn" onclick="fetchHistory()">
        <i class="fas fa-sync-alt"></i> 刷新
    </div>
</div>

<!-- 历史事件列表 -->
<div class="data-content" id="historyContent">
    <div class="loading-state" id="loadingState">
        <div class="spinner"></div>
        <p>加载中...</p>
    </div>
</div>

<!-- 底部导航 -->
<div class="bottom-nav">
    <div class="nav-item" onclick="location.href='../index.php'">
        <div class="nav-icon"><i class="fas fa-home"></i></div>
        <div class="nav-name">大厅</div>
    </div>
    <div class="nav-item" onclick="location.href='schedule.php'">
        <div class="nav-icon"><i class="fas fa-calendar-alt"></i></div>
        <div class="nav-name">课表</div>
    </div>
    <div class="nav-item" onclick="location.href='profile.php'">
        <div class="nav-icon"><i class="fas fa-user"></i></div>
        <div class="nav-name">我的</div>
    </div>
</div>

<script>
var historyApiUrl = 'https://api.ba9.cn/api/get.history?type=history';

function fetchHistory() {
    var contentEl = document.getElementById('historyContent');
    contentEl.innerHTML = '<div class="loading-state"><div class="spinner"></div><p>加载中...</p></div>';

    fetch(historyApiUrl)
        .then(function(res) { return res.json(); })
        .then(function(data) {
            if (data.success && data.data && data.data.length > 0) {
                renderHistory(data.data);
            } else {
                contentEl.innerHTML = '<div class="empty-state"><i class="fas fa-history"></i><p>暂无历史数据</p><div class="empty-hint">请稍后再试</div></div>';
            }
        })
        .catch(function(err) {
            contentEl.innerHTML = '<div class="empty-state"><i class="fas fa-exclamation-circle"></i><p>加载失败</p><div class="empty-hint">请检查网络连接后刷新重试</div></div>';
        });
}

function renderHistory(events) {
    var contentEl = document.getElementById('historyContent');
    var html = '';

    for (var i = 0; i < events.length; i++) {
        var evt = events[i];
        var yearNum = parseInt(evt.year) || 0;
        var currentYear = new Date().getFullYear();
        var yearsAgo = currentYear - yearNum;
        var yearsLabel = yearsAgo > 0 ? yearsAgo + '年前' : '';

        html += '<div class="history-card" onclick="openDetail(\'' + (evt.mobilUrl || evt.url || '') + '\')">';
        html +=   '<div class="card-year">';
        html +=     '<div class="year-num">' + evt.year + '</div>';
        html +=     '<div class="year-ago">' + yearsLabel + '</div>';
        html +=   '</div>';
        html +=   '<div class="card-body">';
        html +=     '<div class="card-title">' + evt.title + '</div>';
        html +=   '</div>';
        html += '</div>';
    }

    contentEl.innerHTML = html;
}

function openDetail(url) {
    if (url) {
        window.open(url, '_blank');
    }
}

// 页面加载时自动请求
fetchHistory();
</script>

<?php require_once '../includes/footer.php'; ?>
