{% extends "layout.html" %}

{% block content %}
<div class="admin-container">
    <div class="admin-header">
        <h1>Company Users - {{ company.name }}</h1>
        <a href="{{ url_for('create_user') }}" class="btn btn-success">Create New User</a>
    </div>
    
    <!-- User Statistics -->
    <div class="stats-section">
        <h2>User Statistics</h2>
        <div class="stats-grid">
            <div class="stat-card">
                <h3>{{ stats.total }}</h3>
                <p>Total Users</p>
            </div>
            <div class="stat-card">
                <h3>{{ stats.active }}</h3>
                <p>Active Users</p>
            </div>
            <div class="stat-card">
                <h3>{{ stats.unverified }}</h3>
                <p>Unverified</p>
            </div>
            <div class="stat-card">
                <h3>{{ stats.blocked }}</h3>
                <p>Blocked</p>
            </div>
            <div class="stat-card">
                <h3>{{ stats.admins }}</h3>
                <p>Administrators</p>
            </div>
            <div class="stat-card">
                <h3>{{ stats.supervisors }}</h3>
                <p>Supervisors</p>
            </div>
        </div>
    </div>
    
    <!-- User List -->
    <div class="admin-section">
        <h2>User List</h2>
        {% if users %}
            <div class="user-list">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Username</th>
                            <th>Email</th>
                            <th>Role</th>
                            <th>Team</th>
                            <th>Status</th>
                            <th>Created</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for user in users %}
                        <tr>
                            <td>
                                {{ user.username }}
                                {% if user.two_factor_enabled %}
                                    <span class="security-badge" title="2FA Enabled">🔒</span>
                                {% endif %}
                            </td>
                            <td>{{ user.email }}</td>
                            <td>
                                <span class="role-badge role-{{ user.role.name.lower() }}">
                                    {{ user.role.value }}
                                </span>
                            </td>
                            <td>
                                {% if user.team %}
                                    <span class="team-badge">{{ user.team.name }}</span>
                                {% else %}
                                    <span class="text-muted">No team</span>
                                {% endif %}
                            </td>
                            <td>
                                <span class="status-badge {% if user.is_blocked %}status-blocked{% elif not user.is_verified %}status-unverified{% else %}status-active{% endif %}">
                                    {% if user.is_blocked %}Blocked{% elif not user.is_verified %}Unverified{% else %}Active{% endif %}
                                </span>
                            </td>
                            <td>{{ user.created_at.strftime('%Y-%m-%d') }}</td>
                            <td>
                                <a href="{{ url_for('edit_user', user_id=user.id) }}" class="btn btn-sm btn-primary">Edit</a>
                                {% if user.id != g.user.id %}
                                    {% if user.is_blocked %}
                                        <a href="{{ url_for('toggle_user_status', user_id=user.id) }}" class="btn btn-sm btn-success">Unblock</a>
                                    {% else %}
                                        <a href="{{ url_for('toggle_user_status', user_id=user.id) }}" class="btn btn-sm btn-warning">Block</a>
                                    {% endif %}
                                    <button class="btn btn-sm btn-danger" onclick="confirmDelete({{ user.id }}, '{{ user.username }}')">Delete</button>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <div class="empty-state">
                <h3>No Users Found</h3>
                <p>There are no users in this company yet.</p>
                <a href="{{ url_for('create_user') }}" class="btn btn-primary">Add First User</a>
            </div>
        {% endif %}
    </div>

    <!-- Navigation -->
    <div class="admin-section">
        <a href="{{ url_for('admin_company') }}" class="btn btn-secondary">← Back to Company Management</a>
    </div>
</div>

<script>
function confirmDelete(userId, username) {
    if (confirm(`Are you sure you want to delete user "${username}"? This action cannot be undone.`)) {
        fetch(`/admin/users/delete/${userId}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            }
        }).then(response => {
            if (response.ok) {
                location.reload();
            } else {
                alert('Error deleting user');
            }
        });
    }
}
</script>

<style>
.security-badge {
    font-size: 12px;
    margin-left: 5px;
}

.role-badge {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
}

.role-admin {
    background-color: #ff6b6b;
    color: white;
}

.role-supervisor {
    background-color: #ffa726;
    color: white;
}

.role-team_leader {
    background-color: #42a5f5;
    color: white;
}

.role-team_member {
    background-color: #66bb6a;
    color: white;
}

.team-badge {
    background-color: #e3f2fd;
    color: #1976d2;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    border: 1px solid #bbdefb;
}

.status-unverified {
    background-color: #fff3cd;
    color: #856404;
}

.empty-state {
    text-align: center;
    padding: 40px 20px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
}

.empty-state h3 {
    color: #666;
    margin-bottom: 10px;
}

.empty-state p {
    color: #888;
    margin-bottom: 20px;
}
</style>
{% endblock %}