@extends('layouts.app')

@section('title', 'Team')

@section('content')
<div class="px-8 py-8">

    {{-- Flash messages --}}
    @if (session('success'))
        <div class="mb-6 flex items-center gap-3 rounded-xl bg-emerald-50 border border-emerald-100 px-4 py-3 text-sm text-emerald-700">
            <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
            {{ session('success') }}
        </div>
    @endif

    @if ($errors->has('delete'))
        <div class="mb-4 flex items-center gap-3 rounded-xl bg-red-50 border border-red-100 px-4 py-3 text-sm text-red-600">
            {{ $errors->first('delete') }}
        </div>
    @endif

    {{-- Page header --}}
    <div class="flex items-center justify-between mb-8">
        <div>
            <h1 class="text-xl font-semibold text-slate-900">Team</h1>
            <p class="text-sm text-slate-400 mt-0.5">{{ $users->count() }} {{ Str::plural('member', $users->count()) }}</p>
        </div>
    </div>

    {{-- Invite form (Admin + HR only) --}}
    @if (auth()->user()->can('users.invite'))
    <div class="bg-white border border-slate-100 rounded-xl p-6 mb-8">
        <p class="text-sm font-semibold text-slate-900 mb-4">Invite a team member</p>
        <form method="POST" action="{{ route('invitations.invite') }}" class="flex items-end gap-4 flex-wrap">
            @csrf
            <div class="flex-1 min-w-48">
                <label for="email" class="block text-xs font-medium text-slate-600 mb-1.5">Email address</label>
                <input type="email" id="email" name="email" value="{{ old('email') }}" required
                       placeholder="colleague@example.com"
                       class="w-full border border-slate-200 rounded-lg px-3 py-2.5 text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-sky-700 focus:border-transparent @error('email') border-red-300 @enderror">
                @error('email')<p class="text-xs text-red-600 mt-1">{{ $message }}</p>@enderror
            </div>
            <div class="w-52">
                <label for="role" class="block text-xs font-medium text-slate-600 mb-1.5">Role</label>
                <select id="role" name="role" required
                        class="w-full border border-slate-200 rounded-lg px-3 py-2.5 text-sm text-slate-900 bg-white focus:outline-none focus:ring-2 focus:ring-sky-700 focus:border-transparent @error('role') border-red-300 @enderror">
                    <option value="">— Select role —</option>
                    @foreach ($roles as $role)
                        <option value="{{ $role }}" {{ old('role') === $role ? 'selected' : '' }}>{{ $role }}</option>
                    @endforeach
                </select>
                @error('role')<p class="text-xs text-red-600 mt-1">{{ $message }}</p>@enderror
            </div>
            <button type="submit"
                    class="px-4 py-2.5 bg-sky-700 hover:bg-sky-800 text-white text-sm font-medium rounded-lg transition-colors cursor-pointer whitespace-nowrap">
                Send Invitation
            </button>
        </form>
    </div>
    @endif

    {{-- Users table --}}
    <div class="bg-white border border-slate-100 rounded-xl overflow-hidden mb-8">
        <div class="px-5 py-4 border-b border-slate-100">
            <p class="text-sm font-semibold text-slate-900">Members</p>
        </div>
        @if ($users->isEmpty())
            <div class="py-16 text-center">
                <p class="text-sm text-slate-400">No team members found.</p>
            </div>
        @else
            <table class="w-full">
                <thead class="bg-slate-50 border-b border-slate-100">
                    <tr>
                        <th scope="col" class="px-5 py-3.5 text-left text-xs font-medium text-slate-400 uppercase tracking-wide">Name</th>
                        <th scope="col" class="px-5 py-3.5 text-left text-xs font-medium text-slate-400 uppercase tracking-wide">Email</th>
                        <th scope="col" class="px-5 py-3.5 text-left text-xs font-medium text-slate-400 uppercase tracking-wide">Role</th>
                        <th scope="col" class="px-5 py-3.5 text-left text-xs font-medium text-slate-400 uppercase tracking-wide">Joined</th>
                        @if (auth()->user()->can('users.manage'))
                        <th scope="col" class="px-5 py-3.5 text-right text-xs font-medium text-slate-400 uppercase tracking-wide">Actions</th>
                        @endif
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-50">
                    @foreach ($users as $member)
                        <tr class="hover:bg-slate-50 transition-colors duration-150">
                            <td class="px-5 py-4 text-sm font-medium text-slate-900">
                                {{ $member->name }}
                                @if ($member->id === auth()->id())
                                    <span class="ml-1.5 text-xs text-slate-400">(you)</span>
                                @endif
                            </td>
                            <td class="px-5 py-4 text-sm text-slate-500">{{ $member->email }}</td>
                            <td class="px-5 py-4 text-sm">
                                @foreach ($member->roles as $role)
                                    @php
                                        $roleColor = match($role->name) {
                                            'Admin'            => 'bg-slate-900 text-white',
                                            'Business Manager' => 'bg-sky-700 text-white',
                                            'Finance Manager'  => 'bg-emerald-700 text-white',
                                            'Project Manager'  => 'bg-violet-600 text-white',
                                            'Client Manager'   => 'bg-amber-600 text-white',
                                            'HR Manager'       => 'bg-pink-600 text-white',
                                            default            => 'bg-slate-100 text-slate-600',
                                        };
                                    @endphp
                                    <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium {{ $roleColor }}">
                                        {{ $role->name }}
                                    </span>
                                @endforeach
                            </td>
                            <td class="px-5 py-4 text-sm text-slate-500">
                                {{ $member->created_at->format('d M Y') }}
                            </td>
                            @if (auth()->user()->can('users.manage'))
                            <td class="px-5 py-4 text-right">
                                @if ($member->id !== auth()->id())
                                    <form method="POST" action="{{ route('users.destroy', $member) }}"
                                          onsubmit="return confirm('Remove this team member? This cannot be undone.')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit"
                                                class="text-red-400 hover:text-red-600 transition-colors cursor-pointer text-base leading-none"
                                                title="Remove member">&times;</button>
                                    </form>
                                @endif
                            </td>
                            @endif
                        </tr>
                    @endforeach
                </tbody>
            </table>
        @endif
    </div>

    {{-- Pending invitations --}}
    @if (auth()->user()->can('users.invite') && $pendingInvitations->isNotEmpty())
    <div class="bg-white border border-slate-100 rounded-xl overflow-hidden">
        <div class="px-5 py-4 border-b border-slate-100">
            <p class="text-sm font-semibold text-slate-900">Pending Invitations</p>
        </div>
        <table class="w-full">
            <thead class="bg-slate-50 border-b border-slate-100">
                <tr>
                    <th scope="col" class="px-5 py-3.5 text-left text-xs font-medium text-slate-400 uppercase tracking-wide">Email</th>
                    <th scope="col" class="px-5 py-3.5 text-left text-xs font-medium text-slate-400 uppercase tracking-wide">Role</th>
                    <th scope="col" class="px-5 py-3.5 text-left text-xs font-medium text-slate-400 uppercase tracking-wide">Invited By</th>
                    <th scope="col" class="px-5 py-3.5 text-left text-xs font-medium text-slate-400 uppercase tracking-wide">Expires</th>
                    <th scope="col" class="px-5 py-3.5 text-right text-xs font-medium text-slate-400 uppercase tracking-wide">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-50">
                @foreach ($pendingInvitations as $inv)
                    <tr class="hover:bg-slate-50 transition-colors duration-150">
                        <td class="px-5 py-4 text-sm text-slate-900">{{ $inv->email }}</td>
                        <td class="px-5 py-4 text-sm text-slate-500">{{ $inv->role }}</td>
                        <td class="px-5 py-4 text-sm text-slate-500">{{ $inv->inviter?->name ?? '—' }}</td>
                        <td class="px-5 py-4 text-sm text-slate-500">
                            @if($inv->expires_at->isPast() && !$inv->accepted_at)
                                <span class="text-amber-500">Expired</span>
                            @else
                                {{ $inv->expires_at->format('d M Y') }}
                            @endif
                        </td>
                        <td class="px-5 py-4 text-right">
                            @if(!$inv->accepted_at)
                            <form method="POST"
                                  action="{{ route('invitations.resend', $inv) }}"
                                  class="inline">
                                @csrf
                                <button type="submit"
                                        class="text-xs text-sky-600 hover:text-sky-800 hover:underline bg-transparent border-none cursor-pointer font-medium">
                                    {{ $inv->expires_at->isPast() ? 'Resend (expired)' : 'Resend' }}
                                </button>
                            </form>
                            @endif
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    @endif

</div>
@endsection