<!--
  Familiar - Self-hosted AI Agent
  Copyright (c) 2026 George Scott Foley
  
  Licensed under the MIT License
  For commercial licensing, contact: licensing@familiar.ai
-->
{% extends "base.html" %}

{% block title %}Users - Familiar Admin{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Header -->
    <div class="flex justify-between items-center">
        <h1 class="text-2xl font-bold text-gray-800">Users</h1>
        <a href="{{ url_for('admin.invite_user') }}" 
           class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition">
            ➕ Invite User
        </a>
    </div>
    
    <!-- Pending Invitations -->
    {% if invitations %}
    <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
        <h3 class="font-semibold text-yellow-800 mb-2">Pending Invitations</h3>
        <div class="space-y-2">
            {% for invite in invitations %}
            <div class="flex items-center justify-between text-sm">
                <span class="text-yellow-700">{{ invite.email }}</span>
                <span class="text-yellow-600 capitalize">{{ invite.role }}</span>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}
    
    <!-- Users Table -->
    <div class="bg-white rounded-lg shadow overflow-hidden">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        User
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Role
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Status
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Last Active
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Channels
                    </th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Actions
                    </th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                {% for u in users %}
                <tr class="hover:bg-gray-50">
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center">
                            <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center">
                                <span class="text-purple-600 font-semibold">{{ u.name[0].upper() if u.name else '?' }}</span>
                            </div>
                            <div class="ml-4">
                                <div class="text-sm font-medium text-gray-900">{{ u.name or 'No name' }}</div>
                                <div class="text-sm text-gray-500">{{ u.email }}</div>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="px-2 py-1 text-xs rounded-full
                            {% if u.role.value == 'admin' %}bg-purple-100 text-purple-800
                            {% elif u.role.value == 'staff' %}bg-blue-100 text-blue-800
                            {% else %}bg-gray-100 text-gray-800{% endif %}">
                            {{ u.role.value }}
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="px-2 py-1 text-xs rounded-full
                            {% if u.status.value == 'active' %}bg-green-100 text-green-800
                            {% elif u.status.value == 'pending' %}bg-yellow-100 text-yellow-800
                            {% else %}bg-red-100 text-red-800{% endif %}">
                            {{ u.status.value }}
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {% if u.last_active %}
                        {{ u.last_active.strftime('%Y-%m-%d %H:%M') }}
                        {% else %}
                        Never
                        {% endif %}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                        {% if u.telegram_id %}
                        <span class="text-blue-500 mr-1" title="Telegram linked">📱</span>
                        {% endif %}
                        {% if u.discord_id %}
                        <span class="text-indigo-500" title="Discord linked">💬</span>
                        {% endif %}
                        {% if not u.telegram_id and not u.discord_id %}
                        <span class="text-gray-400">—</span>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                        <a href="{{ url_for('admin.edit_user', user_id=u.id) }}" 
                           class="text-purple-600 hover:text-purple-900">Edit</a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    
    {% if not users %}
    <div class="text-center py-12">
        <div class="text-5xl mb-4">👥</div>
        <h3 class="text-lg font-medium text-gray-900">No users yet</h3>
        <p class="text-gray-500 mt-2">Get started by inviting your first user.</p>
        <a href="{{ url_for('admin.invite_user') }}" 
           class="inline-block mt-4 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700">
            Invite User
        </a>
    </div>
    {% endif %}
</div>
{% endblock %}
