<%@ 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?v=20260428-visual-shell">
</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>
        </div>
        <div class="welcome-user">
            <span>当前登录</span>
            <strong><c:out value="${sessionScope.authenticatedUser.displayName}" /></strong>
        </div>
    </section>

    <c:if test="${not empty errorMessage}">
        <p class="message message-error"><c:out value="${errorMessage}" /></p>
    </c:if>

    <section class="dashboard-metrics" aria-label="核心指标">
        <c:choose>
            <c:when test="${empty dashboardMetrics}">
                <article class="metric-card metric-card-empty">
                    <div>
                        <h2>核心指标</h2>
                        <p class="metric-value">--</p>
                        <p class="metric-trend">暂无可展示的实时数据。</p>
                    </div>
                </article>
            </c:when>
            <c:otherwise>
                <c:forEach var="metric" items="${dashboardMetrics}">
                    <article class="metric-card">
                        <div>
                            <h2><c:out value="${metric.label}" /></h2>
                            <p class="metric-value">
                                <c:out value="${metric.value}" />
                                <small><c:out value="${metric.unit}" /></small>
                            </p>
                            <p class="metric-trend"><c:out value="${metric.note}" /></p>
                        </div>
                    </article>
                </c:forEach>
            </c:otherwise>
        </c:choose>
    </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>
                        <c:forEach var="category" items="${categories}">
                            <option value="${category.id}"><c:out value="${category.name}" /></option>
                        </c:forEach>
                    </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>
            <c:choose>
                <c:when test="${empty reportCenter or empty reportCenter.popularBooks}">
                    <p class="empty-state">暂无热门排行数据。</p>
                </c:when>
                <c:otherwise>
                    <c:set var="rankingMax" value="${reportCenter.popularBooks[0].borrowCount}" />
                    <div class="rank-chart" aria-label="热门图书排行柱状图">
                        <c:forEach var="row" items="${reportCenter.popularBooks}" end="9">
                            <div class="rank-item">
                                <span class="rank-value"><c:out value="${row.borrowCount}" /></span>
                                <span class="rank-bar"
                                      style="--bar-height: ${rankingMax > 0 ? row.borrowCount * 100 / rankingMax : 0}%;"></span>
                                <small><c:out value="${row.title}" /></small>
                            </div>
                        </c:forEach>
                    </div>
                </c:otherwise>
            </c:choose>
        </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>
                <c:choose>
                    <c:when test="${empty dashboardBorrowRecords}">
                        <p class="empty-state">暂无借阅流通记录。</p>
                    </c:when>
                    <c:otherwise>
                        <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>
                                <c:forEach var="record" items="${dashboardBorrowRecords}" end="4">
                                    <tr>
                                        <td>#<c:out value="${record.id}" /></td>
                                        <td><c:out value="${record.readerName}" /></td>
                                        <td><c:out value="${record.bookIdentifier}" /></td>
                                        <td><c:out value="${record.bookTitle}" /></td>
                                        <td><c:out value="${record.borrowedAtText}" /></td>
                                        <td><c:out value="${record.dueAtText}" /></td>
                                        <td>
                                            <span class="status-pill status-${record.displayStatusCode}">
                                                <c:out value="${record.displayStatusName}" />
                                            </span>
                                        </td>
                                        <td>
                                            <c:choose>
                                                <c:when test="${record.displayStatusCode == 'returned'}">
                                                    <span class="stock-return">库存已返还</span>
                                                </c:when>
                                                <c:otherwise>
                                                    <span class="stock-plus">借出占用</span>
                                                </c:otherwise>
                                            </c:choose>
                                        </td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </table>
                        </div>
                    </c:otherwise>
                </c:choose>
            </article>

            <article class="dashboard-panel table-panel-compact">
                <h2>逾期列表 <span>待处理</span></h2>
                <c:choose>
                    <c:when test="${empty reportCenter or empty reportCenter.overdueRows}">
                        <p class="empty-state">当前没有逾期未还的借阅记录。</p>
                    </c:when>
                    <c:otherwise>
                        <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>
                                <c:forEach var="row" items="${reportCenter.overdueRows}" end="4">
                                    <tr>
                                        <td><c:out value="${row.readerName}" /></td>
                                        <td><c:out value="${row.bookIdentifier}" /></td>
                                        <td><c:out value="${row.bookTitle}" /></td>
                                        <td><c:out value="${row.dueAtText}" /></td>
                                        <td><span class="overdue-days"><c:out value="${row.overdueDays}" />天</span></td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </table>
                        </div>
                    </c:otherwise>
                </c:choose>
            </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>
                <c:choose>
                    <c:when test="${empty dashboardBooks}">
                        <p class="empty-state">暂无馆藏图书记录。</p>
                    </c:when>
                    <c:otherwise>
                        <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>
                                </tr>
                                </thead>
                                <tbody>
                                <c:forEach var="book" items="${dashboardBooks}" end="4">
                                    <tr>
                                        <td><c:out value="${book.identifier}" /></td>
                                        <td><c:out value="${book.title}" /></td>
                                        <td><c:out value="${book.author}" /></td>
                                        <td><c:out value="${book.categoryName}" /></td>
                                        <td>
                                            <span class="status-pill status-${book.status.code}">
                                                <c:out value="${book.status.displayName}" />
                                                （<c:out value="${book.availableCopies}" />/<c:out value="${book.totalCopies}" />）
                                            </span>
                                        </td>
                                        <td><a class="text-link" href="${pageContext.request.contextPath}/books">管理</a></td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </table>
                        </div>
                    </c:otherwise>
                </c:choose>
            </article>
        </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">
                <strong>我的借阅</strong>
                <small>查看在借、已还、续借次数和逾期状态</small>
            </a>
            <a class="shortcut-card" href="${pageContext.request.contextPath}/catalog">
                <strong>馆藏检索</strong>
                <small>按书名、作者、分类或图书编号查找馆藏</small>
            </a>
        </section>
    </c:if>
</main>
</body>
</html>
