@extends('layouts.app')

@section('title', 'Users - ' . config('app.name'))

@section('header-left')
    <h1 class="text-lg font-semibold text-gray-900">Workspace Users</h1>
@endsection

@section('content')
    @if (session('success'))
        <div class="mb-4 rounded-lg bg-green-50 p-4 text-sm text-green-800" x-data x-init="setTimeout(() => $el.remove(), 3000)">
            {{ session('success') }}
        </div>
    @endif
    @if (session('error'))
        <div class="mb-4 rounded-lg bg-red-50 p-4 text-sm text-red-800" x-data x-init="setTimeout(() => $el.remove(), 3000)">
            {{ session('error') }}
        </div>
    @endif
    @if ($errors->has('password'))
        <div class="mb-4 rounded-lg bg-red-50 p-4 text-sm text-red-800">
            {{ $errors->first('password') }}
        </div>
    @endif

    <div class="mb-4 flex flex-wrap items-center justify-end gap-2">
        @if ($slackConnected ?? false)
            <form method="post" action="{{ route('settings.users.sync') }}" class="inline">
                @csrf
                <button type="submit" class="inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50">
                    Sync from Slack
                </button>
            </form>
        @endif
        <button
            type="button"
            @click="$dispatch('open-invite-modal')"
            class="inline-flex items-center rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700"
        >
            Invite User
        </button>
    </div>

    <div class="overflow-x-auto rounded-lg border border-gray-200 bg-white shadow">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th scope="col" class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">User</th>
                    <th scope="col" class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Slack Status</th>
                    <th scope="col" class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Email</th>
                    <th scope="col" class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Role</th>
                    <th scope="col" class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Supervisor</th>
                    <th scope="col" class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Status</th>
                    <th scope="col" class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">Last active</th>
                    <th scope="col" class="px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-gray-500">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200 bg-white">
                @foreach ($users as $u)
                    <tr class="hover:bg-gray-50">
                        <td class="whitespace-nowrap px-4 py-3">
                            <div class="flex items-center gap-3">
                                @if ($u->avatar_url)
                                    <img src="{{ $u->avatar_url }}" alt="" class="h-9 w-9 rounded-full object-cover" />
                                @else
                                    <div class="flex h-9 w-9 items-center justify-center rounded-full bg-gray-600 text-sm font-medium text-white">
                                        {{ strtoupper(substr($u->name, 0, 1)) }}
                                    </div>
                                @endif
                                <span class="font-medium text-gray-900">{{ $u->name }}</span>
                            </div>
                        </td>
                        <td class="whitespace-nowrap px-4 py-3 text-sm text-gray-600">
                            @if ($u->slack_user_id)
                                <span class="inline-flex rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800">connected</span>
                                @if ($u->slack_username)
                                    <span class="text-gray-500">({{ $u->slack_username }})</span>
                                @endif
                                @if ($u->id !== auth()->id())
                                    <form method="post" action="{{ route('settings.users.update', $u) }}" class="ml-1 inline" onsubmit="return confirm('Unlink this user from Slack?');">
                                        @csrf
                                        @method('PATCH')
                                        <input type="hidden" name="slack_user_id" value="" />
                                        <input type="hidden" name="slack_username" value="" />
                                        <button type="submit" class="text-xs text-gray-500 hover:text-gray-700">Unlink</button>
                                    </form>
                                @endif
                            @else
                                <span class="inline-flex rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-800">unlinked</span>
                                @if ($slackConnected ?? false)
                                    <form method="post" action="{{ route('settings.users.update', $u) }}" class="ml-1 inline">
                                        @csrf
                                        @method('PATCH')
                                        <select name="slack_link" class="rounded border-gray-300 text-xs" onchange="(function(){ var o=this.options[this.selectedIndex]; if(o.value){ this.form.querySelector('input[name=slack_user_id]').value=o.value; this.form.querySelector('input[name=slack_username]').value=o.dataset.username||''; this.form.submit(); } }).call(this)">
                                            <option value="">Link to Slack…</option>
                                            @foreach ($unlinkedSlackUsers ?? [] as $slack)
                                                <option value="{{ $slack['id'] }}" data-username="{{ e($slack['name']) }}">{{ $slack['name'] }}</option>
                                            @endforeach
                                        </select>
                                        <input type="hidden" name="slack_user_id" value="" />
                                        <input type="hidden" name="slack_username" value="" />
                                    </form>
                                @endif
                            @endif
                        </td>
                        <td class="whitespace-nowrap px-4 py-3 text-sm text-gray-600">{{ $u->email }}</td>
                        <td class="whitespace-nowrap px-4 py-3">
                            @if ($u->id === auth()->id() && $u->role === 'owner')
                                <span class="inline-flex rounded-full bg-amber-100 px-2.5 py-0.5 text-xs font-medium text-amber-800">owner</span>
                            @else
                                <form method="post" action="{{ route('settings.users.update', $u) }}" class="inline">
                                    @csrf
                                    @method('PATCH')
                                    <select name="role" onchange="this.form.submit()" class="rounded border-gray-300 text-sm">
                                        <option value="admin" {{ $u->role === 'admin' ? 'selected' : '' }}>admin</option>
                                        <option value="member" {{ $u->role === 'member' ? 'selected' : '' }}>member</option>
                                    </select>
                                </form>
                            @endif
                        </td>
                        <td class="whitespace-nowrap px-4 py-3">
                            <form method="post" action="{{ route('settings.users.update', $u) }}" class="inline">
                                @csrf
                                @method('PATCH')
                                <select name="supervisor_id" onchange="this.form.submit()" class="rounded border-gray-300 text-sm">
                                    <option value="">— None —</option>
                                    @foreach ($users->where('id', '!=', $u->id) as $sup)
                                        <option value="{{ $sup->id }}" {{ $u->supervisor_id === $sup->id ? 'selected' : '' }}>{{ $sup->name }}</option>
                                    @endforeach
                                </select>
                            </form>
                        </td>
                        <td class="whitespace-nowrap px-4 py-3">
                            <span class="inline-flex rounded-full px-2.5 py-0.5 text-xs font-medium {{ $u->status === 'active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' }}">{{ $u->status }}</span>
                            @if ($u->id !== auth()->id())
                                <form method="post" action="{{ route('settings.users.update', $u) }}" class="ml-1 inline" onsubmit="return confirm('{{ $u->status === 'active' ? 'Deactivate' : 'Activate' }} this user?');">
                                    @csrf
                                    @method('PATCH')
                                    <input type="hidden" name="status" value="{{ $u->status === 'active' ? 'deactivated' : 'active' }}" />
                                    <button type="submit" class="text-indigo-600 hover:text-indigo-900 text-xs">
                                        {{ $u->status === 'active' ? 'Deactivate' : 'Activate' }}
                                    </button>
                                </form>
                            @endif
                        </td>
                        <td class="whitespace-nowrap px-4 py-3 text-sm text-gray-500">
                            {{ $u->last_active_at?->diffForHumans() ?? '—' }}
                        </td>
                        <td class="whitespace-nowrap px-4 py-3 text-right text-sm">
                            @if ($u->id !== auth()->id())
                                <button
                                    type="button"
                                    @click="$dispatch('open-reset-password-modal', { id: '{{ $u->id }}', name: '{{ addslashes($u->name) }}' })"
                                    class="text-indigo-600 hover:text-indigo-900 text-xs font-medium mr-2"
                                >
                                    Reset password
                                </button>
                                <form method="post" action="{{ route('settings.users.destroy', $u) }}" class="inline" onsubmit="return confirm('Permanently delete {{ addslashes($u->name) }}? This cannot be undone.');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-red-600 hover:text-red-800 text-xs font-medium">Delete</button>
                                </form>
                            @else
                                <button
                                    type="button"
                                    @click="$dispatch('open-reset-password-modal', { id: '{{ $u->id }}', name: '{{ addslashes($u->name) }}' })"
                                    class="text-indigo-600 hover:text-indigo-900 text-xs font-medium"
                                >
                                    Reset password
                                </button>
                            @endif
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    {{-- Reset Password Modal --}}
    <div
        x-data="{ open: false, user: null }"
        x-on:open-reset-password-modal.window="open = true; user = $event.detail"
        x-on:close-reset-password-modal.window="open = false; user = null"
        x-show="open"
        x-cloak
        class="fixed inset-0 z-50 overflow-y-auto"
        aria-labelledby="reset-password-modal-title"
        role="dialog"
        aria-modal="true"
    >
        <div class="flex min-h-screen items-center justify-center p-4">
            <div x-show="open" x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" @click="$dispatch('close-reset-password-modal')"></div>
            <div x-show="open" x-transition class="relative w-full max-w-md rounded-lg bg-white p-6 shadow-xl">
                <h3 id="reset-password-modal-title" class="text-lg font-semibold text-gray-900" x-text="user ? 'Reset password for ' + user.name : ''"></h3>
                <form x-bind:action="user ? '{{ url('settings/users') }}/' + user.id + '/reset-password' : '#'" method="post" class="mt-4 space-y-4">
                    @csrf
                    <div>
                        <label for="reset_password" class="block text-sm font-medium text-gray-700">New password</label>
                        <input id="reset_password" type="password" name="password" required autocomplete="new-password" class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
                        @error('password')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                    <div>
                        <label for="reset_password_confirmation" class="block text-sm font-medium text-gray-700">Confirm password</label>
                        <input id="reset_password_confirmation" type="password" name="password_confirmation" required autocomplete="new-password" class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
                    </div>
                    <div class="flex justify-end gap-2 pt-2">
                        <button type="button" @click="$dispatch('close-reset-password-modal')" class="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">
                            Cancel
                        </button>
                        <button type="submit" class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700">
                            Reset password
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Invite User Modal --}}
    <div
        x-data="{ open: false }"
        x-on:open-invite-modal.window="open = true"
        x-on:close-invite-modal.window="open = false"
        x-show="open"
        x-cloak
        class="fixed inset-0 z-50 overflow-y-auto"
        aria-labelledby="modal-title"
        role="dialog"
        aria-modal="true"
    >
        <div class="flex min-h-screen items-center justify-center p-4">
            <div x-show="open" x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" @click="open = false"></div>
            <div x-show="open" x-transition class="relative w-full max-w-md rounded-lg bg-white p-6 shadow-xl">
                <h3 id="modal-title" class="text-lg font-semibold text-gray-900">Invite User</h3>
                <form method="post" action="{{ route('settings.users.invite') }}" class="mt-4 space-y-4">
                    @csrf
                    <div>
                        <label for="invite_email" class="block text-sm font-medium text-gray-700">Email</label>
                        <input id="invite_email" type="email" name="email" value="{{ old('email') }}" required class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
                        @error('email')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                    <div>
                        <label for="invite_name" class="block text-sm font-medium text-gray-700">Name</label>
                        <input id="invite_name" type="text" name="name" value="{{ old('name') }}" required class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
                        @error('name')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                    <div>
                        <label for="invite_role" class="block text-sm font-medium text-gray-700">Role</label>
                        <select id="invite_role" name="role" class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="member" {{ old('role', 'member') === 'member' ? 'selected' : '' }}>Member</option>
                            <option value="admin" {{ old('role') === 'admin' ? 'selected' : '' }}>Admin</option>
                        </select>
                        @error('role')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                    <div class="flex justify-end gap-2 pt-2">
                        <button type="button" @click="$dispatch('close-invite-modal')" class="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">
                            Cancel
                        </button>
                        <button type="submit" class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700">
                            Invite
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection