{% extends 'base.html' %}

{% block title %}首页 - 图书管理系统{% endblock %}

{% block head %}
<!-- 只引用index页面的专用样式 -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}">
{% endblock %}

{% block content %}
<!-- 欢迎区域 -->
<div class="welcome-section">
    <h1>欢迎回来，{{ current_user.username }}！</h1>
    <p>今天是 <span id="current-date"></span>，祝您使用愉快。</p>
</div>

<!-- 快速统计 -->
<div class="stats-container">
    <div class="stat-card">
        <i class="fas fa-book stat-icon"></i>
        <div class="stat-info">
            <h3>馆藏总量</h3>
            <p class="stat-number">{{ stats.total_books }}</p>
        </div>
    </div>
    <div class="stat-card">
        <i class="fas fa-users stat-icon"></i>
        <div class="stat-info">
            <h3>注册用户</h3>
            <p class="stat-number">{{ stats.total_users }}</p>
        </div>
    </div>
    <div class="stat-card">
        <i class="fas fa-exchange-alt stat-icon"></i>
        <div class="stat-info">
            <h3>当前借阅</h3>
            <p class="stat-number">{{ stats.active_borrows }}</p>
        </div>
    </div>
    <div class="stat-card">
        <i class="fas fa-clock stat-icon"></i>
        <div class="stat-info">
            <h3>待还图书</h3>
            <p class="stat-number">{{ stats.user_borrows if current_user.is_authenticated else 0 }}</p>
        </div>
    </div>
</div>

<!-- 主要内容区 -->
<div class="main-sections">
    <!-- 最新图书 -->
    <div class="content-section book-section">
        <div class="section-header">
            <h2>最新图书</h2>
            <a href="{{ url_for('book.browse_books', sort='newest') }}" class="view-all">查看全部 <i class="fas fa-arrow-right"></i></a>
        </div>
        <div class="book-grid">
            {% if latest_books %}
                {% for book in latest_books %}
                <div class="book-card">
                    <div class="book-cover">
                        {% if book.cover_url %}
                        <img src="{{ book.cover_url }}" alt="{{ book.title }} 封面">
                        {% else %}
                        <img src="{{ url_for('static', filename='images/book-placeholder.jpg') }}" alt="无封面">
                        {% endif %}
                    </div>
                    <div class="book-info">
                        <h3 class="book-title">{{ book.title }}</h3>
                        <p class="book-author">{{ book.author }}</p>
                        <div class="book-meta">
                            <span class="book-category">{{ book.category.name if book.category else '未分类' }}</span>
                            <span class="book-status {{ 'available' if book.stock > 0 else 'unavailable' }}">
                                {{ '可借阅' if book.stock > 0 else '已借完' }}
                            </span>
                        </div>
                        <a href="{{ url_for('book.book_detail', book_id=book.id) }}" class="borrow-btn">
                            {{ '借阅' if book.stock > 0 else '详情' }}
                        </a>
                    </div>
                </div>
                {% endfor %}
            {% else %}
                {% for i in range(4) %}
                <div class="book-card">
                    <div class="book-cover">
                        <img src="https://via.placeholder.com/150x210?text=No+Cover" alt="Book Cover">
                    </div>
                    <div class="book-info">
                        <h3 class="book-title">示例图书标题</h3>
                        <p class="book-author">作者名</p>
                        <div class="book-meta">
                            <span class="book-category">计算机</span>
                            <span class="book-status available">可借阅</span>
                        </div>
                        <button class="borrow-btn">借阅</button>
                    </div>
                </div>
                {% endfor %}
            {% endif %}
        </div>
    </div>

    <!-- 通知公告 -->
    <div class="content-section notice-section">
        <div class="section-header">
            <h2>通知公告</h2>
            <a href="{{ url_for('announcement.announcement_list') }}" class="view-all">查看全部 <i class="fas fa-arrow-right"></i></a>
        </div>
        <div class="notice-list">
            {% if announcements %}
                {% for announcement in announcements %}
                <div class="notice-item {% if announcement.is_top %}pinned{% endif %}">
                    <div class="notice-icon"><i class="fas fa-bullhorn"></i></div>
                    <div class="notice-content">
                        <h3><a href="{{ url_for('announcement.announcement_detail', announcement_id=announcement.id) }}">{{ announcement.title }}</a></h3>
                        <p>{{ announcement.content|striptags|truncate(100) }}</p>
                        <div class="notice-meta">
                            <span class="notice-time">{{ announcement.created_at.strftime('%Y-%m-%d') }}</span>
                        </div>
                    </div>
                </div>
                {% endfor %}
            {% else %}
                <div class="notice-item">
                    <div class="notice-icon"><i class="fas fa-bullhorn"></i></div>
                    <div class="notice-content">
                        <h3>暂无公告</h3>
                        <p>目前没有任何通知公告</p>
                        <div class="notice-meta">
                            <span class="notice-time">{{ now.strftime('%Y-%m-%d') }}</span>
                        </div>
                    </div>
                </div>
            {% endif %}

            {% if current_user.is_authenticated and user_notifications %}
                <div class="notice-item">
                    <div class="notice-icon"><i class="fas fa-bell"></i></div>
                    <div class="notice-content">
                        <h3>您有{{ user_notifications|length }}条未读通知</h3>
                        <p>
                            {% for notification in user_notifications %}
                                {% if loop.index <= 2 %}
                                {{ notification.title }}{% if not loop.last and loop.index < 2 %}、{% endif %}
                                {% endif %}
                            {% endfor %}
                            {% if user_notifications|length > 2 %}等{% endif %}
                        </p>
                        <div class="notice-meta">
                            <span class="notice-time">{{ now.strftime('%Y-%m-%d') }}</span>
                            <a href="{{ url_for('announcement.user_notifications') }}" class="renew-btn">查看详情</a>
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- 热门图书区域 -->
<div class="content-section popular-section">
    <div class="section-header">
        <h2>热门图书</h2>
        <a href="{{ url_for('book.browse_books', sort='popular') }}" class="view-all">查看全部 <i class="fas fa-arrow-right"></i></a>
    </div>
    <div class="popular-books">
        {% if popular_books %}
            {% for book in popular_books %}
            <div class="popular-book-item">
                <div class="rank-badge">{{ loop.index }}</div>
                <div class="book-cover small">
                    {% if book.cover_url %}
                    <img src="{{ book.cover_url }}" alt="{{ book.title }} 封面">
                    {% else %}
                    <img src="{{ url_for('static', filename='images/book-placeholder.jpg') }}" alt="无封面">
                    {% endif %}
                </div>
                <div class="book-details">
                    <h3 class="book-title">{{ book.title }}</h3>
                    <p class="book-author">{{ book.author }}</p>
                    <div class="book-stats">
                        <span><i class="fas fa-eye"></i> {{ book.view_count if book.view_count else 0 }} 次浏览</span>
                        <span><i class="fas fa-bookmark"></i> {{ book.borrow_count if book.borrow_count else 0 }} 次借阅</span>
                    </div>
                </div>
            </div>
            {% endfor %}
        {% else %}
            {% for i in range(5) %}
            <div class="popular-book-item">
                <div class="rank-badge">{{ i+1 }}</div>
                <div class="book-cover small">
                    <img src="https://via.placeholder.com/80x120?text=Book" alt="Book Cover">
                </div>
                <div class="book-details">
                    <h3 class="book-title">热门图书标题示例</h3>
                    <p class="book-author">知名作者</p>
                    <div class="book-stats">
                        <span><i class="fas fa-eye"></i> 1024 次浏览</span>
                        <span><i class="fas fa-bookmark"></i> 89 次借阅</span>
                    </div>
                </div>
            </div>
            {% endfor %}
        {% endif %}
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 设置当前日期
        const now = new Date();
        const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
        document.getElementById('current-date').textContent = now.toLocaleDateString('zh-CN', options);
    });
</script>
{% endblock %}
