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

<x-layouts.tenant-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="Member hub"
            title="회원관리"
            title-tag="h1"
            description="역할, 팀, 상태를 바로 수정할 수 있습니다."
        >
            <x-ui.badge variant="primary" 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>

        @if ($members->isEmpty())
            <x-ui.empty-state
                title="회원이 없습니다"
                description="새로운 테넌트라면 회원이 아직 생성되지 않았을 수 있습니다."
            />
        @else
            <div class="md:hidden space-y-4">
                @foreach ($members as $member)
                    <form method="POST" action="{{ tenant_admin_url(null, 'members/' . $member->id) }}">
                        @csrf
                        @method('PATCH')
                        <input type="hidden" name="status" value="{{ $member->status }}" data-member-status-value>

                        <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="grid gap-3">
                                <x-ui.select name="role" label="역할" size="sm">
                                    <option value="user" @selected($member->role === 'user')>일반 회원</option>
                                    <option value="staff" @selected($member->role === 'staff')>스태프</option>
                                    <option value="admin" @selected($member->role === 'admin')>관리자</option>
                                </x-ui.select>

                                <x-ui.select name="team_id" label="팀" size="sm">
                                    <option value="">없음</option>
                                    @foreach ($teams as $team)
                                        <option value="{{ $team->id }}" @selected((string) $member->team_id === (string) $team->id)>
                                            {{ $team->name }}
                                        </option>
                                    @endforeach
                                </x-ui.select>

                                <div class="space-y-2">
                                    <x-ui.switch
                                        :checked="$member->status === 'active'"
                                    />

                                    @if ($member->status === 'suspended')
                                        <div class="flex items-center gap-2 text-xs c-muted">
                                            <x-ui.badge variant="danger" size="sm">정지</x-ui.badge>
                                            <span>현재 정지 상태입니다.</span>
                                        </div>
                                    @endif
                                </div>
                            </div>

                            <div class="flex justify-end">
                                <x-ui.button type="submit" variant="primary" size="sm">저장</x-ui.button>
                            </div>
                        </div>
                    </form>
                @endforeach
            </div>

            <div class="hidden md:block">
                <div class="hidden">
                    @foreach ($members as $member)
                        <form id="member-form-{{ $member->id }}" method="POST" action="{{ tenant_admin_url(null, 'members/' . $member->id) }}">
                            @csrf
                            @method('PATCH')
                            <input type="hidden" name="status" value="{{ $member->status }}" data-member-status-value>
                        </form>
                    @endforeach
                </div>

                <div class="table-container bg-card">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>회원</th>
                                <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.select name="role" form="member-form-{{ $member->id }}" size="sm" class="w-full min-w-[10rem]">
                                            <option value="user" @selected($member->role === 'user')>일반 회원</option>
                                            <option value="staff" @selected($member->role === 'staff')>스태프</option>
                                            <option value="admin" @selected($member->role === 'admin')>관리자</option>
                                        </x-ui.select>
                                    </td>
                                    <td class="align-top">
                                        <x-ui.select name="team_id" form="member-form-{{ $member->id }}" size="sm" class="w-full min-w-[10rem]">
                                            <option value="">없음</option>
                                            @foreach ($teams as $team)
                                                <option value="{{ $team->id }}" @selected((string) $member->team_id === (string) $team->id)>
                                                    {{ $team->name }}
                                                </option>
                                            @endforeach
                                        </x-ui.select>
                                    </td>
                                    <td class="align-top">
                                        <div class="space-y-2">
                                            <x-ui.switch
                                                :checked="$member->status === 'active'"
                                                form="member-form-{{ $member->id }}"
                                            />

                                            @if ($member->status === 'suspended')
                                                <div class="flex items-center gap-2 text-xs c-muted">
                                                    <x-ui.badge variant="danger" size="sm">정지</x-ui.badge>
                                                    <span>현재 정지 상태입니다.</span>
                                                </div>
                                            @endif
                                        </div>
                                    </td>
                                    <td class="align-top">
                                        <div class="flex items-center gap-2">
                                            <x-ui.button type="submit" form="member-form-{{ $member->id }}" variant="primary" size="sm">저장</x-ui.button>
                                            <x-ui.badge variant="{{ $member->role === 'admin' ? 'primary' : ($member->role === 'staff' ? 'secondary' : 'accent') }}" size="sm">
                                                {{ $member->role }}
                                            </x-ui.badge>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        @endif
    </div>

    @push('scripts')
        <script>
            (() => {
                document.querySelectorAll('input.switch-input').forEach((statusSwitch) => {
                    const form = statusSwitch.form;
                    const hiddenStatus = form?.querySelector('[data-member-status-value]');

                    if (!hiddenStatus || !statusSwitch) {
                        return;
                    }

                    statusSwitch.addEventListener('change', () => {
                        hiddenStatus.value = statusSwitch.checked ? 'active' : 'inactive';
                    });
                });
            })();
        </script>
    @endpush
</x-layouts.tenant-admin>