@props([
    'isEmbedded' => false,
    'myCommunities' => [],
    'discoverCommunities' => [],
    'categories' => [],
    'connectedUsers' => []
])

{{-- 
    Added 'selectedCategory' to x-data state 
--}}
<div x-data="{ activeHubTab: 'my-communities', showCreateModal: false, selectedCategory: 'All' }">

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

            {{-- Header (Unchanged) --}}
            <div class="flex flex-col md:flex-row md:items-center justify-between mb-8 gap-4">
                <div>
                    <h1 class="text-3xl font-bold text-[#2F3D7E]">Communities</h1>
                    <p class="text-gray-500 mt-1">Connect with peers, compare salaries, and grow together.</p>
                </div>
                
                <button 
                    @click="showCreateModal = true"
                    class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2 bg-[#2F3D7E] hover:bg-[#232d5e] text-white shadow-lg hover:shadow-xl transition-all"
                >
                    <svg class="w-4 h-4 mr-2" 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="M5 12h14"/><path d="M12 5v14"/></svg>
                    Create Community
                </button>
            </div>

            {{-- Main Content --}}
            <div class="w-full">
                <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
                    <div class="bg-white border border-gray-200 p-1 h-auto rounded-xl inline-flex">
                        <button 
                            @click="activeHubTab = 'my-communities'"
                            :class="activeHubTab === 'my-communities' ? 'bg-[#2F3D7E] text-white' : 'text-gray-600 hover:bg-gray-50'"
                            class="rounded-lg px-4 py-2 transition-all text-sm font-medium"
                        >
                            My Communities
                        </button>
                        <button 
                            @click="activeHubTab = 'discover'"
                            :class="activeHubTab === 'discover' ? 'bg-[#2F3D7E] text-white' : 'text-gray-600 hover:bg-gray-50'"
                            class="rounded-lg px-4 py-2 transition-all text-sm font-medium"
                        >
                            Discover
                        </button>
                    </div>

                    <div class="relative w-full md:w-72">
                        <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" 
                            placeholder="Search communities..." 
                            class="w-full pl-10 pr-4 py-2 bg-white border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-[#2F3D7E]/20 focus:border-[#2F3D7E]"
                        >
                    </div>
                </div>

                {{-- My Communities Tab (Unchanged) --}}
                <div x-show="activeHubTab === 'my-communities'" class="mt-0" style="display: none;">
                    @if(isset($myCommunities) && count($myCommunities) > 0)
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                            @foreach($myCommunities as $community)
                                <x-network.community-card :community="$community" />
                            @endforeach

                            <div 
                                @click="activeHubTab = 'discover'"
                                class="bg-white/50 border-2 border-dashed border-gray-200 rounded-xl flex flex-col items-center justify-center p-6 text-center hover:bg-white hover:border-[#2F3D7E]/50 transition-all cursor-pointer group h-full min-h-[280px]"
                            >
                                <div class="w-12 h-12 bg-blue-50 rounded-xl flex items-center justify-center mb-4 group-hover:bg-[#2F3D7E] transition-colors">
                                    <svg class="w-6 h-6 text-[#2F3D7E] group-hover:text-white" 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>
                                </div>
                                <h3 class="font-semibold text-gray-900 mb-1">Find more communities</h3>
                                <p class="text-sm text-gray-500">Browse by role, location, or industry</p>
                            </div>
                        </div>
                    @else
                        <div class="text-center py-20 bg-white rounded-xl border border-gray-200">
                            <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"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                            </div>
                            <h3 class="text-lg font-semibold text-gray-900">No communities yet</h3>
                            <p class="text-gray-500 max-w-sm mx-auto mt-2 mb-6">Join a community to compare salaries with peers in your industry or location.</p>
                            <button 
                                @click="activeHubTab = 'discover'"
                                class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background 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 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 border-gray-200"
                            >
                                Browse Communities
                            </button>
                        </div>
                    @endif
                </div>

                {{-- 
                    ========================================
                    TAB: DISCOVER (UPDATED FILTERING)
                    ========================================
                --}}
                <div x-show="activeHubTab === 'discover'" class="mt-0 space-y-8" style="display: none;">
                    
                    {{-- Category Buttons --}}
                    <div class="flex gap-4 overflow-x-auto pb-2" style="scrollbar-width: none; -ms-overflow-style: none;">
                        {{-- Manually add "All" button first --}}
                        <button 
                            @click="selectedCategory = 'All'"
                            :class="selectedCategory === 'All' ? 'bg-[#2F3D7E] text-white' : 'bg-white border border-gray-200 text-gray-600 hover:bg-gray-50'"
                            class="px-4 py-2 rounded-full text-sm font-medium whitespace-nowrap transition-colors"
                        >
                            All
                        </button>

                        {{-- Loop through dynamic categories --}}
                        @foreach($categories as $cat)
                            <button 
                                @click="selectedCategory = '{{ $cat }}'"
                                :class="selectedCategory === '{{ $cat }}' ? 'bg-[#2F3D7E] text-white' : 'bg-white border border-gray-200 text-gray-600 hover:bg-gray-50'"
                                class="px-4 py-2 rounded-full text-sm font-medium whitespace-nowrap transition-colors"
                            >
                                {{ $cat }}
                            </button>
                        @endforeach
                    </div>

                    {{-- 
                       Discover Grid 
                       Logic: We loop through ALL communities but hide those that don't match the selection.
                    --}}
                    @if(isset($discoverCommunities))
                    <div>
                        <h2 class="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
                            <svg class="w-5 h-5 text-[#2F3D7E]" 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"/><line x1="2" x2="22" y1="12" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
                            Explore Communities
                        </h2>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                            @foreach($discoverCommunities as $community)
                                <div x-show="selectedCategory === 'All' || selectedCategory === '{{ $community->category }}'">
                                    <x-network.community-card :community="$community" />
                                </div>
                            @endforeach
                        </div>
                        
                        {{-- Empty state for filtering --}}
                        <div x-show="$el.previousElementSibling.children.length > 0 && Array.from($el.previousElementSibling.children).every(child => child.style.display === 'none')" class="text-center py-12" style="display: none;">
                            <p class="text-gray-500">No communities found in this category.</p>
                        </div>
                    </div>
                    @endif
                </div>

            </div>
    
    <x-network.create-community-modal :categories="$categories" :connected-users="$connectedUsers"/>

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

</div>