<!--
  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 %}Edit User - Familiar Admin{% endblock %}

{% block content %}
<div class="max-w-2xl mx-auto">
    <div class="mb-6">
        <a href="{{ url_for('admin.users') }}" class="text-purple-600 hover:text-purple-800">
            ← Back to Users
        </a>
    </div>
    
    <div class="bg-white rounded-lg shadow overflow-hidden">
        <!-- Header -->
        <div class="px-6 py-4 bg-gray-50 border-b border-gray-200 flex items-center space-x-4">
            <div class="h-16 w-16 rounded-full bg-purple-100 flex items-center justify-center">
                <span class="text-2xl text-purple-600 font-bold">{{ target_user.name[0].upper() if target_user.name else '?' }}</span>
            </div>
            <div>
                <h1 class="text-xl font-bold text-gray-800">{{ target_user.name or 'No name' }}</h1>
                <p class="text-gray-500">{{ target_user.email }}</p>
            </div>
        </div>
        
        <!-- Edit Form -->
        <form method="POST" class="p-6 space-y-6">
            <input type="hidden" name="action" value="update">
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="name" class="block text-sm font-medium text-gray-700 mb-1">
                        Display Name
                    </label>
                    <input type="text" 
                           id="name" 
                           name="name" 
                           value="{{ target_user.name or '' }}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                </div>
                
                <div>
                    <label for="role" class="block text-sm font-medium text-gray-700 mb-1">
                        Role
                    </label>
                    <select id="role" 
                            name="role" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                        {% for r in roles %}
                        <option value="{{ r.value }}" {% if target_user.role == r %}selected{% endif %}>
                            {{ r.value|capitalize }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            
            <button type="submit" 
                    class="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition">
                Save Changes
            </button>
        </form>
        
        <!-- Account Info -->
        <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
            <h3 class="font-semibold text-gray-700 mb-3">Account Information</h3>
            <dl class="grid grid-cols-2 gap-4 text-sm">
                <div>
                    <dt class="text-gray-500">User ID</dt>
                    <dd class="text-gray-800 font-mono">{{ target_user.id }}</dd>
                </div>
                <div>
                    <dt class="text-gray-500">Status</dt>
                    <dd>
                        <span class="px-2 py-1 text-xs rounded-full
                            {% if target_user.status.value == 'active' %}bg-green-100 text-green-800
                            {% elif target_user.status.value == 'pending' %}bg-yellow-100 text-yellow-800
                            {% else %}bg-red-100 text-red-800{% endif %}">
                            {{ target_user.status.value }}
                        </span>
                    </dd>
                </div>
                <div>
                    <dt class="text-gray-500">Created</dt>
                    <dd class="text-gray-800">{{ target_user.created_at.strftime('%Y-%m-%d %H:%M') }}</dd>
                </div>
                <div>
                    <dt class="text-gray-500">Last Active</dt>
                    <dd class="text-gray-800">
                        {% if target_user.last_active %}
                        {{ target_user.last_active.strftime('%Y-%m-%d %H:%M') }}
                        {% else %}
                        Never
                        {% endif %}
                    </dd>
                </div>
            </dl>
        </div>
        
        <!-- Linked Channels -->
        <div class="px-6 py-4 border-t border-gray-200">
            <h3 class="font-semibold text-gray-700 mb-3">Linked Channels</h3>
            <div class="space-y-3">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <span class="text-2xl">📱</span>
                        <span class="text-gray-700">Telegram</span>
                    </div>
                    {% if target_user.telegram_id %}
                    <span class="text-green-600">Linked (ID: {{ target_user.telegram_id }})</span>
                    {% else %}
                    <span class="text-gray-400">Not linked</span>
                    {% endif %}
                </div>
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <span class="text-2xl">💬</span>
                        <span class="text-gray-700">Discord</span>
                    </div>
                    {% if target_user.discord_id %}
                    <span class="text-green-600">Linked (ID: {{ target_user.discord_id }})</span>
                    {% else %}
                    <span class="text-gray-400">Not linked</span>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <!-- Danger Zone -->
        <div class="px-6 py-4 bg-red-50 border-t border-red-200">
            <h3 class="font-semibold text-red-700 mb-3">Danger Zone</h3>
            <div class="flex flex-wrap gap-3">
                <form method="POST" class="inline" onsubmit="return confirm('Reset all sessions for this user?')">
                    <input type="hidden" name="action" value="reset_sessions">
                    <button type="submit" 
                            class="px-4 py-2 border border-red-300 text-red-700 rounded-lg hover:bg-red-100 transition">
                        Reset Sessions
                    </button>
                </form>
                
                {% if target_user.status.value == 'active' %}
                <form method="POST" class="inline" onsubmit="return confirm('Deactivate this user account?')">
                    <input type="hidden" name="action" value="deactivate">
                    <button type="submit" 
                            class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition">
                        Deactivate User
                    </button>
                </form>
                {% else %}
                <form method="POST" class="inline">
                    <input type="hidden" name="action" value="reactivate">
                    <button type="submit" 
                            class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition">
                        Reactivate User
                    </button>
                </form>
                {% endif %}
            </div>
        </div>
    </div>
    
    <!-- Recent Activity -->
    <div class="bg-white rounded-lg shadow mt-6">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-semibold text-gray-800">Recent Activity</h2>
        </div>
        <div class="p-6">
            {% if activity %}
            <ul class="space-y-3">
                {% for log in activity %}
                <li class="flex items-start space-x-3 text-sm">
                    <span class="text-gray-400">{{ log.timestamp[:16].replace('T', ' ') }}</span>
                    <span class="text-gray-700">{{ log.action.replace('_', ' ').title() }}</span>
                    {% if log.details %}
                    <span class="text-gray-500">— {{ log.details }}</span>
                    {% endif %}
                </li>
                {% endfor %}
            </ul>
            {% else %}
            <p class="text-gray-500 text-center py-4">No activity recorded</p>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}
