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

{% block page_actions %}
<div class="btn-group" role="group">
    <a href="{{ url_for('users_list') }}" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left me-2"></i>Back to Users
    </a>
    <a href="#" class="btn btn-primary">
        <i class="bi bi-pencil me-2"></i>Edit User
    </a>
    <button type="button" class="btn btn-outline-danger" onclick="confirmDeleteUser()">
        <i class="bi bi-trash me-2"></i>Delete
    </button>
</div>
{% endblock %}

{% block content %}
<div class="fade-in">
    <!-- User Information Card -->
    <div class="row">
        <div class="col-md-4 mb-4">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="bi bi-person me-2"></i>User Information
                    </h5>
                </div>
                <div class="card-body">
                    <!-- User Avatar -->
                    <div class="text-center mb-4">
                        <div class="avatar-lg bg-primary bg-opacity-10 text-primary rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3"
                            style="width: 80px; height: 80px; font-size: 2rem;">
                            <i class="bi bi-person"></i>
                        </div>
                        <h4 class="mb-1">{{ user.full_name or user.name }}</h4>
                        <p class="text-muted mb-0">@{{ user.name }}</p>
                    </div>

                    <!-- User Details -->
                    <ul class="list-unstyled">
                        <li class="d-flex justify-content-between align-items-center py-2 border-bottom">
                            <span class="text-muted">
                                <i class="bi bi-envelope me-2"></i>Email
                            </span>
                            <span class="fw-bold">{{ user.email or 'Not provided' }}</span>
                        </li>
                        <li class="d-flex justify-content-between align-items-center py-2 border-bottom">
                            <span class="text-muted">
                                <i class="bi bi-phone me-2"></i>Mobile
                            </span>
                            <span class="fw-bold">{{ user.mobile or 'Not provided' }}</span>
                        </li>
                        <li class="d-flex justify-content-between align-items-center py-2 border-bottom">
                            <span class="text-muted">
                                <i class="bi bi-person-badge me-2"></i>User ID
                            </span>
                            <span class="fw-bold">{{ user.user_id or 'Not set' }}</span>
                        </li>
                        <li class="d-flex justify-content-between align-items-center py-2 border-bottom">
                            <span class="text-muted">
                                <i class="bi bi-toggle-on me-2"></i>Status
                            </span>
                            <span>
                                {% if user.status == 1 %}
                                <span class="badge bg-success">Active</span>
                                {% else %}
                                <span class="badge bg-secondary">Inactive</span>
                                {% endif %}
                            </span>
                        </li>
                        <li class="d-flex justify-content-between align-items-center py-2 border-bottom">
                            <span class="text-muted">
                                <i class="bi bi-lock me-2"></i>Account
                            </span>
                            <span>
                                {% if user.locked == 1 %}
                                <span class="badge bg-danger">Locked</span>
                                {% else %}
                                <span class="badge bg-success">Unlocked</span>
                                {% endif %}
                            </span>
                        </li>
                        <li class="d-flex justify-content-between align-items-center py-2">
                            <span class="text-muted">
                                <i class="bi bi-calendar me-2"></i>Created
                            </span>
                            <span class="fw-bold">
                                {{ user.created_at.strftime('%Y-%m-%d %H:%M') if user.created_at else 'Unknown' }}
                            </span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Roles Information -->
        <div class="col-md-8 mb-4">
            <div class="card h-100">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">
                        <i class="bi bi-person-badge me-2"></i>Assigned Roles
                        <span class="badge bg-primary ms-2">{{ roles|length }}</span>
                    </h5>
                    <button type="button" class="btn btn-outline-primary btn-sm" onclick="showAssignRoleModal()">
                        <i class="bi bi-plus me-1"></i>Assign Role
                    </button>
                </div>
                <div class="card-body">
                    {% if roles %}
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead>
                                <tr>
                                    <th>Role Name</th>
                                    <th>Description</th>
                                    <th>Status</th>
                                    <th>Assigned Date</th>
                                    <th width="100">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for role in roles %}
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="avatar-sm bg-success bg-opacity-10 text-success rounded-circle d-flex align-items-center justify-content-center me-2"
                                                style="width: 24px; height: 24px; font-size: 0.75rem;">
                                                <i class="bi bi-person-badge"></i>
                                            </div>
                                            <span class="fw-bold">{{ role.name }}</span>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="text-truncate-custom">{{ role.description or 'No description'
                                            }}</span>
                                    </td>
                                    <td>
                                        {% if role.is_active %}
                                        <span class="badge bg-success">Active</span>
                                        {% else %}
                                        <span class="badge bg-secondary">Inactive</span>
                                        {% endif %}

                                        {% if role.is_system %}
                                        <span class="badge bg-warning ms-1">System</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <small class="text-muted">
                                            {{ role.created_at.strftime('%Y-%m-%d') if role.created_at else '-' }}
                                        </small>
                                    </td>
                                    <td>
                                        <div class="btn-group-action">
                                            <a href="{{ url_for('role_detail', role_id=role.id) }}"
                                                class="btn btn-outline-primary btn-action btn-sm" title="View Role">
                                                <i class="bi bi-eye"></i>
                                            </a>
                                            <button type="button" class="btn btn-outline-danger btn-action btn-sm"
                                                title="Remove Role"
                                                onclick="confirmRemoveRole({{ role.id }}, '{{ role.name }}')">
                                                <i class="bi bi-x"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <div class="text-center py-5 text-muted">
                        <i class="bi bi-person-badge" style="font-size: 3rem;"></i>
                        <p class="mt-3 mb-2">No roles assigned</p>
                        <p class="small">This user has not been assigned any roles yet.</p>
                        <button type="button" class="btn btn-outline-primary mt-2" onclick="showAssignRoleModal()">
                            <i class="bi bi-plus me-1"></i>Assign First Role
                        </button>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Additional Information -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="bi bi-info-circle me-2"></i>Additional Information
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6 class="text-muted mb-3">Profile Details</h6>
                            <ul class="list-unstyled">
                                <li class="mb-2">
                                    <strong>English Name:</strong> {{ user.en_name or 'Not provided' }}
                                </li>
                                <li class="mb-2">
                                    <strong>Full Name:</strong> {{ user.full_name or 'Not provided' }}
                                </li>
                                <li class="mb-2">
                                    <strong>External User ID:</strong> {{ user.user_id or 'Not set' }}
                                </li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <h6 class="text-muted mb-3">System Information</h6>
                            <ul class="list-unstyled">
                                <li class="mb-2">
                                    <strong>Database ID:</strong> {{ user.id }}
                                </li>
                                <li class="mb-2">
                                    <strong>Created:</strong> {{ user.created_at.strftime('%Y-%m-%d %H:%M:%S') if
                                    user.created_at else 'Unknown' }}
                                </li>
                                <li class="mb-2">
                                    <strong>Last Updated:</strong> {{ user.updated_at.strftime('%Y-%m-%d %H:%M:%S') if
                                    user.updated_at else 'Unknown' }}
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Remove Role Confirmation Modal -->
<div class="modal fade" id="removeRoleModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Remove Role</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to remove role <strong id="removeRoleName"></strong> from this user?</p>
                <p class="text-warning small mb-0">This will remove all permissions associated with this role for this
                    user.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="confirmRemoveRoleBtn">Remove Role</button>
            </div>
        </div>
    </div>
</div>

<!-- Delete User Confirmation Modal -->
<div class="modal fade" id="deleteUserModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">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 user <strong>{{ user.name }}</strong>?</p>
                <p class="text-danger small mb-0">This action cannot be undone and will remove all user data and role
                    assignments.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteUserBtn">Delete User</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
    let selectedRoleId = null;

    function showAssignRoleModal() {
        // TODO: Implement role assignment modal
        alert('Role assignment functionality will be implemented soon');
    }

    function confirmRemoveRole(roleId, roleName) {
        selectedRoleId = roleId;
        document.getElementById('removeRoleName').textContent = roleName;
        const modal = new bootstrap.Modal(document.getElementById('removeRoleModal'));
        modal.show();
    }

    function confirmDeleteUser() {
        const modal = new bootstrap.Modal(document.getElementById('deleteUserModal'));
        modal.show();
    }

    document.getElementById('confirmRemoveRoleBtn').addEventListener('click', function () {
        if (selectedRoleId) {
            // TODO: Implement actual role removal
            console.log('Removing role:', selectedRoleId, 'from user:', {{ user.id }});
    const modal = bootstrap.Modal.getInstance(document.getElementById('removeRoleModal'));
    modal.hide();
    // Reload page or update UI
    location.reload();
    }
});

    document.getElementById('confirmDeleteUserBtn').addEventListener('click', function () {
        // TODO: Implement actual user deletion
        console.log('Deleting user:', {{ user.id }});
    const modal = bootstrap.Modal.getInstance(document.getElementById('deleteUserModal'));
    modal.hide();
    // Redirect to user list
    window.location.href = "{{ url_for('users_list') }}";
});
</script>
{% endblock %}