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

{% block title %}Accounts Dashboard{% endblock title %}

{% block extra_css %}
<style>
    .dashboard-container {
        padding: 2rem 1rem;
    }
    
    .dashboard-header {
        background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
        color: white;
        border-radius: 12px;
        padding: 30px;
        margin-bottom: 30px;
        position: relative;
        overflow: hidden;
    }
    
    .dashboard-header::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;
        height: 100px;
        background: rgba(255,255,255,0.1);
        border-radius: 50%;
        transform: translate(30px, -30px);
    }
    
    .dashboard-info {
        position: relative;
        z-index: 2;
    }
    
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .stat-card {
        text-align: center;
        padding: 20px 15px;
        border-radius: 10px;
        background: white;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        border: 1px solid #e9ecef;
    }
    
    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.12);
    }
    
    .stat-icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 10px;
        font-size: 1.5rem;
    }
    
    .stat-number {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        color: #2d3748;
    }
    
    .stat-label {
        color: #718096;
        font-weight: 500;
        margin-bottom: 1rem;
    }
    
    .stat-change {
        font-size: 0.9rem;
        font-weight: 600;
        padding: 0.25rem 0.75rem;
        border-radius: 20px;
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
    }
    
    .stat-change.positive {
        background: #c6f6d5;
        color: #2f855a;
    }
    
    .stat-change.negative {
        background: #fed7d7;
        color: #c53030;
    }
    
    .quick-actions {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        margin-bottom: 2rem;
    }
    
    .action-card {
        background: white;
        border-radius: 15px;
        padding: 1.5rem;
        text-align: center;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        border: 1px solid #e9ecef;
        transition: all 0.3s ease;
        text-decoration: none;
        color: inherit;
    }
    
    .action-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
        text-decoration: none;
        color: inherit;
    }
    
    .action-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
        font-size: 1.5rem;
        color: white;
        background: var(--action-color, #667eea);
    }
    
    .action-title {
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: #2d3748;
    }
    
    .action-description {
        font-size: 0.9rem;
        color: #718096;
    }
    
    .content-grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 2rem;
        margin-bottom: 2rem;
    }
    
    .content-card {
        background: white;
        border-radius: 15px;
        padding: 2rem;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        border: 1px solid #e9ecef;
    }
    
    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #e9ecef;
    }
    
    .card-title {
        font-weight: 600;
        color: #2d3748;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .card-action {
        color: #667eea;
        text-decoration: none;
        font-size: 0.9rem;
        font-weight: 500;
    }
    
    .card-action:hover {
        text-decoration: underline;
    }
    
    .activity-item {
        display: flex;
        align-items: center;
        padding: 1rem 0;
        border-bottom: 1px solid #f7fafc;
    }
    
    .activity-item:last-child {
        border-bottom: none;
    }
    
    .activity-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 1rem;
        border: 2px solid #e9ecef;
    }
    
    .activity-content {
        flex: 1;
    }
    
    .activity-text {
        font-size: 0.9rem;
        color: #4a5568;
        margin-bottom: 0.25rem;
    }
    
    .activity-time {
        font-size: 0.8rem;
        color: #a0aec0;
    }
    
    .activity-icon {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        color: white;
        background: var(--activity-color, #667eea);
    }
    
    .user-list {
        max-height: 300px;
        overflow-y: auto;
    }
    
    .user-item {
        display: flex;
        align-items: center;
        padding: 0.75rem 0;
        border-bottom: 1px solid #f7fafc;
    }
    
    .user-item:last-child {
        border-bottom: none;
    }
    
    .user-avatar {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 0.75rem;
        border: 2px solid #e9ecef;
    }
    
    .user-info {
        flex: 1;
    }
    
    .user-name {
        font-weight: 500;
        color: #2d3748;
        font-size: 0.9rem;
        margin-bottom: 0.25rem;
    }
    
    .user-role {
        font-size: 0.8rem;
        color: #718096;
    }
    
    .user-status {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--status-color, #48bb78);
    }
    
    .chart-container {
        height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f7fafc;
        border-radius: 10px;
        margin-top: 1rem;
    }
    
    .empty-state {
        text-align: center;
        padding: 2rem;
        color: #a0aec0;
    }
    
    .empty-state i {
        font-size: 3rem;
        margin-bottom: 1rem;
        display: block;
    }
    
    @media (max-width: 1024px) {
        .content-grid {
            grid-template-columns: 1fr;
        }
    }
    
    @media (max-width: 768px) {
        .dashboard-container {
            padding: 1rem;
        }
        
        .dashboard-header {
            padding: 2rem 1.5rem;
            text-align: center;
        }
        
        .stats-grid {
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        }
        
        .quick-actions {
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        }
        
        .content-card {
            padding: 1.5rem;
        }
    }
</style>
{% endblock extra_css %}

{% block content %}
<div class="dashboard-container">
    <!-- Dashboard Header -->
    <div class="dashboard-header">
        <div class="dashboard-info">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h1 class="mb-2">Accounts Dashboard</h1>
                    <p class="mb-0 opacity-75">Manage users, roles, and security settings</p>
                </div>
                <div class="col-md-4 text-md-end">
                    <div class="d-flex flex-wrap gap-2 justify-content-md-end">
                        <span class="badge bg-light text-dark">
                            <i class="fe fe-calendar me-1"></i>{{ today|date:'M d, Y' }}
                        </span>
                        <span class="badge bg-light text-dark">
                            <i class="fe fe-clock me-1"></i>{{ now|time:'H:i' }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Statistics Cards -->
    <div class="stats-grid">
        <div class="stat-card" style="--card-color: #667eea;">
            <div class="stat-icon">
                <i class="fe fe-users"></i>
            </div>
            <div class="stat-number">{{ stats.total_users|default:0 }}</div>
            <div class="stat-label">Total Users</div>
            <div class="stat-change positive">
                <i class="fe fe-trending-up"></i>
                +{{ stats.new_users_this_month|default:0 }} this month
            </div>
        </div>
        
        <div class="stat-card" style="--card-color: #f093fb;">
            <div class="stat-icon">
                <i class="fe fe-user-check"></i>
            </div>
            <div class="stat-number">{{ stats.active_users|default:0 }}</div>
            <div class="stat-label">Active Users</div>
            <div class="stat-change positive">
                <i class="fe fe-trending-up"></i>
                {{ stats.active_percentage|default:0 }}% of total
            </div>
        </div>
        
        <div class="stat-card" style="--card-color: #4facfe;">
            <div class="stat-icon">
                <i class="fe fe-shield"></i>
            </div>
            <div class="stat-number">{{ stats.total_roles|default:0 }}</div>
            <div class="stat-label">User Roles</div>
            <div class="stat-change positive">
                <i class="fe fe-plus"></i>
                {{ stats.permissions_count|default:0 }} permissions
            </div>
        </div>
        
        <div class="stat-card" style="--card-color: #43e97b;">
            <div class="stat-icon">
                <i class="fe fe-activity"></i>
            </div>
            <div class="stat-number">{{ stats.login_sessions|default:0 }}</div>
            <div class="stat-label">Active Sessions</div>
            <div class="stat-change positive">
                <i class="fe fe-clock"></i>
                Last 24 hours
            </div>
        </div>
    </div>
    
    <!-- Quick Actions -->
    <div class="quick-actions">
        <a href="{% url 'accounts:user_create' %}" class="action-card" style="--action-color: #667eea;">
            <div class="action-icon">
                <i class="fe fe-user-plus"></i>
            </div>
            <div class="action-title">Add User</div>
            <div class="action-description">Create a new user account</div>
        </a>
        
        <a href="{% url 'accounts:role_create' %}" class="action-card" style="--action-color: #f093fb;">
            <div class="action-icon">
                <i class="fe fe-shield"></i>
            </div>
            <div class="action-title">Create Role</div>
            <div class="action-description">Define new user role</div>
        </a>
        
        <a href="{% url 'accounts:user_list' %}" class="action-card" style="--action-color: #4facfe;">
            <div class="action-icon">
                <i class="fe fe-users"></i>
            </div>
            <div class="action-title">Manage Users</div>
            <div class="action-description">View and edit users</div>
        </a>
        
        <a href="{% url 'accounts:role_list' %}" class="action-card" style="--action-color: #43e97b;">
            <div class="action-icon">
                <i class="fe fe-key"></i>
            </div>
            <div class="action-title">Manage Roles</div>
            <div class="action-description">Configure permissions</div>
        </a>
    </div>
    
    <!-- Content Grid -->
    <div class="content-grid">
        <!-- Recent Activity -->
        <div class="content-card">
            <div class="card-header">
                <h5 class="card-title">
                    <i class="fe fe-activity text-primary"></i>
                    Recent Activity
                </h5>
                <a href="#" class="card-action">View All</a>
            </div>
            
            {% if recent_activities %}
            <div class="activity-list">
                {% for activity in recent_activities %}
                <div class="activity-item">
                    <img src="{{ activity.user.profile.avatar.url|default:'/static/images/default-avatar.png' }}" 
                         alt="{{ activity.user.get_full_name }}" class="activity-avatar">
                    <div class="activity-content">
                        <div class="activity-text">
                            <strong>{{ activity.user.get_full_name|default:activity.user.username }}</strong>
                            {{ activity.description }}
                        </div>
                        <div class="activity-time">{{ activity.timestamp|timesince }} ago</div>
                    </div>
                    <div class="activity-icon" style="--activity-color: {{ activity.color|default:'#667eea' }};">
                        <i class="fe fe-{{ activity.icon|default:'activity' }}"></i>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="empty-state">
                <i class="fe fe-activity"></i>
                <p>No recent activity</p>
            </div>
            {% endif %}
        </div>
        
        <!-- Recent Users -->
        <div class="content-card">
            <div class="card-header">
                <h5 class="card-title">
                    <i class="fe fe-users text-success"></i>
                    Recent Users
                </h5>
                <a href="{% url 'accounts:user_list' %}" class="card-action">View All</a>
            </div>
            
            {% if recent_users %}
            <div class="user-list">
                {% for user in recent_users %}
                <div class="user-item">
                    <img src="{{ user.profile.get_avatar_url }}" 
                         alt="{{ user.get_full_name }}" class="user-avatar">
                    <div class="user-info">
                        <div class="user-name">{{ user.get_full_name|default:user.username }}</div>
                        <div class="user-role">{{ user.role.name|default:'No role assigned' }}</div>
                    </div>
                    <div class="user-status" style="--status-color: {% if user.is_active %}#48bb78{% else %}#f56565{% endif %};"></div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="empty-state">
                <i class="fe fe-users"></i>
                <p>No users found</p>
            </div>
            {% endif %}
        </div>
    </div>
    
    <!-- Charts Row -->
    <div class="row">
        <div class="col-lg-8">
            <div class="content-card">
                <div class="card-header">
                    <h5 class="card-title">
                        <i class="fe fe-bar-chart-2 text-info"></i>
                        User Registration Trends
                    </h5>
                    <a href="#" class="card-action">Export Data</a>
                </div>
                
                <div class="chart-container">
                    <div class="empty-state">
                        <i class="fe fe-bar-chart-2"></i>
                        <p>Chart will be displayed here</p>
                        <small>Integration with Chart.js or similar library needed</small>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4">
            <div class="content-card">
                <div class="card-header">
                    <h5 class="card-title">
                        <i class="fe fe-pie-chart text-warning"></i>
                        Role Distribution
                    </h5>
                </div>
                
                {% if role_distribution %}
                <div class="role-stats">
                    {% for role in role_distribution %}
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div>
                            <strong>{{ role.name }}</strong>
                            <div class="text-muted small">{{ role.user_count }} user{{ role.user_count|pluralize }}</div>
                        </div>
                        <div class="text-end">
                            <div class="fw-bold">{{ role.percentage }}%</div>
                            <div class="progress" style="width: 60px; height: 4px;">
                                <div class="progress-bar" style="width: {{ role.percentage }}%; background: {{ role.color|default:'#667eea' }};"></div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="empty-state">
                    <i class="fe fe-pie-chart"></i>
                    <p>No role data available</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock content %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-refresh dashboard data every 5 minutes
    setInterval(function() {
        refreshDashboardStats();
    }, 300000); // 5 minutes
    
    function refreshDashboardStats() {
        fetch('/accounts/api/dashboard-stats/')
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    updateStatsCards(data.stats);
                }
            })
            .catch(error => {
                console.error('Error refreshing dashboard stats:', error);
            });
    }
    
    function updateStatsCards(stats) {
        // Update stat numbers
        const statCards = document.querySelectorAll('.stat-card');
        statCards.forEach((card, index) => {
            const numberElement = card.querySelector('.stat-number');
            const changeElement = card.querySelector('.stat-change');
            
            if (numberElement && stats[index]) {
                // Animate number change
                animateNumber(numberElement, parseInt(numberElement.textContent), stats[index].value);
            }
        });
    }
    
    function animateNumber(element, start, end) {
        const duration = 1000;
        const startTime = performance.now();
        
        function update(currentTime) {
            const elapsed = currentTime - startTime;
            const progress = Math.min(elapsed / duration, 1);
            
            const current = Math.floor(start + (end - start) * progress);
            element.textContent = current.toLocaleString();
            
            if (progress < 1) {
                requestAnimationFrame(update);
            }
        }
        
        requestAnimationFrame(update);
    }
    
    // Add hover effects to action cards
    document.querySelectorAll('.action-card').forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-5px) scale(1.02)';
        });
        
        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(-3px) scale(1)';
        });
    });
    
    // Add click tracking for analytics
    document.querySelectorAll('.action-card, .card-action').forEach(element => {
        element.addEventListener('click', function() {
            const action = this.querySelector('.action-title')?.textContent || this.textContent;
            
            // Track click event (placeholder for analytics)
            console.log('Dashboard action clicked:', action);
        });
    });
});
</script>
{% endblock extra_js %}