@extends('admin.layout')
@section('title', 'Gebruikers')

@section('content')

@php
    $sortLink = function(string $column, string $label) use ($sort, $dir): string {
        $newDir = ($sort === $column && $dir === 'asc') ? 'desc' : 'asc';
        $arrow  = $sort === $column ? '<span class="text-[10px] opacity-60">' . ($dir === 'asc' ? '↑' : '↓') . '</span>' : '';
        $url    = route('admin.users.index', array_merge(request()->query(), ['sort' => $column, 'dir' => $newDir]));
        return '<a href="' . $url . '" class="inline-flex items-center gap-0.5 hover:text-gray-700 transition">' . $label . $arrow . '</a>';
    };

    $icoHeartOut  = '<span class="text-sm leading-none">👍</span>';
    $icoHeartFill = '<span class="text-sm leading-none">👀</span>';
    $icoMatch     = '<span class="text-sm leading-none">🔗</span>';
@endphp

{{-- Filters --}}
<form method="GET" action="{{ route('admin.users.index') }}"
      class="bg-white rounded-lg border border-gray-100 p-4 mb-4 flex flex-wrap gap-3 items-end">

    <div class="flex-1 min-w-40">
        <label class="block text-xs text-gray-500 mb-1">Zoeken</label>
        <input type="text" name="q" value="{{ request('q') }}" placeholder="Naam of e-mail…"
               class="w-full text-sm border border-gray-200 rounded-lg px-3 py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-400">
    </div>

    <div>
        <label class="block text-xs text-gray-500 mb-1">Rol</label>
        <select name="role" class="text-sm border border-gray-200 rounded-lg py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-400">
            <option value="">Alle rollen</option>
            @foreach (\App\Enums\Role::cases() as $role)
                <option value="{{ $role->value }}" @selected(request('role') === $role->value)>
                    {{ ucfirst($role->value) }}
                </option>
            @endforeach
        </select>
    </div>

    <div>
        <label class="block text-xs text-gray-500 mb-1">Premium</label>
        <select name="premium" class="text-sm border border-gray-200 rounded-lg py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-400">
            <option value="">Alle</option>
            <option value="pro" @selected(request('premium') === 'pro')>PRO</option>
            <option value="org" @selected(request('premium') === 'org')>ORG</option>
            <option value="1" @selected(request('premium') === '1')>Premium</option>
            <option value="0" @selected(request('premium') === '0')>Gratis</option>
        </select>
    </div>

    <div>
        <label class="block text-xs text-gray-500 mb-1">Zichtbaar</label>
        <select name="visible" class="text-sm border border-gray-200 rounded-lg py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-400">
            <option value="">Alle</option>
            <option value="1" @selected(request('visible') === '1')>✓ Zichtbaar</option>
            <option value="incomplete" @selected(request('visible') === 'incomplete')>⚠ Onvolledig</option>
            <option value="0" @selected(request('visible') === '0')>✕ Verborgen</option>
            <option value="none" @selected(request('visible') === 'none')>— Geen profiel</option>
        </select>
    </div>

    <div>
        <label class="block text-xs text-gray-500 mb-1">Type</label>
        <select name="type" class="text-sm border border-gray-200 rounded-lg py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-400">
            <option value="">Alle types</option>
            <option value="self" @selected(request('type') === 'self')>👤 Zichzelf</option>
            <option value="parent" @selected(request('type') === 'parent')>👶 Ouder</option>
            <option value="partner" @selected(request('type') === 'partner')>💍 Partner</option>
            <option value="pro" @selected(request('type') === 'pro')>💼 Zorgprofessional</option>
        </select>
    </div>

    <div>
        <label class="block text-xs text-gray-500 mb-1">Geslacht</label>
        <select name="gender" class="text-sm border border-gray-200 rounded-lg py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-400">
            <option value="">Alle</option>
            <option value="male"   @selected(request('gender') === 'male')>♂ Man</option>
            <option value="female" @selected(request('gender') === 'female')>♀ Vrouw</option>
            <option value="other"  @selected(request('gender') === 'other')>⚧ Anders</option>
        </select>
    </div>

    <div class="flex items-center gap-2 pb-1">
        <input type="checkbox" name="suspended" value="1" id="suspended"
               @checked(request('suspended') === '1')
               class="rounded border-gray-300 text-red-500 focus:ring-red-400">
        <label for="suspended" class="text-sm text-gray-600">Alleen geschorst</label>
    </div>

    <button type="submit"
            class="px-4 py-1.5 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition">
        Filteren
    </button>
    <a href="{{ route('admin.users.index') }}"
       class="px-4 py-1.5 border border-gray-200 text-gray-500 text-sm rounded-lg hover:bg-gray-50 transition">
        Reset
    </a>
    <a href="{{ route('admin.users.export-csv', request()->query()) }}"
       class="px-4 py-1.5 border border-gray-200 text-gray-500 text-sm rounded-lg hover:bg-gray-50 transition flex items-center gap-1.5">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
        </svg>
        CSV
    </a>
</form>

{{-- Table --}}
<div class="bg-white rounded-lg border border-gray-100 overflow-hidden">
    <div class="px-4 py-3 border-b border-gray-100">
        <span class="text-sm text-gray-500">{{ $users->total() }} gebruiker(s) gevonden</span>
    </div>

    {{-- Mobile sort bar --}}
    <div class="cards-mobile px-4 py-2 border-b border-gray-100">
        <form method="GET" action="{{ route('admin.users.index') }}" class="flex items-center gap-2">
            @foreach (request()->except(['sort', 'dir']) as $k => $v)
                <input type="hidden" name="{{ $k }}" value="{{ $v }}">
            @endforeach
            <span class="text-[11px] text-gray-400 shrink-0">Sorteer:</span>
            <select name="sort" onchange="this.form.submit()"
                    class="flex-1 text-xs border border-gray-200 rounded-lg px-2 py-1 text-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-400">
                @foreach ([
                    'name'                 => 'Naam',
                    'created_at'           => 'Nieuwste',
                    'last_active_at'       => 'Laatste activiteit',
                    'plan_rank'            => 'Plan',
                    'profile_visibility_rank' => 'Zichtbaar',
                    'profile_completeness' => 'Profiel',
                    'likes_count'          => 'Likes gegeven',
                    'liked_by_count'       => 'Likes ontvangen',
                    'matches_count'        => 'Matches',
                    'conversations_count'  => 'Gesprekken',
                ] as $col => $label)
                    <option value="{{ $col }}" @selected($sort === $col)>{{ $label }}</option>
                @endforeach
            </select>
            <a href="{{ route('admin.users.index', array_merge(request()->query(), ['sort' => $sort, 'dir' => $dir === 'asc' ? 'desc' : 'asc'])) }}"
               class="px-2 py-1 text-sm border border-gray-200 rounded-lg text-gray-500 hover:bg-gray-50 transition leading-none">
                {{ $dir === 'asc' ? '↑' : '↓' }}
            </a>
        </form>
    </div>

    {{-- Mobile card list --}}
    <ul class="divide-y divide-gray-50 cards-mobile">
        @forelse ($users as $user)
            @php
                $ms       = (int) ($user->profile_completeness ?? 0);
                $mc       = $ms >= 9 ? '#22c55e' : ($ms >= 6 ? '#f59e0b' : '#ef4444');
                $isYearly = str_contains($user->subscription_plan ?? '', 'yearly');
                $typeIco  = ['self' => '👤', 'parent' => '👶', 'partner' => '💍', 'pro' => '💼'][$user->profile_type ?? ''] ?? null;
            @endphp
            <li>
                <a href="{{ route('admin.users.show', $user) }}" class="block px-4 py-3 hover:bg-gray-50 transition">
                    <div class="flex items-start gap-3">
                        {{-- Avatar --}}
                        @if ($user->primaryPhoto)
                            <img src="{{ $user->primaryPhoto->thumbUrl() }}" class="w-10 h-10 rounded-full object-cover shrink-0 mt-0.5" alt="">
                        @else
                            <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-sm font-semibold text-gray-500 shrink-0 mt-0.5">
                                {{ mb_substr($user->name, 0, 1) }}
                            </div>
                        @endif

                        <div class="flex-1 min-w-0">
                            {{-- Naam + badges --}}
                            <div class="flex items-center gap-1.5 flex-wrap">
                                <span class="text-sm font-medium text-gray-800 truncate"><span class="text-gray-400 font-normal text-xs">#{{ $user->id }}</span> {{ $user->name }}</span>
                                @if ($user->isOrg())
                                    <span class="text-xs leading-none" title="ORG">🏢</span>
                                @elseif ($user->is_pro)
                                    <span class="text-xs leading-none" title="{{ $isYearly ? 'PRO jaar' : 'PRO maand' }}"
                                          @if($isYearly) style="outline:1.5px solid #a78bfa;border-radius:4px;padding:0 2px" @endif>🏅</span>
                                @elseif ($user->is_premium)
                                    <span class="text-xs leading-none" title="{{ $isYearly ? 'Premium jaar' : 'Premium maand' }}"
                                          @if($isYearly) style="outline:1.5px solid #60a5fa;border-radius:4px;padding:0 2px" @endif>💎</span>
                                @endif
                                @if ($user->suspended_at)
                                    <span class="text-[10px] px-1.5 py-0.5 rounded bg-red-100 text-red-600 leading-none">Geschorst</span>
                                @elseif ($user->email_verified_at)
                                    <span class="text-[10px] px-1.5 py-0.5 rounded bg-green-100 text-green-600 leading-none">Actief</span>
                                @else
                                    <span class="text-[10px] px-1.5 py-0.5 rounded bg-yellow-100 text-yellow-600 leading-none">Onbevestigd</span>
                                @endif
                            </div>

                            {{-- Email --}}
                            <p class="text-xs text-gray-400 truncate mt-0.5">{{ $user->email }}</p>

                            {{-- Meta: type, zichtbaar, profiel, likes --}}
                            <div class="flex items-center justify-between gap-2 mt-1.5 text-[11px] text-gray-400">
                                <div class="flex items-center gap-2">
                                    @if ($typeIco)
                                        <span title="Profieltype">{{ $typeIco }}</span>
                                    @endif
                                    @if ($user->profile_is_visible === true && $user->profile_is_complete)
                                        <span class="text-green-500" title="Profiel zichtbaar">👁</span>
                                    @elseif ($user->profile_is_visible === true)
                                        <span class="text-orange-400" title="Zichtbaar ingesteld maar profiel onvolledig">👁</span>
                                    @elseif ($user->profile_is_visible === false)
                                        <span class="text-red-400" title="Profiel verborgen">🚫</span>
                                    @endif
                                    <div class="flex items-center gap-1" title="Profielvolledigheid">
                                        <div class="w-10 h-1 rounded-full bg-gray-100 overflow-hidden">
                                            <div class="h-full rounded-full" style="width:{{ round($ms/11*100) }}%;background:{{ $mc }}"></div>
                                        </div>
                                        <span style="color:{{ $mc }}">{{ $ms }}/11</span>
                                    </div>
                                </div>
                                <div class="flex items-center gap-2">
                                    <span title="Likes gegeven">👍 {{ $user->likes_count }}</span>
                                    <span title="Likes ontvangen">👀 {{ $user->liked_by_count }}</span>
                                    <span title="Matches">🔗 {{ $user->matches_count ?? 0 }}</span>
                                    <span title="Gesprekken">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="inline h-3 w-3 mb-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" 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>
                                        {{ $user->conversations_count ?? 0 }}
                                    </span>
                                </div>
                            </div>

                            {{-- Laatste activiteit + lid sinds --}}
                            <div class="flex items-center justify-between gap-2 mt-1 text-[11px] text-gray-400">
                                <span>
                                    @if ($user->last_active_at)
                                        {{ \Carbon\Carbon::parse($user->last_active_at)->diffForHumans() }}
                                    @else
                                        <span class="italic text-gray-300">Nooit actief</span>
                                    @endif
                                </span>
                                <span class="text-gray-300">{{ $user->created_at->format('d/m/y') }}</span>
                            </div>
                        </div>
                    </div>
                </a>
            </li>
        @empty
            <li class="px-4 py-8 text-center text-sm text-gray-400">Geen gebruikers gevonden.</li>
        @endforelse
    </ul>

    {{-- Desktop table --}}
    <div class="table-desktop overflow-x-auto">
        <table class="w-full text-sm">
            <thead class="bg-gray-50 text-xs text-gray-400 uppercase tracking-wide">
                <tr>
                    <th class="px-4 py-3 text-left">{!! $sortLink('id', 'ID') !!}</th>
                    <th class="px-4 py-3 text-left">{!! $sortLink('name', 'Gebruiker') !!}</th>
                    <th class="px-4 py-3 text-center" title="Profiel zichtbaar">{!! $sortLink('profile_visibility_rank', '👁') !!}</th>
                    <th class="px-4 py-3 text-center" title="Profieltype">{!! $sortLink('profile_type', '🪪') !!}</th>
                    <th class="px-4 py-3 text-center col-lg" title="Geslacht">{!! $sortLink('profile_gender', '⚧') !!}</th>
                    <th class="px-4 py-3 text-left">{!! $sortLink('plan_rank', 'Plan') !!}</th>
                    <th class="px-4 py-3 text-left col-lg">{!! $sortLink('profile_completeness', 'Profiel') !!}</th>
                    <th class="px-4 py-3 text-left col-lg" title="Likes gegeven">{!! $sortLink('likes_count', $icoHeartOut) !!}</th>
                    <th class="px-4 py-3 text-left col-lg" title="Likes ontvangen">{!! $sortLink('liked_by_count', $icoHeartFill) !!}</th>
                    <th class="px-4 py-3 text-left col-lg" title="Matches (wederzijdse likes)">{!! $sortLink('matches_count', $icoMatch) !!}</th>
                    <th class="px-4 py-3 text-left col-lg" title="Gesprekken">{!! $sortLink('conversations_count', '<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" 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>') !!}</th>
                    <th class="px-4 py-3 text-left">Status</th>
                    <th class="px-4 py-3 text-left col-lg">{!! $sortLink('last_active_at', 'Laatste activiteit') !!}</th>
                    <th class="px-4 py-3 text-left col-lg">{!! $sortLink('created_at', 'Lid sinds') !!}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @forelse ($users as $user)
                    <tr class="hover:bg-gray-50 transition">
                        <td class="px-4 py-3 text-xs font-mono">
                            <a href="{{ route('admin.users.show', $user) }}"
                               class="text-blue-500 hover:text-blue-700 transition">{{ $user->id }}</a>
                        </td>
                        <td class="px-4 py-3">
                            <a href="{{ $user->profile ? route('profiles.show', $user->profile) : route('admin.users.show', $user) }}"
                               class="flex items-center gap-2.5 group">
                                @if ($user->primaryPhoto)
                                    <img src="{{ $user->primaryPhoto->thumbUrl() }}"
                                         class="w-8 h-8 rounded-full object-cover shrink-0" alt="">
                                @else
                                    <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-xs font-semibold text-gray-500 shrink-0">
                                        {{ mb_substr($user->name, 0, 1) }}
                                    </div>
                                @endif
                                <div class="min-w-0">
                                    <p class="font-medium text-gray-800 truncate group-hover:text-blue-600 transition"><span class="text-gray-400 font-normal text-xs">#{{ $user->id }}</span> {{ $user->name }}</p>
                                    <p class="text-xs text-gray-400 truncate">{{ $user->email }}</p>
                                </div>
                            </a>
                        </td>
                        <td class="px-4 py-3 text-center">
                            @if ($user->profile_is_visible === null)
                                <span class="text-gray-300 text-xs">—</span>
                            @elseif ($user->profile_is_visible && $user->profile_is_complete)
                                <span class="text-green-500" title="Profiel zichtbaar">✓</span>
                            @elseif ($user->profile_is_visible)
                                <span class="text-orange-400" title="Zichtbaar ingesteld maar profiel onvolledig">⚠</span>
                            @else
                                <span class="text-red-400" title="Profiel verborgen">✕</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-center">
                            @php
                                $typeMap = [
                                    'self'    => ['👤', 'Zichzelf'],
                                    'parent'  => ['👶', 'Ouder (voor kind)'],
                                    'partner' => ['💍', 'Partner'],
                                    'pro'     => ['💼', 'Zorgprofessional'],
                                ];
                                [$typeIco, $typeLabel] = $typeMap[$user->profile_type ?? ''] ?? ['—', 'Geen profiel'];
                            @endphp
                            <span class="text-base leading-none" title="{{ $typeLabel }}">{{ $typeIco }}</span>
                        </td>
                        <td class="px-4 py-3 text-center col-lg">
                            @php
                                $genderMap = ['male' => ['♂', 'Man'], 'man' => ['♂', 'Man'], 'female' => ['♀', 'Vrouw'], 'woman' => ['♀', 'Vrouw'], 'other' => ['⚧', 'Anders']];
                                [$gIco, $gLabel] = $genderMap[$user->profile_gender ?? ''] ?? ['—', ''];
                            @endphp
                            <span class="text-sm" title="{{ $gLabel }}">{{ $gIco }}</span>
                        </td>
                        <td class="px-4 py-3 text-center">
                            @php $isYearly = str_contains($user->subscription_plan ?? '', 'yearly'); @endphp
                            @if ($user->isOrg())
                                <span class="text-base leading-none" title="ORG">🏢</span>
                            @elseif ($user->is_pro)
                                <span class="text-base leading-none" title="{{ $isYearly ? 'PRO jaar' : 'PRO maand' }}"
                                      @if($isYearly) style="outline:1.5px solid #a78bfa;border-radius:4px;padding:0 2px" @endif>🏅</span>
                            @elseif ($user->is_premium)
                                <span class="text-base leading-none" title="{{ $isYearly ? 'Premium jaar' : 'Premium maand' }}"
                                      @if($isYearly) style="outline:1.5px solid #60a5fa;border-radius:4px;padding:0 2px" @endif>💎</span>
                            @else
                                <span class="text-base leading-none text-gray-300" title="Gratis">🌱</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 col-lg">
                            @php
                                $score = (int) ($user->profile_completeness ?? 0);
                                $max   = 11;
                                $pct   = round($score / $max * 100);
                                $color = $score >= 9 ? '#22c55e' : ($score >= 6 ? '#f59e0b' : '#ef4444');
                            @endphp
                            <div class="flex items-center gap-1.5">
                                <div class="w-16 h-1.5 rounded-full bg-gray-100 overflow-hidden">
                                    <div class="h-full rounded-full" style="width:{{ $pct }}%;background:{{ $color }}"></div>
                                </div>
                                <span class="text-xs tabular-nums" style="color:{{ $color }}">{{ $score }}/{{ $max }}</span>
                            </div>
                        </td>
                        <td class="px-4 py-3 text-gray-500 text-xs col-lg">{{ $user->likes_count }}</td>
                        <td class="px-4 py-3 text-gray-500 text-xs col-lg">{{ $user->liked_by_count }}</td>
                        <td class="px-4 py-3 text-gray-500 text-xs col-lg">{{ $user->matches_count ?? 0 }}</td>
                        <td class="px-4 py-3 text-gray-500 text-xs col-lg">{{ $user->conversations_count ?? 0 }}</td>
                        <td class="px-4 py-3">
                            @if ($user->suspended_at)
                                <span class="text-xs px-2 py-0.5 rounded-full bg-red-100 text-red-600">Geschorst</span>
                            @elseif ($user->email_verified_at)
                                <span class="text-xs px-2 py-0.5 rounded-full bg-green-100 text-green-600">Actief</span>
                            @else
                                <span class="text-xs px-2 py-0.5 rounded-full bg-yellow-100 text-yellow-600">Onbevestigd</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-xs text-gray-400 whitespace-nowrap col-lg">
                            @if ($user->last_active_at)
                                <span title="{{ \Carbon\Carbon::parse($user->last_active_at)->format('d/m/Y H:i:s') }}">
                                    {{ \Carbon\Carbon::parse($user->last_active_at)->diffForHumans() }}
                                </span>
                            @else
                                <span class="italic">Nooit</span>
                            @endif
                        </td>
                        <td class="px-4 py-3 text-xs text-gray-400 whitespace-nowrap col-lg">
                            {{ $user->created_at->format('d/m/Y') }}
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="13" class="px-4 py-8 text-center text-sm text-gray-400">
                            Geen gebruikers gevonden.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    </div>{{-- end desktop table --}}

    @if ($users->hasPages())
        <div class="px-5 py-4 border-t border-gray-100">
            {{ $users->links() }}
        </div>
    @endif
</div>

@endsection