@extends('layouts.admin', [
    'title' => 'Staff',
    'pageTitle' => 'Staff',
    'active' => 'staff',
])

@php
    $statusVariants = [
        'available' => 'success',
        'busy' => 'warning',
        'off_today' => 'muted',
        'inactive' => 'danger',
    ];

    $sortOptions = [
        'name' => 'Name',
        'newest' => 'Newest',
        'appointments_desc' => 'Most Appointments',
    ];

    $hasActiveFilters = collect($filters ?? [])->filter()->isNotEmpty();
@endphp

@section('content')
    <div class="space-y-5">
        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <p class="text-sm font-medium text-booklio-muted">Manage staff profiles, availability, working hours, and assigned services.</p>
            <x-ui.button href="{{ route('admin.staff.create') }}">
                <x-ui.icon name="plus" class="h-4 w-4" />
                Add Staff
            </x-ui.button>
        </div>

        @if (session('status'))
            <div class="rounded-lg border border-emerald-100 bg-emerald-50 px-4 py-3 text-sm font-bold text-emerald-700">
                {{ session('status') }}
            </div>
        @endif

        <section class="grid gap-5 sm:grid-cols-2 xl:grid-cols-4">
            <x-ui.card>
                <p class="text-sm font-semibold text-slate-600">Total Staff</p>
                <p class="mt-3 text-3xl font-extrabold">{{ $stats['total'] }}</p>
                <p class="mt-4 text-xs font-semibold text-booklio-muted">Profiles in this business</p>
            </x-ui.card>
            <x-ui.card>
                <p class="text-sm font-semibold text-slate-600">Available Now</p>
                <p class="mt-3 text-3xl font-extrabold">{{ $stats['available'] }}</p>
                <p class="mt-4 text-xs font-semibold text-emerald-600">Ready for bookings</p>
            </x-ui.card>
            <x-ui.card>
                <p class="text-sm font-semibold text-slate-600">Today Appointments</p>
                <p class="mt-3 text-3xl font-extrabold">{{ $stats['today_appointments'] }}</p>
                <p class="mt-4 text-xs font-semibold text-booklio-muted">Across all staff</p>
            </x-ui.card>
            <x-ui.card>
                <p class="text-sm font-semibold text-slate-600">Avg Rating</p>
                <p class="mt-3 text-3xl font-extrabold">{{ $stats['average_rating'] }}</p>
                <p class="mt-4 text-xs font-semibold text-booklio-muted">{{ $stats['average_rating'] === 'N/A' ? 'Ratings not collected yet' : 'From saved staff ratings' }}</p>
            </x-ui.card>
        </section>

        <x-ui.card>
            <form method="GET" action="{{ route('admin.staff.index') }}" class="booklio-filter-grid">
                <div class="relative">
                    <x-ui.icon name="search" class="pointer-events-none absolute right-3 top-1/2 h-5 w-5 -translate-y-1/2 text-slate-400" />
                    <input name="q" value="{{ $filters['q'] ?? '' }}" class="h-11 w-full rounded-lg border border-booklio-border bg-white pl-4 pr-11 text-sm font-medium shadow-soft outline-none placeholder:text-slate-400 focus:border-booklio-primary focus:ring-4 focus:ring-blue-100" placeholder="Search staff name, role, service..." />
                </div>
                <select name="service_id" class="h-11 rounded-lg border border-booklio-border bg-white px-3 text-sm font-semibold text-slate-700 shadow-soft outline-none focus:border-booklio-primary focus:ring-4 focus:ring-blue-100">
                    <option value="">All Services</option>
                    @foreach ($services as $service)
                        <option value="{{ $service->id }}" @selected((string) ($filters['service_id'] ?? '') === (string) $service->id)>{{ $service->name }}</option>
                    @endforeach
                </select>
                <select name="status" class="h-11 rounded-lg border border-booklio-border bg-white px-3 text-sm font-semibold text-slate-700 shadow-soft outline-none focus:border-booklio-primary focus:ring-4 focus:ring-blue-100">
                    <option value="">All Statuses</option>
                    @foreach (\App\Models\StaffProfile::AVAILABILITY_STATUSES as $statusValue => $statusLabel)
                        <option value="{{ $statusValue }}" @selected(($filters['status'] ?? '') === $statusValue)>{{ $statusLabel }}</option>
                    @endforeach
                </select>
                <select name="sort" class="h-11 rounded-lg border border-booklio-border bg-white px-3 text-sm font-semibold text-slate-700 shadow-soft outline-none focus:border-booklio-primary focus:ring-4 focus:ring-blue-100">
                    @foreach ($sortOptions as $sortValue => $sortLabel)
                        <option value="{{ $sortValue }}" @selected(($filters['sort'] ?? 'name') === $sortValue)>{{ $sortLabel }}</option>
                    @endforeach
                </select>
                <x-ui.button variant="secondary" type="submit">
                    <x-ui.icon name="filter" class="h-4 w-4" />
                    Filter
                </x-ui.button>
                @if ($hasActiveFilters)
                    <x-ui.button variant="ghost" href="{{ route('admin.staff.index') }}">Reset</x-ui.button>
                @endif
            </form>
        </x-ui.card>

        <x-ui.card title="Staff List" padding="p-0">
            @if ($staffMembers->isNotEmpty())
                <div class="hidden overflow-x-auto md:block booklio-scrollbar">
                    <table class="min-w-[1380px] w-full divide-y divide-booklio-border">
                        <thead class="bg-slate-50">
                            <tr>
                                @foreach (['Staff', 'Contact', 'Assigned Services', 'Availability', 'Working Hours', 'Today', 'This Month', 'Rating', 'Actions'] as $heading)
                                    <th class="px-5 py-4 text-left text-xs font-bold uppercase tracking-wide text-booklio-muted">{{ $heading }}</th>
                                @endforeach
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-booklio-border bg-white">
                            @foreach ($staffMembers as $member)
                                @php
                                    $availabilityKey = $member->status === 'inactive' ? 'inactive' : $member->availability_status;
                                    $serviceNames = $member->services->pluck('name')->join(', ') ?: 'Unassigned';
                                    $openDays = $member->workingHours->where('is_closed', false)->count();
                                @endphp
                                <tr class="transition hover:bg-slate-50/80">
                                    <td class="px-5 py-4">
                                        <div class="flex items-center gap-3">
                                            @if ($member->avatar_url)
                                                <img src="{{ $member->avatar_url }}" alt="{{ $member->name }}" class="h-11 w-11 rounded-full object-cover">
                                            @else
                                                <div class="flex h-11 w-11 items-center justify-center rounded-full bg-blue-50 text-xs font-extrabold text-booklio-primary">{{ $member->initials }}</div>
                                            @endif
                                            <div class="min-w-0">
                                                <p class="truncate text-sm font-extrabold">{{ $member->name }}</p>
                                                <p class="truncate text-xs font-medium text-booklio-muted">{{ $member->role ?: 'Staff Member' }}</p>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-5 py-4">
                                        <p class="text-sm font-semibold">{{ $member->phone ?: 'No phone' }}</p>
                                        <p class="max-w-[220px] truncate text-xs font-medium text-booklio-muted">{{ $member->email ?: 'No email' }}</p>
                                    </td>
                                    <td class="px-5 py-4 text-sm font-semibold text-slate-700"><span class="block max-w-[260px] break-words">{{ $serviceNames }}</span></td>
                                    <td class="px-5 py-4"><x-ui.badge :variant="$statusVariants[$availabilityKey] ?? 'primary'">{{ $member->availability_label }}</x-ui.badge></td>
                                    <td class="px-5 py-4 text-sm font-semibold text-slate-700">{{ $openDays }} days/week</td>
                                    <td class="px-5 py-4 text-sm font-extrabold">{{ $member->today_appointments_count }}</td>
                                    <td class="px-5 py-4 text-sm font-extrabold">{{ $member->month_appointments_count }}</td>
                                    <td class="px-5 py-4 text-sm font-extrabold">{{ $member->rating_display }}</td>
                                    <td class="px-5 py-4">
                                        <div class="flex flex-wrap items-center gap-2">
                                            <x-ui.button size="sm" variant="secondary" href="{{ route('admin.staff.show', $member) }}">View</x-ui.button>
                                            <x-ui.button size="sm" variant="ghost" href="{{ route('admin.staff.edit', $member) }}">Edit</x-ui.button>
                                            <x-ui.button size="sm" variant="ghost" href="{{ route('admin.staff.working-hours', $member) }}">Hours</x-ui.button>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="divide-y divide-booklio-border md:hidden">
                    @foreach ($staffMembers as $member)
                        @php
                            $availabilityKey = $member->status === 'inactive' ? 'inactive' : $member->availability_status;
                            $openDays = $member->workingHours->where('is_closed', false)->count();
                        @endphp
                        <div class="p-5">
                            <div class="flex items-start justify-between gap-4">
                                <div class="flex min-w-0 items-center gap-3">
                                    @if ($member->avatar_url)
                                        <img src="{{ $member->avatar_url }}" alt="{{ $member->name }}" class="h-11 w-11 shrink-0 rounded-full object-cover">
                                    @else
                                        <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-blue-50 text-xs font-extrabold text-booklio-primary">{{ $member->initials }}</div>
                                    @endif
                                    <div class="min-w-0">
                                        <p class="truncate text-sm font-extrabold">{{ $member->name }}</p>
                                        <p class="truncate text-xs font-medium text-booklio-muted">{{ $member->role ?: 'Staff Member' }}</p>
                                    </div>
                                </div>
                                <x-ui.badge :variant="$statusVariants[$availabilityKey] ?? 'primary'">{{ $member->availability_label }}</x-ui.badge>
                            </div>
                            <div class="mt-4 grid grid-cols-2 gap-3 text-sm">
                                <div><p class="text-xs font-bold text-booklio-muted">Today</p><p class="font-bold">{{ $member->today_appointments_count }}</p></div>
                                <div><p class="text-xs font-bold text-booklio-muted">Month</p><p class="font-bold">{{ $member->month_appointments_count }}</p></div>
                                <div><p class="text-xs font-bold text-booklio-muted">Phone</p><p class="font-bold">{{ $member->phone ?: 'No phone' }}</p></div>
                                <div><p class="text-xs font-bold text-booklio-muted">Hours</p><p class="font-bold">{{ $openDays }} days/week</p></div>
                            </div>
                            <div class="mt-4 grid grid-cols-3 gap-2">
                                <x-ui.button size="sm" variant="secondary" href="{{ route('admin.staff.show', $member) }}">View</x-ui.button>
                                <x-ui.button size="sm" variant="ghost" href="{{ route('admin.staff.edit', $member) }}">Edit</x-ui.button>
                                <x-ui.button size="sm" variant="ghost" href="{{ route('admin.staff.working-hours', $member) }}">Hours</x-ui.button>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="border-t border-booklio-border px-5 py-4">
                    <x-ui.pagination :paginator="$staffMembers" />
                </div>
            @else
                <div class="p-8">
                    <div class="mx-auto max-w-md text-center">
                        <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-xl bg-blue-50 text-booklio-primary">
                            <x-ui.icon name="users" class="h-7 w-7" />
                        </div>
                        <h3 class="mt-4 text-base font-extrabold text-booklio-dark">No staff found</h3>
                        <p class="mt-2 text-sm leading-6 text-booklio-muted">{{ $hasActiveFilters ? 'No staff profiles match the current filters.' : 'Add staff profiles so customers can choose providers while booking.' }}</p>
                        <x-ui.button href="{{ route('admin.staff.create') }}" class="mt-5">Add Staff</x-ui.button>
                    </div>
                </div>
            @endif
        </x-ui.card>
    </div>
@endsection