@extends('admin.layout')
@section('title', 'Gemelde profielen')

@section('content')

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

        <div>
            <label class="block text-xs text-gray-500 mb-1">Status</label>
            <select name="status"
                class="text-sm border border-gray-200 rounded-lg py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-400">
                <option value="" @selected(!request('status'))>Alle</option>
                <option value="open" @selected(request('status') === 'open')>Openstaand</option>
                <option value="handled" @selected(request('status') === 'handled')>Afgehandeld</option>
            </select>
        </div>

        <div>
            <label class="block text-xs text-gray-500 mb-1">Categorie</label>
            <select name="category"
                class="text-sm border border-gray-200 rounded-lg py-1.5 focus:outline-none focus:ring-1 focus:ring-blue-400">
                <option value="" @selected(!request('category'))>Alle</option>
                <option value="report-profile" @selected(request('category') === 'report-profile')>Nepprofiel</option>
                <option value="report-conduct" @selected(request('category') === 'report-conduct')>Wangedrag</option>
            </select>
        </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.reports.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>
    </form>

    {{-- Summary bar --}}
    <div class="bg-white rounded-lg border border-gray-100 px-5 py-3 mb-4 flex items-center gap-4 text-sm text-gray-500">
        <span>{{ $grouped->count() }} gemeld profiel(en)</span>
        @if ($openCount)
            <span class="px-2 py-0.5 text-xs bg-red-100 text-red-600 rounded-full">
                {{ $openCount }} openstaande melding(en)
            </span>
        @endif
    </div>

    @forelse ($grouped as $userId => $entry)
        @php
            $reported = $entry['user'];
            $reports = $entry['reports'];
            $openCount = $entry['open'];
            $profile = $reported?->profile;
            $photo = $reported?->primaryPhoto;
            $suspended = $reported?->suspended_at !== null;
            $visible = $profile?->is_visible ?? false;
        @endphp

        @if (!$reported)
            @continue
        @endif

        <div
            class="bg-white rounded-xl border {{ $openCount ? 'border-orange-200' : 'border-gray-100' }} mb-4 overflow-hidden">

            {{-- Header: profile info + status badges --}}
            <div class="flex items-center gap-3 px-5 py-4 border-b border-gray-100">

                {{-- Avatar --}}
                @if ($photo)
                    <img src="{{ $photo->avatarUrl() }}" class="w-11 h-11 rounded-full object-cover shrink-0"
                        alt="">
                @else
                    <div
                        class="w-11 h-11 rounded-full bg-gray-200 flex items-center justify-center text-lg font-semibold text-gray-500 shrink-0">
                        {{ mb_substr($reported->name, 0, 1) }}
                    </div>
                @endif

                <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-2 flex-wrap">
                        <span class="font-semibold text-gray-800">{{ $reported->name }}</span>
                        <span class="text-xs text-gray-400 font-mono">#{{ $reported->id }}</span>

                        {{-- Status badges --}}
                        @if ($suspended)
                            <span class="text-[11px] px-2 py-0.5 rounded-full bg-red-100 text-red-600">Geschorst</span>
                        @else
                            <span class="text-[11px] px-2 py-0.5 rounded-full bg-green-100 text-green-700">Actief</span>
                        @endif

                        @if ($profile)
                            @if ($visible)
                                <span class="text-[11px] px-2 py-0.5 rounded-full bg-blue-100 text-blue-700">Profiel
                                    zichtbaar</span>
                            @else
                                <span class="text-[11px] px-2 py-0.5 rounded-full bg-gray-100 text-gray-500">Profiel
                                    verborgen</span>
                            @endif
                        @endif

                        @if ($openCount)
                            <span class="text-[11px] px-2 py-0.5 rounded-full bg-orange-100 text-orange-700">
                                {{ $openCount }} open
                            </span>
                        @endif
                    </div>
                    <p class="text-xs text-gray-400 mt-0.5">
                        {{ $reported->email }}
                        @if ($entry['latest'])
                            &nbsp;·&nbsp; Laatste melding:
                            {{ \Carbon\Carbon::parse($entry['latest'])->format('d/m/Y H:i:s') }}
                        @endif
                    </p>
                </div>

                {{-- Admin profile link --}}
                <a href="{{ route('admin.users.show', $reported) }}"
                    class="shrink-0 text-xs text-blue-500 hover:underline whitespace-nowrap">
                    Admin profiel →
                </a>
            </div>

            {{-- Reports list --}}
            <div class="px-5 py-3 border-b border-gray-100">
                <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">
                    Meldingen ({{ $entry['total'] }})
                </p>
                <ul class="space-y-1.5">
                    @foreach ($reports as $report)
                        <li class="flex items-start gap-2 text-sm">
                            {{-- Open/handled dot --}}
                            <span
                                class="mt-1.5 w-1.5 h-1.5 rounded-full shrink-0 {{ $report->isUnread() ? 'bg-orange-400' : 'bg-gray-300' }}"></span>

                            <div class="flex-1 min-w-0">
                                <span class="text-[11px] px-1.5 py-0.5 rounded bg-gray-100 text-gray-500 mr-1">
                                    {{ $report->category === 'report-profile' ? 'Nepprofiel' : 'Wangedrag' }}
                                </span>
                                <span class="text-gray-700">{{ $report->name }}</span>
                                <a href="mailto:{{ $report->email }}"
                                    class="text-gray-400 hover:underline ml-1 text-xs">{{ $report->email }}</a>
                                @if ($report->subject)
                                    <span class="text-gray-400 mx-1">·</span>
                                    <span class="text-gray-500 text-xs truncate">{{ $report->subject }}</span>
                                @endif
                            </div>

                            <div class="shrink-0 flex items-center gap-2">
                                <span class="text-xs text-gray-400 whitespace-nowrap">
                                    {{ $report->created_at->format('d/m/Y') }}
                                </span>
                                <a href="{{ route('admin.contact.show', $report) }}"
                                    class="text-xs text-blue-400 hover:underline whitespace-nowrap">
                                    Bekijken
                                </a>
                            </div>
                        </li>
                    @endforeach
                </ul>
            </div>

            {{-- Action panel --}}
            <div class="px-5 py-3 bg-gray-50 flex flex-wrap gap-2 items-start">

                {{-- Profile visibility --}}
                @if ($profile)
                    @if ($visible)
                        <form method="POST" action="{{ route('admin.reports.hide', $reported) }}">
                            @csrf
                            <button type="submit"
                                class="px-3 py-1.5 text-xs border border-gray-300 text-gray-600 rounded-lg hover:bg-white transition">
                                Profiel verbergen
                            </button>
                        </form>
                    @else
                        <form method="POST" action="{{ route('admin.reports.show', $reported) }}">
                            @csrf
                            <button type="submit"
                                class="px-3 py-1.5 text-xs border border-gray-300 text-gray-600 rounded-lg hover:bg-white transition">
                                Profiel zichtbaar maken
                            </button>
                        </form>
                    @endif
                @endif

                {{-- Suspend / unsuspend --}}
                @if ($suspended)
                    <form method="POST" action="{{ route('admin.reports.unsuspend', $reported) }}">
                        @csrf
                        <button type="submit"
                            class="px-3 py-1.5 text-xs border border-green-300 text-green-700 rounded-lg hover:bg-green-50 transition">
                            Schorsing opheffen
                        </button>
                    </form>
                @else
                    {{-- Suspend with reason — inline toggle --}}
                    <div>
                        <button type="button"
                            onclick="this.closest('div').querySelector('.suspend-form').classList.toggle('hidden')"
                            class="px-3 py-1.5 text-xs border border-orange-300 text-orange-700 rounded-lg hover:bg-orange-50 transition">
                            Schorsen ▾
                        </button>
                        <form method="POST" action="{{ route('admin.reports.suspend', $reported) }}"
                            class="suspend-form hidden mt-2 space-y-1.5">
                            @csrf
                            <textarea name="reason" rows="2" placeholder="Reden (optioneel)…"
                                class="w-full text-xs border border-gray-200 rounded-lg px-2 py-1.5 resize-none focus:outline-none focus:ring-1 focus:ring-orange-300"></textarea>
                            <button type="submit" onclick="return confirm('{{ $reported->name }} schorsen?')"
                                class="px-3 py-1.5 text-xs bg-orange-600 text-white rounded-lg hover:bg-orange-700 transition">
                                Bevestigen
                            </button>
                        </form>
                    </div>
                @endif

                {{-- Permanent ban --}}
                @if (!$suspended)
                    <form method="POST" action="{{ route('admin.reports.ban', $reported) }}"
                        onsubmit="return confirm('{{ $reported->name }} definitief blokkeren?')">
                        @csrf
                        <button type="submit"
                            class="px-3 py-1.5 text-xs border border-red-300 text-red-700 rounded-lg hover:bg-red-50 transition">
                            Definitief blokkeren
                        </button>
                    </form>
                @endif

                {{-- Contact reported user --}}
                <a href="mailto:{{ $reported->email }}?subject={{ urlencode('[ND-Link] Melding over uw account') }}"
                    class="px-3 py-1.5 text-xs border border-gray-300 text-gray-600 rounded-lg hover:bg-white transition">
                    Contact eigenaar
                </a>

                {{-- Contact all reporters --}}
                @php
                    $reporterEmails = $reports->pluck('email')->unique()->implode(',');
                @endphp
                <a href="mailto:{{ $reporterEmails }}?subject={{ urlencode('[ND-Link] Uw melding') }}"
                    class="px-3 py-1.5 text-xs border border-gray-300 text-gray-600 rounded-lg hover:bg-white transition">
                    Contact melder(s)
                </a>

                {{-- Dismiss all open reports --}}
                @if ($entry['open'] > 0)
                    <form method="POST" action="{{ route('admin.reports.dismiss', $reported) }}" class="ml-auto"
                        onsubmit="return confirm('Alle open meldingen afhandelen?')">
                        @csrf
                        <button type="submit"
                            class="px-3 py-1.5 text-xs border border-gray-300 text-gray-500 rounded-lg hover:bg-white transition">
                            Meldingen afhandelen ✓
                        </button>
                    </form>
                @endif

            </div>
        </div>
    @empty
        <div class="bg-white rounded-lg border border-gray-100 px-5 py-12 text-center text-sm text-gray-400">
            Geen gemelde profielen gevonden.
        </div>
    @endforelse

@endsection