{% extends "template.html" %}

{% block content %}
<div class="mb-8">
	<div class="flex items-start justify-between gap-4">
		<div class="flex items-start gap-4">
			<div class="flex-shrink-0 w-12 h-12 rounded-xl bg-amber-100 dark:bg-amber-900/30 flex items-center justify-center">
				<svg class="w-7 h-7 text-amber-600 dark:text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
				</svg>
			</div>
			<div>
				<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">Gestion des utilisateurs</h1>
				<p class="text-gray-600 dark:text-gray-400">Liste des comptes webapp et attribution des rôles</p>
			</div>
		</div>
		<button type="button" onclick="document.getElementById('create-user-modal').classList.remove('hidden')"
			class="flex-shrink-0 px-4 py-2 rounded-lg bg-primary-600 dark:bg-primary-500 text-white font-medium hover:bg-primary-700 dark:hover:bg-primary-600 transition-colors flex items-center gap-2">
			<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
			</svg>
			<span>Créer un utilisateur</span>
		</button>
	</div>
</div>

{% with messages = get_flashed_messages(with_categories=true) %}
	{% if messages %}
		<div class="mb-6 space-y-2">
			{% for category, msg in messages %}
				<div class="p-4 rounded-lg {% if category == 'error' %}bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-200 border border-red-200 dark:border-red-800{% else %}bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200 border border-green-200 dark:border-green-800{% endif %}">
					{{ msg }}
				</div>
			{% endfor %}
		</div>
	{% endif %}
{% endwith %}

<div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden">
	{% if users %}
	<div class="overflow-x-auto">
		<table class="w-full">
			<thead class="bg-gray-50 dark:bg-gray-700/50 border-b border-gray-200 dark:border-gray-700">
				<tr>
					<th class="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
						Utilisateur
					</th>
					<th class="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
						E-mail
					</th>
					<th class="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
						Rôle actuel
					</th>
					<th class="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
						Inscrit le
					</th>
					<th class="px-6 py-4 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
						Modifier le rôle
					</th>
				</tr>
			</thead>
			<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
				{% for u in users %}
				<tr class="hover:bg-gray-50 dark:hover:bg-gray-700/30 transition-colors">
					<td class="px-6 py-4">
						<div class="flex items-center gap-3">
							<div class="flex-shrink-0 w-10 h-10 rounded-full bg-gradient-to-br from-primary-400 to-primary-600 flex items-center justify-center text-white font-semibold">
								{{ u.username[0].upper() }}
							</div>
							<div>
								<div class="font-medium text-gray-900 dark:text-white">{{ u.username }}</div>
								{% if u.id == current_user.id %}
								<span class="text-xs text-primary-600 dark:text-primary-400 font-medium">C'est vous</span>
								{% endif %}
							</div>
						</div>
					</td>
					<td class="px-6 py-4">
						<span class="text-sm text-gray-600 dark:text-gray-400">{{ u.email }}</span>
					</td>
					<td class="px-6 py-4">
						{% set user_role = None %}
						{% for r in roles %}
							{% if r == u.role %}
								{% set user_role = r %}
							{% endif %}
						{% endfor %}
						{% if user_role %}
							{% set role_obj = namespace(found=None) %}
							{% for role_name in roles %}
								{% if role_name == user_role %}
									{% for r_obj in roles %}
										{# Obtenir l'objet WebappRole complet #}
									{% endfor %}
								{% endif %}
							{% endfor %}
							<span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-sm font-medium whitespace-nowrap"
								style="background-color: #6B728020; color: #6B7280;">
								<span class="w-2 h-2 rounded-full" style="background-color: #6B7280;"></span>
								{{ role_labels.get(u.role, u.role) }}
							</span>
						{% else %}
							<span class="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300">
								{{ role_labels.get(u.role, u.role) }}
							</span>
						{% endif %}
					</td>
					<td class="px-6 py-4">
						<span class="text-sm text-gray-500 dark:text-gray-400">
							{% if u.created_at %}{{ u.created_at.strftime('%d/%m/%Y à %H:%M') }}{% else %}—{% endif %}
						</span>
					</td>
					<td class="px-6 py-4">
						<div class="flex items-center gap-2">
							<form action="{{ url_for('users_set_role', user_id=u.id) }}" method="post" class="flex items-center gap-2">
								<select name="role" class="px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-primary-500 transition-colors"
									{% if u.id == current_user.id %}disabled title="Vous ne pouvez pas modifier votre propre rôle"{% endif %}>
									{% for r in roles %}
									<option value="{{ r }}" {% if u.role == r %}selected{% endif %}>{{ role_labels.get(r, r) }}</option>
									{% endfor %}
								</select>
								<button type="submit" 
									{% if u.id == current_user.id %}disabled{% endif %}
									class="px-4 py-2 rounded-lg bg-primary-600 dark:bg-primary-500 text-white text-sm font-medium hover:bg-primary-700 dark:hover:bg-primary-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
									Appliquer
								</button>
							</form>
							{% if u.id != current_user.id %}
							<form action="{{ url_for('users_delete', user_id=u.id) }}" method="post" class="inline" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer cet utilisateur ?');">
								<button type="submit" class="px-3 py-2 rounded-lg bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300 text-sm font-medium hover:bg-red-200 dark:hover:bg-red-900/50 transition-colors" title="Supprimer cet utilisateur">
									<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
									</svg>
								</button>
							</form>
							{% endif %}
						</div>
						{% if u.id == current_user.id %}
						<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Protection: modification/suppression impossible</p>
						{% endif %}
					</td>
				</tr>
				{% endfor %}
			</tbody>
		</table>
	</div>
	{% else %}
	<div class="p-12 text-center">
		<svg class="w-16 h-16 mx-auto text-gray-400 dark:text-gray-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
		</svg>
		<p class="text-gray-500 dark:text-gray-400 text-lg">Aucun utilisateur enregistré</p>
	</div>
	{% endif %}
</div>

<!-- Légende des rôles -->
{% if users %}
<div class="mt-6 bg-blue-50 dark:bg-blue-900/20 rounded-xl border border-blue-200 dark:border-blue-800 p-6">
	<h3 class="text-lg font-semibold text-blue-900 dark:text-blue-200 mb-4 flex items-center gap-2">
		<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
		</svg>
		<span>Hiérarchie des rôles</span>
	</h3>
	<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
		{% for role_name in roles %}
		<div class="bg-white dark:bg-gray-800 rounded-lg p-3 border border-blue-100 dark:border-blue-900">
			<div class="flex items-center gap-2 mb-1">
				<span class="w-3 h-3 rounded-full" style="background-color: #6B7280;"></span>
				<span class="font-medium text-gray-900 dark:text-white text-sm">{{ role_labels.get(role_name, role_name) }}</span>
			</div>
			<p class="text-xs text-gray-600 dark:text-gray-400 ml-5">
				{% if role_name == 'viewer_twitch' %}
				Accès minimal, consultation uniquement
				{% elif role_name == 'utilisateur_discord' %}
				Modification de contenu basique
				{% elif role_name == 'moderateur_discord' %}
				Outils de modération Discord
				{% elif role_name == 'expert_discord' %}
				Gestion avancée du contenu
				{% elif role_name == 'moderateur_twitch' %}
				Outils de modération Twitch
				{% elif role_name == 'super_administrateur' %}
				Accès complet au système
				{% else %}
				Rôle personnalisé
				{% endif %}
			</p>
		</div>
		{% endfor %}
	</div>
	<div class="mt-4 p-3 bg-blue-100 dark:bg-blue-900/30 rounded-lg">
		<p class="text-sm text-blue-800 dark:text-blue-200">
			<strong>💡 Conseil :</strong> Vous pouvez personnaliser les rôles et leurs permissions dans la page 
			<a href="{{ url_for('settings') }}" class="underline hover:text-blue-900 dark:hover:text-blue-100">Paramètres</a>.
		</p>
	</div>
</div>
{% endif %}

<!-- Modal de création d'utilisateur -->
<div id="create-user-modal" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
	<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
		<div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 bg-opacity-75 dark:bg-opacity-80 transition-opacity" onclick="document.getElementById('create-user-modal').classList.add('hidden')"></div>
		<div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
			<form action="{{ url_for('users_create') }}" method="post">
				<div class="bg-white dark:bg-gray-800 px-6 pt-6 pb-4">
					<div class="flex items-start justify-between mb-4">
						<div class="flex items-center gap-3">
							<div class="w-10 h-10 rounded-lg bg-primary-100 dark:bg-primary-900/30 flex items-center justify-center">
								<svg class="w-6 h-6 text-primary-600 dark:text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
								</svg>
							</div>
							<h3 class="text-xl font-semibold text-gray-900 dark:text-white">Créer un utilisateur</h3>
						</div>
						<button type="button" onclick="document.getElementById('create-user-modal').classList.add('hidden')"
							class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200">
							<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
							</svg>
						</button>
					</div>
					<div class="space-y-4">
						<div>
							<label for="username" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
								Nom d'utilisateur <span class="text-red-500">*</span>
							</label>
							<input type="text" id="username" name="username" required minlength="3"
								class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500"
								placeholder="ex: john_doe">
						</div>
						<div>
							<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
								Adresse e-mail <span class="text-red-500">*</span>
							</label>
							<input type="email" id="email" name="email" required
								class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500"
								placeholder="ex: john@example.com">
						</div>
						<div>
							<label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
								Mot de passe <span class="text-red-500">*</span>
							</label>
							<input type="password" id="password" name="password" required minlength="8"
								class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500"
								placeholder="Au moins 8 caractères">
						</div>
						<div>
							<label for="password_confirm" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
								Confirmer le mot de passe <span class="text-red-500">*</span>
							</label>
							<input type="password" id="password_confirm" name="password_confirm" required minlength="8"
								class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500"
								placeholder="Retapez le mot de passe">
						</div>
						<div>
							<label for="role" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
								Rôle <span class="text-red-500">*</span>
							</label>
							<select id="role" name="role" required
								class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500">
								{% for r in roles %}
								<option value="{{ r }}">{{ role_labels.get(r, r) }}</option>
								{% endfor %}
							</select>
						</div>
					</div>
				</div>
				<div class="bg-gray-50 dark:bg-gray-700/50 px-6 py-4 flex gap-3 justify-end">
					<button type="button" onclick="document.getElementById('create-user-modal').classList.add('hidden')"
						class="px-4 py-2 rounded-lg bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300 font-medium hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors">
						Annuler
					</button>
					<button type="submit"
						class="px-4 py-2 rounded-lg bg-primary-600 dark:bg-primary-500 text-white font-medium hover:bg-primary-700 dark:hover:bg-primary-600 transition-colors">
						Créer l'utilisateur
					</button>
				</div>
			</form>
		</div>
	</div>
</div>

<style>
/* Animation au survol des lignes */
tbody tr {
	transition: all 0.2s ease;
}
</style>
{% endblock %}