{{--
    Confirm Dialog Component - AdminLTE style
    For dangerous actions like delete, stop, etc.
    
    Usage:
    <x-proxmox::ui.confirm-dialog
        title="Stop Server?"
        message="This will immediately stop the server."
        confirm-label="Stop"
        cancel-label="Cancel"
        variant="danger"
        wire:click="stopServer"
    />
--}}

@props([
    'title' => 'Confirm Action',
    'message' => 'Are you sure you want to proceed?',
    'confirmLabel' => 'Confirm',
    'cancelLabel' => 'Cancel',
    'variant' => 'danger', // danger, warning, primary
    'open' => false,
])

@php
    $variants = [
        'danger' => [
            'icon' => 'ri-error-warning-line',
            'iconBg' => 'background-color: rgba(220, 53, 69, 0.1);',
            'iconColor' => 'color: var(--lte-danger, #dc3545);',
            'buttonStyle' => 'background-color: var(--lte-danger, #dc3545); color: #fff;',
            'buttonHover' => 'background-color: #bb2d3b;',
        ],
        'warning' => [
            'icon' => 'ri-alert-line',
            'iconBg' => 'background-color: rgba(255, 193, 7, 0.15);',
            'iconColor' => 'color: #997404;',
            'buttonStyle' => 'background-color: var(--lte-warning, #ffc107); color: #000;',
            'buttonHover' => 'background-color: #ffca2c;',
        ],
        'primary' => [
            'icon' => 'ri-question-line',
            'iconBg' => 'background-color: rgba(13, 110, 253, 0.1);',
            'iconColor' => 'color: var(--lte-primary, #0d6efd);',
            'buttonStyle' => 'background-color: var(--lte-primary, #0d6efd); color: #fff;',
            'buttonHover' => 'background-color: #0b5ed7;',
        ],
    ];
    
    $config = $variants[$variant] ?? $variants['danger'];
@endphp

<style>
    .confirm-dialog-lte-backdrop {
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4px);
        z-index: 99998;
    }
    .confirm-dialog-lte-container {
        position: fixed;
        inset: 0;
        z-index: 99999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
    }
    .confirm-dialog-lte {
        position: relative;
        width: 100%;
        max-width: 28rem;
        background-color: #fff;
        border: 1px solid var(--lte-border-color, #dee2e6);
        border-radius: var(--lte-border-radius, 0.375rem);
        padding: 1.5rem;
        box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    }
    .confirm-dialog-lte-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .confirm-dialog-lte-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 50%;
        margin-bottom: 1.25rem;
    }
    .confirm-dialog-lte-icon svg {
        width: 1.75rem;
        height: 1.75rem;
    }
    .confirm-dialog-lte-title {
        font-size: 1.125rem;
        font-weight: 600;
        color: #212529;
        margin-bottom: 0.5rem;
    }
    .confirm-dialog-lte-message {
        font-size: 0.875rem;
        color: var(--lte-secondary, #6c757d);
        margin-bottom: 1.5rem;
    }
    .confirm-dialog-lte-actions {
        display: flex;
        width: 100%;
        gap: 0.75rem;
    }
    .confirm-dialog-lte-btn {
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
        font-weight: 500;
        border-radius: var(--lte-border-radius, 0.375rem);
        border: none;
        cursor: pointer;
        transition: all var(--lte-transition-speed, 0.3s) ease;
    }
    .confirm-dialog-lte-btn-cancel {
        background-color: #fff;
        color: #495057;
        border: 1px solid var(--lte-border-color, #dee2e6);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }
    .confirm-dialog-lte-btn-cancel:hover {
        background-color: #f8f9fa;
        border-color: #adb5bd;
    }
    .confirm-dialog-lte-btn-confirm {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }
    .confirm-dialog-lte-btn-confirm:hover {
        opacity: 0.9;
    }
    /* Dark mode */
    .dark .confirm-dialog-lte {
        background-color: #1f2937;
        border-color: #374151;
    }
    .dark .confirm-dialog-lte-title {
        color: #f3f4f6;
    }
    .dark .confirm-dialog-lte-message {
        color: #9ca3af;
    }
    .dark .confirm-dialog-lte-btn-cancel {
        background-color: #374151;
        color: #d1d5db;
        border-color: #4b5563;
    }
    .dark .confirm-dialog-lte-btn-cancel:hover {
        background-color: #4b5563;
    }
</style>

<div
    x-data="{ open: @js($open) }"
    x-show="open"
    x-cloak
    @keydown.escape.window="open = false"
    {{ $attributes->whereDoesntStartWith('wire:click') }}
>
    <!-- Backdrop -->
    <div 
        x-show="open"
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        @click="open = false"
        class="confirm-dialog-lte-backdrop"
    ></div>

    <!-- Dialog Container -->
    <div class="confirm-dialog-lte-container">
        <div
            x-show="open"
            x-transition:enter="transition ease-out duration-200"
            x-transition:enter-start="opacity-0 scale-95"
            x-transition:enter-end="opacity-100 scale-100"
            x-transition:leave="transition ease-in duration-150"
            x-transition:leave-start="opacity-100 scale-100"
            x-transition:leave-end="opacity-0 scale-95"
            class="confirm-dialog-lte"
        >
            <div class="confirm-dialog-lte-content">
                <!-- Icon -->
                <div class="confirm-dialog-lte-icon" style="{{ $config['iconBg'] }}">
                    <x-dynamic-component :component="$config['icon']" style="{{ $config['iconColor'] }}" />
                </div>
                
                <!-- Title -->
                <h3 class="confirm-dialog-lte-title">{{ $title }}</h3>
                
                <!-- Message -->
                <p class="confirm-dialog-lte-message">{{ $message }}</p>
                
                <!-- Actions -->
                <div class="confirm-dialog-lte-actions">
                    <button
                        type="button"
                        @click="open = false"
                        class="confirm-dialog-lte-btn confirm-dialog-lte-btn-cancel"
                    >
                        {{ $cancelLabel }}
                    </button>
                    <button
                        type="button"
                        @click="open = false"
                        {{ $attributes->whereStartsWith('wire:click') }}
                        class="confirm-dialog-lte-btn confirm-dialog-lte-btn-confirm"
                        style="{{ $config['buttonStyle'] }}"
                    >
                        {{ $confirmLabel }}
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>