{{-- Componente UI Unificado --}}
@props(['type', 'text' => '', 'position' => 'top', 'variant' => '', 'id' => '', 'title' => '', 'size' => ''])

@switch($type)
    @case('tooltip')
        <div class="tooltip tooltip-{{ $position }}">
            {{ $slot }}
            <span class="tooltip-text {{ $variant ? 'tooltip-' . $variant : '' }}">{{ $text }}</span>
        </div>
        @break

    @case('modal')
        <div id="{{ $id }}" class="modal-backdrop" style="display: none;">
            <div class="modal {{ $size ? 'modal-' . $size : '' }}">
                <div class="modal-header">
                    <h3 class="modal-title">{{ $title }}</h3>
                    <button class="modal-close" onclick="closeModal('{{ $id }}')">&times;</button>
                </div>
                <div class="modal-body">{{ $slot }}</div>
                <div class="modal-footer">
                    <button class="btn-outline" onclick="closeModal('{{ $id }}')">Cancelar</button>
                    <button class="btn-primary">Confirmar</button>
                </div>
            </div>
        </div>
        @break

    @case('dropdown')
        <div class="dropdown">
            <button class="dropdown-toggle">{{ $title }}</button>
            <div class="dropdown-menu">{{ $slot }}</div>
        </div>
        @break

    @case('tabs')
        <div class="tabs">
            <div class="tab-nav">{{ $slot }}</div>
        </div>
        @break

    @case('accordion')
        <div class="accordion-item">
            <div class="accordion-header">
                <span>{{ $title }}</span>
                <i class="fas fa-chevron-down accordion-icon"></i>
            </div>
            <div class="accordion-content">{{ $slot }}</div>
        </div>
        @break

    @case('toast')
        <div class="toast toast-{{ $variant }}">{{ $slot }}</div>
        @break

    @case('loading')
        <div class="loading"></div>
        @break

    @case('progress')
        <div class="progress">
            <div class="progress-bar" style="width: {{ $text }}%"></div>
        </div>
        @break

    @case('card')
        <div class="card">
            @if($title)<div class="card-header"><h4>{{ $title }}</h4></div>@endif
            <div class="card-body">{{ $slot }}</div>
        </div>
        @break

    @case('alert')
        <div class="alert alert-{{ $variant }}">{{ $slot }}</div>
        @break
@endswitch

@once
    @push('styles')
        <link rel="stylesheet" href="{{ asset('css/design-system.css') }}">
    @endpush
    
    @push('scripts')
    <script>
        function openModal(id) { document.getElementById(id).classList.add('show'); }
        function closeModal(id) { document.getElementById(id).classList.remove('show'); }
        
        // Dropdown
        document.addEventListener('click', function(e) {
            if (e.target.classList.contains('dropdown-toggle')) {
                e.target.parentElement.classList.toggle('show');
            }
        });
        
        // Accordion
        document.addEventListener('click', function(e) {
            if (e.target.classList.contains('accordion-header')) {
                e.target.parentElement.classList.toggle('active');
            }
        });
        
        // Toast
        function showToast(message, type = 'success') {
            const toast = document.createElement('div');
            toast.className = `toast toast-${type} show`;
            toast.textContent = message;
            document.querySelector('.toast-container').appendChild(toast);
            setTimeout(() => toast.remove(), 5000);
        }
    </script>
    @endpush
@endonce