@props([
    'user',
    'size'  => 36,
    'class' => '',
])

@php
    $fontSize = max(10, (int)($size * 0.38));

    // --- Resolve photo URL robustly ---
    $photoUrl = null;
    $avatarPath = null;

    // Support both Eloquent models (avatar_path) and plain objects (photo_path fallback)
    if (isset($user->avatar_path) && $user->avatar_path) {
        $avatarPath = $user->avatar_path;
    } elseif (isset($user->photo_path) && $user->photo_path) {
        $avatarPath = $user->photo_path;
    }

    if ($avatarPath) {
        // Strip leading slash or 'storage/' prefix if accidentally stored with it
        $cleanPath = ltrim(str_replace('storage/', '', $avatarPath), '/');

        // Check if file physically exists in storage/app/public/
        $fullPath = storage_path('app/public/' . $cleanPath);

        if (file_exists($fullPath)) {
            // Build URL manually so it works even if storage:link is broken
            // Uses asset() which respects APP_URL correctly
            $photoUrl = asset('storage/' . $cleanPath);
        }
    }

    $hasPhoto = $photoUrl !== null;

    // --- Resolve initials ---
    $name = '';
    if (isset($user->name))        $name = $user->name;
    elseif (isset($user->full_name)) $name = $user->full_name;

    if (isset($user->initials) && $user->initials) {
        $initials = $user->initials;
    } else {
        $parts    = array_filter(explode(' ', trim($name)));
        $first    = strtoupper(substr($parts[0] ?? 'U', 0, 1));
        $last     = strtoupper(substr(end($parts) ?? '', 0, 1));
        $initials = $first . ($first !== $last ? $last : '');
    }

    // --- Deterministic colour from name ---
    $colours = ['#1a6b3c','#1565c0','#6a1b9a','#c62828','#e65100','#2e7d32','#00695c','#4527a0'];
    $bg      = $colours[abs(crc32($name ?: 'user')) % count($colours)];
@endphp

<div class="mcss-avatar {{ $class }}"
     style="width:{{ $size }}px; height:{{ $size }}px; border-radius:50%;
            flex-shrink:0; overflow:hidden; display:inline-flex;
            align-items:center; justify-content:center;
            background:{{ $hasPhoto ? '#e0e0e0' : $bg }};">

    @if($hasPhoto)
        <img src="{{ $photoUrl }}"
             alt="{{ $name }}"
             style="width:100%; height:100%; object-fit:cover; display:block;"
             onerror="
                this.style.display='none';
                this.nextElementSibling.style.display='flex';
             ">
        <span style="display:none; width:100%; height:100%;
                     align-items:center; justify-content:center;
                     background:{{ $bg }}; color:#fff;
                     font-size:{{ $fontSize }}px; font-weight:700;">
            {{ $initials }}
        </span>
    @else
        <span style="color:#fff; font-size:{{ $fontSize }}px;
                     font-weight:700; line-height:1; user-select:none;">
            {{ $initials }}
        </span>
    @endif
</div>