@props(['user'])

<div 
    x-data="{ 
        status: '{{ $user->connectionStatus }}',
        isLoading: false,
        async connect() {
            this.isLoading = true;
            try {
                const response = await fetch('{{ route('network.connect', $user->id) }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                });
                
                if (response.ok) {
                    this.status = 'pending';
                }
            } catch (error) {
                console.error('Connection failed:', error);
            } finally {
                this.isLoading = false;
            }
        }
    }"
    class="bg-white rounded-xl border border-gray-200 p-6 hover:shadow-md transition-shadow h-full flex flex-col"
>
    {{-- Header Section --}}
    <div class="flex justify-between items-start mb-4 w-full">
        <div class="flex gap-3 items-center min-w-0 flex-1 mr-2">
            {{-- Avatar --}}
            <div class="relative flex h-12 w-12 shrink-0 overflow-hidden rounded-full bg-blue-50 text-[#2F3D7E]">
                <div class="flex h-full w-full items-center justify-center rounded-full bg-blue-50 font-bold text-[#2F3D7E]">
                    {{ strtoupper(substr($user->nickname, 0, 2)) }}
                </div>
            </div>
            
            <div class="min-w-0">
                <h3 class="font-bold text-gray-900 text-sm truncate">
                    {{ '@' . $user->nickname }}
                </h3>
                <p class="text-xs text-gray-500 truncate">{{ $user->companyType }}</p>
            </div>
        </div>

        {{-- Dynamic Button based on Alpine 'status' variable --}}
        <div class="shrink-0">
            <template x-if="status === 'connected'">
                <button disabled class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium border border-green-200 text-green-700 bg-green-50 hover:bg-green-100 h-8 px-3 cursor-default">
                    <span class="flex items-center">
                        <svg class="w-3 h-3 mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><polyline points="16 11 18 13 22 9"/></svg>
                        Connected
                    </span>
                </button>
            </template>

            <template x-if="status === 'pending'">
                <button disabled class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium bg-gray-100 text-gray-500 h-8 px-3 cursor-not-allowed">
                    <span class="flex items-center">
                        <svg class="w-3 h-3 mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                        Pending
                    </span>
                </button>
            </template>

            <template x-if="status === 'none'">
                <button 
                    @click="connect()" 
                    :disabled="isLoading"
                    class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-[#2F3D7E] hover:bg-[#232d5e] h-8 px-3 text-white"
                >
                    <span x-show="!isLoading" class="flex items-center">
                        <svg class="w-3 h-3 mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="20" x2="20" y1="8" y2="14"/><line x1="23" x2="17" y1="11" y2="11"/></svg>
                        Connect
                    </span>
                    <span x-show="isLoading" class="flex items-center">
                        <svg class="animate-spin -ml-1 mr-2 h-3 w-3 text-white" 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>
                        Sending...
                    </span>
                </button>
            </template>
        </div>
    </div>

    {{-- Info Section --}}
    <div class="mb-4 flex-1">
        <div class="text-lg font-semibold text-[#2F3D7E] mb-1 truncate">{{ $user->role }}</div>
        <div class="flex items-center gap-4 text-xs text-gray-500">
            <div class="flex items-center gap-1 min-w-0">
                <svg class="w-3 h-3 shrink-0" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>
                <span class="truncate">{{ $user->location }}</span>
            </div>
            <div class="flex items-center gap-1 min-w-0">
                <svg class="w-3 h-3 shrink-0" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="7" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
                <span class="truncate">{{ $user->yoe }}y Exp</span>
            </div>
        </div>
    </div>

    {{-- Salary Section --}}
    <div class="bg-gray-50 rounded-lg p-3 mb-4 flex justify-between items-center mt-auto">
        <span class="text-xs font-medium text-gray-500">Latest Salary</span>
        <span class="text-sm font-bold text-green-600">{{ $user->salary }}</span>
    </div>

    {{-- Tags Section --}}
    <div class="flex flex-wrap gap-2">
        @foreach($user->tags as $tag)
            <div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors bg-white border-gray-100 text-gray-500 font-normal hover:bg-gray-50">
                {{ $tag }}
            </div>
        @endforeach
    </div>
</div>