{% extends 'layouts/base.html' %}
{% load static %}
{% load accounts_tags %}

{% block title %}Management Dashboard - Adtlas{% endblock %}

{% block extra_css %}
<style>
.stat-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 15px;
    padding: 2rem;
    color: white;
    margin-bottom: 2rem;
    transition: all 0.3s;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.action-card {
    border: none;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
}

.action-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.btn-gradient {
    background: linear-gradient(45deg, #007bff, #0056b3);
    border: none;
    color: white;
    transition: all 0.3s;
}

.btn-gradient:hover {
    background: linear-gradient(45deg, #0056b3, #004085);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.activity-feed {
    max-height: 400px;
    overflow-y: auto;
}
</style>
{% endblock %}

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title">Management Dashboard</h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
            <li class="breadcrumb-item active" aria-current="page">Management</li>
        </ol>
    </div>
</div>
{% endblock %}

{% block content %}
<!-- Statistics Cards -->
<div class="row">
    {% if permissions.can_view_users %}
    <div class="col-lg-3 col-md-6">
        <div class="card stat-card">
            <div class="card-body">
                <h3 class="text-white">{{ stats.total_users }}</h3>
                <h5 class="text-white">Total Users</h5>
                <p class="mb-0">Active: {{ stats.active_users }} | Inactive: {{ stats.inactive_users }}</p>
            </div>
        </div>
    </div>
    {% endif %}

    {% if permissions.can_view_roles %}
    <div class="col-lg-3 col-md-6">
        <div class="card stat-card">
            <div class="card-body">
                <h3 class="text-white">{{ stats.total_roles }}</h3>
                <h5 class="text-white">Total Roles</h5>
                <p class="mb-0">Active: {{ stats.active_roles }}</p>
            </div>
        </div>
    </div>
    {% endif %}

    {% if permissions.can_view_departments %}
    <div class="col-lg-3 col-md-6">
        <div class="card stat-card">
            <div class="card-body">
                <h3 class="text-white">{{ stats.total_departments }}</h3>
                <h5 class="text-white">Total Departments</h5>
                <p class="mb-0">Active: {{ stats.active_departments }}</p>
            </div>
        </div>
    </div>
    {% endif %}

    <div class="col-lg-3 col-md-6">
        <div class="card stat-card">
            <div class="card-body">
                <h3 class="text-white">{{ stats.active_sessions }}</h3>
                <h5 class="text-white">Active Sessions</h5>
                <p class="mb-0">&nbsp;</p>
            </div>
        </div>
    </div>
</div>

<!-- Quick Actions and Recent Activities -->
<div class="row">
    <div class="col-lg-8">
        <div class="card action-card">
            <div class="card-header">
                <h4 class="card-title">Quick Actions</h4>
            </div>
            <div class="card-body">
                <div class="row">
                    {% if permissions.can_add_users %}
                    <div class="col-md-4 mb-3">
                        <a href="{% url 'accounts:user_create' %}" class="btn btn-gradient w-100">
                            <i class="fe fe-user-plus"></i> Add User
                        </a>
                    </div>
                    {% endif %}
                    {% if permissions.can_add_roles %}
                    <div class="col-md-4 mb-3">
                        <a href="{% url 'accounts:role_create' %}" class="btn btn-gradient w-100">
                            <i class="fe fe-shield"></i> Create Role
                        </a>
                    </div>
                    {% endif %}
                    {% if permissions.can_add_departments %}
                    <div class="col-md-4 mb-3">
                        <a href="{% url 'accounts:department_create' %}" class="btn btn-gradient w-100">
                            <i class="fe fe-grid"></i> Create Department
                        </a>
                    </div>
                    {% endif %}
                    {% if permissions.can_view_users %}
                    <div class="col-md-4 mb-3">
                        <a href="{% url 'accounts:user_list' %}" class="btn btn-outline-primary w-100">
                            <i class="fe fe-users"></i> Manage Users
                        </a>
                    </div>
                    {% endif %}
                    {% if permissions.can_view_roles %}
                    <div class="col-md-4 mb-3">
                        <a href="{% url 'accounts:role_list' %}" class="btn btn-outline-primary w-100">
                            <i class="fe fe-shield"></i> Manage Roles
                        </a>
                    </div>
                    {% endif %}
                    {% if permissions.can_view_departments %}
                    <div class="col-md-4 mb-3">
                        <a href="{% url 'accounts:department_list' %}" class="btn btn-outline-primary w-100">
                            <i class="fe fe-grid"></i> Manage Departments
                        </a>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card action-card">
            <div class="card-header">
                <h4 class="card-title">Recent Users</h4>
            </div>
            <div class="card-body">
                <ul class="list-group list-group-flush">
                    {% for user in recent_users %}
                    <li class="list-group-item d-flex align-items-center">
                        <img src="{{ user.profile.get_avatar_url }}" alt="avatar" class="rounded-circle" width="40" height="40">
                        <div class="ms-3">
                            <h6 class="mb-0">{{ user.get_full_name|default:user.email }}</h6>
                            <small class="text-muted">{{ user.date_joined|timesince }} ago</small>
                        </div>
                    </li>
                    {% empty %}
                    <li class="list-group-item">No recent users</li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- Recent Activities -->
<div class="row">
    <div class="col-12">
        <div class="card action-card">
            <div class="card-header">
                <h4 class="card-title">Recent Activities</h4>
            </div>
            <div class="card-body activity-feed">
                <ul class="list-group list-group-flush">
                    {% for activity in recent_activities %}
                    <li class="list-group-item">
                        <div class="d-flex justify-content-between">
                            <div>
                                <strong>{{ activity.user.get_full_name|default:activity.user.email }}</strong>
                                {{ activity.get_action_display }} a {{ activity.object_type }}
                            </div>
                            <small class="text-muted">{{ activity.created_at|timesince }} ago</small>
                        </div>
                        <p class="mb-0 text-muted">{{ activity.object_repr }}</p>
                    </li>
                    {% empty %}
                    <li class="list-group-item">No recent activities</li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Add any dashboard specific JS here if needed
</script>
{% endblock %}