{% extends "base.html" %}
{% block content %}
<h2>📊 Reports</h2>

<div class="card" style="margin-bottom: 2rem;">
    <h3>System Statistics</h3>
    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 1rem;">
        <div style="text-align: center; padding: 1rem; background: #f3f4f6; border-radius: 8px;">
            <div style="font-size: 2rem; font-weight: bold; color: #2563eb;">{{ stats.total_books }}</div>
            <div style="color: #6b7280;">Total Books</div>
        </div>
        <div style="text-align: center; padding: 1rem; background: #f3f4f6; border-radius: 8px;">
            <div style="font-size: 2rem; font-weight: bold; color: #f59e0b;">{{ stats.books_issued }}</div>
            <div style="color: #6b7280;">Books Issued</div>
        </div>
        <div style="text-align: center; padding: 1rem; background: #f3f4f6; border-radius: 8px;">
            <div style="font-size: 2rem; font-weight: bold; color: #ef4444;">{{ stats.overdue_books }}</div>
            <div style="color: #6b7280;">Overdue Books</div>
        </div>
    </div>
</div>

<div class="card" style="margin-bottom: 2rem;">
    <h3>📚 All Issues</h3>
    {% if issues %}
    <table>
        <tr>
            <th>Issue ID</th>
            <th>Student ID</th>
            <th>Book ID</th>
            <th>Issue Date</th>
            <th>Due Date</th>
            <th>Status</th>
        </tr>
        {% for issue in issues %}
        <tr>
            <td>{{ issue.issue_id }}</td>
            <td>{{ issue.student_id }}</td>
            <td>{{ issue.book_id }}</td>
            <td>{{ issue.issue_date.strftime('%Y-%m-%d') }}</td>
            <td>{{ issue.due_date.strftime('%Y-%m-%d') }}</td>
            <td>
                {% if issue.status == 'returned' %}
                <span style="background: #d1fae5; color: #065f46; padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.875rem;">✓ Returned</span>
                {% elif issue.is_overdue() %}
                <span style="background: #fee2e2; color: #991b1b; padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.875rem;">⚠ Overdue</span>
                {% else %}
                <span style="background: #fef3c7; color: #92400e; padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.875rem;">📖 Active</span>
                {% endif %}
            </td>
        </tr>
        {% endfor %}
    </table>
    {% else %}
    <p style="text-align: center; color: #9ca3af; padding: 2rem;">No issues found</p>
    {% endif %}
</div>

<div class="card">
    <h3>⚠ Overdue Books</h3>
    {% if overdue %}
    <table>
        <tr>
            <th>Issue ID</th>
            <th>Student ID</th>
            <th>Book ID</th>
            <th>Due Date</th>
            <th>Days Overdue</th>
        </tr>
        {% for issue in overdue %}
        <tr>
            <td>{{ issue.issue_id }}</td>
            <td>{{ issue.student_id }}</td>
            <td>{{ issue.book_id }}</td>
            <td>{{ issue.due_date.strftime('%Y-%m-%d') }}</td>
            <td><strong style="color: #ef4444;">{{ issue.days_overdue() }} days</strong></td>
        </tr>
        {% endfor %}
    </table>
    {% else %}
    <p style="text-align: center; color: #9ca3af; padding: 2rem;">No overdue books</p>
    {% endif %}
</div>

{% endblock %}