{% extends "base.html" %}

{% block title %}Stats - IT Asset Tracker{% endblock %}

{% block content %}
<div class="page-header">
    <h1>Stats</h1>
</div>

<!-- Key Metrics -->
<div class="stats-grid stats-grid-4">
    <div class="stat-card">
        <div class="stat-value">{{ data.device_status.total or 0 }}</div>
        <div class="stat-label">Total Devices</div>
    </div>
    <div class="stat-card">
        <div class="stat-value">{{ data.total_people or 0 }}</div>
        <div class="stat-label">Registered People</div>
    </div>
    <div class="stat-card">
        <div class="stat-value stat-value-accent">{{ data.utilization_rate }}%</div>
        <div class="stat-label">Utilization Rate</div>
    </div>
    <div class="stat-card">
        <div class="stat-value">{{ data.transaction_stats.total or 0 }}</div>
        <div class="stat-label">Total Transactions</div>
    </div>
</div>

<div class="two-col">
    <!-- Device Status Breakdown -->
    <div>
        <div class="section-header">Device Status</div>
        <div class="card">
            <div class="detail-row">
                <span class="detail-label">Available</span>
                <span class="detail-value color-green">{{ data.device_status.available or 0 }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Pending Pickup</span>
                <span class="detail-value color-orange">{{ data.device_status.pending or 0 }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Assigned</span>
                <span class="detail-value color-blue">{{ data.device_status.assigned or 0 }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Retired</span>
                <span class="detail-value color-gray">{{ data.device_status.retired or 0 }}</span>
            </div>
        </div>
    </div>

    <!-- Transaction Stats -->
    <div>
        <div class="section-header">Transaction Summary</div>
        <div class="card">
            <div class="detail-row">
                <span class="detail-label">Check-outs</span>
                <span class="detail-value color-orange">{{ data.transaction_stats.checkouts or 0 }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Check-ins</span>
                <span class="detail-value color-green">{{ data.transaction_stats.checkins or 0 }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Pending</span>
                <span class="detail-value">{{ data.transaction_stats.pending or 0 }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Legacy Records</span>
                <span class="detail-value">{{ data.transaction_stats.legacy or 0 }}</span>
            </div>
            {% if data.avg_checkout_days %}
            <div class="detail-row">
                <span class="detail-label">Avg. Checkout Duration</span>
                <span class="detail-value">{{ data.avg_checkout_days }} days</span>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- Fleet Growth -->
<div class="section-header">Fleet Growth</div>
<div class="stats-grid stats-grid-2">
    <div class="stat-card">
        <div class="stat-value color-green">{{ data.devices_added.this_month }}</div>
        <div class="stat-label">Added This Month</div>
    </div>
    <div class="stat-card">
        <div class="stat-value">{{ data.devices_added.last_month }}</div>
        <div class="stat-label">Added Last Month</div>
    </div>
</div>

<div class="two-col">
    <!-- Devices by Make -->
    <div>
        <div class="section-header">Devices by Manufacturer</div>
        <div class="card">
            {% if data.devices_by_make %}
            {% for item in data.devices_by_make %}
            <div class="detail-row">
                <span class="detail-label">{{ item.make }}</span>
                <span class="detail-value">
                    <span class="progress-bar-container">
                        <span class="progress-bar" style="width: {{ (item.count / data.devices_by_make[0].count * 100)|round }}%;"></span>
                    </span>
                    {{ item.count }}
                </span>
            </div>
            {% endfor %}
            {% else %}
            <div class="empty-state">
                <p>No device data available</p>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Top Device Models -->
    <div>
        <div class="section-header">Top Device Models</div>
        <div class="card">
            {% if data.devices_by_model %}
            {% for item in data.devices_by_model %}
            <div class="detail-row">
                <span class="detail-label">{{ item.device_model }}</span>
                <span class="detail-value">{{ item.count }}</span>
            </div>
            {% endfor %}
            {% else %}
            <div class="empty-state">
                <p>No device data available</p>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<div class="two-col mt-3">
    <!-- People by Location -->
    <div>
        <div class="section-header">People by Location</div>
        <div class="card">
            {% if data.people_by_location %}
            {% for item in data.people_by_location %}
            <div class="detail-row">
                <span class="detail-label">{{ item.location }}</span>
                <span class="detail-value">{{ item.count }}</span>
            </div>
            {% endfor %}
            {% else %}
            <div class="empty-state">
                <p>No location data available</p>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Top Device Holders -->
    <div>
        <div class="section-header">Top Device Holders</div>
        <div class="card">
            {% if data.top_device_holders %}
            {% for item in data.top_device_holders %}
            <div class="detail-row">
                <span class="detail-label">{{ item.name }}</span>
                <span class="detail-value">{{ item.device_count }} device{{ 's' if item.device_count != 1 else '' }}</span>
            </div>
            {% endfor %}
            {% else %}
            <div class="empty-state">
                <p>No assigned devices</p>
            </div>
            {% endif %}
        </div>
    </div>
</div>

{% if data.condition_distribution %}
<div class="section-header mt-3">Return Condition Distribution</div>
<div class="card">
    <div class="condition-grid">
        {% for item in data.condition_distribution %}
        <div class="condition-stat {% if item.condition == 'excellent' %}condition-excellent{% elif item.condition == 'good' %}condition-good{% elif item.condition == 'fair' %}condition-fair{% elif item.condition == 'poor' %}condition-poor{% elif item.condition == 'damaged' %}condition-damaged{% endif %}">
            <div class="condition-count">{{ item.count }}</div>
            <div class="condition-label">{{ item.condition|title }}</div>
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

{% if data.transactions_by_month %}
<div class="section-header mt-3">Monthly Activity (Last 12 Months)</div>
<div class="card">
    <div class="table-wrapper stats-table-inline">
        <table>
            <thead>
                <tr>
                    <th>Month</th>
                    <th>Check-outs</th>
                    <th>Check-ins</th>
                    <th>Total</th>
                </tr>
            </thead>
            <tbody>
                {% for item in data.transactions_by_month %}
                <tr>
                    <td>{{ item.month }}</td>
                    <td class="color-orange">{{ item.checkouts }}</td>
                    <td class="color-green">{{ item.checkins }}</td>
                    <td><strong>{{ item.total }}</strong></td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <div class="mobile-cards stats-mobile-inline">
        {% for item in data.transactions_by_month %}
        <div class="list-row">
            <div class="list-row-content">
                <div class="list-row-title">{{ item.month }}</div>
                <div class="list-row-subtitle">
                    <span class="color-orange">{{ item.checkouts }} out</span> &middot;
                    <span class="color-green">{{ item.checkins }} in</span>
                </div>
            </div>
            <span class="list-row-value"><strong>{{ item.total }}</strong></span>
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

{% if data.long_term_checkouts %}
<div class="section-header mt-3">Long-Term Checkouts (90+ Days)</div>
<div class="card">
    <div class="mobile-cards stats-mobile-inline">
        {% for item in data.long_term_checkouts %}
        <div class="list-row">
            <div class="list-row-content">
                <div class="list-row-title">{{ item.asset_tag }} - {{ item.make }} {{ item.model }}</div>
                <div class="list-row-subtitle">{{ item.person_name }}</div>
            </div>
            <span class="status-badge status-pending">{{ item.days_out }} days</span>
        </div>
        {% endfor %}
    </div>
    <div class="table-wrapper stats-table-inline">
        <table>
            <thead>
                <tr>
                    <th>Asset Tag</th>
                    <th>Device</th>
                    <th>Assigned To</th>
                    <th>Checkout Date</th>
                    <th>Days Out</th>
                </tr>
            </thead>
            <tbody>
                {% for item in data.long_term_checkouts %}
                <tr>
                    <td>{{ item.asset_tag }}</td>
                    <td>{{ item.make }} {{ item.model }}</td>
                    <td>{{ item.person_name }}</td>
                    <td>{{ item.checkout_date[:10] if item.checkout_date else '-' }}</td>
                    <td class="color-orange"><strong>{{ item.days_out }}</strong></td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endif %}

{% if data.recent_activity %}
<div class="section-header mt-3">Recent Activity (Last 7 Days)</div>
<div class="card">
    {% for item in data.recent_activity %}
    <div class="detail-row">
        <span class="detail-label">{{ item.date }}</span>
        <span class="detail-value">{{ item.count }} transaction{{ 's' if item.count != 1 else '' }}</span>
    </div>
    {% endfor %}
</div>
{% endif %}

<!-- Fun Stats Section -->
<div class="section-header mt-3">Fun Stats & Awards</div>
<div class="fun-stats-grid">
    {% if data.frequent_flyer %}
    <div class="fun-stat-card">
        <div class="fun-stat-icon">&#9992;</div>
        <div class="fun-stat-title">Frequent Flyer</div>
        <div class="fun-stat-desc">Most device checkouts by a single person</div>
        <div class="fun-stat-value">{{ data.frequent_flyer.name }}</div>
        <div class="fun-stat-detail">{{ data.frequent_flyer.checkout_count }} total checkouts</div>
    </div>
    {% endif %}

    {% if data.boomerang_device %}
    <div class="fun-stat-card">
        <div class="fun-stat-icon">&#127919;</div>
        <div class="fun-stat-title">Boomerang Award</div>
        <div class="fun-stat-desc">Device checked out the most times</div>
        <div class="fun-stat-value">{{ data.boomerang_device.asset_tag }}</div>
        <div class="fun-stat-detail">{{ data.boomerang_device.trip_count }} round trips</div>
    </div>
    {% endif %}

    {% if data.well_traveled %}
    <div class="fun-stat-card">
        <div class="fun-stat-icon">&#127758;</div>
        <div class="fun-stat-title">Well Traveled</div>
        <div class="fun-stat-desc">Device used by the most different people</div>
        <div class="fun-stat-value">{{ data.well_traveled.asset_tag }}</div>
        <div class="fun-stat-detail">{{ data.well_traveled.unique_users }} different users</div>
    </div>
    {% endif %}

    {% if data.loyal_companion %}
    <div class="fun-stat-card">
        <div class="fun-stat-icon">&#128153;</div>
        <div class="fun-stat-title">Loyal Companion</div>
        <div class="fun-stat-desc">Longest current device assignment</div>
        <div class="fun-stat-value">{{ data.loyal_companion.person_name }}</div>
        <div class="fun-stat-detail">{{ data.loyal_companion.days_together }} days with {{ data.loyal_companion.asset_tag }}</div>
    </div>
    {% endif %}

    {% if data.veteran_device %}
    <div class="fun-stat-card">
        <div class="fun-stat-icon">&#127942;</div>
        <div class="fun-stat-title">Veteran Device</div>
        <div class="fun-stat-desc">Oldest device still in active service</div>
        <div class="fun-stat-value">{{ data.veteran_device.asset_tag }}</div>
        <div class="fun-stat-detail">{{ data.veteran_device.age_days }} days in the fleet</div>
    </div>
    {% endif %}

    {% if data.newest_device %}
    <div class="fun-stat-card">
        <div class="fun-stat-icon">&#10024;</div>
        <div class="fun-stat-title">Fresh Off the Truck</div>
        <div class="fun-stat-desc">Most recently added to inventory</div>
        <div class="fun-stat-value">{{ data.newest_device.asset_tag }}</div>
        <div class="fun-stat-detail">{{ data.newest_device.make }} {{ data.newest_device.model }}</div>
    </div>
    {% endif %}

    {% if data.speed_demon %}
    <div class="fun-stat-card">
        <div class="fun-stat-icon">&#9889;</div>
        <div class="fun-stat-title">Speed Demon</div>
        <div class="fun-stat-desc">Fastest checkout-to-return turnaround</div>
        <div class="fun-stat-value">{{ data.speed_demon.person_name }}</div>
        <div class="fun-stat-detail">Returned in {{ data.speed_demon.days_held }} day{% if data.speed_demon.days_held != 1 %}s{% endif %}</div>
    </div>
    {% endif %}

    {% if data.busiest_day %}
    <div class="fun-stat-card">
        <div class="fun-stat-icon">&#128293;</div>
        <div class="fun-stat-title">Busiest Day</div>
        <div class="fun-stat-desc">Day of the week with most activity</div>
        <div class="fun-stat-value">{{ data.busiest_day.day_name }}</div>
        <div class="fun-stat-detail">{{ data.busiest_day.count }} total transactions</div>
    </div>
    {% endif %}

    {% if data.peak_month %}
    <div class="fun-stat-card">
        <div class="fun-stat-icon">&#128200;</div>
        <div class="fun-stat-title">Peak Month</div>
        <div class="fun-stat-desc">Busiest month on record</div>
        <div class="fun-stat-value">{{ data.peak_month.month }}</div>
        <div class="fun-stat-detail">{{ data.peak_month.count }} transactions</div>
    </div>
    {% endif %}

    {% if data.popular_model %}
    <div class="fun-stat-card">
        <div class="fun-stat-icon">&#11088;</div>
        <div class="fun-stat-title">Popular Model</div>
        <div class="fun-stat-desc">Most frequently checked out device type</div>
        <div class="fun-stat-value">{{ data.popular_model.device_model }}</div>
        <div class="fun-stat-detail">{{ data.popular_model.checkout_count }} checkouts</div>
    </div>
    {% endif %}

    {% if data.golden_device %}
    <div class="fun-stat-card">
        <div class="fun-stat-icon">&#127775;</div>
        <div class="fun-stat-title">Golden Device</div>
        <div class="fun-stat-desc">Most "excellent" condition returns</div>
        <div class="fun-stat-value">{{ data.golden_device.asset_tag }}</div>
        <div class="fun-stat-detail">{{ data.golden_device.excellent_count }}x returned in excellent condition</div>
    </div>
    {% endif %}
</div>
{% endblock %}