@props([
    'isEmbedded' => false,
    'discoverUsers' => [],
    'networkUsers' => [],
    'requestUsers' => []
])

{{-- 
    Updated x-data to include 'searchQuery' for client-side filtering 
--}}
<div x-data="{ activeDirTab: 'discover', searchQuery: '' }">

    @if(!$isEmbedded)
    <div class="w-full min-h-screen bg-[#f4f4f4]">
        <div class="max-w-6xl mx-auto px-4 py-8">
    @endif

            {{-- Header --}}
            <div class="mb-8">
                <h1 class="text-3xl font-bold text-[#2F3D7E]">People Directory</h1>
                <p class="text-gray-500 mt-1">Connect with professionals anonymously via nicknames to track salary journeys.</p>
            </div>

            {{-- Tabs Container --}}
            <div class="w-full">
                
                {{-- Tabs List --}}
                <div class="mb-6 bg-white border border-gray-200 p-1 h-auto rounded-xl inline-flex">
                    <button 
                        @click="activeDirTab = 'discover'"
                        :class="activeDirTab === 'discover' ? 'bg-[#2F3D7E] text-white' : 'text-gray-600 hover:bg-gray-50'"
                        class="rounded-lg px-6 py-2 transition-all text-sm font-medium"
                    >
                        Discover
                    </button>

                    <button 
                        @click="activeDirTab = 'network'"
                        :class="activeDirTab === 'network' ? 'bg-[#2F3D7E] text-white' : 'text-gray-600 hover:bg-gray-50'"
                        class="rounded-lg px-6 py-2 transition-all text-sm font-medium"
                    >
                        My Network ({{ isset($networkUsers) ? $networkUsers->count() : 0 }})
                    </button>

                    <button 
                        @click="activeDirTab = 'requests'"
                        :class="activeDirTab === 'requests' ? 'bg-[#2F3D7E] text-white' : 'text-gray-600 hover:bg-gray-50'"
                        class="rounded-lg px-6 py-2 transition-all flex gap-2 items-center text-sm font-medium"
                    >
                        Requests
                        @if(isset($requestUsers) && $requestUsers->count() > 0)
                            <span class="bg-red-500 text-white text-[10px] px-1.5 py-0.5 rounded-full font-bold">
                                {{ $requestUsers->count() }}
                            </span>
                        @endif
                    </button>
                </div>

                {{-- Controls (Search & Filter) --}}
                <div class="flex flex-col md:flex-row gap-4 mb-8">
                    {{-- 
                        CLIENT SIDE SEARCH 
                        Removed <form> tag to prevent page reload.
                        Added x-model="searchQuery".
                    --}}
                    <div class="relative flex-1">
                        <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" 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="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
                        <input 
                            type="text" 
                            x-model="searchQuery"
                            placeholder="Filter by role, location, or skill..." 
                            class="flex h-10 w-full rounded-md border border-gray-200 bg-white px-3 py-2 pl-10 text-sm placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-[#2F3D7E]/20 focus:border-[#2F3D7E]"
                        >
                        {{-- Clear Button --}}
                        <button 
                            x-show="searchQuery.length > 0"
                            @click="searchQuery = ''"
                            class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
                        >
                            <svg class="w-4 h-4" 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="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                        </button>
                    </div>
                    
                    <button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium border border-gray-200 bg-white hover:bg-gray-50 h-10 px-4 py-2 text-gray-600 gap-2">
                        <svg class="w-4 h-4" 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"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
                        Filters
                    </button>
                </div>

                {{-- 
                    ========================================
                    TAB: DISCOVER
                    ========================================
                --}}
                <div x-show="activeDirTab === 'discover'" class="mt-0" style="display: none;">
                    @if(isset($discoverUsers) && count($discoverUsers) > 0)
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                            @foreach($discoverUsers as $user)
                                {{-- 
                                   WRAPPER FOR FILTERING 
                                   data-search contains all text we want to filter by.
                                --}}
                                <div 
                                    x-show="searchQuery === '' || $el.dataset.search.toLowerCase().includes(searchQuery.toLowerCase())"
                                    data-search="{{ $user->nickname }} {{ $user->role }} {{ $user->companyType }} {{ $user->location }} {{ implode(' ', $user->tags) }}"
                                >
                                    <x-network.user-card :user="$user" />
                                </div>
                            @endforeach
                        </div>
                    @else
                         <div class="text-center py-12">
                            <p class="text-gray-500">No users found.</p>
                        </div>
                    @endif
                </div>

                {{-- 
                    ========================================
                    TAB: MY NETWORK
                    ========================================
                --}}
                <div x-show="activeDirTab === 'network'" class="mt-0" style="display: none;">
                    @if(isset($networkUsers) && count($networkUsers) > 0)
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                            @foreach($networkUsers as $user)
                                <div 
                                    x-show="searchQuery === '' || $el.dataset.search.toLowerCase().includes(searchQuery.toLowerCase())"
                                    data-search="{{ $user->nickname }} {{ $user->role }} {{ $user->companyType }} {{ $user->location }} {{ implode(' ', $user->tags) }}"
                                >
                                    <x-network.user-card :user="$user" />
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-20 bg-white rounded-xl border border-gray-200">
                            {{-- ... Empty State content ... --}}
                            <div class="w-16 h-16 bg-gray-100 rounded-xl flex items-center justify-center mx-auto mb-4">
                                <svg class="w-8 h-8 text-gray-400" 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>
                            </div>
                            <h3 class="text-lg font-semibold text-gray-900">No connections yet</h3>
                            <button @click="activeDirTab = 'discover'" class="mt-4 text-[#2F3D7E] font-medium hover:underline">Discover People</button>
                        </div>
                    @endif
                </div>

                {{-- 
                    ========================================
                    TAB: REQUESTS
                    ========================================
                --}}
                <div x-show="activeDirTab === 'requests'" class="mt-0" style="display: none;">
                    @if(isset($requestUsers) && count($requestUsers) > 0)
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                            @foreach($requestUsers as $user)
                                <div 
                                    x-show="searchQuery === '' || $el.dataset.search.toLowerCase().includes(searchQuery.toLowerCase())"
                                    data-search="{{ $user->nickname }} {{ $user->role }} {{ $user->location }}"
                                >
                                    <x-network.request-card :user="$user" />
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-20 bg-white rounded-xl border border-gray-200">
                             {{-- ... Empty State content ... --}}
                             <h3 class="text-lg font-semibold text-gray-900">No pending requests</h3>
                        </div>
                    @endif
                </div>

            </div>

    @if(!$isEmbedded)
        </div>
    </div>
    @endif

</div>