{{--
    Reusable Delete Confirmation Modal Component
    
    This component provides a secure, Alpine.js-based confirmation modal
    that properly uses HTTP DELETE requests through Laravel routes.
    
    Usage:
        <x-ipaas.delete-confirmation-modal 
            entity="flow" 
            route-prefix="ipaas.flows"
            refresh-event="refresh-flows-index"
        />
    
    JavaScript call:
        confirmDelete(id, name, 'flow')
    
    Parameters:
    - entity: Type of entity being deleted ('flow', 'connector', etc.)
    - route-prefix: Laravel route name prefix (e.g., 'ipaas.flows')
    - refresh-event: (Optional) Livewire event to dispatch after successful delete
                     If provided, only the Livewire component refreshes (no page reload)
                     If omitted, the entire page will reload
    
    Security Features:
    - Uses HTTP DELETE (passes through all middlewares)
    - CSRF protection
    - FormRequest validation
    - Authorization checks
    - Complete logging
    
    UX Features:
    - No page reload (uses Livewire events)
    - Reuses existing alert system (resources/views/partials/alerts.blade.php)
    - Loading states and animations
    - XSS protection (escapes HTML)
--}}

@props([
    'entity' => 'item',        // 'flow', 'connector', etc.
    'routePrefix' => '',       // Laravel route name prefix (e.g., 'ipaas.flows')
    'refreshEvent' => '',      // Livewire event to dispatch after delete (e.g., 'refresh-flows-index')
])

<div x-data="deleteConfirmationModal('{{ $entity }}', '{{ $routePrefix }}', '{{ $refreshEvent }}')" 
     x-show="showModal"
     x-cloak
     @open-delete-modal.window="handleOpenModal($event.detail)"
     class="fixed inset-0 flex items-center justify-center bg-gray-500 bg-opacity-75 z-50"
     style="display: none;">
    
    <div x-transition:enter="ease-out duration-300"
         x-transition:enter-start="opacity-0 translate-y-4 sm:scale-95"
         x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
         x-transition:leave="ease-in duration-200"
         x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
         x-transition:leave-end="opacity-0 translate-y-4 sm:scale-95"
         class="bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:max-w-lg sm:w-full">
        
        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
            <div class="sm:flex sm:items-start">
                <!-- Warning Icon -->
                <div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                    <svg class="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
                    </svg>
                </div>
                
                <!-- Content -->
                <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
                    <h3 class="text-base font-semibold leading-6 text-gray-900" x-text="title"></h3>
                    <div class="mt-2">
                        <p class="text-sm text-gray-500" x-html="message"></p>
                    </div>
                </div>
            </div>
            
            <!-- Buttons -->
            <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
                <button 
                    type="button" 
                    @click="confirmDelete()" 
                    :disabled="loading"
                    :class="loading ? 'opacity-50 cursor-not-allowed' : 'hover:bg-red-500'"
                    class="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm sm:ml-3 sm:w-auto">
                    <span x-show="!loading">Confirm</span>
                    <span x-show="loading" class="flex items-center">
                        <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                        Deleting...
                    </span>
                </button>
                <button 
                    type="button" 
                    @click="cancelDelete()" 
                    :disabled="loading"
                    :class="loading ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-50'"
                    class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 sm:mt-0 sm:w-auto">
                    Cancel
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    /**
     * Global function to trigger delete confirmation
     * 
     * @param {number} id - ID of the item to delete
     * @param {string} name - Name of the item (for display)
     * @param {string} entityType - Type of entity ('flow', 'connector', etc.)
     */
    function confirmDelete(id, name, entityType) {
        window.dispatchEvent(new CustomEvent('open-delete-modal', { 
            detail: { 
                id: id,
                name: name,
                entityType: entityType
            } 
        }));
    }

    /**
     * Alpine.js Delete Confirmation Modal Component
     * 
     * Handles secure deletion using HTTP DELETE requests
     * with proper middleware, CSRF, and authorization
     */
    function deleteConfirmationModal(entityType, routePrefix, refreshEvent) {
        return {
            showModal: false,
            loading: false,
            title: '',
            message: '',
            itemId: null,
            itemName: '',
            entityType: entityType,
            routePrefix: routePrefix,
            refreshEvent: refreshEvent,

            handleOpenModal(detail) {
                // Only handle events for this entity type
                if (detail.entityType === this.entityType) {
                    this.openModal(detail.id, detail.name);
                }
            },

            openModal(id, name) {
                this.itemId = id;
                this.itemName = name;
                this.title = `Delete ${this.capitalizeFirst(this.entityType)}`;
                this.message = `Are you sure you want to delete <strong>${this.escapeHtml(name)}</strong>?<br><span class="text-red-600 text-xs mt-1 block">⚠️ This action cannot be undone.</span>`;
                this.showModal = true;
            },

            cancelDelete() {
                if (!this.loading) {
                    this.showModal = false;
                    this.itemId = null;
                    this.itemName = '';
                }
            },

            async confirmDelete() {
                this.loading = true;

                try {
                    // Build delete URL based on route prefix
                    const deleteUrl = this.routePrefix 
                        ? `/${this.routePrefix.replace(/\./g, '/')}/destroy/${this.itemId}`
                        : `/destroy/${this.itemId}`;

                    console.log('🗑️ [DeleteModal] Attempting delete:', {
                        url: deleteUrl,
                        itemId: this.itemId,
                        entityType: this.entityType
                    });

                    const response = await fetch(deleteUrl, {
                        method: 'DELETE',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
                            'Accept': 'application/json'
                        }
                    });

                    console.log('🗑️ [DeleteModal] Response received:', {
                        status: response.status,
                        ok: response.ok,
                        redirected: response.redirected,
                        url: response.url
                    });

                    // Handle redirect responses
                    if (response.redirected) {
                        console.log('🗑️ [DeleteModal] Handling redirect');
                        window.location.href = response.url;
                        return;
                    }

                    // Parse JSON response
                    let data = {};
                    try {
                        data = await response.json();
                        console.log('🗑️ [DeleteModal] Parsed JSON:', data);
                    } catch (e) {
                        console.warn('🗑️ [DeleteModal] Failed to parse JSON:', e);
                    }

                    if (response.ok) {
                        // Success
                        console.log('🗑️ [DeleteModal] Delete successful');
                        this.showModal = false;
                        this.loading = false; // IMPORTANT: Reset loading state
                        this.showNotification('success', `${this.capitalizeFirst(this.entityType)} deleted successfully`);
                        
                        // Refresh Livewire component without reloading page
                        if (this.refreshEvent) {
                            console.log('🗑️ [DeleteModal] Dispatching Livewire event:', this.refreshEvent);
                            // Dispatch Livewire event to refresh the component
                            setTimeout(() => {
                                window.Livewire.dispatch(this.refreshEvent);
                            }, 500);
                        } else {
                            console.log('🗑️ [DeleteModal] Reloading page');
                            // Fallback: reload page if no refresh event specified
                            setTimeout(() => {
                                window.location.reload();
                            }, 1500);
                        }
                    } else {
                        // Error
                        console.error('🗑️ [DeleteModal] Delete failed:', response.status, data);
                        this.loading = false;
                        const errorMessage = data.message || `Failed to delete ${this.entityType}`;
                        this.showNotification('error', errorMessage);
                    }
                } catch (error) {
                    console.error(`🗑️ [DeleteModal] Exception during delete:`, error);
                    this.loading = false;
                    this.showNotification('error', `An error occurred while deleting the ${this.entityType}`);
                }
            },

            showNotification(type, message) {
                // Reutilizar el sistema de alertas existente (resources/views/partials/alerts.blade.php)
                window.dispatchEvent(new CustomEvent('showalert', {
                    detail: {
                        response: {
                            type: type,      // 'success', 'error', 'warning', 'info'
                            message: message
                        }
                    }
                }));
            },

            capitalizeFirst(str) {
                return str.charAt(0).toUpperCase() + str.slice(1);
            },

            escapeHtml(text) {
                const map = {
                    '&': '&amp;',
                    '<': '&lt;',
                    '>': '&gt;',
                    '"': '&quot;',
                    "'": '&#039;'
                };
                return text.replace(/[&<>"']/g, m => map[m]);
            }
        }
    }
</script>