{% extends 'base.html' %}
{% block title %}Manage Users — Admin{% endblock %}
{% block content %}
<section class="content-section">
    <div class="content-inner" style="max-width: 1200px;">
        <div class="admin-header-row">
            <div>
                <span class="section-kicker">Admin Portal</span>
                <h1>Manage Users</h1>
            </div>
            <div style="display: flex; gap: 10px; flex-wrap: wrap;">
                <a href="{% url 'accounts:admin_register_b2b_picker' %}" class="btn-cta">+ Register B2B Picker</a>
                <a href="{% url 'accounts:admin_portal' %}" class="btn-small">&larr; Back to portal</a>
            </div>
        </div>

        {% if pending_picker_count %}
        <div class="approval-pending-banner" style="background: #e8f0ff; border-color: #b7cdf5;">
            <strong style="color: #1c3fd6;">{{ pending_picker_count }} picker account{{ pending_picker_count|pluralize }} awaiting approval.</strong>
            <p style="color: #1c3fd6;">Unapproved pickers can sign in but won't appear to customers or be able to go available until approved.</p>
        </div>
        {% endif %}

        <form method="get" class="user-filter-row">
            <input type="text" name="q" value="{{ search }}" placeholder="Search name or email">
            <select name="role" onchange="this.form.submit()">
                <option value="">All roles</option>
                <option value="customer" {% if role_filter == 'customer' %}selected{% endif %}>Customers</option>
                <option value="picker" {% if role_filter == 'picker' %}selected{% endif %}>Pickers</option>
                <option value="admin" {% if role_filter == 'admin' %}selected{% endif %}>Admins</option>
            </select>
            {% if role_filter == 'picker' %}
            <select name="picker_segment" onchange="this.form.submit()">
                <option value="">All pickers</option>
                <option value="b2c" {% if picker_segment_filter == 'b2c' %}selected{% endif %}>B2C pickers</option>
                <option value="b2b" {% if picker_segment_filter == 'b2b' %}selected{% endif %}>B2B pickers (trucks)</option>
            </select>
            {% endif %}
            <button type="submit" class="btn-small">Search</button>
        </form>

        <div class="admin-table-wrap">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Role</th>
                        <th>Status</th>
                        <th>Picker approval</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for u in users %}
                    <tr>
                        <td>{{ u.first_name }} {{ u.last_name }}</td>
                        <td>{{ u.email }}</td>
                        <td>
                            {{ u.role|title }}
                            {% if u.customer_profile %}<br><small style="color: var(--muted);">{% if u.customer_profile.account_type == 'b2b' %}Business{% else %}Individual{% endif %}</small>{% endif %}
                            {% if u.picker_profile %}
                                {% if u.picker_profile.picker_segment == 'b2b' %}
                                <br><small style="color: var(--muted);">B2B &middot; {{ u.picker_profile.truck_type.icon }} {{ u.picker_profile.truck_type.name|default:"No truck set" }}</small>
                                {% else %}
                                <br><small style="color: var(--muted);">B2C</small>
                                {% endif %}
                            {% endif %}
                        </td>
                        <td>
                            {% if u.is_active %}
                            <span class="surface-badge ok">Active</span>
                            {% else %}
                            <span class="surface-badge warn">Suspended</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if u.picker_profile %}
                                {% if u.picker_profile.is_approved %}
                                <span class="surface-badge ok">Approved</span>
                                {% else %}
                                <span class="surface-badge warn">Pending</span>
                                {% endif %}
                            {% else %}
                            &mdash;
                            {% endif %}
                        </td>
                        <td style="white-space: nowrap;">
                            <a href="{% url 'accounts:admin_edit_user' u.id %}" class="btn-small" style="display: inline-block;">Edit</a>
                            {% if u.picker_profile and not u.picker_profile.is_approved %}
                            <form method="post" action="{% url 'accounts:admin_approve_picker' u.id %}" style="display: inline;">
                                {% csrf_token %}
                                <button type="submit" class="btn-small" style="background: var(--blue);">Approve</button>
                            </form>
                            {% endif %}
                            {% if u.role != 'admin' %}
                            <form method="post" action="{% url 'accounts:admin_toggle_user_active' u.id %}" style="display: inline;" onsubmit="return confirm('{% if u.is_active %}Suspend{% else %}Activate{% endif %} this account?');">
                                {% csrf_token %}
                                <button type="submit" class="btn-small" style="background: var(--muted);">{% if u.is_active %}Suspend{% else %}Activate{% endif %}</button>
                            </form>
                            <form method="post" action="{% url 'accounts:admin_delete_user' u.id %}" style="display: inline;" onsubmit="return confirm('Permanently delete {{ u.email }}? This cannot be undone. Accounts with order history can\'t be deleted this way — use Suspend for those.');">
                                {% csrf_token %}
                                <button type="submit" class="btn-small" style="background: #b3261e;">Delete</button>
                            </form>
                            {% endif %}
                        </td>
                    </tr>
                    {% empty %}
                    <tr><td colspan="6">No users found.</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</section>
{% endblock %}