{{--
    Action Toolbar Button Component - AdminLTE style
    Individual button for VM control actions
    
    Usage:
    <x-proxmox::ui.action-button 
        action="start" 
        wire:click="startServer"
        icon="ri-play-fill"
        label="Start"
    />
--}}

@props([
    'action' => null,
    'icon' => null,
    'label',
    'variant' => 'default', // default, danger, warning, success, primary
    'disabled' => false,
    'loading' => false,
    'confirm' => null,
    'size' => 'md', // sm, md, lg
])

@php
    $sizeStyles = [
        'sm' => 'height: 2.25rem; padding: 0 0.75rem; font-size: 0.8125rem;',
        'md' => 'height: 2.5rem; padding: 0 1rem; font-size: 0.875rem;',
        'lg' => 'height: 2.75rem; padding: 0 1.25rem; font-size: 0.875rem;',
    ];
    
    $iconSizes = [
        'sm' => 'width: 0.875rem; height: 0.875rem;',
        'md' => 'width: 1rem; height: 1rem;',
        'lg' => 'width: 1.125rem; height: 1.125rem;',
    ];
@endphp

<style>
    .action-btn-lte {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        white-space: nowrap;
        font-weight: 500;
        border-radius: var(--lte-border-radius, 0.375rem);
        border: 1px solid transparent;
        transition: all var(--lte-transition-speed, 0.3s) ease;
        cursor: pointer;
    }
    .action-btn-lte:focus {
        outline: none;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }
    .action-btn-lte:disabled {
        opacity: 0.5;
        pointer-events: none;
    }
    .action-btn-lte-default {
        background-color: #fff;
        border-color: var(--lte-border-color, #dee2e6);
        color: #495057;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }
    .action-btn-lte-default:hover {
        background-color: #f8f9fa;
        border-color: #adb5bd;
    }
    .action-btn-lte-primary {
        background-color: rgba(13, 110, 253, 0.1);
        border-color: rgba(13, 110, 253, 0.2);
        color: var(--lte-primary, #0d6efd);
    }
    .action-btn-lte-primary:hover {
        background-color: rgba(13, 110, 253, 0.15);
        border-color: rgba(13, 110, 253, 0.3);
    }
    .action-btn-lte-success {
        background-color: rgba(25, 135, 84, 0.1);
        border-color: rgba(25, 135, 84, 0.2);
        color: var(--lte-success, #198754);
    }
    .action-btn-lte-success:hover {
        background-color: rgba(25, 135, 84, 0.15);
        border-color: rgba(25, 135, 84, 0.3);
    }
    .action-btn-lte-warning {
        background-color: rgba(255, 193, 7, 0.15);
        border-color: rgba(255, 193, 7, 0.3);
        color: #997404;
    }
    .action-btn-lte-warning:hover {
        background-color: rgba(255, 193, 7, 0.25);
        border-color: rgba(255, 193, 7, 0.4);
    }
    .action-btn-lte-danger {
        background-color: rgba(220, 53, 69, 0.1);
        border-color: rgba(220, 53, 69, 0.2);
        color: var(--lte-danger, #dc3545);
    }
    .action-btn-lte-danger:hover {
        background-color: rgba(220, 53, 69, 0.15);
        border-color: rgba(220, 53, 69, 0.3);
    }
    .action-btn-lte-loading {
        cursor: wait;
    }
    /* Spinner */
    .action-btn-spinner-lte {
        animation: spin 1s linear infinite;
    }
    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    /* Dark mode */
    .dark .action-btn-lte-default {
        background-color: #1f2937;
        border-color: #374151;
        color: #d1d5db;
    }
    .dark .action-btn-lte-default:hover {
        background-color: #374151;
        border-color: #4b5563;
    }
    .dark .action-btn-lte-primary {
        background-color: rgba(13, 110, 253, 0.15);
        border-color: rgba(13, 110, 253, 0.25);
    }
    .dark .action-btn-lte-success {
        background-color: rgba(25, 135, 84, 0.15);
        border-color: rgba(25, 135, 84, 0.25);
    }
    .dark .action-btn-lte-warning {
        background-color: rgba(255, 193, 7, 0.15);
        border-color: rgba(255, 193, 7, 0.25);
        color: #ffc107;
    }
    .dark .action-btn-lte-danger {
        background-color: rgba(220, 53, 69, 0.15);
        border-color: rgba(220, 53, 69, 0.25);
    }
</style>

<button 
    type="button"
    @if($confirm)
        x-data=""
        @click="if(confirm('{{ $confirm }}')) { $wire.call('{{ $action }}') }"
    @endif
    style="{{ $sizeStyles[$size] ?? $sizeStyles['md'] }}"
    {{ $attributes->merge([
        'disabled' => $disabled || $loading,
    ])->class([
        'action-btn-lte',
        'action-btn-lte-default' => $variant === 'default',
        'action-btn-lte-primary' => $variant === 'primary',
        'action-btn-lte-success' => $variant === 'success',
        'action-btn-lte-warning' => $variant === 'warning',
        'action-btn-lte-danger' => $variant === 'danger',
        'action-btn-lte-loading' => $loading,
    ]) }}
>
    @if($loading)
        <svg class="action-btn-spinner-lte" style="{{ $iconSizes[$size] ?? $iconSizes['md'] }}" 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>
    @elseif($icon)
        <x-dynamic-component :component="$icon" style="{{ $iconSizes[$size] ?? $iconSizes['md'] }}" />
    @endif
    <span>{{ $label }}</span>
</button>