@extends('layouts.marketing')

@section('title', 'Healthcare Worker Connect Network – CuraHealthLine')

@php
    $connectionsCount = auth()->check() ? (auth()->user()->nurseProfile?->connections()->count() ?? 0) : 0;
    $countriesCount = $nurses->pluck('nurseProfile.country')->filter()->unique()->count();
    $specialtiesCount = $nurses->pluck('nurseProfile.primary_specialty')->filter()->unique()->count();
    $weeklyNew = rand(3, 12);
    $weeklyMessages = rand(1, 8);
    $postEngagement = rand(5, 25);
@endphp

@section('content')
    <x-marketing-nav />

    <div class="min-h-screen bg-gradient-to-br from-soft via-white to-brand/5" style="padding-top: 80px;">
        <div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8 space-y-6">
            <!-- Hero strip -->
            <div class="rounded-2xl bg-white shadow-sm ring-1 ring-slate-200 px-5 py-4 flex flex-wrap items-center gap-3">
                <div>
                    <p class="text-xs font-semibold uppercase tracking-wide text-brand">Healthcare Worker Connect</p>
                    <h1 class="text-xl font-bold text-ink">A global network for healthcare workers to connect, share, learn, and support one another.</h1>
                </div>
                <div class="ml-auto flex items-center gap-3 text-sm text-slate-600">
                    <span class="rounded-full bg-brand/10 px-3 py-1 font-semibold text-brand">{{ $nurses->total() }} healthcare workers</span>
                </div>
            </div>

            <!-- Top search bar -->
            <form action="{{ route('user.directory') }}" method="GET" class="rounded-2xl border border-slate-200 bg-white shadow-sm px-4 py-3 flex flex-col gap-3 md:flex-row md:items-center">
                <div class="flex-1 flex flex-col md:flex-row gap-2">
                    <input
                        type="text"
                        name="search"
                        value="{{ request('search') }}"
                        placeholder="Search healthcare workers by name or specialty"
                        class="w-full rounded-xl border border-slate-200 px-4 py-2 text-sm text-ink placeholder:text-slate-400 focus:border-brand focus:ring-brand"
                    />
                    <input
                        type="text"
                        name="country"
                        value="{{ request('country') }}"
                        placeholder="Country"
                        class="w-full md:w-48 rounded-xl border border-slate-200 px-4 py-2 text-sm text-ink placeholder:text-slate-400 focus:border-brand focus:ring-brand"
                    />
                    <input
                        type="text"
                        name="specialty"
                        value="{{ request('specialty') }}"
                        placeholder="Specialty"
                        class="w-full md:w-48 rounded-xl border border-slate-200 px-4 py-2 text-sm text-ink placeholder:text-slate-400 focus:border-brand focus:ring-brand"
                    />
                </div>
                <div class="flex items-center gap-2">
                    <button type="submit" class="rounded-xl bg-brand px-5 py-2 text-sm font-semibold text-white shadow hover:-translate-y-0.5 transition">
                        Search
                    </button>
                    <a href="{{ route('user.directory') }}" class="text-sm font-semibold text-slate-600 hover:text-brand">
                        Reset
                    </a>
                </div>
            </form>

            <!-- 3 column layout -->
            <div class="grid gap-5 lg:grid-cols-[0.8fr_1.6fr_0.9fr] items-start">
                <!-- LEFT: navigation / filters -->
                <aside class="space-y-4">
                    <div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
                        <button class="w-full rounded-full bg-brand px-4 py-2 text-sm font-semibold text-white shadow hover:-translate-y-0.5 transition">
                            ✏️ Create Post
                        </button>
                    </div>
                    <div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm space-y-3">
                        <h3 class="text-sm font-semibold text-ink">Filters</h3>
                        <div class="space-y-2 text-sm">
                            <a href="{{ route('user.directory') }}" class="flex items-center justify-between rounded-lg px-3 py-2 hover:bg-soft hover:text-brand transition {{ !request()->anyFilled(['filter']) ? 'bg-brand/10 text-brand' : '' }}">All Posts</a>
                            <a href="#" class="flex items-center justify-between rounded-lg px-3 py-2 hover:bg-soft hover:text-brand transition">My Network</a>
                            <a href="#" class="flex items-center justify-between rounded-lg px-3 py-2 hover:bg-soft hover:text-brand transition">My Posts</a>
                        </div>
                        <form action="{{ route('user.directory') }}" method="GET" class="space-y-2">
                            <input type="text" name="search" value="{{ request('search') }}" placeholder="Search name or specialty" class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm focus:border-brand focus:ring-brand">
                            <select name="country" class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm focus:border-brand focus:ring-brand">
                                <option value="">Country</option>
                                @foreach($countries as $country)
                                    <option value="{{ $country }}" {{ request('country') == $country ? 'selected' : '' }}>{{ $country }}</option>
                                @endforeach
                            </select>
                            <select name="specialty" class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm focus:border-brand focus:ring-brand">
                                <option value="">Specialty</option>
                                @foreach($specialties as $specialty)
                                    <option value="{{ $specialty }}" {{ request('specialty') == $specialty ? 'selected' : '' }}>{{ $specialty }}</option>
                                @endforeach
                            </select>
                            <div class="flex flex-wrap gap-2 text-[11px] font-semibold">
                                <span class="rounded-full bg-slate-100 px-3 py-1 text-slate-600">NCLEX</span>
                                <span class="rounded-full bg-slate-100 px-3 py-1 text-slate-600">IELTS</span>
                                <span class="rounded-full bg-slate-100 px-3 py-1 text-slate-600">OET</span>
                            </div>
                            <button class="w-full rounded-lg bg-brand px-4 py-2 text-sm font-semibold text-white hover:-translate-y-0.5 transition">Apply filters</button>
                        </form>
                    </div>
                    <div class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
                        <h3 class="text-sm font-semibold text-ink mb-2">Browse Healthcare Workers</h3>
                        <a href="{{ route('user.directory') }}" class="inline-flex w-full items-center justify-center gap-2 rounded-full bg-teal px-4 py-2 text-sm font-semibold text-white shadow hover:-translate-y-0.5 transition">
                            👩‍⚕️ Browse International Healthcare Workers
                        </a>
                    </div>
                </aside>

                <!-- CENTER: composer + feed + people -->
                <main class="space-y-4">
                    <!-- Post composer -->
                    <section class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
                        <div class="flex gap-3">
                            @auth
                                <img src="{{ auth()->user()->displayAvatarUrl() }}" alt="{{ auth()->user()->name }}" class="h-10 w-10 rounded-full object-cover border border-slate-200" width="40" height="40" loading="lazy" decoding="async">
                            @else
                                <div class="h-10 w-10 rounded-full bg-slate-200 flex items-center justify-center text-slate-500 text-sm font-semibold">?</div>
                            @endauth
                            <div class="flex-1 space-y-2">
                                <textarea rows="2" placeholder="Share your thoughts or ask a question…" class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm text-ink placeholder:text-slate-400 focus:border-brand focus:ring-brand"></textarea>
                                <div class="flex flex-wrap items-center gap-2">
                                    <button class="rounded-full bg-soft px-3 py-1.5 text-xs font-semibold text-slate-700 hover:bg-slate-200 transition">Attach image</button>
                                    <div class="flex flex-wrap gap-2">
                                        @foreach($categoryOptions as $cat)
                                            <label class="cursor-pointer inline-flex items-center gap-1 rounded-full px-3 py-1 text-[11px] font-semibold border border-slate-200 text-slate-600 hover:border-brand hover:text-brand">
                                                <input type="radio" name="post_category" value="{{ $cat }}" class="sr-only">
                                                <span>{{ $cat }}</span>
                                            </label>
                                        @endforeach
                                    </div>
                                    <button class="ml-auto rounded-full bg-brand px-4 py-1.5 text-xs font-semibold text-white shadow hover:-translate-y-0.5 transition">Post</button>
                                </div>
                            </div>
                        </div>
                    </section>

                    <!-- Feed -->
                    <section class="space-y-3">
                        @foreach($feedPosts as $idx => $post)
                            @php $profile = $post['user']->nurseProfile ?? null; @endphp
                            <article class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
                                <div class="flex items-center gap-3">
                                    @if(optional($profile)->avatar_url)
                                        <img src="{{ $post['user']->displayAvatarUrl() }}" class="h-10 w-10 rounded-full object-cover border border-slate-200" alt="{{ $post['user']->name }}" width="40" height="40" loading="lazy" decoding="async">
                                    @else
                                        <div class="h-10 w-10 rounded-full bg-brand text-white flex items-center justify-center text-sm font-semibold">
                                            {{ substr($post['user']->name, 0, 1) }}
                                        </div>
                                    @endif
                                    <div class="flex-1 min-w-0">
                                        <div class="flex flex-wrap items-center gap-2 text-xs text-slate-500">
                                            <span class="font-semibold text-slate-900">{{ $post['user']->name }}</span>
                                            @if(optional($profile)->country)
                                                <span>• {{ $profile->country }}</span>
                                            @endif
                                            @if(optional($profile)->years_experience)
                                                <span>• {{ $profile->years_experience }} yrs exp</span>
                                            @endif
                                            <span>• {{ $post['time'] }} ago</span>
                                        </div>
                                        <p class="mt-1 text-sm text-slate-800">{{ Str::limit($post['content'], 300) }}</p>
                                        <div class="mt-2 flex flex-wrap items-center gap-2 text-[11px]">
                                            <span class="rounded-full bg-slate-100 px-2 py-1 font-semibold text-slate-600">{{ optional($profile)->primary_specialty ?? 'Nursing' }}</span>
                                            <span class="rounded-full bg-teal/10 px-2 py-1 font-semibold text-teal-700">{{ $post['category'] ?? 'Discussion' }}</span>
                                        </div>
                                        <div class="mt-3 flex items-center gap-4 text-xs text-slate-500">
                                            <button class="flex items-center gap-1 hover:text-brand transition">
                                                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
                                                </svg>
                                                Like
                                            </button>
                                            <button class="flex items-center gap-1 hover:text-brand transition" onclick="toggleReply('reply-{{ $idx }}')">
                                                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
                                                </svg>
                                                Comment
                                            </button>
                                        </div>
                                        <div id="reply-{{ $idx }}" class="hidden mt-2">
                                            <textarea rows="2" class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm text-ink placeholder:text-slate-400 focus:border-brand focus:ring-brand" placeholder="Add a comment"></textarea>
                                            <div class="mt-2 flex justify-end gap-2">
                                                <button onclick="toggleReply('reply-{{ $idx }}')" class="rounded-full px-3 py-1.5 text-xs font-semibold text-slate-600 hover:bg-slate-100 transition">Cancel</button>
                                                <button class="rounded-full bg-brand px-4 py-1.5 text-xs font-semibold text-white shadow hover:-translate-y-0.5 transition">Post</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </article>
                        @endforeach
                    </section>

                    <!-- People listing -->
                    <section class="space-y-3">
                        <div class="flex items-center justify-between">
                            <h3 class="text-sm font-semibold text-ink">People Discovery</h3>
                            <div class="text-xs text-slate-500">{{ $nurses->firstItem() ?? 0 }}-{{ $nurses->lastItem() ?? 0 }} of {{ $nurses->total() }}</div>
                        </div>
                        <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
                            @foreach($nurses as $nurse)
                                @php
                                    $profile = $nurse->nurseProfile;
                                    $years = $profile->years_experience ?? $profile->experience_years ?? null;
                                @endphp
                                <div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm hover:-translate-y-1 hover:shadow-[0_18px_30px_rgba(29,91,191,0.08)] transition">
                                    <div class="flex items-start gap-3">
                                        @if(optional($profile)->avatar_url)
                                            <img src="{{ $nurse->displayAvatarUrl() }}" alt="{{ $nurse->name }}" class="h-12 w-12 rounded-full object-cover border border-slate-200" width="48" height="48" loading="lazy" decoding="async">
                                        @else
                                            <div class="h-12 w-12 rounded-full bg-gradient-to-br from-brand to-teal flex items-center justify-center text-white text-sm font-semibold">
                                                {{ substr($nurse->name, 0, 1) }}
                                            </div>
                                        @endif
                                        <div class="flex-1">
                                            <h3 class="text-sm font-semibold text-slate-900">{{ $nurse->name }}</h3>
                                            <p class="text-xs text-slate-500">{{ optional($profile)->headline ?? '@' . Str::slug($nurse->name, '') }}</p>
                                            <div class="mt-1 flex flex-wrap gap-2 text-[11px]">
                                                @if(optional($profile)->primary_specialty)
                                                    <span class="rounded-full bg-brand/10 px-2 py-1 font-semibold text-brand">
                                                        {{ Str::limit($profile->primary_specialty, 18) }}
                                                    </span>
                                                @endif
                                                @if(optional($profile)->country)
                                                    <span class="rounded-full bg-slate-100 px-2 py-1 font-semibold text-slate-600">
                                                        {{ $profile->city ? $profile->city . ', ' : '' }}{{ $profile->country }}
                                                    </span>
                                                @endif
                                            </div>
                                            <div class="mt-2 grid grid-cols-2 gap-2 text-xs text-slate-600">
                                                <span class="flex items-center gap-1.5">
                                                    <svg class="h-4 w-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                                                    </svg>
                                                    {{ $years ? $years . ' yrs' : 'Experience n/a' }}
                                                </span>
                                                <span class="flex items-center gap-1.5">
                                                    <svg class="h-4 w-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                                    </svg>
                                                    {{ optional($profile)->nclex_status ? ucfirst($profile->nclex_status) : 'NCLEX n/a' }}
                                                </span>
                                            </div>
                                            <div class="mt-2 flex flex-wrap gap-2 text-[11px] font-semibold">
                                                @if(optional($profile)->willing_to_relocate)
                                                    <span class="rounded-full bg-teal/10 px-2 py-1 text-teal">Relocation OK</span>
                                                @endif
                                                @if(optional($profile)->visa_needed)
                                                    <span class="rounded-full bg-slate-100 px-2 py-1 text-slate-600">Needs Visa</span>
                                                @endif
                                            </div>
                                            <div class="mt-3 flex items-center gap-2">
                                                @php $canConnect = auth()->check() && in_array(auth()->user()->role, ['nurse', 'user']) && auth()->id() !== $nurse->id; @endphp
                                                @auth
                                                    @if($canConnect)
                                                        <form method="POST" action="{{ route('connections.store') }}" class="flex-1">
                                                            @csrf
                                                            <input type="hidden" name="recipient_id" value="{{ $nurse->id }}">
                                                            <button type="submit" class="w-full rounded-lg bg-brand px-3 py-2 text-xs font-semibold text-white shadow hover:-translate-y-0.5 transition">Connect</button>
                                                        </form>
                                                    @else
                                                        <span class="flex-1 rounded-lg bg-slate-200 px-3 py-2 text-xs font-semibold text-slate-600 text-center">
                                                            {{ auth()->id() === $nurse->id ? 'Your profile' : 'Login as nurse to connect' }}
                                                        </span>
                                                    @endif
                                                @else
                                                    <a href="{{ route('register', ['role' => 'nurse']) }}" class="flex-1 text-center rounded-lg bg-brand px-3 py-2 text-xs font-semibold text-white shadow hover:-translate-y-0.5 transition">Connect</a>
                                                @endauth
                                                <span class="rounded-lg border border-slate-200 px-3 py-2 text-xs font-semibold text-slate-700">View</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        @if($nurses->hasPages())
                            <div class="mt-4">
                                {{ $nurses->links() }}
                            </div>
                        @endif
                    </section>
                </main>

                <!-- RIGHT: analytics + suggestions -->
                <aside class="space-y-4">
                    <section class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
                        <h3 class="mb-3 text-sm font-semibold text-ink">Network Analytics</h3>
                        <div class="space-y-3 text-sm text-slate-700">
                            <div class="flex items-center justify-between">
                                <span>Connections</span>
                                <span class="font-semibold text-ink"> {{ $connectionsCount }} </span>
                            </div>
                            <div class="flex items-center justify-between">
                                <span>Countries connected</span>
                                <span class="font-semibold text-ink"> {{ $countriesCount }} </span>
                            </div>
                            <div class="flex items-center justify-between">
                                <span>Specialties connected</span>
                                <span class="font-semibold text-ink"> {{ $specialtiesCount }} </span>
                            </div>
                            <div class="rounded-lg bg-slate-50 px-3 py-2 text-xs text-slate-600">
                                <div class="font-semibold text-ink">This week</div>
                                <div>+{{ $weeklyNew }} new connections</div>
                                <div>+{{ $weeklyMessages }} new messages</div>
                                <div>Your posts earned {{ $postEngagement }} likes</div>
                            </div>
                        </div>
                    </section>

                    <section class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
                        <div class="mb-3 flex items-center justify-between">
                            <h3 class="text-sm font-semibold text-ink">Suggestions</h3>
                        </div>
                        <div class="space-y-3">
                            @foreach($suggested as $suggest)
                                <div class="flex items-center justify-between rounded-lg border border-slate-100 px-3 py-2">
                                    <div class="flex items-center gap-2">
                                        <img src="{{ $suggest->displayAvatarUrl() }}" class="h-8 w-8 rounded-full object-cover" alt="{{ $suggest->name }}" width="32" height="32" loading="lazy" decoding="async">
                                        <div class="text-xs">
                                            <div class="font-semibold text-slate-900">{{ $suggest->name }}</div>
                                            <div class="text-slate-500">{{ optional($suggest->nurseProfile)->primary_specialty ?? 'Healthcare Professional' }}</div>
                                        </div>
                                    </div>
                                    @php $canConnect = auth()->check() && in_array(auth()->user()->role, ['nurse', 'user']) && auth()->id() !== ($suggest->id ?? null); @endphp
                                    @auth
                                        @if($canConnect)
                                            <form method="POST" action="{{ route('connections.store') }}">
                                                @csrf
                                                <input type="hidden" name="recipient_id" value="{{ $suggest->id }}">
                                                <button class="rounded-full bg-brand px-3 py-1 text-[11px] font-semibold text-white hover:-translate-y-0.5 transition">
                                                    Connect
                                                </button>
                                            </form>
                                        @else
                                            <span class="rounded-full bg-slate-200 px-3 py-1 text-[11px] font-semibold text-slate-600">
                                                {{ auth()->id() === ($suggest->id ?? null) ? 'Your profile' : 'Login as nurse to connect' }}
                                            </span>
                                        @endif
                                    @else
                                        <a href="{{ route('register', ['role' => 'nurse']) }}" class="rounded-full bg-brand px-3 py-1 text-[11px] font-semibold text-white hover:-translate-y-0.5 transition">
                                            Connect
                                        </a>
                                    @endauth
                                </div>
                            @endforeach
                        </div>
                    </section>

                    <section class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
                        <h3 class="mb-3 text-sm font-semibold text-ink">Rising Profiles</h3>
                        <div class="space-y-2 text-sm text-slate-700">
                            @foreach($nurses->take(3) as $nurse)
                                <div class="flex items-center justify-between rounded-lg border border-slate-100 px-3 py-2">
                                    <div class="flex items-center gap-2">
                                        <div class="h-8 w-8 rounded-full bg-brand/10 text-brand flex items-center justify-center text-xs font-semibold">
                                            {{ substr($nurse->name, 0, 1) }}
                                        </div>
                                        <div class="text-xs">
                                            <div class="font-semibold text-ink">{{ $nurse->name }}</div>
                                            <div class="text-slate-500">{{ optional($nurse->nurseProfile)->primary_specialty ?? 'Healthcare Professional' }}</div>
                                        </div>
                                    </div>
                                    @php $canConnect = auth()->check() && in_array(auth()->user()->role, ['nurse', 'user']) && auth()->id() !== ($nurse->id ?? null); @endphp
                                    @auth
                                        @if($canConnect)
                                            <form method="POST" action="{{ route('connections.store') }}">
                                                @csrf
                                                <input type="hidden" name="recipient_id" value="{{ $nurse->id }}">
                                                <button class="rounded-full bg-brand px-3 py-1 text-[11px] font-semibold text-white hover:-translate-y-0.5 transition">
                                                    Connect
                                                </button>
                                            </form>
                                        @else
                                            <span class="rounded-full bg-slate-200 px-2 py-1 text-[11px] font-semibold text-slate-600">
                                                {{ auth()->id() === ($nurse->id ?? null) ? 'Your profile' : 'Login as nurse to connect' }}
                                            </span>
                                        @endif
                                    @else
                                        <a href="{{ route('register', ['role' => 'nurse']) }}" class="rounded-full bg-brand px-3 py-1 text-[11px] font-semibold text-white hover:-translate-y-0.5 transition">
                                            Connect
                                        </a>
                                    @endauth
                                </div>
                            @endforeach
                        </div>
                    </section>
                </aside>
            </div>
        </div>
    </div>

    <script>
        function toggleReply(id) {
            const el = document.getElementById(id);
            if (el) el.classList.toggle('hidden');
        }
    </script>
@endsection