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

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

{% block header.add_script %}
<style>
    .filter-builder {
        background: #f8f9fa;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
    }
    .saved-segments {
        background: white;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .segment-card {
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 15px;
        background: white;
        cursor: pointer;
        transition: box-shadow 0.3s ease;
    }
    .segment-card:hover {
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .segment-active {
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
    }
    .filter-row {
        margin-bottom: 15px;
        padding: 15px;
        border: 1px solid #e0e0e0;
        border-radius: 5px;
        background: white;
    }
    .results-section {
        background: white;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .user-preview {
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 15px;
        background: #fafafa;
    }
    .metric-badge {
        background: #007bff;
        color: white;
        padding: 5px 10px;
        border-radius: 15px;
        font-size: 0.8rem;
        font-weight: bold;
        margin-right: 10px;
    }
</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 Segmentation" %}</h3>
                <ul class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{% url 'panel-manager-dashboard' %}">{% trans "Dashboard" %}</a></li>
                    <li class="breadcrumb-item active">{% trans "User Segmentation" %}</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Left Column: Filters and Saved Segments -->
        <div class="col-lg-4">
            <!-- Saved Segments -->
            <div class="saved-segments">
                <h5>{% trans "Saved Segments" %}</h5>
                {% if saved_segments %}
                    {% for segment in saved_segments %}
                    <div class="segment-card" onclick="loadSegment({{ segment.id }})">
                        <h6>{{ segment.name }}</h6>
                        {% if segment.description %}
                            <p class="text-muted mb-2">{{ segment.description }}</p>
                        {% endif %}
                        <small class="text-muted">
                            {% trans "Created by" %} {{ segment.created_by.first_name }} {{ segment.created_by.last_name }}
                            {% trans "on" %} {{ segment.created_at|date:"M d, Y" }}
                        </small>
                        {% if segment.is_shared %}
                            <span class="badge badge-info ml-2">{% trans "Shared" %}</span>
                        {% endif %}
                    </div>
                    {% endfor %}
                {% else %}
                    <p class="text-muted">{% trans "No saved segments yet" %}</p>
                {% endif %}
            </div>

            <!-- Filter Builder -->
            <div class="filter-builder">
                <h5>{% trans "Build Custom Segment" %}</h5>
                <form method="GET" id="segmentForm">
                    <div class="filter-row">
                        <label>{% trans "Subscription Status" %}</label>
                        <select class="form-control" name="subscription_status">
                            <option value="">{% trans "All" %}</option>
                            <option value="active" {% if current_filters.subscription_status == 'active' %}selected{% endif %}>{% trans "Active" %}</option>
                            <option value="expired" {% if current_filters.subscription_status == 'expired' %}selected{% endif %}>{% trans "Expired" %}</option>
                            <option value="free" {% if current_filters.subscription_status == 'free' %}selected{% endif %}>{% trans "Free" %}</option>
                        </select>
                    </div>

                    <div class="filter-row">
                        <label>{% trans "Activity Level" %}</label>
                        <select class="form-control" name="activity_level">
                            <option value="">{% trans "All" %}</option>
                            <option value="active" {% if current_filters.activity_level == 'active' %}selected{% endif %}>{% trans "Active" %}</option>
                            <option value="inactive" {% if current_filters.activity_level == 'inactive' %}selected{% endif %}>{% trans "Inactive" %}</option>
                        </select>
                        <small class="text-muted">{% trans "Based on last login activity" %}</small>
                    </div>

                    <div class="filter-row">
                        <label>{% trans "Last Active (Days)" %}</label>
                        <input type="number" class="form-control" name="last_active_days" 
                               value="{{ current_filters.last_active_days }}" min="1" max="365">
                        <small class="text-muted">{% trans "Users active within X days" %}</small>
                    </div>

                    <div class="filter-row">
                        <label>{% trans "Lacto Points Range" %}</label>
                        <div class="row">
                            <div class="col-6">
                                <input type="number" class="form-control" name="lacto_points_min" 
                                       placeholder="{% trans 'Min' %}" value="{{ current_filters.lacto_points_min }}" min="0">
                            </div>
                            <div class="col-6">
                                <input type="number" class="form-control" name="lacto_points_max" 
                                       placeholder="{% trans 'Max' %}" value="{{ current_filters.lacto_points_max }}" min="0">
                            </div>
                        </div>
                    </div>

                    <div class="filter-row">
                        <label>{% trans "Churn Risk Level" %}</label>
                        <select class="form-control" name="churn_risk">
                            <option value="">{% trans "All" %}</option>
                            <option value="high" {% if current_filters.churn_risk == 'high' %}selected{% endif %}>{% trans "High Risk" %}</option>
                            <option value="medium" {% if current_filters.churn_risk == 'medium' %}selected{% endif %}>{% trans "Medium Risk" %}</option>
                            <option value="low" {% if current_filters.churn_risk == 'low' %}selected{% endif %}>{% trans "Low Risk" %}</option>
                        </select>
                    </div>

                    <div class="filter-row">
                        <label>{% trans "Company" %}</label>
                        <select class="form-control" name="company">
                            <option value="">{% trans "All Companies" %}</option>
                            {% for company in companies %}
                            <option value="{{ company.id }}" {% if current_filters.company == company.id|stringformat:"s" %}selected{% endif %}>
                                {{ company.name }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="filter-row">
                        <label>{% trans "Health Condition" %}</label>
                        <select class="form-control" name="health_condition">
                            <option value="">{% trans "All" %}</option>
                            <option value="diabetes" {% if current_filters.health_condition == 'diabetes' %}selected{% endif %}>{% trans "Diabetes" %}</option>
                            <option value="obesity" {% if current_filters.health_condition == 'obesity' %}selected{% endif %}>{% trans "Obesity" %}</option>
                            <option value="pcos" {% if current_filters.health_condition == 'pcos' %}selected{% endif %}>{% trans "PCOS" %}</option>
                            <option value="hypertension" {% if current_filters.health_condition == 'hypertension' %}selected{% endif %}>{% trans "Hypertension" %}</option>
                        </select>
                    </div>

                    <div class="text-center">
                        <button type="submit" class="btn btn-primary">{% trans "Apply Filters" %}</button>
                        <button type="button" class="btn btn-success ml-2" onclick="showSaveSegmentModal()">{% trans "Save Segment" %}</button>
                        <button type="button" class="btn btn-secondary ml-2" onclick="clearFilters()">{% trans "Clear All" %}</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Right Column: Results -->
        <div class="col-lg-8">
            <div class="results-section">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5>{% trans "Segment Results" %}</h5>
                    <span class="metric-badge">{{ users.paginator.count }} {% trans "users found" %}</span>
                </div>

                <!-- Quick Metrics -->
                <div class="row mb-4">
                    <div class="col-md-3">
                        <div class="text-center">
                            <h6>{{ users.paginator.count }}</h6>
                            <small class="text-muted">{% trans "Total Users" %}</small>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center">
                            <h6 id="activeUsersCount">-</h6>
                            <small class="text-muted">{% trans "Active Users" %}</small>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center">
                            <h6 id="avgLactoPoints">-</h6>
                            <small class="text-muted">{% trans "Avg Points" %}</small>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center">
                            <h6 id="churnRiskCount">-</h6>
                            <small class="text-muted">{% trans "High Risk" %}</small>
                        </div>
                    </div>
                </div>

                <!-- Export Options -->
                <div class="mb-3">
                    <button class="btn btn-outline-primary btn-sm" onclick="exportSegment('csv')">
                        <i class="fa fa-download"></i> {% trans "Export CSV" %}
                    </button>
                    <button class="btn btn-outline-secondary btn-sm ml-2" onclick="exportSegment('excel')">
                        <i class="fa fa-file-excel-o"></i> {% trans "Export Excel" %}
                    </button>
                    <button class="btn btn-outline-info btn-sm ml-2" onclick="sendNotification()">
                        <i class="fa fa-envelope"></i> {% trans "Send Notification" %}
                    </button>
                </div>

                <!-- User List -->
                {% if users %}
                    {% for user in users %}
                    <div class="user-preview">
                        <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 %}
                                {% if user.company %}
                                    <p class="mb-1">
                                        <i class="fa fa-building"></i> {{ user.company.name }}
                                    </p>
                                {% endif %}
                            </div>
                            <div class="col-md-4 text-right">
                                <!-- User Metrics -->
                                <div class="mb-2">
                                    <span class="badge badge-primary">{{ user.lacto_points_score }} {% trans "Points" %}</span>
                                    <span class="badge badge-{% if user.churn_risk_score == 'High' %}danger{% elif user.churn_risk_score == 'Medium' %}warning{% else %}success{% endif %}">
                                        {{ user.churn_risk_score }} {% trans "Risk" %}
                                    </span>
                                </div>
                                
                                <!-- Subscription Status -->
                                {% with subscription=user.subscription_info %}
                                <div class="mb-2">
                                    <span class="badge badge-{% if subscription.status == 'Active' %}success{% elif subscription.status == 'Expired' %}warning{% else %}secondary{% endif %}">
                                        {{ subscription.status }}
                                    </span>
                                </div>
                                {% endwith %}
                                
                                <!-- Actions -->
                                <div>
                                    <a href="{% url 'panel-manager-user-profile' user.id %}" class="btn btn-sm btn-outline-primary">
                                        {% trans "View Profile" %}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}

                    <!-- Pagination -->
                    {% if users.has_other_pages %}
                    <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 current_filters.subscription_status %}&subscription_status={{ current_filters.subscription_status }}{% endif %}{% if current_filters.activity_level %}&activity_level={{ current_filters.activity_level }}{% endif %}{% if current_filters.lacto_points_min %}&lacto_points_min={{ current_filters.lacto_points_min }}{% endif %}{% if current_filters.lacto_points_max %}&lacto_points_max={{ current_filters.lacto_points_max }}{% endif %}{% if current_filters.churn_risk %}&churn_risk={{ current_filters.churn_risk }}{% endif %}{% if current_filters.company %}&company={{ current_filters.company }}{% endif %}{% if current_filters.health_condition %}&health_condition={{ current_filters.health_condition }}{% endif %}{% if current_filters.last_active_days %}&last_active_days={{ current_filters.last_active_days }}{% 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 current_filters.subscription_status %}&subscription_status={{ current_filters.subscription_status }}{% endif %}{% if current_filters.activity_level %}&activity_level={{ current_filters.activity_level }}{% endif %}{% if current_filters.lacto_points_min %}&lacto_points_min={{ current_filters.lacto_points_min }}{% endif %}{% if current_filters.lacto_points_max %}&lacto_points_max={{ current_filters.lacto_points_max }}{% endif %}{% if current_filters.churn_risk %}&churn_risk={{ current_filters.churn_risk }}{% endif %}{% if current_filters.company %}&company={{ current_filters.company }}{% endif %}{% if current_filters.health_condition %}&health_condition={{ current_filters.health_condition }}{% endif %}{% if current_filters.last_active_days %}&last_active_days={{ current_filters.last_active_days }}{% 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 current_filters.subscription_status %}&subscription_status={{ current_filters.subscription_status }}{% endif %}{% if current_filters.activity_level %}&activity_level={{ current_filters.activity_level }}{% endif %}{% if current_filters.lacto_points_min %}&lacto_points_min={{ current_filters.lacto_points_min }}{% endif %}{% if current_filters.lacto_points_max %}&lacto_points_max={{ current_filters.lacto_points_max }}{% endif %}{% if current_filters.churn_risk %}&churn_risk={{ current_filters.churn_risk }}{% endif %}{% if current_filters.company %}&company={{ current_filters.company }}{% endif %}{% if current_filters.health_condition %}&health_condition={{ current_filters.health_condition }}{% endif %}{% if current_filters.last_active_days %}&last_active_days={{ current_filters.last_active_days }}{% endif %}">
                                        {% trans "Next" %}
                                    </a>
                                </li>
                            {% endif %}
                        </ul>
                    </nav>
                    {% endif %}
                {% else %}
                    <div class="text-center py-5">
                        <i class="fa fa-users fa-3x text-muted mb-3"></i>
                        <h5>{% trans "No users match the current filters" %}</h5>
                        <p class="text-muted">{% trans "Try adjusting your filter criteria" %}</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Save Segment Modal -->
<div class="modal fade" id="saveSegmentModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{% trans "Save Segment" %}</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form method="POST" id="saveSegmentForm">
                    {% csrf_token %}
                    <!-- Hidden fields for current filter values -->
                    {% for key, value in current_filters.items %}
                        {% if value %}
                            <input type="hidden" name="{{ key }}" value="{{ value }}">
                        {% endif %}
                    {% endfor %}
                    
                    <div class="form-group">
                        <label>{% trans "Segment Name" %} *</label>
                        <input type="text" class="form-control" name="segment_name" required>
                    </div>
                    <div class="form-group">
                        <label>{% trans "Description" %}</label>
                        <textarea class="form-control" name="segment_description" rows="3"></textarea>
                    </div>
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" name="is_shared" id="isShared">
                        <label class="form-check-label" for="isShared">
                            {% trans "Share with all managers" %}
                        </label>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">{% trans "Cancel" %}</button>
                <button type="submit" form="saveSegmentForm" class="btn btn-primary">{% trans "Save Segment" %}</button>
            </div>
        </div>
    </div>
</div>

<script>
function showSaveSegmentModal() {
    // Check if any filters are applied
    const hasFilters = Object.values({{ current_filters|safe }}).some(value => value !== '');
    if (!hasFilters) {
        alert('{% trans "Please apply at least one filter before saving a segment" %}');
        return;
    }
    $('#saveSegmentModal').modal('show');
}

function loadSegment(segmentId) {
    // This would load the saved segment's criteria
    alert('{% trans "Loading segment functionality coming soon" %} (ID: ' + segmentId + ')');
}

function clearFilters() {
    // Clear all form fields
    document.getElementById('segmentForm').reset();
    // Redirect to clear URL parameters
    window.location.href = '{% url "panel-manager-segmentation" %}';
}

function exportSegment(format) {
    alert('{% trans "Export functionality coming soon" %} (' + format + ')');
}

function sendNotification() {
    alert('{% trans "Notification functionality coming soon" %}');
}

// Calculate and display quick metrics
document.addEventListener('DOMContentLoaded', function() {
    // This would calculate metrics from the user data
    // For now, just placeholder functionality
    
    let activeCount = 0;
    let totalPoints = 0;
    let highRiskCount = 0;
    let userCount = {{ users.paginator.count }};
    
    // Calculate metrics from visible users (sample)
    {% for user in users %}
        {% if user.profile.last_login %}
            activeCount++;
        {% endif %}
        totalPoints += {{ user.lacto_points_score|default:0 }};
        {% if user.churn_risk_score == 'High' %}
            highRiskCount++;
        {% endif %}
    {% endfor %}
    
    document.getElementById('activeUsersCount').textContent = activeCount;
    document.getElementById('avgLactoPoints').textContent = userCount > 0 ? Math.round(totalPoints / userCount) : 0;
    document.getElementById('churnRiskCount').textContent = highRiskCount;
});
</script>
{% endblock %}