@props(['user' => null])

@php
    $user = $user ?? auth()->user();
    $role = $user?->role ?? 'guest';
    
    // Get role display info
    $roleInfo = match($role) {
        'expectant_mother' => [
            'icon' => 'fas fa-user-nurse',
            'label' => 'Expectant Mother',
            'color' => '#850E35',
            'bgGradient' => 'linear-gradient(135deg, #FFF0F5 0%, #FFE4EC 100%)',
            'borderColor' => '#850E35'
        ],
        'nurse' => [
            'icon' => 'fas fa-user-md',
            'label' => 'Nurse',
            'color' => '#CD7A98',
            'bgGradient' => 'linear-gradient(135deg, #F5E6ED 0%, #E8C4D4 100%)',
            'borderColor' => '#CD7A98'
        ],
        'head_nurse' => [
            'icon' => 'fas fa-user-shield',
            'label' => 'Head Nurse',
            'color' => '#5E4075',
            'bgGradient' => 'linear-gradient(135deg, #F3F0F7 0%, #E8E0F0 100%)',
            'borderColor' => '#7B5BA1'
        ],
        'clinic_admin' => [
            'icon' => 'fas fa-user-tie',
            'label' => 'Clinic Admin',
            'color' => '#654133',
            'bgGradient' => 'linear-gradient(135deg, #F5F0ED 0%, #EBE0D8 100%)',
            'borderColor' => '#654133'
        ],
        default => [
            'icon' => 'fas fa-user',
            'label' => 'User',
            'color' => '#4A5568',
            'bgGradient' => 'linear-gradient(135deg, #F7FAFC 0%, #EDF2F7 100%)',
            'borderColor' => '#CBD5E0'
        ]
    };
    
    // Get user's full name
    $fullName = match($role) {
        'expectant_mother' => $user->expectantMother->mother_full_name ?? $user->name,
        default => $user->name
    };
    
    // Get last login time
    $lastLogin = $user->last_login_at 
        ? $user->last_login_at->timezone('Asia/Kuala_Lumpur')->format('F j, Y \a\t g:i A')
        : 'First time login';
@endphp

<!-- Welcome Card Component -->
<div class="bg-white rounded-2xl shadow-lg p-8 mb-8 border-2 transition-all duration-300 hover:shadow-xl"
     style="border-color: {{ $roleInfo['borderColor'] }};">
    <div class="flex items-center justify-between">
        <!-- Left Side: Welcome Message -->
        <div class="flex-1">
            <div class="flex items-center mb-3">
                <div class="w-1 h-16 rounded-full mr-4"
                     style="background: {{ $roleInfo['bgGradient'] }}; border: 2px solid {{ $roleInfo['borderColor'] }};"></div>
                <div>
                    <h1 class="text-3xl font-bold text-gray-900 mb-1">
                        👋 Welcome back, {{ $fullName }}!
                    </h1>
                    <p class="text-gray-600 text-lg">
                        Continue your journey with BondaCare
                    </p>
                </div>
            </div>
        </div>

        <!-- Right Side: Role & Login Info -->
        <div class="text-right ml-6">
            <div class="rounded-2xl p-6 border-2 shadow-md"
                 style="background: {{ $roleInfo['bgGradient'] }}; border-color: {{ $roleInfo['borderColor'] }};">
                <!-- Role Badge -->
                <div class="flex items-center justify-end gap-2 mb-3">
                    <div class="w-10 h-10 rounded-full flex items-center justify-center shadow-sm"
                         style="background-color: {{ $roleInfo['color'] }};">
                        <i class="{{ $roleInfo['icon'] }} text-white text-lg"></i>
                    </div>
                    <div class="text-left">
                        <p class="text-xs font-medium text-gray-600">Logged in as</p>
                        <p class="text-sm font-bold" style="color: {{ $roleInfo['color'] }};">
                            {{ $roleInfo['label'] }}
                        </p>
                    </div>
                </div>

                <!-- Last Login -->
                <div class="pt-3 border-t" style="border-color: {{ $roleInfo['borderColor'] }};">
                    <div class="flex items-center justify-end gap-2 text-sm">
                        <i class="far fa-clock" style="color: {{ $roleInfo['color'] }};"></i>
                        <div class="text-left">
                            <p class="text-xs text-gray-600">Last login</p>
                            <p class="font-semibold text-gray-800">{{ $lastLogin }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>