<!--
  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 %}Activity Log - 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">Activity Log</h1>
        <a href="#" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition">
            📥 Export CSV
        </a>
    </div>
    
    <!-- Filters -->
    <div class="bg-white rounded-lg shadow p-4">
        <form method="GET" class="flex flex-wrap gap-4 items-end">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">User</label>
                <select name="user_id" class="px-3 py-2 border border-gray-300 rounded-lg">
                    <option value="">All Users</option>
                    {% for u in users %}
                    <option value="{{ u.id }}" {% if request.args.get('user_id') == u.id %}selected{% endif %}>
                        {{ u.name or u.email }}
                    </option>
                    {% endfor %}
                </select>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Action</label>
                <select name="action" class="px-3 py-2 border border-gray-300 rounded-lg">
                    <option value="">All Actions</option>
                    <option value="user_created" {% if request.args.get('action') == 'user_created' %}selected{% endif %}>User Created</option>
                    <option value="session_created" {% if request.args.get('action') == 'session_created' %}selected{% endif %}>Login</option>
                    <option value="invitation_created" {% if request.args.get('action') == 'invitation_created' %}selected{% endif %}>Invitation</option>
                    <option value="user_updated" {% if request.args.get('action') == 'user_updated' %}selected{% endif %}>User Updated</option>
                </select>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Limit</label>
                <select name="limit" class="px-3 py-2 border border-gray-300 rounded-lg">
                    <option value="50" {% if request.args.get('limit', '100') == '50' %}selected{% endif %}>50</option>
                    <option value="100" {% if request.args.get('limit', '100') == '100' %}selected{% endif %}>100</option>
                    <option value="500" {% if request.args.get('limit') == '500' %}selected{% endif %}>500</option>
                </select>
            </div>
            
            <button type="submit" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700">
                Apply Filters
            </button>
            
            {% if request.args %}
            <a href="{{ url_for('admin.activity') }}" class="px-4 py-2 text-gray-600 hover:text-gray-800">
                Clear
            </a>
            {% endif %}
        </form>
    </div>
    
    <!-- Activity 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">
                        Timestamp
                    </th>
                    <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">
                        Action
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Details
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        IP Address
                    </th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                {% for log in logs %}
                <tr class="hover:bg-gray-50">
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        {{ log.timestamp[:19].replace('T', ' ') }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                        {% if log.user_id %}
                        <a href="{{ url_for('admin.edit_user', user_id=log.user_id) }}" 
                           class="text-purple-600 hover:text-purple-800">
                            {{ log.user_id[:8] }}...
                        </a>
                        {% else %}
                        <span class="text-gray-400">System</span>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="px-2 py-1 text-xs rounded-full
                            {% if 'created' in log.action %}bg-green-100 text-green-800
                            {% elif 'login' in log.action or 'session' in log.action %}bg-blue-100 text-blue-800
                            {% elif 'deactivate' in log.action or 'delete' in log.action %}bg-red-100 text-red-800
                            {% else %}bg-gray-100 text-gray-800{% endif %}">
                            {{ log.action.replace('_', ' ').title() }}
                        </span>
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-500 max-w-md truncate">
                        {{ log.details or '—' }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-mono">
                        {{ log.ip_address or '—' }}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    
    {% if not logs %}
    <div class="text-center py-12">
        <div class="text-5xl mb-4">📋</div>
        <h3 class="text-lg font-medium text-gray-900">No activity found</h3>
        <p class="text-gray-500 mt-2">Try adjusting your filters.</p>
    </div>
    {% endif %}
    
    <!-- Pagination hint -->
    {% if logs|length >= request.args.get('limit', 100)|int %}
    <p class="text-center text-sm text-gray-500">
        Showing {{ logs|length }} results. Increase limit to see more.
    </p>
    {% endif %}
</div>
{% endblock %}
