{% extends "shared/base_dashboard.html" %}
{% block title %}Excluir Usuário - Chaplin{% endblock %}

{% block content %}
<div class="p-8 max-w-2xl mx-auto">
    <div class="mb-8">
        <a href="{% url 'users:admin_users_list' %}" class="text-gray-500 hover:text-orange-500 font-medium mb-4 inline-block">&larr; Voltar para Gestão de Contas</a>
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Excluir Usuário</h1>
    </div>

    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md border border-red-200 dark:border-red-800 p-6">
        <div class="flex items-start gap-4 mb-6">
            <div class="flex-shrink-0 w-12 h-12 bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400 rounded-full flex items-center justify-center">
                <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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                </svg>
            </div>
            <div>
                <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-2">O que deseja fazer com este usuário?</h2>
                <p class="text-gray-600 dark:text-gray-400">Escolha entre desativar (pode ser revertido) ou excluir permanentemente.</p>
            </div>
        </div>

        <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-6 border border-gray-200 dark:border-gray-700">
            <p class="text-sm text-gray-500 dark:text-gray-400">Usuário selecionado:</p>
            <p class="text-lg font-semibold text-gray-900 dark:text-white">{{ target_user.get_full_name|default:target_user.username }}</p>
            <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                {{ target_user.email }} · 
                {% if target_user.profile %}{{ target_user.profile.get_role_display }}{% endif %} · 
                {% if target_user.is_active %}
                    <span class="text-green-600">Ativo</span>
                {% else %}
                    <span class="text-red-600">Inativo</span>
                {% endif %}
            </p>
        </div>

        <div class="space-y-4">
            
            <form method="POST">
                {% csrf_token %}
                <input type="hidden" name="action" value="deactivate">
                <button type="submit" class="w-full bg-yellow-500 hover:bg-yellow-600 text-white font-semibold py-3 px-4 rounded-lg transition flex items-center justify-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="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"></path></svg>
                    Desativar Conta (reversível)
                </button>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1 text-center">O usuário não conseguirá fazer login, mas os dados serão preservados.</p>
            </form>

            <div class="relative">
                <div class="absolute inset-0 flex items-center"><div class="w-full border-t border-gray-200 dark:border-gray-700"></div></div>
                <div class="relative flex justify-center"><span class="bg-white dark:bg-gray-800 px-3 text-sm text-gray-500">ou</span></div>
            </div>

            
            <form method="POST" onsubmit="return confirm('ATENÇÃO: Esta ação é IRREVERSÍVEL. Todos os dados do usuário serão perdidos. Deseja continuar?')">
                {% csrf_token %}
                <input type="hidden" name="action" value="delete">
                <button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white font-semibold py-3 px-4 rounded-lg transition flex items-center justify-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="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"></path></svg>
                    Excluir Permanentemente
                </button>
                <p class="text-xs text-red-500 mt-1 text-center">Todos os dados, tarefas criadas e logs serão removidos. Ação irreversível.</p>
            </form>

            <a href="{% url 'users:admin_users_list' %}" class="block w-full text-center bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 font-semibold py-3 px-4 rounded-lg transition mt-4">
                Cancelar
            </a>
        </div>
    </div>
</div>
{% endblock %}