<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>控制台 - MZH 图书馆</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/app.css">
</head>
<body>
<%@ include file="/WEB-INF/jsp/common/header.jspf" %>
<main class="page-shell dashboard-shell">
    <section class="dashboard-hero dashboard-welcome" aria-labelledby="dashboard-title">
        <div>
            <p class="eyebrow">
                <c:out value="${sessionScope.authenticatedUser.role.displayName}" />
            </p>
            <h1 id="dashboard-title">
                <c:choose>
                    <c:when test="${sessionScope.userRole == 'administrator'}">管理员工作台</c:when>
                    <c:when test="${sessionScope.userRole == 'librarian'}">馆员工作台</c:when>
                    <c:otherwise>读者工作台</c:otherwise>
                </c:choose>
            </h1>
            <p>登录后进入 Dashboard，会话仅保存安全的 AuthenticatedUser 快照、角色代码与权限代码集合。</p>
        </div>
        <div class="welcome-user">
            <span>当前登录</span>
            <strong><c:out value="${sessionScope.authenticatedUser.displayName}" /></strong>
        </div>
    </section>

    <section class="dashboard-metrics" aria-label="核心指标">
        <article class="metric-card">
            <span class="metric-icon metric-blue" aria-hidden="true">书</span>
            <div>
                <h2>馆藏总量</h2>
                <p class="metric-value">12,586 <small>册</small></p>
                <p class="metric-trend trend-up">较上月 ↑ 5.2%</p>
            </div>
        </article>
        <article class="metric-card">
            <span class="metric-icon metric-green" aria-hidden="true">借</span>
            <div>
                <h2>在借数量</h2>
                <p class="metric-value">1,258 <small>册</small></p>
                <p class="metric-trend trend-up">较上月 ↑ 3.1%</p>
            </div>
        </article>
        <article class="metric-card">
            <span class="metric-icon metric-orange" aria-hidden="true">期</span>
            <div>
                <h2>逾期数量</h2>
                <p class="metric-value">87 <small>册</small></p>
                <p class="metric-trend trend-down">较上月 ↓ 12.4%</p>
            </div>
        </article>
        <article class="metric-card">
            <span class="metric-icon metric-purple" aria-hidden="true">者</span>
            <div>
                <h2>读者总数</h2>
                <p class="metric-value">3,682 <small>人</small></p>
                <p class="metric-trend trend-up">较上月 ↑ 4.8%</p>
            </div>
        </article>
    </section>

    <section class="dashboard-grid" aria-label="检索与排行">
        <article class="dashboard-panel search-panel">
            <h2>馆藏检索</h2>
            <form class="dashboard-search-form" action="${pageContext.request.contextPath}/catalog" method="get">
                <div class="search-field">
                    <label for="dashIdentifier">图书编号</label>
                    <input id="dashIdentifier" name="identifier" type="text" placeholder="请输入图书编号">
                </div>
                <div class="search-field">
                    <label for="dashTitle">书名</label>
                    <input id="dashTitle" name="title" type="text" placeholder="请输入书名">
                </div>
                <div class="search-field">
                    <label for="dashAuthor">作者</label>
                    <input id="dashAuthor" name="author" type="text" placeholder="请输入作者">
                </div>
                <div class="search-field">
                    <label for="dashCategory">分类</label>
                    <select id="dashCategory" name="categoryId">
                        <option value="">请选择分类</option>
                    </select>
                </div>
                <div class="dashboard-form-actions">
                    <button class="button button-primary" type="submit">搜索</button>
                    <a class="button button-secondary" href="${pageContext.request.contextPath}/catalog">重置</a>
                </div>
            </form>
        </article>

        <article class="dashboard-panel ranking-panel">
            <div class="panel-heading">
                <h2>热门图书排行</h2>
                <span>借阅次数TOP10</span>
            </div>
            <div class="rank-chart" aria-label="热门图书排行柱状图">
                <div class="rank-item"><span class="rank-value">230</span><span class="rank-bar" style="--bar-height: 92%;"></span><small>活着</small></div>
                <div class="rank-item"><span class="rank-value">198</span><span class="rank-bar" style="--bar-height: 79%;"></span><small>三体</small></div>
                <div class="rank-item"><span class="rank-value">175</span><span class="rank-bar" style="--bar-height: 70%;"></span><small>百年孤独</small></div>
                <div class="rank-item"><span class="rank-value">164</span><span class="rank-bar" style="--bar-height: 66%;"></span><small>围城</small></div>
                <div class="rank-item"><span class="rank-value">150</span><span class="rank-bar" style="--bar-height: 60%;"></span><small>平凡的世界</small></div>
                <div class="rank-item"><span class="rank-value">138</span><span class="rank-bar" style="--bar-height: 55%;"></span><small>解忧杂货店</small></div>
                <div class="rank-item"><span class="rank-value">120</span><span class="rank-bar" style="--bar-height: 48%;"></span><small>红楼梦</small></div>
                <div class="rank-item"><span class="rank-value">112</span><span class="rank-bar" style="--bar-height: 45%;"></span><small>白夜行</small></div>
                <div class="rank-item"><span class="rank-value">98</span><span class="rank-bar" style="--bar-height: 39%;"></span><small>追风筝的人</small></div>
                <div class="rank-item"><span class="rank-value">85</span><span class="rank-bar" style="--bar-height: 34%;"></span><small>小王子</small></div>
            </div>
        </article>
    </section>

    <c:if test="${sessionScope.userRole == 'administrator' or sessionScope.userRole == 'librarian'}">
        <section class="dashboard-table-grid" aria-label="业务表格">
            <article class="dashboard-panel table-panel-compact table-panel-wide">
                <h2>借阅流通 <span>最新记录</span></h2>
                <div class="table-scroll">
                    <table class="data-table dashboard-data-table">
                        <thead>
                        <tr>
                            <th scope="col">流水号</th>
                            <th scope="col">读者姓名</th>
                            <th scope="col">图书编号</th>
                            <th scope="col">书名</th>
                            <th scope="col">借阅日期</th>
                            <th scope="col">应还日期</th>
                            <th scope="col">状态</th>
                            <th scope="col">库存联动</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>L20240521001</td>
                            <td>张晓明</td>
                            <td>B001245</td>
                            <td>活着</td>
                            <td>2024-05-21</td>
                            <td>2024-06-04</td>
                            <td><span class="status-pill status-active">在借</span></td>
                            <td><span class="stock-plus">库存-1</span></td>
                        </tr>
                        <tr>
                            <td>L20240521002</td>
                            <td>李华</td>
                            <td>B001026</td>
                            <td>三体</td>
                            <td>2024-05-20</td>
                            <td>2024-06-03</td>
                            <td><span class="status-pill status-active">在借</span></td>
                            <td><span class="stock-plus">库存-1</span></td>
                        </tr>
                        <tr>
                            <td>L20240521003</td>
                            <td>王丽</td>
                            <td>B002031</td>
                            <td>百年孤独</td>
                            <td>2024-05-18</td>
                            <td>2024-06-01</td>
                            <td><span class="status-pill status-returned">已归还</span></td>
                            <td><span class="stock-return">库存+1</span></td>
                        </tr>
                        <tr>
                            <td>L20240521004</td>
                            <td>陈强</td>
                            <td>B001895</td>
                            <td>围城</td>
                            <td>2024-05-10</td>
                            <td>2024-05-24</td>
                            <td><span class="status-pill status-overdue">逾期</span></td>
                            <td><span class="stock-plus">库存-1</span></td>
                        </tr>
                        <tr>
                            <td>L20240521005</td>
                            <td>刘洋</td>
                            <td>B002119</td>
                            <td>解忧杂货店</td>
                            <td>2024-05-12</td>
                            <td>2024-05-26</td>
                            <td><span class="status-pill status-overdue">逾期</span></td>
                            <td><span class="stock-plus">库存-1</span></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </article>

            <article class="dashboard-panel table-panel-compact">
                <h2>逾期列表 <span>待处理</span></h2>
                <div class="table-scroll">
                    <table class="data-table dashboard-data-table overdue-table">
                        <thead>
                        <tr>
                            <th scope="col">读者姓名</th>
                            <th scope="col">图书编号</th>
                            <th scope="col">书名</th>
                            <th scope="col">应还日期</th>
                            <th scope="col">逾期天数</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr><td>陈强</td><td>B001895</td><td>围城</td><td>2024-05-24</td><td><span class="overdue-days">7天</span></td></tr>
                        <tr><td>赵敏</td><td>B001122</td><td>平凡的世界</td><td>2024-05-20</td><td><span class="overdue-days">11天</span></td></tr>
                        <tr><td>孙涛</td><td>B002003</td><td>红楼梦</td><td>2024-05-18</td><td><span class="overdue-days">13天</span></td></tr>
                        <tr><td>周雨</td><td>B000987</td><td>追风筝的人</td><td>2024-05-17</td><td><span class="overdue-days">14天</span></td></tr>
                        <tr><td>吴迪</td><td>B001776</td><td>白夜行</td><td>2024-05-15</td><td><span class="overdue-days">16天</span></td></tr>
                        </tbody>
                    </table>
                </div>
            </article>

            <article class="dashboard-panel table-panel-compact table-panel-wide">
                <div class="panel-heading">
                    <h2>图书管理 <span>馆藏列表</span></h2>
                    <a href="${pageContext.request.contextPath}/books">进入管理</a>
                </div>
                <div class="table-scroll">
                    <table class="data-table dashboard-data-table">
                        <thead>
                        <tr>
                            <th scope="col">图书编号</th>
                            <th scope="col">书名</th>
                            <th scope="col">作者</th>
                            <th scope="col">分类</th>
                            <th scope="col">出版日期</th>
                            <th scope="col">库存状态</th>
                            <th scope="col">馆藏地</th>
                            <th scope="col">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>B001245</td><td>活着</td><td>余华</td><td>文学 &gt; 小说</td><td>2012-08-01</td>
                            <td><span class="status-pill status-available">可借（15）</span></td><td>二楼文学区</td>
                            <td><a class="text-link" href="${pageContext.request.contextPath}/books">管理</a></td>
                        </tr>
                        <tr>
                            <td>B001026</td><td>三体</td><td>刘慈欣</td><td>文学 &gt; 科幻</td><td>2008-01-01</td>
                            <td><span class="status-pill status-available">可借（8）</span></td><td>三楼科幻区</td>
                            <td><a class="text-link" href="${pageContext.request.contextPath}/books">管理</a></td>
                        </tr>
                        <tr>
                            <td>B002031</td><td>百年孤独</td><td>加西亚·马尔克斯</td><td>文学 &gt; 外国文学</td><td>2011-06-01</td>
                            <td><span class="status-pill status-available">可借（6）</span></td><td>二楼文学区</td>
                            <td><a class="text-link" href="${pageContext.request.contextPath}/books">管理</a></td>
                        </tr>
                        <tr>
                            <td>B001895</td><td>围城</td><td>钱钟书</td><td>文学 &gt; 小说</td><td>2008-05-01</td>
                            <td><span class="status-pill status-available">可借（4）</span></td><td>二楼文学区</td>
                            <td><a class="text-link" href="${pageContext.request.contextPath}/books">管理</a></td>
                        </tr>
                        <tr>
                            <td>B002119</td><td>解忧杂货店</td><td>东野圭吾</td><td>文学 &gt; 小说</td><td>2014-07-01</td>
                            <td><span class="status-pill status-available">可借（10）</span></td><td>二楼文学区</td>
                            <td><a class="text-link" href="${pageContext.request.contextPath}/books">管理</a></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </article>

            <aside class="shortcut-grid" aria-label="快捷入口">
                <a class="shortcut-card" href="${pageContext.request.contextPath}/readers">
                    <span class="shortcut-icon shortcut-blue" aria-hidden="true">者</span>
                    <strong>读者管理</strong>
                    <small>管理读者信息、证件办理与权限设置</small>
                </a>
                <a class="shortcut-card" href="${pageContext.request.contextPath}/reports">
                    <span class="shortcut-icon shortcut-green" aria-hidden="true">报</span>
                    <strong>报表中心</strong>
                    <small>生成各类统计报表，支持导出与分析</small>
                </a>
                <a class="shortcut-card" href="${pageContext.request.contextPath}/borrowing">
                    <span class="shortcut-icon shortcut-orange" aria-hidden="true">借</span>
                    <strong>借阅流通</strong>
                    <small>借书、还书、续借与逾期处理</small>
                </a>
                <c:if test="${sessionScope.userRole == 'administrator'}">
                    <a class="shortcut-card" href="${pageContext.request.contextPath}/admin/system-logs">
                        <span class="shortcut-icon shortcut-purple" aria-hidden="true">志</span>
                        <strong>系统日志</strong>
                        <small>系统操作日志与安全审计记录查询</small>
                    </a>
                </c:if>
            </aside>
        </section>
    </c:if>

    <c:if test="${sessionScope.userRole == 'reader'}">
        <section class="shortcut-grid reader-shortcut-grid" aria-label="读者快捷入口">
            <a class="shortcut-card" href="${pageContext.request.contextPath}/reader/loans">
                <span class="shortcut-icon shortcut-blue" aria-hidden="true">历</span>
                <strong>我的借阅</strong>
                <small>查看在借、已还、续借次数和逾期状态</small>
            </a>
            <a class="shortcut-card" href="${pageContext.request.contextPath}/catalog">
                <span class="shortcut-icon shortcut-green" aria-hidden="true">搜</span>
                <strong>馆藏检索</strong>
                <small>按书名、作者、分类或图书编号查找馆藏</small>
            </a>
        </section>
    </c:if>
</main>
</body>
</html>
