{% extends "layouts/dashboard.html" %}

{% load static %}
{% load accounts_tags %}

{% block title %}User Profile - Adtlas{% endblock %}

{% block extra_css %}
<style>
.profile-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 15px;
    padding: 2rem;
    color: white;
    margin-bottom: 2rem;
}

.profile-card {
    border: none;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
}

.activity-item {
    border-bottom: 1px solid #eee;
    padding: 1rem 0;
}

.activity-item:last-child {
    border-bottom: none;
}

.session-item {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.session-active {
    border-left: 4px solid #28a745;
}

.role-badge {
    font-size: 0.8rem;
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
}
</style>
{% endblock %}

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title">User Profile</h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
            <li class="breadcrumb-item active" aria-current="page">Profile</li>
        </ol>
    </div>
</div>
{% endblock %}

{% block content %}
<div class="row">
    <!-- Profile Header -->
    <div class="col-12">
        <div class="profile-header">
            <div class="row align-items-center">
                <div class="col-md-2">
                    {% if user.profile.avatar %}
                        <img src="{{ user.profile.avatar.url }}" alt="Profile Avatar" class="rounded-circle" width="100" height="100">
                    {% else %}
                        <div class="bg-white text-primary rounded-circle d-flex align-items-center justify-content-center" style="width: 100px; height: 100px; font-size: 2rem;">
                            {{ user.first_name|first }}{{ user.last_name|first }}
                        </div>
                    {% endif %}
                </div>
                <div class="col-md-8">
                    <h2>{{ user.get_full_name }}</h2>
                    <p class="mb-1">{{ user.email }}</p>
                    {% if user.profile.job_title %}
                        <p class="mb-1">{{ user.profile.job_title }}</p>
                    {% endif %}
                    {% if user.profile.company %}
                        <p class="mb-1">{{ user.profile.company }}</p>
                    {% endif %}
                </div>
                <div class="col-md-2 text-end">
                    <a href="{% url 'accounts:profile_update' %}" class="btn btn-light">
                        <i class="fe fe-edit"></i> Edit Profile
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Profile Information -->
    <div class="col-lg-4">
        <div class="card profile-card">
            <div class="card-header">
                <h5><i class="fe fe-user me-2"></i>Profile Information</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <strong>Email:</strong><br>
                    {{ user.email }}
                    {% if user.is_verified %}
                        <span class="badge bg-success">Verified</span>
                    {% else %}
                        <span class="badge bg-warning">Unverified</span>
                    {% endif %}
                </div>
                
                {% if user.phone_number %}
                <div class="mb-3">
                    <strong>Phone:</strong><br>
                    {{ user.phone_number }}
                </div>
                {% endif %}

                {% if user.profile.bio %}
                <div class="mb-3">
                    <strong>Bio:</strong><br>
                    {{ user.profile.bio }}
                </div>
                {% endif %}

                <div class="mb-3">
                    <strong>Member Since:</strong><br>
                    {{ user.date_joined|date:"M d, Y" }}
                </div>

                <div class="mb-3">
                    <strong>Last Login:</strong><br>
                    {% if user.last_login %}
                        {{ user.last_login|date:"M d, Y H:i" }}
                    {% else %}
                        Never
                    {% endif %}
                </div>

                {% if user.last_login_ip %}
                <div class="mb-3">
                    <strong>Last IP:</strong><br>
                    {{ user.last_login_ip }}
                </div>
                {% endif %}
            </div>
        </div>

        <!-- User Roles -->
        {% get_user_roles user as user_roles %}
        {% if user_roles %}
        <div class="card profile-card">
            <div class="card-header">
                <h5><i class="fe fe-shield me-2"></i>User Roles</h5>
            </div>
            <div class="card-body">
                {% for user_role in user_roles %}
                <span class="badge role-badge bg-primary me-2 mb-2">
                    {{ user_role.role.name }}
                </span>
                {% endfor %}
            </div>
        </div>
        {% endif %}
    </div>

    <!-- Activities and Sessions -->
    <div class="col-lg-8">
        <!-- Recent Activities -->
        <div class="card profile-card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5><i class="fe fe-activity me-2"></i>Recent Activities</h5>
                <small class="text-muted">Last 10 activities</small>
            </div>
            <div class="card-body">
                {% for activity in recent_activities %}
                <div class="activity-item">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <strong>{{ activity.action|title }}</strong>
                            <p class="mb-1 text-muted">{{ activity.description }}</p>
                            {% if activity.ip_address %}
                                <small class="text-muted">IP: {{ activity.ip_address }}</small>
                            {% endif %}
                        </div>
                        <small class="text-muted">{{ activity.created_at|date:"M d, H:i" }}</small>
                    </div>
                </div>
                {% empty %}
                <p class="text-muted">No recent activities.</p>
                {% endfor %}
            </div>
        </div>

        <!-- Active Sessions -->
        <div class="card profile-card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5><i class="fe fe-monitor me-2"></i>Active Sessions</h5>
                <small class="text-muted">{{ active_sessions.count }} active</small>
            </div>
            <div class="card-body">
                {% for session in active_sessions %}
                <div class="session-item session-active">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <strong>Current Session</strong>
                            <p class="mb-1 text-muted">
                                {% if session.ip_address %}IP: {{ session.ip_address }}{% endif %}
                            </p>
                            <small class="text-muted">Last activity: {{ session.last_activity|date:"M d, H:i" }}</small>
                        </div>
                        <button class="btn btn-sm btn-outline-danger" onclick="terminateSession('{{ session.session_key }}')">
                            Terminate
                        </button>
                    </div>
                </div>
                {% empty %}
                <p class="text-muted">No active sessions.</p>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<!-- Profile Completion -->
<div class="row">
    <div class="col-12">
        <div class="card profile-card">
            <div class="card-header">
                <h5><i class="fe fe-check-circle me-2"></i>Profile Completion</h5>
            </div>
            <div class="card-body">
                <div class="progress mb-3">
                    <div class="progress-bar" role="progressbar" style="width: {{ completion_percentage }}%" aria-valuenow="{{ completion_percentage }}" aria-valuemin="0" aria-valuemax="100">
                        {{ completion_percentage }}%
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-6">
                        <h6>Completed Items:</h6>
                        <ul class="list-unstyled">
                            <li><i class="fe fe-check text-success me-2"></i>Basic Information</li>
                            {% if user.is_verified %}
                            <li><i class="fe fe-check text-success me-2"></i>Email Verified</li>
                            {% endif %}
                            {% if user.phone_number %}
                            <li><i class="fe fe-check text-success me-2"></i>Phone Number</li>
                            {% endif %}
                            {% if user.profile.avatar %}
                            <li><i class="fe fe-check text-success me-2"></i>Profile Picture</li>
                            {% endif %}
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h6>Pending Items:</h6>
                        <ul class="list-unstyled">
                            {% if not user.is_verified %}
                            <li><i class="fe fe-x text-danger me-2"></i>Email Verification</li>
                            {% endif %}
                            {% if not user.phone_number %}
                            <li><i class="fe fe-x text-danger me-2"></i>Phone Number</li>
                            {% endif %}
                            {% if not user.profile.avatar %}
                            <li><i class="fe fe-x text-danger me-2"></i>Profile Picture</li>
                            {% endif %}
                            {% if not user.profile.bio %}
                            <li><i class="fe fe-x text-danger me-2"></i>Bio Description</li>
                            {% endif %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function terminateSession(sessionKey) {
    Swal.fire({
        title: 'Are you sure?',
        text: "This will terminate the session immediately!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Yes, terminate it!'
    }).then((result) => {
        if (result.isConfirmed) {
            // AJAX call to terminate session
            $.ajax({
                url: '{% url "accounts:terminate_session_api" %}',
                type: 'POST',
                headers: {
                    'X-CSRFToken': $('[name=csrfmiddlewaretoken]').val()
                },
                data: {
                    'session_key': sessionKey
                },
                success: function(data) {
                    if (data.success) {
                        Swal.fire('Terminated!', 'Session has been terminated.', 'success');
                        location.reload();
                    } else {
                        Swal.fire('Error!', data.message, 'error');
                    }
                },
                error: function() {
                    Swal.fire('Error!', 'Failed to terminate session.', 'error');
                }
            });
        }
    });
}

// Load activities via AJAX
$(document).ready(function() {
    // You can add AJAX loading for activities here if needed
});
</script>
{% endblock %}