{% extends "core/base.html" %}

{% block title %}Assistants - Inventory Management System{% endblock %}

{% block page_title %}Business Assistants{% endblock %}
{% load custom_filters %}
{% block header_actions %}
<a href="{% url 'invite_assistant' %}" class="btn btn-sm btn-primary">
    <i class="fas fa-user-plus me-1"></i>Invite Assistant
</a>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Stats Cards -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card stat-card border-start border-primary border-4">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs fw-bold text-primary text-uppercase mb-1">
                                Total Assistants
                            </div>
                            <div class="h5 mb-0 fw-bold">{{ assistants|length }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-users fa-2x text-primary"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card stat-card border-start border-success border-4">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs fw-bold text-success text-uppercase mb-1">
                                Active
                            </div>
                            <div class="h5 mb-0 fw-bold">
                                {{ assistants|filter:"is_active=True,invitation_accepted_at__isnull=False"|length }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-user-check fa-2x text-success"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card stat-card border-start border-warning border-4">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs fw-bold text-warning text-uppercase mb-1">
                                Pending
                            </div>
                            <div class="h5 mb-0 fw-bold">
                                {{ assistants|filter:"is_active=True,invitation_accepted_at__isnull=True"|length }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-clock fa-2x text-warning"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card stat-card border-start border-danger border-4">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs fw-bold text-danger text-uppercase mb-1">
                                Inactive
                            </div>
                            <div class="h5 mb-0 fw-bold">
                                {{ assistants|filter:"is_active=False"|length }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-user-times fa-2x text-danger"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="card shadow mb-4">
        <div class="card-body">
            <form method="GET" class="row g-3">
                <div class="col-md-3">
                    <label class="form-label">Status</label>
                    <select name="status" class="form-select" onchange="this.form.submit()">
                        <option value="">All Status</option>
                        <option value="active" {% if status_filter == 'active' %}selected{% endif %}>Active</option>
                        <option value="pending" {% if status_filter == 'pending' %}selected{% endif %}>Pending</option>
                        <option value="inactive" {% if status_filter == 'inactive' %}selected{% endif %}>Inactive</option>
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Search</label>
                    <div class="input-group">
                        <input type="text" 
                               name="search" 
                               class="form-control" 
                               placeholder="Search by name or email..."
                               value="{{ request.GET.search|default:'' }}">
                        <button class="btn btn-outline-secondary" type="submit">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
                <div class="col-md-3 d-flex align-items-end">
                    <a href="{% url 'assistants_list' %}" class="btn btn-outline-secondary w-100">
                        <i class="fas fa-redo me-2"></i>Reset
                    </a>
                </div>
            </form>
        </div>
    </div>

    <!-- Assistants Table -->
    <div class="card shadow">
        <div class="card-header py-3">
            <h6 class="m-0 fw-bold text-primary">
                <i class="fas fa-users me-2"></i>
                Assistants List
                <span class="badge bg-primary ms-2">{{ assistants|length }}</span>
            </h6>
        </div>
        <div class="card-body">
            {% if assistants %}
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>User</th>
                            <th>Role</th>
                            <th>Permissions</th>
                            <th>Status</th>
                            <th>Joined</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for assistant in assistants %}
                        <tr>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="avatar me-3">
                                        {% if assistant.user %}
                                            <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center" 
                                                 style="width: 40px; height: 40px;">
                                                <span class="text-white fw-bold">
                                                    {{ assistant.user.get_full_name|default:assistant.user.username|first|upper }}
                                                </span>
                                            </div>
                                        {% else %}
                                            <div class="bg-secondary rounded-circle d-flex align-items-center justify-content-center" 
                                                 style="width: 40px; height: 40px;">
                                                <i class="fas fa-user text-white"></i>
                                            </div>
                                        {% endif %}
                                    </div>
                                    <div>
                                        <div class="fw-semibold">
                                            {% if assistant.user %}
                                                {{ assistant.user.get_full_name|default:assistant.user.username }}
                                            {% else %}
                                                {{ assistant.invited_email }}
                                            {% endif %}
                                        </div>
                                        <div class="text-muted small">
                                            {% if assistant.user %}
                                                {{ assistant.user.email }}
                                            {% else %}
                                                {{ assistant.invited_email }}
                                                <span class="badge bg-warning ms-2">Not Registered</span>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <span class="badge bg-info">{{ assistant.get_role_display }}</span>
                            </td>
                            <td>
                                <div class="d-flex flex-wrap gap-1">
                                    {% if assistant.can_manage_products %}
                                        <span class="badge bg-success">Products</span>
                                    {% endif %}
                                    {% if assistant.can_view_reports %}
                                        <span class="badge bg-primary">Reports</span>
                                    {% endif %}
                                    {% if assistant.can_manage_users %}
                                        <span class="badge bg-warning">Users</span>
                                    {% endif %}
                                    {% if assistant.can_manage_settings %}
                                        <span class="badge bg-danger">Settings</span>
                                    {% endif %}
                                </div>
                            </td>
                            <td>
                                {% if assistant.is_active %}
                                    {% if assistant.invitation_accepted_at %}
                                        <span class="badge bg-success">Active</span>
                                    {% elif assistant.invitation_expired %}
                                        <span class="badge bg-danger">Expired</span>
                                    {% else %}
                                        <span class="badge bg-warning">Pending</span>
                                    {% endif %}
                                {% else %}
                                    <span class="badge bg-secondary">Inactive</span>
                                {% endif %}
                            </td>
                            <td>
                                <div class="small">
                                    {% if assistant.invitation_accepted_at %}
                                        {{ assistant.invitation_accepted_at|date:"M d, Y" }}
                                    {% elif assistant.invitation_sent_at %}
                                        Invited: {{ assistant.invitation_sent_at|date:"M d, Y" }}
                                    {% else %}
                                        N/A
                                    {% endif %}
                                </div>
                            </td>
                            <td>
                                <div class="btn-group btn-group-sm">
                                    {% if assistant.is_active %}
                                        <a href="{% url 'edit_assistant' assistant.id %}" 
                                           class="btn btn-outline-primary" 
                                           title="Edit">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        {% if assistant.invitation_accepted_at %}
                                            <a href="{% url 'remove_assistant' assistant.id %}" 
                                               class="btn btn-outline-danger" 
                                               title="Remove">
                                                <i class="fas fa-user-minus"></i>
                                            </a>
                                        {% else %}
                                            <button class="btn btn-outline-warning" 
                                                    title="Resend Invitation"
                                                    onclick="resendInvitation({{ assistant.id }})">
                                                <i class="fas fa-paper-plane"></i>
                                            </button>
                                        {% endif %}
                                    {% else %}
                                        <button class="btn btn-outline-success" 
                                                title="Reactivate"
                                                onclick="reactivateAssistant({{ assistant.id }})">
                                            <i class="fas fa-redo"></i>
                                        </button>
                                    {% endif %}
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="text-center py-5">
                <i class="fas fa-users fa-4x text-muted mb-3"></i>
                <h5 class="text-muted">No Assistants Found</h5>
                <p class="text-muted mb-4">Start by inviting team members to help manage your business.</p>
                <a href="{% url 'invite_assistant' %}" class="btn btn-primary">
                    <i class="fas fa-user-plus me-2"></i>Invite Your First Assistant
                </a>
            </div>
            {% endif %}
        </div>
        
        {% if assistants.has_other_pages %}
        <div class="card-footer">
            <nav aria-label="Page navigation">
                <ul class="pagination justify-content-center mb-0">
                    {% if assistants.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page=1{% if status_filter %}&status={{ status_filter }}{% endif %}">
                            <i class="fas fa-angle-double-left"></i>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ assistants.previous_page_number }}{% if status_filter %}&status={{ status_filter }}{% endif %}">
                            <i class="fas fa-angle-left"></i>
                        </a>
                    </li>
                    {% endif %}
                    
                    {% for num in assistants.paginator.page_range %}
                        {% if assistants.number == num %}
                            <li class="page-item active">
                                <span class="page-link">{{ num }}</span>
                            </li>
                        {% elif num > assistants.number|add:'-3' and num < assistants.number|add:'3' %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ num }}{% if status_filter %}&status={{ status_filter }}{% endif %}">{{ num }}</a>
                            </li>
                        {% endif %}
                    {% endfor %}
                    
                    {% if assistants.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ assistants.next_page_number }}{% if status_filter %}&status={{ status_filter }}{% endif %}">
                            <i class="fas fa-angle-right"></i>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ assistants.paginator.num_pages }}{% if status_filter %}&status={{ status_filter }}{% endif %}">
                            <i class="fas fa-angle-double-right"></i>
                        </a>
                    </li>
                    {% endif %}
                </ul>
            </nav>
        </div>
        {% endif %}
    </div>
</div>

<style>
.avatar {
    flex-shrink: 0;
}

.badge {
    font-size: 0.75em;
    padding: 0.35em 0.65em;
}

.table th {
    border-top: none;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
}

.btn-group-sm > .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.pagination .page-item.active .page-link {
    background-color: #4361ee;
    border-color: #4361ee;
}
</style>

<script>
function resendInvitation(assistantId) {
    if (confirm('Resend invitation to this user?')) {
        fetch(`/business/api/resend-invitation/${assistantId}/`, {
            method: 'POST',
            headers: {
                'X-CSRFToken': csrftoken,
                'Content-Type': 'application/json',
            },
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Invitation resent successfully!');
                location.reload();
            } else {
                alert('Error: ' + data.error);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred. Please try again.');
        });
    }
}

function reactivateAssistant(assistantId) {
    if (confirm('Reactivate this assistant?')) {
        fetch(`/business/api/reactivate-assistant/${assistantId}/`, {
            method: 'POST',
            headers: {
                'X-CSRFToken': csrftoken,
                'Content-Type': 'application/json',
            },
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Assistant reactivated successfully!');
                location.reload();
            } else {
                alert('Error: ' + data.error);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred. Please try again.');
        });
    }
}

// Auto-refresh pending invitations
setInterval(function() {
    if (window.location.search.includes('status=pending')) {
        location.reload();
    }
}, 30000); // Refresh every 30 seconds if on pending tab
</script>
{% endblock %}