# 🔄 Sistema de Confirmação de Exclusão

## 📋 Visão Geral

Sistema reutilizável de confirmação de exclusão (estilo SweetAlert) para uso em todas as páginas do sistema.

## 🎯 Funcionalidades

1. **Modal de Confirmação Antes de Deletar**
   - Mostra informações do item a ser deletado
   - Aviso de que a ação não pode ser desfeita
   - Botões de Cancelar e Confirmar

2. **Modal de Sucesso Após Deletar**
   - Confirma que o item foi deletado
   - Fecha automaticamente após 2 segundos
   - Pode ser fechado manualmente

## 📦 Arquivos Criados

1. `frontend/src/utils/confirmDelete.js` - Utilitário JavaScript puro (funciona em qualquer framework)
2. `frontend/src/components/ConfirmDelete.vue` - Componente Vue reutilizável
3. `frontend/src/composables/useConfirmDelete.js` - Composable Vue 3

## 🚀 Como Usar

### Opção 1: Utilitário JavaScript (Framework Agnostic)

```javascript
import { deleteWithConfirmation } from '@/utils/confirmDelete';
import api from '@/services/api';

// Exemplo em método Vue
methods: {
    async handleDelete(user) {
        try {
            await deleteWithConfirmation({
                item: user,
                itemName: user.name || `${user.first_name} ${user.last_name}`,
                deleteFunction: async (item) => {
                    const token = localStorage.getItem('token');
                    await api.delete(`/api/users/${item.id}`, {
                        headers: { token }
                    });
                },
                successMessage: 'Usuário excluído com sucesso!',
                onSuccess: () => {
                    // Recarregar lista ou redirecionar
                    this.loadUsers();
                },
                onError: (error) => {
                    console.error('Erro ao deletar:', error);
                }
            });
        } catch (error) {
            if (error.message !== 'Cancelado pelo usuário') {
                // Tratar erro
            }
        }
    }
}
```

### Opção 2: Componente Vue

```vue
<template>
    <div>
        <button @click="openDeleteModal(user)">Deletar</button>
        
        <ConfirmDelete
            :show="showDelete"
            :item="selectedItem"
            :itemName="selectedItemName"
            @confirm="confirmDelete"
            @cancel="cancelDelete"
            @closed="onDeleteClosed"
        />
    </div>
</template>

<script>
import ConfirmDelete from '@/components/ConfirmDelete.vue';

export default {
    components: {
        ConfirmDelete
    },
    data() {
        return {
            showDelete: false,
            selectedItem: null,
            selectedItemName: null
        };
    },
    methods: {
        openDeleteModal(item) {
            this.selectedItem = item;
            this.selectedItemName = item.name || `${item.first_name} ${item.last_name}`;
            this.showDelete = true;
        },
        async confirmDelete() {
            try {
                const token = localStorage.getItem('token');
                await api.delete(`/api/users/${this.selectedItem.id}`, {
                    headers: { token }
                });
                
                // Mostrar sucesso
                this.showDelete = false;
                // Você pode usar o componente ConfirmDelete com prop showSuccess
                // ou usar a função showDeleteSuccess do utils
                this.loadUsers();
            } catch (error) {
                console.error('Erro ao deletar:', error);
            }
        },
        cancelDelete() {
            this.showDelete = false;
            this.selectedItem = null;
            this.selectedItemName = null;
        },
        onDeleteClosed() {
            // Limpar estados se necessário
        }
    }
};
</script>
```

### Opção 3: Composable Vue 3

```vue
<template>
    <div>
        <button @click="deleteUser(user)">Deletar</button>
        
        <ConfirmDelete
            :show="showConfirm"
            :item="deleteItem"
            :itemName="deleteItemName"
            @confirm="handleConfirm"
            @cancel="handleCancel"
        />
    </div>
</template>

<script setup>
import { useConfirmDelete } from '@/composables/useConfirmDelete';
import api from '@/services/api';

const {
    showConfirm,
    showSuccess,
    deleteItem,
    deleteItemName,
    openConfirm,
    handleConfirm,
    handleCancel,
    deleteWithAPI
} = useConfirmDelete();

async function deleteUser(user) {
    deleteWithAPI(`/api/users/${user.id}`, user, user.name || `${user.first_name} ${user.last_name}`);
}

// Ou manualmente:
// openConfirm(user, user.name, async (item) => {
//     const token = localStorage.getItem('token');
//     await api.delete(`/api/users/${item.id}`, { headers: { token } });
// });
</script>
```

## 📝 Exemplos de Uso em Diferentes Páginas

### Página de Usuários
```javascript
async deleteUser(user) {
    await deleteWithConfirmation({
        item: user,
        itemName: `${user.first_name} ${user.last_name}`,
        apiEndpoint: `/api/users/${user.id}`,
        onSuccess: () => this.loadUsers()
    });
}
```

### Página de Estabelecimentos
```javascript
async deleteEstablishment(establishment) {
    await deleteWithConfirmation({
        item: establishment,
        itemName: establishment.name,
        apiEndpoint: `/api/establishments/${establishment.id}`,
        onSuccess: () => this.loadEstablishments()
    });
}
```

### Página de Clientes
```javascript
async deleteCustomer(customer) {
    await deleteWithConfirmation({
        item: customer,
        itemName: `${customer.firstname} ${customer.surname}`,
        apiEndpoint: `/api/customers/${customer.customer_id}`,
        onSuccess: () => this.loadCustomers()
    });
}
```

## 🎨 Customização

Você pode customizar os modais modificando:
- Cores dos botões
- Mensagens padrão
- Tempo de auto-fechamento
- Animações
- Layout

## ✅ Benefícios

1. **Reutilizável** - Usa em todas as páginas
2. **Consistente** - Mesma experiência em todo o sistema
3. **Acessível** - Fecha com ESC, clica fora, etc.
4. **Responsivo** - Funciona em mobile e desktop
5. **Flexível** - Suporta diferentes formatos de item