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

{% block title %}{{ user_detail.get_full_name|default:user_detail.email }} - User Details{% endblock %}

{% block breadcrumb_items %}
    <li class="breadcrumb-item"><a href="{% url 'accounts:user_list' %}">Users</a></li>
    <li class="breadcrumb-item active">{{ user_detail.get_full_name|default:user_detail.email }}</li>
{% endblock %}

{% block page_title %}
    <i class="fas fa-user me-2"></i>User Details
{% endblock %}

{% block page_actions %}
    <div class="btn-group" role="group">
        {% if user.is_staff or user == user_detail %}
            <a href="{% url 'accounts:user_update' user_detail.pk %}" class="btn btn-primary">
                <i class="fas fa-edit me-1"></i>Edit Profile
            </a>
        {% endif %}
        {% if user.is_staff %}
            <button type="button" class="btn btn-outline-warning toggle-status-btn" 
                    data-user-id="{{ user_detail.id }}" 
                    data-current-status="{{ user_detail.is_active|yesno:'true,false' }}">
                {% if user_detail.is_active %}
                    <i class="fas fa-user-slash me-1"></i>Deactivate
                {% else %}
                    <i class="fas fa-user-check me-1"></i>Activate
                {% endif %}
            </button>
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-outline-secondary dropdown-toggle" 
                        data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="fas fa-cogs me-1"></i>Actions
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="{% url 'accounts:password_reset' user_detail.pk %}">
                        <i class="fas fa-key me-2"></i>Reset Password
                    </a></li>
                    <li><a class="dropdown-item" href="{% url 'accounts:user_activity' user_detail.pk %}">
                        <i class="fas fa-history me-2"></i>View Activity
                    </a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item text-danger" href="#" data-bs-toggle="modal" data-bs-target="#deleteModal">
                        <i class="fas fa-trash me-2"></i>Delete User
                    </a></li>
                </ul>
            </div>
        {% endif %}
    </div>
{% endblock %}

{% block content %}
<div class="row">
    <!-- User Profile Card -->
    <div class="col-lg-4 mb-4">
        <div class="card">
            <div class="card-body text-center">
                <!-- Avatar -->
                <div class="mb-3">
                    {% if user_detail.avatar %}
                        <img src="{{ user_detail.avatar.url }}" alt="Avatar" 
                             class="rounded-circle" width="120" height="120">
                    {% else %}
                        <div class="bg-secondary rounded-circle d-flex align-items-center justify-content-center mx-auto" 
                             style="width: 120px; height: 120px;">
                            <i class="fas fa-user fa-3x text-white"></i>
                        </div>
                    {% endif %}
                </div>
                
                <!-- Basic Info -->
                <h4 class="card-title mb-1">{{ user_detail.get_full_name|default:"No Name" }}</h4>
                <p class="text-muted mb-3">{{ user_detail.email }}</p>
                
                <!-- Status Badges -->
                <div class="mb-3">
                    {% if user_detail.is_active %}
                        <span class="badge bg-success me-1">
                            <i class="fas fa-check me-1"></i>Active
                        </span>
                    {% else %}
                        <span class="badge bg-secondary me-1">
                            <i class="fas fa-times me-1"></i>Inactive
                        </span>
                    {% endif %}
                    
                    {% if user_detail.is_superuser %}
                        <span class="badge bg-danger me-1">Superuser</span>
                    {% elif user_detail.is_staff %}
                        <span class="badge bg-warning me-1">Staff</span>
                    {% else %}
                        <span class="badge bg-info me-1">User</span>
                    {% endif %}
                    
                    {% if user_detail.email_verified %}
                        <span class="badge bg-success">
                            <i class="fas fa-envelope-check me-1"></i>Verified
                        </span>
                    {% else %}
                        <span class="badge bg-warning">
                            <i class="fas fa-envelope me-1"></i>Unverified
                        </span>
                    {% endif %}
                </div>
                
                <!-- Quick Stats -->
                <div class="row text-center">
                    <div class="col-4">
                        <div class="border-end">
                            <h5 class="text-primary mb-0">{{ user_detail.login_count|default:0 }}</h5>
                            <small class="text-muted">Logins</small>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="border-end">
                            <h5 class="text-success mb-0">{{ user_detail.activities_count|default:0 }}</h5>
                            <small class="text-muted">Activities</small>
                        </div>
                    </div>
                    <div class="col-4">
                        <h5 class="text-info mb-0">{{ user_detail.notifications_count|default:0 }}</h5>
                        <small class="text-muted">Notifications</small>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Contact Information -->
        <div class="card mt-3">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fas fa-address-card me-2"></i>Contact Information
                </h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label text-muted">Email</label>
                    <div class="d-flex align-items-center">
                        <span>{{ user_detail.email }}</span>
                        {% if user_detail.email_verified %}
                            <i class="fas fa-check-circle text-success ms-2" title="Verified"></i>
                        {% else %}
                            <i class="fas fa-exclamation-circle text-warning ms-2" title="Unverified"></i>
                        {% endif %}
                    </div>
                </div>
                
                {% if user_detail.phone %}
                    <div class="mb-3">
                        <label class="form-label text-muted">Phone</label>
                        <div>{{ user_detail.phone }}</div>
                    </div>
                {% endif %}
                
                {% if user_detail.address %}
                    <div class="mb-3">
                        <label class="form-label text-muted">Address</label>
                        <div>{{ user_detail.address }}</div>
                    </div>
                {% endif %}
                
                {% if user_detail.website %}
                    <div class="mb-3">
                        <label class="form-label text-muted">Website</label>
                        <div><a href="{{ user_detail.website }}" target="_blank">{{ user_detail.website }}</a></div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
    
    <!-- Detailed Information -->
    <div class="col-lg-8">
        <!-- Account Details -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fas fa-info-circle me-2"></i>Account Details
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label text-muted">User ID</label>
                            <div class="fw-bold">{{ user_detail.id }}</div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label text-muted">Username</label>
                            <div>{{ user_detail.username|default:"Not set" }}</div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label text-muted">First Name</label>
                            <div>{{ user_detail.first_name|default:"Not set" }}</div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label text-muted">Last Name</label>
                            <div>{{ user_detail.last_name|default:"Not set" }}</div>
                        </div>
                    </div>
                    
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label text-muted">Date Joined</label>
                            <div>{{ user_detail.date_joined|date:"F d, Y g:i A" }}</div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label text-muted">Last Login</label>
                            <div>
                                {% if user_detail.last_login %}
                                    {{ user_detail.last_login|date:"F d, Y g:i A" }}
                                {% else %}
                                    <span class="text-muted">Never logged in</span>
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label text-muted">Account Status</label>
                            <div>
                                {% if user_detail.is_active %}
                                    <span class="text-success"><i class="fas fa-check-circle me-1"></i>Active</span>
                                {% else %}
                                    <span class="text-danger"><i class="fas fa-times-circle me-1"></i>Inactive</span>
                                {% endif %}
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label text-muted">Email Verified</label>
                            <div>
                                {% if user_detail.email_verified %}
                                    <span class="text-success"><i class="fas fa-check-circle me-1"></i>Verified</span>
                                {% else %}
                                    <span class="text-warning"><i class="fas fa-exclamation-circle me-1"></i>Unverified</span>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Permissions & Groups -->
        {% if user.is_staff %}
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-shield-alt me-2"></i>Permissions & Groups
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6 class="text-muted mb-3">User Permissions</h6>
                            <div class="mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" 
                                           {% if user_detail.is_superuser %}checked{% endif %} disabled>
                                    <label class="form-check-label">Superuser Status</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" 
                                           {% if user_detail.is_staff %}checked{% endif %} disabled>
                                    <label class="form-check-label">Staff Status</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" 
                                           {% if user_detail.is_active %}checked{% endif %} disabled>
                                    <label class="form-check-label">Active Status</label>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <h6 class="text-muted mb-3">Groups</h6>
                            {% if user_detail.groups.all %}
                                {% for group in user_detail.groups.all %}
                                    <span class="badge bg-primary me-1 mb-1">{{ group.name }}</span>
                                {% endfor %}
                            {% else %}
                                <p class="text-muted">No groups assigned</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}
        
        <!-- Recent Activity -->
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">
                    <i class="fas fa-history me-2"></i>Recent Activity
                </h5>
                {% if user.is_staff %}
                    <a href="{% url 'accounts:user_activity' user_detail.pk %}" class="btn btn-sm btn-outline-primary">
                        View All
                    </a>
                {% endif %}
            </div>
            <div class="card-body">
                {% if recent_activities %}
                    <div class="timeline">
                        {% for activity in recent_activities %}
                            <div class="timeline-item">
                                <div class="timeline-marker bg-primary"></div>
                                <div class="timeline-content">
                                    <h6 class="timeline-title">{{ activity.action }}</h6>
                                    <p class="timeline-text text-muted">{{ activity.description }}</p>
                                    <small class="text-muted">
                                        <i class="fas fa-clock me-1"></i>{{ activity.timestamp|date:"M d, Y g:i A" }}
                                    </small>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="text-center py-3">
                        <i class="fas fa-history fa-2x text-muted mb-2"></i>
                        <p class="text-muted">No recent activity found</p>
                    </div>
                {% endif %}
            </div>
        </div>
        
        <!-- Additional Information -->
        {% if user_detail.bio or user_detail.preferences %}
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-user-circle me-2"></i>Additional Information
                    </h5>
                </div>
                <div class="card-body">
                    {% if user_detail.bio %}
                        <div class="mb-3">
                            <label class="form-label text-muted">Bio</label>
                            <div>{{ user_detail.bio|linebreaks }}</div>
                        </div>
                    {% endif %}
                    
                    {% if user_detail.preferences %}
                        <div class="mb-3">
                            <label class="form-label text-muted">Preferences</label>
                            <div>
                                {% for key, value in user_detail.preferences.items %}
                                    <span class="badge bg-light text-dark me-1 mb-1">{{ key }}: {{ value }}</span>
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        {% endif %}
    </div>
</div>

<!-- Delete Confirmation Modal -->
{% if user.is_staff %}
    <div class="modal fade" id="deleteModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-danger">
                        <i class="fas fa-exclamation-triangle me-2"></i>Delete User
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete <strong>{{ user_detail.get_full_name|default:user_detail.email }}</strong>?</p>
                    <div class="alert alert-danger">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        <strong>Warning:</strong> This action cannot be undone. All user data will be permanently deleted.
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <form method="post" action="{% url 'accounts:user_delete' user_detail.pk %}" class="d-inline">
                        {% csrf_token %}
                        <button type="submit" class="btn btn-danger">
                            <i class="fas fa-trash me-1"></i>Delete User
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endif %}
{% endblock %}

{% block extra_css %}
<style>
.timeline {
    position: relative;
    padding-left: 30px;
}

.timeline-item {
    position: relative;
    margin-bottom: 20px;
}

.timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: -22px;
    top: 20px;
    height: calc(100% + 10px);
    width: 2px;
    background-color: #dee2e6;
}

.timeline-marker {
    position: absolute;
    left: -26px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #dee2e6;
}

.timeline-content {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border-left: 3px solid #007bff;
}

.timeline-title {
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 600;
}

.timeline-text {
    margin-bottom: 5px;
    font-size: 13px;
}
</style>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // Toggle user status
    $('.toggle-status-btn').click(function() {
        const userId = $(this).data('user-id');
        const currentStatus = $(this).data('current-status');
        const button = $(this);
        
        $.ajax({
            url: `/accounts/ajax/users/${userId}/toggle-status/`,
            type: 'POST',
            headers: {
                'X-CSRFToken': $('[name=csrfmiddlewaretoken]').val()
            },
            success: function(response) {
                if (response.success) {
                    location.reload();
                } else {
                    alert('Error: ' + response.message);
                }
            },
            error: function() {
                alert('An error occurred while updating user status.');
            }
        });
    });
});
</script>
{% endblock %}