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

@php
    $availabilityKey = $staff->status === 'inactive' ? 'inactive' : $staff->availability_status;
    $availabilityVariants = [
        'available' => 'success',
        'busy' => 'warning',
        'off_today' => 'muted',
        'inactive' => 'danger',
    ];

    $appointmentVariants = [
        'confirmed' => 'primary',
        'checked_in' => 'purple',
        'pending' => 'warning',
        'completed' => 'success',
        'cancelled' => 'danger',
        'no_show' => 'danger',
    ];
@endphp

@section('content')
    <div class="space-y-5">
        @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

        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <x-ui.button variant="secondary" href="{{ route('admin.staff.index') }}">
                <x-ui.icon name="arrow-left" class="h-4 w-4" />
                Back to Staff
            </x-ui.button>
            <div class="flex flex-col gap-3 sm:flex-row">
                <x-ui.button variant="secondary" href="{{ route('admin.staff.working-hours', $staff) }}">
                    <x-ui.icon name="clock" class="h-4 w-4" />
                    Working Hours
                </x-ui.button>
                <x-ui.button href="{{ route('admin.staff.edit', $staff) }}">
                    <x-ui.icon name="edit" class="h-4 w-4" />
                    Edit Profile
                </x-ui.button>
                <form method="POST" action="{{ route('admin.staff.destroy', $staff) }}" onsubmit="return confirm('Delete this staff profile?');">
                    @csrf
                    @method('DELETE')
                    <x-ui.button type="submit" variant="danger">
                        <x-ui.icon name="trash" class="h-4 w-4" />
                        Delete
                    </x-ui.button>
                </form>
            </div>
        </div>

        <section class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_380px]">
            <div class="space-y-5">
                <x-ui.card>
                    <div class="flex flex-col gap-5 sm:flex-row sm:items-start sm:justify-between">
                        <div class="flex min-w-0 items-center gap-4">
                            @if ($staff->avatar_url)
                                <img src="{{ $staff->avatar_url }}" alt="{{ $staff->name }}" class="h-20 w-20 rounded-full object-cover ring-4 ring-white">
                            @else
                                <div class="flex h-20 w-20 shrink-0 items-center justify-center rounded-full bg-blue-50 text-xl font-extrabold text-booklio-primary ring-4 ring-white">{{ $staff->initials }}</div>
                            @endif
                            <div class="min-w-0">
                                <div class="flex flex-wrap items-center gap-2">
                                    <h2 class="break-words text-2xl font-extrabold">{{ $staff->name }}</h2>
                                    <x-ui.badge :variant="$availabilityVariants[$availabilityKey] ?? 'primary'">{{ $staff->availability_label }}</x-ui.badge>
                                </div>
                                <p class="mt-1 text-sm font-semibold text-booklio-muted">{{ $staff->role ?: 'Staff Member' }}</p>
                            </div>
                        </div>
                        <div class="text-left sm:text-right">
                            <p class="text-sm font-bold text-booklio-muted">Monthly Revenue</p>
                            <p class="mt-1 text-2xl font-extrabold">${{ number_format($monthlyRevenue, 2) }}</p>
                        </div>
                    </div>

                    <div class="mt-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
                        <div class="rounded-lg border border-booklio-border bg-slate-50 p-4"><p class="text-xs font-bold uppercase text-booklio-muted">Today</p><p class="mt-2 text-sm font-extrabold">{{ $staff->today_appointments_count }} appointments</p></div>
                        <div class="rounded-lg border border-booklio-border bg-slate-50 p-4"><p class="text-xs font-bold uppercase text-booklio-muted">This Month</p><p class="mt-2 text-sm font-extrabold">{{ $staff->month_appointments_count }} bookings</p></div>
                        <div class="rounded-lg border border-booklio-border bg-slate-50 p-4"><p class="text-xs font-bold uppercase text-booklio-muted">Completed</p><p class="mt-2 text-sm font-extrabold">{{ $staff->completed_appointments_count }}</p></div>
                        <div class="rounded-lg border border-booklio-border bg-slate-50 p-4"><p class="text-xs font-bold uppercase text-booklio-muted">Rating</p><p class="mt-2 text-sm font-extrabold">{{ $staff->rating_display }}</p></div>
                    </div>
                </x-ui.card>

                <x-ui.card title="Bio">
                    <p class="text-sm leading-6 text-slate-700">{{ $staff->bio ?: 'No bio or internal note has been added yet.' }}</p>
                </x-ui.card>

                <x-ui.card title="Assigned Services">
                    @if ($staff->services->isNotEmpty())
                        <div class="flex flex-wrap gap-2">
                            @foreach ($staff->services as $service)
                                <span class="rounded-full bg-blue-50 px-3 py-1.5 text-xs font-bold text-booklio-primary">{{ $service->name }}</span>
                            @endforeach
                        </div>
                    @else
                        <div class="rounded-lg border border-dashed border-booklio-border bg-slate-50 p-5 text-sm font-medium text-booklio-muted">
                            No services assigned yet.
                        </div>
                    @endif
                </x-ui.card>

                <x-ui.card title="Today's Appointments">
                    @if ($todayAppointments->isNotEmpty())
                        <div class="space-y-3">
                            @foreach ($todayAppointments as $appointment)
                                @php
                                    $statusValue = $appointment->status->value ?? $appointment->status;
                                    $statusLabel = str($statusValue)->replace('_', ' ')->title();
                                @endphp
                                <div class="flex items-center justify-between gap-4 rounded-lg border border-booklio-border p-4">
                                    <div class="min-w-0">
                                        <p class="truncate text-sm font-extrabold">{{ $appointment->customer?->name ?? 'Walk-in customer' }}</p>
                                        <p class="truncate text-xs font-medium text-booklio-muted">{{ $appointment->service?->name ?? 'Service' }} - {{ $appointment->starts_at?->format('g:i A') }}</p>
                                    </div>
                                    <x-ui.badge :variant="$appointmentVariants[$statusValue] ?? 'primary'">{{ $statusLabel }}</x-ui.badge>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="rounded-lg border border-dashed border-booklio-border bg-slate-50 p-5 text-sm font-medium text-booklio-muted">
                            No appointments scheduled for today.
                        </div>
                    @endif
                </x-ui.card>
            </div>

            <div class="space-y-5">
                <x-ui.card title="Contact Info">
                    <div class="space-y-4">
                        <div class="flex items-center gap-3"><x-ui.icon name="phone" class="h-5 w-5 text-booklio-primary" /><span class="min-w-0 break-words text-sm font-bold">{{ $staff->phone ?: 'No phone added' }}</span></div>
                        <div class="flex items-center gap-3"><x-ui.icon name="mail" class="h-5 w-5 text-booklio-primary" /><span class="min-w-0 break-words text-sm font-bold">{{ $staff->email ?: 'No email added' }}</span></div>
                        <div class="flex items-center gap-3"><x-ui.icon name="calendar-days" class="h-5 w-5 text-booklio-primary" /><span class="text-sm font-bold">{{ $workingHoursSummary['working_days'] }} working days/week</span></div>
                    </div>
                </x-ui.card>

                <x-ui.card title="Working Hours Summary">
                    <div class="space-y-3 text-sm">
                        <div class="flex items-center justify-between gap-3"><span class="font-bold text-booklio-muted">Weekly hours</span><span class="font-extrabold">{{ number_format($workingHoursSummary['weekly_hours'], 1) }}</span></div>
                        <div class="flex items-center justify-between gap-3"><span class="font-bold text-booklio-muted">Working days</span><span class="font-extrabold">{{ $workingHoursSummary['working_days'] }}</span></div>
                        <div class="flex items-center justify-between gap-3"><span class="font-bold text-booklio-muted">Breaks</span><span class="font-extrabold">{{ $workingHoursSummary['breaks'] }}</span></div>
                    </div>
                    <x-ui.button variant="secondary" href="{{ route('admin.staff.working-hours', $staff) }}" class="mt-5 w-full">Edit Hours</x-ui.button>
                </x-ui.card>

                <x-ui.card title="Availability">
                    <div class="rounded-lg {{ $availabilityKey === 'available' ? 'bg-emerald-50' : 'bg-slate-50' }} px-4 py-3">
                        <p class="text-sm font-extrabold {{ $availabilityKey === 'available' ? 'text-emerald-700' : 'text-slate-700' }}">{{ $staff->availability_label }}</p>
                        <p class="mt-1 text-xs font-medium {{ $availabilityKey === 'available' ? 'text-emerald-600' : 'text-slate-500' }}">Availability is ready for booking rules and calendar logic.</p>
                    </div>
                </x-ui.card>
            </div>
        </section>
    </div>
@endsection