@php
    $statusGroups = $members->getCollection()->groupBy('status');
    $memberCount = $members->total();
@endphp

<x-layouts.platform-admin title="회원관리" header="회원관리" :hide-header-title="true">
    <div class="space-y-6">
        @if (session('status'))
            <x-ui.alert
                variant="success"
                title="저장 완료"
                dismiss-after="3000"
                class="border border-success-soft bg-success-soft"
            >
                {{ session('status') }}
            </x-ui.alert>
        @endif

        <x-admin.section-header
            eyebrow="Platform members"
            title="회원관리"
            title-tag="h1"
            description="회원의 역할과 상태를 확인하고 바로 수정할 수 있습니다."
        >
            <x-ui.badge variant="primary" size="md">전체 {{ $memberCount }}</x-ui.badge>
            <x-ui.badge variant="success" size="md">활성 {{ $statusGroups->get('active', collect())->count() }}</x-ui.badge>
            <x-ui.badge variant="warning" size="md">비활성 {{ $statusGroups->get('inactive', collect())->count() }}</x-ui.badge>
            <x-ui.badge variant="danger" size="md">정지 {{ $statusGroups->get('suspended', collect())->count() }}</x-ui.badge>
        </x-admin.section-header>

        <form method="GET" class="flex flex-col gap-3 sm:flex-row">
            <x-ui.input
                name="q"
                value="{{ $search }}"
                placeholder="이름 또는 이메일 검색"
                class="min-w-0 flex-1"
            />
            <x-ui.button type="submit" variant="soft">검색</x-ui.button>
        </form>

        @if ($members->isEmpty())
            <x-ui.empty-state
                title="회원이 없습니다"
                description="검색 조건에 맞는 회원이 없습니다."
            />
        @else
            <div class="md:hidden space-y-4">
                @foreach ($members as $member)
                    <div class="space-y-4 border-b border-muted pb-4 last:border-b-0 last:pb-0">
                        <div class="flex items-start justify-between gap-3">
                            <div class="min-w-0">
                                <div class="truncate text-base font-bold c-main">{{ $member->name }}</div>
                                <div class="mt-1 break-all text-sm c-muted">{{ $member->email }}</div>
                            </div>

                            <div class="flex flex-col items-end gap-2">
                                <x-ui.badge variant="{{ $member->role === 'admin' ? 'primary' : ($member->role === 'staff' ? 'secondary' : 'accent') }}" size="sm">
                                    {{ $member->role }}
                                </x-ui.badge>
                                <x-ui.badge variant="{{ $member->status === 'active' ? 'success' : ($member->status === 'suspended' ? 'danger' : 'warning') }}" size="sm">
                                    {{ $member->status }}
                                </x-ui.badge>
                            </div>
                        </div>

                        <div class="flex flex-wrap items-center gap-2">
                            <x-ui.button href="{{ route('platform.members.show', $member) }}" variant="ghost" size="sm">상세</x-ui.button>
                            <x-ui.button href="{{ route('platform.members.edit', $member) }}" variant="soft" size="sm">수정</x-ui.button>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="hidden md:block">
                <div class="table-container bg-card">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>회원</th>
                                <th>역할</th>
                                <th>상태</th>
                                <th>관리</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($members as $member)
                                <tr>
                                    <td class="align-top">
                                        <div class="space-y-1">
                                            <div class="font-semibold c-main">{{ $member->name }}</div>
                                            <div class="text-sm c-muted">{{ $member->email }}</div>
                                        </div>
                                    </td>
                                    <td class="align-top">
                                        <x-ui.badge size="sm" variant="{{ $member->role === 'admin' ? 'primary' : ($member->role === 'staff' ? 'secondary' : 'accent') }}">
                                            {{ $member->role }}
                                        </x-ui.badge>
                                    </td>
                                    <td class="align-top">
                                        <x-ui.badge size="sm" variant="{{ $member->status === 'active' ? 'success' : ($member->status === 'suspended' ? 'danger' : 'warning') }}">
                                            {{ $member->status }}
                                        </x-ui.badge>
                                    </td>
                                    <td class="align-top">
                                        <div class="flex flex-wrap items-center gap-2">
                                            <x-ui.button href="{{ route('platform.members.show', $member) }}" variant="ghost" size="sm">상세</x-ui.button>
                                            <x-ui.button href="{{ route('platform.members.edit', $member) }}" variant="soft" size="sm">수정</x-ui.button>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        @endif

        <div>
            <x-ui.pagination :paginator="$members" />
        </div>
    </div>
</x-layouts.platform-admin>