{% extends 'admin/base.html' %}

{% block title %}Super Admin Dashboard{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h1 class="page-title">Super Admin Dashboard</h1>
        <p class="page-subtitle">Monitor registrations, approvals, and platform health at a glance.</p>
    </div>
    <div class="page-actions">
        <a class="btn btn-primary" href="{{ url_for('admin.companies') }}">
            <i class="fa-light fa-list-check"></i>
            <span>Manage Companies</span>
        </a>
    </div>
</div>

{% if error %}
    <div class="alert alert-danger" role="alert">
        {{ error }}
    </div>
{% endif %}

<section class="stats-grid">
    <article class="stat-card">
        <header class="stat-header">
            <span class="stat-icon total"><i class="fa-light fa-building"></i></span>
            <span class="stat-label">Total Companies</span>
        </header>
        <div class="stat-value">{{ stats.total }}</div>
        <footer class="stat-footer">All registered organisations</footer>
    </article>

    <article class="stat-card">
        <header class="stat-header">
            <span class="stat-icon pending"><i class="fa-light fa-hourglass-half"></i></span>
            <span class="stat-label">Pending Review</span>
        </header>
        <div class="stat-value">{{ stats.pending }}</div>
        <footer class="stat-footer">Awaiting admin approval</footer>
    </article>

    <article class="stat-card">
        <header class="stat-header">
            <span class="stat-icon approved"><i class="fa-light fa-badge-check"></i></span>
            <span class="stat-label">Approved</span>
        </header>
        <div class="stat-value">{{ stats.approved }}</div>
        <footer class="stat-footer">Live and accessible accounts</footer>
    </article>

    <article class="stat-card">
        <header class="stat-header">
            <span class="stat-icon rejected"><i class="fa-light fa-circle-xmark"></i></span>
            <span class="stat-label">Rejected</span>
        </header>
        <div class="stat-value">{{ stats.rejected }}</div>
        <footer class="stat-footer">Denied or flagged sign-ups</footer>
    </article>
</section>

<div class="card mt-5">
    <div class="card-header">
        <div>
            <h2 class="card-title">Latest Registrations</h2>
            <p class="card-subtitle">Stay on top of the newest sign-ups.</p>
        </div>
        <a class="link-muted" href="{{ url_for('admin.companies') }}">View all</a>
    </div>
    <div class="card-body">
        {% if latest_companies %}
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Company</th>
                            <th>Email</th>
                            <th>Status</th>
                            <th>Verification</th>
                            <th>Registered On</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for company in latest_companies %}
                            <tr>
                                <td>{{ company.name }}</td>
                                <td>{{ company.email }}</td>
                                <td>
                                    <span class="status status-{{ company.status }}">{{ company.status|capitalize }}</span>
                                </td>
                                <td>
                                    {% if company.is_verified %}
                                        <span class="badge badge-success">Email Verified</span>
                                    {% else %}
                                        <span class="badge badge-warning">Waiting Verification</span>
                                    {% endif %}
                                </td>
                                <td>{{ company.created_at.strftime('%Y-%m-%d %H:%M') if company.created_at else 'N/A' }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <div class="empty-state">
                <i class="fa-light fa-inbox"></i>
                <p>No recent registrations.</p>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}