{% extends 'manager/base.html' %}
{% load static %}
{% load i18n %}

{% block title %}{% trans "User Management" %}{% endblock %}

{% block header.add_script %}
<style>
    .filter-section {
        background: #f8f9fa;
        padding: 20px;
        border-radius: 8px;
        margin-bottom: 20px;
    }
    .user-card {
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 15px;
        background: white;
    }
    .user-avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: #007bff;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
    }
    .churn-risk-high { color: #dc3545; }
    .churn-risk-medium { color: #ffc107; }
    .churn-risk-low { color: #28a745; }
    .subscription-badge {
        font-size: 0.75rem;
        padding: 4px 8px;
    }
    .user-stats {
        font-size: 0.9rem;
        color: #6c757d;
    }
</style>
{% endblock %}

{% block content %}
<div class="content container-fluid">
    <div class="page-header">
        <div class="row">
            <div class="col-sm-12">
                <h3 class="page-title">{% trans "User Management" %}</h3>
                <ul class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{% url 'panel-manager-dashboard' %}">{% trans "Dashboard" %}</a></li>
                    <li class="breadcrumb-item active">{% trans "Users" %}</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Filters Section -->
    <div class="filter-section">
        <form method="GET" class="row">
            <div class="col-md-3">
                <label for="search">{% trans "Search" %}</label>
                <input type="text" class="form-control" id="search" name="search" 
                       value="{{ search_query }}" placeholder="{% trans 'Name, email, phone...' %}">
            </div>
            <div class="col-md-2">
                <label for="subscription">{% trans "Subscription" %}</label>
                <select class="form-control" id="subscription" name="subscription">
                    <option value="">{% trans "All" %}</option>
                    <option value="active" {% if subscription_filter == 'active' %}selected{% endif %}>{% trans "Active" %}</option>
                    <option value="expired" {% if subscription_filter == 'expired' %}selected{% endif %}>{% trans "Expired" %}</option>
                    <option value="free" {% if subscription_filter == 'free' %}selected{% endif %}>{% trans "Free" %}</option>
                </select>
            </div>
            <div class="col-md-2">
                <label for="activity">{% trans "Activity" %}</label>
                <select class="form-control" id="activity" name="activity">
                    <option value="">{% trans "All" %}</option>
                    <option value="active" {% if activity_filter == 'active' %}selected{% endif %}>{% trans "Active" %}</option>
                    <option value="inactive" {% if activity_filter == 'inactive' %}selected{% endif %}>{% trans "Inactive" %}</option>
                </select>
            </div>
            <div class="col-md-2">
                <label for="company">{% trans "Company" %}</label>
                <select class="form-control" id="company" name="company">
                    <option value="">{% trans "All Companies" %}</option>
                    {% for company in companies %}
                    <option value="{{ company.id }}" {% if company_filter == company.id|stringformat:"s" %}selected{% endif %}>
                        {{ company.name }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2">
                <label for="churn_risk">{% trans "Churn Risk" %}</label>
                <select class="form-control" id="churn_risk" name="churn_risk">
                    <option value="">{% trans "All" %}</option>
                    <option value="high" {% if churn_risk_filter == 'high' %}selected{% endif %}>{% trans "High" %}</option>
                    <option value="medium" {% if churn_risk_filter == 'medium' %}selected{% endif %}>{% trans "Medium" %}</option>
                    <option value="low" {% if churn_risk_filter == 'low' %}selected{% endif %}>{% trans "Low" %}</option>
                </select>
            </div>
            <div class="col-md-2">
                <label for="joined_date">{% trans "Joined Date" %}</label>
                <select class="form-control" id="joined_date" name="joined_date">
                    <option value="">{% trans "All Time" %}</option>
                    <option value="today" {% if joined_date_filter == 'today' %}selected{% endif %}>{% trans "Today" %}</option>
                    <option value="this_week" {% if joined_date_filter == 'this_week' %}selected{% endif %}>{% trans "This Week" %}</option>
                    <option value="this_month" {% if joined_date_filter == 'this_month' %}selected{% endif %}>{% trans "This Month" %}</option>
                    <option value="last_month" {% if joined_date_filter == 'last_month' %}selected{% endif %}>{% trans "Last Month" %}</option>
                </select>
            </div>
            <div class="col-md-1">
                <label>&nbsp;</label>
                <button type="submit" class="btn btn-primary form-control">{% trans "Filter" %}</button>
            </div>
        </form>
    </div>

    <!-- Results Summary -->
    <div class="row mb-3">
        <div class="col-md-6">
            <p class="text-muted">
                {% trans "Showing" %} {{ users.start_index }} - {{ users.end_index }} 
                {% trans "of" %} {{ users.paginator.count }} {% trans "users" %}
            </p>
        </div>
        <div class="col-md-6 text-right">
            <a href="{% url 'panel-manager-segmentation' %}" class="btn btn-secondary">
                <i class="fa fa-filter"></i> {% trans "Advanced Segmentation" %}
            </a>
        </div>
    </div>

    <!-- Users List -->
    <div class="row">
        {% for user in users %}
        <div class="col-lg-6">
            <div class="user-card">
                <div class="row">
                    <div class="col-auto">
                        <div class="user-avatar">
                            {% if user.profile.first_name %}
                                {{ user.profile.first_name|first }}{{ user.profile.last_name|first }}
                            {% else %}
                                <i class="fa fa-user"></i>
                            {% endif %}
                        </div>
                    </div>
                    <div class="col">
                        <div class="row">
                            <div class="col-md-8">
                                <h6 class="mb-1">
                                    {% if user.profile.first_name or user.profile.last_name %}
                                        {{ user.profile.first_name }} {{ user.profile.last_name }}
                                    {% else %}
                                        {% trans "User" %} #{{ user.id }}
                                    {% endif %}
                                </h6>
                                <p class="mb-1 text-muted">{{ user.phone_number }}</p>
                                {% if user.profile.email %}
                                    <p class="mb-1 text-muted">{{ user.profile.email }}</p>
                                {% endif %}
                                
                                <!-- Company Info -->
                                {% if user.company %}
                                <p class="mb-1">
                                    <i class="fa fa-building"></i> 
                                    <a href="{% url 'panel-manager-company-profile' user.company.id %}">{{ user.company.name }}</a>
                                </p>
                                {% endif %}
                                
                                <!-- User Stats -->
                                <div class="user-stats">
                                    <span>{% trans "Lacto Points:" %} {{ user.lacto_points_score|default:0 }}</span> |
                                    <span>{% trans "Joined:" %} {{ user.created_at|date:"M Y" }}</span>
                                    {% if user.profile.last_login %}
                                        | <span>{% trans "Last active:" %} {{ user.profile.last_login|timesince }} {% trans "ago" %}</span>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-md-4 text-right">
                                <!-- Subscription Status -->
                                {% with subscription=user.subscription_info %}
                                <span class="badge subscription-badge 
                                    {% if subscription.status == 'Active' %}badge-success
                                    {% elif subscription.status == 'Expired' %}badge-warning
                                    {% else %}badge-secondary{% endif %}">
                                    {{ subscription.status }}
                                </span>
                                {% endwith %}
                                
                                <!-- Churn Risk -->
                                <div class="mt-2">
                                    <span class="churn-risk-{{ user.churn_risk_score|lower }}">
                                        <i class="fa fa-exclamation-triangle"></i> {{ user.churn_risk_score }} {% trans "Risk" %}
                                    </span>
                                </div>
                                
                                <!-- Health Metrics -->
                                {% with biometrics=user.latest_biometrics %}
                                {% if biometrics %}
                                <div class="mt-2 user-stats">
                                    {% if biometrics.weight %}
                                        {% trans "Weight:" %} {{ biometrics.weight }}kg<br>
                                    {% endif %}
                                    {% if biometrics.blood_sugar %}
                                        {% trans "Blood Sugar:" %} {{ biometrics.blood_sugar }}<br>
                                    {% endif %}
                                    {% if biometrics.a1c %}
                                        {% trans "A1C:" %} {{ biometrics.a1c }}%
                                    {% endif %}
                                </div>
                                {% endif %}
                                {% endwith %}
                                
                                <!-- Actions -->
                                <div class="mt-2">
                                    <a href="{% url 'panel-manager-user-profile' user.id %}" class="btn btn-sm btn-primary">
                                        {% trans "View Profile" %}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-12">
            <div class="text-center py-5">
                <i class="fa fa-users fa-3x text-muted mb-3"></i>
                <h5>{% trans "No users found" %}</h5>
                <p class="text-muted">{% trans "Try adjusting your filters or search criteria" %}</p>
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- Pagination -->
    {% if users.has_other_pages %}
    <div class="row">
        <div class="col-12">
            <nav aria-label="{% trans 'User pagination' %}">
                <ul class="pagination justify-content-center">
                    {% if users.has_previous %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ users.previous_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if subscription_filter %}&subscription={{ subscription_filter }}{% endif %}{% if activity_filter %}&activity={{ activity_filter }}{% endif %}{% if company_filter %}&company={{ company_filter }}{% endif %}{% if churn_risk_filter %}&churn_risk={{ churn_risk_filter }}{% endif %}{% if joined_date_filter %}&joined_date={{ joined_date_filter }}{% endif %}">
                                {% trans "Previous" %}
                            </a>
                        </li>
                    {% endif %}
                    
                    {% for page_num in users.paginator.page_range %}
                        {% if page_num == users.number %}
                            <li class="page-item active">
                                <span class="page-link">{{ page_num }}</span>
                            </li>
                        {% elif page_num > users.number|add:'-3' and page_num < users.number|add:'3' %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_num }}{% if search_query %}&search={{ search_query }}{% endif %}{% if subscription_filter %}&subscription={{ subscription_filter }}{% endif %}{% if activity_filter %}&activity={{ activity_filter }}{% endif %}{% if company_filter %}&company={{ company_filter }}{% endif %}{% if churn_risk_filter %}&churn_risk={{ churn_risk_filter }}{% endif %}{% if joined_date_filter %}&joined_date={{ joined_date_filter }}{% endif %}">{{ page_num }}</a>
                            </li>
                        {% endif %}
                    {% endfor %}
                    
                    {% if users.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ users.next_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if subscription_filter %}&subscription={{ subscription_filter }}{% endif %}{% if activity_filter %}&activity={{ activity_filter }}{% endif %}{% if company_filter %}&company={{ company_filter }}{% endif %}{% if churn_risk_filter %}&churn_risk={{ churn_risk_filter }}{% endif %}{% if joined_date_filter %}&joined_date={{ joined_date_filter }}{% endif %}">
                                {% trans "Next" %}
                            </a>
                        </li>
                    {% endif %}
                </ul>
            </nav>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}