{{-- 
========================================
USER DROPDOWN MENU
========================================
Menu dropdown utente con avatar, informazioni utente,
link di navigazione e logout.

Props:
- $user: Oggetto utente corrente
- $showAvatar: Mostra avatar utente
- $avatarSize: Dimensione avatar (sm, md, lg)

Autore: NetGesCon Development Team
Data: 2024
========================================
--}}

@props([
    'user' => null,
    'showAvatar' => true,
    'avatarSize' => 'sm'
])

@php
$currentUser = $user ?? auth()->user();
$userName = $currentUser ? $currentUser->name : 'Utente';
$userEmail = $currentUser ? $currentUser->email : '';
$userRole = $currentUser ? ($currentUser->role ?? 'user') : 'guest';

// Determina dimensioni avatar
$avatarSizes = [
    'sm' => '32px',
    'md' => '40px', 
    'lg' => '48px'
];
$avatarDimension = $avatarSizes[$avatarSize] ?? $avatarSizes['sm'];
@endphp

<div class="dropdown">
    <button class="btn btn-outline-primary btn-uniform dropdown-toggle d-flex align-items-center" 
            type="button" 
            id="userDropdown" 
            data-bs-toggle="dropdown" 
            aria-expanded="false">
        
        {{-- Avatar Utente --}}
        @if($showAvatar)
            <div class="user-avatar me-2" style="width: {{ $avatarDimension }}; height: {{ $avatarDimension }};">
                @if($currentUser && $currentUser->avatar)
                    <img src="{{ asset('storage/' . $currentUser->avatar) }}" 
                         alt="{{ $userName }}" 
                         class="rounded-circle"
                         style="width: 100%; height: 100%; object-fit: cover;">
                @else
                    <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center"
                         style="width: 100%; height: 100%; font-size: 0.8rem;">
                        {{ strtoupper(substr($userName, 0, 1)) }}
                    </div>
                @endif
            </div>
        @endif
        
        {{-- Nome Utente --}}
        <span class="d-none d-md-inline">{{ Str::limit($userName, 15) }}</span>
        
        {{-- Icona per mobile --}}
        <i class="fas fa-user d-md-none"></i>
    </button>

    <ul class="dropdown-menu dropdown-menu-end user-dropdown" aria-labelledby="userDropdown">
        {{-- Header con info utente --}}
        <li class="dropdown-header">
            <div class="d-flex align-items-center">
                @if($showAvatar)
                    <div class="user-avatar-large me-3" style="width: 48px; height: 48px;">
                        @if($currentUser && $currentUser->avatar)
                            <img src="{{ asset('storage/' . $currentUser->avatar) }}" 
                                 alt="{{ $userName }}" 
                                 class="rounded-circle"
                                 style="width: 100%; height: 100%; object-fit: cover;">
                        @else
                            <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center"
                                 style="width: 100%; height: 100%; font-size: 1.2rem;">
                                {{ strtoupper(substr($userName, 0, 1)) }}
                            </div>
                        @endif
                    </div>
                @endif
                <div>
                    <div class="fw-bold">{{ $userName }}</div>
                    <div class="text-muted small">{{ $userEmail }}</div>
                    <div class="text-muted smaller">
                        <span class="badge bg-secondary">{{ ucfirst($userRole) }}</span>
                    </div>
                </div>
            </div>
        </li>
        <li><hr class="dropdown-divider"></li>

        {{-- Menu Items --}}
        <li>
            <a class="dropdown-item" href="{{ route('profile.edit') }}">
                <i class="fas fa-user-edit me-2"></i>
                Modifica Profilo
            </a>
        </li>
        
        <li>
            <a class="dropdown-item" href="{{ route('dashboard') }}">
                <i class="fas fa-tachometer-alt me-2"></i>
                Dashboard
            </a>
        </li>

        @if($userRole === 'admin' || $userRole === 'superadmin')
            <li>
                <a class="dropdown-item" href="#" onclick="alert('Sezione impostazioni in sviluppo')">
                    <i class="fas fa-cog me-2"></i>
                    Impostazioni
                </a>
            </li>
        @endif

        <li>
            <a class="dropdown-item" href="#" onclick="alert('Sezione notifiche in sviluppo')">
                <i class="fas fa-bell me-2"></i>
                Notifiche
            </a>
        </li>

        <li>
            <a class="dropdown-item" href="#">
                <i class="fas fa-question-circle me-2"></i>
                Guida
            </a>
        </li>

        <li><hr class="dropdown-divider"></li>

        {{-- Preferenze rapide --}}
        <li>
            <div class="dropdown-item-text">
                <div class="d-flex justify-content-between align-items-center">
                    <span class="small">Modalità Scura</span>
                    <div class="form-check form-switch mb-0">
                        <input class="form-check-input" type="checkbox" id="darkModeSwitch">
                    </div>
                </div>
            </div>
        </li>

        <li><hr class="dropdown-divider"></li>

        {{-- Logout --}}
        <li>
            <form method="POST" action="{{ route('logout') }}" class="d-inline">
                @csrf
                <button type="submit" class="dropdown-item text-danger">
                    <i class="fas fa-sign-out-alt me-2"></i>
                    Logout
                </button>
            </form>
        </li>
    </ul>
</div>

<style>
.user-dropdown {
    min-width: 280px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.dropdown-header {
    padding: 1rem;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.dropdown-item {
    padding: 0.5rem 1rem;
    transition: background-color 0.15s ease-in-out;
}

.dropdown-item:hover {
    background-color: #f8f9fa;
}

.dropdown-item.text-danger:hover {
    background-color: #f8d7da;
    color: #721c24 !important;
}

.dropdown-item-text {
    padding: 0.5rem 1rem;
}

.smaller {
    font-size: 0.75rem;
}

.form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.user-avatar,
.user-avatar-large {
    border: 2px solid #e9ecef;
    transition: border-color 0.15s ease-in-out;
}

.user-avatar:hover,
.user-avatar-large:hover {
    border-color: #0d6efd;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Dark mode toggle
    const darkModeSwitch = document.getElementById('darkModeSwitch');
    
    if (darkModeSwitch) {
        // Leggi preferenza salvata
        const isDarkMode = localStorage.getItem('darkMode') === 'true';
        darkModeSwitch.checked = isDarkMode;
        
        // Applica modalità scura se attiva
        if (isDarkMode) {
            document.body.classList.add('dark-mode');
        }
        
        // Gestisci cambio modalità
        darkModeSwitch.addEventListener('change', function() {
            const isChecked = this.checked;
            localStorage.setItem('darkMode', isChecked);
            
            if (isChecked) {
                document.body.classList.add('dark-mode');
            } else {
                document.body.classList.remove('dark-mode');
            }
        });
    }
});
</script>