@extends('layouts.app')

@section('title', 'Equipe')
@section('page-title', 'Configurações')

@section('content')
    <x-settings.shell title="Configurações" subtitle="Convites, papéis e membros da organização.">
    <div class="space-y-6">
        <div class="flex flex-wrap items-end justify-between gap-3">
            <div>
                <h2 class="text-lg font-semibold text-slate-900">Equipe</h2>
                <p class="mt-1 text-sm text-slate-600">
                    {{ $tenant->name }} · {{ ($tenant->type?->label() ?? 'Imobiliária') }}
                </p>
            </div>
            <a href="{{ route('settings.plan') }}" class="text-sm font-medium text-emerald-700 hover:text-emerald-600">Ver plano</a>
        </div>

        <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
            <h3 class="text-base font-semibold text-slate-900">Convidar membro</h3>
            <p class="mt-1 text-sm text-slate-600">Enviamos o link por e-mail. O convidado cria a senha pelo link. Convites em conta solo sobem para o plano Start automaticamente.</p>
            <form method="POST" action="{{ route('organizations.members.invite') }}" class="mt-4 grid gap-3 sm:grid-cols-3">
                @csrf
                <div>
                    <label class="text-xs font-medium uppercase tracking-wide text-slate-500">E-mail</label>
                    <input type="email" name="email" value="{{ old('email') }}" required class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm" />
                </div>
                <div>
                    <label class="text-xs font-medium uppercase tracking-wide text-slate-500">Papel</label>
                    <select name="role" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
                        @foreach (\ImovelZapAi\Authentication\Domain\Enums\SystemRole::cases() as $role)
                            <option value="{{ $role->value }}" @selected(old('role') === $role->value)>{{ $role->value }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="flex items-end">
                    <button type="submit" class="rounded-lg bg-emerald-600 px-4 py-2 text-sm font-semibold text-white hover:bg-emerald-500">Enviar convite</button>
                </div>
            </form>
        </div>

        <div class="rounded-xl border border-slate-200 bg-white shadow-sm">
            <div class="border-b border-slate-100 px-6 py-4">
                <h3 class="text-base font-semibold text-slate-900">Membros</h3>
            </div>
            <ul class="divide-y divide-slate-100">
                @foreach ($members as $member)
                    @php($user = $member['user'])
                    <li class="flex flex-wrap items-center justify-between gap-3 px-6 py-4">
                        <div>
                            <p class="text-sm font-medium text-slate-900">
                                {{ $user->name }}
                                @if ($member['is_owner'])
                                    <span class="ml-2 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-800">Dono</span>
                                @endif
                            </p>
                            <p class="text-xs text-slate-500">{{ $user->email }} · {{ implode(', ', $member['roles']) ?: 'sem papel' }}</p>
                        </div>
                        <div class="flex flex-wrap items-center gap-2">
                            <form method="POST" action="{{ route('organizations.members.role', $user) }}" class="flex items-center gap-2">
                                @csrf
                                <select name="role" class="rounded-lg border border-slate-300 px-2 py-1.5 text-xs">
                                    @foreach (\ImovelZapAi\Authentication\Domain\Enums\SystemRole::cases() as $role)
                                        <option value="{{ $role->value }}" @selected(in_array($role->value, $member['roles'], true))>{{ $role->value }}</option>
                                    @endforeach
                                </select>
                                <button type="submit" class="rounded-lg border border-slate-300 px-2 py-1.5 text-xs font-semibold text-slate-700 hover:bg-slate-50">Salvar</button>
                            </form>
                            @unless ($member['is_owner'])
                                <x-confirm-submit
                                    :action="route('organizations.members.destroy', $user)"
                                    method="DELETE"
                                    title="Remover este membro?"
                                    message="Ele perderá o acesso à organização. Esta ação não pode ser desfeita."
                                    confirm-label="Remover"
                                    trigger-class="rounded-lg border border-red-200 px-2 py-1.5 text-xs font-semibold text-red-700 hover:bg-red-50"
                                >
                                    Remover
                                </x-confirm-submit>
                            @endunless
                        </div>
                    </li>
                @endforeach
            </ul>
        </div>

        @if ($invitations->isNotEmpty())
            <div class="rounded-xl border border-slate-200 bg-white shadow-sm">
                <div class="border-b border-slate-100 px-6 py-4">
                    <h3 class="text-base font-semibold text-slate-900">Convites pendentes</h3>
                </div>
                <ul class="divide-y divide-slate-100">
                    @foreach ($invitations as $invitation)
                        <li class="flex flex-wrap items-center justify-between gap-3 px-6 py-4">
                            <div>
                                <p class="text-sm font-medium text-slate-900">{{ $invitation->email }}</p>
                                <p class="text-xs text-slate-500">
                                    {{ $invitation->role?->value }} · expira {{ $invitation->expires_at?->format('d/m/Y H:i') }}
                                </p>
                                <p class="mt-1 text-xs text-slate-500">Link de backup (também enviado por e-mail):</p>
                                <p class="mt-0.5 break-all font-mono text-xs text-slate-600">{{ route('organizations.invitations.show', $invitation->token) }}</p>
                            </div>
                            <form method="POST" action="{{ route('organizations.invitations.revoke', $invitation) }}">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="rounded-lg border border-slate-300 px-3 py-1.5 text-xs font-semibold text-slate-700 hover:bg-slate-50">Cancelar</button>
                            </form>
                        </li>
                    @endforeach
                </ul>
            </div>
        @endif
    </div>
    </x-settings.shell>
@endsection
