@php
    $membersByUserId = $members->keyBy('user_id');
    $isMember = $membership !== null;
    $canModerate = $membership && $membership->canModerate();
    $isCreator = $membership && $membership->isCreator();
@endphp

<x-layouts.app :title="$club->name" :description="$club->description" :canonical="url()->current()">
    <div class="mx-auto max-w-3xl space-y-8">
        <div>
            <div class="flex flex-wrap items-center gap-2">
                <h1 class="text-2xl font-semibold">{{ $club->name }}</h1>
                <span class="rounded-full bg-slate-100 px-2 py-0.5 text-xs text-slate-600 dark:bg-slate-800 dark:text-slate-400">
                    {{ __('clubs.type.'.$club->type) }}
                </span>
            </div>

            @if ($club->description)
                <p class="mt-2 text-slate-600 dark:text-slate-400">{{ $club->description }}</p>
            @endif

            @if ($club->isSuspended())
                <div class="mt-4 rounded-md bg-red-50 px-4 py-3 text-sm text-red-800 dark:bg-red-950 dark:text-red-200">
                    {{ __('clubs.suspended_notice') }}
                </div>
            @endif

            <div class="mt-4 flex flex-wrap items-center gap-3">
                @if (! $isMember)
                    @auth
                        @if ($club->isPublic())
                            <form method="POST" action="{{ route('clubs.join', $club) }}">
                                @csrf
                                <button type="submit" class="rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700 dark:bg-white dark:text-slate-900">
                                    {{ __('clubs.join') }}
                                </button>
                            </form>
                        @else
                            <p class="text-sm text-slate-500">{{ __('clubs.private_notice') }}</p>
                        @endif
                    @else
                        <a href="{{ route('login') }}" class="rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700 dark:bg-white dark:text-slate-900">
                            {{ __('clubs.join') }}
                        </a>
                    @endauth
                @elseif (! $isCreator)
                    <form method="POST" action="{{ route('clubs.leave', $club) }}">
                        @csrf
                        <button type="submit" class="rounded-md border border-slate-300 px-4 py-2 text-sm font-medium hover:bg-slate-50 dark:border-slate-700 dark:hover:bg-slate-900">
                            {{ __('clubs.leave') }}
                        </button>
                    </form>
                @endif

                <a href="{{ route('clubs.battles.index', $club) }}" class="rounded-md border border-slate-300 px-4 py-2 text-sm font-medium hover:bg-slate-50 dark:border-slate-700 dark:hover:bg-slate-900">
                    {{ __('clubs.battles_title') }}
                </a>

                @auth
                    <button
                        x-data
                        @click="$refs.reportClubDialog.showModal()"
                        type="button"
                        class="text-sm text-slate-500 hover:underline"
                    >
                        {{ __('clubs.report_club') }}
                    </button>
                    <dialog x-ref="reportClubDialog" class="rounded-lg border border-slate-200 p-6 backdrop:bg-black/30 dark:border-slate-800 dark:bg-slate-900">
                        <form method="POST" action="{{ route('clubs.report', $club) }}" class="space-y-3">
                            @csrf
                            <label class="block text-sm font-medium">{{ __('clubs.report_reason_label') }}</label>
                            <textarea name="reason" rows="3" required class="block w-full rounded-md border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800"></textarea>
                            <button type="submit" class="rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-white dark:bg-white dark:text-slate-900">{{ __('clubs.report_submit') }}</button>
                        </form>
                    </dialog>
                @endauth
            </div>

            @if ($canModerate && $club->isPrivate())
                <div class="mt-4 rounded-md border border-slate-200 px-4 py-3 text-sm dark:border-slate-800">
                    <p class="font-medium">{{ __('clubs.invite_link_label') }}</p>
                    <p class="mt-1 text-slate-500">{{ __('clubs.copy_invite_link') }}</p>
                    <code class="mt-2 block break-all rounded bg-slate-100 px-2 py-1 text-xs dark:bg-slate-800">{{ route('clubs.invite', [$club, $club->invite_code]) }}</code>
                </div>
            @endif

            @if ($isMember)
                <form method="POST" action="{{ route('clubs.rank-visibility.update', $club) }}" class="mt-4 flex items-center gap-2 text-sm">
                    @csrf
                    <input type="hidden" name="show_rank_in_club" value="{{ $membership->show_rank_in_club ? 0 : 1 }}">
                    <label class="flex items-center gap-2">
                        <input type="checkbox" onchange="this.form.requestSubmit()" {{ $membership->show_rank_in_club ? 'checked' : '' }} class="rounded border-slate-300">
                        {{ __('clubs.show_rank_label') }}
                    </label>
                </form>
            @endif
        </div>

        <div>
            <h2 class="mb-3 text-sm font-semibold text-slate-500">{{ __('clubs.stats.title') }}</h2>
            <p class="mb-3 text-sm">{{ __('clubs.stats.members') }}: <span class="font-semibold">{{ $memberCount }}</span></p>

            <div class="overflow-hidden rounded-lg border border-slate-200 dark:border-slate-800">
                <table class="w-full text-left text-sm">
                    <thead class="bg-slate-50 text-slate-500 dark:bg-slate-900">
                        <tr>
                            <th class="px-4 py-2 font-medium">Category</th>
                            <th class="px-4 py-2 font-medium">{{ __('clubs.stats.average_score') }}</th>
                            <th class="px-4 py-2 font-medium">{{ __('clubs.stats.top_performers') }}</th>
                            <th class="px-4 py-2"></th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                        @foreach ($categories as $category)
                            <tr>
                                <td class="px-4 py-2">{{ $category->name() }}</td>
                                <td class="px-4 py-2">{{ $averageScoreByCategory[$category->key] ?? __('clubs.stats.not_available') }}</td>
                                <td class="px-4 py-2 text-slate-500">
                                    @forelse ($topPerformersByCategory[$category->key] as $row)
                                        {{ $membersByUserId->get($row['user_id'])?->user?->username ?? '—' }} ({{ $row['score'] }}){{ !$loop->last ? ', ' : '' }}
                                    @empty
                                        —
                                    @endforelse
                                </td>
                                <td class="px-4 py-2 text-right">
                                    <a href="{{ route('clubs.leaderboard', [$club, $category]) }}" class="text-xs text-slate-500 hover:underline">{{ __('clubs.view_club_leaderboard') }}</a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <div>
            <h2 class="mb-3 text-sm font-semibold text-slate-500">{{ __('clubs.members_title') }}</h2>
            <div class="overflow-hidden rounded-lg border border-slate-200 dark:border-slate-800">
                <table class="w-full text-left text-sm">
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                        @foreach ($members as $member)
                            <tr>
                                <td class="px-4 py-2">
                                    <a href="{{ route('profiles.show', $member->user->username) }}" class="hover:underline">{{ $member->user->username }}</a>
                                </td>
                                <td class="px-4 py-2 text-slate-500">{{ __('clubs.role.'.$member->role) }}</td>
                                <td class="px-4 py-2 text-right whitespace-nowrap">
                                    @if ($isCreator && $member->user_id !== auth()->id())
                                        @if ($member->isModerator())
                                            <form method="POST" action="{{ route('clubs.members.demote', [$club, $member->user]) }}" class="inline">
                                                @csrf
                                                <button type="submit" class="text-xs text-slate-500 hover:underline">{{ __('clubs.demote') }}</button>
                                            </form>
                                        @elseif (! $member->isCreator())
                                            <form method="POST" action="{{ route('clubs.members.promote', [$club, $member->user]) }}" class="inline">
                                                @csrf
                                                <button type="submit" class="text-xs text-slate-500 hover:underline">{{ __('clubs.promote') }}</button>
                                            </form>
                                        @endif
                                    @endif

                                    @if ($canModerate && ! $member->isCreator() && $member->user_id !== auth()->id())
                                        <form method="POST" action="{{ route('clubs.members.remove', [$club, $member->user]) }}" class="inline">
                                            @csrf
                                            <button type="submit" class="text-xs text-red-600 hover:underline dark:text-red-400">{{ __('clubs.remove_member') }}</button>
                                        </form>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <div>
            <h2 class="mb-3 text-sm font-semibold text-slate-500">{{ __('clubs.posts_title') }}</h2>

            @if ($isMember)
                <form method="POST" action="{{ route('clubs.posts.store', $club) }}" class="mb-4 space-y-2">
                    @csrf
                    <textarea name="body" rows="2" required placeholder="{{ __('clubs.post_placeholder') }}" class="block w-full rounded-md border-slate-300 text-sm dark:border-slate-700 dark:bg-slate-800"></textarea>
                    @error('post') <p class="text-sm text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
                    <button type="submit" class="rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-white dark:bg-white dark:text-slate-900">{{ __('clubs.post_submit') }}</button>
                </form>
            @endif

            <div class="space-y-4">
                @forelse ($posts as $post)
                    <div class="rounded-lg border border-slate-200 p-4 dark:border-slate-800">
                        <div class="flex items-center justify-between text-sm">
                            <span class="font-medium">{{ $post->user->username }}</span>
                            <span class="text-slate-500">{{ $post->created_at->diffForHumans() }}</span>
                        </div>
                        <p class="mt-2 whitespace-pre-line">{{ $post->body }}</p>

                        @auth
                            <div class="mt-2 flex items-center gap-3 text-xs">
                                @if ($post->user_id === auth()->id() || $canModerate)
                                    <form method="POST" action="{{ route('clubs.posts.destroy', [$club, $post]) }}">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="text-red-600 hover:underline dark:text-red-400">{{ __('clubs.delete_post') }}</button>
                                    </form>
                                @endif
                                <details class="text-slate-500">
                                    <summary class="cursor-pointer hover:underline">{{ __('clubs.report_post') }}</summary>
                                    <form method="POST" action="{{ route('clubs.posts.report', [$club, $post]) }}" class="mt-2 flex items-center gap-2">
                                        @csrf
                                        <input type="text" name="reason" required placeholder="{{ __('clubs.report_reason_label') }}" class="rounded-md border-slate-300 text-xs dark:border-slate-700 dark:bg-slate-800">
                                        <button type="submit" class="rounded-md bg-slate-900 px-2 py-1 text-xs font-medium text-white dark:bg-white dark:text-slate-900">{{ __('clubs.report_submit') }}</button>
                                    </form>
                                </details>
                            </div>
                        @endauth
                    </div>
                @empty
                    <p class="text-slate-500">{{ __('clubs.no_posts') }}</p>
                @endforelse
            </div>

            <div class="mt-4">{{ $posts->links('pagination::tailwind') }}</div>
        </div>
    </div>
</x-layouts.app>